All files / src/components/DynamicAlerts/create AddNotification.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { useSelector } from "react-redux";
import { InputTypes, Task } from "../../../types";
import CustomInput from "../../Inputs/CustomInput";
import { notificationOptions } from "./utils";
import { currentPlaybookSelector } from "../../../store/features/playbook/selectors";
import { getAssetsFunction } from "../../../utils/fetchAssetModelOptions";
import { useEffect } from "react";
import { commonKeySelector } from "../../../store/features/common/selectors";
import { updateCardById } from "../../../utils/execution/updateCardById";
import useCurrentTask from "../../../hooks/playbooks/task/useCurrentTask";
 
const connectorKey = "task_connector_sources.0.id";
 
function AddNotification() {
  const currentPlaybook = useSelector(currentPlaybookSelector);
  const tasks = currentPlaybook?.ui_requirement?.tasks ?? [];
  const notificationTask: Task = tasks[1];
  const { connectorOptions } = useSelector(commonKeySelector);
  const [, , , data] = useCurrentTask(notificationTask?.id);
 
  useEffect(() => {
    Iif (!notificationTask?.id || !notificationTask?.source) return;
    getAssetsFunction(notificationTask.id);
  }, [notificationTask?.source]);
 
  Iif (!notificationTask || connectorOptions?.length === 0) return;
 
  const handleChannelsChange = (val: string) => {
    const source = notificationTask?.source ?? "";
    const taskType = notificationTask?.[source?.toLowerCase()]?.type ?? "";
    const taskKey = `${[source.toLowerCase()]}.${[
      taskType.toLowerCase(),
    ]}.channel`;
    updateCardById(taskKey, val, notificationTask.id);
  };
 
  const handleMessageChange = (val: string) => {
    const source = notificationTask?.source ?? "";
    const taskType = notificationTask?.[source?.toLowerCase()]?.type ?? "";
    const taskKey = `${[source.toLowerCase()]}.${[
      taskType.toLowerCase(),
    ]}.text`;
    updateCardById(taskKey, val, notificationTask.id);
  };
 
  const handleSourceChange = (val: string) => {
    const currentConnectorOptions =
      connectorOptions?.find((e) => e.id === "SLACK")?.connector
        ?.connector_options ?? [];
    const id = currentConnectorOptions?.[0]?.connector_id;
    updateCardById(connectorKey, id, notificationTask.id);
    updateCardById("source", val, notificationTask.id);
  };
 
  const assets =
    notificationTask?.ui_requirement?.assets?.map((e) => ({
      id: e.channel_id,
      label: e.channel_name,
    })) ?? [];
 
  return (
    <div className="flex flex-col gap-1 border p-2 rounded">
      <p className="font-bold text-violet-500 text-sm">Notification</p>
      <div className="flex items-center gap-1">
        <CustomInput
          inputType={InputTypes.DROPDOWN}
          options={notificationOptions}
          value={notificationTask.source}
          placeholder={`Source`}
          handleChange={handleSourceChange}
          error={undefined}
        />
        <CustomInput
          inputType={InputTypes.TYPING_DROPDOWN}
          options={assets}
          value={data?.channel}
          placeholder={`Channel`}
          handleChange={handleChannelsChange}
          error={undefined}
          helpText={assets?.find((e) => e.id === data?.channel)?.label}
        />
      </div>
      <CustomInput
        inputType={InputTypes.MULTILINE}
        options={assets}
        value={data?.text}
        placeholder={`Enter message to send to slack`}
        handleChange={handleMessageChange}
        error={undefined}
      />
    </div>
  );
}
 
export default AddNotification;