From b2825e2e1e7d48c7978f559a95e9f3466bc299fe Mon Sep 17 00:00:00 2001
From: Jong Eun Lee <jongeun@lablup.com>
Date: Fri, 15 Nov 2024 15:13:09 +0800
Subject: [PATCH] feat: NEO sider's toggle button and refactoring

---
 react/src/components/BAISider.tsx             | 184 ++++++--------
 .../src/components/MainLayout/MainLayout.tsx  |   3 +
 .../src/components/MainLayout/WebUISider.tsx  | 225 +++++++++++-------
 react/src/components/ReverseThemeProvider.tsx |   3 +-
 react/src/components/SiderToggleButton.tsx    |  76 ++++++
 src/components/backend-ai-webui-styles.ts     |   4 -
 6 files changed, 293 insertions(+), 202 deletions(-)
 create mode 100644 react/src/components/SiderToggleButton.tsx

diff --git a/react/src/components/BAISider.tsx b/react/src/components/BAISider.tsx
index 3406263261..56c565d060 100644
--- a/react/src/components/BAISider.tsx
+++ b/react/src/components/BAISider.tsx
@@ -1,36 +1,39 @@
 import Flex from './Flex';
-import { ConfigProvider, Grid, SiderProps, Typography, theme } from 'antd';
+import { ConfigProvider, Grid, SiderProps, theme } from 'antd';
 import Sider from 'antd/es/layout/Sider';
+import classNames from 'classnames';
 import _ from 'lodash';
-import React from 'react';
+import React, { forwardRef } from 'react';
 
 export interface BAISiderProps extends SiderProps {
   logoCollapsed?: React.ReactNode;
   logo?: React.ReactNode;
   logoTitleCollapsed?: React.ReactNode;
   logoTitle?: React.ReactNode;
-  bottomText?: React.ReactNode;
 }
 
