fix(striker-ui): add confirm dialog to ManageFencesPanel

striker-ui/components/ManageFencesPanel.tsx

@@ -1,4 +1,12 @@
-import { FC, FormEventHandler, useMemo, useRef, useState } from 'react';
+import { Box } from '@mui/material';
+import {
+  FC,
+  FormEventHandler,
+  ReactElement,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 import API_BASE_URL from '../lib/consts/API_BASE_URL';
 
@@ -13,9 +21,29 @@ import List from './List';
 import { Panel, PanelHeader } from './Panels';
 import periodicFetch from '../lib/fetchers/periodicFetch';
 import Spinner from './Spinner';
-import { BodyText, HeaderText, InlineMonoText } from './Text';
+import {
+  BodyText,
+  HeaderText,
+  InlineMonoText,
+  MonoText,
+  SmallText,
+} from './Text';
 import useIsFirstRender from '../hooks/useIsFirstRender';
 import useProtectedState from '../hooks/useProtectedState';
+import SensitiveText from './Text/SensitiveText';
+
+type FormFenceParameterData = {
+  fenceAgent: string;
+  fenceName: string;
+  parameterInputs: {
+    [parameterInputId: string]: {
+      isParameterSensitive: boolean;
+      parameterId: string;
+      parameterType: string;
+      parameterValue: string;
+    };
+  };
+};
 
 const fenceParameterBooleanToString = (value: boolean) => (value ? '1' : '0');
 
@@ -25,12 +53,7 @@ const getFormFenceParameters = (
 ) => {
   const { elements } = target as HTMLFormElement;
 
-  return Object.values(elements).reduce<{
-    fenceAgent: string;
-    parameters: {
-      [parameterId: string]: { type: string; value: string };
-    };
-  }>(
+  return Object.values(elements).reduce<FormFenceParameterData>(
     (previous, formElement) => {
       const { id: inputId } = formElement;
       const reExtract = new RegExp(`^(fence[^-]+)${ID_SEPARATOR}([^\\s]+)$`);
@@ -42,7 +65,16 @@ const getFormFenceParameters = (
         previous.fenceAgent = fenceId;
 
         const inputElement = formElement as HTMLInputElement;
-        const { checked, value } = inputElement;
+        const {
+          checked,
+          dataset: { sensitive: rawSensitive },
+          value,
+        } = inputElement;
+
+        if (parameterId === 'name') {
+          previous.fenceName = value;
+        }
+
         const {
           [fenceId]: {
             parameters: {
@@ -51,9 +83,11 @@ const getFormFenceParameters = (
           },
         } = fenceTemplate;
 
-        previous.parameters[parameterId] = {
-          type: parameterType,
-          value:
+        previous.parameterInputs[inputId] = {
+          isParameterSensitive: rawSensitive === 'true',
+          parameterId,
+          parameterType,
+          parameterValue:
             parameterType === 'boolean'
               ? fenceParameterBooleanToString(checked)
               : value,
@@ -62,14 +96,58 @@ const getFormFenceParameters = (
 
       return previous;
     },
-    { fenceAgent: '', parameters: {} },
+    { fenceAgent: '', fenceName: '', parameterInputs: {} },
   );
 };
 
+const buildConfirmFenceParameters = (
+  parameterInputs: FormFenceParameterData['parameterInputs'],
+) => (
+  <List
+    listItems={parameterInputs}
+    listItemProps={{ sx: { padding: 0 } }}
+    renderListItem={(
+      parameterInputId,
+      { isParameterSensitive, parameterId, parameterValue },
+    ) => {
+      let textElement: ReactElement;
+
+      if (parameterValue) {
+        textElement = isParameterSensitive ? (
+          <SensitiveText monospaced>{parameterValue}</SensitiveText>
+        ) : (
+          <Box sx={{ maxWidth: '100%', overflowX: 'scroll' }}>
+            <MonoText lineHeight={2.8} whiteSpace="nowrap">
+              {parameterValue}
+            </MonoText>
+          </Box>
+        );
+      } else {
+        textElement = <SmallText>none</SmallText>;
+      }
+
+      return (
+        <FlexBox
+          fullWidth
+          growFirst
+          height="2.8em"
+          key={`confirm-${parameterInputId}`}
+          maxWidth="100%"
+          row
+        >
+          <BodyText>{parameterId}</BodyText>
+          {textElement}
+        </FlexBox>
+      );
+    }}
+  />
+);
+
 const ManageFencesPanel: FC = () => {
   const isFirstRender = useIsFirstRender();
 
   const confirmDialogRef = useRef<ConfirmDialogForwardedRefContent>({});
+  const formDialogRef = useRef<ConfirmDialogForwardedRefContent>({});
 
   const [confirmDialogProps, setConfirmDialogProps] =
     useState<ConfirmDialogProps>({
@@ -77,6 +155,11 @@ const ManageFencesPanel: FC = () => {
       content: '',
       titleText: '',
     });
+  const [formDialogProps, setFormDialogProps] = useState<ConfirmDialogProps>({
+    actionProceedText: '',
+    content: '',
+    titleText: '',
+  });
   const [fenceTemplate, setFenceTemplate] = useProtectedState<
     APIFenceTemplate | undefined
   >(undefined);
@@ -98,7 +181,7 @@ const ManageFencesPanel: FC = () => {
         header
         listItems={fenceOverviews}
         onAdd={() => {
-          setConfirmDialogProps({
+          setFormDialogProps({
             actionProceedText: 'Add',
             content: <AddFenceInputGroup fenceTemplate={fenceTemplate} />,
             onSubmitAppend: (event) => {
@@ -106,18 +189,34 @@ const ManageFencesPanel: FC = () => {
                 return;
               }
 
-              getFormFenceParameters(fenceTemplate, event);
+              const addData = getFormFenceParameters(fenceTemplate, event);
+
+              setConfirmDialogProps({
+                actionProceedText: 'Add',
+                content: buildConfirmFenceParameters(addData.parameterInputs),
+                titleText: (
+                  <HeaderText>
+                    Add a{' '}
+                    <InlineMonoText fontSize="inherit">
+                      {addData.fenceAgent}
+                    </InlineMonoText>{' '}
+                    fence device with the following parameters?
+                  </HeaderText>
+                ),
+              });
+
+              confirmDialogRef.current.setOpen?.call(null, true);
             },
             titleText: 'Add a fence device',
           });
 
-          confirmDialogRef.current.setOpen?.call(null, true);
+          formDialogRef.current.setOpen?.call(null, true);
         }}
         onEdit={() => {
           setIsEditFences((previous) => !previous);
         }}
         onItemClick={({ fenceAgent: fenceId, fenceName, fenceParameters }) => {
-          setConfirmDialogProps({
+          setFormDialogProps({
             actionProceedText: 'Update',
             content: (
               <EditFenceInputGroup
@@ -132,18 +231,34 @@ const ManageFencesPanel: FC = () => {
                 return;
               }
 
-              getFormFenceParameters(fenceTemplate, event);
+              const editData = getFormFenceParameters(fenceTemplate, event);
+
+              setConfirmDialogProps({
+                actionProceedText: 'Update',
+                content: buildConfirmFenceParameters(editData.parameterInputs),
+                titleText: (
+                  <HeaderText>
+                    Update{' '}
+                    <InlineMonoText fontSize="inherit">
+                      {editData.fenceName}
+                    </InlineMonoText>{' '}
+                    fence device with the following parameters?
+                  </HeaderText>
+                ),
+              });
+
+              confirmDialogRef.current.setOpen?.call(null, true);
             },
             titleText: (
               <HeaderText>
                 Update fence device{' '}
-                <InlineMonoText variant="h4">{fenceName}</InlineMonoText>{' '}
+                <InlineMonoText fontSize="inherit">{fenceName}</InlineMonoText>{' '}
                 parameters
               </HeaderText>
             ),
           });
 
-          confirmDialogRef.current.setOpen?.call(null, true);
+          formDialogRef.current.setOpen?.call(null, true);
         }}
         renderListItem={(
           fenceUUID,
@@ -201,6 +316,15 @@ const ManageFencesPanel: FC = () => {
           PaperProps: { sx: { minWidth: { xs: '90%', md: '50em' } } },
         }}
         formContent
+        scrollBoxProps={{
+          padding: '.3em .5em',
+        }}
+        scrollContent
+        {...formDialogProps}
+        ref={formDialogRef}
+      />
+      <ConfirmDialog
+        scrollBoxProps={{ paddingRight: '1em' }}
         scrollContent
         {...confirmDialogProps}
         ref={confirmDialogRef}