diff --git a/striker-ui/components/FormSummary.tsx b/striker-ui/components/FormSummary.tsx index 9065faa7..c7c752ec 100644 --- a/striker-ui/components/FormSummary.tsx +++ b/striker-ui/components/FormSummary.tsx @@ -8,7 +8,17 @@ import { FC, ReactElement, createElement } from 'react'; import FlexBox from './FlexBox'; import { BodyText, MonoText, SensitiveText } from './Text'; -const renderEntryValueWithPassword: RenderFormValueFunction = (key, entry) => { +const capEntryLabel: CapFormEntryLabel = (value) => { + const spaced = value.replace(/([a-z\d])([A-Z])/g, '$1 $2'); + const lcased = spaced.toLowerCase(); + + return capitalize(lcased); +}; + +const renderEntryValueWithPassword: RenderFormValueFunction = ({ + entry, + key, +}) => { const textElement = /passw/i.test(key) ? SensitiveText : MonoText; return createElement(textElement, { monospaced: true }, String(entry)); @@ -46,10 +56,17 @@ const buildEntryList = ({ result.push( - {renderEntry(itemKey, value, getEntryLabel, renderEntryValue)} + {renderEntry({ + depth, + entry: value, + getLabel: getEntryLabel, + key: itemKey, + nest, + renderValue: renderEntryValue, + })} , ); @@ -73,8 +90,9 @@ const buildEntryList = ({ return ( {result} @@ -83,26 +101,31 @@ const buildEntryList = ({ const FormSummary = ({ entries, - getEntryLabel = (key) => { - const spaced = key.replace(/([a-z\d])([A-Z])/g, '$1 $2'); - const lcased = spaced.toLowerCase(); - - return capitalize(lcased); - }, + getEntryLabel = ({ cap, key }) => cap(key), getListProps, getListItemProps, hasPassword, maxDepth = 3, - renderEntry = (key, entry, getLabel, renderValue) => ( - - {getLabel(key, entry)} - {renderValue(key, entry)} + renderEntry = ({ depth, entry, getLabel, key, nest, renderValue }) => ( + + {getLabel({ cap: capEntryLabel, depth, entry, key })} + {!nest && renderValue({ depth, entry, key })} ), // Prop(s) that rely on other(s). - renderEntryValue = hasPassword - ? renderEntryValueWithPassword - : (key, entry) => {String(entry)}, + renderEntryValue = (args) => { + const { entry } = args; + + if (['', null, undefined].some((bad) => entry === bad)) { + return none; + } + + return hasPassword ? ( + renderEntryValueWithPassword(args) + ) : ( + {String(entry)} + ); + }, }: FormSummaryProps): ReturnType>> => buildEntryList({ entries, diff --git a/striker-ui/components/ManageManifest/ManageManifestPanel.tsx b/striker-ui/components/ManageManifest/ManageManifestPanel.tsx index bec9ef01..ed78feef 100644 --- a/striker-ui/components/ManageManifest/ManageManifestPanel.tsx +++ b/striker-ui/components/ManageManifest/ManageManifestPanel.tsx @@ -463,7 +463,7 @@ const ManageManifestPanel: FC = () => { }); }, getConfirmDialogTitle: (count) => `Delete ${count} manifest(s)?`, - renderEntry: (key) => ( + renderEntry: ({ key }) => ( {manifestOverviews?.[key].manifestName} ), }), diff --git a/striker-ui/components/ManageUps/ManageUpsPanel.tsx b/striker-ui/components/ManageUps/ManageUpsPanel.tsx index dde71919..956274e5 100644 --- a/striker-ui/components/ManageUps/ManageUpsPanel.tsx +++ b/striker-ui/components/ManageUps/ManageUpsPanel.tsx @@ -277,7 +277,7 @@ const ManageUpsPanel: FC = () => { url: '/ups', }); }, - renderEntry: (key) => ( + renderEntry: ({ key }) => ( {upsOverviews?.[key].upsName} ), }), diff --git a/striker-ui/components/StrikerConfig/ManageUsersForm.tsx b/striker-ui/components/StrikerConfig/ManageUsersForm.tsx index 22ef89b9..1587fdd3 100644 --- a/striker-ui/components/StrikerConfig/ManageUsersForm.tsx +++ b/striker-ui/components/StrikerConfig/ManageUsersForm.tsx @@ -204,7 +204,7 @@ const ManageUsersForm: FC = () => { }, }, formSummaryProps: { - renderEntry: (key) => ( + renderEntry: ({ key }) => ( {users?.[key].userName} ), }, diff --git a/striker-ui/types/FormSummary.d.ts b/striker-ui/types/FormSummary.d.ts index 6b6217a7..72f44bde 100644 --- a/striker-ui/types/FormSummary.d.ts +++ b/striker-ui/types/FormSummary.d.ts @@ -4,30 +4,40 @@ type FormEntries = { [key: string]: FormEntries | FormEntry; }; -type GetFormEntryLabelFunction = (key: string, entry: FormEntry) => string; +type CommonFormEntryHandlerArgs = { + depth: number; + entry: FormEntry; + key: string; +}; + +type CapFormEntryLabel = (value: string) => string; + +type GetFormEntryLabelFunction = ( + args: CommonFormEntryHandlerArgs & { + cap: CapFormEntryLabel; + }, +) => string; type GetFormEntryPropsFunction = ( - key: string, - entry: FormEntry, - depth: number, + args: CommonFormEntryHandlerArgs, ) => import('@mui/material').ListItemProps; -type GetFormEntriesPropsFunction = ( - key: string | undefined, - entries: FormEntries, - depth: number, -) => import('@mui/material').ListProps; +type GetFormEntriesPropsFunction = (args: { + depth: number; + entries: FormEntries; + key?: string; +}) => import('@mui/material').ListProps; type RenderFormValueFunction = ( - key: string, - entry: FormEntry, + args: CommonFormEntryHandlerArgs, ) => import('react').ReactElement; type RenderFormEntryFunction = ( - key: string, - entry: FormEntry, - getLabel: GetFormEntryLabelFunction, - renderValue: RenderFormValueFunction, + args: CommonFormEntryHandlerArgs & { + getLabel: GetFormEntryLabelFunction; + nest: boolean; + renderValue: RenderFormValueFunction; + }, ) => import('react').ReactElement; type FormSummaryOptionalProps = {