refactor: [M3-6396] - MUIv5 Migration - Components > StatusIcon

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

@@ -1,5 +1,5 @@
 import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-import StatusIcon from './StatusIcon';
+import { StatusIcon } from './StatusIcon';
 
 <Meta title="Elements/Status Icons" component={StatusIcon} />
 
@@ -8,7 +8,22 @@ export const StatusIconTemplate = (args) => <StatusIcon {...args} />;
 # Status Icons
 
 <Canvas>
-  <Story name="Status Icons">{StatusIconTemplate.bind({})}</Story>
+  <Story
+    name="Status Icons"
+    args={{
+      status: 'active',
+      pulse: false,
+    }}
+    argTypes={{
+      status: {
+        description: 'Status of the icon',
+        options: ['error', 'other', 'active', 'inactive'],
+        control: { type: 'radio' },
+      },
+    }}
+  >
+    {StatusIconTemplate.bind({})}
+  </Story>
 </Canvas>
 
 <ArgsTable story="Status Icons" sort="requiredFirst"/>

packages/manager/src/components/StatusIcon/StatusIcon.tsx

@@ -1,33 +1,5 @@
-import classNames from 'classnames';
 import * as React from 'react';
-import { makeStyles } from '@mui/styles';
-import { Theme } from '@mui/material/styles';
-
-const useStyles = makeStyles((theme: Theme) => ({
-  statusIcon: {
-    display: 'inline-block',
-    borderRadius: '50%',
-    height: '16px',
-    width: '16px',
-    marginRight: theme.spacing(),
-    position: 'relative',
-  },
-  statusIconRunning: {
-    backgroundColor: theme.color.teal,
-  },
-  statusIconOffline: {
-    backgroundColor: theme.color.grey8,
-  },
-  statusIconError: {
-    backgroundColor: theme.color.red,
-  },
-  statusIconOther: {
-    backgroundColor: theme.color.orange,
-  },
-  pulse: {
-    animation: 'pulse 1.5s ease-in-out infinite',
-  },
-}));
+import { styled } from '@mui/material/styles';
 
 export type Status = 'active' | 'inactive' | 'error' | 'other';
 
@@ -36,31 +8,41 @@ export interface StatusProps {
   pulse?: boolean;
 }
 
-export const StatusIcon = (props: StatusProps) => {
+const StatusIcon = React.memo((props: StatusProps) => {
   const { status, pulse } = props;
 
-  const classes = useStyles();
-
   const shouldPulse =
     pulse === undefined
       ? // If pulse is not defined, use old behavior for choosing when to pulse
         !['inactive', 'active', 'error'].includes(status)
       : pulse;
 
-  return (
-    <div
-      className={classNames({
-        [classes.statusIcon]: true,
-        [classes.pulse]: shouldPulse,
-        [classes.statusIconRunning]: status === 'active',
-        [classes.statusIconOffline]: status === 'inactive',
-        [classes.statusIconError]: status === 'error',
-        [classes.statusIconOther]: !['inactive', 'active', 'error'].includes(
-          status
-        ),
-      })}
-    />
-  );
-};
+  return <StyledDiv pulse={shouldPulse} status={status} />;
+});
 
-export default React.memo(StatusIcon);
+export { StatusIcon };
+
+const StyledDiv = styled('div')<StatusProps>(({ theme, ...props }) => ({
+  display: 'inline-block',
+  borderRadius: '50%',
+  height: '16px',
+  width: '16px',
+  marginRight: theme.spacing(),
+  position: 'relative',
+  transition: theme.transitions.create(['color']),
+  ...(props.status === 'active' && {
+    backgroundColor: theme.color.teal,
+  }),
+  ...(props.status === 'inactive' && {
+    backgroundColor: theme.color.grey8,
+  }),
+  ...(props.status === 'error' && {
+    backgroundColor: theme.color.red,
+  }),
+  ...(!['inactive', 'active', 'error'].includes(props.status) && {
+    backgroundColor: theme.color.orange,
+  }),
+  ...(props.pulse && {
+    animation: 'pulse 1.5s ease-in-out infinite',
+  }),
+}));

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

@@ -4,7 +4,7 @@ import Link from 'src/components/Link';
 import TableCell from 'src/components/TableCell';
 import TableRow from 'src/components/TableRow';
 import formatDate from 'src/utilities/formatDate';
