Add filter imports and minor improvements to allSecretImports logic

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

@@ -1,5 +1,4 @@
 import { SecretV3Raw } from "../secrets/types";
-import { WsTag } from "../types";
 import { WorkspaceEnv } from "../workspace/types";
 
 export type TSecretImport = {
@@ -92,7 +91,7 @@ export type TDeleteSecretImportDTO = {
   path?: string;
 };
 
-export type SecretImportData = {
+export type TSecretImportMultiEnvData = {
   currentEnv: string;
   environment: string;
   secretPath: string;
@@ -104,7 +103,15 @@ export type SecretImportData = {
     key: string;
     value: string;
     secretValueHidden: boolean;
-    tags?: WsTag[];
+    tags?: {
+      id: string;
+      slug: string;
+      color?: string;
+      projectId: string;
+      createdAt: string;
+      updatedAt: string;
+      __v: number;
+    }[];
     comment?: string;
     createdAt: string;
     updatedAt: string;

frontend/src/hooks/utils/secrets-overview.tsx

@@ -1,8 +1,7 @@
 import { useCallback, useMemo } from "react";
 
 import { DashboardProjectSecretsOverview } from "@app/hooks/api/dashboard/types";
-
-import { SecretImportData } from "../api/secretImports/types";
+import { TSecretImportMultiEnvData } from "@app/hooks/api/secretImports/types";
 
 type FolderNameAndDescription = {
   name: string;
@@ -99,31 +98,28 @@ export const useSecretOverview = (secrets: DashboardProjectSecretsOverview["secr
   return { secKeys, getSecretByKey, getEnvSecretKeyCount };
 };
 
-export const useSecretImportOverview = (secretImports: SecretImportData[][] | undefined) => {
+export const useSecretImportOverview = (secretImports: TSecretImportMultiEnvData[] | undefined) => {
   const uniqueEnvSecretPaths = useMemo(() => {
-    const uniqueMap: Record<string, SecretImportData[]> = {};
+    const uniqueMap = new Map<string, TSecretImportMultiEnvData>();
     secretImports?.forEach((importData) => {
-      importData?.forEach((envImport) => {
-        if (envImport) {
-          const key = `${envImport.environment}-${envImport.secretPath}`;
-          const existing = uniqueMap[key];
-          uniqueMap[key] = existing ? [...existing, envImport] : [envImport];
+      if (importData) {
+        const key = `${importData.environment}-${importData.secretPath}`;
+        if (!uniqueMap.has(key)) {
+          uniqueMap.set(key, importData);
         }
-      });
+      }
     });
-    return uniqueMap;
+    return Array.from(uniqueMap.values());
   }, [secretImports]);
 
   const isSecretImportPresent = useCallback(
     (sourceEnv: string, targetEnv: string, secretPath: string) => {
       return (
-        secretImports?.some((importData) =>
-          importData?.some(
-            (envImport) =>
-              envImport?.currentEnv === sourceEnv &&
-              envImport?.environment === targetEnv &&
-              envImport?.secretPath === secretPath
-          )
+        secretImports?.some(
+          (importData) =>
+            importData?.currentEnv === sourceEnv &&
+            importData?.environment === targetEnv &&
+            importData?.secretPath === secretPath
         ) ?? false
       );
     },

frontend/src/pages/secret-manager/OverviewPage/OverviewPage.tsx

@@ -7,6 +7,7 @@ import {
   faAngleDown,
   faArrowDown,
   faArrowUp,
+  faFileImport,
   faFingerprint,
   faFolder,
   faFolderBlank,
@@ -67,7 +68,7 @@ import { DashboardSecretsOrderBy } from "@app/hooks/api/dashboard/types";
 import { OrderByDirection } from "@app/hooks/api/generic/types";
 import { useUpdateFolderBatch } from "@app/hooks/api/secretFolders/queries";
 import { TUpdateFolderBatchDTO } from "@app/hooks/api/secretFolders/types";
-import { SecretImportData } from "@app/hooks/api/secretImports/types";
+import { TSecretImportMultiEnvData } from "@app/hooks/api/secretImports/types";
 import { SecretType, SecretV3RawSanitized, TSecretFolder } from "@app/hooks/api/types";
 import { ProjectType, ProjectVersion } from "@app/hooks/api/workspace/types";
 import {
@@ -100,7 +101,8 @@ export enum EntryType {
 enum RowType {
   Folder = "folder",
   DynamicSecret = "dynamic",
-  Secret = "secret"
+  Secret = "secret",
+  Import = "import"
 }
 
 type Filter = {
@@ -110,7 +112,8 @@ type Filter = {
 const DEFAULT_FILTER_STATE = {
   [RowType.Folder]: true,
   [RowType.DynamicSecret]: true,
-  [RowType.Secret]: true
+  [RowType.Secret]: true,
+  [RowType.Import]: true
 };
 
 export const OverviewPage = () => {
@@ -203,7 +206,18 @@ export const OverviewPage = () => {
     environments: (userAvailableEnvs || []).map(({ slug }) => slug)
   });
   const secretImportsData = useMemo(
-    () => secretImports?.map((s) => s.data as SecretImportData[]) ?? [],
+    () =>
+      (secretImports?.map((s) => s.data as TSecretImportMultiEnvData[]) ?? [])
+        ?.flatMap((s) => s ?? [])
+        ?.filter((secretImport) =>
+          permission.can(
+            ProjectPermissionActions.Read,
+            subject(ProjectPermissionSub.SecretImports, {
+              environment: secretImport.currentEnv,
+              secretPath
+            })
+          )
+        ),
     [secretImports]
   );
   const { uniqueEnvSecretPaths, isSecretImportPresent } =
@@ -768,6 +782,19 @@ export const OverviewPage = () => {
                     </Button>
                   </DropdownMenuItem> */}
                   <DropdownMenuLabel>Filter project resources</DropdownMenuLabel>
+                  <DropdownMenuItem
+                    onClick={(e) => {
+                      e.preventDefault();
+                      handleToggleRowType(RowType.Import);
+                    }}
+                    icon={filter[RowType.Import] && <FontAwesomeIcon icon={faCheckCircle} />}
+                    iconPos="right"
+                  >
+                    <div className="flex items-center gap-2">
+                      <FontAwesomeIcon icon={faFileImport} className="text-green-700" />
+                      <span>Imports</span>
+                    </div>
+                  </DropdownMenuItem>
                   <DropdownMenuItem
                     onClick={(e) => {
                       e.preventDefault();
@@ -1071,16 +1098,19 @@ export const OverviewPage = () => {
                         key={`overview-${dynamicSecretName}-${index + 1}`}
                       />
                     ))}
-                    {Object.entries(uniqueEnvSecretPaths).map(([key, secretImportsAllEnvs]) => (
-                      <SecretOverviewImportListView
-                        secretImport={secretImportsAllEnvs[0]}
-                        isImportedSecretPresentInEnv={isSecretImportPresent}
-                        environments={visibleEnvs}
-                        key={`overview-${key}`}
-                        scrollOffset={debouncedScrollOffset}
-                        allSecretImports={secretImportsData}
-                      />
-                    ))}
+                    {filter.import &&
+                      Object.entries(uniqueEnvSecretPaths).map(([key, secretImportsAllEnvs]) => (
+                        <SecretOverviewImportListView
+                          secretImport={secretImportsAllEnvs}
+                          isImportedSecretPresentInEnv={isSecretImportPresent}
+                          environments={visibleEnvs}
+                          key={`overview-${key}`}
+                          scrollOffset={debouncedScrollOffset}
+                          allSecretImports={(
+                            secretImportsData?.flatMap((s) => s ?? []) ?? []
+                          ).filter(Boolean)}
+                        />
+                      ))}
                     {secKeys.map((key, index) => (
                       <SecretOverviewTableRow
                         isSelected={Boolean(selectedEntries.secret[key])}

frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewImportListView/SecretOverviewImportListView.tsx

@@ -1,17 +1,15 @@
-import { subject } from "@casl/ability";
 import { faCheck, faFileImport, faKey, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
 
 import { EmptyState, SecretInput, TableContainer, Td, Tr } from "@app/components/v2";
-import { ProjectPermissionActions, ProjectPermissionSub, useProjectPermission } from "@app/context";
 import { useToggle } from "@app/hooks";
-import { SecretImportData } from "@app/hooks/api/secretImports/types";
+import { TSecretImportMultiEnvData } from "@app/hooks/api/secretImports/types";
 import { EnvFolderIcon } from "@app/pages/secret-manager/SecretDashboardPage/components/SecretImportListView/SecretImportItem";
 import { computeImportedSecretRows } from "@app/pages/secret-manager/SecretDashboardPage/components/SecretImportListView/SecretImportListView";
 
 type Props = {
-  secretImport: SecretImportData;
+  secretImport: TSecretImportMultiEnvData;
   environments: { name: string; slug: string }[];
   isImportedSecretPresentInEnv: (
     sourceEnv: string,
@@ -19,7 +17,7 @@ type Props = {
     secretPath: string
   ) => boolean;
   scrollOffset: number;
-  allSecretImports: SecretImportData[][] | undefined;
+  allSecretImports: TSecretImportMultiEnvData[];
 };
 
 export const SecretOverviewImportListView = ({
@@ -27,27 +25,18 @@ export const SecretOverviewImportListView = ({
   environments = [],
   isImportedSecretPresentInEnv,
   scrollOffset,
-  allSecretImports
+  allSecretImports = []
 }: Props) => {
   const [isFormExpanded, setIsFormExpanded] = useToggle();
-  const { permission } = useProjectPermission();
   const environmentImportDetails = secretImport.environmentInfo;
   const totalCols = environments.length + 1;
 
-  const canReadSecretImports = permission.can(
-    ProjectPermissionActions.Read,
-    subject(ProjectPermissionSub.SecretImports, {
-      environment: environmentImportDetails.slug,
-      secretPath: secretImport.secretPath
-    })
-  );
-
   const computeImportedSecrets =
-    canReadSecretImports && allSecretImports
+    allSecretImports.length > 0
       ? computeImportedSecretRows(
           environmentImportDetails.slug,
           secretImport.secretPath,
-          (allSecretImports?.flatMap((s) => s ?? []) ?? []).filter(Boolean) as SecretImportData[]
+          allSecretImports
         )
       : [];
   return (
@@ -55,7 +44,7 @@ export const SecretOverviewImportListView = ({
       <Tr
         isHoverable
         isSelectable
-        onClick={() => canReadSecretImports && setIsFormExpanded.toggle()}
+        onClick={() => setIsFormExpanded.toggle()}
         className={`group ${isFormExpanded ? "border-t-2 border-mineshaft-500" : ""}`}
       >
         <Td className="sticky left-0 z-10 bg-mineshaft-800 bg-clip-padding px-0 py-0 group-hover:bg-mineshaft-700">
@@ -106,7 +95,7 @@ export const SecretOverviewImportListView = ({
           );
         })}
       </Tr>
-      {canReadSecretImports && isFormExpanded && (
+      {isFormExpanded && (
         <Tr>
           <Td
             colSpan={totalCols}