Show the Json schema property description field in frontend

SignalK · Nov 4, 2024 · 14e7615 · 14e7615
1 parent cb568a2
commit 14e7615
Show file tree

Hide file tree

Showing 3 changed files with 2,004 additions and 1,953 deletions.
diff --git a/frontend/src/components/Form.tsx b/frontend/src/components/Form.tsx
@@ -13,6 +13,7 @@ interface FormRadioInputProps {
   readOnly?: boolean;
   setValue: (value: string) => void;
   items: ItemsProps;
+  description?: string;
 }
 
 export function FormRadioInput(props: FormRadioInputProps): JSX.Element {
@@ -38,6 +39,9 @@ export function FormRadioInput(props: FormRadioInputProps): JSX.Element {
           </label>
         </div>
       ))}
+      {props.description && (
+        <div className="form-text">{props.description}</div>
+      )}
     </fieldset>
   );
 }
@@ -48,6 +52,7 @@ interface FormSelectInputProps {
   readOnly?: boolean;
   items: ItemsProps;
   setValue: (value: string) => void;
+  description?: string;
 }
 
 export function FormSelectInput(props: FormSelectInputProps): JSX.Element {
@@ -71,6 +76,9 @@ export function FormSelectInput(props: FormSelectInputProps): JSX.Element {
       <label className="form-label" htmlFor={id}>
         {props.label}
       </label>
+      {props.description && (
+        <div className="form-text">{props.description}</div>
+      )}
     </div>
   );
 }
@@ -81,6 +89,7 @@ interface FormCheckboxInputProps {
   checked: boolean;
   readOnly?: boolean;
   setValue: (value: JsonValue) => void;
+  description?: string;
 }
 
 export function FormCheckboxInput(props: FormCheckboxInputProps): JSX.Element {
@@ -100,6 +109,9 @@ export function FormCheckboxInput(props: FormCheckboxInputProps): JSX.Element {
       <label className="form-check-label" htmlFor={id}>
         {props.label}
       </label>
+      {props.description && (
+        <div className="form-text">{props.description}</div>
+      )}
     </div>
   );
 }
@@ -110,6 +122,7 @@ export interface FormTextAreaInputProps {
   value: string | null;
   setValue: (value: string | null) => void;
   readOnly?: boolean;
+  description?: string;
 }
 
 export function FormTextAreaInput(props: FormTextAreaInputProps): JSX.Element {
@@ -152,6 +165,9 @@ export function FormTextAreaInput(props: FormTextAreaInputProps): JSX.Element {
       <label className="form-label" htmlFor={id}>
         {props.label}
       </label>
+      {props.description && (
+        <div className="form-text">{props.description}</div>
+      )}
     </div>
   );
 }
@@ -161,6 +177,7 @@ interface FormTextInputProps {
   readOnly?: boolean;
   type?: string;
   value: JsonValue;
+  description?: string;
   disabled?: boolean;
   setValue: (value: JsonValue) => void;
 }
@@ -183,6 +200,9 @@ export function FormTextInput(props: FormTextInputProps): JSX.Element {
       <label className="form-label" htmlFor={id}>
         {props.label}
       </label>
+      {props.description && (
+        <div className="form-text">{props.description}</div>
+      )}
     </div>
   );
 }
@@ -194,6 +214,7 @@ interface FormNumberInputProps {
   disabled?: boolean;
   step?: number;
   setValue: (value: JsonValue) => void;
+  description?: string;
 }
 
 export function FormNumberInput(props: FormNumberInputProps): JSX.Element {
@@ -217,13 +238,17 @@ export function FormNumberInput(props: FormNumberInputProps): JSX.Element {
       <label className="form-label" htmlFor={id}>
         {props.label}
       </label>
+      {props.description && (
+        <div className="form-text">{props.description}</div>
+      )}
     </div>
   );
 }
 
 interface FormSelectProps {
   label: string;
   children: React.ReactNode;
+  description?: string;
 }
 
 export function FormSelect(props: FormSelectProps): JSX.Element {
@@ -233,8 +258,12 @@ export function FormSelect(props: FormSelectProps): JSX.Element {
       <label className="form-label" htmlFor={id}>
         {props.label}
       </label>
-      <select className="form-select" {...props} />
-      {props.children}
+      <select className="form-select" {...props}>
+        {props.children}
+      </select>
+      {props.description && (
+        <div className="form-text">{props.description}</div>
+      )}
     </div>
   );
 }
@@ -246,6 +275,7 @@ interface FormCheckProps {
   checked: boolean;
   label: string;
   handleValueChange: (value: string) => void;
+  description?: string;
 }
 
 export function FormCheck(props: FormCheckProps): JSX.Element {
@@ -255,19 +285,29 @@ export function FormCheck(props: FormCheckProps): JSX.Element {
       <label className="form-check-label" htmlFor={props.id}>
         {props.label}
       </label>
+      {props.description && (
+        <div className="form-text">{props.description}</div>
+      )}
     </div>
   );
 }
 
-export function FormSwitch(
-  props: JSX.IntrinsicAttributes & JSX.HTMLAttributes<HTMLInputElement>,
-): JSX.Element {
+interface FormSwitchProps {
+  id: string;
+  label: string;
+  description?: string;
+}
+
+export function FormSwitch(props: FormSwitchProps): JSX.Element {
   return (
     <div className="form-check form-switch mb-3">
       <input className="form-check-input" role="switch" {...props} />
       <label className="form-check-label" htmlFor={props.id}>
         {props.label}
       </label>
+      {props.description && (
+        <div className="form-text">{props.description}</div>
+      )}
     </div>
   );
 }
diff --git a/frontend/src/pages/Configuration/ConfigCard.tsx b/frontend/src/pages/Configuration/ConfigCard.tsx
@@ -32,6 +32,7 @@ interface EditControlProps {
     uniqueItems?: boolean;
     format?: string;
     items?: ItemsProps;
+    description?: string;
     displayMultiplier?: number;
     displayOffset?: number;
   };
@@ -60,6 +61,7 @@ export function EditControl({
           setValue={(value: string) => {
             setValue(value);
           }}
+          description={schema.description}
         />
       );
     case "number":
@@ -78,6 +80,7 @@ export function EditControl({
                 (schema.displayMultiplier ?? 1),
             );
           }}
+          description={schema.description}
         />
       );
     case "integer":
@@ -97,6 +100,7 @@ export function EditControl({
                 (schema.displayMultiplier ?? 1),
             );
           }}
+          description={schema.description}
         />
       );
       break;
@@ -112,6 +116,7 @@ export function EditControl({
           setValue={(checked: boolean) => {
             setValue(checked);
           }}
+          description={schema.description}
         />
       );
     case "array":
@@ -127,6 +132,7 @@ export function EditControl({
               setValue={(value: string) => {
                 setValue(value);
               }}
+              description={schema.description}
             />
           );
         } else if (schema.format === "select") {
@@ -140,6 +146,7 @@ export function EditControl({
               setValue={(value: string) => {
                 setValue(value);
               }}
+              description={schema.description}
             />
           );
         } else {
@@ -180,6 +187,7 @@ export function EditControl({
               }
             }}
             readOnly={schema.readOnly ?? false}
+            description={schema.description}
           />
         );
       }
@@ -198,6 +206,7 @@ export function EditControl({
           setValue={(value: string) => {
             setValue(value);
           }}
+          description={schema.description}
         />
       );
   }