Merge pull request #508 from DrDroidLab/feature/secret-management-ui

adds secret management UI

Author: jayeshsadhwani99

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/package-lock.json

@@ -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.ts

@@ -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/HandleInputRender.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/Inputs/InputTypes/SearchInput.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/Overlay/index.tsx

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

web/src/components/PlaybookDescription/index.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/Playbooks/create/CustomEdge.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/Sidebar/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>