feat(ui): handle no-permissions on scan page (#8624)

Co-authored-by: alejandrobailo <alejandrobailo94@gmail.com>

ui/CHANGELOG.md

@@ -7,6 +7,7 @@ All notable changes to the **Prowler UI** are documented in this file.
 ### 🐞 Added
 
 - Handle API responses and errors consistently across the app [(#8621)](https://github.com/prowler-cloud/prowler/pull/8621)
+- No-permission message on the scan page [(#8624)](https://github.com/prowler-cloud/prowler/pull/8624)
 
 ### 🔄 Changed
 

ui/app/(prowler)/scans/page.tsx

@@ -3,6 +3,7 @@ import { Suspense } from "react";
 
 import { getProviders } from "@/actions/providers";
 import { getScans, getScansByState } from "@/actions/scans";
+import { auth } from "@/auth.config";
 import { MutedFindingsConfigButton } from "@/components/providers";
 import {
   AutoRefresh,
@@ -14,6 +15,7 @@ import { LaunchScanWorkflow } from "@/components/scans/launch-workflow";
 import { SkeletonTableScans } from "@/components/scans/table";
 import { ColumnGetScans } from "@/components/scans/table/scans";
 import { ContentLayout } from "@/components/ui";
+import { CustomBanner } from "@/components/ui/custom/custom-banner";
 import { DataTable } from "@/components/ui/table";
 import {
   createProviderDetailsMapping,
@@ -26,6 +28,7 @@ export default async function Scans({
 }: {
   searchParams: SearchParamsProps;
 }) {
+  const session = await auth();
   const filteredParams = { ...searchParams };
   delete filteredParams.scanId;
   const searchParamsKey = JSON.stringify(filteredParams);
@@ -55,6 +58,8 @@ export default async function Scans({
     (provider: ProviderProps) => !provider.attributes.connection.connected,
   );
 
+  const hasManageScansPermission = session?.user?.permissions?.manage_scans;
+
   // Get scans data to check for executing scans
   const scansData = await getScansByState();
 
@@ -82,7 +87,12 @@ export default async function Scans({
     <ContentLayout title="Scans" icon="lucide:scan-search">
       <AutoRefresh hasExecutingScan={hasExecutingScan} />
       <>
-        {thereIsNoProvidersConnected ? (
+        {!hasManageScansPermission ? (
+          <CustomBanner
+            title={"Access Denied"}
+            message={"You don't have permission to launch the scan."}
+          />
+        ) : thereIsNoProvidersConnected ? (
           <>
             <Spacer y={8} />
             <NoProvidersConnected />
@@ -91,6 +101,7 @@ export default async function Scans({
         ) : (
           <LaunchScanWorkflow providers={providerInfo} />
         )}
+
         <ScansFilters
           providerUIDs={providerUIDs}
           providerDetails={providerDetails}

ui/components/ui/custom/custom-banner.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { InfoIcon } from "lucide-react";
+
+import { CustomButton } from ".";
+
+interface CustomBannerProps {
+  title: string;
+  message: string;
+  buttonLabel?: string;
+  buttonLink?: string;
+}
+
+export const CustomBanner = ({
+  title,
+  message,
+  buttonLabel = "Go Home",
+  buttonLink = "/",
+}: CustomBannerProps) => {
+  return (
+    <div className="flex items-center justify-start rounded-lg border-1 border-system-warning-light px-4 py-6 shadow-box dark:bg-prowler-blue-400">
+      <div className="flex w-full flex-col items-start gap-6 md:flex-row md:items-center md:justify-between md:gap-8">
+        <div className="flex flex-col space-y-3">
+          <div className="flex items-center justify-start gap-3">
+            <InfoIcon className="h-6 w-6 text-gray-800 dark:text-white" />
+            <h2 className="text-lg font-bold text-gray-800 dark:text-white">
+              {title}
+            </h2>
+          </div>
+          <p className="text-sm text-gray-600 dark:text-gray-300">{message}</p>
+        </div>
+        <div className="w-full md:w-auto md:flex-shrink-0">
+          <CustomButton
+            asLink={buttonLink}
+            className="w-full justify-center md:w-fit"
+            ariaLabel={buttonLabel}
+            variant="solid"
+            color="action"
+            size="md"
+          >
+            {buttonLabel}
+          </CustomButton>
+        </div>
+      </div>
+    </div>
+  );
+};