frontend: updates EnumComponent

- replaces type with SerializedEnum from types.ts
- passing props instead of attribute directly

frontend/src/components/EnumComponent.tsx

@@ -2,52 +2,32 @@ import React, { useEffect } from "react";
 import { InputGroup, Form, Row, Col } from "react-bootstrap";
 import { DocStringComponent } from "./DocStringComponent";
 import { LevelName } from "./NotificationsComponent";
-import { SerializedObject } from "../types/SerializedObject";
+import { SerializedObject, SerializedEnum } from "../types/SerializedObject";
 import { useRenderCount } from "../hooks/useRenderCount";
 
-export interface EnumSerialization {
+interface EnumComponentProps extends SerializedEnum {
-  type: "Enum" | "ColouredEnum";
-  full_access_path: string;
-  name: string;
-  value: string;
-  readonly: boolean;
-  doc: string | null;
-  enum: Record<string, string>;
-}
-
-interface EnumComponentProps {
-  attribute: EnumSerialization;
   addNotification: (message: string, levelname?: LevelName) => void;
   displayName: string;
   id: string;
-  changeCallback?: (value: SerializedObject, callback?: (ack: unknown) => void) => void;
+  changeCallback: (value: SerializedObject, callback?: (ack: unknown) => void) => void;
 }
 
 export const EnumComponent = React.memo((props: EnumComponentProps) => {
-  const { attribute, addNotification, displayName, id } = props;
   const {
-    full_access_path: fullAccessPath,
+    addNotification,
+    displayName,
+    id,
     value,
-    doc: docString,
+    full_access_path: fullAccessPath,
     enum: enumDict,
+    doc: docString,
     readonly: readOnly,
-  } = attribute;
+    changeCallback,
+  } = props;
 
-  let { changeCallback } = props;
-  if (changeCallback === undefined) {
-    changeCallback = (value: SerializedObject) => {
-      setEnumValue(() => {
-        return String(value.value);
-      });
-    };
-  }
-  const [enumValue, setEnumValue] = useState(value);
   const renderCount = useRenderCount();
 
   useEffect(() => {
-    setEnumValue(() => {
-      return value;
-    });
     addNotification(`${fullAccessPath} changed to ${value}.`);
   }, [value]);
 
@@ -65,11 +45,9 @@ export const EnumComponent = React.memo((props: EnumComponentProps) => {
             // Display the Form.Control when readOnly is true
             <Form.Control
               style={
-                attribute.type == "ColouredEnum"
+                props.type == "ColouredEnum" ? { backgroundColor: enumDict[value] } : {}
-                  ? { backgroundColor: enumDict[enumValue] }
-                  : {}
               }
-              value={attribute.type == "ColouredEnum" ? enumValue : enumDict[enumValue]}
+              value={props.type == "ColouredEnum" ? value : enumDict[value]}
               name={fullAccessPath}
               disabled={true}
             />
@@ -77,27 +55,25 @@ export const EnumComponent = React.memo((props: EnumComponentProps) => {
             // Display the Form.Select when readOnly is false
             <Form.Select
               aria-label="example-select"
-              value={enumValue}
+              value={value}
               name={fullAccessPath}
               style={
-                attribute.type == "ColouredEnum"
+                props.type == "ColouredEnum" ? { backgroundColor: enumDict[value] } : {}
-                  ? { backgroundColor: enumDict[enumValue] }
-                  : {}
               }
               onChange={(event) =>
                 changeCallback({
-                  type: attribute.type,
+                  type: props.type,
-                  name: attribute.name,
+                  name: props.name,
                   enum: enumDict,
                   value: event.target.value,
                   full_access_path: fullAccessPath,
-                  readonly: attribute.readonly,
+                  readonly: props.readonly,
-                  doc: attribute.doc,
+                  doc: props.doc,
                 })
               }>
               {Object.entries(enumDict).map(([key, val]) => (
                 <option key={key} value={key}>
-                  {attribute.type == "ColouredEnum" ? key : val}
+                  {props.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, NumberObject } from "./NumberComponent";
 import { SliderComponent } from "./SliderComponent";
-import { EnumComponent, EnumSerialization } from "./EnumComponent";
+import { EnumComponent } from "./EnumComponent";
 import { MethodComponent } from "./MethodComponent";
 import { AsyncMethodComponent } from "./AsyncMethodComponent";
 import { StringComponent } from "./StringComponent";
@@ -16,7 +16,7 @@ import { WebSettingsContext } from "../WebSettings";
 import { updateValue } from "../socket";
 import { DictComponent } from "./DictComponent";
 import { parseFullAccessPath } from "../utils/stateUtils";
-import { SerializedObject } from "../types/SerializedObject";
+import { SerializedEnum, SerializedObject } from "../types/SerializedObject";
 
 interface GenericComponentProps {
   attribute: SerializedObject;
@@ -136,7 +136,7 @@ export const GenericComponent = React.memo(
     } else if (attribute.type === "Enum" || attribute.type === "ColouredEnum") {
       return (
         <EnumComponent
-          attribute={attribute as EnumSerialization}
+          {...(attribute as SerializedEnum)}
           addNotification={addNotification}
           changeCallback={changeCallback}
           displayName={displayName}

frontend/src/types/SerializedObject.ts

@@ -36,11 +36,11 @@ type SerializedString = SerializedObjectBase & {
   type: "str";
 };
 
-type SerializedEnum = SerializedObjectBase & {
+export type SerializedEnum = SerializedObjectBase & {
   name: string;
   value: string;
   type: "Enum" | "ColouredEnum";
-  enum: Record<string, unknown>;
+  enum: Record<string, string>;
 };
 
 type SerializedList = SerializedObjectBase & {