fix(striker-ui): add optional close button to form dialog

striker-ui/components/FormDialog.tsx

@@ -1,18 +1,46 @@
 import { forwardRef, useMemo } from 'react';
 
 import ConfirmDialog from './ConfirmDialog';
+import IconButton from './IconButton';
+import { HeaderText } from './Text';
 
 const FormDialog = forwardRef<
   ConfirmDialogForwardedRefContent,
-  ConfirmDialogProps
+  ConfirmDialogProps & { showClose?: boolean }
 >((props, ref) => {
-  const { scrollContent: isScrollContent } = props;
+  const { scrollContent, showClose, titleText, ...restProps } = props;
 
   const scrollBoxPaddingRight = useMemo(
-    () => (isScrollContent ? '.5em' : undefined),
-    [isScrollContent],
+    () => (scrollContent ? '.5em' : undefined),
+    [scrollContent],
   );
 
+  const titleElement = useMemo(() => {
+    const title =
+      typeof titleText === 'string' ? (
+        <HeaderText>{titleText}</HeaderText>
+      ) : (
+        titleText
+      );
+
+    return showClose ? (
+      <>
+        {title}
+        <IconButton
+          mapPreset="close"
+          onClick={() => {
+            if (ref && 'current' in ref) {
+              ref.current?.setOpen?.call(null, false);
+            }
+          }}
+          variant="redcontained"
+        />
+      </>
+    ) : (
+      title
+    );
+  }, [ref, showClose, titleText]);
+
   return (
     <ConfirmDialog
       dialogProps={{
@@ -23,12 +51,18 @@ const FormDialog = forwardRef<
         paddingRight: scrollBoxPaddingRight,
         paddingTop: '.3em',
       }}
-      {...props}
+      scrollContent={scrollContent}
+      titleText={titleElement}
+      {...restProps}
       ref={ref}
     />
   );
 });
 
+FormDialog.defaultProps = {
+  showClose: false,
+};
+
 FormDialog.displayName = 'FormDialog';
 
 export default FormDialog;

striker-ui/components/ManageFence/ManageFencePanel.tsx

@@ -421,6 +421,7 @@ const ManageFencePanel: FC = () => {
         preActionArea={messageArea}
         ref={formDialogRef}
         scrollContent
+        showClose
       />
       <ConfirmDialog
         closeOnProceed

striker-ui/components/ManageManifest/ManageManifestPanel.tsx

@@ -590,6 +590,7 @@ const ManageManifestPanel: FC = () => {
         preActionArea={messageArea}
         ref={addManifestFormDialogRef}
         scrollContent
+        showClose
       />
       <FormDialog
         {...editManifestFormDialogProps}
@@ -598,6 +599,7 @@ const ManageManifestPanel: FC = () => {
         preActionArea={messageArea}
         ref={editManifestFormDialogRef}
         scrollContent
+        showClose
       />
       <FormDialog
         {...runManifestFormDialogProps}
@@ -606,6 +608,7 @@ const ManageManifestPanel: FC = () => {
         preActionArea={messageArea}
         ref={runManifestFormDialogRef}
         scrollContent
+        showClose
       />
       <ConfirmDialog
         closeOnProceed

striker-ui/components/ManageUps/ManageUpsPanel.tsx

@@ -365,6 +365,7 @@ const ManageUpsPanel: FC = () => {
         loadingAction={isFormSubmitting}
         preActionArea={messageArea}
         ref={formDialogRef}
+        showClose
       />
       <ConfirmDialog
         closeOnProceed