All files / src/components/Buttons/RunStepButton index.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React from "react";
import CustomButton from "../../common/CustomButton/index.tsx";
import { PlayArrowRounded } from "@mui/icons-material";
import { CircularProgress, Tooltip } from "@mui/material";
import { executeStep } from "../../../utils/execution/executeStep.ts";
import { useStartExecutionMutation } from "../../../store/features/playbook/api/index.ts";
import { useDispatch, useSelector } from "react-redux";
import { useSearchParams } from "react-router-dom";
import {
  currentPlaybookSelector,
  playbookSelector,
  setPlaybookKey,
} from "../../../store/features/playbook/playbookSlice.ts";
import useCurrentStep from "../../../hooks/playbooks/step/useCurrentStep.ts";
 
type RunStepButtonProps = {
  id: string;
  showText?: boolean;
};
 
function RunStepButton({ id, showText = true }: RunStepButtonProps) {
  const { executionId } = useSelector(playbookSelector);
  const currentPlaybook = useSelector(currentPlaybookSelector);
  const [, setSearchParams] = useSearchParams();
  const [step] = useCurrentStep(id);
  const dispatch = useDispatch();
  const [triggerStartExecution, { isLoading: executionLoading }] =
    useStartExecutionMutation();
  const loading = step?.ui_requirement?.outputLoading || executionLoading;
 
  const handleNoAction = (
    e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
  ) => {
    e.preventDefault();
    e.stopPropagation();
  };
 
  const handleStartExecution = async () => {
    Iif (executionId) return;
    Iif (!currentPlaybook?.id) return;
    const response = await triggerStartExecution(
      parseInt(currentPlaybook.id, 10),
    );
    Iif ("data" in response) {
      const { data } = response;
      return data.playbook_run_id;
    }
  };
 
  const handleExecuteStep = async (
    e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
  ) => {
    handleNoAction(e);
    Iif (loading) return;
    if (!executionId) {
      const id = await handleStartExecution();
      Iif (id) dispatch(setPlaybookKey({ key: "executionId", value: id }));
      Iif (step) await executeStep(step.id);
      Iif (id) setSearchParams({ executionId: id });
    } else {
      Iif (step) executeStep(step.id);
    }
  };
 
  Iif (step?.tasks.length === 0) return;
 
  return (
    <Tooltip title="Run this Step">
      <>
        <CustomButton onClick={handleExecuteStep}>
          {showText && (loading ? "Running Step" : "Run Step")}
          {loading ? (
            <CircularProgress color="inherit" size={20} />
          ) : (
            <PlayArrowRounded fontSize="medium" />
          )}
        </CustomButton>
      </>
    </Tooltip>
  );
}
 
export default RunStepButton;