All files / src/components/Integration/connectors Config.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 styles from "./index.module.css";
import SlackManifestGenerator from "./SlackManifestGenerator.js";
import HandleKeyOptions from "./HandleKeyOptions.js";
import {
  connectorSelector,
  setKey,
} from "../../../store/features/integrations/integrationsSlice.ts";
import { useDispatch, useSelector } from "react-redux";
import { useParams } from "react-router-dom";
import { cardsData } from "../../../utils/common/cardsData.ts";
import ConfigButtons from "./ConfigButtons.tsx";
import CustomInput from "../../Inputs/CustomInput.tsx";
import { InputTypes } from "../../../types/inputs/inputTypes.ts";
 
function Config({ connector }) {
  const { id } = useParams();
  const connectorActive = id !== undefined && id !== null;
  const keyOptions = connector?.keys ?? [];
  const dispatch = useDispatch();
  const currentConnector = useSelector(connectorSelector);
  const cardData = cardsData.find((el) => el.enum === connector?.type);
 
  return (
    <>
      {connector.type === "SLACK" && <SlackManifestGenerator />}
      <div className={styles["container"]}>
        <div className={styles["heading"]}>
          <span>{connector?.display_name ?? connector?.type} Keys</span>
          {cardData?.docs && (
            <span>
              (
              <a
                className="text-violet-500 cursor-pointer"
                href={cardData?.docs}
                target="_blank"
                rel="noreferrer">
                Docs
              </a>
              )
            </span>
          )}
        </div>
 
        <>
          <div
            className={`${styles["eventTypeSelectionSection"]} flex items-center`}>
            <div className={styles["content"]}>Name</div>
            <CustomInput
              inputType={InputTypes.TEXT}
              handleChange={(val) => {
                dispatch(setKey({ key: "name", value: val }));
              }}
              disabled={connectorActive}
              value={currentConnector.name}
              placeholder={"Enter connector name"}
              className="!w-[300px]"
            />
          </div>
          {keyOptions?.map((option, i) => (
            <div
              key={i}
              className={`${styles["eventTypeSelectionSection"]} flex items-center`}>
              <div className={styles["content"]}>
                {option?.display_name || option?.key_type}
              </div>
              <HandleKeyOptions
                connectorActive={connectorActive}
                option={option}
              />
            </div>
          ))}
        </>
      </div>
 
      <ConfigButtons connector={connector} />
    </>
  );
}
 
export default Config;