Merge pull request #4641 from Infisical/fix/secrets-tag-editor

Fix: tag modal to create and add a tag to the secret.

frontend/src/components/tags/CreateTagModal/CreateTagModal.tsx

@@ -17,6 +17,7 @@ import {
 } from "@app/components/v2";
 import { useProject } from "@app/context";
 import { useCreateWsTag } from "@app/hooks/api";
+import { SecretV3RawSanitized, WsTag } from "@app/hooks/api/types";
 import { slugSchema } from "@app/lib/schemas";
 
 export const secretTagsColors = [
@@ -85,6 +86,8 @@ const isValidHexColor = (hexColor: string) => {
 type Props = {
   isOpen?: boolean;
   onToggle: (isOpen: boolean) => void;
+  append: (data: WsTag) => void;
+  currentSecret?: SecretV3RawSanitized;
 };
 
 const createTagSchema = z.object({
@@ -100,7 +103,7 @@ type TagColor = {
   name: string;
 };
 
-export const CreateTagModal = ({ isOpen, onToggle }: Props): JSX.Element => {
+export const CreateTagModal = ({ isOpen, onToggle, append, currentSecret }: Props): JSX.Element => {
   const {
     control,
     reset,
@@ -128,11 +131,12 @@ export const CreateTagModal = ({ isOpen, onToggle }: Props): JSX.Element => {
 
   const onFormSubmit = async ({ slug, color }: FormData) => {
     try {
-      await createWsTag({
+      const data = await createWsTag({
         projectId,
         tagColor: color,
         tagSlug: slug
       });
+      append(data);
       onToggle(false);
       reset();
       createNotification({
@@ -151,8 +155,12 @@ export const CreateTagModal = ({ isOpen, onToggle }: Props): JSX.Element => {
   return (
     <Modal isOpen={isOpen} onOpenChange={onToggle}>
       <ModalContent
-        title="Create tag"
-        subTitle="Specify your tag name, and the slug will be created automatically."
+        title={currentSecret ? `Create tag for ${currentSecret.key}` : "Create tag"}
+        subTitle={
+          currentSecret
+            ? `Create a new tag, and it will be automatically linked to secret: ${currentSecret.key}.`
+            : "Specify your tag name, and the slug will be created automatically."
+        }
       >
         <form onSubmit={handleSubmit(onFormSubmit)}>
           <Controller
@@ -253,7 +261,7 @@ export const CreateTagModal = ({ isOpen, onToggle }: Props): JSX.Element => {
               isDisabled={isSubmitting}
               isLoading={isSubmitting}
             >
-              Create
+              {currentSecret ? "Create and Add" : "Create"}
             </Button>
             <ModalClose asChild>
               <Button variant="plain" colorSchema="secondary">

frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretItem.tsx

@@ -79,7 +79,7 @@ type Props = {
   isSelected?: boolean;
   onToggleSecretSelect: (secret: SecretV3RawSanitized) => void;
   tags: WsTag[];
-  onCreateTag: () => void;
+  onCreateTag: (secret?: SecretV3RawSanitized) => void;
   environment: string;
   secretPath: string;
   onShareSecret: (sec: SecretV3RawSanitized) => void;
@@ -731,7 +731,7 @@ export const SecretItem = memo(
                               className="h-3 w-3"
                             />
                           }
-                          onClick={onCreateTag}
+                          onClick={() => onCreateTag(secret)}
                         >
                           Create a tag
                         </Button>
@@ -924,7 +924,7 @@ export const SecretItem = memo(
                               className="h-3 w-3"
                             />
                           }
-                          onClick={onCreateTag}
+                          onClick={() => onCreateTag(secret)}
                         >
                           Create a tag
                         </Button>

frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretListView.tsx

@@ -465,6 +465,22 @@ export const SecretListView = ({
     [environment, secretPath, isProtectedBranch, isBatchMode, projectId, addPendingChange]
   );
 
+  // Function to append newly created tag to the current secret
+  const append = useCallback(
+    (newTag: WsTag) => {
+      const currentSecret = popUp.createTag.data as SecretV3RawSanitized;
+      if (!currentSecret) return;
+
+      const updatedTags = [...(currentSecret.tags || []), { id: newTag.id, slug: newTag.slug }];
+
+      handleSaveSecret(currentSecret, {
+        ...currentSecret,
+        tags: updatedTags
+      });
+    },
+    [popUp.createTag.data, handleSaveSecret]
+  );
+
   const handleSecretDelete = useCallback(async () => {
     const {
       key,
@@ -552,7 +568,13 @@ export const SecretListView = ({
   ]);
 
   // for optimization on minimise re-rendering of secret items
-  const onCreateTag = useCallback(() => handlePopUpOpen("createTag"), []);
+  const onCreateTag = useCallback((secret?: SecretV3RawSanitized) => {
+    if (secret) {
+      handlePopUpOpen("createTag", secret);
+    } else {
+      handlePopUpOpen("createTag");
+    }
+  }, []);
   const onDeleteSecret = useCallback(
     (sec: SecretV3RawSanitized) => handlePopUpOpen("deleteSecret", sec),
     []
@@ -640,6 +662,8 @@ export const SecretListView = ({
       <CreateTagModal
         isOpen={popUp.createTag.isOpen}
         onToggle={(isOpen) => handlePopUpToggle("createTag", isOpen)}
+        append={append}
+        currentSecret={popUp.createTag.data}
       />
       <AddShareSecretModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
     </>