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,13 +533,24 @@ const SecretMainPageContent = () => {
               onChangePerPage={(newPerPage) => setPerPage(newPerPage)}
             />
           )}
-          <CreateSecretForm
-            environment={environment}
-            workspaceId={workspaceId}
-            secretPath={secretPath}
-            autoCapitalize={currentWorkspace?.autoCapitalization}
-            isProtectedBranch={isProtectedBranch}
-          />
+          <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}
+                secretPath={secretPath}
+                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,67 +97,90 @@ 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"
+        isRequired
+        isError={Boolean(errors?.key)}
+        errorText={errors?.key?.message}
       >
-        <form onSubmit={handleSubmit(handleFormSubmit)} noValidate>
+        <Input
+          {...register("key")}
+          placeholder="Type your secret name"
+          onPaste={handlePaste}
+          autoCapitalization={autoCapitalize}
+        />
+      </FormControl>
+      <Controller
+        control={control}
+        name="value"
+        render={({ field }) => (
           <FormControl
-            label="Key"
-            isRequired
-            isError={Boolean(errors?.key)}
-            errorText={errors?.key?.message}
+            label="Value"
+            isError={Boolean(errors?.value)}
+            errorText={errors?.value?.message}
           >
-            <Input
-              {...register("key")}
-              placeholder="Type your secret name"
-              onPaste={handlePaste}
-              autoCapitalization={autoCapitalize}
+            <InfisicalSecretInput
+              {...field}
+              environment={environment}
+              secretPath={secretPath}
+              containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-mineshaft-900 px-2 py-1.5"
             />
           </FormControl>
-          <Controller
-            control={control}
-            name="value"
-            render={({ field }) => (
-              <FormControl
-                label="Value"
-                isError={Boolean(errors?.value)}
-                errorText={errors?.value?.message}
-              >
-                <InfisicalSecretInput
-                  {...field}
-                  environment={environment}
-                  secretPath={secretPath}
-                  containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-mineshaft-900 px-2 py-1.5"
-                />
-              </FormControl>
-            )}
-          />
-          <div className="mt-7 flex items-center">
-            <Button
-              isDisabled={isSubmitting}
-              isLoading={isSubmitting}
-              key="layout-create-project-submit"
-              className="mr-4"
-              type="submit"
-            >
-              Create Secret
-            </Button>
-            <Button
-              key="layout-cancel-create-project"
-              onClick={() => closePopUp(PopUpNames.CreateSecretForm)}
-              variant="plain"
-              colorSchema="secondary"
-            >
-              Cancel
-            </Button>
-          </div>
-        </form>
-      </ModalContent>
-    </Modal>
+        )}
+      />
+      <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}
+          isLoading={isSubmitting}
+          key="layout-create-project-submit"
+          className="mr-4"
+          type="submit"
+        >
+          Create Secret
+        </Button>
+        <Button
+          key="layout-cancel-create-project"
+          onClick={() => closePopUp(PopUpNames.CreateSecretForm)}
+          variant="plain"
+          colorSchema="secondary"
+        >
+          Cancel
+        </Button>
+      </div>
+    </form>
   );
 };

frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx

@@ -1116,13 +1116,23 @@ export const SecretOverviewPage = () => {
           )}
         </div>
       </div>
-      <CreateSecretForm
-        secretPath={secretPath}
+      <Modal
         isOpen={popUp.addSecretsInAllEnvs.isOpen}
-        getSecretByKey={getSecretByKey}
-        onTogglePopUp={(isOpen) => handlePopUpToggle("addSecretsInAllEnvs", isOpen)}
-        onClose={() => handlePopUpClose("addSecretsInAllEnvs")}
-      />
+        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}
+            getSecretByKey={getSecretByKey}
+            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,114 +200,136 @@ 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"
+        isRequired
+        isError={Boolean(errors?.key)}
+        errorText={errors?.key?.message}
       >
