stores enum value within component - now usable within method form

frontend/src/components/ColouredEnumComponent.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { InputGroup, Form, Row, Col } from 'react-bootstrap';
 import { DocStringComponent } from './DocStringComponent';
 import { LevelName } from './NotificationsComponent';
@@ -23,16 +23,27 @@ type ColouredEnumComponentProps = {
 
 export const ColouredEnumComponent = React.memo((props: ColouredEnumComponentProps) => {
   const {
+    name,
     value,
     docString,
     enumDict,
     readOnly,
     addNotification,
-    changeCallback = () => {},
     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('.');
@@ -42,6 +53,9 @@ export const ColouredEnumComponent = React.memo((props: ColouredEnumComponentPro
   });
 
   useEffect(() => {
+    setEnumValue(() => {
+      return props.value;
+    });
     addNotification(`${fullAccessPath} changed to ${value}.`);
   }, [props.value]);
 
@@ -59,16 +73,18 @@ export const ColouredEnumComponent = React.memo((props: ColouredEnumComponentPro
           {readOnly ? (
             // Display the Form.Control when readOnly is true
             <Form.Control
-              value={value}
+              value={enumValue}
+              name={name}
               disabled={true}
-              style={{ backgroundColor: enumDict[value] }}
+              style={{ backgroundColor: enumDict[enumValue] }}
             />
           ) : (
             // Display the Form.Select when readOnly is false
             <Form.Select
               aria-label="coloured-enum-select"
-              value={value}
+              value={enumValue}
-              style={{ backgroundColor: enumDict[value] }}
+              name={name}
+              style={{ backgroundColor: enumDict[enumValue] }}
               onChange={(event) => changeCallback(event.target.value)}>
               {Object.entries(enumDict).map(([key]) => (
                 <option key={key} value={key}>

frontend/src/components/EnumComponent.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { InputGroup, Form, Row, Col } from 'react-bootstrap';
 import { DocStringComponent } from './DocStringComponent';
 import { LevelName } from './NotificationsComponent';
@@ -8,6 +8,7 @@ type EnumComponentProps = {
   parentPath: string;
   value: string;
   docString?: string;
+  readOnly: boolean;
   enumDict: Record<string, string>;
   addNotification: (message: string, levelname?: LevelName) => void;
   changeCallback?: (
@@ -22,16 +23,27 @@ type EnumComponentProps = {
 
 export const EnumComponent = React.memo((props: EnumComponentProps) => {
   const {
+    name,
     value,
     docString,
     enumDict,
     addNotification,
-    changeCallback = () => {},
     displayName,
-    id
+    id,
+    readOnly
   } = 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('.');
@@ -55,16 +67,24 @@ export const EnumComponent = React.memo((props: EnumComponentProps) => {
             {displayName}
             <DocStringComponent docString={docString} />
           </InputGroup.Text>
-          <Form.Select
+
-            aria-label="Default select example"
+          {readOnly ? (
-            value={value}
+            // Display the Form.Control when readOnly is true
-            onChange={(event) => changeCallback(event.target.value)}>
+            <Form.Control value={enumValue} name={name} disabled={true} />
-            {Object.entries(enumDict).map(([key, val]) => (
+          ) : (
-              <option key={key} value={key}>
+            // Display the Form.Select when readOnly is false
-                {key} - {val}
+            <Form.Select
-              </option>
+              aria-label="example-select"
-            ))}
+              value={enumValue}
-          </Form.Select>
+              name={name}
+              onChange={(event) => changeCallback(event.target.value)}>
+              {Object.entries(enumDict).map(([key, val]) => (
+                <option key={key} value={key}>
+                  {key} - {val}
+                </option>
+              ))}
+            </Form.Select>
+          )}
         </Col>
       </Row>
     </div>