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

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

frontend/src/components/permissions/OrgPermissionCan.tsx

@@ -1,26 +1,14 @@
 import { FunctionComponent, ReactNode } from "react";
 import { BoundCanProps, Can } from "@casl/react";
-import { faLock } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { TOrgPermission, useOrgPermission } from "@app/context/OrgPermissionContext";
 
-import { Tooltip } from "../v2";
+import { AccessRestrictedBanner, Tooltip } from "../v2";
 
 export const OrgPermissionGuardBanner = () => {
   return (
     <div className="container mx-auto flex h-full items-center justify-center">
-      <div className="flex items-end space-x-12 rounded-md bg-mineshaft-800 p-16 text-bunker-300">
-        <div>
-          <FontAwesomeIcon icon={faLock} size="6x" />
-        </div>
-        <div>
-          <div className="mb-2 text-4xl font-medium">Access Restricted</div>
-          <div className="text-sm">
-            Your role has limited permissions, please <br /> contact your admin to gain access
-          </div>
-        </div>
-      </div>
+      <AccessRestrictedBanner />
     </div>
   );
 };

frontend/src/components/permissions/PermissionDeniedBanner.tsx

@@ -1,15 +1,12 @@
-import { ReactNode } from "react";
-import { faLock } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
 
+import { AccessRestrictedBanner } from "@app/components/v2";
+
 type Props = {
   containerClassName?: string;
-  className?: string;
-  children?: ReactNode;
 };
 
