diff --git a/src/components/table/__tests__/table.test.tsx b/src/components/table/__tests__/table.test.tsx
index c21f0e643..37ce4a21a 100644
--- 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={
Sample end message
}
+ endMessageProps={{
+ kind: 'simple',
+ content: Sample end message
,
+ }}
{...(!omitOnSort && { onSort: mockOnSort })}
sortColumn={SAMPLE_COLUMNS[SAMPLE_DATA_NUM_COLUMNS - 1].id}
sortOrder="DESC"
diff --git a/src/views/domain-workflows/domain-workflows-table-end-message/__tests__/domain-workflows-table-end-message.test.tsx b/src/components/table/table-infinite-scroll-loader/__tests__/table-infinite-scroll-loader.test.tsx
similarity index 76%
rename from src/views/domain-workflows/domain-workflows-table-end-message/__tests__/domain-workflows-table-end-message.test.tsx
rename to src/components/table/table-infinite-scroll-loader/__tests__/table-infinite-scroll-loader.test.tsx
index 872602732..13dcbcadf 100644
--- a/src/views/domain-workflows/domain-workflows-table-end-message/__tests__/domain-workflows-table-end-message.test.tsx
+++ b/src/components/table/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) {
const mockFetchNextPage = jest.fn();
const defaultProps: Props = {
- hasWorkflows: true,
+ hasData: true,
error: null,
fetchNextPage: mockFetchNextPage,
hasNextPage: true,
isFetchingNextPage: false,
};
- render();
+ render();
return { mockFetchNextPage };
}
diff --git a/src/views/domain-workflows/domain-workflows-table-end-message/domain-workflows-table-end-message.styles.ts b/src/components/table/table-infinite-scroll-loader/table-infinite-scroll-loader.styles.ts
similarity index 100%
rename from src/views/domain-workflows/domain-workflows-table-end-message/domain-workflows-table-end-message.styles.ts
rename to src/components/table/table-infinite-scroll-loader/table-infinite-scroll-loader.styles.ts
diff --git a/src/views/domain-workflows/domain-workflows-table-end-message/domain-workflows-table-end-message.tsx b/src/components/table/table-infinite-scroll-loader/table-infinite-scroll-loader.tsx
similarity index 81%
rename from src/views/domain-workflows/domain-workflows-table-end-message/domain-workflows-table-end-message.tsx
rename to src/components/table/table-infinite-scroll-loader/table-infinite-scroll-loader.tsx
index f893e017f..5da3c8566 100644
--- a/src/views/domain-workflows/domain-workflows-table-end-message/domain-workflows-table-end-message.tsx
+++ b/src/components/table/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 ;
}
@@ -42,7 +42,7 @@ export default function DomainWorkflowsTableEndMessage(props: Props) {
);
}
- if (props.hasWorkflows) {
+ if (props.hasData) {
return (
End of results
);
diff --git a/src/views/domain-workflows/domain-workflows-table-end-message/domain-workflows-table-end-message.types.ts b/src/components/table/table-infinite-scroll-loader/table-infinite-scroll-loader.types.ts
similarity index 84%
rename from src/views/domain-workflows/domain-workflows-table-end-message/domain-workflows-table-end-message.types.ts
rename to src/components/table/table-infinite-scroll-loader/table-infinite-scroll-loader.types.ts
index 7aa65a7a3..3bd169d82 100644
--- a/src/views/domain-workflows/domain-workflows-table-end-message/domain-workflows-table-end-message.types.ts
+++ b/src/components/table/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;
diff --git a/src/components/table/table.tsx b/src/components/table/table.tsx
index 7a8702b7c..603ccf865 100644
--- 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>({
data,
columns,
shouldShowResults,
- endMessage,
+ endMessageProps,
onSort,
sortColumn,
sortOrder,
@@ -69,7 +70,13 @@ export default function Table>({
))}
- {endMessage}
+
+ {endMessageProps.kind === 'infinite-scroll' ? (
+
+ ) : (
+ <>{endMessageProps.content}>
+ )}
+
|
diff --git a/src/components/table/table.types.ts b/src/components/table/table.types.ts
index 2cf3e13a7..25b36b2e2 100644
--- 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 = {
name: string;
id: string;
@@ -16,6 +20,15 @@ type AreAnyColumnsSortable> = true extends {
? true
: false;
+type EndMessageProps =
+ | {
+ kind: 'simple';
+ content: React.ReactNode;
+ }
+ | ({
+ kind: 'infinite-scroll';
+ } & InfiniteScrollLoaderProps);
+
type OnSortFunctionOptional> =
AreAnyColumnsSortable extends true
? { onSort: (column: string) => void }
@@ -25,7 +38,7 @@ export type Props> = {
data: Array;
columns: C;
shouldShowResults: boolean;
- endMessage: React.ReactNode;
+ endMessageProps: EndMessageProps;
sortColumn?: string;
sortOrder?: SortOrder;
} & OnSortFunctionOptional;
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
index d61ada399..3dbdec3f7 100644
--- 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) => (
-