Merge pull request #4236 from Infisical/improve-access-denied-banner-design

improvement(frontend): revise access restricted banner and refactor/update relevant locations

frontend/src/pages/kms/KmipPage/KmipPage.tsx

@@ -22,7 +22,6 @@ export const KmipPage = () => {
             description="Integrate with Infisical KMS via Key Management Interoperability Protocol."
           />
           <ProjectPermissionCan
-            passThrough={false}
             renderGuardBanner
             I={ProjectPermissionKmipActions.ReadClients}
             a={ProjectPermissionSub.Kmip}

frontend/src/pages/kms/OverviewPage/OverviewPage.tsx

@@ -22,7 +22,6 @@ export const OverviewPage = () => {
             description="Manage keys and perform cryptographic operations."
           />
           <ProjectPermissionCan
-            passThrough={false}
             renderGuardBanner
             I={ProjectPermissionActions.Read}
             a={ProjectPermissionSub.Cmek}

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

@@ -975,12 +975,12 @@ const Page = () => {
                 />
               )}
               {noAccessSecretCount > 0 && <SecretNoAccessListView count={noAccessSecretCount} />}
-              {!canReadSecret &&
-                !canReadDynamicSecret &&
-                !canReadSecretImports &&
-                folders?.length === 0 && <PermissionDeniedBanner />}
             </div>
           </div>
+          {!canReadSecret &&
+            !canReadDynamicSecret &&
+            !canReadSecretImports &&
+            folders?.length === 0 && <PermissionDeniedBanner />}
           {!isDetailsLoading &&
             (totalCount > 0 ||
               pendingChanges.secrets.length > 0 ||

frontend/src/pages/secret-scanning/SettingsPage/components/ProjectScanningConfigTab/ProjectScanningConfigTab.tsx

@@ -1,6 +1,6 @@
 import { faBan } from "@fortawesome/free-solid-svg-icons";
 
-import { ContentLoader, EmptyState } from "@app/components/v2";
+import { AccessRestrictedBanner, ContentLoader, EmptyState } from "@app/components/v2";
 import { useSubscription, useWorkspace } from "@app/context";
 import { useGetSecretScanningConfig } from "@app/hooks/api/secretScanningV2";
 
@@ -16,16 +16,14 @@ export const ProjectScanningConfigTab = () => {
 
   if (!subscription.secretScanning) {
     return (
-      <div className="flex h-full w-full items-center justify-center px-20">
-        <EmptyState
-          className="rounded-md text-center"
-          icon={faBan}
-          title={
-            <span>
+      <div className="mt-60 flex h-full w-full items-center justify-center px-20">
+        <AccessRestrictedBanner
+          body={
+            <>
               Your current plan doesn&apos;t support Secret Scanning.
               <br /> Please contact Infisical Support or reach out through our Slack channel for
               assistance.
-            </span>
+            </>
           }
         />
       </div>