feat(FR-465): Add prop to enable NEO style in BAITable (#3104)

resolves #3103 (FR-465) Introduces a new `neoStyle` prop to BAITable component, replacing the previous `tableComponentToken`. This change provides a more focused styling approach for table headers, particularly in light mode where headers now have a specific background color (#E3E3E3). The styling is applied through a combination of CSS classes and theme configuration. The changes can be verified by: 1. Checking table header appearance in both light and dark modes 2. Confirming the header background color (#E3E3E3) in light mode when `neoStyle` is enabled 3. Verifying that existing table functionality remains intact
lablup · Feb 7, 2025 · 5f16e27 · 5f16e27
1 parent 37c6e2c
commit 5f16e27
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 16 deletions.
diff --git a/react/src/components/BAITable.tsx b/react/src/components/BAITable.tsx
@@ -1,9 +1,10 @@
+import { useThemeMode } from '../hooks/useThemeMode';
 import { useDebounce } from 'ahooks';
 import { ConfigProvider, GetProps, Table } from 'antd';
 import { createStyles } from 'antd-style';
 import { ColumnsType, ColumnType } from 'antd/es/table';
 import { TableProps } from 'antd/lib';
-import { ComponentToken } from 'antd/lib/table/style';
+import classNames from 'classnames';
 import _ from 'lodash';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { Resizable, ResizeCallbackData } from 'react-resizable';
@@ -24,7 +25,8 @@ const useStyles = createStyles(({ token, css }) => ({
       whitespace: 'pre';
       wordwrap: 'break-word';
     }
-
+  `,
+  neoHeader: css`
     thead.ant-table-thead > tr > th.ant-table-cell {
       font-weight: 500;
       color: ${token.colorTextTertiary};
@@ -100,7 +102,7 @@ const ResizableTitle = (
 interface BAITableProps<RecordType extends object = any>
   extends TableProps<RecordType> {
   resizable?: boolean;
-  tableComponentToken?: ComponentToken;
+  neoStyle?: boolean;
 }
 
 const columnKeyOrIndexKey = (column: any, index: number) =>
@@ -117,11 +119,11 @@ const BAITable = <RecordType extends object = any>({
   resizable = false,
   columns,
   components,
-  tableComponentToken,
+  neoStyle,
   ...tableProps
 }: BAITableProps<RecordType>) => {
   const { styles } = useStyles();
-
+  const { isDarkMode } = useThemeMode();
   const [resizedColumnWidths, setResizedColumnWidths] = useState<
     Record<string, number>
   >(generateResizedColumnWidths(columns));
@@ -154,21 +156,24 @@ const BAITable = <RecordType extends object = any>({
 
   return (
     <ConfigProvider
-      theme={
-        tableComponentToken
-          ? {
-              components: {
-                Table: tableComponentToken,
-              },
-            }
-          : undefined
-      }
+      theme={{
+        components: {
+          Table:
+            !isDarkMode && neoStyle
+              ? {
+                  headerBg: '#E3E3E3',
+                }
+              : undefined,
+        },
+      }}
     >
       <Table
-        size="small"
         sortDirections={['descend', 'ascend', 'descend']}
         showSorterTooltip={false}
-        className={resizable ? styles.resizableTable : ''}
+        className={classNames(
+          resizable && styles.resizableTable,
+          neoStyle && styles.neoHeader,
+        )}
         components={
           resizable
             ? _.merge(components || {}, {

diff --git a/react/src/components/SessionNodes.tsx b/react/src/components/SessionNodes.tsx
@@ -46,9 +46,11 @@ const SessionNodes: React.FC<SessionNodesProps> = ({
     <>
       <BAITable<(typeof filteredSessions)[0]>
         resizable
+        neoStyle
         // TODO: fix type
         // @ts-ignore
         rowKey={(record) => record.row_id as string}
+        size="small"
         dataSource={filteredSessions}
         scroll={{ x: 'max-content' }}
         columns={[