ydb-embedded-ui 22.0.0 → 22.2.0

package/src/components/ResizeableDataTable/ResizeableDataTable.tsx

@@ -1,13 +1,17 @@
 import React from 'react';
 
-import type {Column, DataTableProps, SortOrder} from '@gravity-ui/react-data-table';
+import type {Column, DataTableProps, Settings, SortOrder} from '@gravity-ui/react-data-table';
 import DataTable, {updateColumnsWidth} from '@gravity-ui/react-data-table';
 import {Skeleton} from '@gravity-ui/uikit';
 
 import {cn} from '../../utils/cn';
 import {useTableResize} from '../../utils/hooks/useTableResize';
+import {useTableNavigationEnabled} from '../TableKeyboardNavigation/TableKeyboardNavigation';
+import {KEYBOARD_FOCUS_ACTIVE_CLASS_NAME} from '../TableKeyboardNavigation/utils';
 import {TableSkeleton} from '../TableSkeleton/TableSkeleton';
 
+import {DataTableKeyboardNavigation} from './DataTableKeyboardNavigation';
+
 import './ResizeableDataTable.scss';
 
 const b = cn('ydb-resizeable-data-table');
@@ -16,6 +20,9 @@ export interface ResizeableDataTableProps<T> extends Omit<DataTableProps<T>, 'th
     columnsWidthLSKey?: string;
     reserveResizePadding?: boolean;
     wrapperClassName?: string;
