Support for Pagination (#806)

* Setup shared component

* Add type overrides

* Expand Button prop to take in supported HTML attributes

* WIP `Paginate`

* Type updates

* [Paginate] Consolidate callback prop into single `handlePageChange`

* [ConnectionList] Use <Paginate> component

* [Wrapper] Handle pageChange action

* Update qs using `window.pushState` API

* Refetch list based on current offset from URL

* Rename identifier

* Read the offset from the URL on mount

* Fix state shadowing (mitosis gotcha)

* Add missing offset state update

* Fix qs name for pagination, add pageLimit

* Support for toggling Pagination display

* Tweak pushState call for fixing back nav

* Sync offset from query params with `onMount` hook

* Trigger pageChange callback with `onUpdate` hook

* Cleanup routing logic

* Refactor

* [ConnectionList] Fetch data on offset change

* WIP Split refetch and route change callbacks for more predictability

* Turn off vue2 for now

* Avoid identical names for state and variables - should fix vue2 build issue

* Listen for browser back/forward interactions using popstate API

* Button style fixes

* Paginate button style fixes

* [WIP] Context seems to be of help

* Use getter for proper itemsPerPage value with fallback to default

* Hide pagination nav if total items are contained in the first page

* Cleanup context test files

* Simplify by removing children prop

* Table component support no more results

* Wrapper around table for using context

* Support both Paginated/non paginated listings

* Avoid duplicate fetch, ensure that paginated fetch and hook fetch don't run at same time causing race conditions

* Cleanup unused props

* Consolidate non offset params in baseFetchUrl

* Type updates

* Fix hover color for outline button

* Type updates

* Use pageTokenMap to fetch data

* Extract pageToken from response header

* Refactor into Paginated and Non Paginated table

* Added left/right arrow in prev next buttons, style fixes

* Tweak types

* Tweak type

* Fix type error

* [Dsync] Support for pagination

* Fine tune types

* Cleanup

* Type tweak

* System SSO badge fixes

* Update mitosis

* Remove vue2 generation

* Spacing in badge display

* Remove vue2 scripts

* Add space only if required

* Fix conditional render

Author: niwsa

.github/workflows/main.yml

@@ -42,12 +42,6 @@ jobs:
           name: mitosis-out-vue
           path: |
             ./vue/src
-      - name: Export framework code for vue2
-        uses: actions/upload-artifact@v4
-        with:
-          name: mitosis-out-vue2
-          path: |
-            ./vue2/src
       - name: Export framework code for angular
         uses: actions/upload-artifact@v4
         with:

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';
 
@@ -134,6 +134,6 @@ module.exports = {
     vue2: VUE_OPTIONS,
     svelte: { typescript: true },
   },
-  targets: ['react', 'angular', 'vue', 'vue2', 'svelte'],
+  targets: ['react', 'angular', 'vue', 'svelte'],
   exclude: ['src/css.d.ts'],
 };

overrides/react/src/shared/types.ts

@@ -1,4 +1,10 @@
-import type { SVGAttributes, ComponentPropsWithRef, ReactElement, ReactNode } from 'react';
+import type {
+  SVGAttributes,
+  ComponentPropsWithRef,
+  ReactElement,
+  ReactNode,
+  ButtonHTMLAttributes,
+} from 'react';
 
 export type SVGProps = SVGAttributes<SVGSVGElement>;
 
@@ -43,14 +49,17 @@ export interface ModalProps {
   children?: any;
 }
 
-export interface ButtonProps extends ComponentPropsWithRef<'button'> {
+export interface ButtonProps
+  extends ComponentPropsWithRef<'button'>,
+    ButtonHTMLAttributes<HTMLButtonElement> {
   buttonRef?: HTMLButtonElement;
   name: string;
   type?: 'submit' | 'reset' | 'button';
   handleClick?: (event: any) => void;
   variant?: 'primary' | 'secondary' | 'destructive' | 'outline';
   classNames?: string;
   isLoading?: boolean;
+  icon?: 'LeftArrowIcon' | 'RightArrowIcon';
 }
 
 export interface ToggleSwitchProps {
@@ -139,6 +148,7 @@ export interface TableProps {
     icon?: string;
     iconSpan?: string;
   };
+  noMoreResults?: boolean;
 }
 
 export interface ConfirmationPromptProps {
@@ -149,3 +159,16 @@ export interface ConfirmationPromptProps {
   confirmationCallback: (event: Event) => void;
   cancelCallback: (event: Event) => void;
 }
+
+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;
+}

overrides/svelte/src/shared/types.ts

@@ -34,15 +34,16 @@ export interface BadgeProps {
   variant?: 'success' | 'info' | 'warning';
 }
 
-export interface ButtonProps {
+export type ButtonProps = {
   buttonRef?: any;
   name: string;
   type?: 'submit' | 'reset' | 'button';
   handleClick?: (event: any) => void;
   variant?: 'primary' | 'secondary' | 'destructive' | 'outline';
   classNames?: string;
   isLoading?: boolean;
-}
+  icon?: 'LeftArrowIcon' | 'RightArrowIcon';
+} & HTMLButtonElement;
 
 export interface ToggleSwitchProps {
   label: string;
@@ -102,6 +103,7 @@ export interface TableProps {
     icon?: string;
     iconSpan?: string;
   };
+  noMoreResults?: boolean;
 }
 
 export interface ConfirmationPromptProps {
@@ -112,3 +114,16 @@ export interface ConfirmationPromptProps {
   confirmationCallback: (event: Event) => void;
   cancelCallback: (event: Event) => void;
 }
+
+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;
+}

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

@@ -1,4 +1,4 @@
-import type { SVGAttributes } from 'vue';
+import type { SVGAttributes, ButtonHTMLAttributes } from 'vue';
 
 export type SVGProps = SVGAttributes;
 
@@ -43,15 +43,16 @@ export interface ModalProps {
   children?: any;
 }
 
-export interface ButtonProps {
+export type ButtonProps = {
   buttonRef?: any;
   name: string;
   type?: 'submit' | 'reset' | 'button';
   handleClick?: (event: any) => void;
   variant?: 'primary' | 'secondary' | 'destructive' | 'outline';
   classNames?: string;
   isLoading?: boolean;
-}
+  icon?: 'LeftArrowIcon' | 'RightArrowIcon';
+} & ButtonHTMLAttributes;
 
 export interface ToggleSwitchProps {
   label: string;
@@ -110,6 +111,7 @@ export interface TableProps {
     icon?: string;
     iconSpan?: string;
   };
+  noMoreResults?: boolean;
 }
 
 export interface ConfirmationPromptProps {
@@ -120,3 +122,16 @@ export interface ConfirmationPromptProps {
   confirmationCallback: (event: Event) => void;
   cancelCallback: (event: Event) => void;
 }
+
+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;
+}