From 81ffea9bf0d090824a88c4d88778608e34d13194 Mon Sep 17 00:00:00 2001 From: wobsoriano Date: Mon, 17 Nov 2025 08:46:03 -0800 Subject: [PATCH 1/2] chore: Cherry pick APIKeys naming changes --- packages/clerk-js/sandbox/app.ts | 2 +- packages/clerk-js/src/core/clerk.ts | 4 ++-- packages/react/src/components/uiComponents.tsx | 4 ++-- packages/react/src/isomorphicClerk.ts | 18 +++++++++--------- packages/shared/src/react/hooks/useAPIKeys.ts | 18 +++++++++--------- packages/shared/src/types/clerk.ts | 4 ++-- .../{ApiKeys => APIKeys}/APIKeyModal.tsx | 0 .../ApiKeys.tsx => APIKeys/APIKeys.tsx} | 0 .../{ApiKeys => APIKeys}/ApiKeysTable.tsx | 0 .../{ApiKeys => APIKeys}/CopyAPIKeyModal.tsx | 0 .../CreateAPIKeyForm.tsx} | 0 .../RevokeAPIKeyConfirmationModal.tsx | 0 .../__tests__/APIKeys.spec.tsx} | 2 +- .../components/{ApiKeys => APIKeys}/utils.ts | 0 ...eysPage.tsx => OrganizationAPIKeysPage.tsx} | 2 +- .../OrganizationProfileRoutes.tsx | 2 +- .../{ApiKeysPage.tsx => APIKeysPage.tsx} | 2 +- .../UserProfile/UserProfileRoutes.tsx | 2 +- .../components/{ApiKeys.ts => APIKeys.ts} | 0 packages/ui/src/contexts/components/index.ts | 2 +- 20 files changed, 31 insertions(+), 31 deletions(-) rename packages/ui/src/components/{ApiKeys => APIKeys}/APIKeyModal.tsx (100%) rename packages/ui/src/components/{ApiKeys/ApiKeys.tsx => APIKeys/APIKeys.tsx} (100%) rename packages/ui/src/components/{ApiKeys => APIKeys}/ApiKeysTable.tsx (100%) rename packages/ui/src/components/{ApiKeys => APIKeys}/CopyAPIKeyModal.tsx (100%) rename packages/ui/src/components/{ApiKeys/CreateApiKeyForm.tsx => APIKeys/CreateAPIKeyForm.tsx} (100%) rename packages/ui/src/components/{ApiKeys => APIKeys}/RevokeAPIKeyConfirmationModal.tsx (100%) rename packages/ui/src/components/{ApiKeys/__tests__/ApiKeys.spec.tsx => APIKeys/__tests__/APIKeys.spec.tsx} (98%) rename packages/ui/src/components/{ApiKeys => APIKeys}/utils.ts (100%) rename packages/ui/src/components/OrganizationProfile/{OrganizationApiKeysPage.tsx => OrganizationAPIKeysPage.tsx} (95%) rename packages/ui/src/components/UserProfile/{ApiKeysPage.tsx => APIKeysPage.tsx} (93%) rename packages/ui/src/contexts/components/{ApiKeys.ts => APIKeys.ts} (100%) diff --git a/packages/clerk-js/sandbox/app.ts b/packages/clerk-js/sandbox/app.ts index 6132a5f5025..52ae6a4f4d9 100644 --- a/packages/clerk-js/sandbox/app.ts +++ b/packages/clerk-js/sandbox/app.ts @@ -325,7 +325,7 @@ void (async () => { Clerk.mountPricingTable(app, componentControls.pricingTable.getProps() ?? {}); }, '/api-keys': () => { - Clerk.mountApiKeys(app, componentControls.apiKeys.getProps() ?? {}); + Clerk.mountAPIKeys(app, componentControls.apiKeys.getProps() ?? {}); }, '/oauth-consent': () => { const searchParams = new URLSearchParams(window.location.search); diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts index 701d5e80e31..e21bd1869f3 100644 --- a/packages/clerk-js/src/core/clerk.ts +++ b/packages/clerk-js/src/core/clerk.ts @@ -1204,7 +1204,7 @@ export class Clerk implements ClerkInterface { * @param targetNode Target to mount the APIKeys component. * @param props Configuration parameters. */ - public mountApiKeys = (node: HTMLDivElement, props?: APIKeysProps) => { + public mountAPIKeys = (node: HTMLDivElement, props?: APIKeysProps) => { logger.warnOnce('Clerk: component is in early access and not yet recommended for production use.'); if (disabledAllAPIKeysFeatures(this, this.environment)) { @@ -1258,7 +1258,7 @@ export class Clerk implements ClerkInterface { * * @param targetNode Target node to unmount the ApiKeys component from. */ - public unmountApiKeys = (node: HTMLDivElement) => { + public unmountAPIKeys = (node: HTMLDivElement) => { void this.#clerkUi?.then(ui => ui.ensureMounted()).then(controls => controls.unmountComponent({ node })); }; diff --git a/packages/react/src/components/uiComponents.tsx b/packages/react/src/components/uiComponents.tsx index 08f2268fa24..e1889849582 100644 --- a/packages/react/src/components/uiComponents.tsx +++ b/packages/react/src/components/uiComponents.tsx @@ -628,8 +628,8 @@ export const APIKeys = withClerk( {clerk.loaded && ( , MethodCallback>(); private premountWaitlistNodes = new Map(); private premountPricingTableNodes = new Map(); - private premountApiKeysNodes = new Map(); + private premountAPIKeysNode = new Map(); private premountOAuthConsentNodes = new Map(); private premountTaskChooseOrganizationNodes = new Map(); @@ -661,8 +661,8 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk { clerkjs.mountPricingTable(node, props); }); - this.premountApiKeysNodes.forEach((props, node) => { - clerkjs.mountApiKeys(node, props); + this.premountAPIKeysNode.forEach((props, node) => { + clerkjs.mountAPIKeys(node, props); }); this.premountOAuthConsentNodes.forEach((props, node) => { @@ -1151,19 +1151,19 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk { } }; - mountApiKeys = (node: HTMLDivElement, props?: APIKeysProps): void => { + mountAPIKeys = (node: HTMLDivElement, props?: APIKeysProps): void => { if (this.clerkjs && this.loaded) { - this.clerkjs.mountApiKeys(node, props); + this.clerkjs.mountAPIKeys(node, props); } else { - this.premountApiKeysNodes.set(node, props); + this.premountAPIKeysNode.set(node, props); } }; - unmountApiKeys = (node: HTMLDivElement): void => { + unmountAPIKeys = (node: HTMLDivElement): void => { if (this.clerkjs && this.loaded) { - this.clerkjs.unmountApiKeys(node); + this.clerkjs.unmountAPIKeys(node); } else { - this.premountApiKeysNodes.delete(node); + this.premountAPIKeysNode.delete(node); } }; diff --git a/packages/shared/src/react/hooks/useAPIKeys.ts b/packages/shared/src/react/hooks/useAPIKeys.ts index c090bdf2692..e00dfa13b7f 100644 --- a/packages/shared/src/react/hooks/useAPIKeys.ts +++ b/packages/shared/src/react/hooks/useAPIKeys.ts @@ -9,7 +9,7 @@ import { usePagesOrInfinite, useWithSafeValues } from './usePagesOrInfinite'; /** * @interface */ -export type UseApiKeysParams = PaginatedHookConfig< +export type UseAPIKeysParams = PaginatedHookConfig< GetAPIKeysParams & { /** * If `true`, a request will be triggered when the hook is mounted. @@ -23,19 +23,19 @@ export type UseApiKeysParams = PaginatedHookConfig< /** * @interface */ -export type UseApiKeysReturn = PaginatedResources< +export type UseAPIKeysReturn = PaginatedResources< APIKeyResource, T extends { infinite: true } ? true : false >; /** - * The `useApiKeys()` hook provides access to paginated API keys for the current user or organization. + * The `useAPIKeys()` hook provides access to paginated API keys for the current user or organization. * * @example * ### Basic usage with default pagination * * ```tsx - * const { data, isLoading, page, pageCount, fetchNext, fetchPrevious } = useApiKeys({ + * const { data, isLoading, page, pageCount, fetchNext, fetchPrevious } = useAPIKeys({ * subject: 'user_123', * pageSize: 10, * initialPage: 1, @@ -49,7 +49,7 @@ export type UseApiKeysReturn = PaginatedResources< * const [searchValue, setSearchValue] = useState(''); * const debouncedSearch = useDebounce(searchValue, 500); * - * const { data, isLoading } = useApiKeys({ + * const { data, isLoading } = useAPIKeys({ * subject: 'user_123', * query: debouncedSearch.trim(), * pageSize: 10, @@ -60,13 +60,13 @@ export type UseApiKeysReturn = PaginatedResources< * ### Infinite scroll * * ```tsx - * const { data, isLoading, fetchNext, hasNextPage } = useApiKeys({ + * const { data, isLoading, fetchNext, hasNextPage } = useAPIKeys({ * subject: 'user_123', * infinite: true, * }); * ``` */ -export function useApiKeys(params?: T): UseApiKeysReturn { +export function useApiKeys(params?: T): UseAPIKeysReturn { useAssertWrappedByClerkProvider('useApiKeys'); const safeValues = useWithSafeValues(params, { @@ -77,7 +77,7 @@ export function useApiKeys(params?: T): UseApiKeysRe subject: '', query: '', enabled: true, - } as UseApiKeysParams); + } as UseAPIKeysParams); const clerk = useClerkInstanceContext(); @@ -104,5 +104,5 @@ export function useApiKeys(params?: T): UseApiKeysRe type: 'apiKeys', subject: safeValues.subject || '', }, - ) as UseApiKeysReturn; + ) as UseAPIKeysReturn; } diff --git a/packages/shared/src/types/clerk.ts b/packages/shared/src/types/clerk.ts index 619acc43070..3c1de594f51 100644 --- a/packages/shared/src/types/clerk.ts +++ b/packages/shared/src/types/clerk.ts @@ -585,7 +585,7 @@ export interface Clerk { * @param targetNode - Target to mount the APIKeys component. * @param props - Configuration parameters. */ - mountApiKeys: (targetNode: HTMLDivElement, props?: APIKeysProps) => void; + mountAPIKeys: (targetNode: HTMLDivElement, props?: APIKeysProps) => void; /** * This API is in early access and may change in future releases. @@ -597,7 +597,7 @@ export interface Clerk { * * @param targetNode - Target node to unmount the ApiKeys component from. */ - unmountApiKeys: (targetNode: HTMLDivElement) => void; + unmountAPIKeys: (targetNode: HTMLDivElement) => void; /** * Mounts a OAuth consent component at the target element. diff --git a/packages/ui/src/components/ApiKeys/APIKeyModal.tsx b/packages/ui/src/components/APIKeys/APIKeyModal.tsx similarity index 100% rename from packages/ui/src/components/ApiKeys/APIKeyModal.tsx rename to packages/ui/src/components/APIKeys/APIKeyModal.tsx diff --git a/packages/ui/src/components/ApiKeys/ApiKeys.tsx b/packages/ui/src/components/APIKeys/APIKeys.tsx similarity index 100% rename from packages/ui/src/components/ApiKeys/ApiKeys.tsx rename to packages/ui/src/components/APIKeys/APIKeys.tsx diff --git a/packages/ui/src/components/ApiKeys/ApiKeysTable.tsx b/packages/ui/src/components/APIKeys/ApiKeysTable.tsx similarity index 100% rename from packages/ui/src/components/ApiKeys/ApiKeysTable.tsx rename to packages/ui/src/components/APIKeys/ApiKeysTable.tsx diff --git a/packages/ui/src/components/ApiKeys/CopyAPIKeyModal.tsx b/packages/ui/src/components/APIKeys/CopyAPIKeyModal.tsx similarity index 100% rename from packages/ui/src/components/ApiKeys/CopyAPIKeyModal.tsx rename to packages/ui/src/components/APIKeys/CopyAPIKeyModal.tsx diff --git a/packages/ui/src/components/ApiKeys/CreateApiKeyForm.tsx b/packages/ui/src/components/APIKeys/CreateAPIKeyForm.tsx similarity index 100% rename from packages/ui/src/components/ApiKeys/CreateApiKeyForm.tsx rename to packages/ui/src/components/APIKeys/CreateAPIKeyForm.tsx diff --git a/packages/ui/src/components/ApiKeys/RevokeAPIKeyConfirmationModal.tsx b/packages/ui/src/components/APIKeys/RevokeAPIKeyConfirmationModal.tsx similarity index 100% rename from packages/ui/src/components/ApiKeys/RevokeAPIKeyConfirmationModal.tsx rename to packages/ui/src/components/APIKeys/RevokeAPIKeyConfirmationModal.tsx diff --git a/packages/ui/src/components/ApiKeys/__tests__/ApiKeys.spec.tsx b/packages/ui/src/components/APIKeys/__tests__/APIKeys.spec.tsx similarity index 98% rename from packages/ui/src/components/ApiKeys/__tests__/ApiKeys.spec.tsx rename to packages/ui/src/components/APIKeys/__tests__/APIKeys.spec.tsx index 2f3dbce9082..b6e0a847c24 100644 --- a/packages/ui/src/components/ApiKeys/__tests__/ApiKeys.spec.tsx +++ b/packages/ui/src/components/APIKeys/__tests__/APIKeys.spec.tsx @@ -3,7 +3,7 @@ import { describe, expect, it, vi } from 'vitest'; import { bindCreateFixtures } from '@/test/create-fixtures'; import { render, waitFor } from '@/test/utils'; -import { APIKeys } from '../ApiKeys'; +import { APIKeys } from '../APIKeys'; const { createFixtures } = bindCreateFixtures('APIKeys'); diff --git a/packages/ui/src/components/ApiKeys/utils.ts b/packages/ui/src/components/APIKeys/utils.ts similarity index 100% rename from packages/ui/src/components/ApiKeys/utils.ts rename to packages/ui/src/components/APIKeys/utils.ts diff --git a/packages/ui/src/components/OrganizationProfile/OrganizationApiKeysPage.tsx b/packages/ui/src/components/OrganizationProfile/OrganizationAPIKeysPage.tsx similarity index 95% rename from packages/ui/src/components/OrganizationProfile/OrganizationApiKeysPage.tsx rename to packages/ui/src/components/OrganizationProfile/OrganizationAPIKeysPage.tsx index b62a6f90fc3..aa661a2e38d 100644 --- a/packages/ui/src/components/OrganizationProfile/OrganizationApiKeysPage.tsx +++ b/packages/ui/src/components/OrganizationProfile/OrganizationAPIKeysPage.tsx @@ -5,7 +5,7 @@ import { Col, localizationKeys } from '@/ui/customizables'; import { Header } from '@/ui/elements/Header'; import { useUnsafeNavbarContext } from '@/ui/elements/Navbar'; -import { APIKeysPage } from '../ApiKeys/ApiKeys'; +import { APIKeysPage } from '../APIKeys/APIKeys'; export const OrganizationAPIKeysPage = () => { const { organization } = useOrganization(); diff --git a/packages/ui/src/components/OrganizationProfile/OrganizationProfileRoutes.tsx b/packages/ui/src/components/OrganizationProfile/OrganizationProfileRoutes.tsx index 40600731fa3..22588a8588b 100644 --- a/packages/ui/src/components/OrganizationProfile/OrganizationProfileRoutes.tsx +++ b/packages/ui/src/components/OrganizationProfile/OrganizationProfileRoutes.tsx @@ -14,7 +14,7 @@ const OrganizationBillingPage = lazy(() => ); const OrganizationAPIKeysPage = lazy(() => - import(/* webpackChunkName: "op-api-keys-page"*/ './OrganizationApiKeysPage').then(module => ({ + import(/* webpackChunkName: "op-api-keys-page"*/ './OrganizationAPIKeysPage').then(module => ({ default: module.OrganizationAPIKeysPage, })), ); diff --git a/packages/ui/src/components/UserProfile/ApiKeysPage.tsx b/packages/ui/src/components/UserProfile/APIKeysPage.tsx similarity index 93% rename from packages/ui/src/components/UserProfile/ApiKeysPage.tsx rename to packages/ui/src/components/UserProfile/APIKeysPage.tsx index 630220d7750..98d64d2bcb0 100644 --- a/packages/ui/src/components/UserProfile/ApiKeysPage.tsx +++ b/packages/ui/src/components/UserProfile/APIKeysPage.tsx @@ -5,7 +5,7 @@ import { Col, descriptors, localizationKeys } from '@/ui/customizables'; import { Header } from '@/ui/elements/Header'; import { useUnsafeNavbarContext } from '@/ui/elements/Navbar'; -import { APIKeysPage as APIKeysPageInternal } from '../ApiKeys/ApiKeys'; +import { APIKeysPage as APIKeysPageInternal } from '../APIKeys/APIKeys'; export const APIKeysPage = () => { const { user } = useUser(); diff --git a/packages/ui/src/components/UserProfile/UserProfileRoutes.tsx b/packages/ui/src/components/UserProfile/UserProfileRoutes.tsx index edce7308bed..cf9899370af 100644 --- a/packages/ui/src/components/UserProfile/UserProfileRoutes.tsx +++ b/packages/ui/src/components/UserProfile/UserProfileRoutes.tsx @@ -14,7 +14,7 @@ const BillingPage = lazy(() => ); const APIKeysPage = lazy(() => - import(/* webpackChunkName: "up-api-keys-page"*/ './ApiKeysPage').then(module => ({ + import(/* webpackChunkName: "up-api-keys-page"*/ './APIKeysPage').then(module => ({ default: module.APIKeysPage, })), ); diff --git a/packages/ui/src/contexts/components/ApiKeys.ts b/packages/ui/src/contexts/components/APIKeys.ts similarity index 100% rename from packages/ui/src/contexts/components/ApiKeys.ts rename to packages/ui/src/contexts/components/APIKeys.ts diff --git a/packages/ui/src/contexts/components/index.ts b/packages/ui/src/contexts/components/index.ts index 3afdda296bf..4242c494ad6 100644 --- a/packages/ui/src/contexts/components/index.ts +++ b/packages/ui/src/contexts/components/index.ts @@ -1,4 +1,4 @@ -export * from './ApiKeys'; +export * from './APIKeys'; export * from './Checkout'; export * from './CreateOrganization'; export * from './GoogleOneTap'; From 204cd4a1b2ec0c7fd547c77f7dc78af61101fcd8 Mon Sep 17 00:00:00 2001 From: wobsoriano Date: Mon, 17 Nov 2025 08:51:40 -0800 Subject: [PATCH 2/2] import fix --- packages/ui/src/components/APIKeys/APIKeys.tsx | 4 ++-- packages/ui/src/lazyModules/components.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/ui/src/components/APIKeys/APIKeys.tsx b/packages/ui/src/components/APIKeys/APIKeys.tsx index 4186cfb93e1..b191c0c7f87 100644 --- a/packages/ui/src/components/APIKeys/APIKeys.tsx +++ b/packages/ui/src/components/APIKeys/APIKeys.tsx @@ -27,8 +27,8 @@ import { MagnifyingGlass } from '@/ui/icons'; import { mqu } from '@/ui/styledSystem'; import { APIKeysTable } from './ApiKeysTable'; -import type { OnCreateParams } from './CreateApiKeyForm'; -import { CreateAPIKeyForm } from './CreateApiKeyForm'; +import type { OnCreateParams } from './CreateAPIKeyForm'; +import { CreateAPIKeyForm } from './CreateAPIKeyForm'; import { useAPIKeysPagination } from './utils'; type APIKeysPageProps = { diff --git a/packages/ui/src/lazyModules/components.ts b/packages/ui/src/lazyModules/components.ts index 727627e16dc..3a5ecee7a9c 100644 --- a/packages/ui/src/lazyModules/components.ts +++ b/packages/ui/src/lazyModules/components.ts @@ -25,7 +25,7 @@ const componentImportPaths = { import(/* webpackChunkName: "taskChooseOrganization" */ '../components/SessionTasks/tasks/TaskChooseOrganization'), PlanDetails: () => import(/* webpackChunkName: "planDetails" */ '../components/Plans/PlanDetails'), SubscriptionDetails: () => import(/* webpackChunkName: "subscriptionDetails" */ '../components/SubscriptionDetails'), - APIKeys: () => import(/* webpackChunkName: "apiKeys" */ '../components/ApiKeys/ApiKeys'), + APIKeys: () => import(/* webpackChunkName: "apiKeys" */ '../components/APIKeys/APIKeys'), OAuthConsent: () => import(/* webpackChunkName: "oauthConsent" */ '../components/OAuthConsent/OAuthConsent'), } as const;