fix(edge/waitingroom): hide sidebar when disabled [EE-6003] (#10343)

app/react/sidebar/EdgeComputeSidebar.tsx

@@ -1,11 +1,21 @@
-import { Box, Clock, LayoutGrid, Layers } from 'lucide-react';
+import { Box, Clock, LayoutGrid, Layers, Puzzle } from 'lucide-react';
 
 import { isBE } from '../portainer/feature-flags/feature-flags.service';
+import { useSettings } from '../portainer/settings/queries';
 
 import { SidebarItem } from './SidebarItem';
 import { SidebarSection } from './SidebarSection';
 
 export function EdgeComputeSidebar() {
+  // this sidebar is rendered only for admins, so we can safely assume that settingsQuery will succeed
+  const settingsQuery = useSettings();
+
+  if (!settingsQuery.data || !settingsQuery.data.EnableEdgeComputeFeatures) {
+    return null;
+  }
+
+  const settings = settingsQuery.data;
+
   return (
     <SidebarSection title="Edge compute">
       <SidebarItem
@@ -27,6 +37,14 @@ export function EdgeComputeSidebar() {
         data-cy="portainerSidebar-edgeJobs"
       />
       {isBE && (
+        <SidebarItem
+          to="edge.configurations"
+          label="Edge Configurations"
+          icon={Puzzle}
+          data-cy="portainerSidebar-edgeConfigurations"
+        />
+      )}
+      {isBE && !settings.TrustOnFirstConnect && (
         <SidebarItem
           to="edge.devices.waiting-room"
           label="Waiting Room"

app/react/sidebar/Sidebar.tsx

@@ -25,7 +25,7 @@ export function Sidebar() {
     return null;
   }
 
-  const { EnableEdgeComputeFeatures, LogoURL } = settingsQuery.data;
+  const { LogoURL } = settingsQuery.data;
 
   return (
     /* in the future (when we remove r2a) this should wrap the whole app - to change root styles */
@@ -50,7 +50,7 @@ export function Sidebar() {
                 data-cy="portainerSidebar-home"
               />
               <EnvironmentSidebar />
-              {isAdmin && EnableEdgeComputeFeatures && <EdgeComputeSidebar />}
+              {isAdmin && <EdgeComputeSidebar />}
               <SettingsSidebar isAdmin={isAdmin} isTeamLeader={isTeamLeader} />
             </ul>
           </div>