From 3d1f054b8746ed1428d5407ef909da2c53a96055 Mon Sep 17 00:00:00 2001 From: Scott Wilson Date: Thu, 26 Jun 2025 08:13:57 -0700 Subject: [PATCH 1/2] improvement: add pagination/search to secret sync selection --- .../secret-syncs/CreateSecretSyncModal.tsx | 1 + .../secret-syncs/SecretSyncSelect.tsx | 183 +++++++++++------- 2 files changed, 117 insertions(+), 67 deletions(-) diff --git a/frontend/src/components/secret-syncs/CreateSecretSyncModal.tsx b/frontend/src/components/secret-syncs/CreateSecretSyncModal.tsx index 68866dcbd..7bae0479f 100644 --- a/frontend/src/components/secret-syncs/CreateSecretSyncModal.tsx +++ b/frontend/src/components/secret-syncs/CreateSecretSyncModal.tsx @@ -58,6 +58,7 @@ export const CreateSecretSyncModal = ({ onOpenChange, selectSync = null, ...prop } onPointerDownOutside={(e) => e.preventDefault()} className="max-w-2xl" + bodyClassName="overflow-visible" subTitle={selectedSync ? undefined : "Select a third-party service to sync secrets to."} > { const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["upgradePlan"] as const); + const { search, setSearch, setPage, page, perPage, setPerPage, offset } = usePagination("", { + initPerPage: 16 + }); + + const filteredOptions = useMemo( + () => + secretSyncOptions?.filter( + ({ name, destination }) => + name?.toLowerCase().includes(search.trim().toLowerCase()) || + destination.toLowerCase().includes(search.toLowerCase()) + ) ?? [], + [secretSyncOptions, search] + ); + + useResetPageHelper({ + totalCount: filteredOptions.length, + offset, + setPage + }); + if (isPending) { return (
@@ -29,75 +50,103 @@ export const SecretSyncSelect = ({ onSelect }: Props) => { } return ( -
- {secretSyncOptions?.map(({ destination, enterprise }) => { - const { image, name } = SECRET_SYNC_MAP[destination]; - return ( - - ); - })} +
+ setSearch(e.target.value)} + leftIcon={} + placeholder="Search options..." + className="bg-mineshaft-800 placeholder:text-mineshaft-400" + /> +
+ {filteredOptions.slice(offset, perPage * page)?.map(({ destination, enterprise }) => { + const { image, name } = SECRET_SYNC_MAP[destination]; + return ( + + ); + })} + {!filteredOptions?.length && ( + + )} +
+ {Boolean(filteredOptions.length) && ( + +

Infisical is constantly adding support for more services.

+

+ {`If you don't see the third-party + service you're looking for,`}{" "} + + let us know on Slack + {" "} + or{" "} + + make a request on GitHub + + . +

+ + } + > +
+ + Don't see the third-party service you're looking for? + + +
+ + } + count={filteredOptions.length} + page={page} + perPage={perPage} + onChangePage={setPage} + onChangePerPage={setPerPage} + perPageList={[16]} + /> + )} handlePopUpToggle("upgradePlan", isOpen)} text="You can use every Secret Sync if you switch to Infisical's Enterprise plan." /> - -

Infisical is constantly adding support for more services.

-

- {`If you don't see the third-party - service you're looking for,`}{" "} - - let us know on Slack - {" "} - or{" "} - - make a request on GitHub - - . -

- - } - > -
- -
- Coming Soon -
-
-
); }; From 8ab51aba12602d43a4c373b40b876c2de96cdfc3 Mon Sep 17 00:00:00 2001 From: Scott Wilson Date: Thu, 26 Jun 2025 09:21:35 -0700 Subject: [PATCH 2/2] improvement: add search/pagination app connection select --- .../components/AppConnectionList.tsx | 207 +++++++++++------- 1 file changed, 131 insertions(+), 76 deletions(-) diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionList.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionList.tsx index 1f11ce363..2087ebf63 100644 --- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionList.tsx +++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionList.tsx @@ -1,11 +1,12 @@ -import { faWrench } from "@fortawesome/free-solid-svg-icons"; +import { useMemo } from "react"; +import { faInfoCircle, faMagnifyingGlass, faSearch } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal"; -import { Spinner, Tooltip } from "@app/components/v2"; +import { EmptyState, Input, Pagination, Spinner, Tooltip } from "@app/components/v2"; import { useSubscription } from "@app/context"; import { APP_CONNECTION_MAP } from "@app/helpers/appConnections"; -import { usePopUp } from "@app/hooks"; +import { usePagination, usePopUp, useResetPageHelper } from "@app/hooks"; import { useAppConnectionOptions } from "@app/hooks/api/appConnections"; import { AppConnection } from "@app/hooks/api/appConnections/enums"; @@ -19,6 +20,26 @@ export const AppConnectionsSelect = ({ onSelect }: Props) => { const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["upgradePlan"] as const); + const { search, setSearch, setPage, page, perPage, setPerPage, offset } = usePagination("", { + initPerPage: 16 + }); + + const filteredOptions = useMemo( + () => + appConnectionOptions?.filter( + ({ name, app }) => + name?.toLowerCase().includes(search.trim().toLowerCase()) || + app.toLowerCase().includes(search.toLowerCase()) + ) ?? [], + [appConnectionOptions, search] + ); + + useResetPageHelper({ + totalCount: filteredOptions.length, + offset, + setPage + }); + if (isPending) { return (
@@ -29,86 +50,120 @@ export const AppConnectionsSelect = ({ onSelect }: Props) => { } return ( -
- {appConnectionOptions?.map((option) => { - const { image, name, size = 50, enterprise = false, icon } = APP_CONNECTION_MAP[option.app]; +
+ setSearch(e.target.value)} + leftIcon={} + placeholder="Search options..." + className="bg-mineshaft-800 placeholder:text-mineshaft-400" + /> +
+ {filteredOptions.slice(offset, perPage * page)?.map((option) => { + const { + image, + name, + size = 50, + enterprise = false, + icon + } = APP_CONNECTION_MAP[option.app]; - return ( - - ); - })} + {icon && ( + + )} +
+
+ {name} +
+ + ); + })} + {!filteredOptions?.length && ( + + )} +
+ {Boolean(filteredOptions.length) && ( + +

Infisical is constantly adding support for more services.

+

+ {`If you don't see the third-party + service you're looking for,`}{" "} + + let us know on Slack + {" "} + or{" "} + + make a request on GitHub + + . +

+ + } + > +
+ + Don't see the third-party service you're looking for? + + +
+ + } + count={filteredOptions.length} + page={page} + perPage={perPage} + onChangePage={setPage} + onChangePerPage={setPerPage} + perPageList={[16]} + /> + )} handlePopUpToggle("upgradePlan", isOpen)} text="You can use every App Connection if you switch to Infisical's Enterprise plan." /> - -

Infisical is constantly adding support for more connections.

-

- {`If you don't see the third-party - app you're looking for,`}{" "} - - let us know on Slack - {" "} - or{" "} - - make a request on GitHub - - . -

- - } - > -
- -
- Coming Soon -
-
-
); };