restructuring EnumComponent (now for both Enum and ColouredEnum)

frontend/src/components/ColouredEnumComponent.tsx

@@ -1,100 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { InputGroup, Form, Row, Col } from 'react-bootstrap';
-import { DocStringComponent } from './DocStringComponent';
-import { LevelName } from './NotificationsComponent';
-
-type ColouredEnumComponentProps = {
-  name: string;
-  parentPath: string;
-  value: string;
-  docString?: string;
-  readOnly: boolean;
-  enumDict: Record<string, string>;
-  addNotification: (message: string, levelname?: LevelName) => void;
-  changeCallback?: (
-    value: unknown,
-    attributeName?: string,
-    prefix?: string,
-    callback?: (ack: unknown) => void
-  ) => void;
-  displayName: string;
-  id: string;
-};
-
-export const ColouredEnumComponent = React.memo((props: ColouredEnumComponentProps) => {
-  const {
-    name,
-    value,
-    docString,
-    enumDict,
-    readOnly,
-    addNotification,
-    displayName,
-    id
-  } = props;
-  let { changeCallback } = props;
-  if (changeCallback === undefined) {
-    changeCallback = (value: string) => {
-      setEnumValue(() => {
-        return value;
-      });
-    };
-  }
-
-  const renderCount = useRef(0);
-  const [enumValue, setEnumValue] = useState(value);
-
-  const fullAccessPath = [props.parentPath, props.name]
-    .filter((element) => element)
-    .join('.');
-
-  useEffect(() => {
-    renderCount.current++;
-  });
-
-  useEffect(() => {
-    setEnumValue(() => {
-      return props.value;
-    });
-    addNotification(`${fullAccessPath} changed to ${value}.`);
-  }, [props.value]);
-
-  return (
-    <div className={'component enumComponent'} id={id}>
-      {process.env.NODE_ENV === 'development' && (
-        <div>Render count: {renderCount.current}</div>
-      )}
-      <Row>
-        <Col className="d-flex align-items-center">
-          <InputGroup.Text>
-            {displayName}
-            <DocStringComponent docString={docString} />
-          </InputGroup.Text>
-          {readOnly ? (
-            // Display the Form.Control when readOnly is true
-            <Form.Control
-              value={enumValue}
-              name={name}
-              disabled={true}
-              style={{ backgroundColor: enumDict[enumValue] }}
-            />
-          ) : (
-            // Display the Form.Select when readOnly is false
-            <Form.Select
-              aria-label="coloured-enum-select"
-              value={enumValue}
-              name={name}
-              style={{ backgroundColor: enumDict[enumValue] }}
-              onChange={(event) => changeCallback(event.target.value)}>
-              {Object.entries(enumDict).map(([key]) => (
-                <option key={key} value={key}>
-                  {key}
-                </option>
-              ))}
-            </Form.Select>
-          )}
-        </Col>
-      </Row>
-    </div>
-  );
-});

frontend/src/components/EnumComponent.tsx

@@ -1,63 +1,58 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { InputGroup, Form, Row, Col } from 'react-bootstrap';
 import { DocStringComponent } from './DocStringComponent';
+import { SerializedValue } from './GenericComponent';
 import { LevelName } from './NotificationsComponent';
 
