Webatrice: update deps (#4700)

* save work

* fix reset styling

* fix toast reducer

* update non-react deps

* update react libraries

* remove jquery, use sanitize-html instead

* add missing change

* fix deps and dev deps

* update workflow to target Node 16

* run @mui/codemod to remove @mui/styles

* add default body font size

* update react 17 to 18

* declare enum before use

* add rel attr to links

* fix font sizing issue

* trailing commas

* refactor deep destructuring

Co-authored-by: Jeremy Letto <jeremy.letto@datasite.com>

webclient/src/components/InputField/InputField.tsx

@@ -1,27 +1,33 @@
 import React from 'react';
-import makeStyles from '@mui/styles/makeStyles';
+import { styled } from '@mui/material/styles';
 import TextField from '@mui/material/TextField';
 import ErrorOutlinedIcon from '@mui/icons-material/ErrorOutlined';
 
 import './InputField.css';
 
-const useStyles = makeStyles(theme => ({
-  root: {
+const PREFIX = 'InputField';
+
+const classes = {
+  root: `${PREFIX}-root`
+};
+
+const Root = styled('div')(({ theme }) => ({
+  [`&.${classes.root}`]: {
     '& .InputField-error': {
       color: theme.palette.error.main
     },
 
     '& .InputField-warning': {
       color: theme.palette.warning.main
-    }
+    },
   },
 }));
 
-const InputField = ({ input, meta: { touched, error, warning }, ...args }) => {
-  const classes = useStyles();
+const InputField = ({ input, meta, ...args }) => {
+  const { touched, error, warning } = meta;
 
   return (
-    <div className={'InputField ' + classes.root}>
+    <Root className={'InputField ' + classes.root}>
       { touched && (
         <div className="InputField-validation">
           {
@@ -47,7 +53,7 @@ const InputField = ({ input, meta: { touched, error, warning }, ...args }) => {
         size="small"
         fullWidth={true}
       />
-    </div>
+    </Root>
   );
 };
 

webclient/src/components/KnownHosts/KnownHosts.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useState } from 'react';
+import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 import { Select, MenuItem } from '@mui/material';
 import Button from '@mui/material/Button';
@@ -7,7 +8,6 @@ import IconButton from '@mui/material/IconButton';
 import WifiTetheringIcon from '@mui/icons-material/WifiTethering';
 import PortableWifiOffIcon from '@mui/icons-material/PortableWifiOff';
 import InputLabel from '@mui/material/InputLabel';
-import makeStyles from '@mui/styles/makeStyles';
 import Check from '@mui/icons-material/Check';
 import AddIcon from '@mui/icons-material/Add';
 import EditRoundedIcon from '@mui/icons-material/Edit';
@@ -29,8 +29,14 @@ enum TestConnection {
   SUCCESS = 'success',
 }
 
-const useStyles = makeStyles(theme => ({
-  root: {
+const PREFIX = 'KnownHosts';
+
+const classes = {
+  root: `${PREFIX}-root`
+};
+
+const Root = styled('div')(({ theme }) => ({
+  [`&.${classes.root}`]: {
     '& .KnownHosts-error': {
       color: theme.palette.error.main
     },
@@ -50,13 +56,13 @@ const useStyles = makeStyles(theme => ({
         color: theme.palette.success.main
       }
     }
-  },
+  }
 }));
 
 const KnownHosts = (props) => {
   const { input: { onChange }, meta, disabled } = props;
   const { touched, error, warning } = meta;
-  const classes = useStyles();
+
   const { t } = useTranslation();
 
   const [hostsState, setHostsState] = useState({
@@ -195,7 +201,7 @@ const KnownHosts = (props) => {
   }
 
   return (
-    <div className={'KnownHosts ' + classes.root}>
+    <Root className={'KnownHosts ' + classes.root}>
       <FormControl className='KnownHosts-form' size='small' variant='outlined'>
         { touched && (
           <div className='KnownHosts-validation'>
@@ -272,8 +278,8 @@ const KnownHosts = (props) => {
       <Toast open={showCreateToast} onClose={() => setShowCreateToast(false)}>{ t('KnownHosts.toast', { mode: 'created' }) }</Toast>
       <Toast open={showDeleteToast} onClose={() => setShowDeleteToast(false)}>{ t('KnownHosts.toast', { mode: 'deleted' }) }</Toast>
       <Toast open={showEditToast} onClose={() => setShowEditToast(false)}>{ t('KnownHosts.toast', { mode: 'edited' }) }</Toast>
-    </div>
-  )
+    </Root>
+  );
 };
 
 export default KnownHosts;

webclient/src/components/Message/CardCallout.tsx

@@ -1,6 +1,6 @@
 // eslint-disable-next-line
 import React, { useMemo, useState } from 'react';
-import makeStyles from '@mui/styles/makeStyles';
+import { styled } from '@mui/material/styles';
 import Popover from '@mui/material/Popover';
 
 import { CardDTO, TokenDTO } from 'services';
@@ -10,17 +10,24 @@ import TokenDetails from '../TokenDetails/TokenDetails';
 
 import './CardCallout.css';
 
-const useStyles = makeStyles(theme => ({
-  popover: {
+const PREFIX = 'CardCallout';
+
+const classes = {
+  popover: `${PREFIX}-popover`,
+  popoverContent: `${PREFIX}-popoverContent`
+};
+
+const Root = styled('span')(({ theme }) => ({
+  [`& .${classes.popover}`]: {
     pointerEvents: 'none',
   },
-  popoverContent: {
+
+  [`& .${classes.popoverContent}`]: {
     pointerEvents: 'none',
-  },
+  }
 }));
 
 const CardCallout = ({ name }) => {
-  const classes = useStyles();
   const [card, setCard] = useState<CardDTO>(null);
   const [token, setToken] = useState<TokenDTO>(null);
   const [anchorEl, setAnchorEl] = useState<Element>(null);
@@ -48,7 +55,7 @@ const CardCallout = ({ name }) => {
   const open = Boolean(anchorEl);
 
   return (
-    <span className='callout'>
+    <Root className='callout'>
       <span
         onMouseEnter={handlePopoverOpen}
         onMouseLeave={handlePopoverClose}
@@ -80,7 +87,7 @@ const CardCallout = ({ name }) => {
           </Popover>
         )
       }
-    </span>
+    </Root>
   );
 };
 

webclient/src/components/Toast/ToastContext.tsx

@@ -1,4 +1,4 @@
-import { createContext, FC, ReactChild, ReactNode, useContext, useEffect, useReducer, ContextType, Context } from 'react'
+import { createContext, FC, PropsWithChildren, ReactChild, ReactNode, useContext, useEffect, useReducer, ContextType, Context } from 'react'
 
 import { ACTIONS, initialState, reducer } from './reducer';
 import Toast from './Toast'
@@ -24,15 +24,15 @@ const ToastContext: Context<any> = createContext<ToastState>({
   removeToast: (key) => {},
 });
 
-export const ToastProvider: FC<ReactNode> = (props) => {
+export const ToastProvider: FC<PropsWithChildren> = (props) => {
   const { children } = props
   const [state, dispatch] = useReducer(reducer, initialState)
   const providerState = {
     toasts: state.toasts,
     addToast: (key, children) => dispatch({ type: ACTIONS.ADD_TOAST, payload: { key, children } }),
-    openToast: key => dispatch({ type: ACTIONS.OPEN_TOAST, payload: key }),
-    closeToast: key => dispatch({ type: ACTIONS.CLOSE_TOAST, payload: key }),
-    removeToast: key => dispatch({ type: ACTIONS.REMOVE_TOAST, payload: key }),
+    openToast: key => dispatch({ type: ACTIONS.OPEN_TOAST, payload: { key } }),
+    closeToast: key => dispatch({ type: ACTIONS.CLOSE_TOAST, payload: { key } }),
+    removeToast: key => dispatch({ type: ACTIONS.REMOVE_TOAST, payload: { key } }),
   }
   return (
     <ToastContext.Provider value={providerState}>
@@ -41,7 +41,7 @@ export const ToastProvider: FC<ReactNode> = (props) => {
         {Array.from(state.toasts).map(([key, value]) => {
           const { isOpen, children } = value;
           return (
-            <Toast key={key} open={isOpen} onClose={() => dispatch({ type: ACTIONS.CLOSE_TOAST, payload: key })}>
+            <Toast key={key} open={isOpen} onClose={() => dispatch({ type: ACTIONS.CLOSE_TOAST, payload: { key } })}>
               {children}
             </Toast>
           )

webclient/src/components/Toast/reducer.ts

@@ -6,41 +6,54 @@ export const ACTIONS = {
 }
 
 export const initialState = {
-  toasts: new Map()
+  toasts: {}
 }
 
-export function reducer(state, action) {
-  const { type, payload } = action
+export function reducer(state, { type, payload }) {
+  const { key, children } = payload;
+
   switch (type) {
     case ACTIONS.ADD_TOAST: {
-      const newState = { ...state }
-      newState.toasts = new Map(Array.from(state.toasts))
-      const { toasts } = newState;
-      const { key, children } = payload
-      toasts.set(key, { isOpen: false, children })
-      return newState
+      return {
+        ...state,
+        toasts: {
+          ...state.toasts,
+          [key]: {
+            isOpen: false,
+            children,
+          },
+        },
+      };
     }
     case ACTIONS.OPEN_TOAST: {
-      const newState = { ...state }
-      newState.toasts = new Map(Array.from(state.toasts))
-      const { toasts } = newState;
-      const toast = toasts.get(payload)
-      toasts.set(payload, { isOpen: true, children: toast.children })
-      return newState
+      return {
+        ...state,
+        toasts: {
+          ...state.toasts,
+          [key]: {
+            ...state.toasts[key],
+            isOpen: true,
+          },
+        },
+      };
     }
     case ACTIONS.CLOSE_TOAST: {
-      const newState = { ...state }
-      newState.toasts = new Map(Array.from(state.toasts))
-      const { toasts } = newState;
-      const toast = toasts.get(payload)
-      toasts.set(payload, { isOpen: false, children: toast.children })
-      return newState
+      return {
+        ...state,
+        toasts: {
+          ...state.toasts,
+          [key]: {
+            ...state.toasts[key],
+            isOpen: false,
+          },
+        },
+      };
     }
     case ACTIONS.REMOVE_TOAST: {
-      const newState = { ...state }
-      newState.toasts = new Map(Array.from(state.toasts))
-      newState.toasts.delete(payload)
-      return newState
+      const newState = { ...state };
+      delete newState.toasts[key];
+
+      return newState;
     }
     default:
       throw Error('Please pick an available action')