refactor: [M3-6393] - MUI v5 - Components > Snackbar

packages/manager/.changeset/pr-9359-tech-stories-1688401214973.md

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

packages/manager/src/components/SnackBar/SnackBar.tsx → packages/manager/src/components/Snackbar/Snackbar.tsx

@@ -1,10 +1,10 @@
 import { SnackbarProvider, SnackbarProviderProps } from 'notistack';
 import * as React from 'react';
-import { makeStyles } from '@mui/styles';
+import { makeStyles } from 'tss-react/mui';
 import { Theme } from '@mui/material/styles';
 import CloseSnackbar from './CloseSnackbar';
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles()((theme: Theme) => ({
   root: {
     '& div': {
       backgroundColor: `${theme.bg.white} !important`,
@@ -29,7 +29,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     borderLeft: `6px solid ${theme.palette.primary.main}`,
   },
   success: {
-    borderLeft: `6px solid ${theme.palette.primary.main}`,
+    borderLeft: `6px solid ${theme.color.green}`,
   },
   error: {
     borderLeft: `6px solid ${theme.palette.error.dark}`,
@@ -39,10 +39,8 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
 }));
 
-type CombinedProps = SnackbarProviderProps;
-
-const SnackBar: React.FC<CombinedProps> = (props) => {
-  const classes = useStyles();
+export const Snackbar = (props: SnackbarProviderProps) => {
+  const { classes } = useStyles();
   /**
    * This pattern is taken from the Notistack docs:
    * https://iamhosseindhv.com/notistack/demos#action-for-all-snackbars
@@ -78,5 +76,3 @@ const SnackBar: React.FC<CombinedProps> = (props) => {
     </SnackbarProvider>
   );
 };
-
-export default SnackBar;

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

@@ -1,6 +1,6 @@
 import { Event, getEvents } from '@linode/api-v4/lib/account';
 import { ResourcePage } from '@linode/api-v4/lib/types';
-import { withSnackbar, WithSnackbarProps } from 'notistack';
+import { useSnackbar } from 'notistack';
 import { compose as rCompose, concat, uniq } from 'ramda';
 import * as React from 'react';
 import { connect } from 'react-redux';
@@ -61,7 +61,7 @@ interface Props {
   emptyMessage?: string; // Custom message for the empty state (i.e. no events).
 }
 
-type CombinedProps = Props & StateProps & WithSnackbarProps;
+type CombinedProps = Props & StateProps;
 
 const appendToEvents = (oldEvents: Event[], newEvents: Event[]) =>
   rCompose<Event[], Event[], Event[], Event[]>(
@@ -173,6 +173,7 @@ export const reducer: EventsReducer = (state, action) => {
 
 export const EventsLanding: React.FC<CombinedProps> = (props) => {
   const classes = useStyles();
+  const { enqueueSnackbar } = useSnackbar();
 
   const [loading, setLoading] = React.useState<boolean>(false);
   const [loadMoreEvents, setLoadMoreEvents] = React.useState<boolean>(false);
@@ -199,7 +200,7 @@ export const EventsLanding: React.FC<CombinedProps> = (props) => {
     getEventsRequest({ page: currentPage })
       .then(handleEventsRequestSuccess)
       .catch(() => {
-        props.enqueueSnackbar('There was an error loading more events', {
+        enqueueSnackbar('There was an error loading more events', {
           variant: 'error',
         });
         setLoading(false);
@@ -403,6 +404,6 @@ const mapStateToProps = (state: ApplicationState) => ({
 
 const connected = connect(mapStateToProps);
 
-const enhanced = compose<CombinedProps, Props>(connected, withSnackbar);
+const enhanced = compose<CombinedProps, Props>(connected);
 
 export default enhanced(EventsLanding);

packages/manager/src/features/Kubernetes/ClusterList/ClusterActionMenu.tsx

@@ -1,5 +1,5 @@
 import { getKubeConfig } from '@linode/api-v4/lib/kubernetes';
-import { withSnackbar, WithSnackbarProps } from 'notistack';
+import { useSnackbar } from 'notistack';
 import * as React from 'react';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
 import { compose } from 'recompose';
@@ -19,15 +19,16 @@ interface Props {
   openDialog: () => void;
 }
 
-type CombinedProps = Props & RouteComponentProps<{}> & WithSnackbarProps;
+type CombinedProps = Props & RouteComponentProps<{}>;
 
 export const ClusterActionMenu: React.FunctionComponent<CombinedProps> = (
   props
 ) => {
   const theme = useTheme<Theme>();
+  const { enqueueSnackbar } = useSnackbar();
   const matchesSmDown = useMediaQuery(theme.breakpoints.down('md'));
 
-  const { clusterId, clusterLabel, enqueueSnackbar, openDialog } = props;
+  const { clusterId, clusterLabel, openDialog } = props;
 
   const actions: Action[] = [
     {
@@ -92,6 +93,6 @@ export const ClusterActionMenu: React.FunctionComponent<CombinedProps> = (
   );
 };
 
-const enhanced = compose<CombinedProps, Props>(withSnackbar, withRouter);
+const enhanced = compose<CombinedProps, Props>(withRouter);
 
 export default enhanced(ClusterActionMenu);

packages/manager/src/features/Linodes/LinodesLanding/LinodesLanding.tsx

@@ -1,6 +1,5 @@
 import { Config } from '@linode/api-v4/lib/linodes/types';
 import { APIError } from '@linode/api-v4/lib/types';
-import { withSnackbar, WithSnackbarProps } from 'notistack';
 import * as React from 'react';
 import { QueryClient } from 'react-query';
 import { connect, MapDispatchToProps } from 'react-redux';
@@ -94,7 +93,6 @@ type CombinedProps = Props &
   DispatchProps &
   RouteProps &
   StyleProps &
-  WithSnackbarProps &
   WithProfileProps;
 
 export class ListLinodes extends React.Component<CombinedProps, State> {
@@ -480,7 +478,6 @@ const connected = connect(mapStateToProps, mapDispatchToProps);
 
 export const enhanced = compose<CombinedProps, Props>(
   withRouter,
-  withSnackbar,
   connected,
   styled,
   withFeatureFlagConsumer,

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

@@ -3,7 +3,6 @@ import {
   LongviewClient,
   LongviewSubscription,
 } from '@linode/api-v4/lib/longview/types';
-import { withSnackbar, WithSnackbarProps } from 'notistack';
 import { isEmpty, pathOr } from 'ramda';
 import * as React from 'react';
 import { connect } from 'react-redux';
@@ -79,7 +78,6 @@ interface Props {
 export type CombinedProps = Props &
   RouteComponentProps &
   LongviewProps &
-  WithSnackbarProps &
   StateProps;
 
 type SortKey = 'name' | 'cpu' | 'ram' | 'swap' | 'load' | 'network' | 'storage';
@@ -334,8 +332,7 @@ const connected = connect(mapStateToProps);
 export default compose<CombinedProps, Props & RouteComponentProps>(
   React.memo,
   connected,
-  withLongviewClients(),
-  withSnackbar
+  withLongviewClients()
 )(LongviewClients);
 
 /**

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

@@ -39,8 +39,6 @@ const props: CombinedProps = {
   deleteLongviewClient: jest.fn(),
   getLongviewClients: jest.fn().mockResolvedValue([]),
   updateLongviewClient: jest.fn(),
-  enqueueSnackbar: jest.fn(),
-  closeSnackbar: jest.fn(),
   activeSubscription: longviewSubscriptionFactory.build(),
   lvClientData: {},
   handleAddClient: jest.fn(),

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

@@ -6,7 +6,7 @@ import {
   ActiveLongviewPlan,
   LongviewSubscription,
 } from '@linode/api-v4/lib/longview/types';
-import { withSnackbar, WithSnackbarProps } from 'notistack';
+import { useSnackbar } from 'notistack';
 import { isEmpty } from 'ramda';
 import * as React from 'react';
 import { matchPath, RouteComponentProps } from 'react-router-dom';
@@ -28,13 +28,12 @@ import SubscriptionDialog from './SubscriptionDialog';
 const LongviewClients = React.lazy(() => import('./LongviewClients'));
 const LongviewPlans = React.lazy(() => import('./LongviewPlans'));
 
-type CombinedProps = LongviewProps &
-  RouteComponentProps<{}> &
-  WithSnackbarProps;
+type CombinedProps = LongviewProps & RouteComponentProps<{}>;
 
 export const LongviewLanding: React.FunctionComponent<CombinedProps> = (
   props
 ) => {
+  const { enqueueSnackbar } = useSnackbar();
   const activeSubscriptionRequestHook = useAPIRequest<ActiveLongviewPlan>(
     () => getActiveLongviewPlan().then((response) => response),
     {}
@@ -93,7 +92,7 @@ export const LongviewLanding: React.FunctionComponent<CombinedProps> = (
           setSubscriptionDialogOpen(true);
         } else {
           // Any network or other errors handled with a toast
-          props.enqueueSnackbar(
+          enqueueSnackbar(
             getAPIErrorOrDefault(
               errorResponse,
               'Error creating Longview client.'
@@ -180,6 +179,5 @@ export const LongviewLanding: React.FunctionComponent<CombinedProps> = (
 };
 
 export default compose<CombinedProps, {} & RouteComponentProps>(
-  withLongviewClients(),
-  withSnackbar
+  withLongviewClients()
 )(LongviewLanding);