added popover for details and global inputs

src/Pages/GroupTasks/GroupTasksTableList.js

@@ -87,7 +87,7 @@ export default function GroupTaskTableList({
           endedAt:
             groupTask.EndedAt !== "0001-01-01T00:00:00Z"
               ? FormatDatetime(groupTask.EndedAt)
-              : "-/-",
+              : Constants.TEXT_EMPTY_PLACEHOLDER,
         });
       }
     });

src/Pages/GroupTasks/GroupTasksViewModal.js

@@ -1,4 +1,4 @@
-import { Alert, Button, Input, Modal, Result, Steps } from "antd";
+import { Alert, Button, Modal, Popover, Result, Steps } from "antd";
 import { useContext } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import {
@@ -145,11 +145,9 @@ export default function GroupTasksViewModal({ isOpen }) {
                 <b>Ended at:</b>{" "}
                 {groupTaskSteps[index].EndedAt !== "0001-01-01T00:00:00Z"
                   ? FormatDatetime(groupTaskSteps[index].EndedAt)
-                  : "-/-"}
+                  : Constants.TEXT_EMPTY_PLACEHOLDER}
               </p>
 
-              <Input placeholder="hello" />
-
               <Alert
                 message={<b>{getAlertMessage(groupTaskSteps[index].Status)}</b>}
                 description={groupTaskSteps[index].Log}
@@ -196,20 +194,87 @@ export default function GroupTasksViewModal({ isOpen }) {
         if (groupTask.Id === paramGroupTaskId) {
           let currentGroupTask = groupTask;
 
+          console.log(currentGroupTask);
+
           return (
             <div key={paramGroupTaskId}>
-              <h1 style={{ color: "#e67e22", fontWeight: "bold" }}>
+              <Popover
-                {currentGroupTask.GroupName}
+                key={"test1"}
-              </h1>
+                placement="bottomLeft"
+                title={
+                  <h2
+                    key={"test"}
+                    style={{
+                      fontWeight: "bold",
+                      color: Constants.COLORS.SECONDARY,
+                    }}
+                  >
+                    Details
+                  </h2>
+                }
+                content={
+                  <>
                     <p>
                       <span style={{ fontWeight: "bold" }}>ID:</span>{" "}
                       {paramGroupTaskId} <br />
                       <span style={{ fontWeight: "bold" }}>Category:</span>{" "}
                       {currentGroupTask.Category}
                       <br />
-                <span style={{ fontWeight: "bold" }}>Started at:</span>{" "}
+                      <span style={{ fontWeight: "bold" }}>
+                        Started at:
+                      </span>{" "}
                       {FormatDatetime(currentGroupTask.StartedAt)}
                     </p>
+                    {currentGroupTask.GlobalInputs !== "[]" ? (
+                      <>
+                        <h2
+                          style={{
+                            fontWeight: "bold",
+                            color: Constants.COLORS.SECONDARY,
+                          }}
+                        >
+                          Specified Global Inputs
+                        </h2>
+
+                        <p>
+                          {JSON.parse(currentGroupTask.GlobalInputs).map(
+                            (globalInput) => {
+                              return (
+                                <span
+                                  key={
+                                    globalInput.parameterName +
+                                    globalInput.value
+                                  }
+                                >
+                                  <span style={{ fontWeight: "bold" }}>
+                                    {globalInput.parameterName}:{" "}
+                                  </span>
+                                  <span>
+                                    {globalInput.value !== ""
+                                      ? globalInput.value
+                                      : Constants.TEXT_EMPTY_PLACEHOLDER}
+                                  </span>
+                                  <br />
+                                </span>
+                              );
+                            }
+                          )}
+                        </p>
+                      </>
+                    ) : null}
+                  </>
+                }
+                trigger="click"
+              >
+                <h1
+                  style={{
+                    color: Constants.COLORS.PRIMARY,
+                    fontWeight: "bold",
+                  }}
+                >
+                  {currentGroupTask.GroupName}
+                </h1>
+              </Popover>
 
               <Steps direction="vertical" items={stepsItemHandler()} />
             </div>

src/utils.js

@@ -5,6 +5,11 @@ import { useNavigate } from "react-router-dom";
  * constants
  */
 export const Constants = {
+  COLORS: {
+    PRIMARY: "#e67e22",
+    SECONDARY: "#9b59b6",
+  },
+  TEXT_EMPTY_PLACEHOLDER: "-/-",
   API_ADDRESS: "http://localhost:8080/v1",
   WS_ADDRESS: "ws://localhost:8080/ws",
   ROUTE_PATHS: {