-type EnumComponentProps = {
+export type EnumSerialization = {
+  type: 'Enum' | 'ColouredEnum';
+  full_access_path: string;
   name: string;
-  parentPath: string;
   value: string;
-  docString?: string;
+  readonly: boolean;
-  readOnly: boolean;
+  doc?: string | null;
-  enumDict: Record<string, string>;
+  enum: Record<string, string>;
+};
+
+type EnumComponentProps = {
+  attribute: EnumSerialization;
   addNotification: (message: string, levelname?: LevelName) => void;
-  changeCallback?: (
-    value: unknown,
-    attributeName?: string,
-    prefix?: string,
-    callback?: (ack: unknown) => void
-  ) => void;
   displayName: string;
   id: string;
+  changeCallback?: (value: SerializedValue, callback?: (ack: unknown) => void) => void;
 };
 
 export const EnumComponent = React.memo((props: EnumComponentProps) => {
+  const { attribute, addNotification, displayName, id } = props;
   const {
-    name,
+    full_access_path: fullAccessPath,
     value,
-    docString,
+    doc: docString,
-    enumDict,
+    enum: enumDict,
-    addNotification,
+    readonly: readOnly
-    displayName,
+  } = attribute;
-    id,
-    readOnly
-  } = props;
 
   let { changeCallback } = props;
   if (changeCallback === undefined) {
-    changeCallback = (value: string) => {
+    changeCallback = (value: SerializedValue) => {
       setEnumValue(() => {
-        return value;
+        return String(value.value);
       });
     };
   }
   const renderCount = useRef(0);
   const [enumValue, setEnumValue] = useState(value);
 
-  const fullAccessPath = [props.parentPath, props.name]
-    .filter((element) => element)
-    .join('.');
-
   useEffect(() => {
     renderCount.current++;
   });
 
   useEffect(() => {
     setEnumValue(() => {
-      return props.value;
+      return value;
     });
     addNotification(`${fullAccessPath} changed to ${value}.`);
-  }, [props.value]);
+  }, [value]);
 
   return (
     <div className={'component enumComponent'} id={id}>
@@ -73,17 +68,35 @@ export const EnumComponent = React.memo((props: EnumComponentProps) => {
 
           {readOnly ? (
             // Display the Form.Control when readOnly is true
-            <Form.Control value={enumDict[enumValue]} name={name} disabled={true} />
+            <Form.Control
+              value={enumDict[enumValue]}
+              name={fullAccessPath}
+              disabled={true}
+            />
           ) : (
             // Display the Form.Select when readOnly is false
             <Form.Select
               aria-label="example-select"
               value={enumValue}
-              name={name}
+              name={fullAccessPath}
-              onChange={(event) => changeCallback(event.target.value)}>
+              style={
+                attribute.type == 'ColouredEnum'
+                  ? { backgroundColor: enumDict[enumValue] }
+                  : {}
+              }
+              onChange={(event) =>
+                changeCallback({
+                  type: attribute.type,
+                  name: attribute.name,
+                  enum: enumDict,
+                  value: event.target.value,
+                  full_access_path: fullAccessPath,
+                  readonly: true
+                })
+              }>
               {Object.entries(enumDict).map(([key, val]) => (
                 <option key={key} value={key}>
-                  {val}
+                  {attribute.type == 'ColouredEnum' ? key : val}
                 </option>
               ))}
             </Form.Select>

frontend/src/components/GenericComponent.tsx

@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import { ButtonComponent } from './ButtonComponent';
 import { NumberComponent } from './NumberComponent';
 import { SliderComponent } from './SliderComponent';
-import { EnumComponent } from './EnumComponent';
+import { EnumComponent, EnumSerialization } from './EnumComponent';
 import { MethodComponent } from './MethodComponent';
 import { AsyncMethodComponent } from './AsyncMethodComponent';
 import { StringComponent } from './StringComponent';
@@ -10,7 +10,6 @@ import { ListComponent } from './ListComponent';
 import { DataServiceComponent, DataServiceJSON } from './DataServiceComponent';
 import { DeviceConnectionComponent } from './DeviceConnection';
 import { ImageComponent } from './ImageComponent';
-import { ColouredEnumComponent } from './ColouredEnumComponent';
 import { LevelName } from './NotificationsComponent';
 import { getIdFromFullAccessPath } from '../utils/stringUtils';
 import { WebSettingsContext } from '../WebSettings';
@@ -133,14 +132,10 @@ export const GenericComponent = React.memo(
           id={id}
         />
       );
-    } else if (attribute.type === 'Enum') {
+    } else if (attribute.type === 'Enum' || attribute.type === 'ColouredEnum') {
       return (
         <EnumComponent
-          fullAccessPath={fullAccessPath}
+          attribute={attribute as EnumSerialization}
-          docString={attribute.doc}
-          value={String(attribute.value)}
-          readOnly={attribute.readonly}
-          enumDict={attribute.enum}
           addNotification={addNotification}
           changeCallback={changeCallback}
           displayName={displayName}
@@ -230,16 +225,6 @@ export const GenericComponent = React.memo(
           format={attribute.value['format']['value'] as string}
         />
       );
-    } else if (attribute.type === 'ColouredEnum') {
-      return (
-        <ColouredEnumComponent
-          attribute={attribute}
-          addNotification={addNotification}
-          displayName={displayName}
-          id={id}
-          changeCallback={changeCallback}
-        />
-      );
     } else {
       return <div key={fullAccessPath}>{fullAccessPath}</div>;
     }