Feat: Visualize imported folders in overview page

frontend/src/views/SecretMainPage/SecretMainPage.tsx

@@ -104,7 +104,7 @@ export const SecretMainPage = () => {
     }
   });
   // fetch folders
-  const { data: folders, isLoading: isFoldersLoading } = useGetProjectFolders({
+  const { data: folderData, isLoading: isFoldersLoading } = useGetProjectFolders({
     projectId: workspaceId,
     environment,
     path: secretPath
@@ -163,7 +163,9 @@ export const SecretMainPage = () => {
     isPaused: !canDoReadRollback
   });
 
-  const isNotEmtpy = Boolean(secrets?.length || folders?.length || secretImports?.length);
+  const isNotEmtpy = Boolean(
+    secrets?.length || folderData?.folders?.length || secretImports?.length
+  );
 
   const handleSortToggle = () =>
     setSortDir((state) => (state === SortDir.ASC ? SortDir.DESC : SortDir.ASC));
@@ -292,7 +294,7 @@ export const SecretMainPage = () => {
                   />
                 )}
                 <FolderListView
-                  folders={folders}
+                  folders={folderData?.folders}
                   environment={environment}
                   workspaceId={workspaceId}
                   secretPath={secretPath}
@@ -312,7 +314,7 @@ export const SecretMainPage = () => {
                     isProtectedBranch={isProtectedBranch}
                   />
                 )}
-                {!canReadSecret && folders?.length === 0 && <PermissionDeniedBanner />}
+                {!canReadSecret && folderData?.folders?.length === 0 && <PermissionDeniedBanner />}
               </div>
             </div>
             <CreateSecretForm
@@ -352,7 +354,7 @@ export const SecretMainPage = () => {
             workspaceId={workspaceId}
             secretPath={secretPath}
             secrets={secrets}
-            folders={folders}
+            folders={folderData?.folders}
             snapshotCount={snapshotCount}
             onGoBack={handleResetSnapshot}
             onClickListSnapshot={() => handlePopUpToggle("snapshots", true)}

frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx

@@ -125,11 +125,12 @@ export const SecretOverviewPage = () => {
     secretPath,
     decryptFileKey: latestFileKey!
   });
-  const { folders, folderNames, isFolderPresentInEnv } = useGetFoldersByEnv({
-    projectId: workspaceId,
-    path: secretPath,
-    environments: userAvailableEnvs.map(({ slug }) => slug)
-  });
+  const { folders, folderNames, isFolderPresentInEnv, isImportedFolderPresentInEnv } =
+    useGetFoldersByEnv({
+      projectId: workspaceId,
+      path: secretPath,
+      environments: userAvailableEnvs.map(({ slug }) => slug)
+    });
 
   const { mutateAsync: createSecretV3 } = useCreateSecretV3();
   const { mutateAsync: updateSecretV3 } = useUpdateSecretV3();
@@ -639,6 +640,7 @@ export const SecretOverviewPage = () => {
                     <SecretOverviewFolderRow
                       folderName={folderName}
                       isFolderPresentInEnv={isFolderPresentInEnv}
+                      isImportedFolderPresentInEnv={isImportedFolderPresentInEnv}
                       environments={visibleEnvs}
                       key={`overview-${folderName}-${index + 1}`}
                       onClick={handleFolderClick}

frontend/src/views/SecretOverviewPage/components/SecretOverviewFolderRow/SecretOverviewFolderRow.tsx

@@ -1,13 +1,14 @@
-import { faCheck, faFolder, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { faCheck, faFileImport, faFolder, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
 
-import { Td, Tr } from "@app/components/v2";
+import { Td, Tooltip, Tr } from "@app/components/v2";
 
 type Props = {
   folderName: string;
   environments: { name: string; slug: string }[];
   isFolderPresentInEnv: (name: string, env: string) => boolean;
+  isImportedFolderPresentInEnv: (name: string, env: string) => boolean;
   onClick: (path: string) => void;
 };
 
@@ -15,6 +16,7 @@ export const SecretOverviewFolderRow = ({
   folderName,
   environments = [],
   isFolderPresentInEnv,
+  isImportedFolderPresentInEnv,
   onClick
 }: Props) => {
   return (
@@ -29,17 +31,24 @@ export const SecretOverviewFolderRow = ({
       </Td>
       {environments.map(({ slug }, i) => {
         const isPresent = isFolderPresentInEnv(folderName, slug);
+        const isImportPresent = isImportedFolderPresentInEnv(folderName, slug);
         return (
           <Td
             key={`sec-overview-${slug}-${i + 1}-folder`}
             className={twMerge(
               "border-r border-mineshaft-600 py-3 group-hover:bg-mineshaft-700",
-              isPresent ? "text-green-600" : "text-red-600"
+              // eslint-disable-next-line no-nested-ternary
+              isPresent || isImportPresent ? "text-green-600" : "text-red-600"
             )}
           >
-            <div className="flex justify-center">
-              <FontAwesomeIcon icon={isPresent ? faCheck : faXmark} />
-            </div>
+            <Tooltip isDisabled={!isImportPresent} content="Folder is imported">
+              <div className="flex justify-center">
+                <FontAwesomeIcon
+                  // eslint-disable-next-line no-nested-ternary
+                  icon={isPresent ? faCheck : isImportPresent ? faFileImport : faXmark}
+                />
+              </div>
+            </Tooltip>
           </Td>
         );
       })}