Merge pull request #2707 from akhilmhdh/feat/create-secret-tag

feat: added tag support on create secret

frontend/src/hooks/api/secrets/mutations.tsx

@@ -31,7 +31,8 @@ export const useCreateSecretV3 = ({
       secretKey,
       secretValue,
       secretComment,
-      skipMultilineEncoding
+      skipMultilineEncoding,
+      tagIds
     }) => {
       const { data } = await apiRequest.post(`/api/v3/secrets/raw/${secretKey}`, {
         secretPath,
@@ -40,7 +41,8 @@ export const useCreateSecretV3 = ({
         workspaceId,
         secretValue,
         secretComment,
-        skipMultilineEncoding
+        skipMultilineEncoding,
+        tagIds
       });
       return data;
     },

frontend/src/hooks/api/secrets/types.ts

@@ -132,6 +132,7 @@ export type TCreateSecretsV3DTO = {
   workspaceId: string;
   environment: string;
   type: SecretType;
+  tagIds?: string[];
 };
 
 export type TUpdateSecretsV3DTO = {

frontend/src/views/SecretMainPage/SecretMainPage.tsx

@@ -9,7 +9,14 @@ import { twMerge } from "tailwind-merge";
 import NavHeader from "@app/components/navigation/NavHeader";
 import { createNotification } from "@app/components/notifications";
 import { PermissionDeniedBanner } from "@app/components/permissions";
-import { Checkbox, ContentLoader, Pagination, Tooltip } from "@app/components/v2";
+import {
+  Checkbox,
+  ContentLoader,
+  Modal,
+  ModalContent,
+  Pagination,
+  Tooltip
+} from "@app/components/v2";
 import {
   ProjectPermissionActions,
   ProjectPermissionDynamicSecretActions,
@@ -41,7 +48,10 @@ import { SecretDropzone } from "./components/SecretDropzone";
 import { SecretListView, SecretNoAccessListView } from "./components/SecretListView";
 import { SnapshotView } from "./components/SnapshotView";
 import {
+  PopUpNames,
   StoreProvider,
+  usePopUpAction,
+  usePopUpState,
   useSelectedSecretActions,
   useSelectedSecrets
 } from "./SecretMainPage.store";
@@ -123,6 +133,9 @@ const SecretMainPageContent = () => {
   const [debouncedSearchFilter, setDebouncedSearchFilter] = useDebounce(filter.searchFilter);
   const [filterHistory, setFilterHistory] = useState<Map<string, Filter>>(new Map());
 
+  const createSecretPopUp = usePopUpState(PopUpNames.CreateSecretForm);
+  const { togglePopUp } = usePopUpAction();
+
   useEffect(() => {
     if (
       !isWorkspaceLoading &&
@@ -520,6 +533,15 @@ const SecretMainPageContent = () => {
               onChangePerPage={(newPerPage) => setPerPage(newPerPage)}
             />
           )}
+          <Modal
+            isOpen={createSecretPopUp.isOpen}
+            onOpenChange={(state) => togglePopUp(PopUpNames.CreateSecretForm, state)}
+          >
+            <ModalContent
+              title="Create Secret"
+              subTitle="Add a secret to this particular environment and folder"
+              bodyClassName="overflow-visible"
+            >
               <CreateSecretForm
                 environment={environment}
                 workspaceId={workspaceId}
@@ -527,6 +549,8 @@ const SecretMainPageContent = () => {
                 autoCapitalize={currentWorkspace?.autoCapitalization}
                 isProtectedBranch={isProtectedBranch}
               />
+            </ModalContent>
+          </Modal>
           <SecretDropzone
             secrets={secrets}
             environment={environment}

frontend/src/views/SecretMainPage/components/CreateSecretForm/CreateSecretForm.tsx

@@ -1,20 +1,24 @@
 import { ClipboardEvent } from "react";
 import { Controller, useForm } from "react-hook-form";
+import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import { Button, FormControl, Input, Modal, ModalContent } from "@app/components/v2";
+import { Button, FormControl, Input, MultiSelect } from "@app/components/v2";
 import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput";
+import { ProjectPermissionActions, ProjectPermissionSub, useProjectPermission } from "@app/context";
 import { getKeyValue } from "@app/helpers/parseEnvVar";
-import { useCreateSecretV3 } from "@app/hooks/api";
+import { useCreateSecretV3, useGetWsTags } from "@app/hooks/api";
 import { SecretType } from "@app/hooks/api/types";
 
-import { PopUpNames, usePopUpAction, usePopUpState } from "../../SecretMainPage.store";
+import { PopUpNames, usePopUpAction } from "../../SecretMainPage.store";
 
 const typeSchema = z.object({
   key: z.string().trim().min(1, { message: "Secret key is required" }),
-  value: z.string().optional()
+  value: z.string().optional(),
+  tags: z.array(z.object({ label: z.string().trim(), value: z.string().trim() })).optional()
 });
 
 type TFormSchema = z.infer<typeof typeSchema>;
@@ -43,12 +47,16 @@ export const CreateSecretForm = ({
     setValue,
     formState: { errors, isSubmitting }
   } = useForm<TFormSchema>({ resolver: zodResolver(typeSchema) });
-  const { isOpen } = usePopUpState(PopUpNames.CreateSecretForm);
-  const { closePopUp, togglePopUp } = usePopUpAction();
+  const { closePopUp } = usePopUpAction();
 
   const { mutateAsync: createSecretV3 } = useCreateSecretV3();
+  const { permission } = useProjectPermission();
+  const canReadTags = permission.can(ProjectPermissionActions.Read, ProjectPermissionSub.Tags);
+  const { data: projectTags, isLoading: isTagsLoading } = useGetWsTags(
+    canReadTags ? workspaceId : ""
+  );
 
-  const handleFormSubmit = async ({ key, value }: TFormSchema) => {
+  const handleFormSubmit = async ({ key, value, tags }: TFormSchema) => {
     try {
       await createSecretV3({
         environment,
@@ -57,7 +65,8 @@ export const CreateSecretForm = ({
         secretKey: key,
         secretValue: value || "",
         secretComment: "",
-        type: SecretType.Shared
+        type: SecretType.Shared,
+        tagIds: tags?.map((el) => el.value)
       });
       closePopUp(PopUpNames.CreateSecretForm);
       reset();
@@ -88,14 +97,6 @@ export const CreateSecretForm = ({
   };
 
   return (
-    <Modal
-      isOpen={isOpen}
-      onOpenChange={(state) => togglePopUp(PopUpNames.CreateSecretForm, state)}
-    >
-      <ModalContent
-        title="Create secret"
-        subTitle="Add a secret to the particular environment and folder"
-      >
     <form onSubmit={handleSubmit(handleFormSubmit)} noValidate>
       <FormControl
         label="Key"
@@ -128,6 +129,39 @@ export const CreateSecretForm = ({
           </FormControl>
         )}
       />
+      <Controller
+        control={control}
+        name="tags"
+        render={({ field }) => (
+          <FormControl
+            label="Tags"
+            isError={Boolean(errors?.value)}
+            errorText={errors?.value?.message}
+            helperText={
+              !canReadTags ? (
+                <div className="flex items-center space-x-2">
+                  <FontAwesomeIcon icon={faTriangleExclamation} className="text-yellow-400" />
+                  <span>You do not have permission to read tags.</span>
+                </div>
+              ) : (
+                ""
+              )
+            }
+          >
+            <MultiSelect
+              className="w-full"
+              placeholder="Select tags to assign to secret..."
+              isMulti
+              name="tagIds"
+              isDisabled={!canReadTags}
+              isLoading={isTagsLoading}
+              options={projectTags?.map((el) => ({ label: el.slug, value: el.id }))}
+              value={field.value}
+              onChange={field.onChange}
+            />
+          </FormControl>
+        )}
+      />
       <div className="mt-7 flex items-center">
         <Button
           isDisabled={isSubmitting}
@@ -148,7 +182,5 @@ export const CreateSecretForm = ({
         </Button>
       </div>
     </form>
-      </ModalContent>
-    </Modal>
   );
 };

frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx

@@ -1116,13 +1116,23 @@ export const SecretOverviewPage = () => {
           )}
         </div>
       </div>
+      <Modal
+        isOpen={popUp.addSecretsInAllEnvs.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("addSecretsInAllEnvs", isOpen)}
+      >
+        <ModalContent
+          className="max-h-[80vh]"
+          bodyClassName="overflow-visible"
+          title="Create Secrets"
+          subTitle="Create a secret across multiple environments"
+        >
           <CreateSecretForm
             secretPath={secretPath}
-        isOpen={popUp.addSecretsInAllEnvs.isOpen}
             getSecretByKey={getSecretByKey}
-        onTogglePopUp={(isOpen) => handlePopUpToggle("addSecretsInAllEnvs", isOpen)}
             onClose={() => handlePopUpClose("addSecretsInAllEnvs")}
           />
+        </ModalContent>
+      </Modal>
       <Modal
         isOpen={popUp.addFolder.isOpen}
         onOpenChange={(isOpen) => handlePopUpToggle("addFolder", isOpen)}

frontend/src/views/SecretOverviewPage/components/CreateSecretForm/CreateSecretForm.tsx

@@ -1,7 +1,7 @@
 import { ClipboardEvent } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { subject } from "@casl/ability";
-import { faWarning } from "@fortawesome/free-solid-svg-icons";
+import { faTriangleExclamation, faWarning } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
@@ -13,8 +13,7 @@ import {
   FormControl,
   FormLabel,
   Input,
-  Modal,
-  ModalContent,
+  MultiSelect,
   Tooltip
 } from "@app/components/v2";
 import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput";
@@ -25,14 +24,20 @@ import {
   useWorkspace
 } from "@app/context";
 import { getKeyValue } from "@app/helpers/parseEnvVar";
-import { useCreateFolder, useCreateSecretV3, useUpdateSecretV3 } from "@app/hooks/api";
+import {
+  useCreateFolder,
+  useCreateSecretV3,
+  useGetWsTags,
+  useUpdateSecretV3
+} from "@app/hooks/api";
 import { SecretType, SecretV3RawSanitized } from "@app/hooks/api/types";
 
 const typeSchema = z
   .object({
     key: z.string().trim().min(1, "Key is required"),
     value: z.string().optional(),
-    environments: z.record(z.boolean().optional())
+    environments: z.record(z.boolean().optional()),
+    tags: z.array(z.object({ label: z.string().trim(), value: z.string().trim() })).optional()
   })
   .refine((data) => data.key !== undefined, {
     message: "Please enter secret name"
@@ -44,18 +49,10 @@ type Props = {
   secretPath?: string;
   getSecretByKey: (slug: string, key: string) => SecretV3RawSanitized | undefined;
   // modal props
-  isOpen?: boolean;
   onClose: () => void;
-  onTogglePopUp: (isOpen: boolean) => void;
 };
 
-export const CreateSecretForm = ({
-  secretPath = "/",
-  isOpen,
-  getSecretByKey,
-  onClose,
-  onTogglePopUp
-}: Props) => {
+export const CreateSecretForm = ({ secretPath = "/", getSecretByKey, onClose }: Props) => {
   const {
     register,
     handleSubmit,
@@ -69,14 +66,18 @@ export const CreateSecretForm = ({
 
   const { currentWorkspace } = useWorkspace();
   const { permission } = useProjectPermission();
+  const canReadTags = permission.can(ProjectPermissionActions.Read, ProjectPermissionSub.Tags);
   const workspaceId = currentWorkspace?.id || "";
   const environments = currentWorkspace?.environments || [];
 
   const { mutateAsync: createSecretV3 } = useCreateSecretV3();
   const { mutateAsync: updateSecretV3 } = useUpdateSecretV3();
   const { mutateAsync: createFolder } = useCreateFolder();
+  const { data: projectTags, isLoading: isTagsLoading } = useGetWsTags(
+    canReadTags ? workspaceId : ""
+  );
 
-  const handleFormSubmit = async ({ key, value, environments: selectedEnv }: TFormSchema) => {
+  const handleFormSubmit = async ({ key, value, environments: selectedEnv, tags }: TFormSchema) => {
     const environmentsSelected = environments.filter(({ slug }) => selectedEnv[slug]);
     const isEnvironmentsSelected = environmentsSelected.length;
 
@@ -120,7 +121,8 @@ export const CreateSecretForm = ({
             secretPath,
             secretKey: key,
             secretValue: value || "",
-            type: SecretType.Shared
+            type: SecretType.Shared,
+            tagIds: tags?.map((el) => el.value)
           })),
           environment
         };
@@ -134,7 +136,8 @@ export const CreateSecretForm = ({
           secretKey: key,
           secretValue: value || "",
           secretComment: "",
-          type: SecretType.Shared
+          type: SecretType.Shared,
+          tagIds: tags?.map((el) => el.value)
         })),
         environment
       };
@@ -197,12 +200,6 @@ export const CreateSecretForm = ({
   };
 
   return (
-    <Modal isOpen={isOpen} onOpenChange={onTogglePopUp}>
-      <ModalContent
-        className="max-h-[80vh] overflow-y-auto"
-        title="Bulk Create & Update"
-        subTitle="Create & update a secret across many environments"
-      >
     <form onSubmit={handleSubmit(handleFormSubmit)} noValidate>
       <FormControl
         label="Key"
@@ -233,6 +230,39 @@ export const CreateSecretForm = ({
           </FormControl>
         )}
       />
+      <Controller
+        control={control}
+        name="tags"
+        render={({ field }) => (
+          <FormControl
+            label="Tags"
+            isError={Boolean(errors?.value)}
+            errorText={errors?.value?.message}
+            helperText={
+              !canReadTags ? (
+                <div className="flex items-center space-x-2">
+                  <FontAwesomeIcon icon={faTriangleExclamation} className="text-yellow-400" />
+                  <span>You do not have permission to read tags.</span>
+                </div>
+              ) : (
+                ""
+              )
+            }
+          >
+            <MultiSelect
+              className="w-full"
+              placeholder="Select tags to assign to secrets..."
+              isMulti
+              name="tagIds"
+              isDisabled={!canReadTags}
+              isLoading={isTagsLoading}
+              options={projectTags?.map((el) => ({ label: el.slug, value: el.id }))}
+              value={field.value}
+              onChange={field.onChange}
+            />
+          </FormControl>
+        )}
+      />
       <FormLabel label="Environments" className="mb-2" />
       <div className="thin-scrollbar grid max-h-64 grid-cols-3 gap-4 overflow-auto py-2">
         {environments
@@ -270,10 +300,7 @@ export const CreateSecretForm = ({
                             className="max-w-[150px]"
                             content="Secret already exists, and it will be overwritten"
                           >
-                                <FontAwesomeIcon
-                                  icon={faWarning}
-                                  className="ml-1 text-yellow-400"
-                                />
+                            <FontAwesomeIcon icon={faWarning} className="ml-1 text-yellow-400" />
                           </Tooltip>
                         )}
                       </span>
@@ -304,7 +331,5 @@ export const CreateSecretForm = ({
         </Button>
       </div>
     </form>
-      </ModalContent>
-    </Modal>
   );
 };