Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor: [M3-6421 & M3-6422] – MUI v5 Migration - Components > TypeToConfirm & Components > TypeToConfirmDialog #9124

Merged
merged 6 commits into from
May 23, 2023
Merged

refactor: [M3-6421 & M3-6422] – MUI v5 Migration - Components > TypeToConfirm & Components > TypeToConfirmDialog #9124

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
516b2fb
Add changeset
DevDW May 16, 2023
f4bd256
Add changeset
DevDW May 17, 2023
d19b7fa
Changeset cleanup
DevDW May 17, 2023
c61c335
use marginTop prop for Typography instead of styled API
DevDW May 18, 2023
fd1383e
Feedback
DevDW May 23, 2023
f48e2ac
Merge in latest develop; resolve conflicts
DevDW May 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages/manager/.changeset/pr-9124-tech-stories-1684339298469.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@linode/manager": Tech Stories
---

MUI v5 Migration - `Components > TypeToConfirm & Components > TypeToConfirmDialog` ([#9124](https://github.com/linode/manager/pull/9124))
2 changes: 1 addition & 1 deletion packages/manager/src/components/DeletionDialog/DeletionDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion packages/manager/src/components/TypeToConfirm/TypeToConfirm.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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() };

Expand Down
28 changes: 9 additions & 19 deletions packages/manager/src/components/TypeToConfirm/TypeToConfirm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
import { styled } from '@mui/material/styles';
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 Typography from 'src/components/core/Typography';

export interface Props {
export interface TypeToConfirmProps {
confirmationText?: JSX.Element | string;
onChange: (str: string) => void;
label: string;
Expand All @@ -20,13 +19,7 @@ export interface Props {
[propName: string]: any;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unrelated to your PR, but yikes... We should fix this

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here is an untested fix

import { styled } from '@mui/material/styles';
import * as React from 'react';
import Link from 'src/components/Link';
import TextField, { Props } from 'src/components/TextField';
import Typography from 'src/components/core/Typography';

export interface TypeToConfirmProps extends Omit<Props, 'onChange'> {
  confirmationText?: JSX.Element | string;
  textFieldStyle?: React.CSSProperties;
  typographyStyle?: React.CSSProperties;
  visible?: boolean | undefined;
  title?: string;
  hideInstructions?: boolean;
  onChange: (value: string) => void;
}

export const TypeToConfirm = (props: TypeToConfirmProps) => {
  const {
    confirmationText,
    textFieldStyle,
    typographyStyle,
    title,
    visible,
    hideInstructions,
    onChange,
    ...rest
  } = props;

  /*
    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
    did not match. If 'visible' is not explicitly false, we treat it as true.
  */

  const showTypeToConfirmInput = visible !== false;
  const disableOrEnable = showTypeToConfirmInput ? 'disable' : 'enable';

  return (
    <>
      {showTypeToConfirmInput ? (
        <>
          <Typography variant="h2">{title}</Typography>
          <Typography style={typographyStyle}>{confirmationText}</Typography>
          <TextField
            style={textFieldStyle}
            onChange={(e) => onChange(e.target.value)}
            {...rest}
          />
        </>
      ) : null}
      {!hideInstructions ? (
        <StyledTypography data-testid="instructions-to-enable-or-disable">
          To {disableOrEnable} type-to-confirm, go to the Type-to-Confirm
          section of <Link to="/profile/settings">My Settings</Link>.
        </StyledTypography>
      ) : null}
    </>
  );
};

const StyledTypography = styled(Typography)(({ theme }) => ({
  marginTop: theme.spacing(),
}));

}

const useStyles = makeStyles((theme: Theme) => ({
description: {
marginTop: theme.spacing(),
},
}));

const TypeToConfirm: React.FC<Props> = (props) => {
export const TypeToConfirm = (props: TypeToConfirmProps) => {
const {
confirmationText,
onChange,
Expand All @@ -40,8 +33,6 @@ const TypeToConfirm: React.FC<Props> = (props) => {
...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
Expand All @@ -67,16 +58,15 @@ const TypeToConfirm: React.FC<Props> = (props) => {
</>
) : null}
{!hideInstructions ? (
<Typography
data-testid="instructions-to-enable-or-disable"
className={classes.description}
>
<StyledTypography data-testid="instructions-to-enable-or-disable">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it better to prefer styled here? I'm a big fan of styling via props, but I don't know what direction we want to prefer for things like this going forward.

        <Typography
          marginTop={1}
          data-testid="instructions-to-enable-or-disable"
        >

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a good point. I'm not aware of any comparative benefits to preferring the styled API in this situation so I don't think we should use use it if the component supports the needed properties like Typography does.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is one of those components that support system props, so technically it's ok. I bet even mt={1} would work here. My preference would lean towards the use of the sx prop instead.

To {disableOrEnable} type-to-confirm, go to the Type-to-Confirm
section of <Link to="/profile/settings">My Settings</Link>.
</Typography>
</StyledTypography>
) : null}
</>
);
};

export default TypeToConfirm;
const StyledTypography = styled(Typography)(({ theme }) => ({
marginTop: theme.spacing(),
}));
5 changes: 0 additions & 5 deletions packages/manager/src/components/TypeToConfirm/index.ts
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion packages/manager/src/components/TypeToConfirmDialog/TypeToConfirmDialog.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() };

Expand Down
20 changes: 10 additions & 10 deletions packages/manager/src/components/TypeToConfirmDialog/TypeToConfirmDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -24,11 +26,11 @@ interface Props {
onClick: () => void;
}

type CombinedProps = Props &
type CombinedProps = TypeToConfirmDialogProps &
ConfirmationDialogProps &
Partial<TypeToConfirmProps>;

const TypeToConfirmDialog: React.FC<CombinedProps> = (props) => {
export const TypeToConfirmDialog = (props: CombinedProps) => {
const {
open,
title,
Expand Down Expand Up @@ -106,5 +108,3 @@ const TypeToConfirmDialog: React.FC<CombinedProps> = (props) => {
</ConfirmationDialog>
);
};

export default TypeToConfirmDialog;
2 changes: 0 additions & 2 deletions packages/manager/src/components/TypeToConfirmDialog/index.ts
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion packages/manager/src/features/Account/CloseAccountDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
2 changes: 1 addition & 1 deletion packages/manager/src/features/Account/EnableObjectStorage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
10 changes: 5 additions & 5 deletions ...manager/src/features/Databases/DatabaseDetail/DatabaseBackups/RestoreFromBackupDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<DialogProps, 'title'> {
open: boolean;
Expand Down
2 changes: 1 addition & 1 deletion ...eatures/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsDeleteClusterDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion ...manager/src/features/Kubernetes/KubernetesClusterDetail/DeleteKubernetesClusterDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion packages/manager/src/features/NodeBalancers/NodeBalancerDeleteDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion packages/manager/src/features/ObjectStorage/BucketLanding/BucketLanding.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
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';
Expand Down
2 changes: 1 addition & 1 deletion packages/manager/src/features/Volumes/DestructiveVolumeDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
3 changes: 2 additions & 1 deletion packages/manager/src/features/linodes/LinodesDetail/LinodeRebuild/RebuildFromImage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion packages/manager/src/features/linodes/LinodesDetail/LinodeRebuild/RebuildFromStackScript.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion packages/manager/src/features/linodes/LinodesDetail/LinodeResize/LinodeResize.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion ...s/manager/src/features/linodes/LinodesDetail/LinodeSettings/LinodeSettingsDeletePanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion packages/manager/src/features/linodes/LinodesLanding/DeleteLinodeDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
useDeleteLinodeMutation,
useLinodeQuery,
Expand Down