chore(clerk-js): Add API Keys component descriptors (#6095)

Co-authored-by: Bryce Kalow <[email protected]>
Co-authored-by: Alex Carpenter <[email protected]>
Co-authored-by: panteliselef <[email protected]>
Co-authored-by: Lennart <[email protected]>

Author: 5 people

.changeset/chilly-pears-film.md

@@ -0,0 +1,6 @@
+---
+"@clerk/clerk-js": patch
+"@clerk/types": patch
+---
+
+Add element descriptors to `<APIKeys />` component

packages/clerk-js/bundlewatch.config.json

@@ -4,7 +4,7 @@
     { "path": "./dist/clerk.browser.js", "maxSize": "70.16KB" },
     { "path": "./dist/clerk.legacy.browser.js", "maxSize": "113KB" },
     { "path": "./dist/clerk.headless*.js", "maxSize": "53.06KB" },
-    { "path": "./dist/ui-common*.js", "maxSize": "108.4KB" },
+    { "path": "./dist/ui-common*.js", "maxSize": "108.54KB" },
     { "path": "./dist/vendors*.js", "maxSize": "40.2KB" },
     { "path": "./dist/coinbase*.js", "maxSize": "38KB" },
     { "path": "./dist/createorganization*.js", "maxSize": "5KB" },

packages/clerk-js/src/ui/components/ApiKeys/ApiKeys.tsx

@@ -5,7 +5,17 @@ import { lazy, useState } from 'react';
 import useSWRMutation from 'swr/mutation';
 
 import { useApiKeysContext, withCoreUserGuard } from '@/ui/contexts';
-import { Box, Button, Col, Flex, Flow, Icon, localizationKeys, useLocalizations } from '@/ui/customizables';
+import {
+  Box,
+  Button,
+  Col,
+  descriptors,
+  Flex,
+  Flow,
+  Icon,
+  localizationKeys,
+  useLocalizations,
+} from '@/ui/customizables';
 import { Action } from '@/ui/elements/Action';
 import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
 import { InputWithIcon } from '@/ui/elements/InputWithIcon';
@@ -81,6 +91,7 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
     <Col
       gap={4}
       sx={{ width: '100%' }}
+      elementDescriptor={descriptors.apiKeys}
     >
       <Action.Root>
         <Flex
@@ -93,8 +104,9 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
               alignItems: 'stretch',
             },
           }}
+          elementDescriptor={descriptors.apiKeysHeader}
         >
-          <Box>
+          <Box elementDescriptor={descriptors.apiKeysSearchBox}>
             <InputWithIcon
               placeholder={t(localizationKeys('apiKeys.action__search'))}
               leftIcon={<Icon icon={MagnifyingGlass} />}
@@ -103,6 +115,7 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
                 setSearch(e.target.value);
                 setPage(1);
               }}
+              elementDescriptor={descriptors.apiKeysSearchInput}
             />
           </Box>
           <Action.Trigger
@@ -112,6 +125,7 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
             <Button
               variant='solid'
               localizationKey={localizationKeys('apiKeys.action__add')}
+              elementDescriptor={descriptors.apiKeysAddButton}
             />
           </Action.Trigger>
         </Flex>
@@ -130,6 +144,7 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
         rows={apiKeys}
         isLoading={isLoading}
         onRevoke={handleRevoke}
