diff --git a/packages/manager/.changeset/pr-9124-tech-stories-1684339298469.md b/packages/manager/.changeset/pr-9124-tech-stories-1684339298469.md new file mode 100644 index 00000000000..08efb6db589 --- /dev/null +++ b/packages/manager/.changeset/pr-9124-tech-stories-1684339298469.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Tech Stories +--- + +MUI v5 Migration - `Components > TypeToConfirm & Components > TypeToConfirmDialog` ([#9124](https://github.com/linode/manager/pull/9124)) diff --git a/packages/manager/src/components/DeletionDialog/DeletionDialog.tsx b/packages/manager/src/components/DeletionDialog/DeletionDialog.tsx index 7b143fb6874..60f06029dcc 100644 --- a/packages/manager/src/components/DeletionDialog/DeletionDialog.tsx +++ b/packages/manager/src/components/DeletionDialog/DeletionDialog.tsx @@ -4,7 +4,7 @@ import Button from 'src/components/Button'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; import { useTheme } from '@mui/material/styles'; import Typography from 'src/components/core/Typography'; -import TypeToConfirm from 'src/components/TypeToConfirm'; +import { TypeToConfirm } from 'src/components/TypeToConfirm/TypeToConfirm'; import { Notice } from 'src/components/Notice/Notice'; import { titlecase } from 'src/features/linodes/presentation'; import { capitalize } from 'src/utilities/capitalize'; diff --git a/packages/manager/src/components/TypeToConfirm/TypeToConfirm.test.tsx b/packages/manager/src/components/TypeToConfirm/TypeToConfirm.test.tsx index cfa4402bfd0..dde9484d8e8 100644 --- a/packages/manager/src/components/TypeToConfirm/TypeToConfirm.test.tsx +++ b/packages/manager/src/components/TypeToConfirm/TypeToConfirm.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { renderWithTheme } from 'src/utilities/testHelpers'; -import TypeToConfirm from './TypeToConfirm'; +import { TypeToConfirm } from './TypeToConfirm'; const props = { onClick: jest.fn() }; diff --git a/packages/manager/src/components/TypeToConfirm/TypeToConfirm.tsx b/packages/manager/src/components/TypeToConfirm/TypeToConfirm.tsx index a884f538a37..df967f14379 100644 --- a/packages/manager/src/components/TypeToConfirm/TypeToConfirm.tsx +++ b/packages/manager/src/components/TypeToConfirm/TypeToConfirm.tsx @@ -1,47 +1,30 @@ import * as React from 'react'; -import { makeStyles } from '@mui/styles'; -import { Theme } from '@mui/material/styles'; -import Typography from 'src/components/core/Typography'; import Link from 'src/components/Link'; -import TextField from 'src/components/TextField'; +import TextField, { Props } from 'src/components/TextField'; +import Typography from 'src/components/core/Typography'; -export interface Props { +export interface TypeToConfirmProps extends Omit { confirmationText?: JSX.Element | string; - onChange: (str: string) => void; - label: string; - hideLabel?: boolean; textFieldStyle?: React.CSSProperties; typographyStyle?: React.CSSProperties; visible?: boolean | undefined; title?: string; hideInstructions?: boolean; - // This is a string index signature. - // This means that all properties in 'Props' are assignable to any - [propName: string]: any; + onChange: (value: string) => void; } -const useStyles = makeStyles((theme: Theme) => ({ - description: { - marginTop: theme.spacing(), - }, -})); - -const TypeToConfirm: React.FC = (props) => { +export const TypeToConfirm = (props: TypeToConfirmProps) => { const { confirmationText, - onChange, - label, - hideLabel, textFieldStyle, typographyStyle, title, visible, hideInstructions, + onChange, ...rest } = props; - const classes = useStyles(); - /* There was an edge case bug where, when preferences?.type_to_confirm was undefined, the type-to-confirm input did not appear and the language in the instruction text @@ -58,10 +41,8 @@ const TypeToConfirm: React.FC = (props) => { {title} {confirmationText} onChange(e.target.value)} style={textFieldStyle} + onChange={(e) => onChange(e.target.value)} {...rest} /> @@ -69,7 +50,7 @@ const TypeToConfirm: React.FC = (props) => { {!hideInstructions ? ( To {disableOrEnable} type-to-confirm, go to the Type-to-Confirm section of My Settings. @@ -78,5 +59,3 @@ const TypeToConfirm: React.FC = (props) => { ); }; - -export default TypeToConfirm; diff --git a/packages/manager/src/components/TypeToConfirm/index.ts b/packages/manager/src/components/TypeToConfirm/index.ts deleted file mode 100644 index 8a339ada99f..00000000000 --- a/packages/manager/src/components/TypeToConfirm/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -import TypeToConfirm, { Props as _TypeToConfirmProps } from './TypeToConfirm'; - -// eslint-disable-next-line @typescript-eslint/no-empty-interface -export interface TypeToConfirmProps extends _TypeToConfirmProps {} -export default TypeToConfirm; diff --git a/packages/manager/src/components/TypeToConfirmDialog/TypeToConfirmDialog.test.tsx b/packages/manager/src/components/TypeToConfirmDialog/TypeToConfirmDialog.test.tsx index eeb997d3a5c..d2bd7008508 100644 --- a/packages/manager/src/components/TypeToConfirmDialog/TypeToConfirmDialog.test.tsx +++ b/packages/manager/src/components/TypeToConfirmDialog/TypeToConfirmDialog.test.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import Typography from 'src/components/core/Typography'; import { renderWithTheme } from 'src/utilities/testHelpers'; -import TypeToConfirmDialog from './TypeToConfirmDialog'; +import { TypeToConfirmDialog } from './TypeToConfirmDialog'; const props = { onClick: jest.fn(), onClose: jest.fn() }; diff --git a/packages/manager/src/components/TypeToConfirmDialog/TypeToConfirmDialog.tsx b/packages/manager/src/components/TypeToConfirmDialog/TypeToConfirmDialog.tsx index 35700e7376a..2ae1dced167 100644 --- a/packages/manager/src/components/TypeToConfirmDialog/TypeToConfirmDialog.tsx +++ b/packages/manager/src/components/TypeToConfirmDialog/TypeToConfirmDialog.tsx @@ -1,21 +1,23 @@ +import { APIError } from '@linode/api-v4/lib/types'; import * as React from 'react'; +import ActionsPanel from 'src/components/ActionsPanel'; +import Button from 'src/components/Button'; import { ConfirmationDialog, ConfirmationDialogProps, } from 'src/components/ConfirmationDialog/ConfirmationDialog'; -import TypeToConfirm from 'src/components/TypeToConfirm'; +import { + TypeToConfirm, + TypeToConfirmProps, +} from 'src/components/TypeToConfirm/TypeToConfirm'; import { usePreferences } from 'src/queries/preferences'; -import ActionsPanel from 'src/components/ActionsPanel'; -import Button from 'src/components/Button'; -import { TypeToConfirmProps } from 'src/components/TypeToConfirm'; -import { APIError } from '@linode/api-v4/lib/types'; interface EntityInfo { type: 'Linode' | 'Volume' | 'NodeBalancer' | 'Bucket'; label: string | undefined; } -interface Props { +interface TypeToConfirmDialogProps { entity: EntityInfo; children: React.ReactNode; loading: boolean; @@ -24,11 +26,11 @@ interface Props { onClick: () => void; } -type CombinedProps = Props & +type CombinedProps = TypeToConfirmDialogProps & ConfirmationDialogProps & Partial; -const TypeToConfirmDialog: React.FC = (props) => { +export const TypeToConfirmDialog = (props: CombinedProps) => { const { open, title, @@ -106,5 +108,3 @@ const TypeToConfirmDialog: React.FC = (props) => { ); }; - -export default TypeToConfirmDialog; diff --git a/packages/manager/src/components/TypeToConfirmDialog/index.ts b/packages/manager/src/components/TypeToConfirmDialog/index.ts deleted file mode 100644 index a86b108df1a..00000000000 --- a/packages/manager/src/components/TypeToConfirmDialog/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -import TypeToConfirmDialog from './TypeToConfirmDialog'; -export default TypeToConfirmDialog; diff --git a/packages/manager/src/features/Account/CloseAccountDialog.tsx b/packages/manager/src/features/Account/CloseAccountDialog.tsx index b787afad865..f879320be6c 100644 --- a/packages/manager/src/features/Account/CloseAccountDialog.tsx +++ b/packages/manager/src/features/Account/CloseAccountDialog.tsx @@ -9,7 +9,7 @@ import { makeStyles } from 'tss-react/mui'; import { Theme } from '@mui/material/styles'; import { Notice } from 'src/components/Notice/Notice'; import Typography from 'src/components/core/Typography'; -import TypeToConfirm from 'src/components/TypeToConfirm'; +import { TypeToConfirm } from 'src/components/TypeToConfirm/TypeToConfirm'; import TextField from 'src/components/TextField'; import { useProfile } from 'src/queries/profile'; diff --git a/packages/manager/src/features/Account/EnableObjectStorage.tsx b/packages/manager/src/features/Account/EnableObjectStorage.tsx index 7b68a7a7fd8..e57c3539cb5 100644 --- a/packages/manager/src/features/Account/EnableObjectStorage.tsx +++ b/packages/manager/src/features/Account/EnableObjectStorage.tsx @@ -8,7 +8,7 @@ import ActionsPanel from 'src/components/ActionsPanel'; import Button from 'src/components/Button'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; import { Notice } from 'src/components/Notice/Notice'; -import TypeToConfirm from 'src/components/TypeToConfirm'; +import { TypeToConfirm } from 'src/components/TypeToConfirm/TypeToConfirm'; import Typography from 'src/components/core/Typography'; import ExternalLink from 'src/components/ExternalLink'; import Grid from '@mui/material/Unstable_Grid2'; diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/RestoreFromBackupDialog.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/RestoreFromBackupDialog.tsx index 30a3e092825..90e7372e0c5 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/RestoreFromBackupDialog.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/RestoreFromBackupDialog.tsx @@ -5,15 +5,15 @@ import { useHistory } from 'react-router-dom'; import ActionsPanel from 'src/components/ActionsPanel'; import Button from 'src/components/Button'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; -import TypeToConfirm from 'src/components/TypeToConfirm'; -import Typography from 'src/components/core/Typography'; import { DialogProps } from 'src/components/Dialog/Dialog'; import { Notice } from 'src/components/Notice/Notice'; -import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; -import formatDate from 'src/utilities/formatDate'; -import { usePreferences } from 'src/queries/preferences'; +import { TypeToConfirm } from 'src/components/TypeToConfirm/TypeToConfirm'; +import Typography from 'src/components/core/Typography'; import { useRestoreFromBackupMutation } from 'src/queries/databases'; +import { usePreferences } from 'src/queries/preferences'; import { useProfile } from 'src/queries/profile'; +import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; +import formatDate from 'src/utilities/formatDate'; interface Props extends Omit { open: boolean; diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsDeleteClusterDialog.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsDeleteClusterDialog.tsx index 60a3f04146e..eb2f746dd0e 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsDeleteClusterDialog.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsDeleteClusterDialog.tsx @@ -7,7 +7,7 @@ import Button from 'src/components/Button'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; import Typography from 'src/components/core/Typography'; import { Notice } from 'src/components/Notice/Notice'; -import TypeToConfirm from 'src/components/TypeToConfirm'; +import { TypeToConfirm } from 'src/components/TypeToConfirm/TypeToConfirm'; import { useDeleteDatabaseMutation } from 'src/queries/databases'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; import { usePreferences } from 'src/queries/preferences'; diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/DeleteKubernetesClusterDialog.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/DeleteKubernetesClusterDialog.tsx index ab01be88f44..e96c49d09ba 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/DeleteKubernetesClusterDialog.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/DeleteKubernetesClusterDialog.tsx @@ -3,7 +3,7 @@ import ActionsPanel from 'src/components/ActionsPanel'; import Button from 'src/components/Button'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; import Typography from 'src/components/core/Typography'; -import TypeToConfirm from 'src/components/TypeToConfirm'; +import { TypeToConfirm } from 'src/components/TypeToConfirm/TypeToConfirm'; import { Notice } from 'src/components/Notice/Notice'; import { usePreferences } from 'src/queries/preferences'; import { useDeleteKubernetesClusterMutation } from 'src/queries/kubernetes'; diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDeleteDialog.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDeleteDialog.tsx index 6661248fe75..58e90eb2862 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerDeleteDialog.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDeleteDialog.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { useHistory } from 'react-router-dom'; import Typography from 'src/components/core/Typography'; import { Notice } from 'src/components/Notice/Notice'; -import TypeToConfirmDialog from 'src/components/TypeToConfirmDialog'; +import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog'; import { useNodebalancerDeleteMutation } from 'src/queries/nodebalancers'; interface Props { diff --git a/packages/manager/src/features/ObjectStorage/BucketLanding/BucketLanding.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/BucketLanding.tsx index ccb50d4b05b..7e049969555 100644 --- a/packages/manager/src/features/ObjectStorage/BucketLanding/BucketLanding.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketLanding/BucketLanding.tsx @@ -11,7 +11,7 @@ import Grid from '@mui/material/Unstable_Grid2'; import { Notice } from 'src/components/Notice/Notice'; import OrderBy from 'src/components/OrderBy'; import { TransferDisplay } from 'src/components/TransferDisplay/TransferDisplay'; -import TypeToConfirmDialog from 'src/components/TypeToConfirmDialog'; +import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog'; import Typography from 'src/components/core/Typography'; import useOpenClose from 'src/hooks/useOpenClose'; import { APIError } from '@linode/api-v4/lib/types'; diff --git a/packages/manager/src/features/Volumes/DestructiveVolumeDialog.tsx b/packages/manager/src/features/Volumes/DestructiveVolumeDialog.tsx index 3fc9566ac6b..6a31a4028cd 100644 --- a/packages/manager/src/features/Volumes/DestructiveVolumeDialog.tsx +++ b/packages/manager/src/features/Volumes/DestructiveVolumeDialog.tsx @@ -4,7 +4,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/Notice'; -import TypeToConfirmDialog from 'src/components/TypeToConfirmDialog'; +import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog'; import { resetEventsPolling } from 'src/eventsPolling'; import useLinodes from 'src/hooks/useLinodes'; import { diff --git a/packages/manager/src/features/linodes/LinodesDetail/LinodeRebuild/RebuildFromImage.tsx b/packages/manager/src/features/linodes/LinodesDetail/LinodeRebuild/RebuildFromImage.tsx index 91ea2d8b410..6fed6ff9a70 100644 --- a/packages/manager/src/features/linodes/LinodesDetail/LinodeRebuild/RebuildFromImage.tsx +++ b/packages/manager/src/features/linodes/LinodesDetail/LinodeRebuild/RebuildFromImage.tsx @@ -18,7 +18,8 @@ import Box from 'src/components/core/Box'; import Divider from 'src/components/core/Divider'; import Grid from '@mui/material/Unstable_Grid2'; import ImageSelect from 'src/components/ImageSelect'; -import TypeToConfirm from 'src/components/TypeToConfirm'; +import { TypeToConfirm } from 'src/components/TypeToConfirm/TypeToConfirm'; + import { resetEventsPolling } from 'src/eventsPolling'; import { UserDataAccordion } from 'src/features/linodes/LinodesCreate/UserDataAccordion/UserDataAccordion'; import useFlags from 'src/hooks/useFlags'; diff --git a/packages/manager/src/features/linodes/LinodesDetail/LinodeRebuild/RebuildFromStackScript.tsx b/packages/manager/src/features/linodes/LinodesDetail/LinodeRebuild/RebuildFromStackScript.tsx index c9c2538558a..1c1fd43f43b 100644 --- a/packages/manager/src/features/linodes/LinodesDetail/LinodeRebuild/RebuildFromStackScript.tsx +++ b/packages/manager/src/features/linodes/LinodesDetail/LinodeRebuild/RebuildFromStackScript.tsx @@ -13,7 +13,7 @@ import { makeStyles } from '@mui/styles'; import { Theme } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import ImageSelect from 'src/components/ImageSelect'; -import TypeToConfirm from 'src/components/TypeToConfirm'; +import { TypeToConfirm } from 'src/components/TypeToConfirm/TypeToConfirm'; import { resetEventsPolling } from 'src/eventsPolling'; import ImageEmptyState from 'src/features/linodes/LinodesCreate/TabbedContent/ImageEmptyState'; import SelectStackScriptPanel from 'src/features/StackScripts/SelectStackScriptPanel'; diff --git a/packages/manager/src/features/linodes/LinodesDetail/LinodeResize/LinodeResize.tsx b/packages/manager/src/features/linodes/LinodesDetail/LinodeResize/LinodeResize.tsx index 0bfa77385e7..8d7a2bd8d0c 100644 --- a/packages/manager/src/features/linodes/LinodesDetail/LinodeResize/LinodeResize.tsx +++ b/packages/manager/src/features/linodes/LinodesDetail/LinodeResize/LinodeResize.tsx @@ -17,7 +17,7 @@ import { Dialog } from 'src/components/Dialog/Dialog'; import ExternalLink from 'src/components/ExternalLink'; import { TooltipIcon } from 'src/components/TooltipIcon/TooltipIcon'; import { Notice } from 'src/components/Notice/Notice'; -import TypeToConfirm from 'src/components/TypeToConfirm'; +import { TypeToConfirm } from 'src/components/TypeToConfirm/TypeToConfirm'; import { withProfile, WithProfileProps, diff --git a/packages/manager/src/features/linodes/LinodesDetail/LinodeSettings/LinodeSettingsDeletePanel.tsx b/packages/manager/src/features/linodes/LinodesDetail/LinodeSettings/LinodeSettingsDeletePanel.tsx index d5ec8e31f85..cc4d81701f1 100644 --- a/packages/manager/src/features/linodes/LinodesDetail/LinodeSettings/LinodeSettingsDeletePanel.tsx +++ b/packages/manager/src/features/linodes/LinodesDetail/LinodeSettings/LinodeSettingsDeletePanel.tsx @@ -9,7 +9,7 @@ import Button from 'src/components/Button'; import Typography from 'src/components/core/Typography'; import { Notice } from 'src/components/Notice/Notice'; import PanelErrorBoundary from 'src/components/PanelErrorBoundary'; -import TypeToConfirmDialog from 'src/components/TypeToConfirmDialog'; +import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog'; import { resetEventsPolling } from 'src/eventsPolling'; import { withLinodeDetailContext } from 'src/features/linodes/LinodesDetail/linodeDetailContext'; import { diff --git a/packages/manager/src/features/linodes/LinodesLanding/DeleteLinodeDialog.tsx b/packages/manager/src/features/linodes/LinodesLanding/DeleteLinodeDialog.tsx index 98a2daa3e5c..3c8a3b202ee 100644 --- a/packages/manager/src/features/linodes/LinodesLanding/DeleteLinodeDialog.tsx +++ b/packages/manager/src/features/linodes/LinodesLanding/DeleteLinodeDialog.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import Typography from 'src/components/core/Typography'; import { Notice } from 'src/components/Notice/Notice'; -import TypeToConfirmDialog from 'src/components/TypeToConfirmDialog'; +import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog'; import { resetEventsPolling } from 'src/eventsPolling'; import { useDeleteLinodeMutation,