From bdc759d34ce70446081643fdb7064daa61dfb19b Mon Sep 17 00:00:00 2001
From: Pablo Lara
Date: Mon, 3 Mar 2025 12:30:28 +0100
Subject: [PATCH] feat(sidebar): sidebar with new functionalities (#7018)
---
ui/app/(prowler)/categories/page.tsx | 12 -
ui/app/(prowler)/compliance/page.tsx | 8 +-
ui/app/(prowler)/findings/page.tsx | 9 +-
ui/app/(prowler)/integrations/page.tsx | 10 +-
ui/app/(prowler)/invitations/page.tsx | 8 +-
ui/app/(prowler)/layout.tsx | 17 +-
ui/app/(prowler)/manage-groups/layout.tsx | 16 +-
ui/app/(prowler)/page.tsx | 7 +-
ui/app/(prowler)/profile/page.tsx | 9 +-
ui/app/(prowler)/providers/page.tsx | 9 +-
ui/app/(prowler)/roles/page.tsx | 8 +-
ui/app/(prowler)/scans/page.tsx | 15 +-
ui/app/(prowler)/services/page.tsx | 13 +-
ui/app/(prowler)/settings/page.tsx | 12 -
ui/app/(prowler)/users/page.tsx | 8 +-
ui/app/(prowler)/workloads/page.tsx | 11 +-
ui/components/icons/Icons.tsx | 168 +++
ui/components/icons/prowler/ProwlerIcons.tsx | 3 +-
ui/components/scans/no-providers-added.tsx | 2 +-
ui/components/ui/avatar/avatar.tsx | 50 +
ui/components/ui/button/button.tsx | 58 +
ui/components/ui/collapsible/collapsible.tsx | 11 +
.../ui/content-layout/content-layout.tsx | 24 +
.../skeleton-content-layout.tsx | 17 +
.../ui/dropdown-menu/dropdown-menu.tsx | 208 +++
ui/components/ui/headers/header.tsx | 20 -
ui/components/ui/index.ts | 3 +-
ui/components/ui/main-layout/main-layout.tsx | 29 +
ui/components/ui/nav-bar/navbar.tsx | 35 +
ui/components/ui/scroll-area/scroll-area.tsx | 48 +
.../ui/sidebar/collapse-menu-button.tsx | 185 +++
ui/components/ui/sidebar/index.ts | 9 +-
ui/components/ui/sidebar/menu.tsx | 171 +++
ui/components/ui/sidebar/sheet-menu.tsx | 42 +
ui/components/ui/sidebar/sidebar-items.tsx | 531 --------
ui/components/ui/sidebar/sidebar-toggle.tsx | 29 +
ui/components/ui/sidebar/sidebar-wrap.tsx | 370 ------
ui/components/ui/sidebar/sidebar.tsx | 393 +-----
ui/components/ui/sidebar/skeleton-profile.tsx | 19 -
ui/components/ui/sidebar/team-avatar.tsx | 35 -
ui/components/ui/sidebar/user-avatar.tsx | 32 -
ui/components/ui/tooltip/tooltip.tsx | 30 +
ui/components/ui/user-nav/user-nav.tsx | 98 ++
ui/hooks/index.ts | 2 +
ui/hooks/use-sidebar.ts | 49 +
ui/hooks/use-store.ts | 17 +
ui/lib/index.ts | 1 +
ui/lib/menu-list.ts | 185 +++
ui/package-lock.json | 1111 ++++++++++-------
ui/package.json | 2 +
ui/tailwind.config.js | 12 +-
ui/types/components.ts | 33 +
52 files changed, 2312 insertions(+), 1892 deletions(-)
delete mode 100644 ui/app/(prowler)/categories/page.tsx
delete mode 100644 ui/app/(prowler)/settings/page.tsx
create mode 100644 ui/components/ui/avatar/avatar.tsx
create mode 100644 ui/components/ui/button/button.tsx
create mode 100644 ui/components/ui/collapsible/collapsible.tsx
create mode 100644 ui/components/ui/content-layout/content-layout.tsx
create mode 100644 ui/components/ui/content-layout/skeleton-content-layout.tsx
create mode 100644 ui/components/ui/dropdown-menu/dropdown-menu.tsx
delete mode 100644 ui/components/ui/headers/header.tsx
create mode 100644 ui/components/ui/main-layout/main-layout.tsx
create mode 100644 ui/components/ui/nav-bar/navbar.tsx
create mode 100644 ui/components/ui/scroll-area/scroll-area.tsx
create mode 100644 ui/components/ui/sidebar/collapse-menu-button.tsx
create mode 100644 ui/components/ui/sidebar/menu.tsx
create mode 100644 ui/components/ui/sidebar/sheet-menu.tsx
delete mode 100644 ui/components/ui/sidebar/sidebar-items.tsx
create mode 100644 ui/components/ui/sidebar/sidebar-toggle.tsx
delete mode 100644 ui/components/ui/sidebar/sidebar-wrap.tsx
delete mode 100644 ui/components/ui/sidebar/skeleton-profile.tsx
delete mode 100644 ui/components/ui/sidebar/team-avatar.tsx
delete mode 100644 ui/components/ui/sidebar/user-avatar.tsx
create mode 100644 ui/components/ui/tooltip/tooltip.tsx
create mode 100644 ui/components/ui/user-nav/user-nav.tsx
create mode 100644 ui/hooks/use-sidebar.ts
create mode 100644 ui/hooks/use-store.ts
create mode 100644 ui/lib/menu-list.ts
diff --git a/ui/app/(prowler)/categories/page.tsx b/ui/app/(prowler)/categories/page.tsx
deleted file mode 100644
index 1a5650d8af..0000000000
--- a/ui/app/(prowler)/categories/page.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Spacer } from "@nextui-org/react";
-
-import { Header } from "@/components/ui";
-
-export default async function Categories() {
- return (
- <>
-
-
- >
- );
-}
diff --git a/ui/app/(prowler)/compliance/page.tsx b/ui/app/(prowler)/compliance/page.tsx
index ce5fe18e5d..22164bbcc3 100644
--- 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 (
- <>
-
-
+
}>
- >
+
);
}
diff --git a/ui/app/(prowler)/findings/page.tsx b/ui/app/(prowler)/findings/page.tsx
index 0c9b170ddd..9fa50fc115 100644
--- 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 (
- <>
-
-
-
+
}>
- >
+
);
}
diff --git a/ui/app/(prowler)/integrations/page.tsx b/ui/app/(prowler)/integrations/page.tsx
index a930f1ed36..3760cae57e 100644
--- 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 (
- <>
-
-
- Hi hi from Integration page
- >
+
+ Integrations
+
);
}
diff --git a/ui/app/(prowler)/invitations/page.tsx b/ui/app/(prowler)/invitations/page.tsx
index e9cc2a8cb0..b51a315d15 100644
--- 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 (
- <>
-
-
+
@@ -35,7 +33,7 @@ export default async function Invitations({
}>
- >
+
);
}
diff --git a/ui/app/(prowler)/layout.tsx b/ui/app/(prowler)/layout.tsx
index 2d74472428..ff931d8f19 100644
--- 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 (
@@ -47,13 +45,8 @@ export default function RootLayout({
)}
>
-
-
-
- {children}
-
-
-
+ {children}
+
diff --git a/ui/app/(prowler)/manage-groups/layout.tsx b/ui/app/(prowler)/manage-groups/layout.tsx
index a7b52289f7..7a8e214df1 100644
--- a/ui/app/(prowler)/manage-groups/layout.tsx
+++ b/ui/app/(prowler)/manage-groups/layout.tsx
@@ -1,9 +1,8 @@
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;
@@ -11,14 +10,11 @@ interface ProviderLayoutProps {
export default function ProviderLayout({ children }: ProviderLayoutProps) {
return (
- <>
-
-
+
{children}
- >
+
);
}
diff --git a/ui/app/(prowler)/page.tsx b/ui/app/(prowler)/page.tsx
index 01d5f93c3d..c2dcded6c7 100644
--- 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 (
- <>
-
+
@@ -67,7 +66,7 @@ export default function Home({
- >
+
);
}
diff --git a/ui/app/(prowler)/profile/page.tsx b/ui/app/(prowler)/profile/page.tsx
index e09aeae757..6ea66ded18 100644
--- 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 (
- <>
-
-
+
@@ -23,7 +20,7 @@ export default async function Profile() {
- >
+
);
}
diff --git a/ui/app/(prowler)/providers/page.tsx b/ui/app/(prowler)/providers/page.tsx
index 54dd5214c2..bd6b0baeb8 100644
--- 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 (
- <>
-
-
-
+
@@ -42,7 +39,7 @@ export default async function Providers({
- >
+
);
}
diff --git a/ui/app/(prowler)/roles/page.tsx b/ui/app/(prowler)/roles/page.tsx
index e7603bc9fa..f0515ea546 100644
--- 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 (
- <>
-
-
+
@@ -32,7 +30,7 @@ export default async function Roles({
}>
- >
+
);
}
diff --git a/ui/app/(prowler)/scans/page.tsx b/ui/app/(prowler)/scans/page.tsx
index 05435149da..ea2b812f3e 100644
--- 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 ? (
- <>
-
-
+
- >
+
) : (
- <>
-
+
- >
+
)}
-
+
diff --git a/ui/app/(prowler)/services/page.tsx b/ui/app/(prowler)/services/page.tsx
index 7e39ad2730..5177ea2310 100644
--- 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 (
- <>
-
+
}>
- >
+
);
}
diff --git a/ui/app/(prowler)/settings/page.tsx b/ui/app/(prowler)/settings/page.tsx
deleted file mode 100644
index 6653c38b1c..0000000000
--- a/ui/app/(prowler)/settings/page.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Spacer } from "@nextui-org/react";
-
-import { Header } from "@/components/ui";
-
-export default async function Settings() {
- return (
- <>
-
-
- >
- );
-}
diff --git a/ui/app/(prowler)/users/page.tsx b/ui/app/(prowler)/users/page.tsx
index 17c70a3cdd..b4a19ac5fc 100644
--- a/ui/app/(prowler)/users/page.tsx
+++ b/ui/app/(prowler)/users/page.tsx
@@ -5,7 +5,7 @@ import { getRoles } from "@/actions/roles";
import { getUsers } from "@/actions/users/users";
import { FilterControls } from "@/components/filters";
import { filterUsers } from "@/components/filters/data-filters";
-import { Header } from "@/components/ui";
+import { ContentLayout } from "@/components/ui";
import { DataTable, DataTableFilterCustom } from "@/components/ui/table";
import { AddUserButton } from "@/components/users";
import { ColumnsUser, SkeletonTableUser } from "@/components/users/table";
@@ -19,9 +19,7 @@ export default async function Users({
const searchParamsKey = JSON.stringify(searchParams || {});
return (
- <>
-
-
+
@@ -32,7 +30,7 @@ export default async function Users({
}>
- >
+
);
}
diff --git a/ui/app/(prowler)/workloads/page.tsx b/ui/app/(prowler)/workloads/page.tsx
index 3cadd0d1ca..5ffd6a9802 100644
--- a/ui/app/(prowler)/workloads/page.tsx
+++ b/ui/app/(prowler)/workloads/page.tsx
@@ -1,12 +1,9 @@
-import { Spacer } from "@nextui-org/react";
-
-import { Header } from "@/components/ui";
+import { ContentLayout } from "@/components/ui";
export default async function Workloads() {
return (
- <>
-
-
- >
+
+ Workloads
+
);
}
diff --git a/ui/components/icons/Icons.tsx b/ui/components/icons/Icons.tsx
index 963f7d9b4f..b2ebc70fd2 100644
--- a/ui/components/icons/Icons.tsx
+++ b/ui/components/icons/Icons.tsx
@@ -832,3 +832,171 @@ export const SpinnerIcon: React.FC
= ({
);
+
+export const DocIcon: React.FC = ({
+ size = 24,
+ width,
+ height,
+ ...props
+}) => {
+ return (
+
+ );
+};
+
+export const APIdocIcon: React.FC = ({
+ size = 24,
+ width,
+ height,
+ ...props
+}) => {
+ return (
+
+ );
+};
+
+export const SupportIcon: React.FC = ({
+ size = 24,
+ width,
+ height,
+ ...props
+}) => {
+ return (
+
+ );
+};
+
+export const CircleHelpIcon: React.FC = ({
+ size = 24,
+ width,
+ height,
+ ...props
+}) => {
+ return (
+
+ );
+};
+
+export const AWSIcon: React.FC = ({
+ size = 24,
+ width,
+ height,
+ ...props
+}) => {
+ return (
+
+ );
+};
+
+export const AzureIcon: React.FC = ({
+ size = 24,
+ width,
+ height,
+ ...props
+}) => {
+ return (
+
+ );
+};
+
+export const GCPIcon: React.FC = ({
+ size = 24,
+ width,
+ height,
+ ...props
+}) => {
+ return (
+
+ );
+};
diff --git a/ui/components/icons/prowler/ProwlerIcons.tsx b/ui/components/icons/prowler/ProwlerIcons.tsx
index ae0b989e6b..4a616553a4 100644
--- a/ui/components/icons/prowler/ProwlerIcons.tsx
+++ b/ui/components/icons/prowler/ProwlerIcons.tsx
@@ -10,6 +10,7 @@ export const ProwlerExtended: React.FC = ({
}) => {
return (