-        <form onSubmit={handleSubmit(handleFormSubmit)} noValidate>
+        <Input
+          {...register("key")}
+          placeholder="Type your secret name"
+          onPaste={handlePaste}
+          autoCapitalization={currentWorkspace?.autoCapitalization}
+        />
+      </FormControl>
+      <Controller
+        control={control}
+        name="value"
+        render={({ field }) => (
           <FormControl
-            label="Key"
-            isRequired
-            isError={Boolean(errors?.key)}
-            errorText={errors?.key?.message}
+            label="Value"
+            isError={Boolean(errors?.value)}
+            errorText={errors?.value?.message}
           >
-            <Input
-              {...register("key")}
-              placeholder="Type your secret name"
-              onPaste={handlePaste}
-              autoCapitalization={currentWorkspace?.autoCapitalization}
+            <InfisicalSecretInput
+              {...field}
+              containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-mineshaft-900 px-2 py-1.5"
             />
           </FormControl>
-          <Controller
-            control={control}
-            name="value"
-            render={({ field }) => (
-              <FormControl
-                label="Value"
-                isError={Boolean(errors?.value)}
-                errorText={errors?.value?.message}
-              >
-                <InfisicalSecretInput
-                  {...field}
-                  containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-mineshaft-900 px-2 py-1.5"
-                />
-              </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
-              .filter((environmentSlug) =>
-                permission.can(
-                  ProjectPermissionActions.Create,
-                  subject(ProjectPermissionSub.Secrets, {
-                    environment: environmentSlug.slug,
-                    secretPath,
-                    secretName: "*",
-                    secretTags: ["*"]
-                  })
-                )
+        )}
+      />
+      <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>
+              ) : (
+                ""
               )
-              .map((env) => {
-                return (
-                  <Controller
-                    name={`environments.${env.slug}`}
-                    key={`secret-input-${env.slug}`}
-                    control={control}
-                    render={({ field }) => (
-                      <Checkbox
-                        isChecked={field.value}
-                        onCheckedChange={field.onChange}
-                        id={`secret-input-${env.slug}`}
-                        className="!justify-start"
-                      >
-                        <span className="flex w-full flex-row items-center justify-start whitespace-pre-wrap">
-                          <span title={env.name} className="truncate">
-                            {env.name}
-                          </span>
-                          <span>
-                            {getSecretByKey(env.slug, newSecretKey) && (
-                              <Tooltip
-                                className="max-w-[150px]"
-                                content="Secret already exists, and it will be overwritten"
-                              >
-                                <FontAwesomeIcon
-                                  icon={faWarning}
-                                  className="ml-1 text-yellow-400"
-                                />
-                              </Tooltip>
-                            )}
-                          </span>
-                        </span>
-                      </Checkbox>
-                    )}
-                  />
-                );
-              })}
-          </div>
-          <div className="mt-7 flex items-center">
-            <Button
-              isDisabled={isSubmitting}
-              isLoading={isSubmitting}
-              key="layout-create-project-submit"
-              className="mr-4"
-              type="submit"
-            >
-              Create Secret
-            </Button>
-            <Button
-              key="layout-cancel-create-project"
-              onClick={onClose}
-              variant="plain"
-              colorSchema="secondary"
-            >
-              Cancel
-            </Button>
-          </div>
-        </form>
-      </ModalContent>
-    </Modal>
+            }
+          >
+            <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
+          .filter((environmentSlug) =>
+            permission.can(
+              ProjectPermissionActions.Create,
+              subject(ProjectPermissionSub.Secrets, {
+                environment: environmentSlug.slug,
+                secretPath,
+                secretName: "*",
+                secretTags: ["*"]
+              })
+            )
+          )
+          .map((env) => {
+            return (
+              <Controller
+                name={`environments.${env.slug}`}
+                key={`secret-input-${env.slug}`}
+                control={control}
+                render={({ field }) => (
+                  <Checkbox
+                    isChecked={field.value}
+                    onCheckedChange={field.onChange}
+                    id={`secret-input-${env.slug}`}
+                    className="!justify-start"
+                  >
+                    <span className="flex w-full flex-row items-center justify-start whitespace-pre-wrap">
+                      <span title={env.name} className="truncate">
+                        {env.name}
+                      </span>
+                      <span>
+                        {getSecretByKey(env.slug, newSecretKey) && (
+                          <Tooltip
+                            className="max-w-[150px]"
+                            content="Secret already exists, and it will be overwritten"
+                          >
+                            <FontAwesomeIcon icon={faWarning} className="ml-1 text-yellow-400" />
+                          </Tooltip>
+                        )}
+                      </span>
+                    </span>
+                  </Checkbox>
+                )}
+              />
+            );
+          })}
+      </div>
+      <div className="mt-7 flex items-center">
+        <Button
+          isDisabled={isSubmitting}
+          isLoading={isSubmitting}
+          key="layout-create-project-submit"
+          className="mr-4"
+          type="submit"
+        >
+          Create Secret
+        </Button>
+        <Button
+          key="layout-cancel-create-project"
+          onClick={onClose}
+          variant="plain"
+          colorSchema="secondary"
+        >
+          Cancel
+        </Button>
+      </div>
+    </form>
   );
 };