+    onKeyboardActivate?: (row: T) => void;
+    getKeyboardRowKey?: (row: T) => string | number | undefined;
+    getKeyboardRowLabel?: (row: T) => string | undefined;
 
     /**
      * Not enough meta data (settings, sizes, features, etc.) to properly render table columns
@@ -33,6 +40,80 @@ export interface ResizeableDataTableProps<T> extends Omit<DataTableProps<T>, 'th
 }
 
 export function ResizeableDataTable<T>({
+    onKeyboardActivate,
+    getKeyboardRowKey,
+    getKeyboardRowLabel,
+    rowClassName,
+    wrapperClassName,
+    onSortChange,
+    ...props
+}: ResizeableDataTableProps<T>) {
+    const enabled = useTableNavigationEnabled();
+    if (!enabled) {
+        return (
+            <ResizeableDataTableContent
+                {...props}
+                rowClassName={rowClassName}
+                wrapperClassName={wrapperClassName}
+                onSortChange={onSortChange}
+            />
+        );
+    }
+    return (
+        <DataTableKeyboardNavigation
+            data={props.data}
+            columns={props.columns}
+            settings={props.settings}
+            nullBeforeNumbers={props.nullBeforeNumbers}
+            onActivate={onKeyboardActivate}
+            getRowKey={getKeyboardRowKey}
+            getRowLabel={getKeyboardRowLabel}
+            sortOrder={props.sortOrder}
+        >
+            {({
+                getRowClassName,
+                active,
+                onSort,
+                tableRef,
+                onTableReady,
+                onMouseMove,
+                dynamicInnerRef,
+            }) => (
+                <ResizeableDataTableContent
+                    {...props}
+                    containerRef={tableRef}
+                    onTableReady={onTableReady}
+                    onMouseMove={onMouseMove}
+                    dynamicInnerRef={dynamicInnerRef}
+                    rowClassName={(row, index, isFooter, isHeader) =>
+                        [
+                            rowClassName?.(row, index, isFooter, isHeader),
+                            !isFooter && !isHeader ? getRowClassName(index) : undefined,
+                        ]
+                            .filter(Boolean)
+                            .join(' ')
+                    }
+                    wrapperClassName={[
+                        wrapperClassName,
+                        active ? KEYBOARD_FOCUS_ACTIVE_CLASS_NAME : undefined,
+                    ]
+                        .filter(Boolean)
+                        .join(' ')}
+                    onSortChange={(order) => {
+                        onSort(order);
+                        onSortChange?.(order);
+                    }}
+                />
+            )}
+        </DataTableKeyboardNavigation>
+    );
+}
+
+function ResizeableDataTableContent<T>({
+    containerRef,
+    onTableReady,
+    onMouseMove,
+    dynamicInnerRef,
     columnsWidthLSKey,
     columns,
     settings,
@@ -45,7 +126,12 @@ export function ResizeableDataTable<T>({
     onSortChange,
     data,
     ...props
-}: ResizeableDataTableProps<T>) {
+}: ResizeableDataTableProps<T> & {
+    containerRef?: React.Ref<HTMLDivElement>;
+    onTableReady?: React.Ref<DataTable<T>>;
+    onMouseMove?: React.MouseEventHandler<HTMLElement>;
+    dynamicInnerRef?: Settings['dynamicInnerRef'];
+}) {
     const [tableColumnsWidth, setTableColumnsWidth, isTableWidthLoading] =
         useTableResize(columnsWidthLSKey);
 
@@ -68,7 +154,10 @@ export function ResizeableDataTable<T>({
         return columns;
     }, [isFetching, columns]);
 
-    const updatedColumns = updateColumnsWidth(processedColumns, tableColumnsWidth);
+    const updatedColumns = React.useMemo(
+        () => updateColumnsWidth(processedColumns, tableColumnsWidth),
+        [processedColumns, tableColumnsWidth],
+    );
 
     const processedData = React.useMemo(() => {
         if (isFetching && !data?.length) {
@@ -81,17 +170,23 @@ export function ResizeableDataTable<T>({
     const newSettings = React.useMemo(() => {
         return {
             ...settings,
+            ...(dynamicInnerRef ? {dynamicInnerRef} : {}),
             defaultResizeable: true,
         };
-    }, [settings]);
+    }, [settings, dynamicInnerRef]);
 
     if (isLoading || isTableWidthLoading) {
         return <TableSkeleton rows={loadingSkeletonRowsCount} />;
     }
 
     return (
-        <div className={b({'reserve-resize-padding': reserveResizePadding}, wrapperClassName)}>
+        <div
+            ref={containerRef}
+            onMouseMoveCapture={onMouseMove}
+            className={b({'reserve-resize-padding': reserveResizePadding}, wrapperClassName)}
+        >
             <DataTable
+                ref={onTableReady}
                 theme="yandex-cloud"
                 columns={updatedColumns}
                 onResize={setTableColumnsWidth}

package/src/components/ResizeableDataTable/getDataTableOrder.ts

@@ -0,0 +1,18 @@
+import type DataTable from '@gravity-ui/react-data-table';
+import {getSortedData} from '@gravity-ui/react-data-table/build/esm/lib/util';
+
+export function getDataTableOrder<T>(table: DataTable<T>) {
+    const view = table.table;
+    if (!view) {
+        return [];
+    }
+    return getSortedData(
+        view.props.data,
+        view.getComplexColumns(view.props.columns).dataColumns,
+        view.state,
+        {
+            nullBeforeNumbers: view.props.nullBeforeNumbers,
+            externalSort: view.state.settings.externalSort,
+        },
+    ).map(({index}) => index);
+}

package/src/components/Search/Search.tsx

@@ -4,6 +4,7 @@ import type {TextInputProps} from '@gravity-ui/uikit';
 
 import {cn} from '../../utils/cn';
 import {DebouncedTextInput} from '../DebouncedInput/DebouncedTextInput';
+import {useTableSearch} from '../TableKeyboardNavigation/TableKeyboardNavigation';
 
 import './Search.scss';
 
@@ -15,6 +16,7 @@ interface SearchProps extends Omit<TextInputProps, 'onUpdate' | 'onChange'> {
     width?: React.CSSProperties['width'];
     debounce?: number;
     inputRef?: React.RefObject<HTMLInputElement>;
+    tableFilter?: boolean;
 }
 
 export const Search = ({
@@ -24,8 +26,13 @@ export const Search = ({
     className,
     debounce,
     inputRef,
+    tableFilter = false,
     ...props
 }: SearchProps) => {
+    const ownRef = React.useRef<HTMLInputElement>(null);
+    const controlRef = inputRef ?? ownRef;
+    useTableSearch(controlRef, tableFilter, value);
+
     const onUpdate = React.useCallback(
         (newValue: string) => {
             onChange(newValue);
@@ -38,7 +45,7 @@ export const Search = ({
             debounce={debounce}
             hasClear
             autoFocus
-            controlRef={inputRef}
+            controlRef={controlRef}
             style={{width}}
             className={b(null, className)}
             value={value}

package/src/components/ShardsTable/columns.tsx

@@ -1,4 +1,5 @@
 import DataTable from '@gravity-ui/react-data-table';
+import {Flex, Text} from '@gravity-ui/uikit';
 
 import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
 import {formatNumber, roundToPrecision} from '../../utils/dataFormatters/dataFormatters';
@@ -53,14 +54,22 @@ export const getTabletIdColumn: GetShardsColumn = () => {
             if (!row.TabletId) {
                 return EMPTY_DATA_PLACEHOLDER;
             }
+            const followerId = Number(row.FollowerId);
+            const isFollower = followerId > 0;
+
             return (
-                <TabletNameWrapper
-                    tabletId={row.TabletId}
-                    followerId={row.FollowerId || undefined}
-                />
+                <Flex alignItems="center" gap={2}>
+                    <Flex minWidth={0}>
+                        <TabletNameWrapper
+                            tabletId={row.TabletId}
+                            followerId={isFollower ? followerId : undefined}
+                        />
+                    </Flex>
+                    {isFollower ? <Text color="secondary">{i18n('value_follower')}</Text> : null}
+                </Flex>
             );
         },
-        width: 220,
+        width: 280,
     };
 };
 export const getNodeIdColumn: GetShardsColumn = () => {

package/src/components/ShardsTable/i18n/en.json

@@ -1,5 +1,6 @@
 {
   "tablet-id": "TabletId",
+  "value_follower": "follower",
   "cpu-cores": "CPUCores",
   "data-size": "DataSize (B)",
   "context_data-size": "The total data size in bytes for a single table shard",

package/src/components/TableKeyboardNavigation/TableKeyboardNavigation.scss

@@ -0,0 +1,16 @@
+.ydb-table-keyboard-navigation__announcement {
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    overflow: hidden;
+
+    width: 1px;
+    height: 1px;
+    padding: 0;
+
+    white-space: nowrap;
+
+    border: 0;
+    clip-path: inset(50%);
+}