refactor: [M3-6329] - MUI v5 Migration - `Components > EditableEntity…

…Label` (#9129)

Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com>

packages/manager/.changeset/pr-9129-tech-stories-1684288822656.md

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

packages/manager/src/components/EditableEntityLabel/EditableEntityLabel.tsx

@@ -1,49 +1,32 @@
 import * as React from 'react';
-import { makeStyles } from '@mui/styles';
-import { Theme } from '@mui/material/styles';
+import { useTheme, styled } from '@mui/material/styles';
 import Typography from 'src/components/core/Typography';
 import EntityIcon, { Variant } from 'src/components/EntityIcon/EntityIcon';
 import Grid from '@mui/material/Unstable_Grid2';
 import EditableInput from './EditableInput';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  root: {
-    minHeight: 40,
-  },
-  icon: {
-    marginRight: theme.spacing(1),
-  },
-  smallInput: {
-    position: 'relative',
-    paddingRight: 20,
-    whiteSpace: 'pre-wrap',
-    wordBreak: 'break-all',
-    fontSize: 15,
-  },
-}));
-
-interface Props {
-  text: string;
-  onEdit: (s: string) => Promise<any>;
+interface EditableEntityLabelProps {
   iconVariant?: Variant;
   loading: boolean;
-  subText?: string;
+  onEdit: (s: string) => Promise<any>;
   status?: string;
+  subText?: string;
+  text: string;
 }
 
-export const EditableEntityLabel: React.FC<Props> = (props) => {
-  const { iconVariant, loading, status, subText, text, onEdit } = props;
+export const EditableEntityLabel = (props: EditableEntityLabelProps) => {
+  const { iconVariant, loading, onEdit, status, subText, text } = props;
   const [isEditing, toggleEditing] = React.useState<boolean>(false);
   const [inputText, setInputText] = React.useState<string>(text);
   const [error, setError] = React.useState<string | undefined>();
-  const classes = useStyles();
+  const theme = useTheme();
 
   const onSubmit = () => {
     setError(undefined);
     if (inputText !== text) {
       onEdit(inputText)
         .then(() => toggleEditing(false))
-        .catch((e) => setError(e)); // @todo have to make sure this is passed as a string
+        .catch((e) => setError(e.toString()));
     } else {
       toggleEditing(false);
     }
@@ -66,21 +49,26 @@ export const EditableEntityLabel: React.FC<Props> = (props) => {
       wrap="nowrap"
       alignItems="center"
       justifyContent="flex-start"
-      className={`${classes.root} m0`}
+      sx={{
+        margin: 0,
+        minHeight: '40px',
+      }}
     >
       {!isEditing && iconVariant && (
         <Grid className="py0 px0">
           <EntityIcon
             variant={iconVariant}
             status={status}
-            className={classes.icon}
+            style={{
+              marginRight: theme.spacing(1),
+            }}
           />
         </Grid>
       )}
       <Grid className="py0">
         <Grid container>
           <Grid className="py0 px0">
-            <EditableInput
+            <StyledEditableInput
               errorText={error}
               loading={loading}
               onEdit={onSubmit}
@@ -91,7 +79,6 @@ export const EditableEntityLabel: React.FC<Props> = (props) => {
               inputText={inputText}
               isEditing={isEditing}
               typeVariant="table-cell"
-              className={classes.smallInput}
             />
           </Grid>
           {subText && !isEditing && (
@@ -105,4 +92,10 @@ export const EditableEntityLabel: React.FC<Props> = (props) => {
   );
 };
 
-export default EditableEntityLabel;
+const StyledEditableInput = styled(EditableInput)(() => ({
+  fontSize: 15,
+  paddingRight: 20,
+  position: 'relative',
+  whiteSpace: 'pre-wrap',
+  wordBreak: 'break-all',
+}));

packages/manager/src/components/EntityIcon/EntityIcon.tsx

@@ -47,6 +47,7 @@ interface Props {
   status?: string;
   loading?: boolean;
   size?: number;
+  style?: React.CSSProperties;
   className?: any;
   marginTop?: number;
   stopAnimation?: boolean;
@@ -86,6 +87,7 @@ const EntityIcon: React.FC<CombinedProps> = (props) => {
     size,
     className,
     marginTop,
+    style,
     ...rest
   } = props;
 
@@ -121,7 +123,7 @@ const EntityIcon: React.FC<CombinedProps> = (props) => {
   return (
     <div
       className={`${classes.root} ${className}`}
-      style={{ top: marginTop }}
+      style={{ top: marginTop, ...style }}
       data-qa-icon={variant}
       data-qa-entity-status={status || 'undefined'}
       data-qa-is-loading={loading || 'false'}

packages/manager/src/features/Longview/LongviewLanding/LongviewClientHeader.tsx

@@ -6,7 +6,7 @@ import Button from 'src/components/Button';
 import { makeStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
 import Typography from 'src/components/core/Typography';
-import EditableEntityLabel from 'src/components/EditableEntityLabel';
+import { EditableEntityLabel } from 'src/components/EditableEntityLabel/EditableEntityLabel';
 import Grid from 'src/components/Grid';
 import Link from 'src/components/Link';
 import { DispatchProps } from 'src/containers/longview.container';

packages/manager/src/features/Longview/LongviewLanding/LongviewClientInstructions.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import Paper from 'src/components/core/Paper';
 import { makeStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
-import EditableEntityLabel from 'src/components/EditableEntityLabel';
+import { EditableEntityLabel } from 'src/components/EditableEntityLabel/EditableEntityLabel';
 import Grid from 'src/components/Grid';
 import { DispatchProps } from 'src/containers/longview.container';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';