fix: better code

Author: astandrik

src/components/PaginatedTable/PaginatedTableWithLayout.tsx

@@ -1,64 +1,109 @@
 import React from 'react';
 
 import {TableWithControlsLayout} from '../TableWithControlsLayout/TableWithControlsLayout';
-import type {TableProps} from '../TableWithControlsLayout/TableWithControlsLayout';
+import type {TableWrapperProps} from '../TableWithControlsLayout/TableWithControlsLayout';
 
 import {PaginatedTableProvider, usePaginatedTableState} from './PaginatedTableContext';
 import type {PaginatedTableState} from './types';
 
 export interface PaginatedTableWithLayoutProps {
     controls?: React.ReactNode;
     table: React.ReactNode;
-    tableProps?: TableProps;
+    tableWrapperProps?: TableWrapperProps;
     error?: React.ReactNode;
     initialState?: Partial<PaginatedTableState>;
     fullHeight?: boolean;
     noBatching?: boolean;
 }
 
-// Internal component that has access to the paginated table context
-const TableWithAutoScrolling = ({
+/**
+ * Hook to enhance table wrapper props with sort-dependent scroll behavior
+ */
+const useTableWrapperPropsWithSortDependency = (
+    tableWrapperProps?: TableWrapperProps,
+): TableWrapperProps => {
+    const {tableState} = usePaginatedTableState();
+    const {sortParams} = tableState;
+
+    return React.useMemo(() => {
+        const existingScrollDependencies = tableWrapperProps?.scrollDependencies || [];
+
+        return {
+            ...tableWrapperProps,
+            scrollDependencies: [...existingScrollDependencies, sortParams],
+        };
+    }, [tableWrapperProps, sortParams]);
+};
+
+/**
+ * Internal component that wraps the table with sort-dependent scrolling behavior.
+ * This component has access to the paginated table context and automatically
+ * scrolls to top when sort parameters change.
+ */
+const TableWrapper = ({
     table,
-    tableProps,
+    tableWrapperProps,
 }: {
     table: React.ReactNode;
-    tableProps?: TableProps;
+    tableWrapperProps?: TableWrapperProps;
 }) => {
-    const {tableState} = usePaginatedTableState();
-    const {sortParams} = tableState;
-
-    // Enhance tableProps to include sortParams in scrollDependencies
-    const enhancedTableProps = React.useMemo(
-        () => ({
-            ...tableProps,
-            scrollDependencies: [...(tableProps?.scrollDependencies || []), sortParams],
-        }),
-        [tableProps, sortParams],
-    );
+    const enhancedTableWrapperProps = useTableWrapperPropsWithSortDependency(tableWrapperProps);
 
     return (
-        <TableWithControlsLayout.Table {...enhancedTableProps}>
+        <TableWithControlsLayout.Table {...enhancedTableWrapperProps}>
             {table}
         </TableWithControlsLayout.Table>
     );
 };
 
+/**
+ * Renders the controls section if controls are provided
+ */
+const ControlsSection = ({controls}: {controls?: React.ReactNode}) => {
+    if (!controls) {
+        return null;
+    }
+
+    return <TableWithControlsLayout.Controls>{controls}</TableWithControlsLayout.Controls>;
+};
+
+/**
+ * Renders the error section if an error is provided
+ */
+const ErrorSection = ({error}: {error?: React.ReactNode}) => {
+    if (!error) {
+        return null;
+    }
+
+    return <React.Fragment>{error}</React.Fragment>;
+};
+
+/**
+ * A complete table layout component that provides pagination context and
+ * integrates with TableWithControlsLayout for consistent styling and behavior.
+ *
+ * Features:
+ * - Provides pagination context to child components
+ * - Automatic scroll-to-top on sort changes
+ * - Optional controls and error display
+ * - Configurable height behavior
+ */
 export const PaginatedTableWithLayout = ({
     controls,
     table,
-    tableProps,
+    tableWrapperProps,
     error,
     initialState,
     noBatching,
     fullHeight = true,
-}: PaginatedTableWithLayoutProps) => (
-    <PaginatedTableProvider initialState={initialState} noBatching={noBatching}>
-        <TableWithControlsLayout fullHeight={fullHeight}>
-            {controls ? (
-                <TableWithControlsLayout.Controls>{controls}</TableWithControlsLayout.Controls>
-            ) : null}
-            {error}
-            <TableWithAutoScrolling table={table} tableProps={tableProps} />
-        </TableWithControlsLayout>
-    </PaginatedTableProvider>
-);
+}: PaginatedTableWithLayoutProps) => {
+    return (
+        <PaginatedTableProvider initialState={initialState} noBatching={noBatching}>
+            <TableWithControlsLayout fullHeight={fullHeight}>
+                <ControlsSection controls={controls} />
+                <ErrorSection error={error} />
+                <TableWrapper table={table} tableWrapperProps={tableWrapperProps} />
+            </TableWithControlsLayout>
+        </PaginatedTableProvider>
+    );
+};

src/components/TableWithControlsLayout/TableWithControlsLayout.tsx

