refactor: [M3-6264] - MUI v5 Migration - SRC > Features > Events

packages/manager/.changeset/pr-9565-tech-stories-1692368201746.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+MUI v5 Migration - SRC > Features > Events ([#9565](https://github.com/linode/manager/pull/9565))

packages/manager/src/features/Events/EventRow.styles.ts

@@ -0,0 +1,10 @@
+import { styled } from '@mui/material/styles';
+
+import { GravatarByUsername } from '../../components/GravatarByUsername';
+
+export const StyledGravatar = styled(GravatarByUsername, {
+  label: 'StyledGravatar',
+})(({ theme }) => ({
+  height: theme.spacing(3),
+  width: theme.spacing(3),
+}));

packages/manager/src/features/Events/EventRow.tsx

@@ -1,6 +1,4 @@
 import { Event, EventAction } from '@linode/api-v4/lib/account';
-import { Theme } from '@mui/material/styles';
-import { makeStyles } from '@mui/styles';
 import { DateTime } from 'luxon';
 import { pathOr } from 'ramda';
 import * as React from 'react';
@@ -15,33 +13,18 @@ import { generateEventMessage } from 'src/features/Events/eventMessageGenerator'
 import { getEventTimestamp } from 'src/utilities/eventUtils';
 import { getLinkForEvent } from 'src/utilities/getEventsActionLink';
 
-import { GravatarByUsername } from '../../components/GravatarByUsername';
-
-const useStyles = makeStyles((theme: Theme) => ({
-  icon: {
-    height: 24,
-    width: 24,
-  },
-  row: {
-    '&:hover': {
-      backgroundColor:
-        theme.name === 'light' ? '#fbfbfb' : 'rgba(0, 0, 0, 0.1)',
-    },
-  },
-}));
+import { StyledGravatar } from './EventRow.styles';
 
 interface ExtendedEvent extends Event {
   _deleted?: string;
 }
 
-interface Props {
+interface EventRowProps {
   entityId?: number;
   event: ExtendedEvent;
 }
 
-type CombinedProps = Props;
-
-export const EventRow: React.FC<CombinedProps> = (props) => {
+export const EventRow = RenderGuard((props: EventRowProps) => {
   const { entityId, event } = props;
   const link = getLinkForEvent(event.action, event.entity, event._deleted);
   const type = pathOr<string>('linode', ['entity', 'type'], event);
@@ -58,7 +41,7 @@ export const EventRow: React.FC<CombinedProps> = (props) => {
   };
 
   return <Row {...rowProps} data-qa-events-row={event.id} />;
-};
+});
 
 export interface RowProps {
   action: EventAction;
@@ -76,9 +59,7 @@ export interface RowProps {
   username: null | string;
 }
 
-export const Row: React.FC<RowProps> = (props) => {
-  const classes = useStyles();
-
+export const Row = (props: RowProps) => {
   const { action, message, timestamp, username } = props;
 
   /** Some event types may not be handled by our system (or new types
@@ -91,16 +72,12 @@ export const Row: React.FC<RowProps> = (props) => {
   return (
     <TableRow
       ariaLabel={`Event ${message}`}
-      className={classes.row}
       data-qa-event-row
       data-test-id={action}
     >
       <Hidden smDown>
         <TableCell data-qa-event-icon-cell>
-          <GravatarByUsername
-            className={classes.icon}
-            username={username ?? ''}
-          />
+          <StyledGravatar username={username ?? ''} />
         </TableCell>
       </Hidden>
       <TableCell data-qa-event-message-cell parentColumn="Event">
@@ -123,5 +100,3 @@ export const Row: React.FC<RowProps> = (props) => {
     </TableRow>
   );
 };
-
-export default RenderGuard(EventRow);

packages/manager/src/features/Events/EventsLanding.styles.ts

@@ -0,0 +1,43 @@
+import { styled } from '@mui/material/styles';
+
+import { H1Header } from 'src/components/H1Header/H1Header';
+import { TableCell } from 'src/components/TableCell';
+import { Typography } from 'src/components/Typography';
+
+export const StyledTableCell = styled(TableCell, {
+  label: 'StyledTableCell',
+})(({ theme }) => ({
+  color: theme.textColors.tableHeader,
+  fontFamily: theme.font.bold,
+  fontSize: '0.875rem',
+}));
+
+export const StyledLabelTableCell = styled(TableCell, {
+  label: 'StyledLabelTableCell',
+})(({ theme }) => ({
+  color: theme.textColors.tableHeader,
+  fontFamily: theme.font.bold,
+  fontSize: '0.875rem',
+  minWidth: 200,
+  paddingLeft: 10,
+  [theme.breakpoints.down('sm')]: {
+    width: '70%',
+  },
+  width: '60%',
+}));
+
+export const StyledH1Header = styled(H1Header, {
+  label: 'StyledH1Header',
+})(({ theme }) => ({
+  marginBottom: theme.spacing(1),
+  [theme.breakpoints.down('md')]: {
+    marginLeft: theme.spacing(),
+  },
+}));
+
+export const StyledTypography = styled(Typography, {
+  label: 'StyledTyography',
+})(({ theme }) => ({
+  padding: theme.spacing(4),
+  textAlign: 'center',
+}));

packages/manager/src/features/Events/EventsLanding.tsx

@@ -1,15 +1,12 @@
 import { Event, getEvents } from '@linode/api-v4/lib/account';
 import { ResourcePage } from '@linode/api-v4/lib/types';
-import { Theme } from '@mui/material/styles';
-import { makeStyles } from '@mui/styles';
 import { useSnackbar } from 'notistack';
 import { concat, compose as rCompose, uniq } from 'ramda';
 import * as React from 'react';
 import { connect } from 'react-redux';
 import { Waypoint } from 'react-waypoint';
 import { compose } from 'recompose';
 
-import { H1Header } from 'src/components/H1Header/H1Header';
 import { Hidden } from 'src/components/Hidden';
 import { Table } from 'src/components/Table';
 import { TableBody } from 'src/components/TableBody';
@@ -19,40 +16,19 @@ import { TableRow } from 'src/components/TableRow';
 import { TableRowEmpty } from 'src/components/TableRowEmpty/TableRowEmpty';
 import { TableRowError } from 'src/components/TableRowError/TableRowError';
 import { TableRowLoading } from 'src/components/TableRowLoading/TableRowLoading';
-import { Typography } from 'src/components/Typography';
 import { ApplicationState } from 'src/store';
 import { setDeletedEvents } from 'src/store/events/event.helpers';
 import { ExtendedEvent } from 'src/store/events/event.types';
 import { removeBlocklistedEvents } from 'src/utilities/eventUtils';
 
 import { filterUniqueEvents, shouldUpdateEvents } from './Event.helpers';
-import EventRow from './EventRow';
-
-const useStyles = makeStyles((theme: Theme) => ({
-  columnHeader: {
-    color: theme.textColors.tableHeader,
-    fontFamily: theme.font.bold,
-    fontSize: '0.875rem',
-  },
-  header: {
-    marginBottom: theme.spacing(1),
-    [theme.breakpoints.down('md')]: {
-      marginLeft: theme.spacing(),
-    },
-  },
-  labelCell: {
-    minWidth: 200,
-    paddingLeft: 10,
-    [theme.breakpoints.down('sm')]: {
-      width: '70%',
-    },
-    width: '60%',
-  },
-  noMoreEvents: {
-    padding: theme.spacing(4),
-    textAlign: 'center',
-  },
-}));
+import { EventRow } from './EventRow';
+import {
+  StyledH1Header,
+  StyledLabelTableCell,
+  StyledTableCell,
+  StyledTypography,
+} from './EventsLanding.styles';
 
 interface Props {
   emptyMessage?: string; // Custom message for the empty state (i.e. no events).
@@ -172,8 +148,7 @@ export const reducer: EventsReducer = (state, action) => {
   }
 };
 
-export const EventsLanding: React.FC<CombinedProps> = (props) => {
-  const classes = useStyles();
+export const EventsLanding = (props: CombinedProps) => {
   const { enqueueSnackbar } = useSnackbar();
 
   const [loading, setLoading] = React.useState<boolean>(false);
@@ -276,29 +251,21 @@ export const EventsLanding: React.FC<CombinedProps> = (props) => {
   return (
     <>
       {/* Only display this title on the main Events landing page */}
-      {!entityId && <H1Header className={classes.header} title="Events" />}
+      {!entityId && <StyledH1Header title="Events" />}
       <Table aria-label="List of Events">
         <TableHead>
           <TableRow>
             <Hidden smDown>
               <TableCell style={{ padding: 0, width: '1%' }} />
             </Hidden>
-            <TableCell
-              className={`${classes.labelCell} ${classes.columnHeader}`}
-              data-qa-events-subject-header
-            >
+            <StyledLabelTableCell data-qa-events-subject-header>
               Event
-            </TableCell>
-            <TableCell className={classes.columnHeader}>
-              Relative Date
-            </TableCell>
+            </StyledLabelTableCell>
+            <StyledTableCell>Relative Date</StyledTableCell>
             <Hidden mdDown>
-              <TableCell
-                className={classes.columnHeader}
-                data-qa-events-time-header
-              >
+              <StyledTableCell data-qa-events-time-header>
                 Absolute Date
-              </TableCell>
+              </StyledTableCell>
             </Hidden>
           </TableRow>
         </TableHead>
@@ -322,9 +289,7 @@ export const EventsLanding: React.FC<CombinedProps> = (props) => {
         !loading &&
         !error &&
         events.reactStateEvents.length > 0 && (
-          <Typography className={classes.noMoreEvents}>
-            No more events to show
-          </Typography>
+          <StyledTypography>No more events to show</StyledTypography>
         )
       )}
     </>