adds secret management UI

executor/models.py

@@ -696,7 +696,4 @@ class Meta:
         ]
         indexes = [
             models.Index(fields=['key', 'account', 'is_active']),
-        ]
-
-    def __str__(self):
-        return f"{self.account.name}:{self.key}"
+        ]

web/src/components.ts

@@ -42,4 +42,5 @@ export const components = {
     import("./pages/dynamicAlerts/CreateDynamicAlert"),
   [PageKeys.DYNAMIC_ALERT_VIEW]: () =>
     import("./pages/dynamicAlerts/CreateDynamicAlert"),
+  [PageKeys.SECRET_MANAGEMENT]: () => import("./pages/secret-management"),
 };

web/src/components/Inputs/HandleInputRender.tsx

@@ -15,6 +15,7 @@ import TypingDropdownMultipleSelectionInput from "./InputTypes/TypingDropdownMul
 import TextButton from "./InputTypes/TextButton.tsx";
 import CronInput from "../common/CronInput/index.tsx";
 import Checkbox from "../common/Checkbox/index.tsx";
+import SearchInput from "./InputTypes/SearchInput.tsx";
 
 export type HandleInputRenderType = {
   inputType: InputType;
@@ -48,6 +49,8 @@ function HandleInputRender({ inputType, ...props }: HandleInputRenderType) {
   switch (inputType) {
     case InputTypes.TEXT:
       return <Text {...props} handleChange={props.handleChange!} />;
+    case InputTypes.SEARCH:
+      return <SearchInput {...props} handleChange={props.handleChange!} />;
     case InputTypes.MULTILINE:
       return <Multiline handleChange={props.handleChange!} {...props} />;
     case InputTypes.BUTTON:

web/src/components/Inputs/InputTypes/SearchInput.tsx

@@ -0,0 +1,25 @@
+import { SearchRounded } from "@mui/icons-material";
+import CustomInput from "../CustomInput.tsx";
+import { InputTypes } from "../../../types/index.ts";
+import { HandleInputRenderType } from "../HandleInputRender";
+
+function SearchInput(props: Omit<HandleInputRenderType, "inputType">) {
+  return (
+    <div className="flex w-full h-full">
+      <div
+        className={`bg-gray-200 dark:bg-gray-800 rounded-l flex shrink-0 items-center justify-center p-1 border dark:border-gray-700 text-gray-500 dark:text-gray-500`}>
+        <SearchRounded />
+      </div>
+      <CustomInput
+        type="search"
+        placeholder="Search playbooks..."
+        inputType={InputTypes.TEXT}
+        {...props}
+        className={`${props.className} !rounded-none !rounded-r !border-l-0 flex-1`}
+        containerClassName="!w-full"
+      />
+    </div>
+  );
+}
+
+export default SearchInput;

web/src/components/Overlay/index.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import React, { useEffect, useRef } from "react";
+import { useEffect, useRef } from "react";
 import styles from "./index.module.css";
+import { motion } from "framer-motion";
 
 const Overlay = (props) => {
   const { children, visible, close } = props;
@@ -23,9 +24,14 @@ const Overlay = (props) => {
     <>
       {visible && (
         <div className={styles.overlay}>
-          <div ref={overlayRef} className={styles.children}>
+          <motion.div
+            ref={overlayRef}
+            initial={{ opacity: 0, y: 50 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.2, ease: "easeOut" }}
+            className={styles.children}>
             {children}
-          </div>
+          </motion.div>
         </div>
       )}
     </>

web/src/components/PlaybookDescription/index.tsx

@@ -28,7 +28,7 @@ function PlaybookDescription() {
       }
       value={currentPlaybook?.description}
       onChange={handleDescription}
-      disabled={isPrefetched !== "" ?? false}
+      disabled={!!isPrefetched}
     />
   );
 }

web/src/components/Playbooks/create/CustomEdge.tsx

@@ -93,7 +93,7 @@ const CustomEdge = ({
               <CustomButton
                 className={`${
                   additionalData.id === id ? "shadow-md shadow-violet-500 " : ""
-                } w-10 h-10 rounded-full items-center p-0 justify-center font-normal step-notes absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2`}
+                } w-10 h-10 rounded-full items-center p-0 justify-center font-normal step-notes absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 !min-w-0`}
                 onClick={handleAddConditionClick}>
                 <Tooltip title="Add Condition">
                   <Add fontSize="small" />

web/src/components/Sidebar/index.tsx

@@ -4,7 +4,12 @@ import useToggle from "../../hooks/common/useToggle";
 import SlackConnectOverlay from "../SlackConnectOverlay";
 import { elements } from "./utils";
 import SidebarElement from "./SidebarElement";
-import { LogoutRounded, SettingsRounded } from "@mui/icons-material";
+import {
+  LockRounded,
+  LogoutRounded,
+  SecurityRounded,
+  SettingsRounded,
+} from "@mui/icons-material";
 import SidebarButtonElement from "./SidebarButtonElement";
 import HeadElement from "./HeadElement";
 import useSidebar from "../../hooks/common/sidebar/useSidebar";
@@ -36,6 +41,11 @@ function Sidebar() {
       </div>
 
       <div className="flex flex-col gap-2 w-full">
+        <SidebarElement
+          to="/secret-management"
+          label="Secret Management"
+          icon={<LockRounded fontSize="small" />}
+        />
         <SidebarButtonElement
           label="Join Slack Community"
           icon={

web/src/components/common/CustomButton/index.tsx

@@ -15,7 +15,7 @@ function CustomButton({
   return (
     <button
       onClick={onClick}
-      className={`${className} flex text-center gap-1 items-center text-xs bg-white hover:bg-violet-500 text-violet-500 hover:text-white rounded p-1 border border-violet-500 shrink-0 transition-all`}
+      className={`${className} flex text-center gap-1 items-center text-xs bg-white hover:bg-violet-500 text-violet-500 hover:text-white rounded p-1 border shrink-0 transition-all`}
       {...props}>
       {children}
     </button>

web/src/components/common/GlobalVariable/AddVariableOverlay.tsx

@@ -11,6 +11,7 @@ import { Toast } from "../../Toast.tsx";
 import CustomButton from "../CustomButton/index.tsx";
 import CustomInput from "../../Inputs/CustomInput.tsx";
 import { InputTypes } from "../../../types/inputs/inputTypes.ts";
+import { createPortal } from "react-dom";
 
 const AddVariableOverlay = ({ isOpen, close }) => {
   const [name, setName] = useState("");
@@ -41,7 +42,7 @@ const AddVariableOverlay = ({ isOpen, close }) => {
     resetState();
   };
 
-  return (
+  return createPortal(
     <Overlay close={close} visible={isOpen}>
       <div className="z-[200] bg-white max-w-sm rounded m-2">
         <div className={"p-4"}>
@@ -79,7 +80,8 @@ const AddVariableOverlay = ({ isOpen, close }) => {
         handleClose={() => setValidationError("")}
         anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
       />
-    </Overlay>
+    </Overlay>,
+    document.body,
   );
 };
 

web/src/components/secret-management/SecretActionOverlay.tsx

@@ -0,0 +1,55 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useEffect } from "react";
+import styles from "./index.module.css";
+import { CircularProgress } from "@mui/material";
+import Overlay from "../Overlay/index.js";
+import CustomButton from "../common/CustomButton/index.tsx";
+import { useDeleteSecretMutation } from "../../store/features/secrets/api/deleteSecretApi.ts";
+
+const SecretActionOverlay = ({
+  secret,
+  isOpen,
+  toggleOverlay,
+  refreshTable,
+}: any) => {
+  const [deleteVariable, { isLoading, isSuccess, status }] =
+    useDeleteSecretMutation();
+  const handleSuccess = () => {
+    deleteVariable({ id: secret.id });
+  };
+
+  useEffect(() => {
+    if (isSuccess) {
+      toggleOverlay();
+      refreshTable();
+    }
+  }, [status]);
+
+  return (
+    <>
+      {isOpen && (
+        <Overlay visible={isOpen}>
+          <div className={`${styles["actionOverlay"]} dark:bg-gray-900`}>
+            <header className="text-gray-500 dark:text-gray-400 flex items-center gap-1">
+              Delete {secret.name}?
+            </header>
+            <div className={"flex items-center gap-2 mt-4"}>
+              <CustomButton onClick={toggleOverlay}>Cancel</CustomButton>
+              <CustomButton onClick={handleSuccess}>Yes</CustomButton>
+              {isLoading && (
+                <CircularProgress
+                  style={{
+                    marginLeft: "12px",
+                  }}
+                  size={20}
+                />
+              )}
+            </div>
+          </div>
+        </Overlay>
+      )}
+    </>
+  );
+};
+
+export default SecretActionOverlay;

web/src/components/secret-management/create/CreateSecretButton.tsx

@@ -0,0 +1,32 @@
+import useToggle from "../../../hooks/common/useToggle";
+import CustomButton from "../../common/CustomButton";
+import { AddRounded } from "@mui/icons-material";
+import SecretCreateOverlay from "./SecretCreateOverlay";
+
+type CreateVariableButtonProps = {
+  buttonText?: string;
+};
+
+function CreateSecretButton({
+  buttonText = "Secret",
+}: CreateVariableButtonProps) {
+  const { isOpen: isActionOpen, toggle } = useToggle();
+
+  const handleCreateVariable = () => {
+    toggle();
+  };
+
+  return (
+    <div>
+      <CustomButton
+        className="!h-full self-stretch"
+        onClick={handleCreateVariable}>
+        <AddRounded fontSize="small" /> {buttonText}
+      </CustomButton>
+
+      <SecretCreateOverlay isOpen={isActionOpen} toggleOverlay={toggle} />
+    </div>
+  );
+}
+
+export default CreateSecretButton;