diff --git a/striker-ui/components/ManageFencesPanel.tsx b/striker-ui/components/ManageFencesPanel.tsx index 081e65c2..6b52d587 100644 --- a/striker-ui/components/ManageFencesPanel.tsx +++ b/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( (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'], +) => ( + { + let textElement: ReactElement; + + if (parameterValue) { + textElement = isParameterSensitive ? ( + {parameterValue} + ) : ( + + + {parameterValue} + + + ); + } else { + textElement = none; + } + + return ( + + {parameterId} + {textElement} + + ); + }} + /> +); + const ManageFencesPanel: FC = () => { const isFirstRender = useIsFirstRender(); const confirmDialogRef = useRef({}); + const formDialogRef = useRef({}); const [confirmDialogProps, setConfirmDialogProps] = useState({ @@ -77,6 +155,11 @@ const ManageFencesPanel: FC = () => { content: '', titleText: '', }); + const [formDialogProps, setFormDialogProps] = useState({ + 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: , 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: ( + + Add a{' '} + + {addData.fenceAgent} + {' '} + fence device with the following parameters? + + ), + }); + + 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: ( { return; } - getFormFenceParameters(fenceTemplate, event); + const editData = getFormFenceParameters(fenceTemplate, event); + + setConfirmDialogProps({ + actionProceedText: 'Update', + content: buildConfirmFenceParameters(editData.parameterInputs), + titleText: ( + + Update{' '} + + {editData.fenceName} + {' '} + fence device with the following parameters? + + ), + }); + + confirmDialogRef.current.setOpen?.call(null, true); }, titleText: ( Update fence device{' '} - {fenceName}{' '} + {fenceName}{' '} parameters ), }); - 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} + /> +