All files / src/pages/workflows CreateWorkflow.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/* eslint-disable react-hooks/exhaustive-deps */
import React, { useEffect } from "react";
import Heading from "../../components/Heading.js";
import BasicDetails from "../../components/Workflows/create/BasicDetails.js";
import ScheduleDetails from "../../components/Workflows/create/ScheduleDetails.js";
import NotificationDetails from "../../components/Workflows/create/NotificationDetails.js";
import { useCreateWorkflowMutation } from "../../store/features/workflow/api/index.ts";
import { CircularProgress } from "@mui/material";
import { useNavigate, useParams } from "react-router-dom";
import {
  currentWorkflowSelector,
  resetWorkflowState,
} from "../../store/features/workflow/workflowSlice.ts";
import { useDispatch, useSelector } from "react-redux";
import { showSnackbar } from "../../store/features/snackbar/snackbarSlice.ts";
import { useLazyGetWorkflowQuery } from "../../store/features/workflow/api/getWorkflowApi.ts";
import Loading from "../../components/common/Loading/index.tsx";
import { useUpdateWorkflowMutation } from "../../store/features/workflow/api/updateWorkflowApi.ts";
import { useLazyTestWorkflowNotificationQuery } from "../../store/features/workflow/api/testWorkflowNotificationApi.ts";
import { stateToWorkflow } from "../../utils/parser/workflow/stateToWorkflow.ts";
import { validate } from "../../components/Workflows/create/utils/validation.ts";
import CustomButton from "../../components/common/CustomButton/index.tsx";
import { testRunAvailableNotificationTypes } from "../../utils/workflow/testRunAvailableNotificationTypes.ts";
 
function CreateWorkflow() {
  const { id: workflowId } = useParams();
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const [triggerSave, { isLoading }] = useCreateWorkflowMutation();
  const [triggerUpdate, { isLoading: updateLoading }] =
    useUpdateWorkflowMutation();
  const [triggerGetWorkflow, { isLoading: workflowLoading }] =
    useLazyGetWorkflowQuery();
  const [triggerTestWorkflowNotification] =
    useLazyTestWorkflowNotificationQuery();
  const currentWorkflow = useSelector(currentWorkflowSelector);
 
  const handleSave = async () => {
    Iif (!validate()) return;
    try {
      const workflow = {
        ...stateToWorkflow().workflow,
        id: workflowId,
      };
      let response: any = {};
      if (workflowId) {
        response = await triggerUpdate(workflow).unwrap();
      } else {
        response = await triggerSave().unwrap();
      }
      Iif (response.success) {
        navigate("/workflows");
      }
    } catch (e: any) {
      dispatch(
        showSnackbar(
          e?.data?.message?.toString() ??
            e?.data?.message?.description?.toString() ??
            JSON.stringify(e),
        ),
      );
    }
  };
 
  const handleTestNotification = () => {
    triggerTestWorkflowNotification();
    dispatch(showSnackbar("Test Notification Sent"));
  };
 
  useEffect(() => {
    return () => {
      dispatch(resetWorkflowState());
    };
  }, [dispatch]);
 
  useEffect(() => {
    Iif (workflowId != null) {
      triggerGetWorkflow(workflowId);
    }
  }, [workflowId]);
 
  Iif (workflowLoading) {
    return <Loading title="Your workflow is loading..." />;
  }
 
  return (
    <div>
      <Heading
        heading={
          workflowId
            ? "Editing Workflow- " + currentWorkflow.name
            : "Create Workflow"
        }
      />
      <div className="p-6 flex flex-col gap-3 bg-white border rounded m-2">
        <BasicDetails />
        <hr />
        <ScheduleDetails />
        <hr />
        <NotificationDetails />
        <div className="flex items-center gap-2">
          <CustomButton onClick={handleSave}>
            {workflowId ? "Update" : "Save"}
          </CustomButton>
          {testRunAvailableNotificationTypes.includes(
            currentWorkflow.notification,
          ) && (
            <CustomButton onClick={handleTestNotification}>
              Test Run
            </CustomButton>
          )}
          {(isLoading || updateLoading) && <CircularProgress size={20} />}
        </div>
      </div>
    </div>
  );
}
 
export default CreateWorkflow;