feat(folder-sec-overview): implemented folder based ui for sec overview

2026-05-02 03:02:03 -04:00 · 2023-06-13 19:25:50 +05:30
parent d590dd5db8
commit a6cf7107b9
10 changed files with 392 additions and 218 deletions
--- a/frontend/src/hooks/api/secretFolders/index.tsx
+++ b/frontend/src/hooks/api/secretFolders/index.tsx
@@ -1 +1,7 @@
-export { useCreateFolder, useDeleteFolder, useGetProjectFolders, useUpdateFolder } from './queries';
+export {
+  useCreateFolder,
+  useDeleteFolder,
+  useGetProjectFolders,
+  useGetProjectFoldersBatch,
+  useUpdateFolder
+} from './queries';
--- a/frontend/src/hooks/api/secretFolders/queries.tsx
+++ b/frontend/src/hooks/api/secretFolders/queries.tsx
@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useMutation, useQueries, useQuery, useQueryClient } from '@tanstack/react-query';

 import { apiRequest } from '@app/config/request';

@@ -7,6 +7,7 @@ import { secretSnapshotKeys } from '../secretSnapshots/queries';
 import {
  CreateFolderDTO,
  DeleteFolderDTO,
+  GetProjectFoldersBatchDTO,
  GetProjectFoldersDTO,
  TSecretFolder,
  UpdateFolderDTO
@@ -17,6 +18,26 @@ const queryKeys = {
    ['secret-folders', { workspaceId, environment, parentFolderId }] as const
 };

+const fetchProjectFolders = async (
+  workspaceId: string,
+  environment: string,
+  parentFolderId?: string,
+  parentFolderPath?: string
+) => {
+  const { data } = await apiRequest.get<{ folders: TSecretFolder[]; dir: TSecretFolder[] }>(
+    '/api/v1/folders',
+    {
+      params: {
+        workspaceId,
+        environment,
+        parentFolderId,
+        parentFolderPath
+      }
+    }
+  );
+  return data;
+};
+
 export const useGetProjectFolders = ({
  workspaceId,
  parentFolderId,
@@ -27,19 +48,7 @@ export const useGetProjectFolders = ({
  useQuery({
    queryKey: queryKeys.getSecretFolders(workspaceId, environment, parentFolderId),
    enabled: Boolean(workspaceId) && Boolean(environment) && !isPaused,
-    queryFn: async () => {
-      const { data } = await apiRequest.get<{ folders: TSecretFolder[]; dir: TSecretFolder[] }>(
-        '/api/v1/folders',
-        {
-          params: {
-            workspaceId,
-            environment,
-            parentFolderId
-          }
-        }
-      );
-      return data;
-    },
+    queryFn: async () => fetchProjectFolders(workspaceId, environment, parentFolderId),
    select: useCallback(
      ({ folders, dir }: { folders: TSecretFolder[]; dir: TSecretFolder[] }) => ({
        dir,
@@ -53,6 +62,25 @@ export const useGetProjectFolders = ({
    )
  });

+export const useGetProjectFoldersBatch = ({
+  folders = [],
+  isPaused,
+  parentFolderPath
+}: GetProjectFoldersBatchDTO) =>
+  useQueries({
+    queries: folders.map(({ workspaceId, environment, parentFolderId }) => ({
+      queryKey: queryKeys.getSecretFolders(workspaceId, environment, parentFolderPath),
+      queryFn: async () =>
+        fetchProjectFolders(workspaceId, environment, parentFolderId, parentFolderPath),
+      enabled: Boolean(workspaceId) && Boolean(environment) && !isPaused,
+      select: (data: { folders: TSecretFolder[]; dir: TSecretFolder[] }) => ({
+        environment,
+        folders: data.folders,
+        dir: data.dir
+      })
+    }))
+  });
+
 export const useCreateFolder = () => {
  const queryClient = useQueryClient();

--- a/frontend/src/hooks/api/secretFolders/types.ts
+++ b/frontend/src/hooks/api/secretFolders/types.ts
@@ -11,6 +11,12 @@ export type GetProjectFoldersDTO = {
  sortDir?: 'asc' | 'desc';
 };

+export type GetProjectFoldersBatchDTO = {
+  folders: Omit<GetProjectFoldersDTO, 'isPaused' | 'sortDir'>[];
+  isPaused?: boolean;
+  parentFolderPath?: string;
+};
+
 export type CreateFolderDTO = {
  workspaceId: string;
  environment: string;
--- a/frontend/src/hooks/api/secrets/queries.tsx
+++ b/frontend/src/hooks/api/secrets/queries.tsx
@@ -1,4 +1,5 @@
 /* eslint-disable no-param-reassign */
+import { useCallback } from 'react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';

 import {
@@ -29,14 +30,16 @@ export const secretKeys = {
 const fetchProjectEncryptedSecrets = async (
  workspaceId: string,
  env: string | string[],
-  folderId?: string
+  folderId?: string,
+  secretPath?: string
 ) => {
  if (typeof env === 'string') {
    const { data } = await apiRequest.get<{ secrets: EncryptedSecret[] }>('/api/v2/secrets', {
      params: {
        environment: env,
        workspaceId,
-        folderId: folderId || undefined
+        folderId: folderId || undefined,
+        secretPath
      }
    });
    return data.secrets;
@@ -52,7 +55,8 @@ const fetchProjectEncryptedSecrets = async (
        params: {
          environment: envPoint,
          workspaceId,
-          folderId
+          folderId,
+          secretPath
        }
      });
      allEnvData = allEnvData.concat(data.secrets);
@@ -77,7 +81,7 @@ export const useGetProjectSecrets = ({
    enabled: Boolean(decryptFileKey && workspaceId && env) && !isPaused,
    queryKey: secretKeys.getProjectSecret(workspaceId, env, folderId),
    queryFn: () => fetchProjectEncryptedSecrets(workspaceId, env, folderId),
-    select: (data) => {
+    select: useCallback((data: EncryptedSecret[]) => {
      const PRIVATE_KEY = localStorage.getItem('PRIVATE_KEY') as string;
      const latestKey = decryptFileKey;
      const key = decryptAssymmetric({
@@ -146,21 +150,24 @@ export const useGetProjectSecrets = ({
        }
      });
      return { secrets: sharedSecrets };
-    }
+    }, [])
  });

 export const useGetProjectSecretsByKey = ({
  workspaceId,
  env,
  decryptFileKey,
-  isPaused
+  isPaused,
+  folderId,
+  secretPath
 }: GetProjectSecretsDTO) =>
  useQuery({
    // wait for all values to be available
    enabled: Boolean(decryptFileKey && workspaceId && env) && !isPaused,
-    queryKey: secretKeys.getProjectSecret(workspaceId, env),
-    queryFn: () => fetchProjectEncryptedSecrets(workspaceId, env),
-    select: (data) => {
+    // right now secretpath is passed as folderid as only this is used in overview
+    queryKey: secretKeys.getProjectSecret(workspaceId, env, secretPath),
+    queryFn: () => fetchProjectEncryptedSecrets(workspaceId, env, folderId, secretPath),
+    select: useCallback((data: EncryptedSecret[]) => {
      const PRIVATE_KEY = localStorage.getItem('PRIVATE_KEY') as string;
      const latestKey = decryptFileKey;
      const key = decryptAssymmetric({
@@ -235,7 +242,7 @@ export const useGetProjectSecretsByKey = ({
      });

      return { secrets: sharedSecrets, uniqueSecCount: Object.keys(uniqSecKeys).length };
-    }
+    }, [])
  });

 const fetchEncryptedSecretVersion = async (secretId: string, offset: number, limit: number) => {
@@ -256,7 +263,7 @@ export const useGetSecretVersion = (dto: GetSecretVersionsDTO) =>
    enabled: Boolean(dto.secretId && dto.decryptFileKey),
    queryKey: secretKeys.getSecretVersion(dto.secretId),
    queryFn: () => fetchEncryptedSecretVersion(dto.secretId, dto.offset, dto.limit),
-    select: (data) => {
+    select: useCallback((data: EncryptedSecretVersion[]) => {
      const PRIVATE_KEY = localStorage.getItem('PRIVATE_KEY') as string;
      const latestKey = dto.decryptFileKey;
      const key = decryptAssymmetric({
@@ -278,7 +285,7 @@ export const useGetSecretVersion = (dto: GetSecretVersionsDTO) =>
          })
        }))
        .sort((a, b) => b.createdAt.localeCompare(a.createdAt));
-    }
+    }, [])
  });

 export const useBatchSecretsOp = () => {
--- a/frontend/src/hooks/api/secrets/types.ts
+++ b/frontend/src/hooks/api/secrets/types.ts
@@ -96,6 +96,7 @@ export type GetProjectSecretsDTO = {
  env: string | string[];
  decryptFileKey: UserWsKeyPair;
  folderId?: string;
+  secretPath?: string;
  isPaused?: boolean;
  onSuccess?: (data: DecryptedSecret[]) => void;
 };
--- a/frontend/src/pages/dashboard/[id].tsx
+++ b/frontend/src/pages/dashboard/[id].tsx
@@ -12,13 +12,6 @@ const Dashboard = () => {
  const queryEnv = router.query.env as string;
  const isOverviewMode = !queryEnv;

-  const onExploreEnv = (slug: string) => {
-    router.push({
-      pathname: router.pathname,
-      query: { ...router.query, env: slug }
-    });
-  };
-
  return (
    <>
      <Head>
@@ -29,11 +22,7 @@ const Dashboard = () => {
        <meta name="og:description" content={String(t('dashboard.og-description'))} />
      </Head>
      <div className="h-full">
-        {isOverviewMode ? (
-          <DashboardEnvOverview onEnvChange={onExploreEnv} />
-        ) : (
-          <DashboardPage envFromTop={queryEnv} />
-        )}
+        {isOverviewMode ? <DashboardEnvOverview /> : <DashboardPage envFromTop={queryEnv} />}
      </div>
    </>
  );
--- a/frontend/src/styles/globals.css
+++ b/frontend/src/styles/globals.css
@@ -4,20 +4,20 @@

@layer utilities {
  .flex-0 {
-    flex:0;
+    flex: 0;
  }
  .flex-2 {
    flex-grow: 2;
  }

  .flex-3 {
-      flex-grow: 3;
+    flex-grow: 3;
  }
 }

@layer components {
  .secret-table {
-    @apply bg-mineshaft-800 text-left text-bunker-300 w-full;
+    @apply w-full bg-mineshaft-800 text-left text-bunker-300;
  }

  /* padding except for comment column */
@@ -29,13 +29,37 @@
    @apply py-1 px-1 pr-2 text-sm;
  }

-  .secret-table th:not(:last-child),.secret-table td:not(:last-child) {
+  .secret-table th:not(:last-child),
+  .secret-table td:not(:last-child) {
    @apply border-r border-mineshaft-600;
  }

  .secret-table tr {
    @apply border-b border-mineshaft-600;
  }
+
+  .breadcrumb::after,
+  .breadcrumb::before {
+    content: '';
+    height: 60%;
+    width: 100%;
+    z-index: -1;
+    display: block;
+    position: absolute;
+    @apply bg-mineshaft-800;
+  }
+
+  .breadcrumb::after {
+    left: 5px;
+    bottom: -3px;
+    transform: skew(-30deg);
+  }
+
+  .breadcrumb::before {
+    left: 5px;
+    top: -3px;
+    transform: skew(30deg);
+  }
 }

@import '@fontsource/inter/400.css';
--- a/frontend/src/views/DashboardPage/DashboardEnvOverview.tsx
+++ b/frontend/src/views/DashboardPage/DashboardEnvOverview.tsx
@@ -1,35 +1,32 @@
 import { useEffect, useMemo, useState } from 'react';
-import { FormProvider, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useRouter } from 'next/router';
-import { faKey, faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons';
+import { faFolderOpen, faKey, faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { yupResolver } from '@hookform/resolvers/yup';

 import NavHeader from '@app/components/navigation/NavHeader';
 import { Button, Input, TableContainer, Tooltip } from '@app/components/v2';
 import { useWorkspace } from '@app/context';
 import {
+  useGetProjectFoldersBatch,
  useGetProjectSecretsByKey,
  useGetUserWsEnvironments,
  useGetUserWsKey
 } from '@app/hooks/api';
-import { WorkspaceEnv } from '@app/hooks/api/types';

 import { EnvComparisonRow } from './components/EnvComparisonRow';
-import { FormData, schema } from './DashboardPage.utils';
+import { FolderComparisonRow } from './components/EnvComparisonRow/FolderComparisonRow';

-export const DashboardEnvOverview = ({ onEnvChange }: { onEnvChange: any }) => {
+export const DashboardEnvOverview = () => {
  const { t } = useTranslation();
  const router = useRouter();

-  const [selectedEnv, setSelectedEnv] = useState<WorkspaceEnv | null>(null);
-
  const { currentWorkspace, isLoading } = useWorkspace();
  const workspaceId = currentWorkspace?._id as string;
  const { data: latestFileKey } = useGetUserWsKey(workspaceId);

  const [searchFilter, setSearchFilter] = useState('');
+  const secretPath = router.query?.secretPath as string;

  useEffect(() => {
    if (!isLoading && !workspaceId && router.isReady) {
@@ -38,14 +35,7 @@ export const DashboardEnvOverview = ({ onEnvChange }: { onEnvChange: any }) => {
  }, [isLoading, workspaceId, router.isReady]);

  const { data: wsEnv, isLoading: isEnvListLoading } = useGetUserWsEnvironments({
-    workspaceId,
-    onSuccess: (data) => {
-      // get an env with one of the access available
-      const env = data.find(({ isReadDenied }) => !isReadDenied);
-      if (env) {
-        setSelectedEnv(env);
-      }
-    }
+    workspaceId
  });

  const userAvailableEnvs = wsEnv?.filter(({ isReadDenied }) => !isReadDenied);
@@ -54,17 +44,32 @@ export const DashboardEnvOverview = ({ onEnvChange }: { onEnvChange: any }) => {
    workspaceId,
    env: userAvailableEnvs?.map((env) => env.slug) ?? [],
    decryptFileKey: latestFileKey!,
-    isPaused: false
+    isPaused: false,
+    secretPath
  });

-  const method = useForm<FormData>({
-    // why any: well yup inferred ts expects other keys to defined as undefined
-    defaultValues: secrets as any,
-    values: secrets as any,
-    mode: 'onBlur',
-    resolver: yupResolver(schema)
+  const folders = useGetProjectFoldersBatch({
+    folders:
+      userAvailableEnvs?.map((env) => ({
+        environment: env.slug,
+        workspaceId
+      })) ?? [],
+    parentFolderPath: secretPath
  });

+  const foldersGroupedByEnv = useMemo(() => {
+    const res: Record<string, Record<string, boolean>> = {};
+    folders.forEach(({ data }) => {
+      data?.folders
+        ?.filter(({ name }) => name.toLowerCase().includes(searchFilter))
+        ?.forEach((folder) => {
+          if (!res?.[folder.name]) res[folder.name] = {};
+          res[folder.name][data.environment] = true;
+        });
+    });
+    return res;
+  }, [folders, userAvailableEnvs, searchFilter]);
+
  const numSecretsMissingPerEnv = useMemo(() => {
    // first get all sec in the env then subtract with total to get missing ones
    const secPerEnvMissing: Record<string, number> = Object.fromEntries(
@@ -81,7 +86,43 @@ export const DashboardEnvOverview = ({ onEnvChange }: { onEnvChange: any }) => {
    return secPerEnvMissing;
  }, [secrets, userAvailableEnvs]);

-  const isReadOnly = selectedEnv?.isWriteDenied;
+  const onExploreEnv = (slug: string) => {
+    const query: Record<string, string> = { ...router.query, env: slug };
+    delete query.secretPath;
+    // the dir return will have the present directory folder id
+    // use that when clicking on explore to redirect user to there
+    const envFolder = folders.find(({ data }) => slug === data?.environment);
+    const dir = envFolder?.data?.dir?.pop();
+    if (dir) {
+      query.folderId = dir.id;
+    }
+
+    router.push({
+      pathname: router.pathname,
+      query
+    });
+  };
+
+  const onFolderClick = (path: string) => {
+    router.push({
+      pathname: router.pathname,
+      query: {
+        ...router.query,
+        secretPath: `${router.query?.secretPath || ''}/${path}`
+      }
+    });
+  };
+
+  const onFolderCrumbClick = (index: number) => {
+    const newSecPath = secretPath.split('/').filter(Boolean).slice(0, index).join('/');
+    const query = { ...router.query, secretPath: `/${newSecPath}` } as Record<string, string>;
+    // root condition
+    if (index === 0) delete query.secretPath;
+    router.push({
+      pathname: router.pathname,
+      query
+    });
+  };

  if (isSecretsLoading || isEnvListLoading) {
    return (
@@ -91,165 +132,195 @@ export const DashboardEnvOverview = ({ onEnvChange }: { onEnvChange: any }) => {
    );
  }

+  const filteredSecrets = Object.keys(secrets?.secrets || {})?.filter((secret: any) =>
+    secret.toUpperCase().includes(searchFilter.toUpperCase())
+  );
  // when secrets is not loading and secrets list is empty
-  const isDashboardSecretEmpty = !isSecretsLoading && !Object.keys(secrets?.secrets || {})?.filter((secret: any) => secret.toUpperCase().includes(searchFilter.toUpperCase()))?.length;
+  const isDashboardSecretEmpty = !isSecretsLoading && !filteredSecrets?.length;
+  const isFoldersEmtpy =
+    !folders.some(({ isLoading: isFolderLoading }) => isFolderLoading) &&
+    !Object.keys(foldersGroupedByEnv).length;
+  const isDashboardEmpty = isFoldersEmtpy && isDashboardSecretEmpty;

  return (
    <div className="container mx-auto max-w-full px-6 text-mineshaft-50 dark:[color-scheme:dark]">
-      <FormProvider {...method}>
-        <form autoComplete="off">
-          {/* breadcrumb row */}
-          <div className="relative right-5">
-            <NavHeader pageName={t('dashboard.title')} isProjectRelated />
+      <div className="relative right-5">
+        <NavHeader pageName={t('dashboard.title')} isProjectRelated />
+      </div>
+      <div className="mt-6">
+        <p className="text-3xl font-semibold text-bunker-100">Secrets Overview</p>
+        <p className="text-md text-bunker-300">
+          Inject your secrets using
+          <a
+            className="mx-1 text-primary/80 hover:text-primary"
+            href="https://infisical.com/docs/cli/overview"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Infisical CLI
+          </a>
+          or
+          <a
+            className="mx-1 text-primary/80 hover:text-primary"
+            href="https://infisical.com/docs/sdks/overview"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Infisical SDKs
+          </a>
+        </p>
+      </div>
+      <div className="mt-4 flex items-center justify-between">
+        <div className="flex items-center space-x-2">
+          <div
+            className="breadcrumb relative z-20 border-solid border-mineshaft-600 bg-mineshaft-800 py-1 px-5"
+            onClick={() => onFolderCrumbClick(0)}
+            onKeyDown={() => null}
+            role="button"
+            tabIndex={0}
+          >
+            <FontAwesomeIcon icon={faFolderOpen} className="text-primary" />
          </div>
-          <div className="mt-6">
-            <p className="text-3xl font-semibold text-bunker-100">Secrets Overview</p>
-            <p className="text-md text-bunker-300">
-              Inject your secrets using
-              <a
-                className="mx-1 text-primary/80 hover:text-primary"
-                href="https://infisical.com/docs/cli/overview"
-                target="_blank"
-                rel="noopener noreferrer"
+          {(secretPath || '')
+            .split('/')
+            .filter(Boolean)
+            .map((path, index, arr) => (
+              <div
+                key={`secret-path-${index + 1}`}
+                className={`breadcrumb relative z-20 ${
+                  index + 1 === arr.length ? 'cursor-default' : 'cursor-pointer'
+                } border-solid border-mineshaft-600 py-1 px-5`}
+                onClick={() => onFolderCrumbClick(index + 1)}
+                onKeyDown={() => null}
+                role="button"
+                tabIndex={0}
              >
-                Infisical CLI
-              </a>
-              or
-              <a
-                className="mx-1 text-primary/80 hover:text-primary"
-                href="https://infisical.com/docs/sdks/overview"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                Infisical SDKs
-              </a>
-            </p>
-          </div>
-          <div className="absolute top-[11.1rem] right-6 flex w-full max-w-sm flex-grow space-x-2">
-            <Input
-              className="h-[2.3rem] bg-mineshaft-800 placeholder-mineshaft-50 duration-200 focus:bg-mineshaft-700/80"
-              placeholder="Search by secret name..."
-              value={searchFilter}
-              onChange={(e) => setSearchFilter(e.target.value)}
-              leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
-            />
-          </div>
-          <div className="overflow-y-auto">
-            <div className="sticky top-0 mt-8 flex h-10 min-w-[60.3rem] flex-row rounded-md border border-mineshaft-600 bg-mineshaft-800">
-              <div className="sticky top-0 flex w-10 items-center justify-center border-none px-4">
-                <div className="w-10 text-center text-xs text-transparent">{0}</div>
+                {path}
              </div>
-              <div className="sticky top-0 border-none">
-                <div className="relative flex h-full w-full min-w-[200px] items-center justify-start lg:min-w-[220px] xl:min-w-[250px]">
-                  <div className="text-sm font-medium ">Secret</div>
-                </div>
-              </div>
-              {numSecretsMissingPerEnv &&
-                userAvailableEnvs?.map((env) => {
-                  return (
-                    <div
-                      key={`header-${env.slug}`}
-                      className="flex w-full min-w-[11rem] flex-row items-center rounded-md border-none bg-mineshaft-800"
-                    >
-                      <div className="flex w-full flex-row justify-center text-center text-sm font-medium text-bunker-200/[.99]">
-                        {env.name}
-                        {numSecretsMissingPerEnv[env.slug] > 0 && (
-                          <div className="mt-0.5 ml-2.5 flex h-[1.1rem] w-[1.1rem] cursor-default items-center justify-center rounded-sm border border-red-400 bg-red text-xs text-bunker-100">
-                            <Tooltip
-                              content={`${
-                                numSecretsMissingPerEnv[env.slug]
-                              } secrets missing compared to other environments`}
-                            >
-                              <span className="text-bunker-100">
-                                {numSecretsMissingPerEnv[env.slug]}
-                              </span>
-                            </Tooltip>
-                          </div>
-                        )}
+            ))}
+        </div>
+        <div className="w-80">
+          <Input
+            className="h-[2.3rem] bg-mineshaft-800 placeholder-mineshaft-50 duration-200 focus:bg-mineshaft-700/80"
+            placeholder="Search by secret/folder name..."
+            value={searchFilter}
+            onChange={(e) => setSearchFilter(e.target.value)}
+            leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+          />
+        </div>
+      </div>
+      <div className="overflow-y-auto">
+        <div className="sticky top-0 mt-8 flex h-10 min-w-[60.3rem] flex-row rounded-md border border-mineshaft-600 bg-mineshaft-800">
+          <div className="sticky top-0 flex w-10 items-center justify-center border-none px-4">
+            <div className="w-10 text-center text-xs text-transparent">{0}</div>
+          </div>
+          <div className="sticky top-0 border-none">
+            <div className="relative flex h-full w-full min-w-[200px] items-center justify-start lg:min-w-[220px] xl:min-w-[250px]">
+              <div className="text-sm font-medium ">Secret</div>
+            </div>
+          </div>
+          {numSecretsMissingPerEnv &&
+            userAvailableEnvs?.map((env) => {
+              return (
+                <div
+                  key={`header-${env.slug}`}
+                  className="flex w-full min-w-[11rem] flex-row items-center rounded-md border-none bg-mineshaft-800"
+                >
+                  <div className="flex w-full flex-row justify-center text-center text-sm font-medium text-bunker-200/[.99]">
+                    {env.name}
+                    {numSecretsMissingPerEnv[env.slug] > 0 && (
+                      <div className="mt-0.5 ml-2.5 flex h-[1.1rem] w-[1.1rem] cursor-default items-center justify-center rounded-sm border border-red-400 bg-red text-xs text-bunker-100">
+                        <Tooltip
+                          content={`${
+                            numSecretsMissingPerEnv[env.slug]
+                          } secrets missing compared to other environments`}
+                        >
+                          <span className="text-bunker-100">
+                            {numSecretsMissingPerEnv[env.slug]}
+                          </span>
+                        </Tooltip>
                      </div>
-                    </div>
-                  );
-                })}
-            </div>
-            <div
-              className={`${
-                isDashboardSecretEmpty ? '' : ''
-              } no-scrollbar::-webkit-scrollbar mt-3 flex h-full max-h-[calc(100vh-370px)] w-full min-w-[60.3rem] flex-grow flex-row items-start justify-center overflow-x-hidden rounded-md border border-mineshaft-600 no-scrollbar`}
-            >
-              {!isDashboardSecretEmpty && (
-                <TableContainer className="border-none">
-                  <table className="secret-table relative w-full bg-mineshaft-900">
-                    <tbody className="max-h-screen overflow-y-auto">
-                      {Object.keys(secrets?.secrets || {})?.filter((secret: any) => secret.toUpperCase().includes(searchFilter.toUpperCase())).map((key, index) => (
-                        <EnvComparisonRow
-                          key={`row-${key}`}
-                          secrets={secrets?.secrets?.[key]}
-                          isReadOnly={isReadOnly}
-                          index={index}
-                          isSecretValueHidden
-                          userAvailableEnvs={userAvailableEnvs}
-                        />
-                      ))}
-                    </tbody>
-                  </table>
-                </TableContainer>
-              )}
-              {isDashboardSecretEmpty && (
-                <div className="flex h-40 w-full flex-row rounded-md">
-                  <div className="flex w-full min-w-[11rem] flex-col items-center justify-center rounded-md border-none bg-mineshaft-800 text-bunker-300">
-                    <FontAwesomeIcon icon={faKey} className="text-4xl mb-4" />
-                    <span className="mb-1">No secrets found.</span>
-                    <span>To add more secrets you can explore any environment.</span>
+                    )}
                  </div>
                </div>
-              )}
-              {/* In future, we should add an option to add environments here
-                <div className="flex items-start justify-center h-full ml-10">
-                  <Button
-                    leftIcon={<FontAwesomeIcon icon={faPlus}/>}
-                    onClick={() => prepend(DEFAULT_SECRET_VALUE, { shouldFocus: false })}
-                    variant="outline_bg"
-                    colorSchema="primary"
-                    isFullWidth
-                    className="h-10"
-                  >
-                    Add Environment
-                  </Button>
-                </div> */}
-            </div>
-            <div className="group mt-4 flex min-w-[60.3rem] flex-row items-center">
-              <div className="flex h-10 w-10 items-center justify-center border-none px-4">
-                <div className="w-10 text-center text-xs text-transparent">0</div>
+              );
+            })}
+        </div>
+        <div
+          className={`${
+            isDashboardEmpty ? '' : ''
+          } no-scrollbar::-webkit-scrollbar mt-3 flex h-full max-h-[calc(100vh-370px)] w-full min-w-[60.3rem] flex-grow flex-row items-start justify-center overflow-x-hidden rounded-md border border-mineshaft-600 no-scrollbar`}
+        >
+          {!isDashboardEmpty && (
+            <TableContainer className="border-none">
+              <table className="secret-table relative w-full bg-mineshaft-900">
+                <tbody className="max-h-screen overflow-y-auto">
+                  {Object.keys(foldersGroupedByEnv || {}).map((folderName, index) => (
+                    <FolderComparisonRow
+                      key={`${folderName}-${index + 1}`}
+                      folderName={folderName}
+                      userAvailableEnvs={userAvailableEnvs}
+                      folderInEnv={foldersGroupedByEnv[folderName]}
+                      onClick={onFolderClick}
+                    />
+                  ))}
+                  {Object.keys(secrets?.secrets || {})
+                    ?.filter((secret: any) =>
+                      secret.toUpperCase().includes(searchFilter.toUpperCase())
+                    )
+                    .map((key) => (
+                      <EnvComparisonRow
+                        key={`row-${key}`}
+                        secrets={secrets?.secrets?.[key]}
+                        isReadOnly
+                        isSecretValueHidden
+                        userAvailableEnvs={userAvailableEnvs}
+                      />
+                    ))}
+                </tbody>
+              </table>
+            </TableContainer>
+          )}
+          {isDashboardEmpty && (
+            <div className="flex h-40 w-full flex-row rounded-md">
+              <div className="flex w-full min-w-[11rem] flex-col items-center justify-center rounded-md border-none bg-mineshaft-800 text-bunker-300">
+                <FontAwesomeIcon icon={faKey} className="mb-4 text-4xl" />
+                <span className="mb-1">No secrets/folders found.</span>
+                <span>To add more secrets you can explore any environment.</span>
              </div>
-              <div className="flex min-w-[200px] flex-row items-center justify-between lg:min-w-[220px] xl:min-w-[250px]">
-                <span className="text-transparent">0</span>
-                <button type="button" className="mr-2 text-transparent">
-                  1
-                </button>
-              </div>
-              {userAvailableEnvs?.map((env) => {
-                return (
-                  <div
-                    key={`button-${env.slug}`}
-                    className="mx-2 mb-1 flex h-10 w-full min-w-[11rem] flex-row items-center justify-center border-none"
-                  >
-                    <Button
-                      onClick={() => onEnvChange(env.slug)}
-                      // router.push(`${router.asPath  }?env=${env.slug}`)
-                      variant="outline_bg"
-                      colorSchema="primary"
-                      isFullWidth
-                      className="h-10"
-                    >
-                      Explore {env.name}
-                    </Button>
-                  </div>
-                );
-              })}
            </div>
+          )}
+        </div>
+        <div className="group mt-4 flex min-w-[60.3rem] flex-row items-center">
+          <div className="flex h-10 w-10 items-center justify-center border-none px-4">
+            <div className="w-10 text-center text-xs text-transparent">0</div>
          </div>
-        </form>
-      </FormProvider>
+          <div className="flex min-w-[200px] flex-row items-center justify-between lg:min-w-[220px] xl:min-w-[250px]">
+            <span className="text-transparent">0</span>
+            <button type="button" className="mr-2 text-transparent">
+              1
+            </button>
+          </div>
+          {userAvailableEnvs?.map((env) => {
+            return (
+              <div
+                key={`button-${env.slug}`}
+                className="mx-2 mb-1 flex h-10 w-full min-w-[11rem] flex-row items-center justify-center border-none"
+              >
+                <Button
+                  onClick={() => onExploreEnv(env.slug)}
+                  variant="outline_bg"
+                  colorSchema="primary"
+                  isFullWidth
+                  className="h-10"
+                >
+                  Explore {env.name}
+                </Button>
+              </div>
+            );
+          })}
+        </div>
+      </div>
    </div>
  );
 };
--- a/frontend/src/views/DashboardPage/components/EnvComparisonRow/EnvComparisonRow.tsx
+++ b/frontend/src/views/DashboardPage/components/EnvComparisonRow/EnvComparisonRow.tsx
@@ -1,11 +1,10 @@
 /* eslint-disable react/jsx-no-useless-fragment */
 import { useCallback, useState } from 'react';
-import { faCircle, faEye, faEyeSlash, faMinus } from '@fortawesome/free-solid-svg-icons';
+import { faCircle, faEye, faEyeSlash, faKey, faMinus } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { twMerge } from 'tailwind-merge';

 type Props = {
-  index: number;
  secrets: any[] | undefined;
  // permission and external state's that decided to hide or show
  isReadOnly?: boolean;
@@ -30,7 +29,7 @@ const DashboardInput = ({
    if (val === undefined)
      return (
        <span className="cursor-default font-sans text-xs italic text-red-500/80">
-            <FontAwesomeIcon icon={faMinus} className="mt-1" />
+          <FontAwesomeIcon icon={faMinus} className="mt-1" />
        </span>
      );
    if (val?.length === 0)
@@ -110,7 +109,6 @@ const DashboardInput = ({
 };

 export const EnvComparisonRow = ({
-  index,
  secrets,
  isSecretValueHidden,
  isReadOnly,
@@ -126,7 +124,9 @@ export const EnvComparisonRow = ({
  return (
    <tr className="group flex min-w-full flex-row items-center hover:bg-mineshaft-800">
      <td className="flex h-10 w-10 items-center justify-center border-none px-4">
-        <div className="w-10 text-center text-xs text-bunker-400">{index + 1}</div>
+        <div className="w-10 text-center text-xs text-bunker-400">
+          <FontAwesomeIcon icon={faKey} />
+        </div>
      </td>
      <td className="flex h-full min-w-[200px] flex-row items-center justify-between lg:min-w-[220px] xl:min-w-[250px]">
        <div className="flex h-8 cursor-default flex-row items-center truncate">
--- a/frontend/src/views/DashboardPage/components/EnvComparisonRow/FolderComparisonRow.tsx
+++ b/frontend/src/views/DashboardPage/components/EnvComparisonRow/FolderComparisonRow.tsx
@@ -0,0 +1,42 @@
+import { faCheck, faFolder, faX } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+type Props = {
+  folderInEnv: Record<string, boolean>;
+  userAvailableEnvs?: Array<{ slug: string; name: string }>;
+  folderName: string;
+  onClick: (folderName: string) => void;
+};
+
+export const FolderComparisonRow = ({
+  folderInEnv = {},
+  userAvailableEnvs = [],
+  folderName,
+  onClick
+}: Props) => (
+  <tr
+    className="group flex min-w-full cursor-pointer flex-row items-center hover:bg-mineshaft-800"
+    onClick={() => onClick(folderName)}
+  >
+    <td className="flex h-10 w-10 items-center justify-center border-none px-4">
+      <div className="w-10 text-center text-xs text-bunker-400">
+        <FontAwesomeIcon icon={faFolder} className="text-primary-700" />
+      </div>
+    </td>
+    <td className="flex h-full min-w-[200px] flex-row items-center justify-between lg:min-w-[200px] xl:min-w-[250px]">
+      <div className="flex h-8 cursor-default flex-row items-center truncate">{folderName}</div>
+    </td>
+    {userAvailableEnvs?.map(({ slug }) => (
+      <td
+        className={`flex h-10 w-full cursor-default flex-row items-center justify-center ${
+          folderInEnv[slug]
+            ? 'bg-mineshaft-900/30 text-green-500/80'
+            : 'bg-red-800/10 text-red-500/80'
+        }`}
+        key={`${folderName}-${slug}`}
+      >
+        <FontAwesomeIcon icon={folderInEnv[slug] ? faCheck : faX} />
+      </td>
+    ))}
+  </tr>
+);