Add Infinite Scroll loader component to Table (#756)

Tables with infinite scroll functionality (using inView to detect a spinner at the bottom of loaded items, triggering a fetch for more data) used to define their own end message components to handle infinite scrolling. This PR centralizes that logic, making it a part of the Table component itself.
cadence-workflow · Dec 10, 2024 · 71feb5a · 71feb5a
1 parent fe91339
commit 71feb5a
Show file tree

Hide file tree

Showing 13 changed files with 76 additions and 101 deletions.
diff --git a/src/components/table/__tests__/table.test.tsx b/src/components/table/__tests__/table.test.tsx
@@ -102,7 +102,10 @@ function setup({
       data={SAMPLE_ROWS}
       columns={SAMPLE_COLUMNS}
       shouldShowResults={shouldShowResults}
-      endMessage={<div>Sample end message</div>}
+      endMessageProps={{
+        kind: 'simple',
+        content: <div>Sample end message</div>,
+      }}
       {...(!omitOnSort && { onSort: mockOnSort })}
       sortColumn={SAMPLE_COLUMNS[SAMPLE_DATA_NUM_COLUMNS - 1].id}
       sortOrder="DESC"

diff --git a/...main-workflows-table-end-message.test.tsx → ...s__/table-infinite-scroll-loader.test.tsx b/...main-workflows-table-end-message.test.tsx → ...s__/table-infinite-scroll-loader.test.tsx
@@ -5,10 +5,10 @@ import {
 
 import { render, screen, act, fireEvent } from '@/test-utils/rtl';
 
-import DomainWorkflowsTableEndMessage from '../domain-workflows-table-end-message';
-import { type Props } from '../domain-workflows-table-end-message.types';
+import TableInfiniteScrollLoader from '../table-infinite-scroll-loader';
+import { type Props } from '../table-infinite-scroll-loader.types';
 
-describe(DomainWorkflowsTableEndMessage.name, () => {
+describe(TableInfiniteScrollLoader.name, () => {
   it('renders loading state while fetching next page', () => {
     setup({ isFetchingNextPage: true });
 
@@ -29,7 +29,7 @@ describe(DomainWorkflowsTableEndMessage.name, () => {
     expect(mockFetchNextPage).toHaveBeenCalled();
   });
 
-  it('renders loading state with the infinite scroll ref when more workflows can be loaded', () => {
+  it('renders loading state with the infinite scroll ref when more data can be loaded', () => {
     const { mockFetchNextPage } = setup({
       hasNextPage: true,
       isFetchingNextPage: false,
@@ -47,13 +47,13 @@ describe(DomainWorkflowsTableEndMessage.name, () => {
   });
 
   it('renders end message when there are workflows', () => {
-    setup({ hasWorkflows: true, hasNextPage: false });
+    setup({ hasData: true, hasNextPage: false });
 
     expect(screen.getByText('End of results')).toBeInTheDocument();
   });
 
-  it('renders end message when there are no workflows', () => {
-    setup({ hasWorkflows: false, hasNextPage: false });
+  it('renders end message when there is no data', () => {
+    setup({ hasData: false, hasNextPage: false });
 
     expect(screen.getByText('No results')).toBeInTheDocument();
   });
@@ -62,14 +62,14 @@ describe(DomainWorkflowsTableEndMessage.name, () => {
 function setup(overrides: Partial<Props>) {
   const mockFetchNextPage = jest.fn();
   const defaultProps: Props = {
-    hasWorkflows: true,
+    hasData: true,
     error: null,
     fetchNextPage: mockFetchNextPage,
     hasNextPage: true,
     isFetchingNextPage: false,
   };
 
-  render(<DomainWorkflowsTableEndMessage {...defaultProps} {...overrides} />);
+  render(<TableInfiniteScrollLoader {...defaultProps} {...overrides} />);
 
   return { mockFetchNextPage };
 }
diff --git a/...ain-workflows-table-end-message.styles.ts → ...er/table-infinite-scroll-loader.styles.ts b/...ain-workflows-table-end-message.styles.ts → ...er/table-infinite-scroll-loader.styles.ts
diff --git a/...ge/domain-workflows-table-end-message.tsx → ...l-loader/table-infinite-scroll-loader.tsx b/...ge/domain-workflows-table-end-message.tsx → ...l-loader/table-infinite-scroll-loader.tsx
@@ -3,10 +3,10 @@ import React from 'react';
 import { Spinner } from 'baseui/spinner';
 import { InView } from 'react-intersection-observer';
 
-import { styled } from './domain-workflows-table-end-message.styles';
-import { type Props } from './domain-workflows-table-end-message.types';
+import { styled } from './table-infinite-scroll-loader.styles';
+import { type Props } from './table-infinite-scroll-loader.types';
 
-export default function DomainWorkflowsTableEndMessage(props: Props) {
+export default function TableInfiniteScrollLoader(props: Props) {
   if (props.isFetchingNextPage) {
     return <Spinner data-testid="loading-spinner" />;
   }
@@ -42,7 +42,7 @@ export default function DomainWorkflowsTableEndMessage(props: Props) {
     );
   }
 
-  if (props.hasWorkflows) {
+  if (props.hasData) {
     return (
       <styled.EndMessageContainer>End of results</styled.EndMessageContainer>
     );

diff --git a/...main-workflows-table-end-message.types.ts → ...der/table-infinite-scroll-loader.types.ts b/...main-workflows-table-end-message.types.ts → ...der/table-infinite-scroll-loader.types.ts
@@ -1,5 +1,5 @@
 export type Props = {
-  hasWorkflows: boolean;
+  hasData: boolean;
   error: Error | null;
   fetchNextPage: () => void;
   hasNextPage: boolean;

diff --git a/src/components/table/table.tsx b/src/components/table/table.tsx
@@ -8,6 +8,7 @@ import {
   StyledTableBodyRow,
 } from 'baseui/table-semantic';
 
+import TableInfiniteScrollLoader from './table-infinite-scroll-loader/table-infinite-scroll-loader';
 import TableSortableHeadCell from './table-sortable-head-cell/table-sortable-head-cell';
 import { styled } from './table.styles';
 import type { Props, TableConfig } from './table.types';
@@ -16,7 +17,7 @@ export default function Table<T extends object, C extends TableConfig<T>>({
   data,
   columns,
   shouldShowResults,
-  endMessage,
+  endMessageProps,
   onSort,
   sortColumn,
   sortOrder,
@@ -69,7 +70,13 @@ export default function Table<T extends object, C extends TableConfig<T>>({
             ))}
           <tr>
             <td colSpan={columns.length}>
-              <styled.TableMessage>{endMessage}</styled.TableMessage>
+              <styled.TableMessage>
+                {endMessageProps.kind === 'infinite-scroll' ? (
+                  <TableInfiniteScrollLoader {...endMessageProps} />
+                ) : (
+                  <>{endMessageProps.content}</>
+                )}
+              </styled.TableMessage>
             </td>
           </tr>
         </StyledTableBody>

diff --git a/src/components/table/table.types.ts b/src/components/table/table.types.ts
@@ -1,5 +1,9 @@
+import type React from 'react';
+
 import { type SortOrder } from '@/utils/sort-by';
 
+import { type Props as InfiniteScrollLoaderProps } from './table-infinite-scroll-loader/table-infinite-scroll-loader.types';
+
 export type TableColumn<T> = {
   name: string;
   id: string;
@@ -16,6 +20,15 @@ type AreAnyColumnsSortable<T, C extends TableConfig<T>> = true extends {
   ? true
   : false;
 
+type EndMessageProps =
+  | {
+      kind: 'simple';
+      content: React.ReactNode;
+    }
+  | ({
+      kind: 'infinite-scroll';
+    } & InfiniteScrollLoaderProps);
+
 type OnSortFunctionOptional<T, C extends TableConfig<T>> =
   AreAnyColumnsSortable<T, C> extends true
     ? { onSort: (column: string) => void }
@@ -25,7 +38,7 @@ export type Props<T, C extends TableConfig<T>> = {
   data: Array<T>;
   columns: C;
   shouldShowResults: boolean;
-  endMessage: React.ReactNode;
+  endMessageProps: EndMessageProps;
   sortColumn?: string;
   sortOrder?: SortOrder;
 } & OnSortFunctionOptional<T, C>;
diff --git a/src/views/domain-workflows/domain-workflows-table/__tests__/domain-workflows-table.test.tsx b/src/views/domain-workflows/domain-workflows-table/__tests__/domain-workflows-table.test.tsx
@@ -2,13 +2,13 @@ import { HttpResponse } from 'msw';
 
 import { render, screen, userEvent, waitFor } from '@/test-utils/rtl';
 
+import { type Props as LoaderProps } from '@/components/table/table-infinite-scroll-loader/table-infinite-scroll-loader.types';
 import * as usePageQueryParamsModule from '@/hooks/use-page-query-params/use-page-query-params';
 import { type ListWorkflowsResponse } from '@/route-handlers/list-workflows/list-workflows.types';
 
 import type { Props as MSWMocksHandlersProps } from '../../../../test-utils/msw-mock-handlers/msw-mock-handlers.types';
 import { mockDomainWorkflowsQueryParamsValues } from '../../__fixtures__/domain-workflows-query-params';
 import { type DomainWorkflowsHeaderInputType } from '../../domain-workflows-header/domain-workflows-header.types';
-import { type Props as EndMessageProps } from '../../domain-workflows-table-end-message/domain-workflows-table-end-message.types';
 import DomainWorkflowsTable from '../domain-workflows-table';
 
 jest.mock('@/components/error-panel/error-panel', () =>
@@ -39,10 +39,10 @@ jest.mock('../helpers/get-workflows-error-panel-props', () =>
 );
 
 jest.mock(
-  '../../domain-workflows-table-end-message/domain-workflows-table-end-message',
+  '@/components/table/table-infinite-scroll-loader/table-infinite-scroll-loader',
   () =>
-    jest.fn((props: EndMessageProps) => (
-      <button data-testid="mock-end-message" onClick={props.fetchNextPage}>
+    jest.fn((props: LoaderProps) => (
+      <button data-testid="mock-loader" onClick={props.fetchNextPage}>
         Mock end message: {props.error ? 'Error' : 'OK'}
       </button>
     ))
@@ -74,7 +74,7 @@ describe(DomainWorkflowsTable.name, () => {
       ).toBeInTheDocument();
     });
 
-    await user.click(screen.getByTestId('mock-end-message'));
+    await user.click(screen.getByTestId('mock-loader'));
 
     expect(await screen.findByText('Mock end message: OK')).toBeInTheDocument();
     Array(10).forEach((_, index) => {
@@ -126,13 +126,13 @@ describe(DomainWorkflowsTable.name, () => {
       ).toBeInTheDocument();
     });
 
-    await user.click(screen.getByTestId('mock-end-message'));
+    await user.click(screen.getByTestId('mock-loader'));
 
     expect(
       await screen.findByText('Mock end message: Error')
     ).toBeInTheDocument();
 
-    await user.click(screen.getByTestId('mock-end-message'));
+    await user.click(screen.getByTestId('mock-loader'));
 
     expect(await screen.findByText('Mock end message: OK')).toBeInTheDocument();
     Array(10).forEach((_, index) => {

diff --git a/src/views/domain-workflows/domain-workflows-table/domain-workflows-table.tsx b/src/views/domain-workflows/domain-workflows-table/domain-workflows-table.tsx
@@ -10,7 +10,6 @@ import domainPageQueryParamsConfig from '@/views/domain-page/config/domain-page-
 import domainWorkflowsQueryTableConfig from '../config/domain-workflows-query-table.config';
 import domainWorkflowsSearchTableConfig from '../config/domain-workflows-search-table.config';
 import { type Props } from '../domain-workflows-table/domain-workflows-table.types';
-import DomainWorkflowsTableEndMessage from '../domain-workflows-table-end-message/domain-workflows-table-end-message';
 import getNextSortOrder from '../helpers/get-next-sort-order';
 import useListWorkflows from '../hooks/use-list-workflows';
 
@@ -63,15 +62,14 @@ export default function DomainWorkflowsTable({ domain, cluster }: Props) {
       <Table
         data={workflows}
         shouldShowResults={!isLoading && workflows.length > 0}
-        endMessage={
-          <DomainWorkflowsTableEndMessage
-            hasWorkflows={workflows.length > 0}
-            error={error}
-            fetchNextPage={fetchNextPage}
-            hasNextPage={hasNextPage}
-            isFetchingNextPage={isFetchingNextPage}
-          />
-        }
+        endMessageProps={{
+          kind: 'infinite-scroll',
+          hasData: workflows.length > 0,
+          error,
+          fetchNextPage,
+          hasNextPage,
+          isFetchingNextPage,
+        }}
         {...(inputType === 'query'
           ? {
               columns: domainWorkflowsQueryTableConfig,

diff --git a/src/views/domains-page/domains-table-end-message/domains-table-end-message.tsx b/src/views/domains-page/domains-table-end-message/domains-table-end-message.tsx
diff --git a/src/views/domains-page/domains-table-end-message/domains-table-end-message.type.ts b/src/views/domains-page/domains-table-end-message/domains-table-end-message.type.ts
diff --git a/src/views/domains-page/domains-table/domains-table.tsx b/src/views/domains-page/domains-table/domains-table.tsx
@@ -1,8 +1,6 @@
 'use client';
 import React, { useEffect, useMemo, useState } from 'react';
 
-import { useInView } from 'react-intersection-observer';
-
 import PageSection from '@/components/page-section/page-section';
 import Table from '@/components/table/table';
 import usePageQueryParams from '@/hooks/use-page-query-params/use-page-query-params';
@@ -12,7 +10,6 @@ import sortBy, {
   toggleSortOrder,
   type SortOrder,
 } from '@/utils/sort-by';
-import DomainsTableEndMessage from '@/views/domains-page/domains-table-end-message/domains-table-end-message';
 
 import domainsPageFiltersConfig from '../config/domains-page-filters.config';
 import domainsPageQueryParamsConfig from '../config/domains-page-query-params.config';
@@ -66,16 +63,6 @@ function DomainsTable({
     [sortedDomains, visibleListItems]
   );
 
-  const { ref: loadMoreRef } = useInView({
-    onChange: (inView) => {
-      if (inView && visibleListItems < sortedDomains.length) {
-        setVisibleListItems((v) =>
-          Math.min(v + DOMAINS_LIST_PAGE_SIZE, sortedDomains.length)
-        );
-      }
-    },
-  });
-
   return (
     <PageSection>
       <section className={cls.tableContainer}>
@@ -95,16 +82,17 @@ function DomainsTable({
           }
           sortColumn={queryParams.sortColumn}
           sortOrder={queryParams.sortOrder as SortOrder}
-          endMessage={
-            <DomainsTableEndMessage
-              key={visibleListItems}
-              canLoadMoreResults={
-                paginatedDomains.length < sortedDomains.length
-              }
-              hasSearchResults={sortedDomains.length > 0}
-              infiniteScrollTargetRef={loadMoreRef}
-            />
-          }
+          endMessageProps={{
+            kind: 'infinite-scroll',
+            hasData: sortedDomains.length > 0,
+            hasNextPage: paginatedDomains.length < sortedDomains.length,
+            fetchNextPage: () =>
+              setVisibleListItems((v) =>
+                Math.min(v + DOMAINS_LIST_PAGE_SIZE, sortedDomains.length)
+              ),
+            isFetchingNextPage: false,
+            error: null,
+          }}
         />
       </section>
     </PageSection>

diff --git a/src/views/task-list-page/task-list-workers-table/task-list-workers-table.tsx b/src/views/task-list-page/task-list-workers-table/task-list-workers-table.tsx
@@ -50,11 +50,15 @@ export default function TaskListWorkersTable({ taskList }: Props) {
             }),
           })
         }
-        endMessage={
-          filteredAndSortedWorkers.length === 0 ? (
-            <styled.EndMessageContainer>No workers</styled.EndMessageContainer>
-          ) : null
-        }
+        endMessageProps={{
+          kind: 'simple',
+          content:
+            filteredAndSortedWorkers.length === 0 ? (
+              <styled.EndMessageContainer>
+                No workers
+              </styled.EndMessageContainer>
+            ) : null,
+        }}
       />
     </styled.TableContainer>
   );