fix(striker-ui): separate type and render() in ConfirmDialog

* Make ConfirmDialog open state local and expose its setter through ref

striker-ui/components/ConfirmDialog.tsx

@@ -1,5 +1,5 @@
-import { MouseEventHandler, ReactNode } from 'react';
+import { Box, Dialog } from '@mui/material';
-import { Box, ButtonProps, Dialog, DialogProps } from '@mui/material';
+import { forwardRef, useImperativeHandle, useMemo, useState } from 'react';
 
 import { BLUE, TEXT } from '../lib/consts/DEFAULT_THEME';
 
@@ -7,42 +7,49 @@ import ContainedButton from './ContainedButton';
 import { Panel, PanelHeader } from './Panels';
 import { BodyText, HeaderText } from './Text';
 
-type ConfirmDialogProps = {
+const ConfirmDialog = forwardRef<
-  actionCancelText?: string;
+  ConfirmDialogForwardedRefContent,
-  actionProceedText: string;
+  ConfirmDialogProps
-  content: ReactNode | string;
+>(
-  dialogProps: DialogProps;
+  (
-  onCancel: MouseEventHandler<HTMLButtonElement>;
-  onProceed: MouseEventHandler<HTMLButtonElement>;
-  proceedButtonProps?: ButtonProps;
-  titleText: string;
-};
-
-const CONFIRM_DIALOG_DEFAULT_PROPS = {
-  actionCancelText: 'Cancel',
-  proceedButtonProps: { sx: undefined },
-};
-
-const ConfirmDialog = (
     {
-    actionCancelText,
+      actionCancelText = 'Cancel',
       actionProceedText,
       content,
-    dialogProps: { open },
+      dialogProps: { open: baseOpen = false, ...restDialogProps } = {},
-    onCancel,
+      onCancelAppend,
-    onProceed,
+      onProceedAppend,
-    proceedButtonProps,
+      openInitially = false,
+      proceedButtonProps = {},
       titleText,
-  }: ConfirmDialogProps = CONFIRM_DIALOG_DEFAULT_PROPS as ConfirmDialogProps,
+    },
-): JSX.Element => {
+    ref,
-  const { sx: proceedButtonSx } =
+  ) => {
-    proceedButtonProps ?? CONFIRM_DIALOG_DEFAULT_PROPS.proceedButtonProps;
+    const { sx: proceedButtonSx } = proceedButtonProps;
+
+    const [isOpen, setIsOpen] = useState<boolean>(openInitially);
+
+    // TODO: using base open is depreciated; use internal state once all
+    // dependent components finish the migrate.
+    const open = useMemo(
+      () => (ref ? isOpen : baseOpen),
+      [baseOpen, isOpen, ref],
+    );
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        setOpen: (value) => setIsOpen(value),
+      }),
+      [],
+    );
 
     return (
       <Dialog
-      {...{ open }}
+        open={open}
         PaperComponent={Panel}
         PaperProps={{ sx: { overflow: 'visible' } }}
+        {...restDialogProps}
       >
         <PanelHeader>
           <HeaderText text={titleText} />
@@ -62,7 +69,15 @@ const ConfirmDialog = (
             },
           }}
         >
-        <ContainedButton onClick={onCancel}>{actionCancelText}</ContainedButton>
+          <ContainedButton
+            onClick={(...args) => {
+              setIsOpen(false);
+
+              onCancelAppend?.call(null, ...args);
+            }}
+          >
+            {actionCancelText}
+          </ContainedButton>
           <ContainedButton
             sx={{
               backgroundColor: BLUE,
@@ -72,17 +87,20 @@ const ConfirmDialog = (
 
               ...proceedButtonSx,
             }}
-          onClick={onProceed}
+            onClick={(...args) => {
+              setIsOpen(false);
+
+              onProceedAppend?.call(null, ...args);
+            }}
           >
             {actionProceedText}
           </ContainedButton>
         </Box>
       </Dialog>
     );
-};
+  },
-
+);
-ConfirmDialog.defaultProps = CONFIRM_DIALOG_DEFAULT_PROPS;
 
-export type { ConfirmDialogProps };
+ConfirmDialog.displayName = 'ConfirmDialog';
 
 export default ConfirmDialog;

striker-ui/components/Files/FileEditForm.tsx

@@ -327,8 +327,8 @@ const FileEditForm = (
             actionProceedText="Purge"
             content={`${selectedFilesCount} files will be removed from the system. You cannot undo this purge.`}
             dialogProps={{ open: isOpenPurgeConfirmDialog }}
-            onCancel={cancelPurge}
+            onCancelAppend={cancelPurge}
-            onProceed={purgeFiles}
+            onProceedAppend={purgeFiles}
             proceedButtonProps={{ sx: purgeButtonStyleOverride }}
             titleText={`Are you sure you want to purge ${selectedFilesCount} selected files? `}
           />

striker-ui/components/ProvisionServerDialog.tsx

@@ -1787,10 +1787,10 @@ const ProvisionServerDialog = ({
           actionProceedText="Provision"
           content={createConfirmDialogContent()}
           dialogProps={{ open: isOpenProvisionConfirmDialog }}
-          onCancel={() => {
+          onCancelAppend={() => {
             setIsOpenProvisionConfirmDialog(false);
           }}
-          onProceed={() => {
+          onProceedAppend={() => {
             const requestBody = JSON.stringify({
               serverName: inputServerNameValue,
               cpuCores: inputCPUCoresValue,

striker-ui/components/StrikerInitForm.tsx

@@ -210,10 +210,10 @@ const StrikerInitForm: FC = () => {
           </Grid>
         }
         dialogProps={{ open: isOpenConfirm }}
-        onCancel={() => {
+        onCancelAppend={() => {
           setIsOpenConfirm(false);
         }}
-        onProceed={() => {
+        onProceedAppend={() => {
           setSubmitMessage(undefined);
           setIsSubmittingForm(true);
           setIsOpenConfirm(false);

striker-ui/types/ConfirmDialog.d.ts

@@ -0,0 +1,18 @@
+type ConfirmDialogOptionalProps = {
+  actionCancelText?: string;
+  dialogProps?: import('@mui/material').DialogProps;
+  onCancelAppend?: ContainedButtonProps['onClick'];
+  openInitially?: boolean;
+  proceedButtonProps?: ContainedButtonProps;
+};
+
+type ConfirmDialogProps = ConfirmDialogOptionalProps & {
+  actionProceedText: string;
+  content: import('@mui/material').ReactNode;
+  onProceedAppend: Exclude<ContainedButtonProps['onClick'], undefined>;
+  titleText: string;
+};
+
+type ConfirmDialogForwardedRefContent = {
+  setOpen?: (value: boolean) => void;
+};