feat(console): evaluation view/compare config

console/package.json

@@ -136,6 +136,7 @@
   },
   "devDependencies": {
     "@craco/craco": "^6.2.0",
+    "@simbathesailor/use-what-changed": "^2.0.0",
     "@storybook/addon-actions": "^6.5.4",
     "@storybook/addon-essentials": "^6.5.4",
     "@storybook/addon-interactions": "^6.5.4",

console/src/components/Button/Button.tsx

@@ -39,7 +39,10 @@ export default function Button({
                     borderBottomLeftRadius: theme.borders.radius200,
                     borderBottomRightRadius: theme.borders.radius200,
                     lineHeight: '14px',
-                    padding: '9px',
+                    paddingTop: '9px',
+                    paddingBottom: '9px',
+                    paddingLeft: '9px',
+                    paddingRight: '9px',
                     width: isFull ? '100%' : 'auto',
                 },
             },
@@ -62,6 +65,8 @@ export default function Button({
                         // 'paddingTop': '0',
                         'paddingLeft': '0',
                         'paddingRight': '0',
+                        'paddingBottom': '0',
+                        'paddingTop': '0',
                         'marginBottom': '0',
                         'marginTop': '0',
                         'marginLeft': '0',

console/src/components/IconFont/index.tsx

@@ -44,6 +44,10 @@ interface IIconFontProps {
         | 'decline'
         | 'rise'
         | 'pin'
+        | 'setting'
+        | 'more'
+        | 'a-sortasc'
+        | 'a-sortdesc'
 }
 
 export default function IconFont({ size = 14, type = 'user', kind = 'inherit', style = {} }: IIconFontProps) {

console/src/components/Input/Input.tsx

@@ -12,6 +12,10 @@ export default function Input({ size = 'compact', ...props }: IInputProps) {
         {
             Root: {
                 style: {
+                    'borderTopWidth': '1px',
+                    'borderBottomWidth': '1px',
+                    'borderLeftWidth': '1px',
+                    'borderRightWidth': '1px',
                     ':hover': {
                         borderColor: '#799EE8',
                     },

console/src/components/Select/Select.tsx

@@ -0,0 +1,30 @@
+import { Select as BaseSelect, SelectProps, SIZE } from 'baseui/select'
+import React from 'react'
+import { mergeOverrides } from '@/utils/baseui'
+
+export interface ISelectProps extends SelectProps {
+    overrides?: SelectProps['overrides']
+    size?: SIZE[keyof SIZE]
+}
+
+export default function Select({ size = 'compact', ...props }: ISelectProps) {
+    const overrides = mergeOverrides(
+        {
+            ControlContainer: {
+                style: {
+                    'borderTopWidth': '1px',
+                    'borderBottomWidth': '1px',
+                    'borderLeftWidth': '1px',
+                    'borderRightWidth': '1px',
+                    ':hover': {
+                        borderColor: '#799EE8',
+                    },
+                },
+            },
+        },
+        props.overrides
+    )
+
+    // eslint-disable-next-line  react/jsx-props-no-spreading
+    return <BaseSelect size={size} {...props} overrides={overrides} />
+}

console/src/components/Selector/Toggle.tsx → console/src/components/Select/Toggle.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable react/no-unused-prop-types */
 import React from 'react'
 import { Checkbox, STYLE_TYPE, CheckboxOverrides } from 'baseui/checkbox'
+import { mergeOverrides } from '@/utils/baseui'
 
 export interface IToggleProps {
     value?: boolean
@@ -10,7 +11,23 @@ export interface IToggleProps {
     style?: React.CSSProperties
 }
 
-export default function Toggle({ value, onChange, overrides, disabled }: IToggleProps) {
+export default function Toggle({ value, onChange, disabled, ...props }: IToggleProps) {
+    const overrides = mergeOverrides(
+        {
+            Toggle: {
+                style: {
+                    backgroundColor: '#FFF',
+                },
+            },
+            ToggleTrack: {
+                style: {
+                    backgroundColor: value ? '#2B65D9' : 'rgba(2,16,43,0.20)',
+                },
+            },
+        },
+        props.overrides
+    )
+
     return (
         <Checkbox
             disabled={disabled}
@@ -21,6 +38,8 @@ export default function Toggle({ value, onChange, overrides, disabled }: IToggle
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 onChange?.((e.target as any).checked)
             }}
+            // eslint-disable-next-line  react/jsx-props-no-spreading
+            {...props}
         />
     )
 }

console/src/components/Select/index.tsx

@@ -0,0 +1,2 @@
+export { default } from './Select'
+export { SIZE } from 'baseui/select'

console/src/components/Table/TableTyped.tsx

@@ -24,22 +24,38 @@ import { useCallback } from 'react'
 import { useTableConfig, useTableViewConfig } from '@/hooks/useTableConfig'
 import { areEqual } from 'react-window'
 import type { ColumnT, ConfigT, RowT } from '../data-table/types'
-import { useUID, useUIDSeed } from 'react-uid'
 import { IStore } from '../data-table/store'
 import { useEffect } from 'react'
 import { useStyletron } from 'baseui'
 import { createUseStyles } from 'react-jss'
 import cn from 'classnames'
-import { useCurrentThemeType } from '@/hooks/useCurrentThemeType'
 
 const useStyles = createUseStyles({
     table: {
         '& .baseui-table-cell-content': {},
+        '& .column-cell .string-cell': {
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+        },
+        '& .table-row': {
+            '&:hover': {
+                // backgroundColor: '#EFEEF5 ',
+            },
+        },
+        '& .table-columns-pinned': {
+            backgroundColor: '#FFF',
+        },
+        '& .table-row--hovering': {
+            backgroundColor: '#EFEEF5',
+        },
+        // this rule for override the default style of cell
+        '& .table-row--hovering .column-cell > *': {
+            backgroundColor: '#EFEEF5 !important',
+        },
     },
     tableCompareable: {
-        '& .table-cell--last': {
-            // borderBottom: '1px solid #2B65D9 !important',
-        },
+        '& .table-cell--last': {},
     },
     tablePinnable: {
         '& .table-columns-pinned .table-row .table-cell:last-child': {
@@ -192,12 +208,12 @@ export function TableTyped({
         }
     }, [$columns])
 
-    const styles = useStyles()
+    const [, theme] = useStyletron()
+    const styles = useStyles({ theme })
 
     return (
         <>
             <div
-                // style={{ width: '100%', minHeight: 500, height: `${120 + Math.min($rows.length, 10) * ROW_HEIGHT}px` }}
                 className={cn(styles.table, styles.tablePinnable, compareable ? styles.tableCompareable : undefined)}
                 style={{ width: '100%', minHeight: 500, height: '100%' }}
                 ref={wrapperRef}

console/src/components/data-table/column-string.tsx

@@ -28,16 +28,7 @@ function StringFilter(props: any) {
 function StringCell(props: any) {
     const [css] = useStyletron()
     return (
-        <div
-            data-type='StringCell'
-            title={props.value}
-            className={css({
-                display: '-webkit-box',
-                WebkitLineClamp: props.lineClamp || 1,
-                WebkitBoxOrient: 'vertical',
-                overflow: 'hidden',
-            })}
-        >
+        <div title={props.value} className='string-cell'>
             {props.textQuery ? <HighlightCellText text={props.value} query={props.textQuery} /> : props.value}
         </div>
     )

console/src/components/data-table/column.tsx

@@ -7,6 +7,7 @@ import { useStyletron } from 'baseui'
 
 import type { ColumnT } from './types.js'
 import _ from 'lodash'
+import cn from 'classnames'
 
 function Column<ValueT, FilterParamsT>(options: ColumnT<ValueT, FilterParamsT>): ColumnT<ValueT, FilterParamsT> {
     return {
@@ -29,31 +30,28 @@ function Column<ValueT, FilterParamsT>(options: ColumnT<ValueT, FilterParamsT>):
             } else if (options.cellBlockAlign === 'end') {
                 cellBlockAlign = 'flex-end'
             }
-            //@ts-ignore
-            // if (!Boolean(props.onSelect)) {
-            //     //@ts-ignore
-            //     return <ProvidedCell {...props} />
-            // }
 
             return (
                 <div
                     // @ts-ignore
                     ref={ref}
-                    data-type='column-cell'
-                    className={css({
-                        ...theme.typography.font100,
-                        boxSizing: 'border-box',
-                        color: theme.colors.contentPrimary,
-                        // @ts-ignore
-                        // display: props.isMeasured ? 'inline-block' : undefined,
-                        // @ts-ignore
-                        // width: props.isMeasured ? undefined : '100%',
-                        padding: '0',
-                        height: '100%',
-                        alignItems: 'center',
-                        display: 'flex',
-                        width: '100%',
-                    })}
+                    className={cn(
+                        'column-cell',
+                        css({
+                            ...theme.typography.font200,
+                            boxSizing: 'border-box',
+                            color: theme.colors.contentPrimary,
+                            // @ts-ignore
+                            // display: props.isMeasured ? 'inline-block' : undefined,
+                            // @ts-ignore
+                            // width: props.isMeasured ? undefined : '100%',
+                            padding: '0',
+                            height: '100%',
+                            alignItems: 'center',
+                            display: 'flex',
+                            width: '100%',
+                        })
+                    )}
                 >
                     {/* <div
                         data-type='column-cell-1'

console/src/components/data-table/config-manage-columns.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo, useCallback, useRef, useEffect, useImperativeHandle } from 'react'
 import { SHAPE, SIZE, KIND } from 'baseui/button'
-import { Search, Icon } from 'baseui/icon'
+import { Search } from 'baseui/icon'
 import { useStyletron } from 'baseui'
 import { useHover } from 'react-use'
 import { Drawer } from 'baseui/drawer'
@@ -12,6 +12,7 @@ import useSelection from '@/hooks/useSelection'
 import { AiOutlinePushpin } from 'react-icons/ai'
 import { RiDeleteBin6Line } from 'react-icons/ri'
 import { useDrawer } from '@/hooks/useDrawer'
+import IconFont from '@/components/IconFont'
 import { DnDContainer } from '../DnD/DnDContainer'
 import { matchesQuery } from './text-search'
 import type { ColumnT, ConfigT } from './types'
@@ -94,7 +95,7 @@ const ConfigManageColumns = React.forwardRef<{ getConfig: () => any }, PropsT>((
                         }}
                         title={column.title}
                     >
-                        <LabelSmall $style={{ flex: 1, overflow: 'hidden' }} className='line-clamp'>
+                        <LabelSmall $style={{ flex: 1, overflow: 'hidden', lineHeight: '1.2' }} className='line-clamp'>
                             {column.title}
                         </LabelSmall>
                         <div>
@@ -244,10 +245,19 @@ const ConfigManageColumns = React.forwardRef<{ getConfig: () => any }, PropsT>((
                     shape={SHAPE.pill}
                     size={SIZE.compact}
                     as='link'
-                    startEnhancer={() => <Icon />}
+                    startEnhancer={() => (
+                        <IconFont
+                            type='setting'
+                            style={{
+                                marginRight: '-5px',
+                                marginTop: 'px',
+                            }}
+                        />
+                    )}
                     overrides={{
                         BaseButton: {
                             style: {
+                                height: '32px',
                                 marginLeft: theme.sizing.scale500,
                             },
                         },
@@ -300,7 +310,21 @@ const ConfigManageColumns = React.forwardRef<{ getConfig: () => any }, PropsT>((
                             })}
                         >
                             <Input
-                                startEnhancer={<Search size='18px' />}
+                                overrides={{
+                                    Before: function Before() {
+                                        return (
+                                            <div
+                                                className={css({
+                                                    alignItems: 'center',
+                                                    display: 'flex',
+                                                    paddingLeft: theme.sizing.scale500,
+                                                })}
+                                            >
+                                                <Search size='18px' />
+                                            </div>
+                                        )
+                                    },
+                                }}
                                 value={query}
                                 // @ts-ignore
                                 onChange={(event) => setQuery(event.target.value)}
@@ -385,7 +409,7 @@ const ConfigManageColumns = React.forwardRef<{ getConfig: () => any }, PropsT>((
                                                     onChange={() => handleSelectOne(id)}
                                                 />
                                                 <LabelSmall
-                                                    $style={{ flex: 1, overflow: 'hidden' }}
+                                                    $style={{ flex: 1, overflow: 'hidden', lineHeight: '1.1' }}
                                                     className='line-clamp'
                                                 >
                                                     {column.title}
@@ -409,17 +433,19 @@ const ConfigManageColumns = React.forwardRef<{ getConfig: () => any }, PropsT>((
                                         alignItems: 'center',
                                     })}
                                 >
-                                    Visible columns
-                                    <span
-                                        style={{
-                                            marginLeft: '-5px',
-                                            color: 'rgba(2,16,43,0.40)',
-                                        }}
-                                    >
-                                        ({selectedIds.length})
-                                    </span>
+                                    <p>
+                                        Visible columns
+                                        <span
+                                            style={{
+                                                marginLeft: '5px',
+                                                color: 'rgba(2,16,43,0.40)',
+                                            }}
+                                        >
+                                            ({selectedIds.length})
+                                        </span>
+                                    </p>
                                     <Button as='link' onClick={handleEmpty}>
-                                        empty
+                                        Clear
                                     </Button>
                                 </div>
                                 {dndData.length === 0 && (
@@ -475,7 +501,7 @@ const ConfigManageColumns = React.forwardRef<{ getConfig: () => any }, PropsT>((
                                     size={SIZE.mini}
                                     onClick={handleApply}
                                 >
-                                    OK
+                                    Apply
                                 </Button>
                             </div>
                         )}