From d9442f14f08cbeb3579e90c89f3dbf9f4a84e7a7 Mon Sep 17 00:00:00 2001
From: Jihyun Kang <jihyunkang@lablup.com>
Date: Fri, 30 Aug 2024 14:38:15 +0900
Subject: [PATCH] refactor: split user/admin menu for applying different style

---
 react/src/components/BAIMenu.tsx              | 32 +++++--------------
 .../src/components/MainLayout/WebUISider.tsx  | 28 ++++++++++++++--
 2 files changed, 34 insertions(+), 26 deletions(-)

diff --git a/react/src/components/BAIMenu.tsx b/react/src/components/BAIMenu.tsx
index 66b24e441..169b0bfe9 100644
--- a/react/src/components/BAIMenu.tsx
+++ b/react/src/components/BAIMenu.tsx
@@ -2,27 +2,11 @@ import { ConfigProvider, Menu, MenuProps, theme } from 'antd';
 import _ from 'lodash';
 import React from 'react';
 
-interface BAIMenuProps extends MenuProps {}
-
-// workaround for style change in user / admin menu
-const administratorMenu = [
-  'system_overview',
-  'credential',
-  'environment',
-  'resource-policy',
-  'agent',
-  'settings',
-  'maintenance',
-  'information',
-];
-
+interface BAIMenuProps extends MenuProps {
+  isAdminMenu?: boolean;
+}
 const BAIMenu: React.FC<BAIMenuProps> = ({ ...props }) => {
   const { token } = theme.useToken();
-  const isAdminMenu = () => {
-    return _.some(props?.selectedKeys, (element) =>
-      _.includes(administratorMenu, element),
-    );
-  };
   return (
     <>
       <style>
@@ -49,19 +33,19 @@ const BAIMenu: React.FC<BAIMenuProps> = ({ ...props }) => {
             Menu: {
               itemBorderRadius: 20,
               itemMarginInline: 0,
-              colorPrimaryBorder: isAdminMenu()
+              colorPrimaryBorder: props.isAdminMenu
                 ? token.colorSuccess
                 : token.colorInfoHover,
-              itemHoverBg: isAdminMenu()
+              itemHoverBg: props.isAdminMenu
                 ? token.colorSuccessBgHover
                 : token.colorInfoHover,
-              itemHoverColor: isAdminMenu()
+              itemHoverColor: props.isAdminMenu
                 ? token.colorSuccessHover
                 : token.colorPrimaryBg,
-              itemSelectedBg: isAdminMenu()
+              itemSelectedBg: props.isAdminMenu
                 ? token.colorSuccessBgHover
                 : token.colorInfoHover,
-              itemSelectedColor: isAdminMenu()
+              itemSelectedColor: props.isAdminMenu
                 ? token.colorSuccessHover
                 : token.colorPrimaryBg,
             },
diff --git a/react/src/components/MainLayout/WebUISider.tsx b/react/src/components/MainLayout/WebUISider.tsx
index cae69658d..339000144 100644
--- a/react/src/components/MainLayout/WebUISider.tsx
+++ b/react/src/components/MainLayout/WebUISider.tsx
@@ -382,6 +382,31 @@ const WebUISider: React.FC<WebUISiderProps> = (props) => {
       {...props}
     >
       <BAIMenu
+        isAdminMenu={false}
+        selectedKeys={[
+          location.pathname.split('/')[1] || 'start',
+          // TODO: After matching first path of 'storage-settings' and 'agent', remove this code
+          location.pathname.split('/')[1] === 'storage-settings' ? 'agent' : '',
+          // TODO: After 'SessionListPage' is completed and used as the main page, remove this code
+          //       and change 'job' key to 'session'
+          location.pathname.split('/')[1] === 'session' ? 'job' : '',
+        ]}
+        items={[...generalMenu]}
+        /**
+         * Etc menu
+         */
+        // {
+        //   label: '404',
+        //   icon: <QuestionOutlined />,
+        //   key: '404',
+        // },
+        // ]}
+        onClick={({ key, keyPath }) => {
+          webuiNavigate('/' + keyPath.join('/'));
+        }}
+      />
+      <BAIMenu
+        isAdminMenu={true}
         selectedKeys={[
           location.pathname.split('/')[1] || 'summary',
           // TODO: After matching first path of 'storage-settings' and 'agent', remove this code
@@ -394,7 +419,6 @@ const WebUISider: React.FC<WebUISiderProps> = (props) => {
           // TODO: add plugin menu
           currentUserRole === 'superadmin'
             ? [
-                ...generalMenu,
                 {
                   type: 'group',
                   label: (
@@ -430,7 +454,7 @@ const WebUISider: React.FC<WebUISiderProps> = (props) => {
                     children: [...adminMenu],
                   },
                 ]
-              : [...generalMenu]
+              : []
         }
         /**
          * Etc menu