fix: operations tab (#2435)

Author: astandrik

config-overrides.js

@@ -58,7 +58,9 @@ module.exports = {
         // By default jest does not transform anything in node_modules
         // So this override excludes node_modules except @gravity-ui
         // see https://github.com/timarney/react-app-rewired/issues/241
-        config.transformIgnorePatterns = ['node_modules/(?!(@gravity-ui|@mjackson)/)'];
+        config.transformIgnorePatterns = [
+            'node_modules/(?!(@gravity-ui|@mjackson|@standard-schema)/)',
+        ];
 
         // Add .github directory to roots
         config.roots = ['<rootDir>/src', '<rootDir>/.github'];

package-lock.json

@@ -29,7 +29,7 @@
     "@gravity-ui/websql-autocomplete": "^13.7.0",
     "@hookform/resolvers": "^3.10.0",
     "@mjackson/multipart-parser": "^0.8.2",
-    "@reduxjs/toolkit": "^2.5.0",
+    "@reduxjs/toolkit": "^2.8.2",
     "@tanstack/react-table": "^8.20.6",
     "@ydb-platform/monaco-ghost": "^0.6.1",
     "axios": "^1.8.4",

package.json

@@ -36,6 +36,19 @@
 
     &__col-5 {
         width: 20%;
+        margin-right: 5%;
+    }
+
+    &__col-6,
+    &__col-7,
+    &__col-8,
+    &__col-9 {
+        width: 8%;
+        margin-right: 3%;
+    }
+
+    &__col-10 {
+        width: 8%;
     }
 
     &__col-full {

src/components/TableSkeleton/TableSkeleton.scss

@@ -11,20 +11,36 @@ interface TableSkeletonProps {
     className?: string;
     rows?: number;
     delay?: number;
+    columns?: number;
+    showHeader?: boolean;
 }
 
-export const TableSkeleton = ({rows = 2, delay = 600, className}: TableSkeletonProps) => {
+export const TableSkeleton = ({
+    rows = 2,
+    delay = 600,
+    className,
+    columns = 5,
+    showHeader = true,
+}: TableSkeletonProps) => {
     const [show] = useDelayed(delay);
 
-    return (
-        <div className={b('wrapper', {hidden: !show}, className)}>
+    const renderHeaderRow = () => {
+        if (!showHeader) {
+            return null;
+        }
+
+        return (
             <div className={b('row')}>
-                <Skeleton className={b('col-1')} />
-                <Skeleton className={b('col-2')} />
-                <Skeleton className={b('col-3')} />
-                <Skeleton className={b('col-4')} />
-                <Skeleton className={b('col-5')} />
+                {[...new Array(columns)].map((_, index) => (
+                    <Skeleton key={`header-col-${index}`} className={b(`col-${index + 1}`)} />
+                ))}
             </div>
+        );
+    };
+
+    return (
+        <div className={b('wrapper', {hidden: !show}, className)}>
+            {renderHeaderRow()}
             {[...new Array(rows)].map((_, index) => (
                 <div className={b('row')} key={`skeleton-row-${index}`}>
                     <Skeleton className={b('col-full')} />

src/components/TableSkeleton/TableSkeleton.tsx

@@ -3,71 +3,82 @@ import React from 'react';
 import {AccessDenied} from '../../components/Errors/403';
 import {ResponseError} from '../../components/Errors/ResponseError';
 import {ResizeableDataTable} from '../../components/ResizeableDataTable/ResizeableDataTable';
+import {TableSkeleton} from '../../components/TableSkeleton/TableSkeleton';
 import {TableWithControlsLayout} from '../../components/TableWithControlsLayout/TableWithControlsLayout';
-import {operationsApi} from '../../store/reducers/operations';
-import {useAutoRefreshInterval} from '../../utils/hooks';
+import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
 import {isAccessError} from '../../utils/response';
 
 import {OperationsControls} from './OperationsControls';
 import {getColumns} from './columns';
 import {OPERATIONS_SELECTED_COLUMNS_KEY} from './constants';
 import i18n from './i18n';
 import {b} from './shared';
+import {useOperationsInfiniteQuery} from './useOperationsInfiniteQuery';
 import {useOperationsQueryParams} from './useOperationsQueryParams';
 
 interface OperationsProps {
     database: string;
+    scrollContainerRef?: React.RefObject<HTMLElement>;
 }
 
-export function Operations({database}: OperationsProps) {
-    const [autoRefreshInterval] = useAutoRefreshInterval();
-
-    const {kind, searchValue, pageSize, pageToken, handleKindChange, handleSearchChange} =
+export function Operations({database, scrollContainerRef}: OperationsProps) {
+    const {kind, searchValue, pageSize, handleKindChange, handleSearchChange} =
         useOperationsQueryParams();
 
-    const {data, isLoading, error, refetch} = operationsApi.useGetOperationListQuery(
-        {database, kind, page_size: pageSize, page_token: pageToken},
-        {
-            pollingInterval: autoRefreshInterval,
-        },
-    );
-
-    const filteredOperations = React.useMemo(() => {
-        if (!data?.operations) {
-            return [];
-        }
-        return data.operations.filter((op) =>
-            op.id?.toLowerCase().includes(searchValue.toLowerCase()),
-        );
-    }, [data?.operations, searchValue]);
+    const {operations, isLoading, isLoadingMore, error, refreshTable, totalCount} =
+        useOperationsInfiniteQuery({
+            database,
+            kind,
+            pageSize,
+            searchValue,
+            scrollContainerRef,
+        });
 
     if (isAccessError(error)) {
         return <AccessDenied position="left" />;
     }
 
+    const settings = React.useMemo(() => {
+        return {
+            ...DEFAULT_TABLE_SETTINGS,
+            sortable: false,
+        };
+    }, []);
+
     return (
         <TableWithControlsLayout>
             <TableWithControlsLayout.Controls>
                 <OperationsControls
                     kind={kind}
                     searchValue={searchValue}
-                    entitiesCountCurrent={filteredOperations.length}
-                    entitiesCountTotal={data?.operations?.length}
+                    entitiesCountCurrent={operations.length}
+                    entitiesCountTotal={totalCount}
                     entitiesLoading={isLoading}
                     handleKindChange={handleKindChange}
                     handleSearchChange={handleSearchChange}
                 />
             </TableWithControlsLayout.Controls>
             {error ? <ResponseError error={error} /> : null}
             <TableWithControlsLayout.Table loading={isLoading} className={b('table')}>
-                {data ? (
+                {operations.length > 0 || isLoading ? (
                     <ResizeableDataTable
-                        columns={getColumns({database, refreshTable: refetch})}
+                        columns={getColumns({database, refreshTable, kind})}
                         columnsWidthLSKey={OPERATIONS_SELECTED_COLUMNS_KEY}
-                        data={filteredOperations}
+                        data={operations}
+                        settings={settings}
                         emptyDataMessage={i18n('title_empty')}
                     />
-                ) : null}
+                ) : (
+                    <div>{i18n('title_empty')}</div>
+                )}
+                {isLoadingMore && (
+                    <TableSkeleton
+                        showHeader={false}
+                        rows={3}
+                        delay={0}
+                        className={b('loading-more')}
+                    />
+                )}
             </TableWithControlsLayout.Table>
         </TableWithControlsLayout>
     );