From 2ec8031e0e8d6253d59bb39448a38b69d9c25c79 Mon Sep 17 00:00:00 2001
From: Tsu-ba-me <ynho.li.aa.e@gmail.com>
Date: Wed, 28 Jun 2023 19:41:48 -0400
Subject: [PATCH] fix(striker-ui): correct nested appearance in FormSummary

---
 striker-ui/components/FormSummary.tsx         | 59 +++++++++++++------
 .../ManageManifest/ManageManifestPanel.tsx    |  2 +-
 .../components/ManageUps/ManageUpsPanel.tsx   |  2 +-
 .../StrikerConfig/ManageUsersForm.tsx         |  2 +-
 striker-ui/types/FormSummary.d.ts             | 40 ++++++++-----
 5 files changed, 69 insertions(+), 36 deletions(-)

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(
       <MUIListItem
         key={itemId}
-        sx={{ paddingLeft: `.${depth * 2}em` }}
-        {...getListItemProps?.call(null, itemKey, value, depth)}
+        sx={{ paddingLeft: `${depth}em` }}
+        {...getListItemProps?.call(null, { depth, entry: value, key: itemKey })}
       >
-        {renderEntry(itemKey, value, getEntryLabel, renderEntryValue)}
+        {renderEntry({
+          depth,
+          entry: value,
+          getLabel: getEntryLabel,
+          key: itemKey,
+          nest,
+          renderValue: renderEntryValue,
+        })}
       </MUIListItem>,
     );
 
@@ -73,8 +90,9 @@ const buildEntryList = ({
   return (
     <MUIList
       dense
+      disablePadding
       key={listId}
-      {...getListProps?.call(null, listKey, entries, depth)}
+      {...getListProps?.call(null, { depth, entries, key: listKey })}
     >
       {result}
     </MUIList>
@@ -83,26 +101,31 @@ const buildEntryList = ({
 
 const FormSummary = <T extends FormEntries>({
   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) => (
-    <FlexBox fullWidth growFirst row>
-      <BodyText>{getLabel(key, entry)}</BodyText>
-      {renderValue(key, entry)}
+  renderEntry = ({ depth, entry, getLabel, key, nest, renderValue }) => (
+    <FlexBox fullWidth growFirst row maxWidth="100%">
+      <BodyText>{getLabel({ cap: capEntryLabel, depth, entry, key })}</BodyText>
+      {!nest && renderValue({ depth, entry, key })}
     </FlexBox>
   ),
   // Prop(s) that rely on other(s).
-  renderEntryValue = hasPassword
-    ? renderEntryValueWithPassword
-    : (key, entry) => <MonoText>{String(entry)}</MonoText>,
+  renderEntryValue = (args) => {
+    const { entry } = args;
+
+    if (['', null, undefined].some((bad) => entry === bad)) {
+      return <BodyText>none</BodyText>;
+    }
+
+    return hasPassword ? (
+      renderEntryValueWithPassword(args)
+    ) : (
+      <MonoText>{String(entry)}</MonoText>
+    );
+  },
 }: FormSummaryProps<T>): ReturnType<FC<FormSummaryProps<T>>> =>
   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 }) => (
                 <BodyText>{manifestOverviews?.[key].manifestName}</BodyText>
               ),
             }),
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 }) => (
                 <BodyText>{upsOverviews?.[key].upsName}</BodyText>
               ),
             }),
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 }) => (
                     <BodyText>{users?.[key].userName}</BodyText>
                   ),
                 },
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 = {