diff --git a/striker-ui/components/CommonFenceInputGroup.tsx b/striker-ui/components/CommonFenceInputGroup.tsx index b1fb333d..95756237 100644 --- a/striker-ui/components/CommonFenceInputGroup.tsx +++ b/striker-ui/components/CommonFenceInputGroup.tsx @@ -1,72 +1,105 @@ +import { Box, styled, Tooltip } from '@mui/material'; import { FC, ReactElement, ReactNode, useMemo } from 'react'; +import INPUT_TYPES from '../lib/consts/INPUT_TYPES'; + import FlexBox from './FlexBox'; import InputWithRef from './InputWithRef'; import OutlinedInputWithLabel from './OutlinedInputWithLabel'; import { ExpandablePanel } from './Panels'; import SelectWithLabel from './SelectWithLabel'; import SwitchWithLabel from './SwitchWithLabel'; +import { BodyText } from './Text'; const CHECKED_STATES: Array = ['1', 'on']; const ID_SEPARATOR = '-'; const MAP_TO_INPUT_BUILDER: MapToInputBuilder = { - boolean: ({ id, isChecked = false, label, name = id }) => ( - - } - valueType="boolean" - /> - ), - select: ({ - id, - isRequired, - label, - name = id, - selectOptions = [], - value = '', - }) => ( - - } - required={isRequired} - /> - ), - string: ({ id, isRequired, label = '', name = id, value }) => ( - - } - required={isRequired} - /> - ), + boolean: (args) => { + const { id, isChecked = false, label, name = id } = args; + + return ( + + } + valueType="boolean" + /> + ); + }, + select: (args) => { + const { + id, + isRequired, + label, + name = id, + selectOptions = [], + value = '', + } = args; + + return ( + + } + required={isRequired} + /> + ); + }, + string: (args) => { + const { + id, + isRequired, + isSensitive = false, + label = '', + name = id, + value, + } = args; + + return ( + + } + required={isRequired} + /> + ); + }, }; const combineIds = (...pieces: string[]) => pieces.join(ID_SEPARATOR); +const FenceInputWrapper = styled(FlexBox)({ + margin: '.4em 0', +}); + const CommonFenceInputGroup: FC = ({ fenceId, + fenceParameterTooltipProps, fenceTemplate, previousFenceName, previousFenceParameters, @@ -103,41 +136,64 @@ const CommonFenceInputGroup: FC = ({ [ parameterId, { - content_type: contentType, + content_type: parameterType, default: parameterDefault, - deprecated: rawDeprecated, + deprecated: rawParameterDeprecated, + description: parameterDescription, options: parameterSelectOptions, - required: rawRequired, + required: rawParameterRequired, }, ], ) => { - const isParameterDeprecated = String(rawDeprecated) === '1'; + const isParameterDeprecated = + String(rawParameterDeprecated) === '1'; if (!isParameterDeprecated) { const { optional, required } = previous; const buildInput = - MAP_TO_INPUT_BUILDER[contentType] ?? + MAP_TO_INPUT_BUILDER[parameterType] ?? MAP_TO_INPUT_BUILDER.string; const fenceJoinParameterId = combineIds(fenceId, parameterId); const initialValue = mapToPreviousFenceParameterValues[fenceJoinParameterId] ?? parameterDefault; - const isParameterRequired = String(rawRequired) === '1'; + const isParameterRequired = + String(rawParameterRequired) === '1'; + const isParameterSensitive = /passw/i.test(parameterId); const parameterInput = buildInput({ id: fenceJoinParameterId, isChecked: CHECKED_STATES.includes(initialValue), isRequired: isParameterRequired, + isSensitive: isParameterSensitive, label: parameterId, selectOptions: parameterSelectOptions, value: initialValue, }); + const parameterInputWithTooltip = ( + {parameterDescription}} + {...fenceParameterTooltipProps} + > + {parameterInput} + + ); if (isParameterRequired) { - required.push(parameterInput); + required.push(parameterInputWithTooltip); } else { - optional.push(parameterInput); + optional.push(parameterInputWithTooltip); } } @@ -164,17 +220,23 @@ const CommonFenceInputGroup: FC = ({ }} > - {requiredInputs} + {requiredInputs} - {optionalInputs} + {optionalInputs} ); } return result; - }, [fenceId, fenceTemplate, previousFenceName, previousFenceParameters]); + }, [ + fenceId, + fenceParameterTooltipProps, + fenceTemplate, + previousFenceName, + previousFenceParameters, + ]); return <>{fenceParameterElements}; }; diff --git a/striker-ui/types/CommonFenceInputGroup.d.ts b/striker-ui/types/CommonFenceInputGroup.d.ts index fca8a606..4e1ca15d 100644 --- a/striker-ui/types/CommonFenceInputGroup.d.ts +++ b/striker-ui/types/CommonFenceInputGroup.d.ts @@ -1,12 +1,17 @@ -type FenceParameterInputBuilder = (args: { +type FenceParameterInputBuilderParameters = { id: string; isChecked?: boolean; isRequired?: boolean; + isSensitive?: boolean; label?: string; name?: string; selectOptions?: string[]; value?: string; -}) => ReactElement; +}; + +type FenceParameterInputBuilder = ( + args: FenceParameterInputBuilderParameters, +) => ReactElement; type MapToInputBuilder = Partial< Record, FenceParameterInputBuilder> @@ -17,6 +22,7 @@ type CommonFenceInputGroupOptionalProps = { fenceTemplate?: APIFenceTemplate; previousFenceName?: string; previousFenceParameters?: FenceParameters; + fenceParameterTooltipProps?: import('@mui/material').TooltipProps; }; type CommonFenceInputGroupProps = CommonFenceInputGroupOptionalProps;