only methods without arguments can be rendered

frontend/src/components/AsyncMethodComponent.tsx

@@ -1,19 +1,19 @@
 import React, { useEffect, useRef } from 'react';
 import { runMethod } from '../socket';
-import { InputGroup, Form, Button } from 'react-bootstrap';
+import { Form, Button, InputGroup } from 'react-bootstrap';
 import { DocStringComponent } from './DocStringComponent';
 import { LevelName } from './NotificationsComponent';
 
 type AsyncMethodProps = {
   name: string;
   parentPath: string;
-  parameters: Record<string, string>;
   value: Record<string, string>;
   docString?: string;
   hideOutput?: boolean;
   addNotification: (message: string, levelname?: LevelName) => void;
   displayName: string;
   id: string;
+  render: boolean;
 };
 
 export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => {
@@ -26,6 +26,12 @@ export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => {
     displayName,
     id
   } = props;
+
+  // Conditional rendering based on the 'render' prop.
+  if (!props.render) {
+    return null;
+  }
+
   const renderCount = useRef(0);
   const formRef = useRef(null);
   const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
@@ -66,50 +72,31 @@ export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => {
   const execute = async (event: React.FormEvent) => {
     event.preventDefault();
     let method_name: string;
-    const kwargs: Record<string, unknown> = {};
 
     if (runningTask !== undefined && runningTask !== null) {
       method_name = `stop_${name}`;
     } else {
-      Object.keys(props.parameters).forEach(
-        (name) => (kwargs[name] = event.target[name].value)
-      );
       method_name = `start_${name}`;
     }
 
-    runMethod(method_name, parentPath, kwargs);
+    runMethod(method_name, parentPath, {});
   };
 
-  const args = Object.entries(props.parameters).map(([name, type], index) => {
-    const form_name = `${name} (${type})`;
-    const value = runningTask && runningTask[name];
-    const isRunning = value !== undefined && value !== null;
-
-    return (
-      <InputGroup key={index}>
-        <InputGroup.Text className="component-label">{form_name}</InputGroup.Text>
-        <Form.Control
-          type="text"
-          name={name}
-          defaultValue={isRunning ? value : ''}
-          disabled={isRunning}
-        />
-      </InputGroup>
-    );
-  });
-
   return (
     <div className="component asyncMethodComponent" id={id}>
       {process.env.NODE_ENV === 'development' && (
         <div>Render count: {renderCount.current}</div>
       )}
-      <h5>Function: {displayName}</h5>
       <Form onSubmit={execute} ref={formRef}>
-        {args}
-        <Button id={`button-${id}`} type="submit">
-          {runningTask ? 'Stop ' : 'Start '}
-          <DocStringComponent docString={docString} />
-        </Button>
+        <InputGroup>
+          <InputGroup.Text>
+            {displayName}
+            <DocStringComponent docString={docString} />
+          </InputGroup.Text>
+          <Button id={`button-${id}`} type="submit">
+            {runningTask ? 'Stop ' : 'Start '}
+          </Button>
+        </InputGroup>
       </Form>
     </div>
   );