connectors ConnectorUpdateOverlay.tsx

0% Statements 0/33
0% Branches 0/7
0% Functions 0/7
0% Lines 0/33
Press n or j to go to the next uncovered block, b, p or k for the previous block.

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  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  /* eslint-disable react-hooks/exhaustive-deps */
import { useEffect, useState } from "react";
import styles from "./overlay.module.css";
import { CircularProgress } from "@mui/material";
import { useUpdateConnectorMutation } from "../../../store/features/integrations/api/index.ts";
import Overlay from "../../Overlay/index.js";
import { CloseRounded } from "@mui/icons-material";
import HandleKeyOptions from "./HandleKeyOptions.js";
import { useNavigate } from "react-router-dom";
import CustomButton from "../../common/CustomButton/index.tsx";
import TestConnectorButton from "../../Buttons/TestConnectorButton/index.tsx";
import ShowTestConnectorResult from "../../ShowTestConnectorResult/index.tsx";
import AffectedPlaybooks from "../../AffectedPlaybooks/index.tsx";
 
const ConnectorUpdateOverlay = ({ isOpen, toggleOverlay, connector }) => {
  const naviagte = useNavigate();
  const [updateConnector, { isLoading }] = useUpdateConnectorMutation();
  const [formData, setFormData] = useState({});
  const handleSuccess = async () => {
    const formattedKeys: any = [];
    for (let [key, val] of Object.entries(formData)) {
      formattedKeys.push({
        key_type: key,
        key: val,
      });
    }
 
    await updateConnector({
      id: connector.id,
      keys: formattedKeys,
    });
 
    naviagte("/data-sources");
  };
 
  useEffect(() => {
    Iif (connector.keys && connector.keys.length > 0) {
      const obj = {};
      connector.keys.forEach((e) => {
        obj[e.key_type] = "";
      });
      setFormData(obj);
    }
  }, [connector.keys]);
 
  return (
    <>
      {isOpen && (
        <Overlay close={toggleOverlay} visible={isOpen}>
          <div className={styles["actionOverlay"]}>
            <div className="flex items-center justify-between">
              <header className="text-gray-500">
                Update {connector?.display_name} Keys
              </header>
              <CloseRounded
                onClick={toggleOverlay}
                className="text-gray-500 cursor-pointer"
              />
            </div>
            {connector.keys?.map((option, i) => (
              <div
                key={i}
                style={{ margin: "5px 0" }}
                className={styles["eventTypeSelectionSection"]}>
                <div
                  className={styles["content"]}
                  style={{ fontSize: "12px", marginLeft: "2px" }}>
                  {option.display_name}
                </div>
                <HandleKeyOptions
                  connectorActive={false}
                  option={option}
                  onValueChange={(val) => {
                    setFormData((prev) => {
                      return {
                        ...prev,
                        [option.key_type]: val,
                      };
                    });
                  }}
                  value={formData[option.key_type]}
                />
              </div>
            ))}
            <AffectedPlaybooks id={connector.id} />
            <div className={styles.actions}>
              <CustomButton onClick={toggleOverlay}>Cancel</CustomButton>
              <CustomButton onClick={handleSuccess}>Update</CustomButton>
              <TestConnectorButton
                id={connector.id}
                connector={connector}
                formData={formData}
              />
              {isLoading && (
                <CircularProgress
                  style={{
                    marginLeft: "12px",
                  }}
                  size={20}
                />
              )}
            </div>
            <ShowTestConnectorResult />
          </div>
        </Overlay>
      )}
    </>
  );
};
 
export default ConnectorUpdateOverlay;