CE-3633: Migrate dialogs

• Migrated Dialogs
• Migrated Dialog test
• Migrated Dialog story

Test it in Deploy or Template using MR for them. Remember to run npm ci

src/components/common/Dialog/Dialog.tsx

-import { useCallback, useState } from "react";
+import { ReactNode, useCallback, useState } from "react";
 import {
   Button,
   Dialog as MuiDialog,
@@ -13,52 +13,47 @@ import {
   Grid,
   TextField,
   LinearProgress,
-  Alert
+  Alert,
+  DialogProps as DialogPropsMUI
 } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
 
-/**
- * The title component for an ESS dialog, featuring a text/custom area and a close button
- * nestled inside a colored box.
- */
-const DialogTitle = styled(({ onClose, className, children }) => {
-  return (
-    <Stack
-      className={className}
-      flexDirection="row"
-      justifyContent="space-between"
-      alignItems="center"
-      backgroundColor="primary.main"
-      color="essWhite.main"
-      paddingX={2}
-      paddingY={1}
-    >
-      {typeof children === "string" ? (
-        <Typography>{children}</Typography>
-      ) : (
-        <>{children}</>
-      )}
-      <IconButton
-        variant="outlined"
-        onClick={onClose}
-        aria-label="Close Dialog"
-        edge="end"
-      >
-        <CloseIcon
-          fontSize="medium"
-          color="essWhite"
-        />
-      </IconButton>
-    </Stack>
-  );
-})({});
+interface DialogTitleProps {
+  onClose: () => void;
+  className?: string;
+  children: ReactNode | string;
+}
 
-/**
- * @name renderActionsCallback
- * @function
- * @param {function} onClose - callback fired when the component requests to be closed
- * @returns {object} JSX component
- */
+const DialogTitle = ({ onClose, className, children }: DialogTitleProps) => (
+  <Stack
+    className={className}
+    flexDirection="row"
+    justifyContent="space-between"
+    alignItems="center"
+    sx={{
+      backgroundColor: "primary.main",
+      color: "essWhite.main",
+      paddingX: 2,
+      paddingY: 1
+    }}
+  >
+    {typeof children === "string" ? (
+      <Typography>{children}</Typography>
+    ) : (
+      <>{children}</>
+    )}
+    <IconButton
+      onClick={onClose}
+      aria-label="Close Dialog"
+      edge="end"
+    >
+      <CloseIcon
+        fontSize="medium"
+        sx={{ color: "essWhite.main" }}
+      />
+    </IconButton>
+  </Stack>
+);
 
 /**
  * A generic MUI Dialog stylized for ESS that provides:
@@ -76,23 +71,35 @@ const DialogTitle = styled(({ onClose, className, children }) => {
  * @param {string|object} title - Title string or custom component
  * @param {string|object} content - Content string or custom component
  * @param {renderActionsCallback} renderActions - render function that receives the onClose callback and returns the dialog footer/actions
- * @param {boolean} open return true or false
  * @param {function} onClose callback fired when the component requests to be closed
  * @param {object} DialogProps MUI Dialog component props; this might be how you change the
  * width of the modal via fullWidth=true, maxWidth="md", for example. See MUI documentation.
  * @param {string} className containing css classname
  */
+
+export interface DialogProps {
+  title: string | ReactNode;
+  content: string | ReactNode;
+  open: boolean;
+  DialogProps?: DialogPropsMUI;
+  className?: string;
+  isLoading?: boolean;
+  error?: string;
+  onClose: () => void;
+  renderActions?: (onClose: () => void) => ReactNode;
+}
+
 export const Dialog = ({
   title,
   content,
-  renderActions,
   open,
-  onClose,
-  DialogProps = {},
   className,
   isLoading,
-  error
-}) => {
+  error,
+  DialogProps,
+  renderActions,
+  onClose
+}: DialogProps) => {
   return (
     <MuiDialog
       open={open}
@@ -125,14 +132,22 @@ export const Dialog = ({
   );
 };
 
+interface ConfirmationDialogButtonsProps {
+  confirmText: string;
+  cancelText: string;
+  isConfirmDisabled?: boolean;
+  onConfirm: () => void;
+  onClose: () => void;
+}
+
 const ConfirmationDialogButtons = styled(
   ({
-    onConfirm,
-    onClose,
     confirmText,
     cancelText,
-    isConfirmDisabled = false
-  }) => {
+    isConfirmDisabled = false,
+    onConfirm,
+    onClose
+  }: ConfirmationDialogButtonsProps) => {
     const handleConfirm = useCallback(() => {
       if (onConfirm) {
         onConfirm();
@@ -187,23 +202,36 @@ const ConfirmationDialogButtons = styled(
  * @param {string|object} props.title - Title string or custom component
  * @param {string|object} props.content - Content string or custom component
  * @param {renderActionsCallback} props.renderActions - render function that receives the onClose callback and returns the dialog footer/actions
- * @param {boolean} props.open return true or false
  * @param {function} props.onClose callback fired when the component requests to be closed
  * @param {object} props.DialogProps MUI Dialog component props; this might be how you change the
  * width of the modal via fullWidth=true, maxWidth="md", for example. See MUI documentation.
  * @param {string} props.className containing css classname
  */
+
+export interface ConfirmationDialogProps extends DialogProps {
+  confirmText?: string;
+  cancelText?: string;
+  isConfirmDisabled?: boolean;
+  onConfirm: () => void;
+}
+
 export const ConfirmationDialog = styled(
   ({
+    title,
+    content,
+    open,
     onConfirm,
     onClose,
     confirmText = "Yes",
     cancelText = "No",
-    isConfirmDisabled,
-    ...props
-  }) => {
+    isConfirmDisabled = false
+  }: ConfirmationDialogProps) => {
     return (
       <Dialog
+        title={title}
+        content={content}
+        open={open}
+        onClose={onClose}
         renderActions={() => (
           <ConfirmationDialogButtons
             onConfirm={onConfirm}
@@ -213,28 +241,30 @@ export const ConfirmationDialog = styled(
             isConfirmDisabled={isConfirmDisabled}
           />
         )}
-        onClose={onClose}
-        {...props}
       />
     );
   }
 )({});
 
-export const ConfirmDangerActionDialog = ({ ...props }) => {
-  const {
-    title,
-    text,
-    confirmText,
-    valueToCheck,
-    open,
-    onClose,
-    onConfirm,
-    isLoading,
-    error
-  } = props;
+export interface ConfirmDangerActionDialogProps
+  extends ConfirmationDialogProps {
+  valueToCheck: string;
+}
+
+export const ConfirmDangerActionDialog = ({
+  title,
+  content,
+  confirmText,
+  valueToCheck,
+  open,
+  onClose,
+  onConfirm,
+  isLoading,
+  error
+}: ConfirmDangerActionDialogProps) => {
   const [isConfirmDisabled, setIsConfirmDisabled] = useState(true);
 
-  const handleInputChange = (event) => {
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const inputText = event.target.value;
     setIsConfirmDisabled(inputText !== valueToCheck);
   };
@@ -260,9 +290,9 @@ export const ConfirmDangerActionDialog = ({ ...props }) => {
             xs={12}
           >
             {typeof content === "string" ? (
-              <DialogContentText>{text}</DialogContentText>
+              <DialogContentText>{content}</DialogContentText>
             ) : (
-              <Box>{text}</Box>
+              <Box>{content}</Box>
             )}
           </Grid>
           <Grid