All files / src/components/Playbooks/task/source SelectConnectorOption.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { useSelector } from "react-redux";
import { RefreshRounded } from "@mui/icons-material";
import { CircularProgress } from "@mui/material";
import { updateCardById } from "../../../../utils/execution/updateCardById.ts";
import { DrawerTypes } from "../../../../store/features/drawers/drawerTypes.ts";
import { usePlaybookBuilderOptionsQuery } from "../../../../store/features/playbook/api/index.ts";
import useDrawerState from "../../../../hooks/common/useDrawerState.ts";
import { fetchData } from "../../../../utils/fetchAssetModelOptions.ts";
import CustomButton from "../../../common/CustomButton/index.tsx";
import AddDataSourcesDrawer from "../../../common/Drawers/AddDataSourcesDrawer";
import useIsPrefetched from "../../../../hooks/playbooks/useIsPrefetched.ts";
import { InputTypes } from "../../../../types/inputs/inputTypes.ts";
import CustomInput from "../../../Inputs/CustomInput.tsx";
import useCurrentTask from "../../../../hooks/playbooks/task/useCurrentTask.ts";
import { commonKeySelector } from "../../../../store/features/common/commonSlice.ts";
 
const id = DrawerTypes.ADD_DATA_SOURCES;
 
const RefreshButton = ({ refetch, loading }) => {
  return (
    <>
      <button onClick={refetch}>
        <RefreshRounded
          className={`text-gray-400 hover:text-gray-600 transition-all`}
        />
      </button>
      {loading && <CircularProgress size={20} />}
    </>
  );
};
 
function SelectConnectorOption({ id: taskId }) {
  const { connectorOptions } = useSelector(commonKeySelector);
  const [task, currentTaskId] = useCurrentTask(taskId);
  const { isFetching, refetch } = usePlaybookBuilderOptionsQuery();
  const { toggle } = useDrawerState(id);
  const isPrefetched = useIsPrefetched();
 
  function handleConnectorOptionChange(id: string) {
    updateCardById("task_connector_sources.0.id", id, currentTaskId);
    Iif (!isPrefetched) fetchData({ id: currentTaskId });
  }
 
  const currentConnectorOptions =
    connectorOptions?.find((e) => e.id === task?.source)?.connector
      ?.connector_options ?? [];
 
  const loading = isFetching || task?.ui_requirement?.assetsLoading;
 
  return (
    <div className="relative flex flex-col">
      <div className="flex gap-1 items-center">
        {currentConnectorOptions.length > 0 ? (
          <div className="flex gap-2">
            <CustomInput
              label="Connector"
              options={currentConnectorOptions.map((option) => ({
                id: option.connector_id,
                label: option.display_name,
                option: option,
              }))}
              inputType={InputTypes.DROPDOWN}
              value={task?.task_connector_sources?.[0]?.id ?? ""}
              handleChange={handleConnectorOptionChange}
              disabled={!!isPrefetched}
              suffix={<RefreshButton refetch={refetch} loading={loading} />}
            />
          </div>
        ) : (
          <>
            <CustomButton onClick={toggle}>+ Add New Source</CustomButton>
          </>
        )}
        <AddDataSourcesDrawer />
      </div>
    </div>
  );
}
 
export default SelectConnectorOption;