feat(ui): Add notification system for rss feeds

.env

@@ -9,6 +9,8 @@ API_BASE_URL=http://prowler-api:8080/api/v1
 NEXT_PUBLIC_API_DOCS_URL=http://prowler-api:8080/api/v1/docs
 AUTH_TRUST_HOST=true
 UI_PORT=3000
+# Temp URL for feeds need to use actual
+RSS_FEED_URL=https://prowler.com/blog/rss
 # openssl rand -base64 32
 AUTH_SECRET="N/c6mnaS5+SWq81+819OrzQZlmx1Vxtp/orjttJSmw8="
 

ui/actions/feeds/feeds.tsx

@@ -0,0 +1,31 @@
+"use server";
+
+import Parser from "rss-parser";
+
+const RSS_FEED_URL = process.env.RSS_FEED_URL || "";
+
+export const fetchFeeds = async (): Promise<any | any[]> => {
+  if (RSS_FEED_URL?.trim()?.length > 0) {
+    const parser = new Parser();
+    try {
+      // TODO: Need to update return logic when actual URL is updated for RSS FEED
+      const feed = await parser.parseURL(RSS_FEED_URL);
+      return [
+        {
+          title: feed.title,
+          description: feed.description,
+          link: feed.link,
+          lastBuildDate: new Date(feed.lastBuildDate).toLocaleString(),
+        },
+      ];
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error("Error fetching RSS feed:", error);
+      return [];
+    }
+  } else {
+    // eslint-disable-next-line no-console
+    console.warn("RSS url not set");
+    return [];
+  }
+};

ui/actions/feeds/index.tsx

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

ui/components/feeds/feeds-client.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import Link from "next/link";
+import { useState } from "react";
+
+import { BellIcon as Icon } from "@/components/icons";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu/dropdown-menu";
+import { cn } from "@/lib/utils";
+
+import { Button } from "../ui/button/button";
+
+interface Feed {
+  title: string;
+  link: string;
+  description: string;
+  lastBuildDate: string;
+}
+
+interface FeedsClientProps {
+  initialFeeds?: Feed[];
+}
+
+// TODO: Need to update FeedsClientProps with actual interface when actual RSS data finialized
+export const FeedsClient: React.FC<FeedsClientProps> = ({
+  initialFeeds = [],
+}) => {
+  const [feed] = useState(initialFeeds);
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="outline"
+            className={cn(
+              "relative",
+              "rounded-full",
+              "bg-transparent",
+              "p-2",
+              "h-8",
+              "w-8",
+            )}
+          >
+            <Icon size={18} />
+            {/* TODO: Update this condition once the RSS data response structure is finalized */}
+            {feed.length > 0 && (
+              <span className="absolute right-0 top-0 h-2 w-2 rounded-full bg-red-500 dark:bg-gray-400"></span>
+            )}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" forceMount>
+          <h3 className="px-2 text-base font-medium">Feeds</h3>
+          <div className="max-h-48 w-80 overflow-y-auto">
+            {feed.length === 0 ? (
+              <p className="py-4 text-center text-gray-500">
+                No feeds available
+              </p>
+            ) : (
+              feed.map((item, index) => (
+                <DropdownMenuItem key={index} className="hover:cursor-pointer">
+                  <Link
+                    href={item.link}
+                    target="_blank"
+                    className="flex flex-col"
+                  >
+                    <h3 className="text-small font-medium leading-none">
+                      {item.title}
+                    </h3>
+                    <p className="text-sm text-gray-500">{item.description}</p>
+                    <span className="text-muted-foreground mt-1 text-xs text-gray-400">
+                      {item.lastBuildDate}
+                    </span>
+                  </Link>
+                </DropdownMenuItem>
+              ))
+            )}
+          </div>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </>
+  );
+};

ui/components/feeds/feeds-server.tsx

@@ -0,0 +1,8 @@
+import { fetchFeeds } from "@/actions/feeds";
+import { FeedsClient } from "@/components/feeds";
+
+export const FeedsServer = async () => {
+  const feeds = await fetchFeeds();
+
+  return <FeedsClient initialFeeds={feeds} />;
+};

ui/components/feeds/index.ts

@@ -0,0 +1,2 @@
+export * from "./feeds-client";
+export * from "./feeds-server";

ui/components/icons/Icons.tsx

@@ -1078,3 +1078,28 @@ export const MutedIcon: React.FC<IconSvgProps> = ({
     </svg>
   );
 };
+
+export const BellIcon: React.FC<IconSvgProps> = ({
+  size = 24,
+  width,
+  height,
+  ...props
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width={size || width}
+      height={size || height}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M10.268 21a2 2 0 0 0 3.464 0" />
+      <path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" />
+    </svg>
+  );
+};

ui/components/ui/nav-bar/navbar.tsx

@@ -1,5 +1,6 @@
 import { Icon } from "@iconify/react";
 
+import { FeedsServer } from "@/components/feeds";
 import { ThemeSwitch } from "@/components/ThemeSwitch";
 import { UserProfileProps } from "@/types";
 
@@ -26,6 +27,7 @@ export function Navbar({ title, icon, user }: NavbarProps) {
           <h1 className="text-sm font-bold text-default-700">{title}</h1>
         </div>
         <div className="flex flex-1 items-center justify-end gap-3">
+          {process.env.NEXT_PUBLIC_IS_CLOUD_ENV === "true" && <FeedsServer />}
           <ThemeSwitch />
           <UserNav user={user} />
         </div>

ui/package.json

@@ -35,6 +35,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.52.2",
+    "rss-parser": "^3.13.0",
     "recharts": "^2.15.2",
     "server-only": "^0.0.1",
     "shadcn-ui": "^0.2.3",
@@ -95,4 +96,4 @@
     "@react-types/shared": "3.26.0"
   },
   "version": "0.0.1"
-}
+}