refactor: [M3-6302] - MUIv5 Migration - Components > CircleProgress

CHANGELOG.md

@@ -21,6 +21,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 - Prevent form submission unless action was taken (IP transfer & IP sharing modals) #5976
 
 ### Tech Stories:
+- MUIv5 Migration - Components > CircleProgress #9028
+- MUIv5 Migration - Components > StatusIcon #9014
 - MUIv5 Migration - Components > TagsInput, TagsPanel #8995
 - MUIv5 Migration - Grid v2 for Features #8985
 - MUIv5 Migration - `SRC > Components > ConfirmationDialog` #9016

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

@@ -1,5 +1,5 @@
 import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-import CircleProgress from './CircleProgress';
+import { CircleProgress } from './CircleProgress';
 
 <Meta
   title="Components/Loading States/Circle Progress"
@@ -22,9 +22,9 @@ export const Template = (args) => <CircleProgress {...args}></CircleProgress>;
       noPadding: {
         description: 'Removes the padding for `mini` circle progresses only.',
       },
-      tag: {
+      size: {
         description:
-          'To be primarily used with tags and must be used with the `mini` prop. The spinner will not be visible in Storybook since the stroke is white.',
+          'To be primarily used with mini and noPadding. Set spinner to a custom size.',
       },
     }}
   >

packages/manager/src/components/CircleProgress/CircleProgress.tsx

@@ -1,128 +1,120 @@
-import classNames from 'classnames';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
 import * as React from 'react';
 import CircularProgress, {
   CircularProgressProps,
 } from 'src/components/core/CircularProgress';
-import { makeStyles } from '@mui/styles';
-import { Theme } from '@mui/material/styles';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  root: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    margin: '0 auto 20px',
-    position: 'relative',
-    width: '100%',
-    [theme.breakpoints.up('md')]: {
-      flex: 1,
-      height: 300,
-    },
-  },
-  progress: {
-    position: 'relative',
-    [theme.breakpoints.down('sm')]: {
-      width: '72px !important',
-      height: '72px !important',
-    },
-  },
-  top: {
-    width: 70,
-    height: 70,
-    borderRadius: '50%',
-    border: '1px solid #999',
-    [theme.breakpoints.up('sm')]: {
-      width: 120,
-      height: 120,
-    },
-  },
-  topWrapper: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    position: 'absolute',
-    width: '100%',
-    height: '100%',
-  },
-  mini: {
-    padding: `calc(${theme.spacing()} * 1.3)`,
-  },
-  noPadding: {
-    padding: 0,
-  },
-  tag: {
-    width: '12px !important',
-    height: '12px !important',
-    padding: 0,
-    marginLeft: 4,
-    marginRight: 4,
-    '& circle': {
-      stroke: 'white',
-    },
-  },
-  valueInside: {
-    position: 'absolute',
-    marginTop: 4,
-  },
-}));
-
-interface Props extends CircularProgressProps {
+interface CircleProgressProps extends CircularProgressProps {
   className?: string;
   children?: JSX.Element;
   mini?: boolean;
   noInner?: boolean;
   noPadding?: boolean;
-  tag?: boolean;
+  size?: number;
 }
 
-type CombinedProps = Props;
-
-export const CircleProgressComponent: React.FC<CombinedProps> = (props) => {
-  const classes = useStyles();
-  const { className, children, mini, noInner, noPadding, tag, ...rest } = props;
+const CircleProgress = (props: CircleProgressProps) => {
+  const {
+    className,
+    children,
+    mini,
+    noInner,
+    noPadding,
+    size,
+    ...rest
+  } = props;
 
   const variant =
     typeof props.value === 'number' ? 'determinate' : 'indeterminate';
   const value = typeof props.value === 'number' ? props.value : 0;
 
-  return mini ? (
-    <CircularProgress
-      className={classNames({
-        [classes.mini]: true,
-        [classes.noPadding]: noPadding,
-        [classes.tag]: tag,
-      })}
-      size={noPadding ? 22 : 40}
-      aria-label="Content is loading"
-      data-qa-circle-progress
-      data-testid="circle-progress"
-      tabIndex={0}
-    />
-  ) : (
-    <div
-      className={`${className} ${classes.root}`}
-      aria-label="Content is loading"
-    >
+  if (mini) {
+    return (
+      <StyledMiniCircularProgress
+        size={size ? size : noPadding ? 22 : 40}
+        noPadding={noPadding}
+        aria-label="Content is loading"
+        data-qa-circle-progress
+        data-testid="circle-progress"
+        tabIndex={0}
+      />
+    );
+  }
+
+  return (
+    <StyledRootDiv className={className} aria-label="Content is loading">
       {children !== undefined && (
-        <div className={classes.valueInside}>{children}</div>
+        <Box sx={{ position: 'absolute', marginTop: 4 }}>{children}</Box>
       )}
       {noInner !== true && (
-        <div className={classes.topWrapper}>
-          <div className={classes.top} />
-        </div>
+        <StyledTopWrapperDiv>
+          <StyledTopDiv />
+        </StyledTopWrapperDiv>
       )}
-      <CircularProgress
+      <StyledCircularProgress
         {...rest}
-        className={classes.progress}
         size={124}
         value={value}
         variant={variant}
         thickness={2}
         data-qa-circle-progress={value}
         data-testid="circle-progress"
       />
-    </div>
+    </StyledRootDiv>
   );
 };
 
-export default CircleProgressComponent;
+export { CircleProgress };
+
+const StyledRootDiv = styled('div')(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  margin: '0 auto 20px',
+  position: 'relative',
+  width: '100%',
+  [theme.breakpoints.up('md')]: {
+    flex: 1,
+    height: 300,
+  },
+}));
+
+const StyledTopWrapperDiv = styled('div')(({}) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  position: 'absolute',
+  width: '100%',
+  height: '100%',
+}));
+
+const StyledTopDiv = styled('div')(({ theme }) => ({
+  width: 70,
+  height: 70,
+  borderRadius: '50%',
+  border: '1px solid #999',
+  [theme.breakpoints.up('sm')]: {
+    width: 120,
+    height: 120,
+  },
+}));
+
+const StyledCircularProgress = styled(CircularProgress)<CircleProgressProps>(
+  ({ theme }) => ({
+    position: 'relative',
+    [theme.breakpoints.down('sm')]: {
+      width: '72px !important',
+      height: '72px !important',
+    },
+  })
+);
+
+const StyledMiniCircularProgress = styled(
+  CircularProgress
+)<CircleProgressProps>(({ theme, ...props }) => ({
+  padding: `calc(${theme.spacing()} * 1.3)`,
+  ...(props.noPadding && {
+    padding: 0,
+  }),
+}));