-export const PermissionDeniedBanner = ({ containerClassName, className, children }: Props) => {
+export const PermissionDeniedBanner = ({ containerClassName }: Props) => {
   return (
     <div
       className={twMerge(
@@ -17,22 +14,7 @@ export const PermissionDeniedBanner = ({ containerClassName, className, children
         containerClassName
       )}
     >
-      <div className={twMerge("rounded-md bg-mineshaft-800 p-16 text-bunker-300", className)}>
-        <div className="flex items-end space-x-12">
-          <div>
-            <FontAwesomeIcon icon={faLock} size="6x" />
-          </div>
-          <div>
-            <div className="mb-2 text-4xl font-medium">Access Restricted</div>
-            {children || (
-              <div className="text-sm">
-                Your role has limited permissions, please <br /> contact your administrator to gain
-                access
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
+      <AccessRestrictedBanner />
     </div>
   );
 };

frontend/src/components/permissions/ProjectPermissionCan.tsx

@@ -1,9 +1,8 @@
 import { FunctionComponent, ReactNode } from "react";
 import { AbilityTuple, MongoAbility } from "@casl/ability";
 import { Can } from "@casl/react";
-import { faLock } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
+import { AccessRestrictedBanner } from "@app/components/v2";
 import { ProjectPermissionSet, useProjectPermission } from "@app/context/ProjectPermissionContext";
 
 import { Tooltip } from "../v2/Tooltip";
@@ -11,17 +10,7 @@ import { Tooltip } from "../v2/Tooltip";
 export const ProjectPermissionGuardBanner = () => {
   return (
     <div className="container mx-auto flex h-full items-center justify-center">
-      <div className="flex items-end space-x-12 rounded-md bg-mineshaft-800 p-16 text-bunker-300">
-        <div>
-          <FontAwesomeIcon icon={faLock} size="6x" />
-        </div>
-        <div>
-          <div className="mb-2 text-4xl font-medium">Access Restricted</div>
-          <div className="text-sm">
-            Your role has limited permissions, please <br /> contact your admin to gain access
-          </div>
-        </div>
-      </div>
+      <AccessRestrictedBanner />
     </div>
   );
 };

frontend/src/components/v2/AccessRestrictedBanner/AccessRestrictedBanner.tsx

@@ -0,0 +1,26 @@
+import { ReactNode } from "react";
+
+type Props = {
+  title?: string;
+  body?: ReactNode;
+};
+
+export const AccessRestrictedBanner = ({
+  title = "Access Restricted",
+
+  body = (
+    <>
+      Your current role doesn&#39;t provide access to this feature.
+      <br /> Contact your administrator to request access.
+    </>
+  )
+}: Props) => {
+  return (
+    <div className="flex items-center rounded-md border border-mineshaft-500 bg-gradient-to-br from-mineshaft-900 to-mineshaft-600 px-16 py-12 text-center text-bunker-300">
+      <div>
+        <div className="text-4xl font-medium text-bunker-100">{title}</div>
+        <div className="-mt-1 text-sm">{body}</div>
+      </div>
+    </div>
+  );
+};

frontend/src/components/v2/AccessRestrictedBanner/index.ts

@@ -0,0 +1 @@
+export * from "./AccessRestrictedBanner";

frontend/src/components/v2/index.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable react-refresh/only-export-components */
+export * from "./AccessRestrictedBanner";
 export * from "./Accordion";
 export * from "./Alert";
 export * from "./Badge";

frontend/src/hoc/withPermission/withPermission.tsx

@@ -1,9 +1,8 @@
 import { ComponentType } from "react";
 import { Abilities, AbilityTuple, Generics, SubjectType } from "@casl/ability";
-import { faLock } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
 
+import { AccessRestrictedBanner } from "@app/components/v2";
 import { TOrgPermission, useOrgPermission } from "@app/context";
 
 type Props<T extends Abilities> = (T extends AbilityTuple
@@ -14,11 +13,11 @@ type Props<T extends Abilities> = (T extends AbilityTuple
   : {
       action: string;
       subject: string;
-    }) & { className?: string; containerClassName?: string };
+    }) & { containerClassName?: string };
 
 export const withPermission = <T extends object, J extends TOrgPermission>(
   Component: ComponentType<T>,
-  { action, subject, className, containerClassName }: Props<Generics<J>["abilities"]>
+  { action, subject, containerClassName }: Props<Generics<J>["abilities"]>
 ) => {
   const HOC = (hocProps: T) => {
     const { permission } = useOrgPermission();
@@ -33,22 +32,7 @@ export const withPermission = <T extends object, J extends TOrgPermission>(
             containerClassName
           )}
         >
-          <div
-            className={twMerge(
-              "flex items-end space-x-12 rounded-md bg-mineshaft-800 p-16 text-bunker-300",
-              className
-            )}
-          >
-            <div>
-              <FontAwesomeIcon icon={faLock} size="6x" />
-            </div>
-            <div>
-              <div className="mb-2 text-4xl font-medium">Access Restricted</div>
-              <div className="text-sm">
-                Your role has limited permissions, please <br /> contact your admin to gain access
-              </div>
-            </div>
-          </div>
+          <AccessRestrictedBanner />
         </div>
       );
     }

frontend/src/hoc/withProjectPermission/withProjectPermission.tsx

@@ -1,14 +1,12 @@
 import { ComponentType } from "react";
 import { AbilityTuple } from "@casl/ability";
-import { faLock } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
 
+import { AccessRestrictedBanner } from "@app/components/v2";
 import { useProjectPermission } from "@app/context";
 import { ProjectPermissionSet } from "@app/context/ProjectPermissionContext";
 
 type Props<T extends AbilityTuple> = {
-  className?: string;
   containerClassName?: string;
   action: T[0];
   subject: T[1];
@@ -16,7 +14,7 @@ type Props<T extends AbilityTuple> = {
 
 export const withProjectPermission = <T extends object>(
   Component: ComponentType<Omit<Props<ProjectPermissionSet>, "action" | "subject"> & T>,
-  { action, subject, className, containerClassName }: Props<ProjectPermissionSet>
+  { action, subject, containerClassName }: Props<ProjectPermissionSet>
 ) => {
   const HOC = (hocProps: Omit<Props<ProjectPermissionSet>, "action" | "subject"> & T) => {
     const { permission } = useProjectPermission();
@@ -31,23 +29,7 @@ export const withProjectPermission = <T extends object>(
             containerClassName
           )}
         >
-          <div
-            className={twMerge(
-              "flex items-end space-x-12 rounded-md bg-mineshaft-800 p-16 text-bunker-300",
-              className
-            )}
-          >
-            <div>
-              <FontAwesomeIcon icon={faLock} size="6x" />
-            </div>
-            <div>
-              <div className="mb-2 text-4xl font-medium">Permission Denied</div>
-              <div className="text-sm">
-                You do not have permission to this page. <br /> Kindly contact your organization
-                administrator
-              </div>
-            </div>
-          </div>
+          <AccessRestrictedBanner />
         </div>
       );
     }

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>