moves displayName and id to GenericComponent and pass them as props

frontend/src/components/StringComponent.tsx

@@ -1,10 +1,8 @@
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Form, InputGroup } from 'react-bootstrap';
 import { DocStringComponent } from './DocStringComponent';
 import '../App.css';
-import { getIdFromFullAccessPath } from '../utils/stringUtils';
 import { LevelName } from './NotificationsComponent';
-import { WebSettingsContext } from '../WebSettings';
 
 // TODO: add button functionality
 
@@ -22,29 +20,26 @@ type StringComponentProps = {
     prefix?: string,
     callback?: (ack: unknown) => void
   ) => void;
+  displayName: string;
+  id: string;
 };
 
 export const StringComponent = React.memo((props: StringComponentProps) => {
   const {
-    name,
-    parentPath,
     readOnly,
     docString,
     isInstantUpdate,
     addNotification,
-    changeCallback = () => {}
+    changeCallback = () => {},
+    displayName,
+    id
   } = props;
 
   const renderCount = useRef(0);
   const [inputString, setInputString] = useState(props.value);
-  const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
-  const id = getIdFromFullAccessPath(fullAccessPath);
-  const webSettings = useContext(WebSettingsContext);
-  let displayName = name;
-
-  if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) {
-    displayName = webSettings[fullAccessPath].displayName;
-  }
+  const fullAccessPath = [props.parentPath, props.name]
+    .filter((element) => element)
+    .join('.');
 
   useEffect(() => {
     renderCount.current++;
@@ -55,7 +50,7 @@ export const StringComponent = React.memo((props: StringComponentProps) => {
     if (props.value !== inputString) {
       setInputString(props.value);
     }
-    addNotification(`${parentPath}.${name} changed to ${props.value}.`);
+    addNotification(`${fullAccessPath} changed to ${props.value}.`);
   }, [props.value]);
 
   const handleChange = (event) => {
@@ -91,7 +86,6 @@ export const StringComponent = React.memo((props: StringComponentProps) => {
           type="text"
           value={inputString}
           disabled={readOnly}
-          name={name}
           onChange={handleChange}
           onKeyDown={handleKeyDown}
           onBlur={handleBlur}