Hide profile settings and announcements for blocked dashboard view (#365)

Author: heisbrot

src/app/(dashboard)/peers/page.tsx

@@ -22,7 +22,7 @@ export default function Peers() {
   return (
     <PageContainer>
       {permission?.dashboard_view === "blocked" ? (
-        <PeersDefaultView />
+        <PeersBlockedView />
       ) : (
         <PeersView />
       )}
@@ -82,11 +82,11 @@ function PeersView() {
   );
 }
 
-function PeersDefaultView() {
+function PeersBlockedView() {
   return (
     <div className={"flex items-center justify-center flex-col"}>
       <div className={"p-default py-6 max-w-3xl text-center"}>
-        <h1>Add new peer to your network</h1>
+        <h1>Add new device to your network</h1>
         <Paragraph className={"inline"}>
           To get started, install NetBird and log in using your email account.
           After that you should be connected. If you have further questions

src/components/ui/UserDropdown.tsx

@@ -36,6 +36,7 @@ export default function UserDropdown() {
   useHotkeys("shift+mod+l", () => logout(), []);
 
   const [dropdownOpen, setDropdownOpen] = useState(false);
+  const { permission } = useLoggedInUser();
 
   return (
     <DropdownMenu
@@ -67,19 +68,23 @@ export default function UserDropdown() {
         </DropdownMenuLabel>
 
         <DropdownMenuSeparator />
-        <DropdownMenuItem
-          onClick={() => {
-            setDropdownOpen(false);
-            if (loggedInUser) {
-              router.push(`/team/user?id=${loggedInUser.id}`);
-            }
-          }}
-        >
-          <div className={"flex gap-3 items-center"}>
-            <User2 size={14} />
-            Profile Settings
-          </div>
-        </DropdownMenuItem>
+
+        {permission.dashboard_view !== "blocked" && (
+          <DropdownMenuItem
+            onClick={() => {
+              setDropdownOpen(false);
+              if (loggedInUser) {
+                router.push(`/team/user?id=${loggedInUser.id}`);
+              }
+            }}
+          >
+            <div className={"flex gap-3 items-center"}>
+              <User2 size={14} />
+              Profile Settings
+            </div>
+          </DropdownMenuItem>
+        )}
+
         <DropdownMenuItem onClick={logoutSession}>
           <div className={"flex gap-3 items-center"}>
             <LogOutIcon size={14} />

src/contexts/AnnouncementProvider.tsx

@@ -2,6 +2,7 @@ import { AnnouncementVariant } from "@components/ui/AnnouncementBanner";
 import { useLocalStorage } from "@hooks/useLocalStorage";
 import md5 from "crypto-js/md5";
 import React, { useEffect, useState } from "react";
+import { useLoggedInUser } from "@/contexts/UsersProvider";
 
 const initialAnnouncements: Announcement[] = [];
 
@@ -39,8 +40,10 @@ export default function AnnouncementProvider({ children }: Props) {
     string[]
   >("netbird-closed-announcements", []);
   const [announcements, setAnnouncements] = useState<AnnouncementInfo[]>();
+  const { permission } = useLoggedInUser();
 
   useEffect(() => {
+    if (permission?.dashboard_view === "blocked") return;
     const initial = initialAnnouncements.map((announcement) => {
       const hash = md5(announcement.text).toString();
       const isOpen = !closedAnnouncements.some((h) => h === hash);

src/layouts/AppLayout.tsx

@@ -11,7 +11,6 @@ import React from "react";
 import { Toaster } from "react-hot-toast";
 import OIDCProvider from "@/auth/OIDCProvider";
 import AnalyticsProvider from "@/contexts/AnalyticsProvider";
-import AnnouncementProvider from "@/contexts/AnnouncementProvider";
 import DialogProvider from "@/contexts/DialogProvider";
 import ErrorBoundaryProvider from "@/contexts/ErrorBoundary";
 import { GlobalThemeProvider } from "@/contexts/GlobalThemeProvider";
@@ -36,11 +35,9 @@ export default function AppLayout({ children }: { children: React.ReactNode }) {
             <GlobalThemeProvider>
               <ErrorBoundaryProvider>
                 <OIDCProvider>
-                  <AnnouncementProvider>
-                    <TooltipProvider delayDuration={0}>
-                      {children}
-                    </TooltipProvider>
-                  </AnnouncementProvider>
+                  <TooltipProvider delayDuration={0}>
+                    {children}
+                  </TooltipProvider>
                 </OIDCProvider>
               </ErrorBoundaryProvider>
             </GlobalThemeProvider>

src/layouts/DashboardLayout.tsx

@@ -9,7 +9,9 @@ import { useIsSm, useIsXs } from "@utils/responsive";
 import { AnimatePresence, motion } from "framer-motion";
 import { XIcon } from "lucide-react";
 import React from "react";
-import { useAnnouncement } from "@/contexts/AnnouncementProvider";
+import AnnouncementProvider, {
+  useAnnouncement,
+} from "@/contexts/AnnouncementProvider";
 import ApplicationProvider, {
   useApplicationContext,
 } from "@/contexts/ApplicationProvider";
@@ -29,7 +31,9 @@ export default function DashboardLayout({
       <UsersProvider>
         <GroupsProvider>
           <CountryProvider>
-            <DashboardPageContent>{children}</DashboardPageContent>
+            <AnnouncementProvider>
+              <DashboardPageContent>{children}</DashboardPageContent>
+            </AnnouncementProvider>
           </CountryProvider>
         </GroupsProvider>
       </UsersProvider>