From decdc21c96ad170f32609a009ec90593e93b9229 Mon Sep 17 00:00:00 2001
From: Tsu-ba-me <ynho.li.aa.e@gmail.com>
Date: Tue, 21 Feb 2023 22:22:01 -0500
Subject: [PATCH] fix(striker-ui): add name to fence parameter fields

---
 .../components/CommonFenceInputGroup.tsx      | 37 ++++++++++++++++---
 striker-ui/types/CommonFenceInputGroup.d.ts   |  1 +
 2 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/striker-ui/components/CommonFenceInputGroup.tsx b/striker-ui/components/CommonFenceInputGroup.tsx
index 582ceacf..b1fb333d 100644
--- a/striker-ui/components/CommonFenceInputGroup.tsx
+++ b/striker-ui/components/CommonFenceInputGroup.tsx
@@ -8,22 +8,38 @@ import SelectWithLabel from './SelectWithLabel';
 import SwitchWithLabel from './SwitchWithLabel';
 
 const CHECKED_STATES: Array<string | undefined> = ['1', 'on'];
+const ID_SEPARATOR = '-';
 
 const MAP_TO_INPUT_BUILDER: MapToInputBuilder = {
-  boolean: ({ id, isChecked = false, label }) => (
+  boolean: ({ id, isChecked = false, label, name = id }) => (
     <InputWithRef
       key={`${id}-wrapper`}
-      input={<SwitchWithLabel id={id} label={label} checked={isChecked} />}
+      input={
+        <SwitchWithLabel
+          checked={isChecked}
+          id={id}
+          label={label}
+          name={name}
+        />
+      }
       valueType="boolean"
     />
   ),
-  select: ({ id, isRequired, label, selectOptions = [], value = '' }) => (
+  select: ({
+    id,
+    isRequired,
+    label,
+    name = id,
+    selectOptions = [],
+    value = '',
+  }) => (
     <InputWithRef
       key={`${id}-wrapper`}
       input={
         <SelectWithLabel
           id={id}
           label={label}
+          name={name}
           selectItems={selectOptions}
           value={value}
         />
@@ -31,16 +47,23 @@ const MAP_TO_INPUT_BUILDER: MapToInputBuilder = {
       required={isRequired}
     />
   ),
-  string: ({ id, isRequired, label = '', value }) => (
+  string: ({ id, isRequired, label = '', name = id, value }) => (
     <InputWithRef
       key={`${id}-wrapper`}
-      input={<OutlinedInputWithLabel id={id} label={label} value={value} />}
+      input={
+        <OutlinedInputWithLabel
+          id={id}
+          label={label}
+          name={name}
+          value={value}
+        />
+      }
       required={isRequired}
     />
   ),
 };
 
-const combineIds = (...pieces: string[]) => pieces.join('-');
+const combineIds = (...pieces: string[]) => pieces.join(ID_SEPARATOR);
 
 const CommonFenceInputGroup: FC<CommonFenceInputGroupProps> = ({
   fenceId,
@@ -156,4 +179,6 @@ const CommonFenceInputGroup: FC<CommonFenceInputGroupProps> = ({
   return <>{fenceParameterElements}</>;
 };
 
+export { ID_SEPARATOR };
+
 export default CommonFenceInputGroup;
diff --git a/striker-ui/types/CommonFenceInputGroup.d.ts b/striker-ui/types/CommonFenceInputGroup.d.ts
index b4709f90..fca8a606 100644
--- a/striker-ui/types/CommonFenceInputGroup.d.ts
+++ b/striker-ui/types/CommonFenceInputGroup.d.ts
@@ -3,6 +3,7 @@ type FenceParameterInputBuilder = (args: {
   isChecked?: boolean;
   isRequired?: boolean;
   label?: string;
+  name?: string;
   selectOptions?: string[];
   value?: string;
 }) => ReactElement;