feat: resolved additional privilege not taking priority and dummy column miscalculation

frontend/src/views/SecretMainPage/SecretMainPage.tsx

@@ -210,8 +210,20 @@ export const SecretMainPage = () => {
     isPaused: !canDoReadRollback
   });
 
+  const noAccessSecretCount = Math.max(
+    (page * perPage > totalCount ? totalCount % perPage : perPage) -
+      (imports?.length || 0) -
+      (folders?.length || 0) -
+      (secrets?.length || 0) -
+      (dynamicSecrets?.length || 0),
+    0
+  );
   const isNotEmpty = Boolean(
-    secrets?.length || folders?.length || imports?.length || dynamicSecrets?.length
+    secrets?.length ||
+      folders?.length ||
+      imports?.length ||
+      dynamicSecrets?.length ||
+      noAccessSecretCount
   );
 
   const handleSortToggle = () =>
@@ -405,18 +417,7 @@ export const SecretMainPage = () => {
                     isProtectedBranch={isProtectedBranch}
                   />
                 )}
-                {canReadSecret && (
-                  <SecretNoAccessListView
-                    count={Math.max(
-                      (page * perPage > totalCount ? totalCount % perPage : perPage) -
-                        (imports?.length || 0) -
-                        (folders?.length || 0) -
-                        (secrets?.length || 0) -
-                        (dynamicSecrets?.length || 0),
-                      0
-                    )}
-                  />
-                )}
+                {canReadSecret && <SecretNoAccessListView count={noAccessSecretCount} />}
                 {!canReadSecret &&
                   !canReadDynamicSecret &&
                   !canReadSecretImports &&

frontend/src/views/SecretMainPage/components/SecretListView/SecretNoAccessListView.tsx

@@ -1,4 +1,4 @@
-import { FontAwesomeSymbol, Input } from "@app/components/v2";
+import { FontAwesomeSymbol, Input, Tooltip } from "@app/components/v2";
 
 import { FontAwesomeSpriteName } from "./SecretListView.utils";
 
@@ -10,34 +10,39 @@ export const SecretNoAccessListView = ({ count }: Props) => {
   return (
     <>
       {Array.from(Array(count)).map((_, i) => (
-        <div
-          className="flex border-b border-mineshaft-600 bg-mineshaft-800 shadow-none hover:bg-mineshaft-700"
+        <Tooltip
+          className="max-w-sm"
+          asChild
+          content="You do not have permission to view this secret"
           key={`no-access-secret-${i + 1}`}
         >
-          <div className="flex h-11 w-11 items-center justify-center px-4 py-3">
-            <FontAwesomeSymbol
-              className="ml-3 block h-3.5 w-3.5"
-              symbolName={FontAwesomeSpriteName.KeyLock}
-            />
+          <div className="flex border-b border-mineshaft-600 bg-mineshaft-800 shadow-none hover:bg-mineshaft-700">
+            <div className="flex h-11 w-11 items-center justify-center px-4 py-3">
+              <FontAwesomeSymbol
+                className="ml-3 block h-3.5 w-3.5"
+                symbolName={FontAwesomeSpriteName.KeyLock}
+              />
+            </div>
+
+            <div className="flex h-11 w-80 flex-shrink-0 items-center px-4 py-2">
+              <Input
+                autoComplete="off"
+                isReadOnly
+                variant="plain"
+                value="NO ACCESS"
+                isDisabled
+                className="w-full px-0 blur-sm placeholder:text-red-500 focus:text-bunker-100 focus:ring-transparent"
+              />
+            </div>
+            <div
+              className="flex w-80 flex-grow items-center border-x border-mineshaft-600 py-1 pl-4 pr-2"
+              tabIndex={0}
+              role="button"
+            >
+              <span className="blur">********</span>
+            </div>
           </div>
-          <div className="flex h-11 w-80 flex-shrink-0 items-center px-4 py-2">
-            <Input
-              autoComplete="off"
-              isReadOnly
-              variant="plain"
-              value="NO ACCESS"
-              isDisabled
-              className="w-full px-0 blur-sm placeholder:text-red-500 focus:text-bunker-100 focus:ring-transparent"
-            />
-          </div>
-          <div
-            className="flex w-80 flex-grow items-center border-x border-mineshaft-600 py-1 pl-4 pr-2"
-            tabIndex={0}
-            role="button"
-          >
-            <span className="blur">********</span>
-          </div>
-        </div>
+        </Tooltip>
       ))}
     </>
   );

frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretNoAccessOverviewTableRow.tsx

@@ -2,7 +2,7 @@ import { faCircle } from "@fortawesome/free-regular-svg-icons";
 import { faLock } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { Td, Tr } from "@app/components/v2";
+import { Td, Tooltip, Tr } from "@app/components/v2";
 
 type Props = {
   environments: { name: string; slug: string }[];
@@ -16,12 +16,18 @@ export const SecretNoAccessOverviewTableRow = ({ environments = [], count }: Pro
         <Tr key={`no-access-secret-overview-${j + 1}`} isHoverable isSelectable className="group">
           <Td className="sticky left-0 z-10 bg-mineshaft-800 bg-clip-padding py-0 px-0 group-hover:bg-mineshaft-700">
             <div className="h-full w-full border-r border-mineshaft-600 py-2.5 px-5">
-              <div className="flex items-center space-x-5">
-                <div className="text-bunker-300">
-                  <FontAwesomeIcon className="block" icon={faLock} />
+              <Tooltip
+                asChild
+                content="You do not have permission to view this secret"
+                className="max-w-sm"
+              >
+                <div className="flex items-center space-x-5">
+                  <div className="text-bunker-300">
+                    <FontAwesomeIcon className="block" icon={faLock} />
+                  </div>
+                  <div className="blur-sm">NO ACCESS</div>
                 </div>
-                <div className="blur-sm">NO ACCESS</div>
-              </div>
+              </Tooltip>
             </div>
           </Td>
           {environments.map(({ slug }, i) => {