packages/manager/src/components/CircleProgress/index.ts

@@ -1,2 +1 @@
-import CircleProgress from './CircleProgress';
-export default CircleProgress;
+export { CircleProgress } from './CircleProgress';

packages/manager/src/components/DebouncedSearchTextField/DebouncedSearchTextField.tsx

@@ -2,7 +2,7 @@ import Search from '@mui/icons-material/Search';
 import * as React from 'react';
 import { compose } from 'recompose';
 
-import CircleProgress from 'src/components/CircleProgress';
+import { CircleProgress } from 'src/components/CircleProgress';
 import InputAdornment from 'src/components/core/InputAdornment';
 import { makeStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';

packages/manager/src/components/DrawerContent/DrawerContent.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import CircleProgress from 'src/components/CircleProgress';
+import { CircleProgress } from 'src/components/CircleProgress';
 import Notice from 'src/components/Notice';
 
 export interface Props {

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

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

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

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

packages/manager/src/components/LandingLoading/LandingLoading.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import CircleProgress from '../CircleProgress';
+import { CircleProgress } from 'src/components/CircleProgress';
 
 const DEFAULT_DELAY = 1000;
 

packages/manager/src/components/PromiseLoader/PromiseLoader.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import CircleProgress from 'src/components/CircleProgress';
+import { CircleProgress } from 'src/components/CircleProgress';
 
 interface State {
   loading: boolean;

packages/manager/src/components/SplashScreen/SplashScreen.tsx

@@ -2,10 +2,10 @@ import { styled } from '@mui/material/styles';
 import * as React from 'react';
 import { connect } from 'react-redux';
 import { compose } from 'recompose';
+import { CircleProgress } from 'src/components/CircleProgress';
 import useFeatureFlagsLoad from 'src/hooks/useFeatureFlagLoad';
 import { MapState } from 'src/store/types';
 import { srSpeak } from 'src/utilities/accessibility';
-import CircleProgress from '../CircleProgress';
 
 const SplashScreen = (props: StateProps) => {
   React.useEffect(() => {

packages/manager/src/components/SuspenseLoader/SuspenseLoader.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import CircleProgress from 'src/components/CircleProgress';
+import { CircleProgress } from 'src/components/CircleProgress';
 
 interface Props {
   delay?: number;

packages/manager/src/components/TableSortCell/TableSortCell.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import * as React from 'react';
 import SortUp from 'src/assets/icons/sort-up.svg';
 import Sort from 'src/assets/icons/unsorted.svg';
-import CircleProgress from 'src/components/CircleProgress';
+import { CircleProgress } from 'src/components/CircleProgress';
 import { makeStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
 import TableCell, { TableCellProps } from 'src/components/core/TableCell';

packages/manager/src/components/TagCell/TagCell.tsx

@@ -1,15 +1,15 @@
 import MoreHoriz from '@mui/icons-material/MoreHoriz';
+import Grid from '@mui/material/Unstable_Grid2';
+import { Theme } from '@mui/material/styles';
+import { makeStyles } from '@mui/styles';
+import { SxProps } from '@mui/system';
 import classNames from 'classnames';
 import * as React from 'react';
 import Plus from 'src/assets/icons/plusSign.svg';
-import IconButton from 'src/components/core/IconButton';
-import { makeStyles } from '@mui/styles';
-import { Theme } from '@mui/material/styles';
-import Grid from '@mui/material/Unstable_Grid2';
+import { CircleProgress } from 'src/components/CircleProgress';
 import Tag from 'src/components/Tag';
-import CircleProgress from '../CircleProgress';
+import IconButton from 'src/components/core/IconButton';
 import AddTag from './AddTag';
-import { SxProps } from '@mui/system';
 
 const useStyles = makeStyles((theme: Theme) => ({
   root: {

packages/manager/src/components/TagsPanel/TagsPanel.tsx

@@ -2,7 +2,7 @@ import { Theme } from '@mui/material/styles';
 import * as React from 'react';
 import { useQueryClient } from 'react-query';
 import Plus from 'src/assets/icons/plusSign.svg';
-import CircleProgress from 'src/components/CircleProgress';
+import { CircleProgress } from 'src/components/CircleProgress';
 import Select from 'src/components/EnhancedSelect/Select';
 import Tag from 'src/components/Tag';
 import Typography from 'src/components/core/Typography';

packages/manager/src/components/TagsPanel/TagsPanelItem.tsx

@@ -1,6 +1,4 @@
-import Close from '@mui/icons-material/Close';
 import * as React from 'react';
-import CircleProgress from 'src/components/CircleProgress';
 import Tag, { TagProps } from 'src/components/Tag';
 
 interface Props extends TagProps {
@@ -27,20 +25,11 @@ class TagsPanelItem extends React.Component<CombinedProps, {}> {
     onDelete(this.props.tagLabel);
   };
 
-  renderIcon = () => {
-    return !this.props.loading ? (
-      <Close data-qa-delete-tag />
-    ) : (
-      <CircleProgress mini tag />
-    );
-  };
-
   render() {
-    const { tagLabel, loading, onDelete, ...restOfProps } = this.props;
+    const { onDelete, ...restOfProps } = this.props;
     return (
       <Tag
         {...(restOfProps as any)}
-        deleteIcon={this.renderIcon()}
         onDelete={onDelete ? this.handleDelete : undefined}
         component={'button' as 'div'}
         colorVariant="lightBlue"

packages/manager/src/components/TextField.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { clamp } from 'ramda';
 import * as React from 'react';
 import { compose } from 'recompose';
-import CircleProgress from 'src/components/CircleProgress';
+import { CircleProgress } from 'src/components/CircleProgress';
 import FormHelperText from 'src/components/core/FormHelperText';
 import InputAdornment from 'src/components/core/InputAdornment';
 import InputLabel from 'src/components/core/InputLabel';