chore(users): renaming the account now triggers a re-render in the si…

…debar (#7005)
prowler-cloud · Mar 3, 2025 · b4e1434 · b4e1434
1 parent 4371078
commit b4e1434
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 18 deletions.
diff --git a/ui/app/(prowler)/layout.tsx b/ui/app/(prowler)/layout.tsx
@@ -1,8 +1,9 @@
 import "@/styles/globals.css";
 
 import { Metadata, Viewport } from "next";
-import React from "react";
+import React, { use } from "react";
 
+import { getProfileInfo } from "@/actions/users/users";
 import { SidebarWrap, Toaster } from "@/components/ui";
 import { fontSans } from "@/config/fonts";
 import { siteConfig } from "@/config/site";
@@ -33,6 +34,8 @@ export default function RootLayout({
 }: {
   children: React.ReactNode;
 }) {
+  const user = use(getProfileInfo());
+
   return (
     <html suppressHydrationWarning lang="en">
       <head />
@@ -45,7 +48,7 @@ export default function RootLayout({
       >
         <Providers themeProps={{ attribute: "class", defaultTheme: "dark" }}>
           <div className="flex h-dvh items-center justify-center overflow-hidden">
-            <SidebarWrap />
+            <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 />

diff --git a/ui/components/auth/oss/auth-form.tsx b/ui/components/auth/oss/auth-form.tsx
@@ -165,7 +165,7 @@ export const AuthForm = ({
                     control={form.control}
                     name="company"
                     type="text"
-                    label="Company Name"
+                    label="Company name"
                     placeholder="Enter your company name"
                     isRequired={false}
                     isInvalid={!!form.formState.errors.company}

diff --git a/ui/components/findings/table/finding-detail.tsx b/ui/components/findings/table/finding-detail.tsx
@@ -224,11 +224,13 @@ export const FindingDetail = ({
             <h4 className="text-sm font-bold text-gray-500 dark:text-gray-400">
               Tags
             </h4>
-            {Object.entries(resource.tags).map(([key, value]) => (
-              <InfoField key={key} label={key}>
-                {renderValue(value)}
-              </InfoField>
-            ))}
+            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+              {Object.entries(resource.tags).map(([key, value]) => (
+                <InfoField key={key} label={key}>
+                  {renderValue(value)}
+                </InfoField>
+              ))}
+            </div>
           </div>
         )}
 

diff --git a/ui/components/ui/sidebar/index.ts b/ui/components/ui/sidebar/index.ts
@@ -1,5 +1,6 @@
 export * from "./sidebar";
 export * from "./sidebar-items";
 export * from "./sidebar-wrap";
+export * from "./skeleton-profile";
 export * from "./team-avatar";
 export * from "./user-avatar";
diff --git a/ui/components/ui/sidebar/sidebar-wrap.tsx b/ui/components/ui/sidebar/sidebar-wrap.tsx
@@ -5,13 +5,13 @@ import { Button, ScrollShadow, Spacer, Tooltip } from "@nextui-org/react";
 import clsx from "clsx";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { useSession } from "next-auth/react";
-import React, { Suspense, useCallback } from "react";
+import React, { useCallback } from "react";
 import { useMediaQuery } from "usehooks-ts";
 
 import { logOut } from "@/actions/auth";
 import { AddIcon } from "@/components/icons";
 import { useUIStore } from "@/store";
+import { UserProfileProps } from "@/types";
 
 import {
   ProwlerExtended,
@@ -21,12 +21,11 @@ import { ThemeSwitch } from "../../ThemeSwitch";
 import { CustomButton } from "../custom";
 import Sidebar from "./sidebar";
 import { sectionItemsWithTeams } from "./sidebar-items";
+import { SkeletonProfile } from "./skeleton-profile";
 import { UserAvatar } from "./user-avatar";
 
-export const SidebarWrap = () => {
+export const SidebarWrap = ({ user }: { user: UserProfileProps }) => {
   const pathname = usePathname();
-  const { data: session } = useSession();
-
   const isCollapsed = useUIStore((state) => state.isSideMenuOpen);
   const openSideMenu = useUIStore((state) => state.openSideMenu);
   const closeSideMenu = useUIStore((state) => state.closeSideMenu);
@@ -78,13 +77,15 @@ export const SidebarWrap = () => {
           </div>
         </Link>
         <Link href={"/users"}>
-          <Suspense fallback={<p>Loading...</p>}>
+          {!user ? (
+            <SkeletonProfile />
+          ) : (
             <UserAvatar
-              userName={session?.user.name ?? "Guest"}
-              position={session?.user.companyName ?? "Company Name"}
+              userName={user?.data?.attributes?.name as string}
+              position={user?.data?.attributes?.company_name as string}
               isCompact={isCompact}
             />
-          </Suspense>
+          )}
         </Link>
         <div
           className={clsx({

diff --git a/ui/components/ui/sidebar/skeleton-profile.tsx b/ui/components/ui/sidebar/skeleton-profile.tsx
@@ -0,0 +1,19 @@
+import { Skeleton } from "@nextui-org/react";
+
+export const SkeletonProfile = () => {
+  return (
+    <div className="flex items-center space-x-2">
+      <Skeleton className="h-10 w-10 rounded-full">
+        <div className="h-10 w-10 rounded-full bg-default-200"></div>
+      </Skeleton>
+      <div className="flex flex-col space-y-1">
+        <Skeleton className="h-4 w-24 rounded-lg">
+          <div className="h-4 bg-default-200"></div>
+        </Skeleton>
+        <Skeleton className="h-3 w-24 rounded-lg">
+          <div className="h-3 bg-default-200"></div>
+        </Skeleton>
+      </div>
+    </div>
+  );
+};
diff --git a/ui/components/users/table/column-users.tsx b/ui/components/users/table/column-users.tsx
@@ -46,7 +46,7 @@ export const ColumnsUser: ColumnDef<UserProps>[] = [
     header: ({ column }) => (
       <DataTableColumnHeader
         column={column}
-        title={"Company Name"}
+        title={"Company name"}
         param="company_name"
       />
     ),