stores enum value within component - now usable within method form

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"
-            value={value}
-            onChange={(event) => changeCallback(event.target.value)}>
-            {Object.entries(enumDict).map(([key, val]) => (
-              <option key={key} value={key}>
-                {key} - {val}
-              </option>
-            ))}
-          </Form.Select>
+
+          {readOnly ? (
+            // Display the Form.Control when readOnly is true
+            <Form.Control value={enumValue} name={name} disabled={true} />
+          ) : (
+            // Display the Form.Select when readOnly is false
+            <Form.Select
+              aria-label="example-select"
+              value={enumValue}
+              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>