-export const DEFAULT_COLLAPSED_WIDTH = 74;
-const BAISider: React.FC<BAISiderProps> = ({
-  children,
-  logo,
-  logoCollapsed,
-  logoTitle,
-  logoTitleCollapsed,
-  bottomText,
-  theme: siderTheme,
-  ...otherProps
-}) => {
-  const { token } = theme.useToken();
-  const { Text } = Typography;
-  const { xs } = Grid.useBreakpoint();
+export const COLLAPSED_SIDER_WIDTH = 74;
+export const SIDER_WIDTH = 240;
+const BAISider = forwardRef<HTMLDivElement, BAISiderProps>(
+  (
+    {
+      children,
+      logo,
+      logoCollapsed,
+      logoTitle,
+      logoTitleCollapsed,
+      theme: siderTheme,
+      ...otherProps
+    },
+    ref,
+  ) => {
+    const { token } = theme.useToken();
+    const { xs } = Grid.useBreakpoint();
 
-  return (
-    <>
-      <style>
-        {`
+    return (
+      <>
+        <style>
+          {`
           .bai-sider .ant-layout-sider-children {
             display: flex;
             flex-direction: column;
@@ -54,100 +57,69 @@ const BAISider: React.FC<BAISiderProps> = ({
             -webkit-app-region: no-drag;
           }
         `}
-      </style>
-      <Sider
-        width={240}
-        breakpoint="md"
-        style={{
-          overflowX: 'hidden',
-          overflowY: 'auto',
-          height: '100vh',
-          position: 'sticky',
-          top: 0,
-          left: 0,
-          scrollbarColor: 'auto',
-        }}
-        {...otherProps}
-        collapsedWidth={
-          xs
-            ? 0
-            : _.isNumber(otherProps.collapsedWidth)
-              ? otherProps.collapsedWidth
-              : DEFAULT_COLLAPSED_WIDTH
-        }
-        theme={siderTheme}
-        className="bai-sider"
-      >
-        <ConfigProvider
-          theme={{
-            algorithm: siderTheme === 'dark' ? theme.darkAlgorithm : undefined,
+        </style>
+        <Sider
+          ref={ref}
+          width={SIDER_WIDTH}
+          breakpoint="md"
+          style={{
+            height: '100vh',
+            scrollbarColor: 'auto',
           }}
+          {...otherProps}
+          collapsedWidth={
+            xs
+              ? 0
+              : _.isNumber(otherProps.collapsedWidth)
+                ? otherProps.collapsedWidth
+                : COLLAPSED_SIDER_WIDTH
+          }
+          theme={siderTheme}
+          className={classNames('bai-sider', otherProps.className)}
+          trigger={null}
         >
-          <Flex
-            direction="column"
-            justify="center"
-            align={otherProps.collapsed ? 'center' : 'start'}
-            style={{
-              transition: 'all 0.2s ease-in-out',
-              backgroundColor: token.colorPrimary,
-              padding: otherProps.collapsed ? undefined : '0 30px',
-              height: token.Layout?.headerHeight || 60,
-              marginBottom: token.marginXL,
-              position: 'sticky',
-              top: 0,
+          <ConfigProvider
+            theme={{
+              algorithm:
+                siderTheme === 'dark' ? theme.darkAlgorithm : undefined,
             }}
-            className={'logo-and-text-container draggable'}
           >
-            <div className="logo-img-wrap non-draggable">
-              <div style={{ display: otherProps.collapsed ? 'none' : 'block' }}>
-                {logo}
-              </div>
-              <div style={{ display: otherProps.collapsed ? 'block' : 'none' }}>
-                {logoCollapsed}
-              </div>
-            </div>
-            {/* <div className="logo-title-wrap non-draggable">
-              <Typography.Text
-                style={{
-                  fontSize: 16,
-                  lineHeight: '16px',
-                  fontWeight: 200,
-                  whiteSpace: 'nowrap',
-                }}
-              >
-                {otherProps.collapsed ? logoTitleCollapsed : logoTitle}
-              </Typography.Text>
-            </div> */}
-          </Flex>
-          {children}
-          {bottomText && (
-            <>
-              <Flex style={{ flex: 1 }} />
+            <Flex direction="column" align="stretch" style={{ height: '100%' }}>
               <Flex
-                justify="center"
                 direction="column"
+                justify="center"
+                align={otherProps.collapsed ? 'center' : 'start'}
                 style={{
-                  width: '100%',
-                  padding: 30,
-                  textAlign: 'center',
+                  transition: 'all 0.2s ease-in-out',
+                  backgroundColor: token.colorPrimary,
+                  padding: otherProps.collapsed ? undefined : '0 30px',
+                  height: token.Layout?.headerHeight || 60,
+                  position: 'sticky',
+                  top: 0,
+                  zIndex: 1,
                 }}
+                className={'logo-and-text-container draggable'}
               >
-                <Text
-                  type="secondary"
-                  style={{
-                    fontSize: '12px',
-                    wordBreak: 'normal',
-                  }}
-                >
-                  {bottomText}
-                </Text>
+                <div className="logo-img-wrap non-draggable">
+                  <div
+                    style={{ display: otherProps.collapsed ? 'none' : 'block' }}
+                  >
+                    {logo}
+                  </div>
+                  <div
+                    style={{ display: otherProps.collapsed ? 'block' : 'none' }}
+                  >
+                    {logoCollapsed}
+                  </div>
+                </div>
               </Flex>
-            </>
-          )}
-        </ConfigProvider>
-      </Sider>
-    </>
-  );
-};
+              {children}
+            </Flex>
+          </ConfigProvider>
+        </Sider>
+      </>
+    );
+  },
+);
 
 export default BAISider;
diff --git a/react/src/components/MainLayout/MainLayout.tsx b/react/src/components/MainLayout/MainLayout.tsx
index ed37646318..59f69989aa 100644
--- a/react/src/components/MainLayout/MainLayout.tsx
+++ b/react/src/components/MainLayout/MainLayout.tsx
@@ -132,6 +132,9 @@ function MainLayout() {
               !compactSidebarActive && setSideCollapsed(false);
             }
           }}
+          onCollapse={(collapsed) => {
+            setSideCollapsed(collapsed);
+          }}
           webuiplugins={webUIPlugins}
         />
       </Suspense>
diff --git a/react/src/components/MainLayout/WebUISider.tsx b/react/src/components/MainLayout/WebUISider.tsx
index 09bc19a3fb..b94d4e77d0 100644
--- a/react/src/components/MainLayout/WebUISider.tsx
+++ b/react/src/components/MainLayout/WebUISider.tsx
@@ -2,7 +2,6 @@ import { filterEmptyItem } from '../../helper';
 import { useCustomThemeConfig } from '../../helper/customThemeConfig';
 import { useSuspendedBackendaiClient, useWebUINavigate } from '../../hooks';
 import { useCurrentUserRole } from '../../hooks/backendai';
-import { useThemeMode } from '../../hooks/useThemeMode';
 import EndpointsIcon from '../BAIIcons/EndpointsIcon';
 import MyEnvironmentsIcon from '../BAIIcons/MyEnvironmentsIcon';
 import SessionsIcon from '../BAIIcons/SessionsIcon';
@@ -10,6 +9,7 @@ import BAIMenu from '../BAIMenu';
 import BAISider, { BAISiderProps } from '../BAISider';
 import Flex from '../Flex';
 import ReverseThemeProvider from '../ReverseThemeProvider';
+import SiderToggleButton from '../SiderToggleButton';
 import SignoutModal from '../SignoutModal';
 import WebUILink from '../WebUILink';
 import { PluginPage, WebUIPluginType } from './MainLayout';
@@ -27,18 +27,19 @@ import {
   ToolOutlined,
   UserOutlined,
 } from '@ant-design/icons';
-import { useToggle } from 'ahooks';
+import { useHover, useToggle } from 'ahooks';
 import {
   theme,
   MenuProps,
   Typography,
   ConfigProvider,
   Divider,
+  Grid,
 } from 'antd';
 import { ItemType } from 'antd/lib/menu/interface';
 import _ from 'lodash';
 import { PlayIcon } from 'lucide-react';
-import React, { useContext } from 'react';
+import React, { useContext, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 
@@ -50,6 +51,7 @@ type MenuItem = {
 interface WebUISiderProps
   extends Pick<BAISiderProps, 'collapsed' | 'collapsedWidth' | 'onBreakpoint'> {
   webuiplugins?: WebUIPluginType;
+  onCollapse?: (collapsed: boolean) => void;
 }
 const WebUISider: React.FC<WebUISiderProps> = (props) => {
   const { t } = useTranslation();
@@ -76,6 +78,10 @@ const WebUISider: React.FC<WebUISiderProps> = (props) => {
 
   const [isOpenSignoutModal, { toggle: toggleSignoutModal }] = useToggle(false);
 
+  const siderRef = useRef<HTMLDivElement>(null);
+  const isSiderHover = useHover(siderRef);
+  const gridBreakpoint = Grid.useBreakpoint();
+
   const generalMenu = filterEmptyItem<ItemType>([
     {
       label: <WebUILink to="/summary">{t('webui.menu.Summary')}</WebUILink>,
@@ -231,6 +237,7 @@ const WebUISider: React.FC<WebUISiderProps> = (props) => {
 
   return (
     <BAISider
+      ref={siderRef}
       logo={
         <img
           className="logo-wide"
@@ -273,11 +280,130 @@ const WebUISider: React.FC<WebUISiderProps> = (props) => {
       logoTitleCollapsed={
         themeConfig?.logo?.logoTitleCollapsed || siteDescription || 'WebUI'
       }
-      bottomText={
-        props.collapsed ? null : (
-          <>
+      {...props}
+    >
+      <SiderToggleButton
+        collapsed={props.collapsed}
+        buttonTop={68}
+        // buttonTop={18}
+        onClick={(collapsed) => {
+          props.onCollapse?.(collapsed);
+        }}
+        hidden={!gridBreakpoint.sm || !isSiderHover}
+      />
+      <Flex
+        direction="column"
+        align="stretch"
+        justify="start"
+        style={{
+          flex: 1,
+          overflowY: 'auto',
+          paddingTop: token.paddingLG,
+          paddingBottom: token.paddingSM,
+        }}
+      >
+        <BAIMenu
+          collapsed={props.collapsed}
+          selectedKeys={[
+            location.pathname.split('/')[1] || 'summary',
+            // 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}
+        />
+        {(currentUserRole === 'superadmin' || currentUserRole === 'admin') && (
+          <ConfigProvider
+            theme={{
+              token: {
+                colorPrimary: token.colorInfo,
+              },
+            }}
+          >
+            <BAIMenu
+              collapsed={props.collapsed}
+              selectedKeys={[
+                location.pathname.split('/')[1] || 'summary',
+                // 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={
+                // TODO: add plugin menu
+                currentUserRole === 'superadmin'
+                  ? [
+                      {
+                        type: 'group',
+                        label: (
+                          <Flex
+                            style={{
+                              borderBottom: `1px solid ${token.colorBorder}`,
+                            }}
+                          >
+                            {!props.collapsed && (
+                              <Typography.Text type="secondary" ellipsis>
+                                {t('webui.menu.Administration')}
+                              </Typography.Text>
+                            )}
+                          </Flex>
+                        ),
+                        children: [...adminMenu, ...superAdminMenu],
+                      },
+                    ]
+                  : currentUserRole === 'admin'
+                    ? [
+                        {
+                          type: 'group',
+                          label: (
+                            <Flex
+                              style={{
+                                borderBottom: `1px solid ${token.colorBorder}`,
+                              }}
+                            >
+                              {!props.collapsed && (
+                                <Typography.Text type="secondary" ellipsis>
+                                  {t('webui.menu.Administration')}
+                                </Typography.Text>
+                              )}
+                            </Flex>
+                          ),
+                          children: [...adminMenu],
+                        },
+                      ]
+                    : []
+              }
+            />
+          </ConfigProvider>
+        )}
+      </Flex>
+      {props.collapsed ? null : (
+        <Flex
+          justify="center"
+          direction="column"
+          style={{
+            width: '100%',
+            padding: 30,
+            paddingTop: 0,
+            textAlign: 'center',
+          }}
+        >
+          <Typography.Text
+            type="secondary"
+            style={{
+              fontSize: '12px',
+              wordBreak: 'normal',
+            }}
+          >
             <div className="terms-of-use">
-              <Divider style={{ marginBottom: token.margin }} />
+              <Divider style={{ marginTop: 0, marginBottom: token.margin }} />
               <Flex
                 wrap="wrap"
                 style={{ fontSize: token.sizeXS }}
@@ -349,89 +475,8 @@ const WebUISider: React.FC<WebUISiderProps> = (props) => {
                 {`${global.packageVersion}.${globalThis.buildNumber}`}
               </small>
             </address>
-          </>
-        )
-      }
-      {...props}
-    >
-      <BAIMenu
-        collapsed={props.collapsed}
-        selectedKeys={[
-          location.pathname.split('/')[1] || 'summary',
-          // 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}
-      />
-      {(currentUserRole === 'superadmin' || currentUserRole === 'admin') && (
-        <ConfigProvider
-          theme={{
-            token: {
-              colorPrimary: token.colorInfo,
-            },
-          }}
-        >
-          <BAIMenu
-            collapsed={props.collapsed}
-            selectedKeys={[
-              location.pathname.split('/')[1] || 'summary',
-              // 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={
-              // TODO: add plugin menu
-              currentUserRole === 'superadmin'
-                ? [
-                    {
-                      type: 'group',
-                      label: (
-                        <Flex
-                          style={{
-                            borderBottom: `1px solid ${token.colorBorder}`,
-                          }}
-                        >
-                          {!props.collapsed && (
-                            <Typography.Text type="secondary" ellipsis>
-                              {t('webui.menu.Administration')}
-                            </Typography.Text>
-                          )}
-                        </Flex>
-                      ),
-                      children: [...adminMenu, ...superAdminMenu],
-                    },
-                  ]
-                : currentUserRole === 'admin'
-                  ? [
-                      {
-                        type: 'group',
-                        label: (
-                          <Flex
-                            style={{
-                              borderBottom: `1px solid ${token.colorBorder}`,
-                            }}
-                          >
-                            {!props.collapsed && (
-                              <Typography.Text type="secondary" ellipsis>
-                                {t('webui.menu.Administration')}
-                              </Typography.Text>
-                            )}
-                          </Flex>
-                        ),
-                        children: [...adminMenu],
-                      },
-                    ]
-                  : []
-            }
-          />
-        </ConfigProvider>
+          </Typography.Text>
+        </Flex>
       )}
     </BAISider>
   );
diff --git a/react/src/components/ReverseThemeProvider.tsx b/react/src/components/ReverseThemeProvider.tsx
index eefce584ce..49a177fc88 100644
--- a/react/src/components/ReverseThemeProvider.tsx
+++ b/react/src/components/ReverseThemeProvider.tsx
@@ -1,5 +1,4 @@
 import { useCustomThemeConfig } from '../helper/customThemeConfig';
-import { useThemeMode } from '../hooks/useThemeMode';
 import { theme, ConfigProvider, ConfigProviderProps } from 'antd';
 import _ from 'lodash';
 import React, { useContext } from 'react';
@@ -12,7 +11,7 @@ const ReverseThemeProvider: React.FC<ReverseThemeProviderProps> = ({
 }) => {
   const themeConfig = useCustomThemeConfig();
   const config = useContext(ConfigProvider.ConfigContext);
-  const isParentDark = config.theme?.algorithm === theme.darkAlgorithm
+  const isParentDark = config.theme?.algorithm === theme.darkAlgorithm;
 
   return (
     <ConfigProvider
diff --git a/react/src/components/SiderToggleButton.tsx b/react/src/components/SiderToggleButton.tsx
new file mode 100644
index 0000000000..e7ffdbb9b2
--- /dev/null
+++ b/react/src/components/SiderToggleButton.tsx
@@ -0,0 +1,76 @@
+import Flex from './Flex';
+import { Button, ConfigProvider, theme, Tooltip } from 'antd';
+import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+interface SiderToggleButtonProps {
+  collapsed?: boolean;
+  buttonTop?: number;
+  onClick?: (collapsed: boolean) => void;
+  hidden?: boolean;
+  // style?: React.CSSProperties;
+}
+const SiderToggleButton: React.FC<SiderToggleButtonProps> = ({
+  collapsed = false,
+  buttonTop,
+  onClick,
+  hidden,
+}) => {
+  const { t } = useTranslation();
+
+  const { token } = theme.useToken();
+  return (
+    <Flex
+      style={{
+        position: 'absolute',
+        right: 0,
+        transform: 'translateX(12px)',
+        paddingTop: buttonTop,
+        zIndex: 1,
+      }}
+      direction="column"
+      justify={buttonTop ? 'start' : 'center'}
+    >
+      <ConfigProvider
+        theme={{
+          components: {
+            Button: {
+              defaultBorderColor: token.colorBorderSecondary,
+            },
+          },
+        }}
+      >
+        <Tooltip
+          title={collapsed ? t('button.Expand') : t('button.Collapse')}
+          placement="right"
+        >
+          <Button
+            shape="circle"
+            // className={classNames(styles.toggleBtn, 'toggle-btn')}
+            size="small"
+            icon={
+              collapsed ? (
+                <ChevronRightIcon color={token.colorTextTertiary} />
+              ) : (
+                <ChevronLeftIcon color={token.colorTextTertiary} />
+              )
+            }
+            onClick={() => {
+              onClick && onClick(!collapsed);
+            }}
+            style={{
+              boxShadow: 'none',
+              visibility: 'hidden',
+              opacity: 0,
+              transition: 'opacity 0.2s ease, visibility 0.2s ease',
+              ...(!hidden ? { visibility: 'visible', opacity: 1 } : {}),
+            }}
+          />
+        </Tooltip>
+      </ConfigProvider>
+    </Flex>
+  );
+};
+
+export default SiderToggleButton;
diff --git a/src/components/backend-ai-webui-styles.ts b/src/components/backend-ai-webui-styles.ts
index ce8b0a7da6..3daa7a8bfd 100644
--- a/src/components/backend-ai-webui-styles.ts
+++ b/src/components/backend-ai-webui-styles.ts
@@ -479,10 +479,6 @@ export const BackendAIWebUIStyles = [
       height: 0;
     }
 
-    .terms-of-use {
-      margin-bottom: 10px;
-    }
-
     footer#short-height {
       display: none;
     }