All files / src/pages/integrations ConnectorPage.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
115
116
117
118
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/* eslint-disable react-hooks/exhaustive-deps */
import { CircularProgress, Tab, Tabs } from "@mui/material";
import Heading from "../../components/Heading.js";
import { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import {
  connectorSelector,
  resetIntegrationState,
  setCurrentConnector,
} from "../../store/features/integrations/integrationsSlice.ts";
import { useNavigate, useParams } from "react-router-dom";
import Config from "../../components/Integration/connectors/Config.js";
import TabPanel from "../../components/Integration/connectors/TabPanel.js";
import Assets from "../../components/Integration/connectors/Assets.js";
import { connectorsWithoutAssets } from "../../utils/integrations/connectorsWithoutAssets.ts";
import {
  useGetConnectorKeyOptionsQuery,
  useLazyGetConnectorKeysQuery,
} from "../../store/features/integrations/api/index.ts";
import { ChevronLeft } from "@mui/icons-material";
 
function ConnectorPageBeta() {
  const { id, connectorEnum } = useParams();
  const navigate = useNavigate();
 
  const dispatch = useDispatch();
  const currentConnector = useSelector(connectorSelector);
  const [selectedTab, setSelectedTab] = useState(0);
  const { data: connector, isFetching: optionsLoading } =
    useGetConnectorKeyOptionsQuery(connectorEnum ?? "");
  const [triggerGetKeys, { isFetching: keysLoading }] =
    useLazyGetConnectorKeysQuery();
 
  useEffect(() => {
    Iif (id !== null && id !== undefined) {
      dispatch(setCurrentConnector(id));
      triggerGetKeys(id);
    }
  }, [id]);
 
  useEffect(() => {
    return () => {
      dispatch(resetIntegrationState());
    };
  }, [dispatch]);
 
  const handleTabChange = (_, newValue) => {
    setSelectedTab(newValue);
  };
 
  const containsAssets = !connectorsWithoutAssets.includes(
    connectorEnum?.toUpperCase() ?? "",
  );
 
  const isActive = currentConnector?.is_active;
 
  switch (id) {
    default:
      break;
  }
 
  Iif (optionsLoading || keysLoading) {
    return (
      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          height: "100vh",
        }}>
        <CircularProgress />
      </div>
    );
  }
 
  return (
    <div>
      <Heading
        heading={`${
          connector?.display_name ?? currentConnector?.type
        } Integration Setup`}
      />
 
      <button
        onClick={() => navigate("/data-sources")}
        className="p-1 text-sm border border-violet-500 rounded m-2 text-violet-500 flex items-center cursor-pointer hover:text-white hover:bg-violet-500 transition-all">
        <ChevronLeft /> All Integrations
      </button>
 
      {isActive && (
        <Tabs
          className="mx-2 !text-violet-500"
          TabIndicatorProps={{ className: "!bg-violet-500" }}
          textColor="inherit"
          value={selectedTab}
          onChange={handleTabChange}>
          <Tab label="Config" id="tab-0" aria-controls="tabpanel-0" />
          {containsAssets && (
            <Tab label="Assets" id="tab-1" aria-controls="tabpanel-1" />
          )}
        </Tabs>
      )}
 
      <TabPanel value={selectedTab} index={0}>
        <Config connector={connector} />
      </TabPanel>
 
      {isActive && containsAssets && (
        <TabPanel value={selectedTab} index={1}>
          <Assets connector={connector} id={id} />
        </TabPanel>
      )}
    </div>
  );
}
 
export default ConnectorPageBeta;