From 92c16222f23cf3668d2677957e3ad723f0eef01e Mon Sep 17 00:00:00 2001 From: Aswin V Date: Wed, 17 Jan 2024 17:38:42 +0530 Subject: [PATCH 01/60] Setup shared component --- src/shared/Paginate/index.lite.tsx | 9 +++++++++ src/shared/Paginate/index.module.css | 0 2 files changed, 9 insertions(+) create mode 100644 src/shared/Paginate/index.lite.tsx create mode 100644 src/shared/Paginate/index.module.css diff --git a/src/shared/Paginate/index.lite.tsx b/src/shared/Paginate/index.lite.tsx new file mode 100644 index 000000000..45b24a1d4 --- /dev/null +++ b/src/shared/Paginate/index.lite.tsx @@ -0,0 +1,9 @@ +export default function Paginate() { + return ( + + ); +} diff --git a/src/shared/Paginate/index.module.css b/src/shared/Paginate/index.module.css new file mode 100644 index 000000000..e69de29bb From 85ca9215e777f7b4d25cf7127281b7d12fbd9368 Mon Sep 17 00:00:00 2001 From: Aswin V Date: Thu, 18 Jan 2024 01:42:54 +0530 Subject: [PATCH 02/60] Add type overrides --- overrides/react/src/shared/types.ts | 18 ++++++++++++++++-- overrides/svelte/src/shared/types.ts | 10 ++++++++-- overrides/vue/vue3/src/shared/types.ts | 12 +++++++++--- 3 files changed, 33 insertions(+), 7 deletions(-) diff --git a/overrides/react/src/shared/types.ts b/overrides/react/src/shared/types.ts index 5637fc94c..102c3ddd6 100644 --- a/overrides/react/src/shared/types.ts +++ b/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; @@ -43,7 +49,9 @@ export interface ModalProps { children?: any; } -export interface ButtonProps extends ComponentPropsWithRef<'button'> { +export interface ButtonProps + extends ComponentPropsWithRef<'button'>, + ButtonHTMLAttributes { buttonRef?: HTMLButtonElement; name: string; type?: 'submit' | 'reset' | 'button'; @@ -149,3 +157,9 @@ export interface ConfirmationPromptProps { confirmationCallback: (event: Event) => void; cancelCallback: (event: Event) => void; } + +export interface PaginateProps { + handlePreviousClick: (event: Event) => void; + handleNextClick: (event: Event) => void; + itemsPerPage: number; +} diff --git a/overrides/svelte/src/shared/types.ts b/overrides/svelte/src/shared/types.ts index 76fd62fa3..e2ed62cc2 100644 --- a/overrides/svelte/src/shared/types.ts +++ b/overrides/svelte/src/shared/types.ts @@ -34,7 +34,7 @@ export interface BadgeProps { variant?: 'success' | 'info' | 'warning'; } -export interface ButtonProps { +export type ButtonProps = { buttonRef?: any; name: string; type?: 'submit' | 'reset' | 'button'; @@ -42,7 +42,7 @@ export interface ButtonProps { variant?: 'primary' | 'secondary' | 'destructive' | 'outline'; classNames?: string; isLoading?: boolean; -} +} & HTMLButtonElement; export interface ToggleSwitchProps { label: string; @@ -112,3 +112,9 @@ export interface ConfirmationPromptProps { confirmationCallback: (event: Event) => void; cancelCallback: (event: Event) => void; } + +export interface PaginateProps { + handlePreviousClick: (event: Event) => void; + handleNextClick: (event: Event) => void; + itemsPerPage: number; +} diff --git a/overrides/vue/vue3/src/shared/types.ts b/overrides/vue/vue3/src/shared/types.ts index 3622f0f2e..ab1522d04 100644 --- a/overrides/vue/vue3/src/shared/types.ts +++ b/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,7 +43,7 @@ export interface ModalProps { children?: any; } -export interface ButtonProps { +export type ButtonProps = { buttonRef?: any; name: string; type?: 'submit' | 'reset' | 'button'; @@ -51,7 +51,7 @@ export interface ButtonProps { variant?: 'primary' | 'secondary' | 'destructive' | 'outline'; classNames?: string; isLoading?: boolean; -} +} & ButtonHTMLAttributes; export interface ToggleSwitchProps { label: string; @@ -120,3 +120,9 @@ export interface ConfirmationPromptProps { confirmationCallback: (event: Event) => void; cancelCallback: (event: Event) => void; } + +export interface PaginateProps { + handlePreviousClick: (event: Event) => void; + handleNextClick: (event: Event) => void; + itemsPerPage: number; +} From dc5afb9070faebf6201282e239f4b8486ffa39a5 Mon Sep 17 00:00:00 2001 From: Aswin V Date: Thu, 18 Jan 2024 01:43:51 +0530 Subject: [PATCH 03/60] Expand Button prop to take in supported HTML attributes --- src/shared/Button/index.lite.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/shared/Button/index.lite.tsx b/src/shared/Button/index.lite.tsx index 914903b49..9e0438b41 100644 --- a/src/shared/Button/index.lite.tsx +++ b/src/shared/Button/index.lite.tsx @@ -5,6 +5,10 @@ import Spinner from '../Spinner/index.lite'; export default function Button(props: ButtonProps) { const state = useStore({ + get buttonHTMLAttributes() { + const { buttonRef, name, handleClick, type, variant, classNames, isLoading, ...rest } = props; + return rest; + }, get variantCss() { return props.variant ? ' ' + styles[props.variant] : ''; }, @@ -16,7 +20,8 @@ export default function Button(props: ButtonProps) { type={props.type || 'button'} class={`${styles.btn}${state.variantCss}${props.classNames ? ' ' + props.classNames : ''}`} disabled={props.isLoading} - onClick={(event) => props.handleClick?.(event)}> + onClick={(event) => props.handleClick?.(event)} + {...state.buttonHTMLAttributes}> From 6323924c27363bc1e36c4248e51ef56a15ac1f73 Mon Sep 17 00:00:00 2001 From: Aswin V Date: Thu, 18 Jan 2024 01:44:14 +0530 Subject: [PATCH 04/60] WIP `Paginate` --- src/shared/Paginate/index.lite.tsx | 33 ++++++++++++++++++++++++++++-- 1 file changed, 31 insertions(+), 2 deletions(-) diff --git a/src/shared/Paginate/index.lite.tsx b/src/shared/Paginate/index.lite.tsx index 45b24a1d4..e4a1c8ec5 100644 --- a/src/shared/Paginate/index.lite.tsx +++ b/src/shared/Paginate/index.lite.tsx @@ -1,8 +1,37 @@ -export default function Paginate() { +import { useStore } from '@builder.io/mitosis'; +import Button from '../Button/index.lite'; +import { PaginateProps } from '../types'; + +export default function Paginate(props: PaginateProps) { + const state = useStore({ + itemOffset: 0, + get isPreviousDisabled() { + return state.itemOffset === 0; + }, + get isNextDisabled() { + return props.currentPageItemsCount < props.itemsPerPage; + }, + }); + return ( ); From 00e055f40dd479108a55f5334b27b1481436d1d1 Mon Sep 17 00:00:00 2001 From: Aswin V Date: Thu, 18 Jan 2024 01:44:36 +0530 Subject: [PATCH 05/60] Type updates --- src/shared/types.ts | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/shared/types.ts b/src/shared/types.ts index c24690b38..529f1f760 100644 --- a/src/shared/types.ts +++ b/src/shared/types.ts @@ -43,7 +43,7 @@ export interface ModalProps { children?: any; } -export interface ButtonProps { +export type ButtonProps = { buttonRef?: any; name: string; handleClick?: (event: any) => void; @@ -51,7 +51,7 @@ export interface ButtonProps { variant?: 'primary' | 'secondary' | 'destructive' | 'outline'; classNames?: string; isLoading?: boolean; -} +} & JSX.ButtonHTMLAttributes; export interface ToggleSwitchProps { label: string; @@ -149,3 +149,10 @@ export interface ConfirmationPromptProps { confirmationCallback: (event: Event) => void; cancelCallback: (event: Event) => void; } + +export interface PaginateProps { + handlePreviousClick: (event: Event) => void; + handleNextClick: (event: Event) => void; + itemsPerPage: number; + currentPageItemsCount: number; +} From 3b63f3e5d59870694d9667ecee1da5074c67c980 Mon Sep 17 00:00:00 2001 From: Aswin V Date: Thu, 18 Jan 2024 16:56:53 +0530 Subject: [PATCH 06/60] [Paginate] Consolidate callback prop into single `handlePageChange` --- overrides/react/src/shared/types.ts | 6 ++++-- overrides/svelte/src/shared/types.ts | 6 ++++-- overrides/vue/vue3/src/shared/types.ts | 6 ++++-- src/shared/Paginate/index.lite.tsx | 12 +++++++++--- src/shared/types.ts | 5 +++-- 5 files changed, 24 insertions(+), 11 deletions(-) diff --git a/overrides/react/src/shared/types.ts b/overrides/react/src/shared/types.ts index 102c3ddd6..5e536a4cc 100644 --- a/overrides/react/src/shared/types.ts +++ b/overrides/react/src/shared/types.ts @@ -158,8 +158,10 @@ export interface ConfirmationPromptProps { cancelCallback: (event: Event) => void; } +export type PaginatePayload = { offset: number }; + export interface PaginateProps { - handlePreviousClick: (event: Event) => void; - handleNextClick: (event: Event) => void; + handlePageChange: (payload: PaginatePayload) => void; itemsPerPage: number; + currentPageItemsCount: number; } diff --git a/overrides/svelte/src/shared/types.ts b/overrides/svelte/src/shared/types.ts index e2ed62cc2..7b73d97ea 100644 --- a/overrides/svelte/src/shared/types.ts +++ b/overrides/svelte/src/shared/types.ts @@ -113,8 +113,10 @@ export interface ConfirmationPromptProps { cancelCallback: (event: Event) => void; } +export type PaginatePayload = { offset: number }; + export interface PaginateProps { - handlePreviousClick: (event: Event) => void; - handleNextClick: (event: Event) => void; + handlePageChange: (payload: PaginatePayload) => void; itemsPerPage: number; + currentPageItemsCount: number; } diff --git a/overrides/vue/vue3/src/shared/types.ts b/overrides/vue/vue3/src/shared/types.ts index ab1522d04..87c39c135 100644 --- a/overrides/vue/vue3/src/shared/types.ts +++ b/overrides/vue/vue3/src/shared/types.ts @@ -121,8 +121,10 @@ export interface ConfirmationPromptProps { cancelCallback: (event: Event) => void; } +export type PaginatePayload = { offset: number }; + export interface PaginateProps { - handlePreviousClick: (event: Event) => void; - handleNextClick: (event: Event) => void; + handlePageChange: (payload: PaginatePayload) => void; itemsPerPage: number; + currentPageItemsCount: number; } diff --git a/src/shared/Paginate/index.lite.tsx b/src/shared/Paginate/index.lite.tsx index e4a1c8ec5..436799357 100644 --- a/src/shared/Paginate/index.lite.tsx +++ b/src/shared/Paginate/index.lite.tsx @@ -6,11 +6,17 @@ export default function Paginate(props: PaginateProps) { const state = useStore({ itemOffset: 0, get isPreviousDisabled() { - return state.itemOffset === 0; + return this.itemOffset === 0; }, get isNextDisabled() { return props.currentPageItemsCount < props.itemsPerPage; }, + handlePreviousClick() { + props.handlePageChange({ offset: this.itemOffset - props.itemsPerPage }); + }, + handleNextClick() { + props.handlePageChange({ offset: this.itemOffset + props.itemsPerPage }); + }, }); return ( @@ -20,7 +26,7 @@ export default function Paginate(props: PaginateProps) { @@ -28,7 +34,7 @@ export default function Paginate(props: PaginateProps) { diff --git a/src/shared/types.ts b/src/shared/types.ts index 529f1f760..c4050356b 100644 --- a/src/shared/types.ts +++ b/src/shared/types.ts @@ -150,9 +150,10 @@ export interface ConfirmationPromptProps { cancelCallback: (event: Event) => void; } +export type PaginatePayload = { offset: number }; + export interface PaginateProps { - handlePreviousClick: (event: Event) => void; - handleNextClick: (event: Event) => void; + handlePageChange: (payload: PaginatePayload) => void; itemsPerPage: number; currentPageItemsCount: number; } From 81fa6ecc13370d7e74484f266636cd8e8418ce4b Mon Sep 17 00:00:00 2001 From: Aswin V Date: Thu, 18 Jan 2024 16:58:13 +0530 Subject: [PATCH 07/60] [ConnectionList] Use component --- src/sso/connections/ConnectionList/index.lite.tsx | 6 ++++++ src/sso/connections/types.ts | 4 ++-- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/sso/connections/ConnectionList/index.lite.tsx b/src/sso/connections/ConnectionList/index.lite.tsx index 3f1f2e453..5c11666c0 100644 --- a/src/sso/connections/ConnectionList/index.lite.tsx +++ b/src/sso/connections/ConnectionList/index.lite.tsx @@ -7,6 +7,7 @@ import defaultClasses from './index.module.css'; import Table from '../../../shared/Table/index.lite'; import { BadgeProps, TableProps } from '../../../shared/types'; import { sendHTTPRequest } from '../../../shared/http'; +import Paginate from '../../../shared/Paginate/index.lite'; const DEFAULT_VALUES = { isSettingsView: false, @@ -142,6 +143,11 @@ export default function ConnectionList(props: ConnectionListProps) { actions={state.actions} {...props.tableProps} /> + props.handleActionClick('pageChange', payload)} + /> diff --git a/src/sso/connections/types.ts b/src/sso/connections/types.ts index 5300c2a4c..de6b0e420 100644 --- a/src/sso/connections/types.ts +++ b/src/sso/connections/types.ts @@ -1,4 +1,4 @@ -import { ConfirmationPromptProps, TableCol, TableProps } from '../../shared/types'; +import { ConfirmationPromptProps, TableCol, TableProps, PaginatePayload } from '../../shared/types'; export interface ConnectionListProps { children?: any; @@ -11,7 +11,7 @@ export interface ConnectionListProps { }; errorCallback?: (errMessage: string) => void; handleListFetchComplete?: (connections: ConnectionData[]) => void; - handleActionClick: (action: 'edit', connection: ConnectionData) => void; + handleActionClick: (action: 'edit' | 'pageChange', payload: ConnectionData | PaginatePayload) => void; /** * Classnames for each inner components that make up the component. */ From 3a6da60e15a126587299c2551222973775baf2c4 Mon Sep 17 00:00:00 2001 From: Aswin V Date: Thu, 18 Jan 2024 16:58:53 +0530 Subject: [PATCH 08/60] [Wrapper] Handle pageChange action --- .../ConnectionsWrapper/index.lite.tsx | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/src/sso/connections/ConnectionsWrapper/index.lite.tsx b/src/sso/connections/ConnectionsWrapper/index.lite.tsx index b8177ada7..7b4942211 100644 --- a/src/sso/connections/ConnectionsWrapper/index.lite.tsx +++ b/src/sso/connections/ConnectionsWrapper/index.lite.tsx @@ -8,6 +8,7 @@ import Button from '../../../shared/Button/index.lite'; import Spacer from '../../../shared/Spacer/index.lite'; import Anchor from '../../../shared/Anchor/index.lite'; import CreateSSOConnection from '../CreateConnection/index.lite'; +import { PaginatePayload } from '../../../shared/types'; const DEFAULT_VALUES = { connectionListData: [] as ConnectionData[], @@ -37,9 +38,17 @@ export default function ConnectionsWrapper(props: ConnectionsWrapperProp) { switchToCreateView() { state.view = 'CREATE'; }, - switchToEditView(action: 'edit', connection: ConnectionData) { - state.view = 'EDIT'; - state.connectionToEdit = connection; + handleConnectionListActionClick( + action: 'edit' | 'pageChange', + payload: ConnectionData | PaginatePayload + ) { + if (action === 'edit') { + state.view = 'EDIT'; + state.connectionToEdit = payload; + } + if (action === 'pageChange') { + // call route change callback + } }, switchToListView() { state.view = 'LIST'; @@ -110,7 +119,7 @@ export default function ConnectionsWrapper(props: ConnectionsWrapperProp) { From c9edc67bb347c17c2a6961b7f12513dcb89ddd0f Mon Sep 17 00:00:00 2001 From: Aswin V Date: Wed, 7 Feb 2024 15:18:56 +0530 Subject: [PATCH 09/60] Update qs using `window.pushState` API --- src/shared/Paginate/index.lite.tsx | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/src/shared/Paginate/index.lite.tsx b/src/shared/Paginate/index.lite.tsx index 436799357..63cba2aa4 100644 --- a/src/shared/Paginate/index.lite.tsx +++ b/src/shared/Paginate/index.lite.tsx @@ -11,11 +11,25 @@ export default function Paginate(props: PaginateProps) { get isNextDisabled() { return props.currentPageItemsCount < props.itemsPerPage; }, + updateURLOffset(newOffset: number) { + // Get the current URL + var url = new URL(window.location.toString()); + + // Set or update the query string parameter + url.searchParams.set('offset', `${newOffset}`); + + // Push the updated URL to the browser history + window.history.pushState({}, '', url); + }, handlePreviousClick() { - props.handlePageChange({ offset: this.itemOffset - props.itemsPerPage }); + const newOffset = this.itemOffset - props.itemsPerPage; + state.updateURLOffset(newOffset); + props.handlePageChange({ offset: newOffset }); }, handleNextClick() { - props.handlePageChange({ offset: this.itemOffset + props.itemsPerPage }); + const newOffset = this.itemOffset + props.itemsPerPage; + state.updateURLOffset(newOffset); + props.handlePageChange({ offset: newOffset }); }, }); From a9d3e641fbf641680b3070525244dc6b13f6d78c Mon Sep 17 00:00:00 2001 From: Aswin V Date: Wed, 7 Feb 2024 15:19:29 +0530 Subject: [PATCH 10/60] Refetch list based on current offset from URL --- .../connections/ConnectionList/index.lite.tsx | 19 ++++++++++++++++--- src/sso/connections/types.ts | 4 ++-- 2 files changed, 18 insertions(+), 5 deletions(-) diff --git a/src/sso/connections/ConnectionList/index.lite.tsx b/src/sso/connections/ConnectionList/index.lite.tsx index 81d8c6711..c369cb93e 100644 --- a/src/sso/connections/ConnectionList/index.lite.tsx +++ b/src/sso/connections/ConnectionList/index.lite.tsx @@ -97,12 +97,21 @@ export default function ConnectionList(props: ConnectionListProps) { urlParams.set('tenant', props.tenant); } } + if (props.product) { urlParams.set('product', props.product); } + if (props.displaySorted) { urlParams.set('sort', 'true'); } + + const currentSearchParams = new URLSearchParams(window.location.search); + const pageOffset = currentSearchParams.get('offset'); + if (pageOffset) { + urlParams.set('offset', pageOffset); + } + if (urlParams.toString()) { return `${urlPath}?${urlParams}`; } @@ -111,6 +120,7 @@ export default function ConnectionList(props: ConnectionListProps) { }); async function getFieldsData(url: string) { + state.isConnectionListLoading = true; const data = await sendHTTPRequest[]>(url); state.isConnectionListLoading = false; @@ -136,8 +146,11 @@ export default function ConnectionList(props: ConnectionListProps) { } } + function reFetch() { + getFieldsData(state.listFetchUrl); + } + onUpdate(() => { - state.isConnectionListLoading = true; getFieldsData(state.listFetchUrl); }, [state.listFetchUrl]); @@ -165,9 +178,9 @@ export default function ConnectionList(props: ConnectionListProps) { {...props.tableProps} /> props.handleActionClick('pageChange', payload)} + handlePageChange={reFetch} /> diff --git a/src/sso/connections/types.ts b/src/sso/connections/types.ts index fd83faa72..5b366a01c 100644 --- a/src/sso/connections/types.ts +++ b/src/sso/connections/types.ts @@ -1,4 +1,4 @@ -import { ConfirmationPromptProps, TableCol, TableProps, PaginatePayload } from '../../shared/types'; +import { ConfirmationPromptProps, TableCol, TableProps } from '../../shared/types'; export interface ConnectionListProps { children?: any; @@ -11,7 +11,7 @@ export interface ConnectionListProps { }; errorCallback?: (errMessage: string) => void; handleListFetchComplete?: (connections: ConnectionData[]) => void; - handleActionClick: (action: 'edit' | 'pageChange', payload: ConnectionData | PaginatePayload) => void; + handleActionClick: (action: 'edit', payload: ConnectionData) => void; /** * Classnames for each inner components that make up the component. */ From 58f5390545269d57526ba20e0c2781bc8ec576ae Mon Sep 17 00:00:00 2001 From: Aswin V Date: Wed, 7 Feb 2024 15:27:59 +0530 Subject: [PATCH 11/60] Rename identifier --- src/sso/connections/ConnectionList/index.lite.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/sso/connections/ConnectionList/index.lite.tsx b/src/sso/connections/ConnectionList/index.lite.tsx index c369cb93e..e45aad986 100644 --- a/src/sso/connections/ConnectionList/index.lite.tsx +++ b/src/sso/connections/ConnectionList/index.lite.tsx @@ -107,9 +107,9 @@ export default function ConnectionList(props: ConnectionListProps) { } const currentSearchParams = new URLSearchParams(window.location.search); - const pageOffset = currentSearchParams.get('offset'); - if (pageOffset) { - urlParams.set('offset', pageOffset); + const itemOffset = currentSearchParams.get('offset'); + if (itemOffset) { + urlParams.set('offset', itemOffset); } if (urlParams.toString()) { From ba4960a9f8db9817ec18924a76b8764f9f97d9f6 Mon Sep 17 00:00:00 2001 From: Aswin V Date: Wed, 7 Feb 2024 15:28:38 +0530 Subject: [PATCH 12/60] Read the offset from the URL on mount --- src/shared/Paginate/index.lite.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/shared/Paginate/index.lite.tsx b/src/shared/Paginate/index.lite.tsx index 63cba2aa4..9fbffb6ce 100644 --- a/src/shared/Paginate/index.lite.tsx +++ b/src/shared/Paginate/index.lite.tsx @@ -1,4 +1,4 @@ -import { useStore } from '@builder.io/mitosis'; +import { onMount, useStore } from '@builder.io/mitosis'; import Button from '../Button/index.lite'; import { PaginateProps } from '../types'; @@ -33,6 +33,14 @@ export default function Paginate(props: PaginateProps) { }, }); + onMount(() => { + const currentSearchParams = new URLSearchParams(window.location.search); + const itemOffset = currentSearchParams.get('offset'); + if (itemOffset) { + state.itemOffset = +itemOffset || 0; + } + }); + return (