feat(sidebar): sidebar with new functionalities (#7018)

prowler-cloud · Mar 3, 2025 · bdc759d · bdc759d
1 parent 8db442d
commit bdc759d
Show file tree

Hide file tree

Showing 52 changed files with 2,312 additions and 1,892 deletions.
diff --git a/ui/app/(prowler)/categories/page.tsx b/ui/app/(prowler)/categories/page.tsx
diff --git a/ui/app/(prowler)/compliance/page.tsx b/ui/app/(prowler)/compliance/page.tsx
@@ -10,7 +10,7 @@ import {
   ComplianceSkeletonGrid,
 } from "@/components/compliance";
 import { DataCompliance } from "@/components/compliance/data-compliance";
-import { Header } from "@/components/ui";
+import { ContentLayout } from "@/components/ui";
 import { ComplianceOverviewData, SearchParamsProps } from "@/types";
 
 export default async function Compliance({
@@ -80,15 +80,13 @@ export default async function Compliance({
   }
 
   return (
-    <>
-      <Header title="Compliance" icon="fluent-mdl2:compliance-audit" />
-      <Spacer y={4} />
+    <ContentLayout title="Compliance" icon="fluent-mdl2:compliance-audit">
       <DataCompliance scans={scanList} regions={regions} />
       <Spacer y={12} />
       <Suspense fallback={<ComplianceSkeletonGrid />}>
         <SSRComplianceGrid searchParams={searchParams} />
       </Suspense>
-    </>
+    </ContentLayout>
   );
 }
 

diff --git a/ui/app/(prowler)/findings/page.tsx b/ui/app/(prowler)/findings/page.tsx
@@ -11,7 +11,7 @@ import {
   ColumnFindings,
   SkeletonTableFindings,
 } from "@/components/findings/table";
-import { Header } from "@/components/ui";
+import { ContentLayout } from "@/components/ui";
 import { DataTable, DataTableFilterCustom } from "@/components/ui/table";
 import { createDict } from "@/lib";
 import {
@@ -101,10 +101,7 @@ export default async function Findings({
     completedScans?.map((scan: ScanProps) => scan.id) || [];
 
   return (
-    <>
-      <Header title="Findings" icon="carbon:data-view-alt" />
-      <Spacer />
-      <Spacer y={4} />
+    <ContentLayout title="Findings" icon="carbon:data-view-alt">
       <FilterControls search date />
       <Spacer y={8} />
       <DataTableFilterCustom
@@ -142,7 +139,7 @@ export default async function Findings({
       <Suspense key={searchParamsKey} fallback={<SkeletonTableFindings />}>
         <SSRDataTable searchParams={searchParams} />
       </Suspense>
-    </>
+    </ContentLayout>
   );
 }
 

diff --git a/ui/app/(prowler)/integrations/page.tsx b/ui/app/(prowler)/integrations/page.tsx
@@ -1,13 +1,11 @@
 import React from "react";
 
-import { Header } from "@/components/ui";
+import { ContentLayout } from "@/components/ui";
 
 export default function Integrations() {
   return (
-    <>
-      <Header title="Integrations" icon="tabler:puzzle" />
-
-      <p>Hi hi from Integration page</p>
-    </>
+    <ContentLayout title="Integrations" icon="tabler:puzzle">
+      <p>Integrations</p>
+    </ContentLayout>
   );
 }
diff --git a/ui/app/(prowler)/invitations/page.tsx b/ui/app/(prowler)/invitations/page.tsx
@@ -10,7 +10,7 @@ import {
   ColumnsInvitation,
   SkeletonTableInvitation,
 } from "@/components/invitations/table";
-import { Header } from "@/components/ui";
+import { ContentLayout } from "@/components/ui";
 import { DataTable, DataTableFilterCustom } from "@/components/ui/table";
 import { InvitationProps, Role, SearchParamsProps } from "@/types";
 
@@ -22,9 +22,7 @@ export default async function Invitations({
   const searchParamsKey = JSON.stringify(searchParams || {});
 
   return (
-    <>
-      <Header title="Invitations" icon="ci:users" />
-      <Spacer y={4} />
+    <ContentLayout title="Invitations" icon="ci:users">
       <FilterControls search />
       <Spacer y={8} />
       <SendInvitationButton />
@@ -35,7 +33,7 @@ export default async function Invitations({
       <Suspense key={searchParamsKey} fallback={<SkeletonTableInvitation />}>
         <SSRDataTable searchParams={searchParams} />
       </Suspense>
-    </>
+    </ContentLayout>
   );
 }
 

diff --git a/ui/app/(prowler)/layout.tsx b/ui/app/(prowler)/layout.tsx
@@ -1,10 +1,10 @@
 import "@/styles/globals.css";
 
 import { Metadata, Viewport } from "next";
-import React, { use } from "react";
+import React from "react";
 
-import { getProfileInfo } from "@/actions/users/users";
-import { SidebarWrap, Toaster } from "@/components/ui";
+import MainLayout from "@/components/ui/main-layout/main-layout";
+import { Toaster } from "@/components/ui/toast";
 import { fontSans } from "@/config/fonts";
 import { siteConfig } from "@/config/site";
 import { cn } from "@/lib/utils";
@@ -34,8 +34,6 @@ export default function RootLayout({
 }: {
   children: React.ReactNode;
 }) {
-  const user = use(getProfileInfo());
-
   return (
     <html suppressHydrationWarning lang="en">
       <head />
@@ -47,13 +45,8 @@ export default function RootLayout({
         )}
       >
         <Providers themeProps={{ attribute: "class", defaultTheme: "dark" }}>
-          <div className="flex h-dvh items-center justify-center overflow-hidden">
-            <SidebarWrap user={user} />
-            <main className="no-scrollbar mb-auto h-full flex-1 flex-col overflow-y-auto px-6 py-4 xl:px-10">
-              {children}
-              <Toaster />
-            </main>
-          </div>
+          <MainLayout>{children}</MainLayout>
+          <Toaster />
         </Providers>
       </body>
     </html>

diff --git a/ui/app/(prowler)/manage-groups/layout.tsx b/ui/app/(prowler)/manage-groups/layout.tsx
@@ -1,24 +1,20 @@
 import "@/styles/globals.css";
 
-import { Spacer } from "@nextui-org/react";
 import React from "react";
 
-import { NavigationHeader } from "@/components/ui";
+import { ContentLayout } from "@/components/ui";
 
 interface ProviderLayoutProps {
   children: React.ReactNode;
 }
 
 export default function ProviderLayout({ children }: ProviderLayoutProps) {
   return (
-    <>
-      <NavigationHeader
-        title="Manage providers groups"
-        icon="icon-park-outline:close-small"
-        href="/providers"
-      />
-      <Spacer y={16} />
+    <ContentLayout
+      title="Manage Groups"
+      icon="solar:users-group-two-rounded-outline"
+    >
       {children}
-    </>
+    </ContentLayout>
   );
 }
diff --git a/ui/app/(prowler)/page.tsx b/ui/app/(prowler)/page.tsx
@@ -20,7 +20,7 @@ import {
 } from "@/components/overview";
 import { ColumnNewFindingsToDate } from "@/components/overview/new-findings-table/table/column-new-findings-to-date";
 import { SkeletonTableNewFindings } from "@/components/overview/new-findings-table/table/skeleton-table-new-findings";
-import { Header } from "@/components/ui";
+import { ContentLayout } from "@/components/ui";
 import { DataTable } from "@/components/ui/table";
 import { createDict } from "@/lib/helper";
 import { FindingProps, SearchParamsProps } from "@/types";
@@ -32,8 +32,7 @@ export default function Home({
 }) {
   const searchParamsKey = JSON.stringify(searchParams || {});
   return (
-    <>
-      <Header title="Scan Overview" icon="solar:pie-chart-2-outline" />
+    <ContentLayout title="Overview" icon="solar:pie-chart-2-outline">
       <Spacer y={4} />
       <FilterControls providers />
       <div className="mx-auto space-y-8 px-0 py-6">
@@ -67,7 +66,7 @@ export default function Home({
           </div>
         </div>
       </div>
-    </>
+    </ContentLayout>
   );
 }
 

diff --git a/ui/app/(prowler)/profile/page.tsx b/ui/app/(prowler)/profile/page.tsx
@@ -1,17 +1,14 @@
-import { Spacer } from "@nextui-org/react";
 import React, { Suspense } from "react";
 
 import { getProfileInfo } from "@/actions/users/users";
-import { Header } from "@/components/ui";
+import { ContentLayout } from "@/components/ui";
 import { SkeletonUserInfo } from "@/components/users/profile";
 import { UserInfo } from "@/components/users/profile/user-info";
 import { UserProfileProps } from "@/types";
 
 export default async function Profile() {
   return (
-    <>
-      <Header title="User Profile" icon="ci:users" />
-      <Spacer y={4} />
+    <ContentLayout title="User Profile" icon="ci:users">
       <div className="min-h-screen">
         <div className="container mx-auto space-y-8 px-0 py-6">
           <div className="grid grid-cols-12 gap-6">
@@ -23,7 +20,7 @@ export default async function Profile() {
           </div>
         </div>
       </div>
-    </>
+    </ContentLayout>
   );
 }
 

diff --git a/ui/app/(prowler)/providers/page.tsx b/ui/app/(prowler)/providers/page.tsx
@@ -9,7 +9,7 @@ import {
   ColumnProviders,
   SkeletonTableProviders,
 } from "@/components/providers/table";
-import { Header } from "@/components/ui";
+import { ContentLayout } from "@/components/ui";
 import { DataTable, DataTableFilterCustom } from "@/components/ui/table";
 import { ProviderProps, SearchParamsProps } from "@/types";
 
@@ -21,10 +21,7 @@ export default async function Providers({
   const searchParamsKey = JSON.stringify(searchParams || {});
 
   return (
-    <>
-      <Header title="Cloud Providers" icon="fluent:cloud-sync-24-regular" />
-
-      <Spacer y={4} />
+    <ContentLayout title="Cloud Providers" icon="fluent:cloud-sync-24-regular">
       <FilterControls search />
       <Spacer y={8} />
       <div className="flex items-center gap-4 md:justify-end">
@@ -42,7 +39,7 @@ export default async function Providers({
           </Suspense>
         </div>
       </div>
-    </>
+    </ContentLayout>
   );
 }
 

diff --git a/ui/app/(prowler)/roles/page.tsx b/ui/app/(prowler)/roles/page.tsx
@@ -7,7 +7,7 @@ import { filterRoles } from "@/components/filters/data-filters";
 import { AddRoleButton } from "@/components/roles";
 import { ColumnsRoles } from "@/components/roles/table";
 import { SkeletonTableRoles } from "@/components/roles/table";
-import { Header } from "@/components/ui";
+import { ContentLayout } from "@/components/ui";
 import { DataTable, DataTableFilterCustom } from "@/components/ui/table";
 import { SearchParamsProps } from "@/types";
 
@@ -19,9 +19,7 @@ export default async function Roles({
   const searchParamsKey = JSON.stringify(searchParams || {});
 
   return (
-    <>
-      <Header title="Roles" icon="mdi:account-key-outline" />
-      <Spacer y={4} />
+    <ContentLayout title="Roles" icon="mdi:account-key-outline">
       <FilterControls search />
       <Spacer y={8} />
       <AddRoleButton />
@@ -32,7 +30,7 @@ export default async function Roles({
       <Suspense key={searchParamsKey} fallback={<SkeletonTableRoles />}>
         <SSRDataTable searchParams={searchParams} />
       </Suspense>
-    </>
+    </ContentLayout>
   );
 }
 

diff --git a/ui/app/(prowler)/scans/page.tsx b/ui/app/(prowler)/scans/page.tsx
@@ -12,7 +12,7 @@ import {
 import { LaunchScanWorkflow } from "@/components/scans/launch-workflow";
 import { SkeletonTableScans } from "@/components/scans/table";
 import { ColumnGetScans } from "@/components/scans/table/scans";
-import { Header } from "@/components/ui";
+import { ContentLayout } from "@/components/ui";
 import { DataTable, DataTableFilterCustom } from "@/components/ui/table";
 import { ProviderProps, ScanProps, SearchParamsProps } from "@/types";
 
@@ -66,23 +66,20 @@ export default async function Scans({
       {!thereIsNoProviders && (
         <>
           {thereIsNoProvidersConnected ? (
-            <>
-              <Header title="Scans" icon="lucide:scan-search" />
-
+            <ContentLayout title="Scans" icon="lucide:scan-search">
               <Spacer y={8} />
               <NoProvidersConnected />
               <Spacer y={8} />
-            </>
+            </ContentLayout>
           ) : (
-            <>
-              <Header title="Scans" icon="lucide:scan-search" />
+            <ContentLayout title="Scans" icon="lucide:scan-search">
               <AutoRefresh hasExecutingScan={hasExecutingScan} />
               <LaunchScanWorkflow providers={providerInfo} />
               <Spacer y={8} />
-            </>
+            </ContentLayout>
           )}
 
-          <div className="grid grid-cols-12 items-start gap-4">
+          <div className="grid grid-cols-12 items-start gap-4 px-6 py-4 sm:px-8 xl:px-10">
             <div className="col-span-12">
               <div className="flex flex-row items-center justify-between">
                 <DataTableFilterCustom filters={filterScans || []} />

diff --git a/ui/app/(prowler)/services/page.tsx b/ui/app/(prowler)/services/page.tsx
@@ -4,7 +4,7 @@ import { Suspense } from "react";
 import { getServices } from "@/actions/services";
 import { FilterControls } from "@/components/filters";
 import { ServiceCard, ServiceSkeletonGrid } from "@/components/services";
-import { Header } from "@/components/ui";
+import { ContentLayout } from "@/components/ui";
 import { SearchParamsProps } from "@/types";
 
 export default async function Services({
@@ -14,18 +14,17 @@ export default async function Services({
 }) {
   const searchParamsKey = JSON.stringify(searchParams || {});
   return (
-    <>
-      <Header
-        title="Services"
-        icon="material-symbols:linked-services-outline"
-      />
+    <ContentLayout
+      title="Services"
+      icon="material-symbols:linked-services-outline"
+    >
       <Spacer y={4} />
       <FilterControls />
       <Spacer y={4} />
       <Suspense key={searchParamsKey} fallback={<ServiceSkeletonGrid />}>
         <SSRServiceGrid />
       </Suspense>
-    </>
+    </ContentLayout>
   );
 }
 

diff --git a/ui/app/(prowler)/settings/page.tsx b/ui/app/(prowler)/settings/page.tsx