@@ -18,7 +18,7 @@ interface TableWithControlsLayoutItemProps {
     fullHeight?: boolean;
 }
 
-export interface TableProps extends Omit<TableWithControlsLayoutItemProps, 'children'> {
+export interface TableWrapperProps extends Omit<TableWithControlsLayoutItemProps, 'children'> {
     loading?: boolean;
     scrollContainerRef?: React.RefObject<HTMLElement>;
     scrollDependencies?: any[];
@@ -61,7 +61,7 @@ TableWithControlsLayout.Table = function Table({
     scrollContainerRef,
     scrollDependencies = [],
     onSort,
-}: TableProps) {
+}: TableWrapperProps) {
     // Create an internal ref for the table container
     const tableContainerRef = React.useRef<HTMLDivElement>(null);
 

src/containers/Nodes/PaginatedNodes/GroupedNodesComponent.tsx

@@ -72,7 +72,7 @@ const NodeGroup = React.memo(function NodeGroup({
                         scrollContainerRef={scrollContainerRef}
                     />
                 }
-                tableProps={{
+                tableWrapperProps={{
                     scrollContainerRef: scrollContainerRef,
                 }}
             />
@@ -192,13 +192,12 @@ export function GroupedNodesComponent({
             }
             error={error ? <ResponseError error={error} /> : null}
             table={renderGroups()}
-            tableProps={{
+            tableWrapperProps={{
                 scrollContainerRef,
                 scrollDependencies: [searchValue, groupByParam, tableGroups, peerRoleFilter],
                 loading: isLoading,
                 className: b('groups-wrapper'),
             }}
-            fullHeight
         />
     );
 }

src/containers/Nodes/PaginatedNodes/NodesComponent.tsx

@@ -72,11 +72,10 @@ export function NodesComponent({
                     scrollContainerRef={scrollContainerRef}
                 />
             }
-            tableProps={{
+            tableWrapperProps={{
                 scrollContainerRef,
                 scrollDependencies: [searchValue, problemFilter, uptimeFilter, peerRoleFilter],
             }}
-            fullHeight
         />
     );
 }

src/containers/Storage/PaginatedStorageGroups/GroupedStorageGroupsComponent.tsx

@@ -78,7 +78,7 @@ export const StorageGroupGroup = React.memo(function StorageGroupGroup({
                         initialEntitiesCount={count}
                     />
                 }
-                tableProps={{
+                tableWrapperProps={{
                     scrollContainerRef: scrollContainerRef,
                 }}
             />
@@ -181,7 +181,7 @@ export function GroupedStorageGroupsComponent({
             error={error ? <ResponseError error={error} /> : null}
             table={renderGroups()}
             initialState={initialState}
-            tableProps={{
+            tableWrapperProps={{
                 scrollContainerRef,
                 scrollDependencies: [searchValue, storageGroupsGroupByParam, tableGroups],
                 loading: isLoading,

src/containers/Storage/PaginatedStorageGroups/StorageGroupsComponent.tsx

@@ -51,11 +51,10 @@ export function StorageGroupsComponent({
                     initialEntitiesCount={initialEntitiesCount}
                 />
             }
-            tableProps={{
+            tableWrapperProps={{
                 scrollContainerRef,
                 scrollDependencies: [searchValue, visibleEntities],
             }}
-            fullHeight
         />
     );
 }

src/containers/Storage/PaginatedStorageNodes/GroupedStorageNodesComponent.tsx

@@ -80,7 +80,7 @@ export const StorageNodeGroup = React.memo(function StorageNodeGroup({
                         onDataFetched={onDataFetched}
                     />
                 }
-                tableProps={{
+                tableWrapperProps={{
                     scrollContainerRef: scrollContainerRef,
                 }}
             />
@@ -182,7 +182,7 @@ export function GroupedStorageNodesComponent({
             error={error ? <ResponseError error={error} /> : null}
             table={renderGroups()}
             initialState={initialState}
-            tableProps={{
+            tableWrapperProps={{
                 scrollContainerRef,
                 scrollDependencies: [searchValue, storageNodesGroupByParam, tableGroups],
                 loading: isLoading,

src/containers/Storage/PaginatedStorageNodes/StorageNodesComponent.tsx

@@ -56,11 +56,10 @@ export function StorageNodesComponent({
                     onDataFetched={handleDataFetched}
                 />
             }
-            tableProps={{
+            tableWrapperProps={{
                 scrollContainerRef,
                 scrollDependencies: [searchValue, visibleEntities, nodesUptimeFilter],
             }}
-            fullHeight
         />
     );
 }

src/containers/Tenant/Diagnostics/TopicData/TopicData.tsx

@@ -343,11 +343,10 @@ export function TopicData({scrollContainerRef, path, database}: TopicDataProps)
                             }}
                         />
                     }
-                    tableProps={{
+                    tableWrapperProps={{
                         scrollContainerRef,
                         scrollDependencies: [baseOffset, baseEndOffset, tableFilters],
                     }}
-                    fullHeight
                     noBatching
                 />
             </DrawerWrapper>