All files / src/components/Integration/connectors ConnectorDeleteOverlay.tsx

77.27% Statements 17/22
14.28% Branches 1/7
66.66% Functions 2/3
77.27% Lines 17/22

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  1x 1x 1x 1x 1x 1x 1x 1x 1x   1x           4x   4x   4x             4x 3x         4x                                                                     1x  
/* eslint-disable react-hooks/exhaustive-deps */
import { useEffect } from "react";
import Overlay from "../../Overlay";
import styles from "./overlay.module.css";
import { CircularProgress } from "@mui/material";
import { CloseRounded } from "@mui/icons-material";
import { useDeleteConnectorMutation } from "../../../store/features/integrations/api/index.ts";
import { useNavigate } from "react-router-dom";
import CustomButton from "../../common/CustomButton/index.tsx";
import AffectedPlaybooks from "../../AffectedPlaybooks/index.tsx";
 
const ConnectorDeleteOverlay = ({
  isOpen,
  successCb,
  toggleOverlay,
  connector,
}) => {
  const navigate = useNavigate();
  const [deleteConnector, { isLoading, isSuccess }] =
    useDeleteConnectorMutation();
 
  const handleSuccess = (e) => {
    e.preventDefault();
    e.stopPropagation();
    deleteConnector(connector.id);
    navigate("/data-sources", { replace: true });
  };
 
  useEffect(() => {
    Iif (isSuccess) {
      successCb();
    }
  }, [isSuccess]);
 
  return (
    <>
      {isOpen && (
        <Overlay close={toggleOverlay} visible={isOpen}>
          <div className={styles["actionOverlay"]}>
            <div className="flex justify-between items-center">
              <header className="text-gray-500">
                Delete {connector?.display_name ?? connector?.title} keys?
              </header>
              <CloseRounded
                onClick={toggleOverlay}
                className="text-gray-500 cursor-pointer"
              />
            </div>
            <p className="text-gray-500 text-sm">This action is permanent.</p>
            <AffectedPlaybooks id={connector.id} />
            <div className={styles.actions}>
              <CustomButton onClick={handleSuccess}>Yes</CustomButton>
              <CustomButton onClick={toggleOverlay}>No</CustomButton>
              {isLoading && (
                <CircularProgress
                  style={{
                    marginLeft: "12px",
                  }}
                  size={20}
                />
              )}
            </div>
          </div>
        </Overlay>
      )}
    </>
  );
};
 
export default ConnectorDeleteOverlay;