+        elementDescriptor={descriptors.apiKeysTable}
       />
       {itemCount > (perPage ?? 5) && (
         <Pagination

packages/clerk-js/src/ui/components/ApiKeys/ApiKeysTable.tsx

@@ -20,6 +20,7 @@ import {
   Thead,
   Tr,
 } from '@/ui/customizables';
+import type { ElementDescriptor } from '@/ui/customizables/elementDescriptors';
 import { ThreeDotsMenu } from '@/ui/elements/ThreeDotsMenu';
 import { useClipboard } from '@/ui/hooks';
 import { Check, ClipboardOutline, Eye, EyeSlash } from '@/ui/icons';
@@ -50,6 +51,7 @@ const CopySecretButton = ({ apiKeyID }: { apiKeyID: string }) => {
       aria-label={hasCopied ? 'Copied API key to clipboard' : 'Copy API key'}
       onClick={() => setEnabled(true)}
       focusRing={false}
+      elementDescriptor={descriptors.apiKeysCopyButton}
     >
       <Icon
         size='sm'
@@ -92,6 +94,7 @@ const SecretInputWithToggle = ({ apiKeyID }: { apiKeyID: string }) => {
         })}
         focusRing={false}
         aria-label={'Show key'}
+        elementDescriptor={descriptors.apiKeysRevealButton}
         onClick={() => setRevealed(!revealed)}
       >
         <Icon
@@ -107,14 +110,19 @@ export const ApiKeysTable = ({
   rows,
   isLoading,
   onRevoke,
+  elementDescriptor,
 }: {
   rows: APIKeyResource[];
   isLoading: boolean;
   onRevoke: (id: string, name: string) => void;
+  elementDescriptor?: ElementDescriptor;
 }) => {
   return (
     <Flex sx={t => ({ width: '100%', [mqu.sm]: { overflowX: 'auto', padding: t.space.$0x25 } })}>
-      <Table sx={t => ({ background: t.colors.$colorBackground })}>
+      <Table
+        sx={t => ({ background: t.colors.$colorBackground })}
+        elementDescriptor={elementDescriptor}
+      >
         <Thead>
           <Tr>
             <Th>Name</Th>

packages/clerk-js/src/ui/components/ApiKeys/CreateApiKeyForm.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import { Box, Button, Col, Flex, FormLabel, localizationKeys, Text } from '@/ui/customizables';
+import { Box, Button, Col, descriptors, Flex, FormLabel, localizationKeys, Text } from '@/ui/customizables';
 import { useActionContext } from '@/ui/elements/Action/ActionRoot';
 import { Form } from '@/ui/elements/Form';
 import { FormButtons } from '@/ui/elements/FormButtons';
@@ -97,14 +97,21 @@ export const CreateApiKeyForm = ({ onCreate, isSubmitting }: CreateApiKeyFormPro
     <FormContainer
       headerTitle={localizationKeys('apiKeys.formTitle')}
       headerSubtitle={localizationKeys('apiKeys.formHint')}
+      elementDescriptor={descriptors.apiKeysCreateForm}
     >
       <Form.Root onSubmit={handleSubmit}>
-        <Form.ControlRow elementId={nameField.id}>
+        <Form.ControlRow
+          elementId={nameField.id}
+          elementDescriptor={descriptors.apiKeysCreateFormNameInput}
+        >
           <Form.PlainInput {...nameField.props} />
         </Form.ControlRow>
         {showAdvanced && (
           <>
-            <Form.ControlRow elementId={descriptionField.id}>
+            <Form.ControlRow
+              elementId={descriptionField.id}
+              elementDescriptor={descriptors.apiKeysCreateFormDescriptionInput}
+            >
               <Form.PlainInput {...descriptionField.props} />
             </Form.ControlRow>
             <Flex
@@ -155,6 +162,7 @@ export const CreateApiKeyForm = ({ onCreate, isSubmitting }: CreateApiKeyFormPro
                 <Form.ControlRow
                   elementId={expirationDateField.id}
                   sx={{ flex: 3 }}
+                  elementDescriptor={descriptors.apiKeysCreateFormExpirationInput}
                 >
                   <Form.PlainInput
                     type='date'
@@ -190,6 +198,7 @@ export const CreateApiKeyForm = ({ onCreate, isSubmitting }: CreateApiKeyFormPro
             isDisabled={!canSubmit}
             onReset={closeCardFn}
             isLoading={isSubmitting}
+            elementDescriptor={descriptors.apiKeysCreateFormSubmitButton}
           />
         </Flex>
       </Form.Root>

packages/clerk-js/src/ui/components/ApiKeys/RevokeAPIKeyConfirmationModal.tsx

@@ -1,6 +1,7 @@
 import { useClerk } from '@clerk/shared/react';
 import { useSWRConfig } from 'swr';
 
+import { descriptors } from '@/ui/customizables';
 import { Card } from '@/ui/elements/Card';
 import { Form } from '@/ui/elements/Form';
 import { FormButtons } from '@/ui/elements/FormButtons';
@@ -37,6 +38,7 @@ export const RevokeAPIKeyConfirmationModal = ({
 
     await clerk.apiKeys.revoke({ apiKeyID: apiKeyId });
     const cacheKey = { key: 'api-keys', subject };
+
     void mutate(cacheKey);
     onClose();
   };
@@ -79,7 +81,10 @@ export const RevokeAPIKeyConfirmationModal = ({
           : {},
       ]}
     >
-      <Card.Root role='alertdialog'>
+      <Card.Root
+        role='alertdialog'
+        elementDescriptor={descriptors.apiKeysRevokeModal}
+      >
         <Card.Content
           sx={t => ({
             textAlign: 'left',
@@ -91,14 +96,18 @@ export const RevokeAPIKeyConfirmationModal = ({
             headerSubtitle={localizationKeys('apiKeys.revokeConfirmation.formHint')}
           >
             <Form.Root onSubmit={handleSubmit}>
-              <Form.ControlRow elementId={revokeField.id}>
+              <Form.ControlRow
+                elementId={revokeField.id}
+                elementDescriptor={descriptors.apiKeysRevokeModalInput}
+              >
                 <Form.PlainInput {...revokeField.props} />
               </Form.ControlRow>
               <FormButtons
                 submitLabel={localizationKeys('apiKeys.revokeConfirmation.formButtonPrimary__revoke')}
                 colorScheme='danger'
                 isDisabled={!canSubmit}
                 onReset={onClose}
+                elementDescriptor={descriptors.apiKeysRevokeModalSubmitButton}
               />
             </Form.Root>
           </FormContainer>

packages/clerk-js/src/ui/components/ApiKeys/useApiKeys.ts

@@ -8,7 +8,6 @@ export const useApiKeys = ({ subject, perPage = 5 }: { subject: string; perPage?
     key: 'api-keys',
     subject,
   };
-
   const { data: apiKeys, isLoading, mutate } = useSWR(cacheKey, () => clerk.apiKeys.getAll({ subject }));
   const [search, setSearch] = useState('');
   const filteredApiKeys = (apiKeys ?? []).filter(key => key.name.toLowerCase().includes(search.toLowerCase()));

packages/clerk-js/src/ui/customizables/elementDescriptors.ts

@@ -333,6 +333,10 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'tabListContainer',
 
   'tableHead',
+  'tableBody',
+  'tableRow',
+  'tableHeaderCell',
+  'tableBodyCell',
 
   'paginationButton',
   'paginationButtonIcon',
@@ -458,6 +462,23 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'notificationBadge',
   'buttonArrowIcon',
   'spinner',
+
+  'apiKeys',
+  'apiKeysHeader',
+  'apiKeysSearchBox',
+  'apiKeysSearchInput',
+  'apiKeysAddButton',
+  'apiKeysTable',
+  'apiKeysCopyButton',
+  'apiKeysRevealButton',
+  'apiKeysCreateForm',
+  'apiKeysCreateFormNameInput',
+  'apiKeysCreateFormDescriptionInput',
+  'apiKeysCreateFormExpirationInput',
+  'apiKeysCreateFormSubmitButton',
+  'apiKeysRevokeModal',
+  'apiKeysRevokeModalInput',
+  'apiKeysRevokeModalSubmitButton',
 ] as const).map(camelize) as (keyof ElementsConfig)[];
 
 type TargettableClassname<K extends keyof ElementsConfig> = `${typeof CLASS_PREFIX}${K}`;

packages/clerk-js/src/ui/customizables/index.ts

@@ -55,11 +55,15 @@ export const NotificationBadge = makeCustomizable(makeLocalizable(sanitizeDomPro
 });
 
 export const Table = makeCustomizable(sanitizeDomProps(Primitives.Table), { defaultDescriptor: descriptors.table });
-export const Thead = makeCustomizable(sanitizeDomProps(Primitives.Thead));
-export const Tbody = makeCustomizable(sanitizeDomProps(Primitives.Tbody));
-export const Tr = makeCustomizable(sanitizeDomProps(Primitives.Tr));
-export const Th = makeCustomizable(makeLocalizable(sanitizeDomProps(Primitives.Th)));
-export const Td = makeCustomizable(makeLocalizable(sanitizeDomProps(Primitives.Td)));
+export const Thead = makeCustomizable(sanitizeDomProps(Primitives.Thead), { defaultDescriptor: descriptors.tableHead });
+export const Tbody = makeCustomizable(sanitizeDomProps(Primitives.Tbody), { defaultDescriptor: descriptors.tableBody });
+export const Tr = makeCustomizable(sanitizeDomProps(Primitives.Tr), { defaultDescriptor: descriptors.tableRow });
+export const Th = makeCustomizable(makeLocalizable(sanitizeDomProps(Primitives.Th)), {
+  defaultDescriptor: descriptors.tableHeaderCell,
+});
+export const Td = makeCustomizable(makeLocalizable(sanitizeDomProps(Primitives.Td)), {
+  defaultDescriptor: descriptors.tableBodyCell,
+});
 
 export const Dl = makeCustomizable(makeLocalizable(sanitizeDomProps(Primitives.Dl)));
 export const Dd = makeCustomizable(makeLocalizable(sanitizeDomProps(Primitives.Dd)));

packages/types/src/appearance.ts

@@ -459,6 +459,10 @@ export type ElementsConfig = {
   tabListContainer: WithOptions;
 
   tableHead: WithOptions;
+  tableBody: WithOptions;
+  tableRow: WithOptions;
+  tableHeaderCell: WithOptions;
+  tableBodyCell: WithOptions;
 
   paginationButton: WithOptions;
   paginationButtonIcon: WithOptions;
@@ -586,6 +590,23 @@ export type ElementsConfig = {
   notificationBadge: WithOptions;
   buttonArrowIcon: WithOptions;
   spinner: WithOptions;
+
+  apiKeys: WithOptions;
+  apiKeysHeader: WithOptions;
+  apiKeysSearchBox: WithOptions;
+  apiKeysSearchInput: WithOptions;
+  apiKeysAddButton: WithOptions;
+  apiKeysTable: WithOptions;
+  apiKeysCopyButton: WithOptions<string>;
+  apiKeysRevealButton: WithOptions<string>;
+  apiKeysCreateForm: WithOptions;
+  apiKeysCreateFormNameInput: WithOptions;
+  apiKeysCreateFormDescriptionInput: WithOptions;
+  apiKeysCreateFormExpirationInput: WithOptions;
+  apiKeysCreateFormSubmitButton: WithOptions;
+  apiKeysRevokeModal: WithOptions;
+  apiKeysRevokeModalInput: WithOptions;
+  apiKeysRevokeModalSubmitButton: WithOptions;
 };
 
 export type Elements = {