All files / src/pages/playbooks Playbook.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { useEffect, useRef } from "react";
import { useDispatch } from "react-redux";
import usePermanentDrawerState from "../../hooks/common/usePermanentDrawerState";
import { useParams, useSearchParams } from "react-router-dom";
import useIsPrefetched from "../../hooks/playbooks/useIsPrefetched";
import {
  useLazyGetPlaybookQuery,
  usePlaybookBuilderOptionsQuery,
} from "../../store/features/playbook/api";
import {
  resetExecutions,
  resetState,
  setPlaybookKey,
} from "../../store/features/playbook/playbookSlice";
import { resetDrawerState } from "../../store/features/drawers/drawersSlice";
import { resetTimeRange } from "../../store/features/timeRange/timeRangeSlice";
import { Playbook as PlaybookType } from "../../types";
import { PermanentDrawerTypes } from "../../store/features/drawers/permanentDrawerTypes";
import Loading from "../../components/common/Loading";
import Heading from "../../components/Heading";
import Builder from "../../components/Playbooks/create/Builder";
import CustomButton from "../../components/common/CustomButton";
import PermenantDrawer from "../../components/common/PermenantDrawer";
 
function Playbook() {
  const { openDrawer, permanentView } = usePermanentDrawerState();
  const { playbook_id: id } = useParams();
  const dispatch = useDispatch();
  const [searchParams] = useSearchParams();
  const executionId = searchParams.get("executionId");
  const isPrefetched = useIsPrefetched();
  const isEditing = !isPrefetched && !executionId;
  const { data, isLoading: builderOptionsLoading } =
    usePlaybookBuilderOptionsQuery();
  const [triggerGetPlaybook, { isLoading }] = useLazyGetPlaybookQuery();
 
  useEffect(() => {
    dispatch(setPlaybookKey({ key: "executionId", value: executionId }));
    Iif (!executionId) {
      dispatch(resetExecutions());
      dispatch(resetDrawerState());
    }
  }, [executionId, dispatch]);
 
  useEffect(() => {
    dispatch(setPlaybookKey({ key: "isOnPlaybookPage", value: true }));
    return () => {
      dispatch(resetState());
      dispatch(resetDrawerState());
      dispatch(resetTimeRange());
    };
  }, [dispatch]);
 
  const fetchPlaybook = async () => {
    Iif (!id) return;
    await triggerGetPlaybook({ playbookId: id }).unwrap();
    Iif (executionId) handleTimeline();
  };
 
  const handleTimeline = () => {
    openDrawer(PermanentDrawerTypes.TIMELINE);
  };
 
  useEffect(() => {
    Iif ((id || executionId) && data) {
      fetchPlaybook();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [id, executionId, data]);
 
  Iif (isLoading || builderOptionsLoading) {
    return <Loading />;
  }
 
  return (
    <div className="h-screen overflow-hidden">
      <Heading heading={"Untitled Playbook"} />
      <div className="flex h-[calc(100%-80px)]">
        <main className="relative flex flex-1">
          <Builder />
          {!isEditing && (
            <div
              className={`${
                permanentView === PermanentDrawerTypes.DEFAULT
                  ? "top-2"
                  : "top-12"
              } absolute right-2 flex items-end flex-col gap-2 z-10`}>
              {permanentView !== PermanentDrawerTypes.TIMELINE && (
                <CustomButton onClick={handleTimeline}>
                  View Timeline
                </CustomButton>
              )}
            </div>
          )}
        </main>
        <PermenantDrawer />
      </div>
    </div>
  );
}
 
export default Playbook;