From 44ab7dd7528f8a5275ef9dadd570b5a917600766 Mon Sep 17 00:00:00 2001 From: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com> Date: Thu, 13 Apr 2023 09:03:10 -0400 Subject: [PATCH 01/60] =?UTF-8?q?refactor:=20[M3-6395]=20=E2=80=93=20MUI?= =?UTF-8?q?=20v5=20Migration=20-=20`Components=20>=20StackScript`=20(#8992?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/StackScript/StackScript.tsx | 17 +++++++++-------- .../manager/src/components/StackScript/index.ts | 4 ++-- 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/packages/manager/src/components/StackScript/StackScript.tsx b/packages/manager/src/components/StackScript/StackScript.tsx index f1e9245c85a..740e0c604fb 100644 --- a/packages/manager/src/components/StackScript/StackScript.tsx +++ b/packages/manager/src/components/StackScript/StackScript.tsx @@ -1,12 +1,12 @@ import { StackScript as StackScriptType } from '@linode/api-v4/lib/stackscripts'; +import Box from '@mui/material/Box'; +import { Theme, useTheme } from '@mui/material/styles'; import * as React from 'react'; import { Link, useHistory } from 'react-router-dom'; import Button from 'src/components/Button'; import CopyTooltip from 'src/components/CopyTooltip'; import Chip from 'src/components/core/Chip'; import Divider from 'src/components/core/Divider'; -import { makeStyles } from '@mui/styles'; -import { Theme, useTheme } from '@mui/material/styles'; import Typography from 'src/components/core/Typography'; import DateTimeDisplay from 'src/components/DateTimeDisplay'; import H1Header from 'src/components/H1Header'; @@ -14,10 +14,10 @@ import ScriptCode from 'src/components/ScriptCode'; import { useAccountManagement } from 'src/hooks/useAccountManagement'; import { listToItemsByID } from 'src/queries/base'; import { useAllImagesQuery } from 'src/queries/images'; -import Box from '@mui/material/Box'; +import { makeStyles } from 'tss-react/mui'; import TooltipIcon from '../TooltipIcon'; -const useStyles = makeStyles((theme: Theme) => ({ +const useStyles = makeStyles()((theme: Theme) => ({ root: { backgroundColor: theme.bg.bgPaper, '.detailsWrapper &': { @@ -73,7 +73,7 @@ const useStyles = makeStyles((theme: Theme) => ({ }, })); -export interface Props { +export interface StackScriptProps { data: StackScriptType; userCanModify: boolean; } @@ -83,7 +83,7 @@ interface StackScriptImages { deprecated: JSX.Element[]; } -export const StackScript: React.FC = (props) => { +export const StackScript = (props: StackScriptProps) => { const { data: { username, @@ -99,10 +99,11 @@ export const StackScript: React.FC = (props) => { userCanModify, } = props; + const { classes } = useStyles(); + const { profile } = useAccountManagement(); + const theme = useTheme(); - const classes = useStyles(); const history = useHistory(); - const { profile } = useAccountManagement(); const { data: imagesData } = useAllImagesQuery( {}, diff --git a/packages/manager/src/components/StackScript/index.ts b/packages/manager/src/components/StackScript/index.ts index 947f7aa54f6..8eea9ba0274 100644 --- a/packages/manager/src/components/StackScript/index.ts +++ b/packages/manager/src/components/StackScript/index.ts @@ -1,4 +1,4 @@ -import StackScript, { Props as _Props } from './StackScript'; +import StackScript, { StackScriptProps } from './StackScript'; export default StackScript; /* tslint:disable */ -export interface Props extends _Props {} +export interface Props extends StackScriptProps {} From a142489739e7827e49d82a111d588eb7ada33413 Mon Sep 17 00:00:00 2001 From: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com> Date: Thu, 13 Apr 2023 09:57:03 -0400 Subject: [PATCH 02/60] =?UTF-8?q?refactor:=20[M3-6394]=20=E2=80=93=20MUI?= =?UTF-8?q?=20v5=20Migration=20-=20`Components=20>=20SplashScreen`=20(#899?= =?UTF-8?q?4)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/SplashScreen/SplashScreen.tsx | 44 ++++++++----------- 1 file changed, 19 insertions(+), 25 deletions(-) diff --git a/packages/manager/src/components/SplashScreen/SplashScreen.tsx b/packages/manager/src/components/SplashScreen/SplashScreen.tsx index 8ded290b636..a2bdd46a811 100644 --- a/packages/manager/src/components/SplashScreen/SplashScreen.tsx +++ b/packages/manager/src/components/SplashScreen/SplashScreen.tsx @@ -1,32 +1,13 @@ +import { styled } from '@mui/material/styles'; import * as React from 'react'; import { connect } from 'react-redux'; import { compose } from 'recompose'; -import { makeStyles } from '@mui/styles'; +import useFeatureFlagsLoad from 'src/hooks/useFeatureFlagLoad'; import { MapState } from 'src/store/types'; import { srSpeak } from 'src/utilities/accessibility'; -import useFeatureFlagsLoad from 'src/hooks/useFeatureFlagLoad'; import CircleProgress from '../CircleProgress'; -const useStyles = makeStyles({ - root: { - backgroundColor: '#f4f4f4', - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - height: '100vh', - width: '100vw', - position: 'fixed', - zIndex: 100, - top: 0, - left: 0, - }, -}); - -type CombinedProps = StateProps; - -const SplashScreen = (props: CombinedProps) => { - const classes = useStyles(); - +const SplashScreen = (props: StateProps) => { React.useEffect(() => { srSpeak('Loading Linode Cloud Manager', 'polite'); }, []); @@ -34,9 +15,9 @@ const SplashScreen = (props: CombinedProps) => { const { featureFlagsLoading } = useFeatureFlagsLoad(); return props.appIsLoading || featureFlagsLoading ? ( -
+ -
+ ) : null; }; @@ -50,4 +31,17 @@ const mapStateToProps: MapState = (state) => ({ const connected = connect(mapStateToProps); -export default compose(connected, React.memo)(SplashScreen); +export default compose(connected, React.memo)(SplashScreen); + +const StyledDiv = styled('div')(({ theme }) => ({ + backgroundColor: theme.bg.main, + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + height: '100vh', + width: '100vw', + position: 'fixed', + zIndex: 100, + top: 0, + left: 0, +})); From f4df80a7915b5294f96fd3913ad6b9e9f3ebea8a Mon Sep 17 00:00:00 2001 From: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com> Date: Thu, 13 Apr 2023 10:14:34 -0400 Subject: [PATCH 03/60] refactor: [M3-6418] - MUI v5 Migration - Components > Toggle (#8990) clean up and modernization of the `` component --------- Co-authored-by: Banks Nussman --- .../src/components/Toggle/Toggle.stories.mdx | 2 +- packages/manager/src/components/Toggle/Toggle.tsx | 9 +++------ packages/manager/src/components/Toggle/index.ts | 4 ++-- packages/manager/src/components/Toggle/toggle.css | 13 ------------- packages/manager/src/components/core/Switch.ts | 6 ------ .../manager/src/features/Account/AutoBackups.tsx | 2 +- .../manager/src/features/Account/NetworkHelper.tsx | 2 +- .../manager/src/features/Backups/AutoEnroll.tsx | 2 +- .../NodePoolsDisplay/AutoscalePoolDialog.tsx | 2 +- .../Managed/SSHAccess/EditSSHAccessDrawer.tsx | 2 +- .../NodeBalancers/NodeBalancerConfigPanel.tsx | 2 +- .../AccessKeyLanding/LimitedAccessControls.tsx | 2 +- .../ObjectStorage/BucketDetail/AccessSelect.tsx | 2 +- .../AuthenticationSettings/TwoFactor/TwoFactor.tsx | 2 +- .../src/features/Profile/Settings/Settings.tsx | 2 +- .../manager/src/features/Users/CreateUserDrawer.tsx | 2 +- .../manager/src/features/Users/UserPermissions.tsx | 2 +- .../LinodesDetail/LinodeSettings/AlertSection.tsx | 2 +- .../LinodeSettings/LinodeConfigDialog.tsx | 2 +- .../LinodeSettings/LinodeWatchdogPanel.tsx | 2 +- 20 files changed, 21 insertions(+), 43 deletions(-) delete mode 100644 packages/manager/src/components/Toggle/toggle.css delete mode 100644 packages/manager/src/components/core/Switch.ts diff --git a/packages/manager/src/components/Toggle/Toggle.stories.mdx b/packages/manager/src/components/Toggle/Toggle.stories.mdx index de822f40d40..16e4bab9884 100644 --- a/packages/manager/src/components/Toggle/Toggle.stories.mdx +++ b/packages/manager/src/components/Toggle/Toggle.stories.mdx @@ -1,6 +1,6 @@ import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs'; import FormControlLabel from 'src/components/core/FormControlLabel'; -import Toggle from './Toggle'; +import { Toggle } from './Toggle'; diff --git a/packages/manager/src/components/Toggle/Toggle.tsx b/packages/manager/src/components/Toggle/Toggle.tsx index caec0132385..1698ce563d4 100644 --- a/packages/manager/src/components/Toggle/Toggle.tsx +++ b/packages/manager/src/components/Toggle/Toggle.tsx @@ -1,16 +1,15 @@ import * as React from 'react'; import ToggleOff from 'src/assets/icons/toggleOff.svg'; import ToggleOn from 'src/assets/icons/toggleOn.svg'; -import Switch, { SwitchProps } from 'src/components/core/Switch'; +import Switch, { SwitchProps } from '@mui/material/Switch'; import { TooltipIcon } from 'src/components/TooltipIcon/TooltipIcon'; -import './toggle.css'; -interface Props extends SwitchProps { +export interface ToggleProps extends SwitchProps { tooltipText?: JSX.Element | string; interactive?: boolean; } -const Toggle: React.FC = (props) => { +export const Toggle = (props: ToggleProps) => { const { tooltipText, interactive, ...rest } = props; return ( @@ -32,5 +31,3 @@ const Toggle: React.FC = (props) => { ); }; - -export default Toggle; diff --git a/packages/manager/src/components/Toggle/index.ts b/packages/manager/src/components/Toggle/index.ts index c22bb3e8aac..e005a382419 100644 --- a/packages/manager/src/components/Toggle/index.ts +++ b/packages/manager/src/components/Toggle/index.ts @@ -1,2 +1,2 @@ -import Toggle from './Toggle'; -export default Toggle; +export { Toggle } from './Toggle'; +export type { ToggleProps } from './Toggle'; diff --git a/packages/manager/src/components/Toggle/toggle.css b/packages/manager/src/components/Toggle/toggle.css deleted file mode 100644 index 6b92c4a5955..00000000000 --- a/packages/manager/src/components/Toggle/toggle.css +++ /dev/null @@ -1,13 +0,0 @@ -label.toggleLabel { - display: flex; - flex-direction: column-reverse; - align-items: flex-start; - margin: 0; -} - -label.toggleLabel > span:last-child { - position: relative; - left: 12px; - top: 5px; - font-size: .9rem; -} \ No newline at end of file diff --git a/packages/manager/src/components/core/Switch.ts b/packages/manager/src/components/core/Switch.ts deleted file mode 100644 index 0732ef93b2f..00000000000 --- a/packages/manager/src/components/core/Switch.ts +++ /dev/null @@ -1,6 +0,0 @@ -import Switch, { SwitchProps as _SwitchProps } from '@mui/material/Switch'; - -/* tslint:disable-next-line:no-empty-interface */ -export interface SwitchProps extends _SwitchProps {} - -export default Switch; diff --git a/packages/manager/src/features/Account/AutoBackups.tsx b/packages/manager/src/features/Account/AutoBackups.tsx index 0669378f08c..2732839ccc3 100644 --- a/packages/manager/src/features/Account/AutoBackups.tsx +++ b/packages/manager/src/features/Account/AutoBackups.tsx @@ -6,7 +6,7 @@ import FormControlLabel from 'src/components/core/FormControlLabel'; import Grid from 'src/components/Grid'; import Notice from 'src/components/Notice'; import OpenInNew from '@mui/icons-material/OpenInNew'; -import Toggle from 'src/components/Toggle'; +import { Toggle } from 'src/components/Toggle'; import Typography from 'src/components/core/Typography'; const useStyles = makeStyles()((theme: Theme) => ({ diff --git a/packages/manager/src/features/Account/NetworkHelper.tsx b/packages/manager/src/features/Account/NetworkHelper.tsx index b81702fa174..731522b1faf 100644 --- a/packages/manager/src/features/Account/NetworkHelper.tsx +++ b/packages/manager/src/features/Account/NetworkHelper.tsx @@ -3,7 +3,7 @@ import FormControlLabel from 'src/components/core/FormControlLabel'; import Typography from 'src/components/core/Typography'; import Accordion from 'src/components/Accordion'; import Grid from 'src/components/Grid'; -import Toggle from 'src/components/Toggle'; +import { Toggle } from 'src/components/Toggle'; interface Props { onChange: () => void; diff --git a/packages/manager/src/features/Backups/AutoEnroll.tsx b/packages/manager/src/features/Backups/AutoEnroll.tsx index 05cb72d63e2..0c5e0d8c41f 100644 --- a/packages/manager/src/features/Backups/AutoEnroll.tsx +++ b/packages/manager/src/features/Backups/AutoEnroll.tsx @@ -7,7 +7,7 @@ import Typography from 'src/components/core/Typography'; import ExternalLink from 'src/components/ExternalLink'; import Grid from 'src/components/Grid'; import Notice from 'src/components/Notice'; -import Toggle from 'src/components/Toggle'; +import { Toggle } from 'src/components/Toggle'; type ClassNames = 'root' | 'header' | 'toggleLabel' | 'toggleLabelText'; diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/AutoscalePoolDialog.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/AutoscalePoolDialog.tsx index f158abf6ff4..6a20147387d 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/AutoscalePoolDialog.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/AutoscalePoolDialog.tsx @@ -13,7 +13,7 @@ import Grid from 'src/components/Grid'; import Link from 'src/components/Link'; import Notice from 'src/components/Notice'; import TextField from 'src/components/TextField'; -import Toggle from 'src/components/Toggle'; +import { Toggle } from 'src/components/Toggle'; import { AutoscaleSettings, KubeNodePoolResponse } from '@linode/api-v4'; import { useUpdateNodePoolMutation } from 'src/queries/kubernetes'; import { useSnackbar } from 'notistack'; diff --git a/packages/manager/src/features/Managed/SSHAccess/EditSSHAccessDrawer.tsx b/packages/manager/src/features/Managed/SSHAccess/EditSSHAccessDrawer.tsx index 46b32eb3e7d..ab0846b0b9b 100644 --- a/packages/manager/src/features/Managed/SSHAccess/EditSSHAccessDrawer.tsx +++ b/packages/manager/src/features/Managed/SSHAccess/EditSSHAccessDrawer.tsx @@ -12,7 +12,7 @@ import Grid from 'src/components/Grid'; import IPSelect from 'src/components/IPSelect'; import Notice from 'src/components/Notice'; import TextField from 'src/components/TextField'; -import Toggle from 'src/components/Toggle'; +import { Toggle } from 'src/components/Toggle'; import { handleFieldErrors, handleGeneralErrors, diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerConfigPanel.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerConfigPanel.tsx index 4e1513a58bd..c5ad4d9581f 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerConfigPanel.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerConfigPanel.tsx @@ -15,7 +15,7 @@ import Grid from 'src/components/Grid'; import Link from 'src/components/Link'; import Notice from 'src/components/Notice'; import TextField from 'src/components/TextField'; -import Toggle from 'src/components/Toggle'; +import { Toggle } from 'src/components/Toggle'; import { getErrorMap } from 'src/utilities/errorUtils'; import NodeBalancerConfigNode from './NodeBalancerConfigNode'; import { NodeBalancerConfigNodeFields } from './types'; diff --git a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/LimitedAccessControls.tsx b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/LimitedAccessControls.tsx index 813cc81b812..9359d761681 100644 --- a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/LimitedAccessControls.tsx +++ b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/LimitedAccessControls.tsx @@ -11,7 +11,7 @@ import Radio from 'src/components/Radio'; import Table from 'src/components/Table'; import TableCell from 'src/components/TableCell'; import TableRow from 'src/components/TableRow'; -import Toggle from 'src/components/Toggle'; +import { Toggle } from 'src/components/Toggle'; import AccessCell from './AccessCell'; import { MODE } from './types'; diff --git a/packages/manager/src/features/ObjectStorage/BucketDetail/AccessSelect.tsx b/packages/manager/src/features/ObjectStorage/BucketDetail/AccessSelect.tsx index 307c9c79b78..78956a88a55 100644 --- a/packages/manager/src/features/ObjectStorage/BucketDetail/AccessSelect.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketDetail/AccessSelect.tsx @@ -11,7 +11,7 @@ import EnhancedSelect from 'src/components/EnhancedSelect'; import { Item } from 'src/components/EnhancedSelect/Select'; import ExternalLink from 'src/components/ExternalLink'; import Notice from 'src/components/Notice'; -import Toggle from 'src/components/Toggle'; +import { Toggle } from 'src/components/Toggle'; import useOpenClose from 'src/hooks/useOpenClose'; import capitalize from 'src/utilities/capitalize'; import { getErrorStringOrDefault } from 'src/utilities/errorUtils'; diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/TwoFactor.tsx b/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/TwoFactor.tsx index f8f552da7d0..13973fa219d 100644 --- a/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/TwoFactor.tsx +++ b/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/TwoFactor.tsx @@ -7,7 +7,7 @@ import { makeStyles } from '@mui/styles'; import { Theme } from '@mui/material/styles'; import Typography from 'src/components/core/Typography'; import Notice from 'src/components/Notice'; -import Toggle from 'src/components/Toggle'; +import { Toggle } from 'src/components/Toggle'; import { queryKey } from 'src/queries/profile'; import { useSecurityQuestions } from 'src/queries/securityQuestions'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; diff --git a/packages/manager/src/features/Profile/Settings/Settings.tsx b/packages/manager/src/features/Profile/Settings/Settings.tsx index 367ecde9f4d..6787cb411d7 100644 --- a/packages/manager/src/features/Profile/Settings/Settings.tsx +++ b/packages/manager/src/features/Profile/Settings/Settings.tsx @@ -7,7 +7,7 @@ import Typography from 'src/components/core/Typography'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import Grid from 'src/components/Grid'; import PreferenceToggle, { ToggleProps } from 'src/components/PreferenceToggle'; -import Toggle from 'src/components/Toggle'; +import { Toggle } from 'src/components/Toggle'; import { useMutatePreferences, usePreferences } from 'src/queries/preferences'; import { useMutateProfile, useProfile } from 'src/queries/profile'; import { getQueryParam } from 'src/utilities/queryParams'; diff --git a/packages/manager/src/features/Users/CreateUserDrawer.tsx b/packages/manager/src/features/Users/CreateUserDrawer.tsx index ff3a3bfd62e..365bad1d61e 100644 --- a/packages/manager/src/features/Users/CreateUserDrawer.tsx +++ b/packages/manager/src/features/Users/CreateUserDrawer.tsx @@ -8,7 +8,7 @@ import FormControlLabel from 'src/components/core/FormControlLabel'; import Drawer from 'src/components/Drawer'; import Notice from 'src/components/Notice'; import TextField from 'src/components/TextField'; -import Toggle from 'src/components/Toggle'; +import { Toggle } from 'src/components/Toggle'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; import getAPIErrorsFor from 'src/utilities/getAPIErrorFor'; diff --git a/packages/manager/src/features/Users/UserPermissions.tsx b/packages/manager/src/features/Users/UserPermissions.tsx index 9749f308433..2ab32e8e1db 100644 --- a/packages/manager/src/features/Users/UserPermissions.tsx +++ b/packages/manager/src/features/Users/UserPermissions.tsx @@ -24,7 +24,7 @@ import Select, { Item } from 'src/components/EnhancedSelect/Select'; import Grid from '@mui/material/Unstable_Grid2'; import Notice from 'src/components/Notice'; import SelectionCard from 'src/components/SelectionCard'; -import Toggle from 'src/components/Toggle'; +import { Toggle } from 'src/components/Toggle'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; import getAPIErrorsFor from 'src/utilities/getAPIErrorFor'; import scrollErrorIntoView from 'src/utilities/scrollErrorIntoView'; diff --git a/packages/manager/src/features/linodes/LinodesDetail/LinodeSettings/AlertSection.tsx b/packages/manager/src/features/linodes/LinodesDetail/LinodeSettings/AlertSection.tsx index 81c776ec25d..7d2d5cad302 100644 --- a/packages/manager/src/features/linodes/LinodesDetail/LinodeSettings/AlertSection.tsx +++ b/packages/manager/src/features/linodes/LinodesDetail/LinodeSettings/AlertSection.tsx @@ -9,7 +9,7 @@ import Typography from 'src/components/core/Typography'; import Grid from 'src/components/Grid'; import RenderGuard from 'src/components/RenderGuard'; import TextField from 'src/components/TextField'; -import Toggle from 'src/components/Toggle'; +import { Toggle } from 'src/components/Toggle'; const useStyles = makeStyles((theme: Theme) => ({ '@keyframes fadeIn': { diff --git a/packages/manager/src/features/linodes/LinodesDetail/LinodeSettings/LinodeConfigDialog.tsx b/packages/manager/src/features/linodes/LinodesDetail/LinodeSettings/LinodeConfigDialog.tsx index a5977e070fa..8920f9ee695 100644 --- a/packages/manager/src/features/linodes/LinodesDetail/LinodeSettings/LinodeConfigDialog.tsx +++ b/packages/manager/src/features/linodes/LinodesDetail/LinodeSettings/LinodeConfigDialog.tsx @@ -34,7 +34,7 @@ import { TooltipIcon } from 'src/components/TooltipIcon/TooltipIcon'; import Notice from 'src/components/Notice'; import Radio from 'src/components/Radio'; import TextField from 'src/components/TextField'; -import Toggle from 'src/components/Toggle'; +import { Toggle } from 'src/components/Toggle'; import DeviceSelection, { ExtendedDisk, } from 'src/features/linodes/LinodesDetail/LinodeRescue/DeviceSelection'; diff --git a/packages/manager/src/features/linodes/LinodesDetail/LinodeSettings/LinodeWatchdogPanel.tsx b/packages/manager/src/features/linodes/LinodesDetail/LinodeSettings/LinodeWatchdogPanel.tsx index e66e67dcbff..258fe031bbd 100644 --- a/packages/manager/src/features/linodes/LinodesDetail/LinodeSettings/LinodeWatchdogPanel.tsx +++ b/packages/manager/src/features/linodes/LinodesDetail/LinodeSettings/LinodeWatchdogPanel.tsx @@ -8,7 +8,7 @@ import Typography from 'src/components/core/Typography'; import Grid from 'src/components/Grid'; import Notice from 'src/components/Notice'; import PanelErrorBoundary from 'src/components/PanelErrorBoundary'; -import Toggle from 'src/components/Toggle'; +import { Toggle } from 'src/components/Toggle'; import { withLinodeDetailContext } from 'src/features/linodes/LinodesDetail/linodeDetailContext'; import { LinodeActionsProps, From 3761ad32b38f5484937dc77d61c54956c9223f04 Mon Sep 17 00:00:00 2001 From: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com> Date: Thu, 13 Apr 2023 07:38:54 -0700 Subject: [PATCH 04/60] refactor: [M3-6397, M3-6416] - MUI v5 Migration - Components > SupportLink, TextTooltip (#8993) * Modernize SupportLink component: update props name, use named export * Run codemod on TextTooltip, use named export, update props name --- packages/manager/src/components/MigrateError.tsx | 2 +- packages/manager/src/components/SupportError.tsx | 2 +- .../src/components/SupportLink/SupportLink.tsx | 6 +++--- .../manager/src/components/SupportLink/index.tsx | 2 +- .../src/components/TextTooltip/TextTooltip.tsx | 12 ++++++------ packages/manager/src/components/TextTooltip/index.ts | 3 +-- .../manager/src/components/VerificationError.tsx | 2 +- .../manager/src/features/Account/EnableManaged.tsx | 2 +- .../BillingActivityPanel/BillingActivityPanel.tsx | 2 +- .../BillingSummary/PaymentDrawer/PaymentDrawer.tsx | 2 +- .../FirewallDetail/Devices/AddDeviceDrawer.tsx | 2 +- .../GlobalNotifications/ComplianceUpdateModal.tsx | 2 +- .../Longview/LongviewLanding/LongviewPlans.tsx | 2 +- .../LinodeAdvanced/LinodeDiskDrawer.tsx | 2 +- .../MigrateLinode/MigrationImminentNotice.tsx | 2 +- .../src/features/linodes/SMTPRestrictionText.tsx | 2 +- 16 files changed, 23 insertions(+), 24 deletions(-) diff --git a/packages/manager/src/components/MigrateError.tsx b/packages/manager/src/components/MigrateError.tsx index b88fdb2fdcb..eeb9e62289f 100644 --- a/packages/manager/src/components/MigrateError.tsx +++ b/packages/manager/src/components/MigrateError.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import Typography from 'src/components/core/Typography'; -import SupportLink from 'src/components/SupportLink'; +import { SupportLink } from 'src/components/SupportLink'; export const MigrateError: React.FC<{}> = () => { return ( diff --git a/packages/manager/src/components/SupportError.tsx b/packages/manager/src/components/SupportError.tsx index f98d73f072f..5c04e478aba 100644 --- a/packages/manager/src/components/SupportError.tsx +++ b/packages/manager/src/components/SupportError.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { APIError } from '@linode/api-v4/lib/types'; import Typography from 'src/components/core/Typography'; -import SupportLink from 'src/components/SupportLink'; +import { SupportLink } from 'src/components/SupportLink'; import { useTheme } from '@mui/material/styles'; interface Props { diff --git a/packages/manager/src/components/SupportLink/SupportLink.tsx b/packages/manager/src/components/SupportLink/SupportLink.tsx index 525197ad5e6..b82c1aba557 100644 --- a/packages/manager/src/components/SupportLink/SupportLink.tsx +++ b/packages/manager/src/components/SupportLink/SupportLink.tsx @@ -5,7 +5,7 @@ import { TicketType, } from 'src/features/Support/SupportTickets/SupportTicketDrawer'; -interface Props { +interface SupportLinkProps { title?: string; description?: string; text: string; @@ -19,7 +19,7 @@ export interface EntityForTicketDetails { type: EntityType; } -const SupportLink = (props: Props) => { +const SupportLink = (props: SupportLinkProps) => { const { description, text, title, entity, ticketType, onClick } = props; return ( { ); }; -export default SupportLink; +export { SupportLink }; diff --git a/packages/manager/src/components/SupportLink/index.tsx b/packages/manager/src/components/SupportLink/index.tsx index 08902bc598e..7848e5478c6 100644 --- a/packages/manager/src/components/SupportLink/index.tsx +++ b/packages/manager/src/components/SupportLink/index.tsx @@ -1 +1 @@ -export { default } from './SupportLink'; +export { SupportLink } from './SupportLink'; diff --git a/packages/manager/src/components/TextTooltip/TextTooltip.tsx b/packages/manager/src/components/TextTooltip/TextTooltip.tsx index 2cc6fb76a77..37536abfd5b 100644 --- a/packages/manager/src/components/TextTooltip/TextTooltip.tsx +++ b/packages/manager/src/components/TextTooltip/TextTooltip.tsx @@ -1,17 +1,17 @@ import { SxProps } from '@mui/material'; import * as React from 'react'; -import { makeStyles } from '@mui/styles'; +import { makeStyles } from 'tss-react/mui'; import { Theme } from '@mui/material/styles'; import ToolTip from 'src/components/core/Tooltip'; import Typography from 'src/components/core/Typography'; -interface Props { +interface TextTooltipProps { displayText: string; tooltipText: JSX.Element | string; sxTypography?: SxProps; } -const useStyles = makeStyles((theme: Theme) => ({ +const useStyles = makeStyles()((theme: Theme) => ({ root: { position: 'relative', borderRadius: 4, @@ -30,8 +30,8 @@ const useStyles = makeStyles((theme: Theme) => ({ }, })); -export const TextTooltip = (props: Props) => { - const classes = useStyles(); +const TextTooltip = (props: TextTooltipProps) => { + const { classes } = useStyles(); const { displayText, tooltipText, sxTypography } = props; return ( @@ -49,4 +49,4 @@ export const TextTooltip = (props: Props) => { ); }; -export default TextTooltip; +export { TextTooltip }; diff --git a/packages/manager/src/components/TextTooltip/index.ts b/packages/manager/src/components/TextTooltip/index.ts index 707749af6ac..f11a4141000 100644 --- a/packages/manager/src/components/TextTooltip/index.ts +++ b/packages/manager/src/components/TextTooltip/index.ts @@ -1,2 +1 @@ -import TextTooltip from './TextTooltip'; -export default TextTooltip; +export { TextTooltip } from './TextTooltip'; diff --git a/packages/manager/src/components/VerificationError.tsx b/packages/manager/src/components/VerificationError.tsx index a0e047b3c18..d898ca694b3 100644 --- a/packages/manager/src/components/VerificationError.tsx +++ b/packages/manager/src/components/VerificationError.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import Typography from 'src/components/core/Typography'; -import SupportLink from 'src/components/SupportLink'; +import { SupportLink } from 'src/components/SupportLink'; interface Props { title: string; diff --git a/packages/manager/src/features/Account/EnableManaged.tsx b/packages/manager/src/features/Account/EnableManaged.tsx index a6d24f8bf8b..e8f2894745b 100644 --- a/packages/manager/src/features/Account/EnableManaged.tsx +++ b/packages/manager/src/features/Account/EnableManaged.tsx @@ -8,7 +8,7 @@ import ConfirmationDialog from 'src/components/ConfirmationDialog'; import Typography from 'src/components/core/Typography'; import ExternalLink from 'src/components/ExternalLink'; import Grid from 'src/components/Grid'; -import SupportLink from 'src/components/SupportLink'; +import { SupportLink } from 'src/components/SupportLink'; import withLinodes, { DispatchProps, } from 'src/containers/withLinodes.container'; diff --git a/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx b/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx index 6348f67dc6a..5a403bfa540 100644 --- a/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx +++ b/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx @@ -12,7 +12,7 @@ import { Theme } from '@mui/material/styles'; import TableBody from 'src/components/core/TableBody'; import TableHead from 'src/components/core/TableHead'; import Typography from 'src/components/core/Typography'; -import TextTooltip from 'src/components/TextTooltip/TextTooltip'; +import { TextTooltip } from 'src/components/TextTooltip'; import Currency from 'src/components/Currency'; import DateTimeDisplay from 'src/components/DateTimeDisplay'; import Select, { Item } from 'src/components/EnhancedSelect/Select'; diff --git a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentDrawer.tsx b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentDrawer.tsx index e9cdf27a616..778d7d25af3 100644 --- a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentDrawer.tsx +++ b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentDrawer.tsx @@ -16,7 +16,7 @@ import Grid from '@mui/material/Unstable_Grid2'; import { TooltipIcon } from 'src/components/TooltipIcon/TooltipIcon'; import LinearProgress from 'src/components/LinearProgress'; import Notice from 'src/components/Notice'; -import SupportLink from 'src/components/SupportLink'; +import { SupportLink } from 'src/components/SupportLink'; import TextField from 'src/components/TextField'; import PayPalErrorBoundary from 'src/features/Billing/BillingPanels/PaymentInfoPanel/PayPalErrorBoundary'; import { useAccount } from 'src/queries/account'; diff --git a/packages/manager/src/features/Firewalls/FirewallDetail/Devices/AddDeviceDrawer.tsx b/packages/manager/src/features/Firewalls/FirewallDetail/Devices/AddDeviceDrawer.tsx index 965358430e6..168b752dda0 100644 --- a/packages/manager/src/features/Firewalls/FirewallDetail/Devices/AddDeviceDrawer.tsx +++ b/packages/manager/src/features/Firewalls/FirewallDetail/Devices/AddDeviceDrawer.tsx @@ -6,7 +6,7 @@ import Drawer from 'src/components/Drawer'; import Link from 'src/components/Link'; import LinodeMultiSelect from 'src/components/LinodeMultiSelect/LinodeMultiSelect'; import Notice from 'src/components/Notice'; -import SupportLink from 'src/components/SupportLink'; +import { SupportLink } from 'src/components/SupportLink'; import { useGrants, useProfile } from 'src/queries/profile'; import { getEntityIdsByPermission } from 'src/utilities/grants'; import { READ_ONLY_LINODES_HIDDEN_MESSAGE } from '../../FirewallLanding/CreateFirewallDrawer'; diff --git a/packages/manager/src/features/GlobalNotifications/ComplianceUpdateModal.tsx b/packages/manager/src/features/GlobalNotifications/ComplianceUpdateModal.tsx index 8a95abdf43d..16bfacb8bba 100644 --- a/packages/manager/src/features/GlobalNotifications/ComplianceUpdateModal.tsx +++ b/packages/manager/src/features/GlobalNotifications/ComplianceUpdateModal.tsx @@ -3,7 +3,7 @@ import ActionsPanel from 'src/components/ActionsPanel'; import Button from 'src/components/Button'; import ConfirmationDialog from 'src/components/ConfirmationDialog'; import Typography from 'src/components/core/Typography'; -import SupportLink from 'src/components/SupportLink'; +import { SupportLink } from 'src/components/SupportLink'; import { useMutateAccountAgreements } from 'src/queries/accountAgreements'; import { getErrorStringOrDefault } from 'src/utilities/errorUtils'; import EUAgreementCheckbox from '../Account/Agreements/EUAgreementCheckbox'; diff --git a/packages/manager/src/features/Longview/LongviewLanding/LongviewPlans.tsx b/packages/manager/src/features/Longview/LongviewLanding/LongviewPlans.tsx index 91a5c03d311..6670464f1fc 100644 --- a/packages/manager/src/features/Longview/LongviewLanding/LongviewPlans.tsx +++ b/packages/manager/src/features/Longview/LongviewLanding/LongviewPlans.tsx @@ -17,7 +17,7 @@ import TableHead from 'src/components/core/TableHead'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import Notice from 'src/components/Notice'; import Radio from 'src/components/Radio'; -import SupportLink from 'src/components/SupportLink'; +import { SupportLink } from 'src/components/SupportLink'; import Table from 'src/components/Table'; import TableCell from 'src/components/TableCell'; import TableRow from 'src/components/TableRow'; diff --git a/packages/manager/src/features/linodes/LinodesDetail/LinodeAdvanced/LinodeDiskDrawer.tsx b/packages/manager/src/features/linodes/LinodesDetail/LinodeAdvanced/LinodeDiskDrawer.tsx index 3c90e9266b5..5ed161e0234 100644 --- a/packages/manager/src/features/linodes/LinodesDetail/LinodeAdvanced/LinodeDiskDrawer.tsx +++ b/packages/manager/src/features/linodes/LinodesDetail/LinodeAdvanced/LinodeDiskDrawer.tsx @@ -21,7 +21,7 @@ import { Link } from 'src/components/Link'; import ModeSelect, { Mode } from 'src/components/ModeSelect'; import Notice from 'src/components/Notice'; import TextField from 'src/components/TextField'; -import TextTooltip from 'src/components/TextTooltip'; +import { TextTooltip } from 'src/components/TextTooltip'; import { handleFieldErrors, handleGeneralErrors, diff --git a/packages/manager/src/features/linodes/MigrateLinode/MigrationImminentNotice.tsx b/packages/manager/src/features/linodes/MigrateLinode/MigrationImminentNotice.tsx index 5fd4d4948d1..a9dfd83bcef 100644 --- a/packages/manager/src/features/linodes/MigrateLinode/MigrationImminentNotice.tsx +++ b/packages/manager/src/features/linodes/MigrateLinode/MigrationImminentNotice.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import { compose } from 'recompose'; import Notice from 'src/components/Notice'; -import SupportLink from 'src/components/SupportLink'; +import { SupportLink } from 'src/components/SupportLink'; interface Props { notifications: Notification[]; diff --git a/packages/manager/src/features/linodes/SMTPRestrictionText.tsx b/packages/manager/src/features/linodes/SMTPRestrictionText.tsx index b462540a1ca..baed8e1ff71 100644 --- a/packages/manager/src/features/linodes/SMTPRestrictionText.tsx +++ b/packages/manager/src/features/linodes/SMTPRestrictionText.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import Typography from 'src/components/core/Typography'; import ExternalLink from 'src/components/ExternalLink'; -import SupportLink from 'src/components/SupportLink'; +import { SupportLink } from 'src/components/SupportLink'; import { MAGIC_DATE_THAT_EMAIL_RESTRICTIONS_WERE_IMPLEMENTED } from 'src/constants'; import { useAccount } from 'src/queries/account'; import { sendLinodeCreateDocsEvent } from 'src/utilities/ga'; From 6cf29bbd3cbba092dfc2a10a5908bdd2a1819d94 Mon Sep 17 00:00:00 2001 From: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com> Date: Thu, 13 Apr 2023 12:14:53 -0400 Subject: [PATCH 05/60] =?UTF-8?q?refactor:=20[M3-6321]=20=E2=80=93=20MUI?= =?UTF-8?q?=20v5=20Migration=20-=20Components=20>=20DismissibleBanner=20(#?= =?UTF-8?q?8998)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DismissibleBanner/DismissibleBanner.tsx | 56 +++++++++---------- 1 file changed, 26 insertions(+), 30 deletions(-) diff --git a/packages/manager/src/components/DismissibleBanner/DismissibleBanner.tsx b/packages/manager/src/components/DismissibleBanner/DismissibleBanner.tsx index d266360c541..af737aac10f 100644 --- a/packages/manager/src/components/DismissibleBanner/DismissibleBanner.tsx +++ b/packages/manager/src/components/DismissibleBanner/DismissibleBanner.tsx @@ -1,33 +1,13 @@ import Close from '@mui/icons-material/Close'; -import * as React from 'react'; -import { makeStyles } from 'tss-react/mui'; -import { Theme } from '@mui/material/styles'; +import { styled } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; -import Notice, { NoticeProps } from 'src/components/Notice'; import { SxProps } from '@mui/system'; +import * as React from 'react'; +import Notice, { NoticeProps } from 'src/components/Notice'; import useDismissibleNotifications, { DismissibleNotificationOptions, } from 'src/hooks/useDismissibleNotifications'; -const useStyles = makeStyles()((theme: Theme) => ({ - root: { - display: 'flex', - alignItems: 'center', - flexFlow: 'row nowrap', - justifyContent: 'space-between', - borderRadius: 1, - marginBottom: theme.spacing(), - padding: theme.spacing(2), - background: theme.bg.bgPaper, - }, - closeIcon: { - ...theme.applyLinkStyles, - display: 'flex', - color: theme.textColors.tableStatic, - marginLeft: 20, - }, -})); - interface Props { preferenceKey: string; children: JSX.Element; @@ -40,7 +20,6 @@ type CombinedProps = Props & Partial; export const DismissibleBanner = (props: CombinedProps) => { const { className, preferenceKey, options, children, ...rest } = props; - const { classes, cx } = useStyles(); const { hasDismissedBanner, handleDismiss } = useDismissibleBanner( preferenceKey, @@ -53,25 +32,24 @@ export const DismissibleBanner = (props: CombinedProps) => { const dismissibleButton = ( - + ); return ( - {children} - + ); }; @@ -96,3 +74,21 @@ export const useDismissibleBanner = ( return { hasDismissedBanner, handleDismiss }; }; + +const StyledNotice = styled(Notice)(({ theme }) => ({ + display: 'flex', + alignItems: 'center', + flexFlow: 'row nowrap', + justifyContent: 'space-between', + borderRadius: 1, + marginBottom: theme.spacing(), + padding: theme.spacing(2), + background: theme.bg.bgPaper, +})); + +const StyledButton = styled('button')(({ theme }) => ({ + ...theme.applyLinkStyles, + display: 'flex', + color: theme.textColors.tableStatic, + marginLeft: 20, +})); From 4c36e58f1bf13ba553289cdf37ac7073bf7bbc1f Mon Sep 17 00:00:00 2001 From: cliu-akamai <126020611+cliu-akamai@users.noreply.github.com> Date: Thu, 13 Apr 2023 14:13:18 -0400 Subject: [PATCH 06/60] test: [M3-6247] - Add Cypress Firewall e2e Create/Delete tests (#8944) Add Cypress Firewall e2e Create/Delete tests --- .../e2e/firewalls/create-firewall.spec.ts | 106 ++++++++++++++++++ .../e2e/firewalls/delete-firewall.spec.ts | 72 ++++++++++++ .../cypress/support/intercepts/firewalls.ts | 14 +++ .../cypress/support/ui/autocomplete-popper.ts | 18 +++ packages/manager/cypress/support/ui/index.ts | 2 + 5 files changed, 212 insertions(+) create mode 100644 packages/manager/cypress/e2e/firewalls/create-firewall.spec.ts create mode 100644 packages/manager/cypress/e2e/firewalls/delete-firewall.spec.ts create mode 100644 packages/manager/cypress/support/intercepts/firewalls.ts create mode 100644 packages/manager/cypress/support/ui/autocomplete-popper.ts diff --git a/packages/manager/cypress/e2e/firewalls/create-firewall.spec.ts b/packages/manager/cypress/e2e/firewalls/create-firewall.spec.ts new file mode 100644 index 00000000000..4d021fb17ed --- /dev/null +++ b/packages/manager/cypress/e2e/firewalls/create-firewall.spec.ts @@ -0,0 +1,106 @@ +import { createLinode } from '@linode/api-v4/lib/linodes'; +import { createLinodeRequestFactory } from 'src/factories/linodes'; +import { regions } from 'support/constants/regions'; +import { authenticate } from 'support/api/authentication'; +import { containsClick, getClick } from 'support/helpers'; +import { interceptCreateFirewall } from 'support/intercepts/firewalls'; +import { randomItem, randomString, randomLabel } from 'support/util/random'; +import { ui } from 'support/ui'; + +authenticate(); +describe('create firewall', () => { + /* + * - Creates a firewall that is not assigned to a Linode. + * - Confirms that an error message appears upon submitting without a label. + * - Confirms that firewall is listed correctly on firewalls landing page. + * - Confirms that tags exist on firewall. + */ + it('creates a firewall without a linode', () => { + const firewall = { + label: randomLabel(), + }; + + interceptCreateFirewall().as('createFirewall'); + cy.visitWithLogin('/firewalls/create'); + + ui.drawer + .findByTitle('Create Firewall') + .should('be.visible') + .within(() => { + // An error message appears when attempting to create a Firewall without a label + getClick('[data-testid="create-firewall-submit"]'); + cy.findByText('Label is required.'); + // Fill out and submit firewall create form. + containsClick('Label').type(firewall.label); + getClick('[data-testid="create-firewall-submit"]'); + }); + + // Confirm that firewall is listed on landing page with expected configuration. + cy.findByText(firewall.label) + .closest('tr') + .within(() => { + cy.findByText(firewall.label).should('be.visible'); + cy.findByText('Enabled').should('be.visible'); + cy.findByText('No rules').should('be.visible'); + cy.findByText('None assigned').should('be.visible'); + }); + }); + + /* + * - Creates a firewall that is assigned to an existing Linode. + * - Confirms that firewall is listed correctly on firewalls landing page. + * - Confirms that firewall is assigned to the linode. + */ + it('creates a firewall assigned to a linode', () => { + const regionId = randomItem(regions); + + const linodeRequest = createLinodeRequestFactory.build({ + label: randomLabel(), + region: regionId, + root_pass: randomString(16), + }); + + const firewall = { + label: randomLabel(), + }; + + cy.defer(createLinode(linodeRequest)).then((linode) => { + interceptCreateFirewall().as('createFirewall'); + cy.visitWithLogin('/firewalls/create'); + + ui.drawer + .findByTitle('Create Firewall') + .should('be.visible') + .within(() => { + // Fill out and submit firewall create form. + containsClick('Label').type(firewall.label); + cy.get('[data-testid="textfield-input"]:last') + .should('be.visible') + .click() + .type(linode.label); + }); + + ui.autocompletePopper + .findByTitle(linode.label) + .should('be.visible') + .click(); + + ui.drawer + .findByTitle('Create Firewall') + .should('be.visible') + .within(() => { + getClick('[data-testid="create-firewall-submit"]'); + }); + + // Confirm that firewall is listed on landing page with expected configuration. + cy.findByText(firewall.label) + .closest('tr') + .within(() => { + cy.findByText(firewall.label).should('be.visible'); + cy.findByText('Enabled').should('be.visible'); + cy.findByText('No rules').should('be.visible'); + cy.findByText(linode.label).should('be.visible'); + }); + }); + }); +}); diff --git a/packages/manager/cypress/e2e/firewalls/delete-firewall.spec.ts b/packages/manager/cypress/e2e/firewalls/delete-firewall.spec.ts new file mode 100644 index 00000000000..c84a5b5e40e --- /dev/null +++ b/packages/manager/cypress/e2e/firewalls/delete-firewall.spec.ts @@ -0,0 +1,72 @@ +import { createFirewall } from '@linode/api-v4/lib/firewalls'; +import { Firewall } from '@linode/api-v4/types'; +import { firewallFactory } from 'src/factories/firewalls'; +import { authenticate } from 'support/api/authentication'; +import { randomLabel } from 'support/util/random'; +import { ui } from 'support/ui'; +import { fbtVisible, fbtClick } from 'support/helpers'; + +authenticate(); +describe('delete firewall', () => { + /* + * - Clicks "Delete" action menu item for firewall but cancels operation. + * - Clicks "Delete" action menu item for firewall and confirms operation. + * - Confirms that firewall is still in landing page list after canceled operation. + * - Confirms that firewall is removed from landing page list after confirmed operation. + */ + it('deletes a firewall', () => { + const firewallRequest = firewallFactory.build({ + label: randomLabel(), + }); + + cy.defer(createFirewall(firewallRequest)).then((firewall: Firewall) => { + cy.visitWithLogin('/firewalls'); + + // Confirm that firewall is listed and initiate deletion. + cy.findByText(firewall.label) + .should('be.visible') + .closest('tr') + .within(() => { + fbtVisible('Delete'); + fbtClick('Delete'); + }); + + // Cancel deletion when prompted to confirm. + ui.dialog + .findByTitle(`Delete Firewall ${firewall.label}?`) + .should('be.visible') + .within(() => { + ui.buttonGroup + .findButtonByTitle('Cancel') + .should('be.visible') + .should('be.enabled') + .click(); + }); + + // Confirm that firewall is still listed and initiate deletion again. + cy.findByText(firewall.label) + .should('be.visible') + .closest('tr') + .within(() => { + fbtVisible('Delete'); + fbtClick('Delete'); + }); + + // Confirm deletion. + ui.dialog + .findByTitle(`Delete Firewall ${firewall.label}?`) + .should('be.visible') + .within(() => { + ui.buttonGroup + .findButtonByTitle('Delete Firewall') + .should('be.visible') + .should('be.enabled') + .click(); + }); + + // Confirm that firewall is deleted. + cy.visitWithLogin('/firewalls'); + cy.findByText(firewall.label).should('not.exist'); + }); + }); +}); diff --git a/packages/manager/cypress/support/intercepts/firewalls.ts b/packages/manager/cypress/support/intercepts/firewalls.ts new file mode 100644 index 00000000000..e46cd6b545d --- /dev/null +++ b/packages/manager/cypress/support/intercepts/firewalls.ts @@ -0,0 +1,14 @@ +/** + * @files Cypress intercepts and mocks for Firewall API requests. + */ + +import { apiMatcher } from 'support/util/intercepts'; + +/** + * Intercepts POST request to create a Firewall. + * + * @returns Cypress chainable. + */ +export const interceptCreateFirewall = (): Cypress.Chainable => { + return cy.intercept('POST', apiMatcher('firewalls')); +}; diff --git a/packages/manager/cypress/support/ui/autocomplete-popper.ts b/packages/manager/cypress/support/ui/autocomplete-popper.ts new file mode 100644 index 00000000000..65c1a801744 --- /dev/null +++ b/packages/manager/cypress/support/ui/autocomplete-popper.ts @@ -0,0 +1,18 @@ +/** + * Autocomplete Popper UI element. + * + * Useful for validating content, filling out forms, etc. that appear within + * a autocomplete popper. + */ +export const autocompletePopper = { + /** + * Finds a autocomplete popper that has the given title. + */ + findByTitle: (title: string): Cypress.Chainable => { + return cy + .document() + .its('body') + .find('[data-qa-autocomplete-popper]') + .findByText(title); + }, +}; diff --git a/packages/manager/cypress/support/ui/index.ts b/packages/manager/cypress/support/ui/index.ts index dc8f29d3dfa..f91127d7eb0 100644 --- a/packages/manager/cypress/support/ui/index.ts +++ b/packages/manager/cypress/support/ui/index.ts @@ -1,4 +1,5 @@ import * as actionMenu from './action-menu'; +import * as autocompletePopper from './autocomplete-popper'; import * as breadcrumb from './breadcrumb'; import * as buttons from './buttons'; import * as dialog from './dialog'; @@ -13,6 +14,7 @@ import * as toggle from './toggle'; export const ui = { ...actionMenu, + ...autocompletePopper, ...breadcrumb, ...buttons, ...dialog, From 394e8d4e37989974314562f91ee8db1c63c119b8 Mon Sep 17 00:00:00 2001 From: Hana Xu <115299789+hana-linode@users.noreply.github.com> Date: Thu, 13 Apr 2023 16:04:32 -0400 Subject: [PATCH 07/60] refactor: [M3-6414, M3-6415] - MUIv5 Migration - Components > TagsInput, TagsPanel (#8995) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Description ๐Ÿ“ - Migrate/modernize TagsPanel component from JSS to tss-react (Emotion) - Modernize TagsInput since it had no styles to migrate - Use named exports instead of default - Fix BetaChip story not rendering ## How to test ๐Ÿงช - Check places in the app where TagsInput and TagsPanel are used - Check that the TagsInput, TagsPanel, and BetaChip story renders in Storybook --- CHANGELOG.md | 5 ++++ .../components/BetaChip/BetaChip.stories.mdx | 4 +-- .../LabelAndTagsPanel/LabelAndTagsPanel.tsx | 2 +- .../src/components/TagCell/TagDrawer.tsx | 2 +- .../TagsInput/TagsInput.stories.mdx | 2 +- .../components/TagsInput/TagsInput.test.tsx | 2 +- .../src/components/TagsInput/TagsInput.tsx | 8 ++--- .../manager/src/components/TagsInput/index.ts | 5 ---- .../TagsPanel/TagsPanel.stories.mdx | 2 +- .../src/components/TagsPanel/TagsPanel.tsx | 30 +++++++++---------- .../manager/src/components/TagsPanel/index.ts | 4 --- .../Domains/DomainDetail/DomainDetail.tsx | 2 +- .../src/features/Domains/EditDomainDrawer.tsx | 2 +- .../KubeSummaryPanel.tsx | 2 +- .../NodeBalancers/NodeBalancerCreate.tsx | 2 +- .../NodeBalancerSummary/SummaryPanel.tsx | 2 +- .../CreateVolumeForLinodeForm.tsx | 6 ++-- .../Volumes/VolumeDrawer/EditVolumeForm.tsx | 2 +- .../LinodesCreate/LinodeCreateContainer.tsx | 2 +- .../features/linodes/LinodesCreate/types.ts | 2 +- 20 files changed, 41 insertions(+), 47 deletions(-) delete mode 100644 packages/manager/src/components/TagsInput/index.ts delete mode 100644 packages/manager/src/components/TagsPanel/index.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 9eec32f3b44..0e0d8835146 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,11 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/). +## [Unreleased] + +### Tech Stories: +- MUIv5 Migration - Components > TagsInput, TagsPanel #8995 + ## [2023-04-03] - v1.90.0 ### Added: diff --git a/packages/manager/src/components/BetaChip/BetaChip.stories.mdx b/packages/manager/src/components/BetaChip/BetaChip.stories.mdx index 1eaee2424d6..5714ee8c0fc 100644 --- a/packages/manager/src/components/BetaChip/BetaChip.stories.mdx +++ b/packages/manager/src/components/BetaChip/BetaChip.stories.mdx @@ -1,6 +1,6 @@ import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'; -import BetaChip from "/src/components/BetaChip" -import Breadcrumb from '/src/components/Breadcrumb'; +import { BetaChip } from './BetaChip'; +import { Breadcrumb } from 'src/components/Breadcrumb/Breadcrumb'; diff --git a/packages/manager/src/components/LabelAndTagsPanel/LabelAndTagsPanel.tsx b/packages/manager/src/components/LabelAndTagsPanel/LabelAndTagsPanel.tsx index ba853aebe6c..edcc64176cd 100644 --- a/packages/manager/src/components/LabelAndTagsPanel/LabelAndTagsPanel.tsx +++ b/packages/manager/src/components/LabelAndTagsPanel/LabelAndTagsPanel.tsx @@ -5,7 +5,7 @@ import { createStyles, withStyles, WithStyles } from '@mui/styles'; import { Theme } from '@mui/material/styles'; import Notice from 'src/components/Notice'; import RenderGuard, { RenderGuardProps } from 'src/components/RenderGuard'; -import TagsInput, { TagsInputProps } from 'src/components/TagsInput'; +import { TagsInput, TagsInputProps } from 'src/components/TagsInput/TagsInput'; import TextField, { Props as TextFieldProps } from 'src/components/TextField'; type ClassNames = 'root' | 'inner' | 'expPanelButton'; diff --git a/packages/manager/src/components/TagCell/TagDrawer.tsx b/packages/manager/src/components/TagCell/TagDrawer.tsx index d26cf307e36..eebc49c9ac8 100644 --- a/packages/manager/src/components/TagCell/TagDrawer.tsx +++ b/packages/manager/src/components/TagCell/TagDrawer.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import Drawer from 'src/components/Drawer'; -import TagsPanel from '../TagsPanel'; +import { TagsPanel } from 'src/components/TagsPanel/TagsPanel'; export type OpenTagDrawer = (id: number, label: string, tags: string[]) => void; diff --git a/packages/manager/src/components/TagsInput/TagsInput.stories.mdx b/packages/manager/src/components/TagsInput/TagsInput.stories.mdx index 4ffe9540f5d..2bdfd0bef80 100644 --- a/packages/manager/src/components/TagsInput/TagsInput.stories.mdx +++ b/packages/manager/src/components/TagsInput/TagsInput.stories.mdx @@ -1,6 +1,6 @@ import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'; import { useArgs } from '@storybook/client-api'; -import TagsInput from './TagsInput'; +import { TagsInput } from './TagsInput'; diff --git a/packages/manager/src/components/TagsInput/TagsInput.test.tsx b/packages/manager/src/components/TagsInput/TagsInput.test.tsx index 39786745f1c..24660c027db 100644 --- a/packages/manager/src/components/TagsInput/TagsInput.test.tsx +++ b/packages/manager/src/components/TagsInput/TagsInput.test.tsx @@ -4,7 +4,7 @@ import userEvent from '@testing-library/user-event'; import * as React from 'react'; import { renderWithTheme } from 'src/utilities/testHelpers'; -import TagsInput from './TagsInput'; +import { TagsInput } from './TagsInput'; jest.mock('src/components/EnhancedSelect/Select'); const mockGetTags = jest.spyOn(tags, 'getTags'); diff --git a/packages/manager/src/components/TagsInput/TagsInput.tsx b/packages/manager/src/components/TagsInput/TagsInput.tsx index 6b793458889..522abfef650 100644 --- a/packages/manager/src/components/TagsInput/TagsInput.tsx +++ b/packages/manager/src/components/TagsInput/TagsInput.tsx @@ -15,7 +15,7 @@ export interface Tag { label: string; } -export interface Props { +export interface TagsInputProps { label?: string; hideLabel?: boolean; name?: string; @@ -23,10 +23,10 @@ export interface Props { value: Item[]; onChange: (selected: Item[]) => void; disabled?: boolean; - menuPlacement?: 'bottom' | 'top' | 'auto' | undefined; + menuPlacement?: 'bottom' | 'top' | 'auto'; } -const TagsInput: React.FC = (props) => { +const TagsInput = (props: TagsInputProps) => { const { label, hideLabel, @@ -113,4 +113,4 @@ const TagsInput: React.FC = (props) => { ); }; -export default TagsInput; +export { TagsInput }; diff --git a/packages/manager/src/components/TagsInput/index.ts b/packages/manager/src/components/TagsInput/index.ts deleted file mode 100644 index e6d270c9c2e..00000000000 --- a/packages/manager/src/components/TagsInput/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -import TagsInput, { Props as _TagsInputProps, Tag as _Tag } from './TagsInput'; -/* tslint:disable */ -export interface TagsInputProps extends _TagsInputProps {} -export interface Tag extends _Tag {} -export default TagsInput; diff --git a/packages/manager/src/components/TagsPanel/TagsPanel.stories.mdx b/packages/manager/src/components/TagsPanel/TagsPanel.stories.mdx index 9f22739bb72..8e8da9b4056 100644 --- a/packages/manager/src/components/TagsPanel/TagsPanel.stories.mdx +++ b/packages/manager/src/components/TagsPanel/TagsPanel.stories.mdx @@ -1,6 +1,6 @@ import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'; import Typography from 'src/components/core/Typography'; -import TagsPanel from './TagsPanel'; +import { TagsPanel } from './TagsPanel'; import { useArgs } from '@storybook/client-api'; ({ +const useStyles = makeStyles()((theme: Theme) => ({ '@keyframes fadeIn': { from: { opacity: 0, @@ -37,7 +36,6 @@ const useStyles = makeStyles((theme: Theme) => ({ animation: '$fadeIn 225ms linear forwards', borderLeft: `5px solid ${theme.palette.error.dark}`, '& .noticeText': { - ...theme.typography.body1, fontFamily: '"LatoWeb", sans-serif', }, marginTop: 20, @@ -124,15 +122,15 @@ interface ActionMeta { action: string; } -export interface Props { +export interface TagsPanelProps { align?: 'left' | 'right'; tags: string[]; updateTags: (tags: string[]) => Promise; disabled?: boolean; } -const TagsPanel: React.FC = (props) => { - const classes = useStyles(); +const TagsPanel = (props: TagsPanelProps) => { + const { classes, cx } = useStyles(); const { tags, disabled, updateTags } = props; const queryClient = useQueryClient(); @@ -268,9 +266,9 @@ const TagsPanel: React.FC = (props) => { /> ) : (
0, })} > diff --git a/packages/manager/src/features/Account/EnableManaged.tsx b/packages/manager/src/features/Account/EnableManaged.tsx index e8f2894745b..dfbd323574e 100644 --- a/packages/manager/src/features/Account/EnableManaged.tsx +++ b/packages/manager/src/features/Account/EnableManaged.tsx @@ -7,7 +7,7 @@ import Button from 'src/components/Button'; import ConfirmationDialog from 'src/components/ConfirmationDialog'; import Typography from 'src/components/core/Typography'; import ExternalLink from 'src/components/ExternalLink'; -import Grid from 'src/components/Grid'; +import Grid from '@mui/material/Unstable_Grid2'; import { SupportLink } from 'src/components/SupportLink'; import withLinodes, { DispatchProps, @@ -44,8 +44,8 @@ export const ManagedContent = (props: ContentProps) => { } return ( - - + + Linode Managed includes Backups, Longview Pro, cPanel, and round-the-clock monitoring to help keep your systems up and running. @@ -57,7 +57,7 @@ export const ManagedContent = (props: ContentProps) => { /> - + diff --git a/packages/manager/src/features/Account/EnableObjectStorage.tsx b/packages/manager/src/features/Account/EnableObjectStorage.tsx index cef3dcedc6c..84693b46f33 100644 --- a/packages/manager/src/features/Account/EnableObjectStorage.tsx +++ b/packages/manager/src/features/Account/EnableObjectStorage.tsx @@ -11,7 +11,7 @@ import Notice from 'src/components/Notice'; import TypeToConfirm from 'src/components/TypeToConfirm'; import Typography from 'src/components/core/Typography'; import ExternalLink from 'src/components/ExternalLink'; -import Grid from 'src/components/Grid'; +import Grid from '@mui/material/Unstable_Grid2'; import { updateAccountSettingsData } from 'src/queries/accountSettings'; import { usePreferences } from 'src/queries/preferences'; import { useProfile } from 'src/queries/profile'; @@ -31,15 +31,15 @@ export const ObjectStorageContent = (props: ContentProps) => { if (object_storage !== 'disabled') { return ( - - + + Object Storage is enabled on your account. Upon cancellation, all Object Storage Access Keys will be revoked, all buckets will be removed, and their objects deleted. - + - + diff --git a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx index 3cef95fec3d..bca959d98e1 100644 --- a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx +++ b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx @@ -31,7 +31,7 @@ import Select, { Item } from 'src/components/EnhancedSelect/Select'; import { RegionSelect } from 'src/components/EnhancedSelect/variants/RegionSelect'; import RegionOption from 'src/components/EnhancedSelect/variants/RegionSelect/RegionOption'; import ErrorState from 'src/components/ErrorState'; -import Grid from 'src/components/Grid'; +import Grid from '@mui/material/Unstable_Grid2'; import LandingHeader from 'src/components/LandingHeader'; import Link from 'src/components/Link'; import MultipleIPInput from 'src/components/MultipleIPInput'; @@ -462,7 +462,7 @@ const DatabaseCreate = () => { /> {createError ? : null} - + Name Your Cluster { /> - + Select Engine and Region = React.memo((props) => { handlePolicyChange(selected.value) } /> - - + + ); }); diff --git a/packages/manager/src/features/Footer/Footer.tsx b/packages/manager/src/features/Footer/Footer.tsx index 8995275eb26..4fdc388e356 100644 --- a/packages/manager/src/features/Footer/Footer.tsx +++ b/packages/manager/src/features/Footer/Footer.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import { makeStyles } from '@mui/styles'; import { Theme } from '@mui/material/styles'; import ExternalLink from 'src/components/ExternalLink'; -import Grid from 'src/components/Grid'; +import Grid from '@mui/material/Unstable_Grid2'; import packageJson from '../../../package.json'; interface Props { @@ -31,7 +31,6 @@ const useStyles = makeStyles((theme: Theme) => ({ }, }, version: { - marginLeft: theme.spacing(2), '&.MuiGrid-item': { paddingLeft: 0, }, @@ -86,11 +85,8 @@ export const Footer: React.FC = (props) => { [classes.desktopMenuIsOpen]: desktopMenuIsOpen, })} > - - {renderVersion(classes.link)} - + {renderVersion(classes.link)} = (props) => { { return ( - + {text} { Other Ways to Get Help - - + + { link="https://linode.com/docs/" /> - + { link="https://linode.com/community/questions" /> - + { link="https://status.linode.com" /> - + ({ root: { @@ -26,8 +26,11 @@ const useStyles = makeStyles((theme: Theme) => ({ }, withSeparator: { borderLeft: `1px solid ${theme.palette.divider}`, - '&.MuiGrid-item': { - paddingLeft: theme.spacing(4), + paddingLeft: theme.spacing(4), + [theme.breakpoints.down('sm')]: { + borderLeft: 'none', + paddingLeft: 0, + marginTop: theme.spacing(4), }, }, })); @@ -100,14 +103,13 @@ const PopularPosts: React.FC = () => { return ( - + Most Popular Documentation: {renderPopularDocs()} }, heading: { textAlign: 'center', - marginBottom: theme.spacing(2), + marginBottom: theme.spacing(1), }, card: { display: 'flex', @@ -94,15 +94,21 @@ export class OtherWays extends React.Component { const { drawerOpen } = this.state; return ( - - - + <> + + Didn’t find what you need? Get help. - - + + { link="https://linode.com/community/" /> - + - - - - 1 ? `Search results for "${query}"` : 'Search' - } - data-qa-support-search-landing-title - /> - - - - + + 1 ? `Search results for "${query}"` : 'Search' + } + data-qa-support-search-landing-title + /> + + {searchError && {searchError}} - - + + - - + + - - - - + + ); } diff --git a/packages/manager/src/features/Images/ImageSelect.tsx b/packages/manager/src/features/Images/ImageSelect.tsx index 64eb19adc6a..7c65c6b1c1b 100644 --- a/packages/manager/src/features/Images/ImageSelect.tsx +++ b/packages/manager/src/features/Images/ImageSelect.tsx @@ -1,27 +1,13 @@ import { Image } from '@linode/api-v4/lib/images'; import { clone, propOr } from 'ramda'; import * as React from 'react'; -import { makeStyles } from '@mui/styles'; -import { Theme } from '@mui/material/styles'; import Select, { GroupType, Item } from 'src/components/EnhancedSelect/Select'; -import Grid from 'src/components/Grid'; +import Box from '@mui/material/Box'; import { TooltipIcon } from 'src/components/TooltipIcon/TooltipIcon'; import { useAllImagesQuery } from 'src/queries/images'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; import { groupImages } from 'src/utilities/images'; -const useStyles = makeStyles((theme: Theme) => ({ - root: { - width: '100%', - }, - selectContainer: { - width: `calc(415px + ${theme.spacing(2)})`, - [theme.breakpoints.down('sm')]: { - width: '100%', - }, - }, -})); - interface BaseProps { images: Image[]; imageError?: string; @@ -60,8 +46,6 @@ export const ImageSelect = (props: Props | MultiProps) => { anyAllOption, } = props; - const classes = useStyles(); - const { isLoading: imagesLoading, isError, error } = useAllImagesQuery( {}, {} @@ -91,15 +75,18 @@ export const ImageSelect = (props: Props | MultiProps) => { } return ( - - + { onChange={(selected: Item) => setVersion(selected)} isClearable={false} /> - +
- + { ]} isOnCreate /> - + diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/NodePoolPanel.tsx b/packages/manager/src/features/Kubernetes/CreateCluster/NodePoolPanel.tsx index 19b69d1165c..74a1750e271 100644 --- a/packages/manager/src/features/Kubernetes/CreateCluster/NodePoolPanel.tsx +++ b/packages/manager/src/features/Kubernetes/CreateCluster/NodePoolPanel.tsx @@ -2,7 +2,7 @@ import { KubeNodePoolResponse } from '@linode/api-v4'; import * as React from 'react'; import { compose } from 'recompose'; import CircleProgress from 'src/components/CircleProgress'; -import Grid from 'src/components/core/Grid'; +import Grid from '@mui/material/Unstable_Grid2'; import ErrorState from 'src/components/ErrorState'; import renderGuard, { RenderGuardProps } from 'src/components/RenderGuard'; import SelectPlanQuantityPanel, { @@ -86,7 +86,7 @@ const Panel: React.FunctionComponent = (props) => { return ( - + t.class !== 'nanode' && t.class !== 'gpu' diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeClusterSpecs.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeClusterSpecs.tsx index ed97cc435d4..2a4ef654149 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeClusterSpecs.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeClusterSpecs.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import { makeStyles } from '@mui/styles'; import { Theme } from '@mui/material/styles'; import Typography from 'src/components/core/Typography'; -import Grid from 'src/components/Grid'; +import Grid from '@mui/material/Unstable_Grid2'; import { useAllKubernetesNodePoolQuery } from 'src/queries/kubernetes'; import { useSpecificTypes } from 'src/queries/types'; import { extendTypesQueryResult } from 'src/utilities/extendType'; @@ -84,12 +84,11 @@ export const KubeClusterSpecs = (props: Props) => { return ( - + {spec} @@ -97,13 +96,9 @@ export const KubeClusterSpecs = (props: Props) => { }; return ( - - - {kubeSpecsLeft.map(kubeSpecItem)} - - - {kubeSpecsRight.map(kubeSpecItem)} - + + {kubeSpecsLeft.map(kubeSpecItem)} + {kubeSpecsRight.map(kubeSpecItem)} ); }; diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigDisplay.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigDisplay.tsx index ea34d747afe..936db24ecba 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigDisplay.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigDisplay.tsx @@ -2,7 +2,8 @@ import * as React from 'react'; import { makeStyles } from '@mui/styles'; import { Theme } from '@mui/material/styles'; import Typography from 'src/components/core/Typography'; -import Grid from 'src/components/Grid'; +import Grid from '@mui/material/Unstable_Grid2'; +import Box from '@mui/material/Box'; import DetailsIcon from 'src/assets/icons/code-file.svg'; import DownloadIcon from 'src/assets/icons/lke-download.svg'; import ResetIcon from 'src/assets/icons/reset.svg'; @@ -129,7 +130,7 @@ export const KubeConfigDisplay = (props: Props) => { return ( <> - + Kubernetes API Endpoint: @@ -143,13 +144,12 @@ export const KubeConfigDisplay = (props: Props) => { )} - + Kubeconfig:
- @@ -160,17 +160,12 @@ export const KubeConfigDisplay = (props: Props) => { {`${clusterLabel}-kubeconfig.yaml`} - - + + View - - + setResetKubeConfigDialogOpen(true)} className={classes.kubeconfigElement} > @@ -188,7 +183,7 @@ export const KubeConfigDisplay = (props: Props) => { > Reset - +
diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigDrawer.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigDrawer.tsx index 843d6b15916..591b7e39c67 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigDrawer.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigDrawer.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import Download from 'src/assets/icons/download.svg'; import CopyTooltip from 'src/components/CopyTooltip'; -import Grid from 'src/components/core/Grid'; +import Grid from '@mui/material/Unstable_Grid2'; import { makeStyles } from '@mui/styles'; import { Theme } from '@mui/material/styles'; import Typography from 'src/components/core/Typography'; @@ -66,10 +66,10 @@ export const KubeConfigDrawer = (props: Props) => { loading={isLoading} > - + {clusterLabel} - + - + diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubernetesClusterDetail.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubernetesClusterDetail.tsx index 2b2f511fabd..12de7f66209 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubernetesClusterDetail.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubernetesClusterDetail.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useLocation, useParams } from 'react-router-dom'; import CircleProgress from 'src/components/CircleProgress'; -import Grid from 'src/components/core/Grid'; +import Grid from '@mui/material/Unstable_Grid2'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import ErrorState from 'src/components/ErrorState'; import { getKubeHighAvailability } from 'src/features/Kubernetes/kubeUtils'; @@ -73,7 +73,7 @@ export const KubernetesClusterDetail = () => { return ( <> - + { : undefined } /> - + - + { } style={{ marginTop: 12 }} /> - - + + { /> { > / - + { className={classes.input} /> - + {errors.min ? ( {errors.min} diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePool.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePool.tsx index c3bbcb98473..cebd0c4a2ed 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePool.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePool.tsx @@ -7,7 +7,7 @@ import { makeStyles } from '@mui/styles'; import { Theme } from '@mui/material/styles'; import Button from 'src/components/Button'; import Typography from 'src/components/core/Typography'; -import Grid from 'src/components/Grid'; +import Grid from '@mui/material/Unstable_Grid2'; import NodeTable from './NodeTable'; import Tooltip from 'src/components/core/Tooltip'; @@ -55,71 +55,80 @@ const NodePool: React.FC = (props) => { const classes = useStyles(); return ( - <> + + + {typeLabel} + + + + {autoscaler.enabled ? ( + + {`(Min ${autoscaler.min} / Max ${autoscaler.max})`} + + ) : null} + + + +
+ +
+ + - - {typeLabel} - - - - {autoscaler.enabled ? ( - - {`(Min ${autoscaler.min} / Max ${autoscaler.max})`} - - ) : null} - - - -
- -
- - + - - + ); }; diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePoolsDisplay.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePoolsDisplay.tsx index fdc30ea3631..e87708e24ce 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePoolsDisplay.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePoolsDisplay.tsx @@ -5,7 +5,7 @@ import { makeStyles } from '@mui/styles'; import { Theme } from '@mui/material/styles'; import Typography from 'src/components/core/Typography'; import ErrorState from 'src/components/ErrorState'; -import Grid from 'src/components/Grid'; +import Grid from '@mui/material/Unstable_Grid2'; import { RecycleNodePoolDialog } from '../RecycleNodePoolDialog'; import { AddNodePoolDrawer } from './AddNodePoolDrawer'; import { ResizeNodePoolDrawer } from './ResizeNodePoolDrawer'; @@ -22,10 +22,6 @@ import { useSpecificTypes } from 'src/queries/types'; import { extendTypesQueryResult } from 'src/utilities/extendType'; const useStyles = makeStyles((theme: Theme) => ({ - root: { - padding: theme.spacing(0), - paddingTop: '4px', - }, button: { marginBottom: theme.spacing(), marginLeft: theme.spacing(), @@ -53,9 +49,6 @@ const useStyles = makeStyles((theme: Theme) => ({ display: 'flex', alignItems: 'center', }, - nodePool: { - marginBottom: theme.spacing(3), - }, })); export interface Props { @@ -65,7 +58,6 @@ export interface Props { export const NodePoolsDisplay = (props: Props) => { const { clusterID, clusterLabel } = props; - const classes = useStyles(); const { @@ -124,9 +116,9 @@ export const NodePoolsDisplay = (props: Props) => { container alignItems="center" justifyContent="space-between" - updateFor={[classes]} + spacing={2} > - + { Node Pools - + - + {poolsError ? ( ) : ( - + {_pools?.map((thisPool) => { const { id, nodes } = thisPool; @@ -168,7 +160,7 @@ export const NodePoolsDisplay = (props: Props) => { thisPoolType?.formattedLabel ?? 'Unknown type'; return ( -
+
= React.memo((props) => { - + {linodeLink ? ( {displayLabel} diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/UpgradeKubernetesVersionBanner.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/UpgradeKubernetesVersionBanner.tsx index 29ef8151c16..cbda166ce1d 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/UpgradeKubernetesVersionBanner.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/UpgradeKubernetesVersionBanner.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import Button from 'src/components/Button'; import Typography from 'src/components/core/Typography'; import DismissibleBanner from 'src/components/DismissibleBanner'; -import Grid from 'src/components/Grid'; +import Grid from '@mui/material/Unstable_Grid2'; import { useKubernetesVersionQuery } from 'src/queries/kubernetes'; import { getNextVersion } from '../kubeUtils'; import UpgradeVersionModal from '../UpgradeVersionModal'; @@ -33,12 +33,12 @@ export const UpgradeKubernetesVersionBanner = (props: Props) => { alignItems="center" justifyContent="space-between" > - + A new version of Kubernetes is available ({nextVersion}). - + diff --git a/packages/manager/src/features/Managed/Contacts/Contacts.tsx b/packages/manager/src/features/Managed/Contacts/Contacts.tsx index c2e63e7fc6a..7def58318aa 100644 --- a/packages/manager/src/features/Managed/Contacts/Contacts.tsx +++ b/packages/manager/src/features/Managed/Contacts/Contacts.tsx @@ -3,14 +3,14 @@ import { useSnackbar } from 'notistack'; import * as React from 'react'; import AddNewLink from 'src/components/AddNewLink'; import Hidden from 'src/components/core/Hidden'; -import { makeStyles } from '@mui/styles'; +import { makeStyles } from 'tss-react/mui'; import { Theme } from '@mui/material/styles'; import TableBody from 'src/components/core/TableBody'; import TableHead from 'src/components/core/TableHead'; import Typography from 'src/components/core/Typography'; import DeletionDialog from 'src/components/DeletionDialog'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; -import Grid from 'src/components/Grid'; +import Grid from '@mui/material/Unstable_Grid2'; import OrderBy from 'src/components/OrderBy'; import Paginate from 'src/components/Paginate'; import PaginationFooter from 'src/components/PaginationFooter'; @@ -29,7 +29,7 @@ import { ManagedContactGroup, Mode } from './common'; import ContactDrawer from './ContactsDrawer'; import ContactTableContact from './ContactsTableContent'; -const useStyles = makeStyles((theme: Theme) => ({ +const useStyles = makeStyles()((theme: Theme) => ({ copy: { fontSize: '0.875rem', marginBottom: theme.spacing(2), @@ -54,7 +54,7 @@ const useStyles = makeStyles((theme: Theme) => ({ })); const Contacts = () => { - const classes = useStyles(); + const { classes } = useStyles(); const { enqueueSnackbar } = useSnackbar(); const { @@ -119,8 +119,9 @@ const Contacts = () => { container alignItems="center" justifyContent="flex-end" + spacing={2} > - + { setContactDrawerMode('create'); diff --git a/packages/manager/src/features/Managed/Contacts/ContactsDrawer.tsx b/packages/manager/src/features/Managed/Contacts/ContactsDrawer.tsx index ea340e5ed09..476ff879c18 100644 --- a/packages/manager/src/features/Managed/Contacts/ContactsDrawer.tsx +++ b/packages/manager/src/features/Managed/Contacts/ContactsDrawer.tsx @@ -7,7 +7,7 @@ import ActionsPanel from 'src/components/ActionsPanel'; import Button from 'src/components/Button'; import Drawer from 'src/components/Drawer'; import Select from 'src/components/EnhancedSelect/Select'; -import Grid from 'src/components/Grid'; +import Grid from '@mui/material/Unstable_Grid2'; import Notice from 'src/components/Notice'; import TextField from 'src/components/TextField'; import { @@ -154,8 +154,8 @@ const ContactsDrawer: React.FC = (props) => { value={values.email} /> - - + + = (props) => { onBlur={handleBlur} /> - + ({ +const useStyles = makeStyles()((theme: Theme) => ({ copy: { fontSize: '0.875rem', marginBottom: theme.spacing(2), @@ -63,7 +63,7 @@ const useStyles = makeStyles((theme: Theme) => ({ export type FormikProps = FormikBag<{}, CredentialPayload>; export const CredentialList = () => { - const classes = useStyles(); + const { classes } = useStyles(); const { enqueueSnackbar } = useSnackbar(); const { data, isLoading, error } = useAllManagedCredentialsQuery(); @@ -224,9 +224,12 @@ export const CredentialList = () => { container alignItems="center" justifyContent="flex-end" - updateFor={[credentials, error, isLoading]} + spacing={2} + sx={{ + paddingRight: 0, + }} > - + setDrawerOpen(true)} diff --git a/packages/manager/src/features/Managed/ManagedDashboardCard/DashboardCard.tsx b/packages/manager/src/features/Managed/ManagedDashboardCard/DashboardCard.tsx index 6d274cc2c38..37cbdef613d 100644 --- a/packages/manager/src/features/Managed/ManagedDashboardCard/DashboardCard.tsx +++ b/packages/manager/src/features/Managed/ManagedDashboardCard/DashboardCard.tsx @@ -1,11 +1,10 @@ -import classNames from 'classnames'; import * as React from 'react'; -import { makeStyles } from '@mui/styles'; +import { makeStyles } from 'tss-react/mui'; import { Theme } from '@mui/material/styles'; import Typography from 'src/components/core/Typography'; -import Grid from 'src/components/Grid'; +import Grid from '@mui/material/Unstable_Grid2'; -const useStyles = makeStyles((theme: Theme) => ({ +const useStyles = makeStyles()((theme: Theme) => ({ root: { width: '100% !important', }, @@ -34,7 +33,7 @@ interface Props { } const DashboardCard: React.FC = (props) => { - const classes = useStyles(); + const { classes, cx } = useStyles(); const { alignHeader, @@ -48,27 +47,29 @@ const DashboardCard: React.FC = (props) => { return ( {(title || headerAction) && ( - + {title && ( - + {title} )} {headerAction && ( - + = (props) => { )} - - {props.children} - + {props.children} ); }; diff --git a/packages/manager/src/features/Managed/ManagedDashboardCard/ManagedDashboardCard.tsx b/packages/manager/src/features/Managed/ManagedDashboardCard/ManagedDashboardCard.tsx index c2fc4e5c6fa..3f9611b1942 100644 --- a/packages/manager/src/features/Managed/ManagedDashboardCard/ManagedDashboardCard.tsx +++ b/packages/manager/src/features/Managed/ManagedDashboardCard/ManagedDashboardCard.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Grid from 'src/components/Grid'; +import Grid from '@mui/material/Unstable_Grid2'; import DashboardCard from './DashboardCard'; import ManagedChartPanel from './ManagedChartPanel'; import MonitorStatus from './MonitorStatus'; @@ -94,7 +94,6 @@ export const ManagedDashboardCard = () => { > { sm={5} className={classes.status} > - + - + - + diff --git a/packages/manager/src/features/Managed/ManagedDashboardCard/MonitorStatus.tsx b/packages/manager/src/features/Managed/ManagedDashboardCard/MonitorStatus.tsx index 8e439fe0ad5..b40c955c21b 100644 --- a/packages/manager/src/features/Managed/ManagedDashboardCard/MonitorStatus.tsx +++ b/packages/manager/src/features/Managed/ManagedDashboardCard/MonitorStatus.tsx @@ -7,7 +7,7 @@ import MonitorOK from 'src/assets/icons/monitor-ok.svg'; import { makeStyles, withTheme, WithTheme } from '@mui/styles'; import { Theme } from '@mui/material/styles'; import Typography from 'src/components/core/Typography'; -import Grid from 'src/components/Grid'; +import Grid from '@mui/material/Unstable_Grid2'; export const useStyles = makeStyles((theme: Theme) => ({ root: { @@ -68,10 +68,9 @@ export const MonitorStatus: React.FC = (props) => { alignItems="center" justifyContent="center" className={classes.root} - item > - - + + {failedMonitors.length === 0 ? ( ) : ( @@ -79,7 +78,7 @@ export const MonitorStatus: React.FC = (props) => { )} - + {failedMonitors.length === 0 ? 'All monitored services are up' @@ -89,7 +88,7 @@ export const MonitorStatus: React.FC = (props) => { {failedMonitors.length > 0 && ( - + {failedMonitors.map((thisMonitor, idx) => ( = (props) => { ))} )} - + View your list of service monitors {` `} diff --git a/packages/manager/src/features/Managed/ManagedDashboardCard/MonitorTickets.tsx b/packages/manager/src/features/Managed/ManagedDashboardCard/MonitorTickets.tsx index 24fe3864796..0fcc4135f5f 100644 --- a/packages/manager/src/features/Managed/ManagedDashboardCard/MonitorTickets.tsx +++ b/packages/manager/src/features/Managed/ManagedDashboardCard/MonitorTickets.tsx @@ -5,7 +5,7 @@ import Button from 'src/components/Button'; import { makeStyles } from '@mui/styles'; import { Theme } from '@mui/material/styles'; import Typography from 'src/components/core/Typography'; -import Grid from 'src/components/Grid'; +import Grid from '@mui/material/Unstable_Grid2'; import { ExtendedIssue } from 'src/queries/managed/types'; const useStyles = makeStyles((theme: Theme) => ({ @@ -49,12 +49,11 @@ export const MonitorTickets: React.FC = (props) => { className={classes.root} > - + {hasIssues ? `${openIssues.length} open support ${ @@ -63,7 +62,7 @@ export const MonitorTickets: React.FC = (props) => { : 'No open support tickets'} - + {hasIssues ? ( View the Support tickets page for diff --git a/packages/manager/src/features/Managed/MonitorDrawer.tsx b/packages/manager/src/features/Managed/MonitorDrawer.tsx index 6d50a41f97a..c928c3b6e27 100644 --- a/packages/manager/src/features/Managed/MonitorDrawer.tsx +++ b/packages/manager/src/features/Managed/MonitorDrawer.tsx @@ -13,7 +13,7 @@ import Button from 'src/components/Button'; import InputAdornment from 'src/components/core/InputAdornment'; import Drawer from 'src/components/Drawer'; import Select, { Item } from 'src/components/EnhancedSelect/Select'; -import Grid from 'src/components/Grid'; +import Grid from '@mui/material/Unstable_Grid2'; import Notice from 'src/components/Notice'; import TextField from 'src/components/TextField'; @@ -182,8 +182,8 @@ const MonitorDrawer: React.FC = (props) => { }} /> - - + + - - Active health checks proactively check the health of back-end - nodes. {conditionalText} - - + + { {protocol === 'https' && ( - - - + + + { disabled={disabled} /> - + { )} {tcpSelected && ( - + { - + = React.memo((props) => { /> {handleDelete ? ( - +