feat(FR-1785): move Admin Settings to top menu and apply admin primary colors (#4816)

Author: yomybaby

react/src/components/MainLayout/MainLayout.tsx

@@ -15,7 +15,7 @@ import { DRAWER_WIDTH } from '../WEBUINotificationDrawer';
 import WebUIBreadcrumb from '../WebUIBreadcrumb';
 import WebUIHeader from './WebUIHeader';
 import WebUISider from './WebUISider';
-import { App, Layout, LayoutProps, theme } from 'antd';
+import { App, ConfigProvider, Layout, LayoutProps, theme } from 'antd';
 import { createStyles } from 'antd-style';
 import { BAIFlex } from 'backend.ai-ui';
 import { atom, useSetAtom } from 'jotai';
@@ -29,6 +29,8 @@ import {
   useState,
 } from 'react';
 import { useNavigate, Outlet, useMatches, useLocation } from 'react-router-dom';
+import usePrimaryColors from 'src/hooks/usePrimaryColors';
+import { useWebUIMenuItems } from 'src/hooks/useWebUIMenuItems';
 import { useSetupWebUIPluginEffect } from 'src/hooks/useWebUIPluginState';
 
 export const HEADER_Z_INDEX_IN_MAIN_LAYOUT = 6;
@@ -211,7 +213,9 @@ function MainLayout() {
                   align="stretch"
                   className={styles.alertWrapper}
                 >
-                  <ThemePreviewModeAlert />
+                  <ErrorBoundaryWithNullFallback>
+                    <ThemePreviewModeAlert />
+                  </ErrorBoundaryWithNullFallback>
                   <ErrorBoundaryWithNullFallback>
                     <NoResourceGroupAlert />
                   </ErrorBoundaryWithNullFallback>
@@ -251,7 +255,9 @@ function MainLayout() {
                   )}
                 </ErrorBoundaryWithNullFallback>
                 <BAIErrorBoundary>
-                  <Outlet />
+                  <AutoAdminPrimaryColorProvider>
+                    <Outlet />
+                  </AutoAdminPrimaryColorProvider>
                 </BAIErrorBoundary>
               </Suspense>
               {/* @ts-ignore */}
@@ -264,6 +270,32 @@ function MainLayout() {
   );
 }
 
+const AutoAdminPrimaryColorProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  'use memo';
+
+  const primaryColors = usePrimaryColors();
+  const { isSelectedAdminCategoryMenu } = useWebUIMenuItems();
+  if (isSelectedAdminCategoryMenu) {
+    return (
+      <ConfigProvider
+        theme={{
+          token: {
+            colorPrimary: primaryColors.admin,
+          },
+        }}
+      >
+        {children}
+      </ConfigProvider>
+    );
+  }
+
+  return children;
+};
+
 const LayoutWithPageTestId: React.FC<LayoutProps> = (props) => {
   const location = useLocation();
   const pageTest = useMemo(() => {

react/src/components/MainLayout/WebUISider.tsx

@@ -46,6 +46,8 @@ const WebUISider: React.FC<WebUISiderProps> = (props) => {
     config.theme?.algorithm === theme.darkAlgorithm ? 'dark' : 'light';
 
   const currentUserRole = useCurrentUserRole();
+  const hasAdminCategoryRole =
+    currentUserRole === 'superadmin' || currentUserRole === 'admin';
   const webuiNavigate = useWebUINavigate();
   const location = useLocation();
   const baiClient = useSuspendedBackendaiClient();
@@ -111,6 +113,7 @@ const WebUISider: React.FC<WebUISiderProps> = (props) => {
             height: 40,
             width: 42,
             marginLeft: token.margin,
+            marginBottom: 4,
           }}
         />
       </Tooltip>
@@ -203,67 +206,44 @@ const WebUISider: React.FC<WebUISiderProps> = (props) => {
             ]}
             // @ts-ignore
             items={filterOutEmpty([
-              ...groupedGeneralMenu,
-              (currentUserRole === 'superadmin' ||
-                currentUserRole === 'admin') && {
+              hasAdminCategoryRole && {
                 // Go to first page of admin setting pages.
-                type: 'group',
                 label: (
-                  <BAIFlex
-                    style={{
-                      borderBottom: `1px solid ${token.colorBorder}`,
-                    }}
-                  >
-                    {!props.collapsed && (
-                      <Typography.Text type="secondary" ellipsis>
-                        {t('webui.menu.Administration')}
-                      </Typography.Text>
-                    )}
-                  </BAIFlex>
+                  <WebUILink to="/credential">
+                    {t('webui.menu.AdminSettings')}
+                  </WebUILink>
                 ),
-                children: [
-                  {
-                    label: (
-                      <WebUILink
-                        to="/credential"
-                        state={{ goBack: location.pathname }}
-                      >
-                        {t('webui.menu.AdminSettings')}
-                      </WebUILink>
-                    ),
-                    icon: <SettingsIcon style={{ color: token.colorInfo }} />,
-                    key: 'admin-settings',
-                  },
-                ],
+                icon: <SettingsIcon style={{ color: token.colorInfo }} />,
+                key: 'admin-settings',
               },
+              ...groupedGeneralMenu,
             ])}
           />
         )}
-        {(currentUserRole === 'superadmin' || currentUserRole === 'admin') &&
-          isSelectedAdminCategoryMenu && (
-            <ConfigProvider
-              theme={{
-                token: {
-                  colorPrimary: primaryColors.admin,
-                },
-              }}
-            >
-              {adminHeader}
-              <BAIMenu
-                collapsed={props.collapsed}
-                selectedKeys={[
-                  // TODO: After matching first path of 'storage-settings' and 'agent', remove this code
-                  location.pathname.split('/')[1] === 'storage-settings'
-                    ? 'agent'
-                    : location.pathname.split('/')[1],
-                ]}
-                items={[
-                  ...adminMenu,
-                  ...(currentUserRole === 'superadmin' ? superAdminMenu : []),
-                ]}
-              />
-            </ConfigProvider>
-          )}
+        {hasAdminCategoryRole && isSelectedAdminCategoryMenu && (
+          <ConfigProvider
+            theme={{
+              token: {
+                colorPrimary: primaryColors.admin,
+              },
+            }}
+          >
+            {adminHeader}
+            <BAIMenu
+              collapsed={props.collapsed}
+              selectedKeys={[
+                // TODO: After matching first path of 'storage-settings' and 'agent', remove this code
+                location.pathname.split('/')[1] === 'storage-settings'
+                  ? 'agent'
+                  : location.pathname.split('/')[1],
+              ]}
+              items={[
+                ...adminMenu,
+                ...(currentUserRole === 'superadmin' ? superAdminMenu : []),
+              ]}
+            />
+          </ConfigProvider>
+        )}
       </BAIFlex>
       {props.collapsed ? null : (
         <BAIFlex

react/src/hooks/useWebUIMenuItems.tsx

@@ -93,11 +93,10 @@ export interface UseWebUIMenuItemsProps {
   hideGroupName?: boolean;
 }
 
-export const useWebUIMenuItems = ({
-  hideGroupName,
-}: UseWebUIMenuItemsProps) => {
+export const useWebUIMenuItems = (props?: UseWebUIMenuItemsProps) => {
   'use memo';
 
+  const { hideGroupName = false } = props || {};
   const plugins = useWebUIPluginValue();
 
   const location = useLocation();