refactor: [M3-6337] - MUI v5 Migration - Components > ErrorState

packages/manager/.changeset/pr-9128-tech-stories-1684287580449.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+MUI v5 Migration - `Components > ErrorState` ([#9128](https://github.com/linode/manager/pull/9128))

packages/manager/src/components/AccountActivation/AccountActivationLanding.tsx

@@ -3,7 +3,7 @@ import { Theme } from '@mui/material/styles';
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
 import Typography from 'src/components/core/Typography';
-import ErrorState from 'src/components/ErrorState';
+import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { AttachmentError } from 'src/features/Support/SupportTicketDetail/SupportTicketDetail';
 import SupportTicketDrawer from 'src/features/Support/SupportTickets/SupportTicketDrawer';
 import { makeStyles } from 'tss-react/mui';

packages/manager/src/components/ErrorState/ErrorState.stories.mdx

@@ -1,11 +1,11 @@
 import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-import ErrorState from './ErrorState';
+import { ErrorState } from 'src/components/ErrorState/ErrorState';
 
 <Meta
   title="Features/Entity Landing Page/Error State"
   component={ErrorState}
   args={{
-    errorText: 'An error has occured.',
+    errorText: 'An error has occurred.',
     compact: false,
     cozy: false,
   }}

packages/manager/src/components/ErrorState/ErrorState.tsx

@@ -1,68 +1,43 @@
 import * as React from 'react';
 import ErrorOutline from '@mui/icons-material/ErrorOutline';
-import classNames from 'classnames';
 import Typography from 'src/components/core/Typography';
 import Grid from '@mui/material/Unstable_Grid2';
-import { makeStyles } from '@mui/styles';
 import { SvgIconProps } from '@mui/material/SvgIcon';
-import { Theme } from '@mui/material/styles';
+import { useTheme, styled } from '@mui/material/styles';
 
-interface Props {
-  errorText: string | JSX.Element;
+interface ErrorStateProps {
   compact?: boolean;
   cozy?: boolean;
   CustomIcon?: React.ComponentType<SvgIconProps>;
   CustomIconStyles?: React.CSSProperties;
+  errorText: string | JSX.Element;
 }
 
-const useStyles = makeStyles((theme: Theme) => ({
-  root: {
-    width: '100%',
-    padding: theme.spacing(10),
-    marginLeft: 0,
-  },
-  compact: {
-    padding: theme.spacing(5),
-  },
-  cozy: {
-    padding: theme.spacing(1),
-  },
-  iconContainer: {
-    textAlign: 'center',
-  },
-  icon: {
-    marginBottom: theme.spacing(2),
+export const ErrorState = (props: ErrorStateProps) => {
+  const { CustomIcon } = props;
+  const theme = useTheme();
+
+  const sxIcon = {
     color: theme.color.red,
-    width: 50,
     height: 50,
-  },
-}));
+    marginBottom: theme.spacing(2),
+    width: 50,
+  };
 
-const ErrorState = (props: Props) => {
-  const { CustomIcon } = props;
-  const classes = useStyles();
   return (
-    <Grid
-      container
-      className={classNames(classes.root, {
-        [classes.compact]: props.compact,
-        [classes.cozy]: !!props.cozy,
-      })}
-      justifyContent="center"
-      alignItems="center"
-    >
+    <ErrorStateRoot container justifyContent="center" alignItems="center">
       <Grid data-testid="error-state">
-        <div className={classes.iconContainer}>
+        <StyledIconContainer>
           {CustomIcon ? (
             <CustomIcon
-              className={classes.icon}
               data-qa-error-icon
               style={props.CustomIconStyles}
+              sx={sxIcon}
             />
           ) : (
-            <ErrorOutline className={classes.icon} data-qa-error-icon />
+            <ErrorOutline data-qa-error-icon sx={sxIcon} />
           )}
-        </div>
+        </StyledIconContainer>
         {typeof props.errorText === 'string' ? (
           <Typography
             style={{ textAlign: 'center' }}
@@ -75,8 +50,22 @@ const ErrorState = (props: Props) => {
           <div style={{ textAlign: 'center' }}>{props.errorText}</div>
         )}
       </Grid>
-    </Grid>
+    </ErrorStateRoot>
   );
 };
 
-export default ErrorState;
+const StyledIconContainer = styled('div')({
+  textAlign: 'center',
+});
+
+const ErrorStateRoot = styled(Grid)<Partial<ErrorStateProps>>(
+  ({ theme, ...props }) => ({
+    marginLeft: 0,
+    padding: props.compact
+      ? theme.spacing(5)
+      : props.cozy
+      ? theme.spacing(1)
+      : theme.spacing(10),
+    width: '100%',
+  })
+);

packages/manager/src/components/ExtendedAccordion/ExtendedAccordion.test.tsx

@@ -2,7 +2,7 @@ import { shallow } from 'enzyme';
 import * as React from 'react';
 
 import { CircleProgress } from 'src/components/CircleProgress';
-import ErrorState from 'src/components/ErrorState';
+import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { Provider } from 'react-redux';
 import ExtendedAccordion from './ExtendedAccordion';
 import { storeFactory } from 'src/store';

packages/manager/src/components/ExtendedAccordion/ExtendedAccordion.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Accordion, { AccordionProps } from 'src/components/Accordion';
 import { CircleProgress } from 'src/components/CircleProgress';
-import ErrorState from 'src/components/ErrorState';
+import { ErrorState } from 'src/components/ErrorState/ErrorState';
 
 interface Props extends Omit<AccordionProps, 'children'> {
   height?: number;

packages/manager/src/components/LongviewLineGraph/LongviewLineGraph.tsx

@@ -4,7 +4,7 @@ import Divider from 'src/components/core/Divider';
 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 { ErrorState } from 'src/components/ErrorState/ErrorState';
 import LineGraph, {
   DataSet,
   Props as LineGraphProps,

packages/manager/src/components/MaintenanceScreen.tsx

@@ -5,7 +5,7 @@ import { Theme } from '@mui/material/styles';
 import Typography from 'src/components/core/Typography';
 import Box from 'src/components/core/Box';
 import Logo from 'src/assets/logo/akamai-logo.svg';
-import ErrorState from 'src/components/ErrorState';
+import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import BuildIcon from '@mui/icons-material/Build';
 
 const useStyles = makeStyles((theme: Theme) => ({

packages/manager/src/components/PanelErrorBoundary/PanelErrorBoundary.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import ErrorState from 'src/components/ErrorState';
+import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import Accordion, { AccordionProps } from 'src/components/Accordion';
 
 /* tslint:disable-next-line */

packages/manager/src/components/SectionErrorBoundary/SectionErrorBoundary.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import ErrorState from 'src/components/ErrorState';
+import { ErrorState } from 'src/components/ErrorState/ErrorState';
 
 interface State {
   error?: Error;

packages/manager/src/components/TableRowError/TableRowError.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import ErrorState from 'src/components/ErrorState';
+import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { TableCell } from 'src/components/TableCell';
 import { TableRow } from 'src/components/TableRow';
 

packages/manager/src/features/Account/GlobalSettings.tsx

@@ -9,7 +9,7 @@ import { compose } from 'recompose';
 import { AnyAction } from 'redux';
 import { ThunkDispatch } from 'redux-thunk';
 import { CircleProgress } from 'src/components/CircleProgress';
-import ErrorState from 'src/components/ErrorState';
+import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { useReduxLoad } from 'src/hooks/useReduxLoad';
 import { ApplicationState } from 'src/store';
 import { handleOpen } from 'src/store/backupDrawer';

packages/manager/src/features/Billing/BillingDetail.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { CircleProgress } from 'src/components/CircleProgress';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
-import ErrorState from 'src/components/ErrorState';
+import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import Grid from '@mui/material/Unstable_Grid2';
 import { useAccount } from 'src/queries/account';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';

packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentDrawer.tsx

@@ -11,7 +11,7 @@ import { Theme } from '@mui/material/styles';
 import Typography from 'src/components/core/Typography';
 import { Currency } from 'src/components/Currency';
 import Drawer from 'src/components/Drawer';
-import ErrorState from 'src/components/ErrorState';
+import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import Grid from '@mui/material/Unstable_Grid2';
 import { TooltipIcon } from 'src/components/TooltipIcon/TooltipIcon';
 import LinearProgress from 'src/components/LinearProgress';

packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx

@@ -30,7 +30,7 @@ import SingleValue from 'src/components/EnhancedSelect/components/SingleValue';
 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 { ErrorState } from 'src/components/ErrorState/ErrorState';
 import Grid from '@mui/material/Unstable_Grid2';
 import LandingHeader from 'src/components/LandingHeader';
 import Link from 'src/components/Link';

packages/manager/src/features/Databases/DatabaseDetail/index.tsx

@@ -6,7 +6,7 @@ import { CircleProgress } from 'src/components/CircleProgress';
 import TabPanels from 'src/components/core/ReachTabPanels';
 import Tabs from 'src/components/core/ReachTabs';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
-import ErrorState from 'src/components/ErrorState';
+import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import SafeTabPanel from 'src/components/SafeTabPanel';
 import TabLinkList from 'src/components/TabLinkList';
 import useEditableLabelState from 'src/hooks/useEditableLabelState';

packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import ErrorState from 'src/components/ErrorState';
+import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import Hidden from 'src/components/core/Hidden';
 import LandingHeader from 'src/components/LandingHeader';
 import ProductInformationBanner from 'src/components/ProductInformationBanner';

packages/manager/src/features/Domains/DomainDetail/DomainDetail.tsx

@@ -3,7 +3,7 @@ import { useHistory, useLocation, useParams } from 'react-router-dom';
 import { CircleProgress } from 'src/components/CircleProgress';
 import { makeStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
-import ErrorState from 'src/components/ErrorState';
+import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { Notice } from 'src/components/Notice/Notice';
 import summaryPanelStyles from 'src/containers/SummaryPanels.styles';
 import LandingHeader from 'src/components/LandingHeader';

packages/manager/src/features/Domains/DomainDetail/index.tsx

@@ -3,7 +3,7 @@ import { useParams } from 'react-router-dom';
 import { CircleProgress } from 'src/components/CircleProgress';
 import NotFound from 'src/components/NotFound';
 import { useDomainQuery } from 'src/queries/domains';
-import ErrorState from 'src/components/ErrorState';
+import { ErrorState } from 'src/components/ErrorState/ErrorState';
 
 const DomainsLanding = React.lazy(() => import('../DomainsLanding'));
 const DomainDetail = React.lazy(() => import('./DomainDetail'));

packages/manager/src/features/Domains/DomainsLanding.tsx

@@ -8,7 +8,7 @@ import { makeStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
 import { DeletionDialog } from 'src/components/DeletionDialog/DeletionDialog';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
-import ErrorState from 'src/components/ErrorState';
+import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import LandingHeader from 'src/components/LandingHeader';
 import { Notice } from 'src/components/Notice/Notice';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';

packages/manager/src/features/EntityTransfers/EntityTransfersLanding/ConfirmTransferDialog.tsx

@@ -13,7 +13,7 @@ import { ConfirmationDialog } from 'src/components/ConfirmationDialog/Confirmati
 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 { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { Notice } from 'src/components/Notice/Notice';
 import {
   queryKey,

packages/manager/src/features/Firewalls/FirewallDetail/index.tsx

@@ -3,7 +3,7 @@ import { CircleProgress } from 'src/components/CircleProgress';
 import TabPanels from 'src/components/core/ReachTabPanels';
 import Tabs from 'src/components/core/ReachTabs';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
-import ErrorState from 'src/components/ErrorState';
+import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import NotFound from 'src/components/NotFound';
 import SafeTabPanel from 'src/components/SafeTabPanel';
 import TabLinkList from 'src/components/TabLinkList';

packages/manager/src/features/Firewalls/FirewallLanding/FirewallLanding.tsx

@@ -10,7 +10,7 @@ import { FirewallLandingEmptyState } from './FirewallLandingEmptyState';
 import FirewallRow from './FirewallRow';
 import { usePagination } from 'src/hooks/usePagination';
 import { useOrder } from 'src/hooks/useOrder';
-import ErrorState from 'src/components/ErrorState/ErrorState';
+import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 import { Table } from 'src/components/Table';
 import { TableHead } from 'src/components/TableHead';

packages/manager/src/features/Images/ImagesLanding.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import ActionsPanel from 'src/components/ActionsPanel';
 import Button from 'src/components/Button';
-import ErrorState from 'src/components/ErrorState';
+import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import Hidden from 'src/components/core/Hidden';
 import imageEvents from 'src/store/selectors/imageEvents';
 import ImageRow, { ImageWithEvent } from './ImageRow';

packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx

@@ -15,7 +15,7 @@ import { Theme } from '@mui/material/styles';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import Select, { Item } from 'src/components/EnhancedSelect/Select';
 import { RegionSelect } from 'src/components/EnhancedSelect/variants/RegionSelect';
-import ErrorState from 'src/components/ErrorState';
+import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { Notice } from 'src/components/Notice/Notice';
 import { regionHelperText } from 'src/components/SelectRegionPanel/SelectRegionPanel';
 import TextField from 'src/components/TextField';

packages/manager/src/features/Kubernetes/CreateCluster/NodePoolPanel.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { compose } from 'recompose';
 import { CircleProgress } from 'src/components/CircleProgress';
 import Grid from '@mui/material/Unstable_Grid2';
-import ErrorState from 'src/components/ErrorState';
+import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import renderGuard, { RenderGuardProps } from 'src/components/RenderGuard';
 import SelectPlanQuantityPanel from 'src/features/linodes/LinodesCreate/SelectPlanQuantityPanel';
 import { ExtendedType, extendType } from 'src/utilities/extendType';

packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubernetesClusterDetail.tsx

@@ -3,7 +3,7 @@ import { useLocation, useParams } from 'react-router-dom';
 import { CircleProgress } from 'src/components/CircleProgress';
 import Grid from '@mui/material/Unstable_Grid2';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
-import ErrorState from 'src/components/ErrorState';
+import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { getKubeHighAvailability } from 'src/features/Kubernetes/kubeUtils';
 import { useAccount } from 'src/queries/account';
 import {

packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePoolsDisplay.tsx

@@ -4,7 +4,7 @@ import Paper from 'src/components/core/Paper';
 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 { ErrorState } from 'src/components/ErrorState/ErrorState';
 import Grid from '@mui/material/Unstable_Grid2';
 import { RecycleNodePoolDialog } from '../RecycleNodePoolDialog';
 import { AddNodePoolDrawer } from './AddNodePoolDrawer';

packages/manager/src/features/Kubernetes/KubernetesLanding/KubernetesLanding.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import ErrorState from 'src/components/ErrorState';
+import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import Hidden from 'src/components/core/Hidden';
 import LandingHeader from 'src/components/LandingHeader';
 import { TransferDisplay } from 'src/components/TransferDisplay/TransferDisplay';

packages/manager/src/features/Lish/Glish.tsx

@@ -5,7 +5,7 @@ import { VncScreen, VncScreenHandle } from 'react-vnc';
 import { getLishSchemeAndHostname, resizeViewPort } from './lishUtils';
 import { makeStyles } from '@mui/styles';
 import { CircleProgress } from 'src/components/CircleProgress';
-import ErrorState from 'src/components/ErrorState';
+import { ErrorState } from 'src/components/ErrorState/ErrorState';
 
 const useStyles = makeStyles(() => ({
   container: {

packages/manager/src/features/Lish/Lish.tsx

@@ -5,7 +5,7 @@ import TabPanels from 'src/components/core/ReachTabPanels';
 import Tabs from 'src/components/core/ReachTabs';
 import { makeStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
-import ErrorState from 'src/components/ErrorState';
+import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import SafeTabPanel from 'src/components/SafeTabPanel';
 import TabLinkList from 'src/components/TabLinkList';
 import { Tab } from 'src/components/TabLinkList/TabLinkList';

packages/manager/src/features/Lish/Weblish.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable scanjs-rules/call_addEventListener */
 import * as React from 'react';
-import ErrorState from 'src/components/ErrorState';
+import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { CircleProgress } from 'src/components/CircleProgress';
 import { Linode } from '@linode/api-v4/lib/linodes';
 import { Terminal } from 'xterm';

packages/manager/src/features/Longview/LongviewDetail/DetailTabs/Disks/Disks.tsx

@@ -5,7 +5,7 @@ import Box from 'src/components/core/Box';
 import { makeStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
-import ErrorState from 'src/components/ErrorState';
+import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import LandingLoading from 'src/components/LandingLoading';
 import { Placeholder } from 'src/components/Placeholder/Placeholder';
 import { WithStartAndEnd } from '../../../request.types';