From 402d53a5fcd22b34035115871921c43c8b202cb2 Mon Sep 17 00:00:00 2001 From: wobsoriano Date: Sun, 9 Nov 2025 08:26:56 -0800 Subject: [PATCH 1/7] chore: Standardize API keys naming convention --- .../src/ui/components/ApiKeys/ApiKeys.tsx | 10 ++++----- .../ApiKeys/RevokeAPIKeyConfirmationModal.tsx | 8 +++---- .../ApiKeys/__tests__/ApiKeys.spec.tsx | 2 +- ...ysPage.tsx => OrganizationAPIKeysPage.tsx} | 2 +- .../OrganizationProfileRoutes.tsx | 6 ++--- .../{ApiKeysPage.tsx => APIKeysPage.tsx} | 2 +- .../UserProfile/UserProfileRoutes.tsx | 2 +- .../components/{ApiKeys.ts => APIKeys.ts} | 0 .../components/OrganizationProfile.ts | 6 ++--- .../src/ui/contexts/components/index.ts | 2 +- .../clerk-js/src/ui/lazyModules/components.ts | 2 +- packages/shared/src/react/hooks/index.ts | 2 +- packages/shared/src/react/hooks/useAPIKeys.ts | 22 +++++++++---------- 13 files changed, 33 insertions(+), 33 deletions(-) rename packages/clerk-js/src/ui/components/OrganizationProfile/{OrganizationApiKeysPage.tsx => OrganizationAPIKeysPage.tsx} (95%) rename packages/clerk-js/src/ui/components/UserProfile/{ApiKeysPage.tsx => APIKeysPage.tsx} (93%) rename packages/clerk-js/src/ui/contexts/components/{ApiKeys.ts => APIKeys.ts} (100%) diff --git a/packages/clerk-js/src/ui/components/ApiKeys/ApiKeys.tsx b/packages/clerk-js/src/ui/components/ApiKeys/ApiKeys.tsx index 69745647cec..0965efec9c7 100644 --- a/packages/clerk-js/src/ui/components/ApiKeys/ApiKeys.tsx +++ b/packages/clerk-js/src/ui/components/ApiKeys/ApiKeys.tsx @@ -101,7 +101,7 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr } = useSWRMutation('api-keys-create', (_key, { arg }: { arg: CreateAPIKeyParams }) => clerk.apiKeys.create(arg)); const { t } = useLocalizations(); const [isRevokeModalOpen, setIsRevokeModalOpen] = useState(false); - const [selectedApiKeyId, setSelectedApiKeyId] = useState(''); + const [selectedAPIKeyID, setSelectedAPIKeyID] = useState(''); const [selectedApiKeyName, setSelectedApiKeyName] = useState(''); const [isCopyModalOpen, setIsCopyModalOpen] = useState(false); @@ -123,8 +123,8 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr } }; - const handleRevoke = (apiKeyId: string, apiKeyName: string) => { - setSelectedApiKeyId(apiKeyId); + const handleRevoke = (apiKeyID: string, apiKeyName: string) => { + setSelectedAPIKeyID(apiKeyID); setSelectedApiKeyName(apiKeyName); setIsRevokeModalOpen(true); }; @@ -220,11 +220,11 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr isOpen={isRevokeModalOpen} onOpen={() => setIsRevokeModalOpen(true)} onClose={() => { - setSelectedApiKeyId(''); + setSelectedAPIKeyID(''); setSelectedApiKeyName(''); setIsRevokeModalOpen(false); }} - apiKeyId={selectedApiKeyId} + apiKeyID={selectedAPIKeyID} apiKeyName={selectedApiKeyName} onRevokeSuccess={invalidateAll} modalRoot={revokeModalRoot} diff --git a/packages/clerk-js/src/ui/components/ApiKeys/RevokeAPIKeyConfirmationModal.tsx b/packages/clerk-js/src/ui/components/ApiKeys/RevokeAPIKeyConfirmationModal.tsx index 50768f3c1c3..a8aa6e1d6fb 100644 --- a/packages/clerk-js/src/ui/components/ApiKeys/RevokeAPIKeyConfirmationModal.tsx +++ b/packages/clerk-js/src/ui/components/ApiKeys/RevokeAPIKeyConfirmationModal.tsx @@ -14,7 +14,7 @@ type RevokeAPIKeyConfirmationModalProps = { isOpen: boolean; onOpen: () => void; onClose: () => void; - apiKeyId?: string; + apiKeyID?: string; apiKeyName: string; onRevokeSuccess?: () => void; modalRoot?: React.MutableRefObject; @@ -24,7 +24,7 @@ export const RevokeAPIKeyConfirmationModal = ({ isOpen, onOpen, onClose, - apiKeyId, + apiKeyID, apiKeyName, onRevokeSuccess, modalRoot, @@ -48,11 +48,11 @@ export const RevokeAPIKeyConfirmationModal = ({ const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); - if (!apiKeyId || !canSubmit) { + if (!apiKeyID || !canSubmit) { return; } - await clerk.apiKeys.revoke({ apiKeyID: apiKeyId }); + await clerk.apiKeys.revoke({ apiKeyID: apiKeyID }); onRevokeSuccess?.(); handleClose(); }; diff --git a/packages/clerk-js/src/ui/components/ApiKeys/__tests__/ApiKeys.spec.tsx b/packages/clerk-js/src/ui/components/ApiKeys/__tests__/ApiKeys.spec.tsx index 2f3dbce9082..b6e0a847c24 100644 --- a/packages/clerk-js/src/ui/components/ApiKeys/__tests__/ApiKeys.spec.tsx +++ b/packages/clerk-js/src/ui/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/clerk-js/src/ui/components/OrganizationProfile/OrganizationApiKeysPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationAPIKeysPage.tsx similarity index 95% rename from packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationApiKeysPage.tsx rename to packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationAPIKeysPage.tsx index b62a6f90fc3..aa661a2e38d 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationApiKeysPage.tsx +++ b/packages/clerk-js/src/ui/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/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx index 62f5a72dfc0..31eb09f7290 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx +++ b/packages/clerk-js/src/ui/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, })), ); @@ -38,7 +38,7 @@ const OrganizationPaymentAttemptPage = lazy(() => ); export const OrganizationProfileRoutes = () => { - const { pages, isMembersPageRoot, isGeneralPageRoot, isBillingPageRoot, isApiKeysPageRoot, shouldShowBilling } = + const { pages, isMembersPageRoot, isGeneralPageRoot, isBillingPageRoot, isAPIKeysPageRoot, shouldShowBilling } = useOrganizationProfileContext(); const { apiKeysSettings, commerceSettings } = useEnvironment(); @@ -123,7 +123,7 @@ export const OrganizationProfileRoutes = () => { has({ permission: 'org:sys_api_keys:read' }) || has({ permission: 'org:sys_api_keys:manage' }) } > - + diff --git a/packages/clerk-js/src/ui/components/UserProfile/ApiKeysPage.tsx b/packages/clerk-js/src/ui/components/UserProfile/APIKeysPage.tsx similarity index 93% rename from packages/clerk-js/src/ui/components/UserProfile/ApiKeysPage.tsx rename to packages/clerk-js/src/ui/components/UserProfile/APIKeysPage.tsx index 630220d7750..98d64d2bcb0 100644 --- a/packages/clerk-js/src/ui/components/UserProfile/ApiKeysPage.tsx +++ b/packages/clerk-js/src/ui/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/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsx b/packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsx index b137da3d65c..9350c54f29a 100644 --- a/packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsx +++ b/packages/clerk-js/src/ui/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/clerk-js/src/ui/contexts/components/ApiKeys.ts b/packages/clerk-js/src/ui/contexts/components/APIKeys.ts similarity index 100% rename from packages/clerk-js/src/ui/contexts/components/ApiKeys.ts rename to packages/clerk-js/src/ui/contexts/components/APIKeys.ts diff --git a/packages/clerk-js/src/ui/contexts/components/OrganizationProfile.ts b/packages/clerk-js/src/ui/contexts/components/OrganizationProfile.ts index 26bdce3ec93..b1210adb29d 100644 --- a/packages/clerk-js/src/ui/contexts/components/OrganizationProfile.ts +++ b/packages/clerk-js/src/ui/contexts/components/OrganizationProfile.ts @@ -24,7 +24,7 @@ export type OrganizationProfileContextType = OrganizationProfileCtx & { isMembersPageRoot: boolean; isGeneralPageRoot: boolean; isBillingPageRoot: boolean; - isApiKeysPageRoot: boolean; + isAPIKeysPageRoot: boolean; shouldShowBilling: boolean; }; @@ -67,7 +67,7 @@ export const useOrganizationProfileContext = (): OrganizationProfileContextType const isMembersPageRoot = pages.routes[0].id === ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID.MEMBERS; const isGeneralPageRoot = pages.routes[0].id === ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID.GENERAL; const isBillingPageRoot = pages.routes[0].id === ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID.BILLING; - const isApiKeysPageRoot = pages.routes[0].id === ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID.API_KEYS; + const isAPIKeysPageRoot = pages.routes[0].id === ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID.API_KEYS; const navigateToGeneralPageRoot = () => navigate(isGeneralPageRoot ? '../' : isMembersPageRoot ? './organization-general' : '../organization-general'); @@ -80,7 +80,7 @@ export const useOrganizationProfileContext = (): OrganizationProfileContextType isMembersPageRoot, isGeneralPageRoot, isBillingPageRoot, - isApiKeysPageRoot, + isAPIKeysPageRoot, shouldShowBilling, }; }; diff --git a/packages/clerk-js/src/ui/contexts/components/index.ts b/packages/clerk-js/src/ui/contexts/components/index.ts index 3afdda296bf..4242c494ad6 100644 --- a/packages/clerk-js/src/ui/contexts/components/index.ts +++ b/packages/clerk-js/src/ui/contexts/components/index.ts @@ -1,4 +1,4 @@ -export * from './ApiKeys'; +export * from './APIKeys'; export * from './Checkout'; export * from './CreateOrganization'; export * from './GoogleOneTap'; diff --git a/packages/clerk-js/src/ui/lazyModules/components.ts b/packages/clerk-js/src/ui/lazyModules/components.ts index 727627e16dc..3a5ecee7a9c 100644 --- a/packages/clerk-js/src/ui/lazyModules/components.ts +++ b/packages/clerk-js/src/ui/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; diff --git a/packages/shared/src/react/hooks/index.ts b/packages/shared/src/react/hooks/index.ts index 0335631c3be..a3774cddeb3 100644 --- a/packages/shared/src/react/hooks/index.ts +++ b/packages/shared/src/react/hooks/index.ts @@ -1,5 +1,5 @@ export { assertContextExists, createContextAndHook } from './createContextAndHook'; -export { useApiKeys as __experimental_useAPIKeys } from './useAPIKeys'; +export { useAPIKeys as __experimental_useAPIKeys } from './useAPIKeys'; export { useOrganization } from './useOrganization'; export { useOrganizationList } from './useOrganizationList'; export { useSafeLayoutEffect } from './useSafeLayoutEffect'; diff --git a/packages/shared/src/react/hooks/useAPIKeys.ts b/packages/shared/src/react/hooks/useAPIKeys.ts index c090bdf2692..86a4ab39c6e 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,14 +60,14 @@ 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 { - useAssertWrappedByClerkProvider('useApiKeys'); +export function useAPIKeys(params?: T): UseAPIKeysReturn { + useAssertWrappedByClerkProvider('useAPIKeys'); const safeValues = useWithSafeValues(params, { initialPage: 1, @@ -77,11 +77,11 @@ export function useApiKeys(params?: T): UseApiKeysRe subject: '', query: '', enabled: true, - } as UseApiKeysParams); + } as UseAPIKeysParams); const clerk = useClerkInstanceContext(); - clerk.telemetry?.record(eventMethodCalled('useApiKeys')); + clerk.telemetry?.record(eventMethodCalled('useAPIKeys')); const hookParams: GetAPIKeysParams = { initialPage: safeValues.initialPage, @@ -104,5 +104,5 @@ export function useApiKeys(params?: T): UseApiKeysRe type: 'apiKeys', subject: safeValues.subject || '', }, - ) as UseApiKeysReturn; + ) as UseAPIKeysReturn; } From 066a26817b0c04a602dd05474fd57de4f04b9196 Mon Sep 17 00:00:00 2001 From: wobsoriano Date: Fri, 14 Nov 2025 15:11:47 -0800 Subject: [PATCH 2/7] chore: Rename mounting functions --- 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/types/clerk.ts | 4 ++-- 5 files changed, 16 insertions(+), 16 deletions(-) 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 b59a646623a..a56d6cda687 100644 --- a/packages/clerk-js/src/core/clerk.ts +++ b/packages/clerk-js/src/core/clerk.ts @@ -1230,7 +1230,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) => { this.assertComponentsReady(this.#componentControls); logger.warnOnce('Clerk: component is in early access and not yet recommended for production use.'); @@ -1282,7 +1282,7 @@ export class Clerk implements ClerkInterface { * * @param targetNode Target node to unmount the ApiKeys component from. */ - public unmountApiKeys = (node: HTMLDivElement) => { + public unmountAPIKeys = (node: HTMLDivElement) => { this.assertComponentsReady(this.#componentControls); void this.#componentControls.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(); @@ -656,8 +656,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) => { @@ -1146,19 +1146,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/types/clerk.ts b/packages/shared/src/types/clerk.ts index a05f935fcfa..b37e7d0a8a8 100644 --- a/packages/shared/src/types/clerk.ts +++ b/packages/shared/src/types/clerk.ts @@ -583,7 +583,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. @@ -595,7 +595,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. From d646721722941b9d5d9294b14a7997b086a79ffd Mon Sep 17 00:00:00 2001 From: Robert Soriano Date: Fri, 14 Nov 2025 16:40:19 -0800 Subject: [PATCH 3/7] chore: add changeset --- .changeset/brown-bags-fold.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/brown-bags-fold.md diff --git a/.changeset/brown-bags-fold.md b/.changeset/brown-bags-fold.md new file mode 100644 index 00000000000..eabccf6c9b7 --- /dev/null +++ b/.changeset/brown-bags-fold.md @@ -0,0 +1,7 @@ +--- +"@clerk/clerk-js": minor +"@clerk/clerk-react": minor +"@clerk/shared": minor +--- + +Standardized API keys naming convention From a994bf5cbf3bb26ce94cfd5638a91f59995f17ac Mon Sep 17 00:00:00 2001 From: wobsoriano Date: Fri, 14 Nov 2025 16:50:23 -0800 Subject: [PATCH 4/7] fix naming --- .../src/ui/components/ApiKeys/{ApiKeys.tsx => APIKeys.tsx} | 0 .../ApiKeys/__tests__/{ApiKeys.spec.tsx => APIKeys.spec.tsx} | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename packages/clerk-js/src/ui/components/ApiKeys/{ApiKeys.tsx => APIKeys.tsx} (100%) rename packages/clerk-js/src/ui/components/ApiKeys/__tests__/{ApiKeys.spec.tsx => APIKeys.spec.tsx} (100%) diff --git a/packages/clerk-js/src/ui/components/ApiKeys/ApiKeys.tsx b/packages/clerk-js/src/ui/components/ApiKeys/APIKeys.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/ApiKeys/ApiKeys.tsx rename to packages/clerk-js/src/ui/components/ApiKeys/APIKeys.tsx diff --git a/packages/clerk-js/src/ui/components/ApiKeys/__tests__/ApiKeys.spec.tsx b/packages/clerk-js/src/ui/components/ApiKeys/__tests__/APIKeys.spec.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/ApiKeys/__tests__/ApiKeys.spec.tsx rename to packages/clerk-js/src/ui/components/ApiKeys/__tests__/APIKeys.spec.tsx From b827ee5eaac1838123b3f56f8969ceca2c7e384a Mon Sep 17 00:00:00 2001 From: wobsoriano Date: Fri, 14 Nov 2025 16:51:24 -0800 Subject: [PATCH 5/7] chore: use plural in nodes --- packages/react/src/isomorphicClerk.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react/src/isomorphicClerk.ts b/packages/react/src/isomorphicClerk.ts index 7dbd765cacc..bb0ffd1633c 100644 --- a/packages/react/src/isomorphicClerk.ts +++ b/packages/react/src/isomorphicClerk.ts @@ -143,7 +143,7 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk { private premountMethodCalls = new Map, MethodCallback>(); private premountWaitlistNodes = new Map(); private premountPricingTableNodes = new Map(); - private premountAPIKeysNode = new Map(); + private premountAPIKeysNodes = new Map(); private premountOAuthConsentNodes = new Map(); private premountTaskChooseOrganizationNodes = new Map(); @@ -656,7 +656,7 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk { clerkjs.mountPricingTable(node, props); }); - this.premountAPIKeysNode.forEach((props, node) => { + this.premountAPIKeysNodes.forEach((props, node) => { clerkjs.mountAPIKeys(node, props); }); @@ -1150,7 +1150,7 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk { if (this.clerkjs && this.loaded) { this.clerkjs.mountAPIKeys(node, props); } else { - this.premountAPIKeysNode.set(node, props); + this.premountAPIKeysNodes.set(node, props); } }; @@ -1158,7 +1158,7 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk { if (this.clerkjs && this.loaded) { this.clerkjs.unmountAPIKeys(node); } else { - this.premountAPIKeysNode.delete(node); + this.premountAPIKeysNodes.delete(node); } }; From 41ca8951db3151ccf058a2c493d52669478cac5e Mon Sep 17 00:00:00 2001 From: wobsoriano Date: Fri, 14 Nov 2025 17:12:58 -0800 Subject: [PATCH 6/7] chore: fix naming --- .../src/ui/components/{ApiKeys => APIKeys}/APIKeyModal.tsx | 0 .../clerk-js/src/ui/components/{ApiKeys => APIKeys}/APIKeys.tsx | 0 .../src/ui/components/{ApiKeys => APIKeys}/APIKeysTable.tsx | 0 .../src/ui/components/{ApiKeys => APIKeys}/CopyAPIKeyModal.tsx | 0 .../src/ui/components/{ApiKeys => APIKeys}/CreateAPIKeyForm.tsx | 0 .../{ApiKeys => APIKeys}/RevokeAPIKeyConfirmationModal.tsx | 0 .../ui/components/{ApiKeys => APIKeys}/__tests__/APIKeys.spec.tsx | 0 packages/clerk-js/src/ui/components/{ApiKeys => APIKeys}/utils.ts | 0 8 files changed, 0 insertions(+), 0 deletions(-) rename packages/clerk-js/src/ui/components/{ApiKeys => APIKeys}/APIKeyModal.tsx (100%) rename packages/clerk-js/src/ui/components/{ApiKeys => APIKeys}/APIKeys.tsx (100%) rename packages/clerk-js/src/ui/components/{ApiKeys => APIKeys}/APIKeysTable.tsx (100%) rename packages/clerk-js/src/ui/components/{ApiKeys => APIKeys}/CopyAPIKeyModal.tsx (100%) rename packages/clerk-js/src/ui/components/{ApiKeys => APIKeys}/CreateAPIKeyForm.tsx (100%) rename packages/clerk-js/src/ui/components/{ApiKeys => APIKeys}/RevokeAPIKeyConfirmationModal.tsx (100%) rename packages/clerk-js/src/ui/components/{ApiKeys => APIKeys}/__tests__/APIKeys.spec.tsx (100%) rename packages/clerk-js/src/ui/components/{ApiKeys => APIKeys}/utils.ts (100%) diff --git a/packages/clerk-js/src/ui/components/ApiKeys/APIKeyModal.tsx b/packages/clerk-js/src/ui/components/APIKeys/APIKeyModal.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/ApiKeys/APIKeyModal.tsx rename to packages/clerk-js/src/ui/components/APIKeys/APIKeyModal.tsx diff --git a/packages/clerk-js/src/ui/components/ApiKeys/APIKeys.tsx b/packages/clerk-js/src/ui/components/APIKeys/APIKeys.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/ApiKeys/APIKeys.tsx rename to packages/clerk-js/src/ui/components/APIKeys/APIKeys.tsx diff --git a/packages/clerk-js/src/ui/components/ApiKeys/APIKeysTable.tsx b/packages/clerk-js/src/ui/components/APIKeys/APIKeysTable.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/ApiKeys/APIKeysTable.tsx rename to packages/clerk-js/src/ui/components/APIKeys/APIKeysTable.tsx diff --git a/packages/clerk-js/src/ui/components/ApiKeys/CopyAPIKeyModal.tsx b/packages/clerk-js/src/ui/components/APIKeys/CopyAPIKeyModal.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/ApiKeys/CopyAPIKeyModal.tsx rename to packages/clerk-js/src/ui/components/APIKeys/CopyAPIKeyModal.tsx diff --git a/packages/clerk-js/src/ui/components/ApiKeys/CreateAPIKeyForm.tsx b/packages/clerk-js/src/ui/components/APIKeys/CreateAPIKeyForm.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/ApiKeys/CreateAPIKeyForm.tsx rename to packages/clerk-js/src/ui/components/APIKeys/CreateAPIKeyForm.tsx diff --git a/packages/clerk-js/src/ui/components/ApiKeys/RevokeAPIKeyConfirmationModal.tsx b/packages/clerk-js/src/ui/components/APIKeys/RevokeAPIKeyConfirmationModal.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/ApiKeys/RevokeAPIKeyConfirmationModal.tsx rename to packages/clerk-js/src/ui/components/APIKeys/RevokeAPIKeyConfirmationModal.tsx diff --git a/packages/clerk-js/src/ui/components/ApiKeys/__tests__/APIKeys.spec.tsx b/packages/clerk-js/src/ui/components/APIKeys/__tests__/APIKeys.spec.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/ApiKeys/__tests__/APIKeys.spec.tsx rename to packages/clerk-js/src/ui/components/APIKeys/__tests__/APIKeys.spec.tsx diff --git a/packages/clerk-js/src/ui/components/ApiKeys/utils.ts b/packages/clerk-js/src/ui/components/APIKeys/utils.ts similarity index 100% rename from packages/clerk-js/src/ui/components/ApiKeys/utils.ts rename to packages/clerk-js/src/ui/components/APIKeys/utils.ts From ddcdb766f9963cad1714ff0737dd7e805e14c22d Mon Sep 17 00:00:00 2001 From: wobsoriano Date: Fri, 14 Nov 2025 17:15:52 -0800 Subject: [PATCH 7/7] chore: fix naming --- packages/clerk-js/src/ui/components/APIKeys/APIKeys.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/clerk-js/src/ui/components/APIKeys/APIKeys.tsx b/packages/clerk-js/src/ui/components/APIKeys/APIKeys.tsx index 0965efec9c7..0ab90e2cc05 100644 --- a/packages/clerk-js/src/ui/components/APIKeys/APIKeys.tsx +++ b/packages/clerk-js/src/ui/components/APIKeys/APIKeys.tsx @@ -102,7 +102,7 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr const { t } = useLocalizations(); const [isRevokeModalOpen, setIsRevokeModalOpen] = useState(false); const [selectedAPIKeyID, setSelectedAPIKeyID] = useState(''); - const [selectedApiKeyName, setSelectedApiKeyName] = useState(''); + const [selectedAPIKeyName, setSelectedAPIKeyName] = useState(''); const [isCopyModalOpen, setIsCopyModalOpen] = useState(false); const handleCreateAPIKey = async (params: OnCreateParams) => { @@ -125,7 +125,7 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr const handleRevoke = (apiKeyID: string, apiKeyName: string) => { setSelectedAPIKeyID(apiKeyID); - setSelectedApiKeyName(apiKeyName); + setSelectedAPIKeyName(apiKeyName); setIsRevokeModalOpen(true); }; @@ -221,11 +221,11 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr onOpen={() => setIsRevokeModalOpen(true)} onClose={() => { setSelectedAPIKeyID(''); - setSelectedApiKeyName(''); + setSelectedAPIKeyName(''); setIsRevokeModalOpen(false); }} apiKeyID={selectedAPIKeyID} - apiKeyName={selectedApiKeyName} + apiKeyName={selectedAPIKeyName} onRevokeSuccess={invalidateAll} modalRoot={revokeModalRoot} />