Adding workflows Resource component to the epsic part of imaginghub

frontend/ePSIC/src/App.tsx

@@ -1,9 +1,11 @@
 import { WorkflowForm } from "./components/workflows/WorkflowForm";
+import { ResourceForm } from "../../shared_components/ResourceForm";
 
 export const App: React.FC = () => {
   return (
     <>
       <WorkflowForm />
+      <ResourceForm />
     </>
   );
 };

frontend/shared_components/ResourceForm.tsx

@@ -0,0 +1,81 @@
+import { FC, ChangeEvent, useState } from "react";
+import { InputLabel, Grid, Stack, TextField } from "@mui/material";
+
+type FormRes = { cpus: string; gpus: string; nprocs: string; memory: string };
+
+const initialData: FormRes = {
+  cpus: "1",
+  gpus: "0",
+  nprocs: "8",
+  memory: "16Gi",
+};
+
+export const ResourceForm: FC = () => {
+  const [res, setRes] = useState<FormRes>(initialData);
+
+  return (
+    <Grid container justifyContent="start" spacing={1}>
+      <Grid size={8}>
+        <Stack direction="column" spacing={2}>
+          <InputLabel size="small" id="workflow-select-label">
+            Resources
+          </InputLabel>
+          <TextField
+            name="cpus"
+            label="cpus"
+            variant="outlined"
+            size="small"
+            placeholder="8"
+            type="number"
+            value={res.cpus}
+            onChange={(e: ChangeEvent<HTMLInputElement>) => {
+              const value = e.target.value;
+              setRes((prev) => ({ ...prev, cpus: value }));
+            }}
+          />
+          <TextField
+            name="gpus"
+            label="gpus"
+            variant="outlined"
+            size="small"
+            placeholder="1"
+            type="number"
+            value={res.gpus}
+            onChange={(e: ChangeEvent<HTMLInputElement>) => {
+              const value = e.target.value;
+              setRes((prev) => ({ ...prev, gpus: value }));
+            }}
+          />
+          <TextField
+            name="nprocs"
+            label="number of processes"
+            variant="outlined"
+            size="small"
+            placeholder="8"
+            type="number"
+            value={res.nprocs}
+            onChange={(e: ChangeEvent<HTMLInputElement>) => {
+              const value = e.target.value;
+              setRes((prev) => ({ ...prev, nprocs: value }));
+            }}
+          />
+          <TextField
+            name="memory"
+            label="memory"
+            variant="outlined"
+            size="small"
+            placeholder="16Gi"
+            type="text"
+            value={res.memory}
+            onChange={(e: ChangeEvent<HTMLInputElement>) => {
+              const value = e.target.value;
+              setRes((prev) => ({ ...prev, memory: value }));
+            }}
+          />
+        </Stack>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default ResourceForm;