-import StatusIcon, { Status } from 'src/components/StatusIcon/StatusIcon';
+import { StatusIcon, Status } from 'src/components/StatusIcon/StatusIcon';
 import { capitalize } from 'src/utilities/capitalize';
 import {
   AccountLogin,

packages/manager/src/features/Account/Maintenance/MaintenanceTableRow.tsx

@@ -6,7 +6,7 @@ import TableCell from 'src/components/TableCell';
 import TableRow from 'src/components/TableRow';
 import capitalize from 'src/utilities/capitalize';
 import HighlightedMarkdown from 'src/components/HighlightedMarkdown';
-import StatusIcon, { Status } from 'src/components/StatusIcon/StatusIcon';
+import { StatusIcon, Status } from 'src/components/StatusIcon/StatusIcon';
 import { AccountMaintenance } from '@linode/api-v4/lib/account/types';
 import { parseAPIDate } from 'src/utilities/date';
 import { formatDate } from 'src/utilities/formatDate';

packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryClusterConfiguration.tsx

@@ -3,7 +3,7 @@ import { Theme } from '@mui/material/styles';
 import * as React from 'react';
 import Box from 'src/components/core/Box';
 import Typography from 'src/components/core/Typography';
-import StatusIcon from 'src/components/StatusIcon';
+import { StatusIcon } from 'src/components/StatusIcon/StatusIcon';
 import { useDatabaseTypesQuery } from 'src/queries/databases';
 import { useRegionsQuery } from 'src/queries/regions';
 import { convertMegabytesTo } from 'src/utilities/unitConversions';

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

@@ -7,7 +7,7 @@ import * as React from 'react';
 import { Link } from 'react-router-dom';
 import Chip from 'src/components/core/Chip';
 import Hidden from 'src/components/core/Hidden';
-import StatusIcon from 'src/components/StatusIcon';
+import { StatusIcon } from 'src/components/StatusIcon/StatusIcon';
 import { Status } from 'src/components/StatusIcon/StatusIcon';
 import TableCell from 'src/components/TableCell';
 import TableRow from 'src/components/TableRow';

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

@@ -5,7 +5,7 @@ import Hidden from 'src/components/core/Hidden';
 import { makeStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
 import DateTimeDisplay from 'src/components/DateTimeDisplay';
-import StatusIcon from 'src/components/StatusIcon';
+import { StatusIcon } from 'src/components/StatusIcon/StatusIcon';
 import TableCell from 'src/components/TableCell';
 import TableRow from 'src/components/TableRow';
 import ActionMenu, { Handlers } from './DomainActionMenu';

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

@@ -5,7 +5,7 @@ import { Link } from 'react-router-dom';
 import Hidden from 'src/components/core/Hidden';
 import { makeStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
-import StatusIcon from 'src/components/StatusIcon';
+import { StatusIcon } from 'src/components/StatusIcon/StatusIcon';
 import TableCell from 'src/components/TableCell';
 import TableRow from 'src/components/TableRow';
 import { useAllFirewallDevicesQuery } from 'src/queries/firewalls';

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

@@ -13,7 +13,7 @@ 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';
-import StatusIcon from 'src/components/StatusIcon';
+import { StatusIcon } from 'src/components/StatusIcon/StatusIcon';
 import Table from 'src/components/Table';
 import TableCell from 'src/components/TableCell';
 import TableContentWrapper from 'src/components/TableContentWrapper';

packages/manager/src/features/Volumes/VolumeTableRow.tsx

@@ -5,7 +5,7 @@ import { Link } from 'react-router-dom';
 import Hidden from 'src/components/core/Hidden';
 import { makeStyles } from '@mui/styles';
 import Typography from 'src/components/core/Typography';
-import StatusIcon from 'src/components/StatusIcon';
+import { StatusIcon } from 'src/components/StatusIcon/StatusIcon';
 import Box from '@mui/material/Box';
 import TableCell from 'src/components/TableCell';
 import TableRow from 'src/components/TableRow';

packages/manager/src/features/linodes/LinodesDetail/LinodeBackup/BackupTableRow.tsx

@@ -2,7 +2,7 @@ import { LinodeBackup } from '@linode/api-v4/lib/linodes';
 import { Duration } from 'luxon';
 import * as React from 'react';
 import DateTimeDisplay from 'src/components/DateTimeDisplay';
-import StatusIcon, { Status } from 'src/components/StatusIcon/StatusIcon';
+import { StatusIcon, Status } from 'src/components/StatusIcon/StatusIcon';
 import TableCell from 'src/components/TableCell';
 import TableRow from 'src/components/TableRow';
 import { parseAPIDate } from 'src/utilities/date';

packages/manager/src/features/linodes/LinodesLanding/LinodeRow/LinodeRow.tsx

@@ -13,7 +13,7 @@ import Hidden from 'src/components/core/Hidden';
 import Tooltip from 'src/components/core/Tooltip';
 import Typography from 'src/components/core/Typography';
 import { TooltipIcon } from 'src/components/TooltipIcon/TooltipIcon';
-import StatusIcon from 'src/components/StatusIcon';
+import { StatusIcon } from 'src/components/StatusIcon/StatusIcon';
 import TableCell from 'src/components/TableCell';
 import TableRow from 'src/components/TableRow';
 import { Action } from 'src/features/linodes/PowerActionsDialogOrDrawer';