All files / src/components/common/GlobalVariable AddVariableOverlay.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { useState } from "react";
import styles from "./styles.module.css";
import { useDispatch, useSelector } from "react-redux";
import Overlay from "../../Overlay/index.js";
import {
  addGlobalVariable,
  currentPlaybookSelector,
} from "../../../store/features/playbook/playbookSlice.ts";
import { CloseRounded } from "@mui/icons-material";
import { Toast } from "../../Toast.tsx";
import CustomButton from "../CustomButton/index.tsx";
import CustomInput from "../../Inputs/CustomInput.tsx";
import { InputTypes } from "../../../types/inputs/inputTypes.ts";
 
const AddVariableOverlay = ({ isOpen, close }) => {
  const [name, setName] = useState("");
  const [value, setValue] = useState("");
  const [validationError, setValidationError] = useState("");
  const dispatch = useDispatch();
  const currentPlaybook = useSelector(currentPlaybookSelector);
  const globalVariables = currentPlaybook?.global_variable_set ?? {};
 
  const resetState = () => {
    setName("");
    setValue("");
    setValidationError("");
  };
 
  const handleSubmit = () => {
    Iif (!(name && value)) {
      setValidationError("Please enter all fields");
      return;
    }
    const nameVal = !name.startsWith("$") ? `$${name}` : name;
    Iif (Object.keys(globalVariables)?.find((e) => e === nameVal)) {
      setValidationError("A variable with this name already exists");
      return;
    }
    dispatch(addGlobalVariable({ name: nameVal, value: value }));
    close();
    resetState();
  };
 
  return (
    <Overlay close={close} visible={isOpen}>
      <div className="z-[200] bg-white max-w-sm rounded m-2">
        <div className={"p-4"}>
          <div className={styles.title}>
            Add a new variable
            <CloseRounded onClick={() => close()} />
          </div>
          <div className="flex flex-wrap gap-2 mt-4">
            <CustomInput
              inputType={InputTypes.TEXT}
              handleChange={(val) => setName(val)}
              value={name}
              placeholder={"Enter variable name"}
            />
            <CustomInput
              inputType={InputTypes.TEXT}
              handleChange={(val) => setValue(val)}
              value={value}
              placeholder={"Enter variable value"}
            />
          </div>
          <p className="text-xs mt-2 text-gray-500 italic">
            To enter an array variable, just enter the values with commas
          </p>
          <div className="flex items-center gap-2 mt-10">
            <CustomButton onClick={() => close()}>Cancel</CustomButton>
            <CustomButton onClick={handleSubmit}>Add</CustomButton>
          </div>
        </div>
      </div>
      <Toast
        open={validationError}
        severity="error"
        message={validationError}
        handleClose={() => setValidationError("")}
        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
      />
    </Overlay>
  );
};
 
export default AddVariableOverlay;