Merge pull request #4928 from Infisical/fix/copy-secret-audit-log

fix: copy secret audit log

frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx

@@ -10,7 +10,6 @@ import {
   faXmark
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useQueryClient } from "@tanstack/react-query";
 import { twMerge } from "tailwind-merge";
 
 import { createNotification } from "@app/components/notifications";
@@ -33,11 +32,7 @@ import {
 } from "@app/context";
 import { ProjectPermissionSecretActions } from "@app/context/ProjectPermissionContext/types";
 import { usePopUp, useToggle } from "@app/hooks";
-import {
-  dashboardKeys,
-  fetchSecretValue,
-  useGetSecretValue
-} from "@app/hooks/api/dashboard/queries";
+import { useGetSecretValue } from "@app/hooks/api/dashboard/queries";
 import { ProjectEnv, SecretType, SecretV3RawSanitized } from "@app/hooks/api/types";
 import { hasSecretReadValueOrDescribePermission } from "@app/lib/fn/permission";
 import { CollapsibleSecretImports } from "@app/pages/secret-manager/SecretDashboardPage/components/SecretListView/CollapsibleSecretImports";
@@ -109,8 +104,6 @@ export const SecretEditRow = ({
     "editSecret"
   ] as const);
 
-  const queryClient = useQueryClient();
-
   const { currentProject } = useProject();
 
   const [isFieldFocused, setIsFieldFocused] = useToggle();
@@ -137,19 +130,18 @@ export const SecretEditRow = ({
   const {
     data: secretValueData,
     isPending: isPendingSecretValueData,
-    isError: isErrorFetchingSecretValue
+    isError: isErrorFetchingSecretValue,
+    refetch: refetchSecretValue
   } = useGetSecretValue(fetchSecretValueParams, {
     enabled: canFetchValue && (isVisible || isFieldFocused)
   });
 
   const isFetchingSecretValue = canFetchValue && isPendingSecretValueData;
-  const isSecretValueFetched = Boolean(secretValueData);
 
   const {
     handleSubmit,
     control,
     reset,
-    getValues,
     setValue,
     formState: { isDirty, isSubmitting }
   } = useForm({
@@ -178,34 +170,17 @@ export const SecretEditRow = ({
   };
 
   const handleCopySecretToClipboard = async () => {
-    if (!isSecretValueFetched && !isDirty) {
-      try {
-        const data = await fetchSecretValue(fetchSecretValueParams);
+    try {
+      const { data } = await refetchSecretValue();
 
-        queryClient.setQueryData(dashboardKeys.getSecretValue(fetchSecretValueParams), data);
-
-        await window.navigator.clipboard.writeText(data.valueOverride ?? data.value);
-        createNotification({ type: "success", text: "Copied secret to clipboard" });
-        return;
-      } catch (e) {
-        console.error(e);
-        createNotification({
-          type: "error",
-          text: "Failed to fetch secret value."
-        });
-        return;
-      }
-    }
-
-    const { value } = getValues();
-    if (value) {
-      try {
-        await window.navigator.clipboard.writeText(value);
-        createNotification({ type: "success", text: "Copied secret to clipboard" });
-      } catch (error) {
-        console.log(error);
-        createNotification({ type: "error", text: "Failed to copy secret to clipboard" });
-      }
+      await window.navigator.clipboard.writeText(data?.valueOverride ?? data?.value ?? "");
+      createNotification({ type: "success", text: "Copied secret to clipboard" });
+    } catch (e) {
+      console.error(e);
+      createNotification({
+        type: "error",
+        text: "Failed to fetch secret value."
+      });
     }
   };
 

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

@@ -47,13 +47,9 @@ import { faEyeSlash, faKey, faRotate, faWarning } from "@fortawesome/free-solid-
 import { PendingAction } from "@app/hooks/api/secretFolders/types";
 import { format } from "date-fns";
 import { CreateReminderForm } from "@app/pages/secret-manager/SecretDashboardPage/components/SecretListView/CreateReminderForm";
-import {
-  dashboardKeys,
-  fetchSecretValue,
-  useGetSecretValue
-} from "@app/hooks/api/dashboard/queries";
+import { useGetSecretValue } from "@app/hooks/api/dashboard/queries";
 import { createNotification } from "@app/components/notifications";
-import { useQueryClient } from "@tanstack/react-query";
+import { DashboardSecretValue } from "@app/hooks/api/dashboard/types";
 import {
   FontAwesomeSpriteName,
   formSchema,
@@ -124,7 +120,6 @@ export const SecretItem = memo(
     const { removePendingChange } = useBatchModeActions();
 
     const [isFieldFocused, setIsFieldFocused] = useToggle();
-    const queryClient = useQueryClient();
 
     const canFetchSecretValue =
       !originalSecret.secretValueHidden &&
@@ -142,7 +137,8 @@ export const SecretItem = memo(
     const {
       data: secretValueData,
       isPending: isPendingSecretValueData,
-      isError: isErrorFetchingSecretValue
+      isError: isErrorFetchingSecretValue,
+      refetch: refetchSecretValueData
     } = useGetSecretValue(fetchSecretValueParams, {
       enabled: canFetchSecretValue && (isVisible || isFieldFocused)
     });
@@ -210,7 +206,6 @@ export const SecretItem = memo(
       watch,
       setValue,
       reset,
-      getValues,
       trigger,
       formState: { isDirty, isSubmitting, errors },
       getFieldState
@@ -386,37 +381,25 @@ export const SecretItem = memo(
       }
     };
 
-    const fetchValue = async () => {
-      if (secretValueData) return secretValueData;
-
-      try {
-        const data = await fetchSecretValue(fetchSecretValueParams);
-
-        queryClient.setQueryData(dashboardKeys.getSecretValue(fetchSecretValueParams), data);
-
-        return data;
-      } catch (e) {
-        console.error(e);
+    const fetchValue = async (): Promise<DashboardSecretValue | undefined> => {
+      const { data, isRefetchError } = await refetchSecretValueData();
+      if (isRefetchError) {
         createNotification({
           type: "error",
           text: "Failed to fetch secret value"
         });
-        throw e;
       }
+      if (!data) return undefined;
+
+      return data;
     };
 
     const copyTokenToClipboard = async () => {
-      if (hasFetchedSecretValue) {
-        const [overrideValue, value] = getValues(["value", "valueOverride"]);
-        if (isOverridden) {
-          navigator.clipboard.writeText(value as string);
-        } else {
-          navigator.clipboard.writeText(overrideValue as string);
-        }
-      } else {
-        const data = await fetchValue();
-        navigator.clipboard.writeText((data.valueOverride ?? data.value) as string);
-      }
+      const data = await fetchValue();
+      if (!data) return;
+
+      navigator.clipboard.writeText(data.valueOverride ?? data.value);
+
       setIsSecValueCopied.on();
     };