Support for Pagination

mitosis.config.cjs

@@ -20,7 +20,7 @@ const VUE_OPTIONS = {
   api: 'composition',
 };
 
-const components = ['Login', 'CreateOIDCConnection', 'CreateSAMLConnection', 'ConnectionList'];
+const components = ['Login', 'CreateOIDCConnection', 'CreateSAMLConnection'];
 
 const isMitosisNode = (x) => x && x['@type'] === '@builder.io/mitosis/node';
 

overrides/react/src/shared/types.ts

@@ -159,11 +159,14 @@ export interface ConfirmationPromptProps {
   cancelCallback: (event: Event) => void;
 }
 
+export type PageToken = string | null;
+
 export type PaginatePayload = { offset: number; limit: number };
 
 export interface PaginateProps {
   handlePageChange?: (payload: Partial<PaginatePayload>) => void;
   reFetch: (payload: PaginatePayload) => any;
+  pageTokenMap: Record<number, PageToken>;
   itemsPerPage?: number;
   currentPageItemsCount: number;
   children?: any;

overrides/svelte/src/shared/types.ts

@@ -114,11 +114,14 @@ export interface ConfirmationPromptProps {
   cancelCallback: (event: Event) => void;
 }
 
+export type PageToken = string | null;
+
 export type PaginatePayload = { offset: number; limit: number };
 
 export interface PaginateProps {
   handlePageChange?: (payload: Partial<PaginatePayload>) => void;
   reFetch: (payload: PaginatePayload) => any;
+  pageTokenMap: Record<number, PageToken>;
   itemsPerPage?: number;
   currentPageItemsCount: number;
   children?: any;

overrides/vue/vue3/src/shared/types.ts

@@ -122,11 +122,14 @@ export interface ConfirmationPromptProps {
   cancelCallback: (event: Event) => void;
 }
 
+export type PageToken = string | null;
+
 export type PaginatePayload = { offset: number; limit: number };
 
 export interface PaginateProps {
   handlePageChange?: (payload: Partial<PaginatePayload>) => void;
   reFetch: (payload: PaginatePayload) => any;
+  pageTokenMap: Record<number, PageToken>;
   itemsPerPage?: number;
   currentPageItemsCount: number;
   children?: any;

src/shared/Paginate/index.lite.tsx

@@ -21,20 +21,33 @@ export default function Paginate(props: PaginateProps) {
       return props.currentPageItemsCount < state._itemsPerPage;
     },
     handlePreviousClick() {
-      const newOffset = state._offset - state._itemsPerPage;
+      const currentOffset = state._offset;
+      const newOffset = currentOffset - state._itemsPerPage;
       state._offset = newOffset;
+
       // Update query string in URL
       typeof props.handlePageChange === 'function' && props.handlePageChange({ offset: newOffset });
       // Trigger data re-fetch with new offset
-      typeof props.reFetch === 'function' && props.reFetch({ offset: newOffset, limit: state._itemsPerPage });
+      typeof props.reFetch === 'function' &&
+        props.reFetch({
+          offset: newOffset,
+          limit: state._itemsPerPage,
+          pageToken: props.pageTokenMap[newOffset - state._itemsPerPage],
+        });
     },
     handleNextClick() {
-      const newOffset = state._offset + state._itemsPerPage;
+      const currentOffset = state._offset;
+      const newOffset = currentOffset + state._itemsPerPage;
       state._offset = newOffset;
       // Update query string in URL
       typeof props.handlePageChange === 'function' && props.handlePageChange({ offset: newOffset });
       // Trigger data re-fetch with new offset
-      typeof props.reFetch === 'function' && props.reFetch({ offset: newOffset, limit: state._itemsPerPage });
+      typeof props.reFetch === 'function' &&
+        props.reFetch({
+          offset: newOffset,
+          limit: state._itemsPerPage,
+          pageToken: props.pageTokenMap[currentOffset],
+        });
     },
   });
 

src/shared/Table/non-paginated.lite.tsx

@@ -0,0 +1,31 @@
+import { Show } from '@builder.io/mitosis';
+import EmptyState from '../EmptyState/index.lite';
+import Table from './index.lite';
+import { TableProps } from '../types';
+import styles from './index.module.css';
+
+type NonPaginatedTableProps = {
+  cols: TableProps['cols'];
+  data: TableProps['data'];
+  actions: TableProps['actions'];
+  tableProps?: TableProps;
+  showErrorComponent: boolean;
+  errorMessage: string;
+  emptyStateMessage: string;
+};
+
+export default function NonPaginatedTable(props: NonPaginatedTableProps) {
+  return (
+    <Show
+      when={props.data?.length > 0}
+      else={
+        <Show when={props.showErrorComponent} else={<EmptyState title={props.emptyStateMessage} />}>
+          <EmptyState title={props.errorMessage} variant='error' />
+        </Show>
+      }>
+      <div class={styles.tableContainer}>
+        <Table cols={props.cols} data={props.data} actions={props.actions} {...props.tableProps} />
+      </div>
+    </Show>
+  );
+}

src/shared/Table/paginated.lite.tsx

@@ -3,6 +3,7 @@ import EmptyState from '../EmptyState/index.lite';
 import Table from './index.lite';
 import { TableProps } from '../types';
 import PaginateContext from '../Paginate/paginate.context.lite';
+import styles from './index.module.css';
 
 type PaginatedTableProps = {
   cols: TableProps['cols'];
@@ -11,6 +12,7 @@ type PaginatedTableProps = {
   tableProps?: TableProps;
   showErrorComponent: boolean;
   errorMessage: string;
+  emptyStateMessage: string;
 };
 
 export default function PaginatedTable(props: PaginatedTableProps) {
@@ -29,17 +31,19 @@ export default function PaginatedTable(props: PaginatedTableProps) {
     <Show
       when={!state.showEmptyData}
       else={
-        <Show when={props.showErrorComponent} else={<EmptyState title='No connections found.' />}>
+        <Show when={props.showErrorComponent} else={<EmptyState title={props.emptyStateMessage} />}>
           <EmptyState title={props.errorMessage} variant='error' />
         </Show>
       }>
-      <Table
-        cols={props.cols}
-        data={props.data}
-        actions={props.actions}
-        noMoreResults={state.showNoMoreResults}
-        {...props.tableProps}
-      />
+      <div class={styles.tableContainer}>
+        <Table
+          cols={props.cols}
+          data={props.data}
+          actions={props.actions}
+          noMoreResults={state.showNoMoreResults}
+          {...props.tableProps}
+        />
+      </div>
     </Show>
   );
 }

src/shared/http.ts

@@ -9,7 +9,7 @@ async function parseResponseContent(response: Response) {
 }
 
 /** undefined for 204 No content */
-type ApiSuccess<T> = T | undefined;
+type ApiSuccess<T> = T | { data: T; pageToken: string } | undefined;
 
 export type ApiResponse<T = any> = ApiSuccess<T> | { error: { message: string } };
 
@@ -19,12 +19,17 @@ export async function sendHTTPRequest<U = any>(url: string, options?: RequestIni
     if (response.status === 204) {
       return;
     }
+    const pageToken = response.headers.get('jackson-pagetoken');
     const responseContent = await parseResponseContent(response);
 
     if (!response.ok) {
       throw new ApiError(response.status, responseContent.error.message);
     }
 
+    if (pageToken && typeof responseContent === 'object') {
+      return { data: responseContent, pageToken };
+    }
+
     return responseContent;
   } catch (error: any) {
     const message = error.message || 'Something went wrong';

src/shared/types.ts

@@ -151,11 +151,14 @@ export interface ConfirmationPromptProps {
   cancelCallback: (event: Event) => void;
 }
 
-export type PaginatePayload = { offset: number; limit: number };
+export type PageToken = string | null;
+
+export type PaginatePayload = { offset: number; limit: number; pageToken?: PageToken };
 
 export interface PaginateProps {
   handlePageChange?: (payload: Partial<PaginatePayload>) => void;
   reFetch: (payload: PaginatePayload) => any;
+  pageTokenMap: Record<number, PageToken>;
   itemsPerPage?: number;
   currentPageItemsCount: number;
   children?: any;

src/sso/connections/ConnectionList/index.lite.tsx

@@ -1,15 +1,12 @@
 import { useStore, onUpdate, Show } from '@builder.io/mitosis';
 import type { ConnectionData, ConnectionListProps, OIDCSSORecord, SAMLSSORecord } from '../types';
 import LoadingContainer from '../../../shared/LoadingContainer/index.lite';
-import EmptyState from '../../../shared/EmptyState/index.lite';
-import cssClassAssembler from '../../utils/cssClassAssembler';
-import defaultClasses from './index.module.css';
-import Table from '../../../shared/Table/index.lite';
-import { BadgeProps, PaginatePayload, TableProps } from '../../../shared/types';
+import { BadgeProps, PageToken, PaginatePayload, TableProps } from '../../../shared/types';
 import { sendHTTPRequest } from '../../../shared/http';
 import Paginate from '../../../shared/Paginate/index.lite';
 import { ITEMS_PER_PAGE_DEFAULT } from '../../../shared/Paginate/utils';
 import PaginatedTable from '../../../shared/Table/paginated.lite';
+import NonPaginatedTable from '../../../shared/Table/non-paginated.lite';
 
 const DEFAULT_VALUES = {
   isSettingsView: false,
@@ -20,6 +17,7 @@ export default function ConnectionList(props: ConnectionListProps) {
   const state = useStore({
     connectionListData: DEFAULT_VALUES.connectionListData,
     isConnectionListLoading: true,
+    pageTokenMap: {} as Record<number, PageToken>,
     showErrorComponent: false,
     errorMessage: '',
     get getUrl() {
@@ -31,11 +29,7 @@ export default function ConnectionList(props: ConnectionListProps) {
     get itemsPerPage() {
       return props.paginate?.itemsPerPage ?? ITEMS_PER_PAGE_DEFAULT;
     },
-    get classes() {
-      return {
-        tableContainer: cssClassAssembler(props.classNames?.tableContainer, defaultClasses.tableContainer),
-      };
-    },
+
     get colsToDisplay() {
       return (props.cols || ['name', 'provider', 'tenant', 'product', 'type', 'status', 'actions']).map(
         (_col) => {
@@ -116,6 +110,10 @@ export default function ConnectionList(props: ConnectionListProps) {
         urlParams.set('product', params.product);
       }
 
+      if (params.pageToken) {
+        urlParams.set('pageToken', params.pageToken);
+      }
+
       if (params.displaySorted) {
         urlParams.set('sort', 'true');
       }
@@ -140,6 +138,10 @@ export default function ConnectionList(props: ConnectionListProps) {
     },
   });
 
+  function updateTokenMap(offset: number, token: PageToken) {
+    return { ...state.pageTokenMap, [offset]: token };
+  }
+
   async function getFieldsData(url: string) {
     state.isConnectionListLoading = true;
     const data = await sendHTTPRequest<ConnectionData<SAMLSSORecord | OIDCSSORecord>[]>(url);
@@ -151,7 +153,9 @@ export default function ConnectionList(props: ConnectionListProps) {
         state.errorMessage = data.error.message;
         typeof props.errorCallback === 'function' && props.errorCallback(data.error.message);
       } else {
-        const _connectionsListData = data.map((connection: ConnectionData<any>) => {
+        const isTokenizedPagination = typeof data === 'object' && 'pageToken' in data;
+        const _data = isTokenizedPagination ? data.data : data;
+        const _connectionsListData = _data.map((connection: ConnectionData<any>) => {
           return {
             ...connection,
             provider: state.connectionProviderName(connection),
@@ -160,20 +164,29 @@ export default function ConnectionList(props: ConnectionListProps) {
             isSystemSSO: connection.isSystemSSO,
           };
         });
+
         state.connectionListData = _connectionsListData;
+
         typeof props.handleListFetchComplete === 'function' &&
           props.handleListFetchComplete(_connectionsListData);
+
+        if (isTokenizedPagination) {
+          return data.pageToken;
+        }
       }
     }
   }
 
-  function reFetch(payload: PaginatePayload) {
-    getFieldsData(
+  async function reFetch(payload: PaginatePayload) {
+    const pageToken = await getFieldsData(
       state.listFetchUrl({
         getUrl: state.baseFetchUrl,
         ...payload,
       })
     );
+    if (pageToken) {
+      state.pageTokenMap = updateTokenMap(payload.offset, pageToken);
+    }
   }
 
   onUpdate(() => {
@@ -189,36 +202,29 @@ export default function ConnectionList(props: ConnectionListProps) {
           itemsPerPage={props.paginate?.itemsPerPage}
           currentPageItemsCount={state.connectionListData.length}
           handlePageChange={props.paginate?.handlePageChange}
-          reFetch={reFetch}>
-          <div class={state.classes.tableContainer}>
-            <PaginatedTable
-              cols={state.colsToDisplay}
-              data={state.connectionListData}
-              actions={state.actions}
-              showErrorComponent={state.showErrorComponent}
-              errorMessage={state.errorMessage}
-              tableProps={props.tableProps}
-            />
-          </div>
+          reFetch={reFetch}
+          pageTokenMap={state.pageTokenMap}>
+          <PaginatedTable
+            cols={state.colsToDisplay}
+            data={state.connectionListData}
+            actions={state.actions}
+            showErrorComponent={state.showErrorComponent}
+            errorMessage={state.errorMessage}
+            emptyStateMessage='No connections found.'
+            tableProps={props.tableProps}
+          />
         </Paginate>
       </Show>
       <Show when={!state.isPaginated}>
-        <Show
-          when={state.connectionListData?.length > 0}
-          else={
-            <Show when={state.showErrorComponent} else={<EmptyState title='No connections found.' />}>
-              <EmptyState title={state.errorMessage} variant='error' />
-            </Show>
-          }>
-          <div class={state.classes.tableContainer}>
-            <Table
-              cols={state.colsToDisplay}
-              data={state.connectionListData}
-              actions={state.actions}
-              {...props.tableProps}
-            />
-          </div>
-        </Show>
+        <NonPaginatedTable
+          cols={state.colsToDisplay}
+          data={state.connectionListData}
+          actions={state.actions}
+          showErrorComponent={state.showErrorComponent}
+          errorMessage={state.errorMessage}
+          emptyStateMessage='No connections found.'
+          tableProps={props.tableProps}
+        />
       </Show>
     </LoadingContainer>
   );