All files / src/components/Playbooks/create IntegrationOption.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { cardsData } from "../../../utils/common/cardsData.ts";
import { useDispatch, useSelector } from "react-redux";
import { createTaskWithSource } from "../../../store/features/playbook/playbookSlice.ts";
import { CheckCircleOutline } from "@mui/icons-material";
import { SOURCES } from "../../../constants/index.ts";
import { unsupportedBuilderOptions } from "../../../utils/playbook/unsupportedBuilderOptions.ts";
import { Tooltip } from "@mui/material";
import { DrawerTypes } from "../../../store/features/drawers/drawerTypes.ts";
import { additionalStateSelector } from "../../../store/features/drawers/drawersSlice.ts";
import { PermanentDrawerTypes } from "../../../store/features/drawers/permanentDrawerTypes.ts";
import useDrawerState from "../../../hooks/common/useDrawerState.ts";
import usePermanentDrawerState from "../../../hooks/common/usePermanentDrawerState.ts";
import { commonKeySelector } from "../../../store/features/common/commonSlice.ts";
 
function IntegrationOption({ option }) {
  const { toggle } = useDrawerState(DrawerTypes.ADD_DATA);
  const { openDrawer } = usePermanentDrawerState();
  const addtionalState = useSelector(additionalStateSelector);
  const dispatch = useDispatch();
  const { connectorOptionsMap } = useSelector(commonKeySelector);
  const unsupported = unsupportedBuilderOptions.includes(
    `${option.source} ${option.task_type}`,
  );
 
  const handleImageSrc = () => {
    switch (option?.source) {
      case SOURCES.TEXT:
        if (option.task_type === SOURCES.IFRAME) {
          return cardsData.find((e) => e.enum === SOURCES.IFRAME)?.url;
        } else {
          return (
            cardsData.find(
              (e) => e.enum === option?.source?.replace("_VPC", ""),
            )?.url ??
            cardsData.find((e) => option?.model_type?.includes(e.enum))?.url
          );
        }
      default:
        return (
          cardsData.find((e) => e.enum === option?.source?.replace("_VPC", ""))
            ?.url ??
          cardsData.find((e) => option?.model_type?.includes(e.enum))?.url
        );
    }
  };
 
  const handleClick = () => {
    Iif (unsupported) return;
    Iif (option.source) {
      dispatch(
        createTaskWithSource({
          source: option.source,
          modelType:
            option.supported_model_types?.length > 0
              ? option.supported_model_types[0].model_type
              : option.source,
          taskType: option.task_type,
          key: option.id,
          description: option.display_name,
          parentId: addtionalState?.parentId,
          requireCondition: addtionalState?.requireCondition,
          currentConditionParentId: addtionalState?.currentConditionParentId,
          stepId: addtionalState?.stepId,
          resultType: option.result_type,
        }),
      );
      toggle();
      openDrawer(PermanentDrawerTypes.TASK_DETAILS);
    }
  };
 
  Iif (unsupported) {
    return (
      <Tooltip title="This task type is deprecated, use other Grafana Data Sources.">
        <div
          className={`flex relative items-center gap-2 p-2 bg-gray-50 rounded border-[1px] hover:bg-gray-200 cursor-pointer transition-all`}
          key={option.id}>
          {connectorOptionsMap[option.source.toLowerCase()]?.length > 0 && (
            <div className="absolute top-0 right-0 m-1 text-md">
              <CheckCircleOutline color="success" fontSize="inherit" />
            </div>
          )}
          <div
            className={`bg-white w-full h-full absolute opacity-75 top-0 left-0`}
          />
          <img className="w-10 h-10" src={handleImageSrc()} alt="logo" />
          <p className="text-sm">
            {option?.display_name ?? `${option?.source} ${option?.task_type}`}
          </p>
        </div>
      </Tooltip>
    );
  }
 
  return (
    <div
      className={`flex relative items-center gap-2 p-2 bg-gray-50 rounded border-[1px] hover:bg-gray-200 cursor-pointer transition-all`}
      key={option.id}
      onClick={handleClick}>
      {connectorOptionsMap[option.source.toLowerCase()]?.length > 0 && (
        <div className="absolute top-0 right-0 m-1 text-md">
          <CheckCircleOutline color="success" fontSize="inherit" />
        </div>
      )}
      <img className="w-10 h-10" src={handleImageSrc()} alt="logo" />
      <p className="text-sm">
        {option?.display_name ?? `${option?.source} ${option?.task_type}`}
      </p>
    </div>
  );
}
 
export default IntegrationOption;