From 58fb21e09194e9a045823381f9b7851c55317f4a Mon Sep 17 00:00:00 2001
From: Yoichiro <yoichiro@eisbahn.jp>
Date: Fri, 24 Nov 2023 20:00:30 +0900
Subject: [PATCH] Add a new property `comment` to describe each parameter.

---
 .../keyboard/build/BuildParametersDialog.tsx  | 48 ++++++++++++-------
 src/components/documents/build/Build.tsx      |  7 ++-
 src/services/build/FirmwareCodeParser.test.ts | 40 ++++++++++++++++
 src/services/build/FirmwareCodeParser.ts      |  2 +
 src/store/state.ts                            |  1 +
 5 files changed, 79 insertions(+), 19 deletions(-)

diff --git a/src/components/catalog/keyboard/build/BuildParametersDialog.tsx b/src/components/catalog/keyboard/build/BuildParametersDialog.tsx
index 9bbf8710..b5f03fc2 100644
--- a/src/components/catalog/keyboard/build/BuildParametersDialog.tsx
+++ b/src/components/catalog/keyboard/build/BuildParametersDialog.tsx
@@ -330,26 +330,37 @@ function ParameterEditors(props: ParameterEditorProps) {
                       event.target.value
                     );
                   }}
+                  helperText={parameter.definition.comment}
                 />
               ) : parameter.definition.type === 'select' ? (
-                <Select
-                  fullWidth
-                  size="small"
-                  value={parameter.value}
-                  onChange={(event) => {
-                    props.onChangeParameterValue(
-                      props.selectedFirmwareFile,
-                      parameter.definition,
-                      event.target.value
-                    );
-                  }}
-                >
-                  {parameter.definition.options.map((option) => (
-                    <MenuItem value={option} key={`parameter-option-${option}`}>
-                      {option}
-                    </MenuItem>
-                  ))}
-                </Select>
+                <div>
+                  <Select
+                    fullWidth
+                    size="small"
+                    value={parameter.value}
+                    onChange={(event) => {
+                      props.onChangeParameterValue(
+                        props.selectedFirmwareFile,
+                        parameter.definition,
+                        event.target.value
+                      );
+                    }}
+                  >
+                    {parameter.definition.options.map((option) => (
+                      <MenuItem
+                        value={option}
+                        key={`parameter-option-${option}`}
+                      >
+                        {option}
+                      </MenuItem>
+                    ))}
+                  </Select>
+                  {parameter.definition.comment && (
+                    <Typography variant="caption">
+                      {parameter.definition.comment}
+                    </Typography>
+                  )}
+                </div>
               ) : parameter.definition.type === 'number' ? (
                 <TextField
                   fullWidth
@@ -364,6 +375,7 @@ function ParameterEditors(props: ParameterEditorProps) {
                       event.target.value
                     );
                   }}
+                  helperText={parameter.definition.comment}
                 />
               ) : null}
             </Grid>
diff --git a/src/components/documents/build/Build.tsx b/src/components/documents/build/Build.tsx
index 74811e3e..6842dccf 100644
--- a/src/components/documents/build/Build.tsx
+++ b/src/components/documents/build/Build.tsx
@@ -96,7 +96,8 @@ export default function Build() {
             sx={{ mt: 2, ml: 2, fontFamily: 'monospace' }}
           >
             &lt;remap name=&quot;NAME&quot; type=&quot;TYPE&quot;
-            default=&quot;DEFAULT&quot; options=&quot;OPTIONS&quot; /&gt;
+            default=&quot;DEFAULT&quot; options=&quot;OPTIONS&quot;
+            comment=&quot;COMMENT&quot; /&gt;
           </Typography>
         </Paper>
         <Typography variant="body1" gutterBottom={true}>
@@ -121,6 +122,10 @@ export default function Build() {
               is &quot;select&quot;. The options are written with the
               &apos;,&apos; character as a delimiter.
             </li>
+            <li>
+              comment - The comment of the parameter. This is displayed under
+              each UI to describe the parameter. It is optional.
+            </li>
           </ul>
         </Typography>
         <Typography variant="body1" gutterBottom={true}>
diff --git a/src/services/build/FirmwareCodeParser.test.ts b/src/services/build/FirmwareCodeParser.test.ts
index 844b4a7e..b2b899e8 100644
--- a/src/services/build/FirmwareCodeParser.test.ts
+++ b/src/services/build/FirmwareCodeParser.test.ts
@@ -96,5 +96,45 @@ describe('FirmwareCodeParser', () => {
         },
       ]);
     });
+
+    test('should extract parameters from source with comment', () => {
+      const source = `
+        <remap name="foo" type="select" default="baz" options="bar,baz" comment="comment1" />
+        <remap name="bar" type="text" default="john" comment="comment2" />
+        <remap name="baz" type="number" default="20" comment="comment3 foobar" />
+      `;
+
+      const parameters = extractBuildableFirmwareCodeParameters(source);
+
+      expect(parameters).toEqual([
+        {
+          name: 'foo',
+          type: 'select',
+          options: ['bar', 'baz'],
+          default: 'baz',
+          comment: 'comment1',
+          startPosition: 9,
+          endPosition: 94,
+        },
+        {
+          name: 'bar',
+          type: 'text',
+          options: [],
+          default: 'john',
+          comment: 'comment2',
+          startPosition: 103,
+          endPosition: 169,
+        },
+        {
+          name: 'baz',
+          type: 'number',
+          options: [],
+          default: '20',
+          comment: 'comment3 foobar',
+          startPosition: 178,
+          endPosition: 251,
+        },
+      ]);
+    });
   });
 });
diff --git a/src/services/build/FirmwareCodeParser.ts b/src/services/build/FirmwareCodeParser.ts
index 6231de05..5d884afa 100644
--- a/src/services/build/FirmwareCodeParser.ts
+++ b/src/services/build/FirmwareCodeParser.ts
@@ -34,6 +34,7 @@ export const extractBuildableFirmwareCodeParameters = (
     const type = extractAttribute(tagContent, 'type');
     const options = extractAttribute(tagContent, 'options');
     const defaultValue = extractAttribute(tagContent, 'default');
+    const comment = extractAttribute(tagContent, 'comment');
 
     if (
       !name ||
@@ -49,6 +50,7 @@ export const extractBuildableFirmwareCodeParameters = (
       name,
       type: type as 'select' | 'text' | 'number',
       default: defaultValue,
+      comment,
       options: [],
       startPosition,
       endPosition,
diff --git a/src/store/state.ts b/src/store/state.ts
index ddffd76e..2a30128d 100644
--- a/src/store/state.ts
+++ b/src/store/state.ts
@@ -208,6 +208,7 @@ export type IBuildableFirmwareCodeParameter = {
   type: IBuildableFirmwareCodeParameterType;
   options: string[];
   default: string;
+  comment: string | undefined;
   startPosition: number;
   endPosition: number;
 };