add UIX to modules dropdown

packages/admin-ui/src/App.tsx

@@ -9,7 +9,6 @@ import Loading from "components/Loading";
 import Welcome from "components/welcome/Welcome";
 import SideBar from "components/sidebar/SideBar";
 import { TopBar } from "components/topbar/TopBar";
-import { rootPath as dashboardRootPath } from "./pages/dashboard";
 // Pages
 import { pages } from "./pages";
 import { Login } from "./start-pages/Login";
@@ -51,7 +50,6 @@ function MainApp({ username }: { username: string }) {
 
   const [screenWidth, setScreenWidth] = useState(window.innerWidth);
   const [theme, setTheme] = useLocalStorage("theme", "light");
-  const [usage, setUsage] = useLocalStorage("usage", "advanced");
   const [stakersModuleStatus, setStakersModuleStatus] = useLocalStorage(
     "stakersModuleStatus",
     "enabled"
@@ -73,15 +71,12 @@ function MainApp({ username }: { username: string }) {
     window.scrollTo(0, 0);
   }, [screenLocation.pathname]);
 
-  const contextValue = {
+  const appContext = {
     theme,
-    usage,
     stakersModuleStatus,
     rollupsModuleStatus,
     toggleTheme: () =>
       setTheme((curr: string) => (curr === "light" ? "dark" : "light")),
-    toggleUsage: () =>
-      setUsage((curr: string) => (curr === "basic" ? "advanced" : "basic")),
     toggleStakersModuleStatus: () =>
       setStakersModuleStatus((curr: string) =>
         curr === "enabled" ? "disabled" : "enabled"
@@ -93,53 +88,27 @@ function MainApp({ username }: { username: string }) {
   };
 
   return (
-    <AppContext.Provider value={contextValue}>
+    <AppContext.Provider value={appContext}>
       <div className="body" id={theme}>
         <SideBar screenWidth={screenWidth} />
-        <TopBar
-          username={username}
-          theme={theme}
-          toggleUsage={contextValue.toggleUsage}
-          toggleTheme={contextValue.toggleTheme}
-        />
+        <TopBar username={username} appContext={appContext} />
         <div id="main">
           <ErrorBoundary>
             <NotificationsMain />
           </ErrorBoundary>
           <Routes>
             {/** Provide the app context only to the dashboard (where the modules switch is handled) */}
-            {Object.values(pages).map(({ RootComponent, rootPath }) =>
-              rootPath === dashboardRootPath ? (
-                <Route
-                  key={rootPath}
-                  path={rootPath}
-                  element={
-                    <ErrorBoundary>
-                      <RootComponent
-                        modulesContext={{
-                          stakersModuleStatus: contextValue.stakersModuleStatus,
-                          rollupsModuleStatus: contextValue.rollupsModuleStatus,
-                          toggleStakersModuleStatus:
-                            contextValue.toggleStakersModuleStatus,
-                          toggleRollupsModuleStatus:
-                            contextValue.toggleRollupsModuleStatus
-                        }}
-                      />
-                    </ErrorBoundary>
-                  }
-                />
-              ) : (
-                <Route
-                  key={rootPath}
-                  path={rootPath}
-                  element={
-                    <ErrorBoundary>
-                      <RootComponent />
-                    </ErrorBoundary>
-                  }
-                />
-              )
-            )}
+            {Object.values(pages).map(({ RootComponent, rootPath }) => (
+              <Route
+                key={rootPath}
+                path={rootPath}
+                element={
+                  <ErrorBoundary>
+                    <RootComponent />
+                  </ErrorBoundary>
+                }
+              />
+            ))}
             {/* Redirection for routes with hashes */}
             {/* 404 routes redirect to dashboard or default page */}
             <Route path="*" element={<DefaultRedirect />} />

packages/admin-ui/src/components/topbar/TopBar.tsx

@@ -10,35 +10,33 @@ import "./topbar.scss";
 import "./notifications.scss";
 // import UsageSwitch from "./dropdownMenus/UsageSwitch";
 // Types
-import { Theme } from "types";
+import { AppContextIface } from "types";
+import Modules from "./dropdownMenus/Modules";
 
 export const TopBar = ({
   username,
-  theme,
-  toggleTheme,
-  toggleUsage
+  appContext
 }: {
   username: string;
-  theme: Theme;
-  toggleTheme: () => void;
-  toggleUsage: () => void;
+  appContext: AppContextIface;
 }) => (
   <div id="topbar">
     {/* Right justified items */}
 
-    {theme === "light" ? (
+    {appContext.theme === "light" ? (
       <div className="beta">
         <span>BETA</span>
         {/* Theme usage requires more feedback */}
         {/*<UsageSwitch toggleUsage={toggleUsage} /> */}
-        <ThemeSwitch toggleTheme={toggleTheme} />
+        <ThemeSwitch toggleTheme={appContext.toggleTheme} />
       </div>
     ) : (
-      <ThemeSwitch toggleTheme={toggleTheme} />
+      <ThemeSwitch toggleTheme={appContext.toggleTheme} />
     )}
 
     <DappnodeIdentity />
     <div className="topnav-icon-separator" />
+    <Modules modulesContext={appContext} />
     <ChainDataDropdown />
     <Notifications />
     <Profile username={username} />

packages/admin-ui/src/components/topbar/dropdownMenus/BaseDropdown.tsx

@@ -3,6 +3,7 @@ import ProgressBar from "react-bootstrap/ProgressBar";
 import RenderMarkdown from "components/RenderMarkdown";
 import "./dropdown.scss";
 import { HelpTo } from "components/Help";
+import Switch from "components/Switch";
 
 // Bubble color does not support "info", nor "light". So "light" with display nothing
 type BubbleColor = "danger" | "warning" | "success" | "light";
@@ -44,6 +45,10 @@ type MessageType = "danger" | "warning" | "success" | "info";
 export interface BaseDropdownMessage {
   type?: MessageType;
   title?: string | JSX.Element | null;
+  toggle?: {
+    checked: boolean;
+    onToggle: () => void;
+  };
   body?: string;
   help?: string; // href link to attach to help icon
   progress?: number;
@@ -143,12 +148,20 @@ function BaseDropdown({
       <div className={`menu ${collapsed ? "" : "show"}`}>
         <div className="header">{name}</div>
         {messages.map(
-          ({ type, title, body, progress, showProgress, help }, i) => (
+          ({ type, title, toggle, body, progress, showProgress, help }, i) => (
             <div key={i}>
               {title && (
                 <div className="title">
                   <span className={`text text-${type}`}>{title}</span>
-                  {help && <HelpTo url={help} />}
+                  <div className="title-actions">
+                    {help && <HelpTo url={help} />}
+                    {toggle && (
+                      <Switch
+                        checked={toggle.checked}
+                        onToggle={toggle.onToggle}
+                      />
+                    )}
+                  </div>
                 </div>
               )}
 

packages/admin-ui/src/components/topbar/dropdownMenus/Modules.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { ModulesContext } from "types";
+import { docsUrl } from "params";
+import BaseDropdown from "./BaseDropdown";
+import { RiSoundModuleFill } from "react-icons/ri";
+
+export default function Modules({
+  modulesContext
+}: {
+  modulesContext: ModulesContext;
+}) {
+  const {
+    stakersModuleStatus,
+    rollupsModuleStatus,
+    toggleStakersModuleStatus,
+    toggleRollupsModuleStatus
+  } = modulesContext;
+
+  return (
+    <BaseDropdown
+      name="Modules"
+      messages={[
+        {
+          title: "Stakers",
+          help: docsUrl.stakers,
+          toggle: {
+            checked: stakersModuleStatus === "enabled",
+            onToggle: toggleStakersModuleStatus
+          }
+        },
+        {
+          title: "Rollups",
+          help: docsUrl.rollups,
+          toggle: {
+            checked: rollupsModuleStatus === "enabled",
+            onToggle: toggleRollupsModuleStatus
+          }
+        }
+      ]}
+      Icon={RiSoundModuleFill}
+      className={"modules"}
+    />
+  );
+}

packages/admin-ui/src/components/topbar/dropdownMenus/dropdown.scss

@@ -56,9 +56,13 @@
         .text {
           flex: auto;
         }
-        .help {
-          font-size: 140%;
+        .title-actions {
           display: flex;
+          .help {
+            font-size: 140%;
+            display: flex;
+            margin-right: 10px;
+          }
         }
       }
     }
@@ -90,6 +94,9 @@
   &.dappnodeidentity > .menu {
     right: -9.2rem;
   }
+  &.modules > .menu {
+    right: -8rem;
+  }
 
   // Regulate size of toggle icons
   &.notifications .tn-dropdown-toggle svg {

packages/admin-ui/src/pages/dashboard/components/Dashboard.tsx

@@ -7,27 +7,15 @@ import { PackageUpdates } from "./PackageUpdates";
 // Components
 import SubTitle from "components/SubTitle";
 import Title from "components/Title";
-import Modules from "./Modules";
 import "./dashboard.scss";
-import { ModulesContext } from "types";
-export default function Dashboard({
-  modulesContext
-}: {
-  modulesContext?: ModulesContext;
-}) {
+
+export default function Dashboard() {
   return (
     <>
       <Title title={title} />
 
       <div className="dashboard-layout">
         <div className="dashboard-right">
-          {modulesContext && (
-            <>
-              <SubTitle>Modules</SubTitle>
-              <Modules modulesContext={modulesContext} />{" "}
-            </>
-          )}
-
           <SubTitle>Package updates</SubTitle>
           <PackageUpdates />
         </div>