Move table end message to generic component

src/views/domain-workflows/domain-workflows-table-end-message/__tests__/domain-workflows-table-end-message.test.tsx → src/components/table-infinite-scroll-loader/__tests__/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 };
 }

src/views/domain-workflows/domain-workflows-table-end-message/domain-workflows-table-end-message.tsx → src/components/table-infinite-scroll-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>
     );

src/views/domain-workflows/domain-workflows-table-end-message/domain-workflows-table-end-message.types.ts → src/components/table-infinite-scroll-loader/table-infinite-scroll-loader.types.ts

@@ -1,5 +1,5 @@
 export type Props = {
-  hasWorkflows: boolean;
+  hasData: boolean;
   error: Error | null;
   fetchNextPage: () => void;
   hasNextPage: boolean;

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-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-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) => {

src/views/domain-workflows/domain-workflows-table/domain-workflows-table.tsx

@@ -4,13 +4,13 @@ import React from 'react';
 import ErrorPanel from '@/components/error-panel/error-panel';
 import SectionLoadingIndicator from '@/components/section-loading-indicator/section-loading-indicator';
 import Table from '@/components/table/table';
+import TableInfiniteScrollLoader from '@/components/table-infinite-scroll-loader/table-infinite-scroll-loader';
 import usePageQueryParams from '@/hooks/use-page-query-params/use-page-query-params';
 import domainPageQueryParamsConfig from '@/views/domain-page/config/domain-page-query-params.config';
 
 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';
 
@@ -64,8 +64,8 @@ export default function DomainWorkflowsTable({ domain, cluster }: Props) {
         data={workflows}
         shouldShowResults={!isLoading && workflows.length > 0}
         endMessage={
-          <DomainWorkflowsTableEndMessage
-            hasWorkflows={workflows.length > 0}
+          <TableInfiniteScrollLoader
+            hasData={workflows.length > 0}
             error={error}
             fetchNextPage={fetchNextPage}
             hasNextPage={hasNextPage}