Merge pull request #4491 from Infisical/secrets-page-ui-optimization

Optimize re-render issue on secrets page

frontend/src/hooks/api/migration/queries.tsx

@@ -1,5 +1,7 @@
-import { apiRequest } from "@app/config/request";
 import { useQuery } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
 import { ExternalMigrationProviders } from "./types";
 
 const externalMigrationQueryKeys = {

frontend/src/pages/organization/SettingsPage/components/ExternalMigrationsTab/components/VaultPlatformModal.tsx

@@ -15,8 +15,8 @@ import {
   OrgPermissionSubjects
 } from "@app/context/OrgPermissionContext/types";
 import { gatewaysQueryKeys } from "@app/hooks/api";
-import { useImportVault } from "@app/hooks/api/migration/mutations";
 import { useHasCustomMigrationAvailable } from "@app/hooks/api/migration";
+import { useImportVault } from "@app/hooks/api/migration/mutations";
 import { ExternalMigrationProviders } from "@app/hooks/api/migration/types";
 
 type Props = {

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

@@ -75,7 +75,7 @@ type Props = {
   onCreateTag: () => void;
   environment: string;
   secretPath: string;
-  handleSecretShare: () => void;
+  onShareSecret: (sec: SecretV3RawSanitized) => void;
   importedBy?: {
     environment: { name: string; slug: string };
     folders: {
@@ -102,7 +102,7 @@ export const SecretItem = memo(
     onToggleSecretSelect,
     environment,
     secretPath,
-    handleSecretShare,
+    onShareSecret,
     importedBy,
     isPending,
     pendingAction,
@@ -682,7 +682,7 @@ export const SecretItem = memo(
                       variant="plain"
                       size="md"
                       ariaLabel="share-secret"
-                      onClick={handleSecretShare}
+                      onClick={() => onShareSecret(secret)}
                     >
                       <Tooltip content="Share Secret">
                         <FontAwesomeSymbol

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

@@ -1,4 +1,4 @@
-import { useCallback } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useQueryClient } from "@tanstack/react-query";
 
@@ -100,6 +100,11 @@ export const SecretListView = ({
   });
   const { addPendingChange } = useBatchModeActions();
 
+  const pendingChangesRef = useRef(pendingChanges);
+  useEffect(() => {
+    pendingChangesRef.current = pendingChanges;
+  }, [pendingChanges]);
+
   const handleSecretOperation = async (
     operation: "create" | "update" | "delete",
     type: SecretType,
@@ -337,7 +342,10 @@ export const SecretListView = ({
                 secretPath
               });
             } else {
-              const trueOriginalSecret = getTrueOriginalSecret(orgSecret, pendingChanges.secrets);
+              const trueOriginalSecret = getTrueOriginalSecret(
+                orgSecret,
+                pendingChangesRef.current.secrets
+              );
 
               const updateChange: PendingSecretUpdate = {
                 id: orgSecret.id,
@@ -442,15 +450,7 @@ export const SecretListView = ({
         });
       }
     },
-    [
+    [environment, secretPath, isProtectedBranch, isBatchMode, workspaceId, addPendingChange]
-      environment,
-      secretPath,
-      isProtectedBranch,
-      isBatchMode,
-      workspaceId,
-      addPendingChange,
-      pendingChanges.secrets
-    ]
   );
 
   const handleSecretDelete = useCallback(async () => {
@@ -535,6 +535,13 @@ export const SecretListView = ({
     (sec: SecretV3RawSanitized) => handlePopUpOpen("secretDetail", sec),
     []
   );
+  const onShareSecret = useCallback(
+    (sec: SecretV3RawSanitized) =>
+      handlePopUpOpen("createSharedSecret", {
+        value: sec.valueOverride ?? sec.value
+      }),
+    []
+  );
 
   return (
     <>
@@ -557,11 +564,7 @@ export const SecretListView = ({
           onDetailViewSecret={onDetailViewSecret}
           importedBy={importedBy}
           onCreateTag={onCreateTag}
-          handleSecretShare={() =>
+          onShareSecret={onShareSecret}
-            handlePopUpOpen("createSharedSecret", {
-              value: secret.valueOverride ?? secret.value
-            })
-          }
           isPending={secret.isPending}
           pendingAction={secret.pendingAction}
         />