input required handler

src/Pages/GroupTasks/GroupTasksViewModal.js

@@ -1,4 +1,15 @@
-import { Alert, Button, Modal, Popover, Result, Steps } from "antd";
+import {
+  Alert,
+  Button,
+  Form,
+  Input,
+  InputNumber,
+  Modal,
+  Popover,
+  Result,
+  Steps,
+  notification,
+} from "antd";
 import { useContext } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import {
@@ -12,6 +23,8 @@ import {
 export default function GroupTasksViewModal({ isOpen }) {
   const webSocketContext = useContext(WebSocketContext);
   const navigate = useNavigate();
+  const [notificationApi, notificationContextHolder] =
+    notification.useNotification();
   let { paramGroupTaskId } = useParams();
 
   const handleCancel = () => navigate(Constants.ROUTE_PATHS.GROUP_TASKS);
@@ -102,6 +115,27 @@ export default function GroupTasksViewModal({ isOpen }) {
     );
   };
 
+  const alertActionHandler = (status, taskStepId, index) => {
+    switch (status) {
+      case Constants.GROUP_TASKS_STATUS.FAILED:
+        return (
+          <Button
+            size="small"
+            danger
+            onClick={() =>
+              handleTaskFailedTryAgainRunTaskStep(taskStepId, index + 1)
+            }
+          >
+            Try again
+          </Button>
+        );
+      case Constants.GROUP_TASKS_STATUS.INPUT_REQUIRED:
+        return <Button size="small">Continue</Button>;
+      default:
+        return <></>;
+    }
+  };
+
   const stepsItemHandler = () => {
     let groupTaskSteps = [];
     let groupTasks = [];
@@ -157,28 +191,24 @@ export default function GroupTasksViewModal({ isOpen }) {
 
               <Alert
                 message={<b>{getAlertMessage(groupTaskSteps[index].Status)}</b>}
-                description={groupTaskSteps[index].Log}
-                type={getAlertType(groupTaskSteps[index].Status)}
-                showIcon
-                action={
+                description={
                   groupTaskSteps[index].Status ===
-                  Constants.GROUP_TASKS_STATUS.FAILED ? (
-                    <Button
-                      size="small"
-                      danger
-                      onClick={() =>
-                        handleTaskFailedTryAgainRunTaskStep(
-                          groupTaskSteps[index].Id,
-                          index + 1
-                        )
-                      }
-                    >
-                      Try again
-                    </Button>
+                  Constants.GROUP_TASKS_STATUS.INPUT_REQUIRED ? (
+                    <InputRequiredHandler
+                      groupTaskParameters={groupTask.parameters}
+                      notificationApi={notificationApi}
+                    />
                   ) : (
-                    <></>
+                    groupTaskSteps[index].Log
                   )
                 }
+                type={getAlertType(groupTaskSteps[index].Status)}
+                showIcon
+                action={alertActionHandler(
+                  groupTaskSteps[index].Status,
+                  groupTaskSteps[index].Id,
+                  index
+                )}
               />
             </>
           ) : (
@@ -197,6 +227,7 @@ export default function GroupTasksViewModal({ isOpen }) {
       onCancel={handleCancel}
       maskClosable={false}
     >
+      {notificationContextHolder}
       {webSocketContext.GroupTasks.map((groupTask) => {
         if (groupTask.Id === paramGroupTaskId) {
           let currentGroupTask = groupTask;
@@ -299,3 +330,50 @@ export default function GroupTasksViewModal({ isOpen }) {
     </Modal>
   );
 }
+
+function InputRequiredHandler({ groupTaskParameters, notificationApi }) {
+  console.log("groupTaskParameters", groupTaskParameters);
+
+  return (
+    <Form layout="vertical">
+      {groupTaskParameters.map((groupTaskParameter) => {
+        switch (groupTaskParameter.type) {
+          case "text":
+            return (
+              <Form.Item
+                key={"fitem-" + groupTaskParameter.parameterName}
+                label={groupTaskParameter.displayName}
+                required
+              >
+                <Input key={"input-" + groupTaskParameter.parameterName} />
+              </Form.Item>
+            );
+          case "number":
+            return (
+              <Form.Item
+                key={"fitem-" + groupTaskParameter.parameterName}
+                label={groupTaskParameter.displayName}
+                required
+              >
+                <InputNumber
+                  key={"fitem-" + groupTaskParameter.parameterName}
+                  style={{ width: "100%" }}
+                />
+              </Form.Item>
+            );
+          default:
+            notificationApi["error"]({
+              message: `Type ${groupTaskParameter.type} not implemented`,
+              description: `Was specified in: ${groupTaskParameter.displayName}`,
+            });
+            return (
+              <p>
+                Type ${groupTaskParameter.type} not implemented. Was specified
+                in: ${groupTaskParameter.displayName}
+              </p>
+            );
+        }
+      })}
+    </Form>
+  );
+}