fix: better code

astandrik · astandrik · commit f9b9200b26ff · 2025-06-02T14:33:20.000+03:00
diff --git a/src/components/PaginatedTable/PaginatedTableWithLayout.tsx b/src/components/PaginatedTable/PaginatedTableWithLayout.tsx
@@ -1,62 +1,107 @@
 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;
 }
 
-// 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,
     fullHeight = true,
-}: PaginatedTableWithLayoutProps) => (
-    <PaginatedTableProvider initialState={initialState}>
-        <TableWithControlsLayout fullHeight={fullHeight}>
-            {controls ? (
-                <TableWithControlsLayout.Controls>{controls}</TableWithControlsLayout.Controls>
-            ) : null}
-            {error}
-            <TableWithAutoScrolling table={table} tableProps={tableProps} />
-        </TableWithControlsLayout>
-    </PaginatedTableProvider>
-);
+}: PaginatedTableWithLayoutProps) => {
+    return (
+        <PaginatedTableProvider initialState={initialState}>
+            <TableWithControlsLayout fullHeight={fullHeight}>
+                <ControlsSection controls={controls} />
+                <ErrorSection error={error} />
+                <TableWrapper table={table} tableWrapperProps={tableWrapperProps} />
+            </TableWithControlsLayout>
+        </PaginatedTableProvider>
+    );
+};
diff --git a/src/components/TableWithControlsLayout/TableWithControlsLayout.tsx b/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);
 
diff --git a/src/containers/Nodes/PaginatedNodes/GroupedNodesComponent.tsx b/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
         />
     );
 }
diff --git a/src/containers/Nodes/PaginatedNodes/NodesComponent.tsx b/src/containers/Nodes/PaginatedNodes/NodesComponent.tsx
@@ -72,11 +72,10 @@ export function NodesComponent({
                     scrollContainerRef={scrollContainerRef}
                 />
             }
-            tableProps={{
+            tableWrapperProps={{
                 scrollContainerRef,
                 scrollDependencies: [searchValue, problemFilter, uptimeFilter, peerRoleFilter],
             }}
-            fullHeight
         />
     );
 }
diff --git a/src/containers/Storage/PaginatedStorageGroups/GroupedStorageGroupsComponent.tsx b/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,
diff --git a/src/containers/Storage/PaginatedStorageGroups/StorageGroupsComponent.tsx b/src/containers/Storage/PaginatedStorageGroups/StorageGroupsComponent.tsx
@@ -51,11 +51,10 @@ export function StorageGroupsComponent({
                     initialEntitiesCount={initialEntitiesCount}
                 />
             }
-            tableProps={{
+            tableWrapperProps={{
                 scrollContainerRef,
                 scrollDependencies: [searchValue, visibleEntities],
             }}
-            fullHeight
         />
     );
 }
diff --git a/src/containers/Storage/PaginatedStorageNodes/GroupedStorageNodesComponent.tsx b/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,
diff --git a/src/containers/Storage/PaginatedStorageNodes/StorageNodesComponent.tsx b/src/containers/Storage/PaginatedStorageNodes/StorageNodesComponent.tsx
@@ -56,11 +56,10 @@ export function StorageNodesComponent({
                     onDataFetched={handleDataFetched}
                 />
             }
-            tableProps={{
+            tableWrapperProps={{
                 scrollContainerRef,
                 scrollDependencies: [searchValue, visibleEntities, nodesUptimeFilter],
             }}
-            fullHeight
         />
     );
 }
diff --git a/src/containers/Tenant/Diagnostics/TopicData/TopicData.tsx b/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
                 />
             </DrawerWrapper>
         )

Original file line number	Diff line number	Diff line change
`@@ -72,11 +72,10 @@ export function NodesComponent({`
`72`	`72`	`scrollContainerRef={scrollContainerRef}`
`73`	`73`	`/>`
`74`	`74`	`}`
`75`		`- tableProps={{`
	`75`	`+ tableWrapperProps={{`
`76`	`76`	`scrollContainerRef,`
`77`	`77`	`scrollDependencies: [searchValue, problemFilter, uptimeFilter, peerRoleFilter],`
`78`	`78`	`}}`
`79`		`- fullHeight`
`80`	`79`	`/>`
`81`	`80`	`);`
`82`	`81`	`}`
Original file line number	Diff line number	Diff line change
`@@ -51,11 +51,10 @@ export function StorageGroupsComponent({`
`51`	`51`	`initialEntitiesCount={initialEntitiesCount}`
`52`	`52`	`/>`
`53`	`53`	`}`
`54`		`- tableProps={{`
	`54`	`+ tableWrapperProps={{`
`55`	`55`	`scrollContainerRef,`
`56`	`56`	`scrollDependencies: [searchValue, visibleEntities],`
`57`	`57`	`}}`
`58`		`- fullHeight`
`59`	`58`	`/>`
`60`	`59`	`);`
`61`	`60`	`}`
Original file line number	Diff line number	Diff line change
`@@ -56,11 +56,10 @@ export function StorageNodesComponent({`
`56`	`56`	`onDataFetched={handleDataFetched}`
`57`	`57`	`/>`
`58`	`58`	`}`
`59`		`- tableProps={{`
	`59`	`+ tableWrapperProps={{`
`60`	`60`	`scrollContainerRef,`
`61`	`61`	`scrollDependencies: [searchValue, visibleEntities, nodesUptimeFilter],`
`62`	`62`	`}}`
`63`		`- fullHeight`
`64`	`63`	`/>`
`65`	`64`	`);`
`66`	`65`	`}`
Original file line number	Diff line number	Diff line change
`@@ -343,11 +343,10 @@ export function TopicData({scrollContainerRef, path, database}: TopicDataProps)`
`343`	`343`	`}}`
`344`	`344`	`/>`
`345`	`345`	`}`
`346`		`- tableProps={{`
	`346`	`+ tableWrapperProps={{`
`347`	`347`	`scrollContainerRef,`
`348`	`348`	`scrollDependencies: [baseOffset, baseEndOffset, tableFilters],`
`349`	`349`	`}}`
`350`		`- fullHeight`
`351`	`350`	`/>`
`352`	`351`	`</DrawerWrapper>`
`353`	`352`	`)`