refactor: Start page components

lablup · Nov 26, 2024 · d4f990f · d4f990f
1 parent 22d27de
commit d4f990f
Show file tree

Hide file tree

Showing 10 changed files with 480 additions and 477 deletions.
diff --git a/react/pnpm-lock.yaml b/react/pnpm-lock.yaml
diff --git a/react/src/components/ActionItemContent.tsx b/react/src/components/ActionItemContent.tsx
@@ -1,7 +1,7 @@
 import Flex from './Flex';
-import useResizeObserver from '@react-hook/resize-observer';
+// import useResizeObserver from '@react-hook/resize-observer';
 import { Button, Divider, Typography, theme } from 'antd';
-import { useRef, useState } from 'react';
+import { useRef } from 'react';
 
 interface StartItemContentProps {
   title: string;
@@ -10,7 +10,6 @@ interface StartItemContentProps {
   buttonText: string;
   onClick?: () => void;
   themeColor?: string;
-  iconBgColor?: string;
   itemRole?: 'user' | 'admin';
 }
 
@@ -21,18 +20,11 @@ const ActionItemContent: React.FC<StartItemContentProps> = ({
   buttonText,
   onClick,
   themeColor,
-  iconBgColor,
   itemRole = 'user',
 }) => {
   const { token } = theme.useToken();
-  const [needScroll, setNeedScroll] = useState<boolean>(false);
   const containerRef = useRef<HTMLDivElement>(null);
   const colorPrimaryWithAlpha = `rgba(${parseInt(token.colorPrimary.slice(1, 3), 16)}, ${parseInt(token.colorPrimary.slice(3, 5), 16)}, ${parseInt(token.colorPrimary.slice(5, 7), 16)}, 0.15)`;
-  const colorInfoWithAlpha = `rgba(${parseInt(token.colorInfo.slice(1, 3), 16)}, ${parseInt(token.colorInfo.slice(3, 5), 16)}, ${parseInt(token.colorInfo.slice(5, 7), 16)}, 0.15)`;
-
-  useResizeObserver(containerRef, (entry) => {
-    entry.contentRect.width <= 220 ? setNeedScroll(true) : setNeedScroll(false);
-  });
 
   return (
     <Flex
@@ -55,11 +47,9 @@ const ActionItemContent: React.FC<StartItemContentProps> = ({
             borderRadius: 25,
             width: 50,
             height: 50,
-            backgroundColor: iconBgColor
-              ? iconBgColor
-              : itemRole === 'user'
-                ? colorPrimaryWithAlpha
-                : colorInfoWithAlpha,
+            fontSize: token.fontSizeHeading3,
+            color: token.colorPrimary,
+            backgroundColor: colorPrimaryWithAlpha,
           }}
         >
           {icon}
@@ -83,10 +73,13 @@ const ActionItemContent: React.FC<StartItemContentProps> = ({
           type="secondary"
           style={{ fontSize: token.fontSizeSM }}
         >
-          {!needScroll && description}
+          {description}
         </Typography.Text>
       </Flex>
-      <Flex direction="column" style={{ width: '100%' }}>
+      <Flex
+        direction="column"
+        style={{ width: '100%', position: 'sticky', bottom: 0 }}
+      >
         {description && (
           <Divider style={{ margin: token.marginSM, borderWidth: 2 }} />
         )}

diff --git a/react/src/components/BAIBoard.tsx b/react/src/components/BAIBoard.tsx
@@ -2,6 +2,7 @@ import Board, { BoardProps } from '@cloudscape-design/board-components/board';
 import BoardItem from '@cloudscape-design/board-components/board-item';
 import { Skeleton } from 'antd';
 import { createStyles } from 'antd-style';
+import classNames from 'classnames';
 import { Suspense } from 'react';
 
 const useStyles = createStyles(({ css }) => {
@@ -52,37 +53,36 @@ const useStyles = createStyles(({ css }) => {
   };
 });
 
-interface BAICustomizableGridProps {
-  items: Array<BoardProps.Item>;
-  onItemsChange: (
-    event: CustomEvent<BoardProps.ItemsChangeDetail<unknown>>,
-  ) => void;
+export interface BAIBoardDataType {
+  content?: React.ReactNode;
+}
+
+export type BAIBoardItem = BoardProps.Item<BAIBoardDataType>;
+export interface BAIBoardProps<T extends BAIBoardDataType = BAIBoardDataType> {
+  items: Array<BoardProps.Item<T>>;
+  onItemsChange: (event: CustomEvent<BoardProps.ItemsChangeDetail<T>>) => void;
   resizable?: boolean;
   movable?: boolean;
 }
 
-const BAIBoard: React.FC<BAICustomizableGridProps> = ({
-  items: parsedItems,
+const BAIBoard = <T extends BAIBoardDataType>({
+  items,
   resizable = false,
   movable = false,
   ...BoardProps
-}) => {
+}: BAIBoardProps<T>) => {
   const { styles } = useStyles();
-
-  const boardStyles = [
-    styles.board,
-    !movable && styles.disableMove,
-    !resizable && styles.disableResize,
-  ].join(' ');
-
   return (
-    <Board
-      className={boardStyles}
+    <Board<T>
+      className={classNames(
+        styles.board,
+        !movable && styles.disableMove,
+        !resizable && styles.disableResize,
+      )}
       empty
-      renderItem={(item: any) => {
+      renderItem={(item: BoardProps.Item<T>) => {
         return (
           <BoardItem
-            //@ts-ignore
             className={styles.boardItems}
             key={item.id}
             i18nStrings={{
@@ -98,7 +98,7 @@ const BAIBoard: React.FC<BAICustomizableGridProps> = ({
           </BoardItem>
         );
       }}
-      items={parsedItems}
+      items={items}
       i18nStrings={(() => {
         const createAnnouncement = (
           operationAnnouncement: any,

diff --git a/react/src/components/MainLayout/WebUIHeader.tsx b/react/src/components/MainLayout/WebUIHeader.tsx
@@ -8,7 +8,7 @@ import BAINotificationButton from '../BAINotificationButton';
 import Flex, { FlexProps } from '../Flex';
 import LoginSessionExtendButton from '../LoginSessionExtendButton';
 import ProjectSelect from '../ProjectSelect';
-import ReverseThemeProvider from '../ReverseThemeProvider';
+import ThemeReverseProvider from '../ThemeReverseProvider';
 import UserDropdownMenu from '../UserDropdownMenu';
 import WEBUIHelpButton from '../WEBUIHelpButton';
 import WebUIThemeToggleButton from '../WebUIThemeToggleButton';
@@ -70,7 +70,7 @@ const WebUIHeader: React.FC<WebUIHeaderProps> = ({
       className={styles.webuiHeader}
     >
       <Flex direction="row" gap={'sm'}>
-        <ReverseThemeProvider>
+        <ThemeReverseProvider>
           {!gridBreakpoint.sm && (
             <Button
               icon={<MenuIcon />}
@@ -94,7 +94,7 @@ const WebUIHeader: React.FC<WebUIHeaderProps> = ({
               {t('webui.menu.Project')}
             </Typography.Text>
           )}
-        </ReverseThemeProvider>
+        </ThemeReverseProvider>
         <Suspense>
           <ProjectSelect
             ghost
@@ -135,17 +135,17 @@ const WebUIHeader: React.FC<WebUIHeaderProps> = ({
           )}
         <BAINotificationButton
           buttonRender={(btn) => (
-            <ReverseThemeProvider>{btn}</ReverseThemeProvider>
+            <ThemeReverseProvider>{btn}</ThemeReverseProvider>
           )}
         />
 
-        <ReverseThemeProvider>
+        <ThemeReverseProvider>
           <WebUIThemeToggleButton />
           <WEBUIHelpButton />
-        </ReverseThemeProvider>
+        </ThemeReverseProvider>
         <UserDropdownMenu
           buttonRender={(btn) => (
-            <ReverseThemeProvider>{btn}</ReverseThemeProvider>
+            <ThemeReverseProvider>{btn}</ThemeReverseProvider>
           )}
         />
       </Flex>

diff --git a/react/src/components/MainLayout/WebUISider.tsx b/react/src/components/MainLayout/WebUISider.tsx
@@ -9,9 +9,9 @@ import SessionsIcon from '../BAIIcons/SessionsIcon';
 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 ThemeReverseProvider from '../ThemeReverseProvider';
 import WebUILink from '../WebUILink';
 import { PluginPage, WebUIPluginType } from './MainLayout';
 import {
@@ -500,9 +500,9 @@ const WebUISiderWithCustomTheme: React.FC<WebUISiderProps> = (props) => {
     (!isParentDark && themeConfig.sider?.theme === 'dark');
 
   return shouldReverse ? (
-    <ReverseThemeProvider>
+    <ThemeReverseProvider>
       <WebUISider {...props} />
-    </ReverseThemeProvider>
+    </ThemeReverseProvider>
   ) : (
     <WebUISider {...props} />
   );

diff --git a/react/src/components/ThemeAdminProvider.tsx b/react/src/components/ThemeAdminProvider.tsx
@@ -0,0 +1,34 @@
+import { useCustomThemeConfig } from '../helper/customThemeConfig';
+import usePrimaryColors from '../hooks/usePrimaryColors';
+import { theme, ConfigProvider, ConfigProviderProps, ThemeConfig } from 'antd';
+import _ from 'lodash';
+import React, { useContext } from 'react';
+
+const ThemeAdminProvider: React.FC<ConfigProviderProps> = ({ ...props }) => {
+  const themeConfig = useCustomThemeConfig();
+  const config = useContext(ConfigProvider.ConfigContext);
+  const isParentDark = config.theme?.algorithm === theme.darkAlgorithm;
+  const primaryColors = usePrimaryColors();
+
+  const additionalThemeConfig = {
+    token: { colorPrimary: primaryColors.admin },
+  } as ThemeConfig;
+  return (
+    <ConfigProvider
+      {...props}
+      theme={{
+        ...(isParentDark
+          ? _.merge({}, themeConfig?.dark, additionalThemeConfig, props.theme)
+          : _.merge(
+              {},
+              themeConfig?.light,
+              additionalThemeConfig,
+              props.theme,
+            )),
+        algorithm: isParentDark ? theme.darkAlgorithm : theme.defaultAlgorithm,
+      }}
+    />
+  );
+};
+
+export default ThemeAdminProvider;
diff --git a/...t/src/components/ReverseThemeProvider.tsx → ...t/src/components/ThemeReverseProvider.tsx b/...t/src/components/ReverseThemeProvider.tsx → ...t/src/components/ThemeReverseProvider.tsx
@@ -6,7 +6,7 @@ import React, { useContext } from 'react';
 interface ReverseThemeProviderProps extends ConfigProviderProps {
   className?: string;
 }
-const ReverseThemeProvider: React.FC<ReverseThemeProviderProps> = ({
+const ThemeReverseProvider: React.FC<ReverseThemeProviderProps> = ({
   ...props
 }) => {
   const themeConfig = useCustomThemeConfig();
@@ -26,4 +26,4 @@ const ReverseThemeProvider: React.FC<ReverseThemeProviderProps> = ({
   );
 };
 
-export default ReverseThemeProvider;
+export default ThemeReverseProvider;
diff --git a/react/src/components/ThemeSecondaryProvider.tsx b/react/src/components/ThemeSecondaryProvider.tsx
@@ -0,0 +1,36 @@
+import { useCustomThemeConfig } from '../helper/customThemeConfig';
+import usePrimaryColors from '../hooks/usePrimaryColors';
+import { theme, ConfigProvider, ConfigProviderProps, ThemeConfig } from 'antd';
+import _ from 'lodash';
+import React, { useContext } from 'react';
+
+const ThemeSecondaryProvider: React.FC<ConfigProviderProps> = ({
+  ...props
+}) => {
+  const themeConfig = useCustomThemeConfig();
+  const config = useContext(ConfigProvider.ConfigContext);
+  const isParentDark = config.theme?.algorithm === theme.darkAlgorithm;
+  const primaryColors = usePrimaryColors();
+
+  const additionalThemeConfig = {
+    token: { colorPrimary: primaryColors.secondary },
+  } as ThemeConfig;
+  return (
+    <ConfigProvider
+      {...props}
+      theme={{
+        ...(isParentDark
+          ? _.merge({}, themeConfig?.dark, additionalThemeConfig, props.theme)
+          : _.merge(
+              {},
+              themeConfig?.light,
+              additionalThemeConfig,
+              props.theme,
+            )),
+        algorithm: isParentDark ? theme.darkAlgorithm : theme.defaultAlgorithm,
+      }}
+    />
+  );
+};
+
+export default ThemeSecondaryProvider;
diff --git a/react/src/hooks/useBAISetting.tsx b/react/src/hooks/useBAISetting.tsx
@@ -1,5 +1,5 @@
+import { BAIBoardItem } from '../components/BAIBoard';
 import { jotaiStore } from '../components/DefaultProviders';
-import { StartItem } from '../pages/StartPage';
 import { atom, useAtom } from 'jotai';
 import { atomFamily } from 'jotai/utils';
 
@@ -14,10 +14,10 @@ interface UserSettings {
   last_window_close_time?: number;
   endpoints?: string[];
   auto_logout?: boolean;
-  summary_items?: Array<Omit<StartItem, 'data'>>;
   selected_language?: string;
   classic_session_launcher?: boolean;
   recentSessionHistory?: Array<SessionHistory>;
+  start_board_items?: Array<Omit<BAIBoardItem, 'data'>>;
 }
 
 export type SessionHistory = {