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/DismissibleBanner/DismissibleBanner.stories.mdx

@@ -40,7 +40,7 @@ export const DismissibleBannerTemplate = (args) => {
 
 export const CallToActionBanner = () => {
   return (
-    <DismissibleBanner preferenceKey="cluster-v1" success>
+    <DismissibleBanner preferenceKey="cluster-v1" info>
       <Grid
         container
         direction="row"
@@ -67,7 +67,7 @@ export const StatusBannersTemplate = (args) => {
 
 export const BetaBanner = () => {
   return (
-    <DismissibleBanner preferenceKey="beta-banner" success>
+    <DismissibleBanner preferenceKey="beta-banner" info>
       <Typography>
         Managed Database for MySQL is available in a free, open beta period
         until May 2nd, 2022. This is a beta environment and should not be used

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

@@ -15,7 +15,8 @@ import { Notice } from './Notice';
 
 Types of Notices:
 
-- Success/Marketing (blue line)
+- Success/Marketing (green line)
+- Info (blue line)
 - Error/critical (red line)
 - Warning (yellow line)
 
@@ -25,6 +26,12 @@ Types of Notices:
   </Story>
 </Canvas>
 
+<Canvas>
+  <Story name="Info">
+    <Notice info text="This is a informational notice" />
+  </Story>
+</Canvas>
+
 <Canvas>
   <Story name="Error">
     <Notice error text="This is an error notice" />
@@ -43,6 +50,12 @@ Types of Notices:
   </Story>
 </Canvas>
 
+<Canvas>
+  <Story name="Important Info">
+    <Notice info important text="This is an important informational notice" />
+  </Story>
+</Canvas>
+
 <Canvas>
   <Story name="Important Error">
     <Notice error important text="This is an important error notice" />

packages/manager/src/components/Notice/Notice.tsx

@@ -100,6 +100,16 @@ export const useStyles = makeStyles<
   successList: {
     borderLeft: `5px solid ${theme.palette.success.dark}`,
   },
+  info: {
+    animation: '$fadeIn 225ms linear forwards',
+    borderLeft: `5px solid ${theme.palette.info.dark}`,
+    [`&.${classes.important}`]: {
+      borderLeftWidth: 32,
+    },
+  },
+  infoList: {
+    borderLeft: `5px solid ${theme.palette.info.dark}`,
+  },
   marketing: {
     borderLeft: `5px solid ${theme.color.green}`,
   },
@@ -115,6 +125,7 @@ export interface NoticeProps extends Grid2Props {
   important?: boolean;
   warning?: boolean;
   success?: boolean;
+  info?: boolean;
   marketing?: boolean;
   typeProps?: TypographyProps;
   className?: string;
@@ -131,25 +142,26 @@ export interface NoticeProps extends Grid2Props {
 
 export const Notice = (props: NoticeProps) => {
   const {
+    breakWords,
+    children,
     className,
-    important,
-    text,
+    dataTestId,
     error,
-    breakWords,
     errorGroup,
-    warning,
-    success,
-    marketing,
-    typeProps,
-    children,
     flag,
+    important,
+    info,
+    marketing,
     notificationList,
     onClick,
-    spacingTop,
     spacingBottom,
     spacingLeft,
-    dataTestId,
+    spacingTop,
+    success,
     sx,
+    text,
+    typeProps,
+    warning,
   } = props;
 
   const { classes, cx } = useStyles();
@@ -206,6 +218,8 @@ export const Notice = (props: NoticeProps) => {
         [classes.errorList]: error && notificationList,
         [classes.success]: success && !notificationList,
         [classes.successList]: success && notificationList,
+        [classes.info]: info && !notificationList,
+        [classes.infoList]: info && notificationList,
         [classes.warning]: warning && !notificationList,
         [classes.marketing]: marketing,
         [classes.warningList]: warning && notificationList,
@@ -228,7 +242,7 @@ export const Notice = (props: NoticeProps) => {
       )}
       {important &&
         ((success && <Check className={classes.icon} data-qa-success-img />) ||
-          (warning && (
+          ((warning || info) && (
             <Warning className={classes.icon} data-qa-warning-img />
           )) ||
           (error && <Error className={classes.icon} data-qa-error-img />))}

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/Account/AutoBackups.tsx

@@ -49,7 +49,7 @@ const AutoBackups = (props: Props) => {
       <Grid container direction="column" spacing={2}>
         <Grid>
           {!!isManagedCustomer ? (
-            <Notice success spacingBottom={20}>
+            <Notice info spacingBottom={20}>
               You&rsquo;re a Managed customer, which means your Linodes are
               already automatically backed up - no need to toggle this setting.
             </Notice>

packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx

@@ -562,7 +562,7 @@ const DatabaseCreate = () => {
           </FormControl>
           <Grid xs={12} md={8}>
             {flags.databaseBeta ? (
-              <Notice success className={classes.notice}>
+              <Notice info className={classes.notice}>
                 <strong>
                   Notice: There is no charge for database clusters during beta.
                 </strong>{' '}

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/Images/ImagesCreate/CreateImageTab.tsx

@@ -246,7 +246,7 @@ export const CreateImageTab: React.FC<Props> = (props) => {
       {generalError ? (
         <Notice error text={generalError} data-qa-notice />
       ) : null}
-      {notice ? <Notice success text={notice} data-qa-notice /> : null}
+      {notice ? <Notice info text={notice} data-qa-notice /> : null}
 
       <LinodeSelectV2
         value={selectedLinode?.id || null}

packages/manager/src/features/Images/ImagesDrawer.tsx

@@ -316,7 +316,7 @@ export const ImageDrawer: React.FC<CombinedProps> = (props) => {
       ) : null}
       {generalError && <Notice error text={generalError} data-qa-notice />}
 
-      {notice && <Notice success text={notice} data-qa-notice />}
+      {notice && <Notice info text={notice} data-qa-notice />}
 
       {['create', 'restore'].includes(mode) && (
         <LinodeSelect

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

@@ -1,8 +1,6 @@
 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';
 import ActionMenu, { Action } from 'src/components/ActionMenu';
 import { Hidden } from 'src/components/Hidden';
 import { useTheme } from '@mui/styles';
@@ -19,15 +17,12 @@ interface Props {
   openDialog: () => void;
 }
 
-type CombinedProps = Props & RouteComponentProps<{}> & WithSnackbarProps;
-
-export const ClusterActionMenu: React.FunctionComponent<CombinedProps> = (
-  props
-) => {
+export const ClusterActionMenu = (props: 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[] = [
     {
@@ -91,7 +86,3 @@ export const ClusterActionMenu: React.FunctionComponent<CombinedProps> = (
     </>
   );
 };
-
-const enhanced = compose<CombinedProps, Props>(withSnackbar, withRouter);
-
-export default enhanced(ClusterActionMenu);

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

@@ -5,7 +5,7 @@ import Grid from '@mui/material/Unstable_Grid2';
 import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
 import { TableCell } from 'src/components/TableCell';
 import { TableRow } from 'src/components/TableRow';
-import ActionMenu from './ClusterActionMenu';
+import { ClusterActionMenu } from './ClusterActionMenu';
 import { Link } from 'react-router-dom';
 import { makeStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
@@ -149,7 +149,7 @@ export const KubernetesClusterRow = (props: Props) => {
         </TableCell>
       </Hidden>
       <TableCell actionCell>
-        <ActionMenu
+        <ClusterActionMenu
           clusterId={cluster.id}
           clusterLabel={cluster.label}
           openDialog={() =>

packages/manager/src/features/Kubernetes/KubernetesClusterDetail/UpgradeKubernetesVersionBanner.tsx

@@ -30,7 +30,7 @@ export const UpgradeKubernetesVersionBanner = (props: Props) => {
       {nextVersion ? (
         <DismissibleBanner
           preferenceKey={`${clusterID}-${currentVersion}`}
-          success
+          info
           actionButton={actionButton}
         >
           <Grid

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(),