chore: hide create form after modal closes

Author: wobsoriano

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

@@ -79,13 +79,12 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
   const [selectedApiKeyName, setSelectedApiKeyName] = useState('');
   const [isCopyModalOpen, setIsCopyModalOpen] = useState(false);
 
-  const handleCreateApiKey = async (params: OnCreateParams, closeCardFn: () => void) => {
+  const handleCreateApiKey = async (params: OnCreateParams) => {
     try {
       await createApiKey({
         ...params,
         subject,
       });
-      closeCardFn();
       card.setError(undefined);
       setIsCopyModalOpen(true);
     } catch (err: any) {
@@ -157,6 +156,15 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
             </Action.Card>
           </Flex>
         </Action.Open>
+
+        <CopyApiKeyModal
+          isOpen={isCopyModalOpen}
+          onOpen={() => setIsCopyModalOpen(true)}
+          onClose={() => setIsCopyModalOpen(false)}
+          apiKeyName={createdApiKey?.name ?? ''}
+          apiKeySecret={createdApiKey?.secret ?? ''}
+          modalRoot={revokeModalRoot}
+        />
       </Action.Root>
 
       <ApiKeysTable
@@ -190,14 +198,6 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
         apiKeyName={selectedApiKeyName}
         modalRoot={revokeModalRoot}
       />
-      <CopyApiKeyModal
-        isOpen={isCopyModalOpen}
-        onOpen={() => setIsCopyModalOpen(true)}
-        onClose={() => setIsCopyModalOpen(false)}
-        apiKeyName={createdApiKey?.name ?? ''}
-        apiKeySecret={createdApiKey?.secret ?? ''}
-        modalRoot={revokeModalRoot}
-      />
     </Col>
   );
 };

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

@@ -1,4 +1,5 @@
 import { descriptors } from '@/ui/customizables';
+import { useActionContext } from '@/ui/elements/Action/ActionRoot';
 import { Card } from '@/ui/elements/Card';
 import { ClipboardInput } from '@/ui/elements/ClipboardInput';
 import { Form } from '@/ui/elements/Form';
@@ -35,10 +36,12 @@ export const CopyApiKeyModal = ({
   });
 
   const { onCopy } = useClipboard(apiKeySecret);
+  const { close: closeActionCard } = useActionContext();
 
   const handleSubmit = () => {
     onCopy();
     onClose();
+    closeActionCard();
   };
 
   if (!isOpen) {

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

@@ -27,7 +27,7 @@ export type OnCreateParams = {
 };
 
 interface CreateApiKeyFormProps {
-  onCreate: (params: OnCreateParams, closeCardFn: () => void) => void;
+  onCreate: (params: OnCreateParams) => void;
   isSubmitting: boolean;
 }
 
@@ -164,14 +164,11 @@ export const CreateApiKeyForm: React.FC<CreateApiKeyFormProps> = ({ onCreate, is
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    onCreate(
-      {
-        name: nameField.value,
-        description: descriptionField.value || undefined,
-        secondsUntilExpiration: getTimeLeftInSeconds(selectedExpiration?.value),
-      },
-      closeCardFn,
-    );
+    onCreate({
+      name: nameField.value,
+      description: descriptionField.value || undefined,
+      secondsUntilExpiration: getTimeLeftInSeconds(selectedExpiration?.value),
+    });
   };
 
   return (