feat: Add lighthouse banner (#8259)

Co-authored-by: Chandrapal Badshah <12944530+Chan9390@users.noreply.github.com>
Co-authored-by: Pablo Lara <larabjj@gmail.com>

ui/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to the **Prowler UI** are documented in this file.
 
+## [v1.9.3] (Prowler v5.9.3)
+
+### 🚀 Added
+
+- Lighthouse banner [(#8259)](https://github.com/prowler-cloud/prowler/pull/8259)
+
 ## [v1.9.0] (Prowler v5.9.0)
 
 ### 🚀 Added

ui/actions/lighthouse/lighthouse.ts

@@ -1,5 +1,7 @@
 "use server";
 
+import { revalidatePath } from "next/cache";
+
 import { apiBaseUrl, getAuthHeaders } from "@/lib/helper";
 
 export const getAIKey = async (): Promise<string> => {
@@ -80,6 +82,7 @@ export const createLighthouseConfig = async (config: {
     if (data?.data?.id) {
       checkLighthouseConnection(data.data.id);
     }
+    revalidatePath("/");
 
     return data;
   } catch (error) {
@@ -163,7 +166,7 @@ export const updateLighthouseConfig = async (config: {
     if (updateData?.data?.id || configId) {
       checkLighthouseConnection(configId);
     }
-
+    revalidatePath("/");
     return updateData;
   } catch (error) {
     console.error("[Server] Error in updateLighthouseConfig:", error);

ui/app/(prowler)/page.tsx

@@ -8,6 +8,7 @@ import {
   getProvidersOverview,
 } from "@/actions/overview/overview";
 import { FilterControls } from "@/components/filters";
+import { LighthouseBanner } from "@/components/lighthouse";
 import {
   FindingsBySeverityChart,
   FindingsByStatusChart,
@@ -196,6 +197,9 @@ const SSRDataNewFindingsTable = async ({
         </div>
       </div>
       <Spacer y={4} />
+
+      <LighthouseBanner />
+
       <DataTable
         columns={ColumnNewFindingsToDate}
         data={expandedResponse?.data || []}

ui/components/lighthouse/banner.tsx

@@ -0,0 +1,52 @@
+import { Bot } from "lucide-react";
+import Link from "next/link";
+
+import { getLighthouseConfig } from "@/actions/lighthouse/lighthouse";
+
+interface BannerConfig {
+  message: string;
+  href: string;
+  gradient: string;
+}
+
+const renderBanner = ({ message, href, gradient }: BannerConfig) => (
+  <Link href={href} className="mb-4 block w-full">
+    <div
+      className={`w-full rounded-lg ${gradient} shadow-lg transition-all duration-200 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-opacity-50`}
+    >
+      <div className="px-4 py-3">
+        <div className="flex items-center gap-4">
+          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-white/20 backdrop-blur-sm">
+            <Bot size={24} className="text-white" />
+          </div>
+          <p className="text-md font-medium text-white">{message}</p>
+        </div>
+      </div>
+    </div>
+  </Link>
+);
+
+export const LighthouseBanner = async () => {
+  try {
+    const lighthouseConfig = await getLighthouseConfig();
+
+    if (!lighthouseConfig) {
+      return renderBanner({
+        message: "Enable Lighthouse to secure your cloud with AI insights",
+        href: "/lighthouse/config",
+        gradient:
+          "bg-gradient-to-r from-green-500 to-blue-500 hover:from-green-600 hover:to-blue-600 focus:ring-green-500/50 dark:from-green-600 dark:to-blue-600 dark:hover:from-green-700 dark:hover:to-blue-700 dark:focus:ring-green-400/50",
+      });
+    } else {
+      return renderBanner({
+        message: "Use Lighthouse to review your findings and gain insights",
+        href: "/lighthouse",
+        gradient:
+          "bg-gradient-to-r from-green-500 to-blue-500 hover:from-green-600 hover:to-blue-600 focus:ring-green-500/50 dark:from-green-600 dark:to-blue-600 dark:hover:from-green-700 dark:hover:to-blue-700 dark:focus:ring-green-400/50",
+      });
+    }
+  } catch (error) {
+    console.error("Error getting banner state:", error);
+    return null;
+  }
+};

ui/components/lighthouse/index.ts

@@ -1,2 +1,3 @@
+export * from "./banner";
 export * from "./chat";
 export * from "./chatbot-config";