fix(clerk-js): Missing or broken breadcrumbs (#1722)

* fix(clerk-js): Missing or broken breadcrumbs * chore(clerk-js): Add changeset
clerk · Sep 14, 2023 · 7fa9364 · 7fa9364
1 parent 634948f
commit 7fa9364
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 3 deletions.
diff --git a/.changeset/silly-numbers-sell.md b/.changeset/silly-numbers-sell.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Fix bug with missing or incorrect breadcrumbs in Organization and User profiles
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/ActionConfirmationPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/ActionConfirmationPage.tsx
@@ -131,6 +131,7 @@ const ActionConfirmationPage = withCardStateProvider((props: ActionConfirmationP
     <Wizard {...wizard.props}>
       <ContentPage
         headerTitle={title}
+        breadcrumbTitle={localizationKeys('organizationProfile.profilePage.dangerSection.title')}
         Breadcrumbs={OrganizationProfileBreadcrumbs}
       >
         <Form.Root onSubmit={handleSubmit}>

diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileNavbar.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileNavbar.tsx
@@ -54,6 +54,7 @@ const pageToRootNavbarRouteMap = {
   domain: organizationProfileRoutes.find(r => r.id === 'settings'),
   profile: organizationProfileRoutes.find(r => r.id === 'settings'),
   leave: organizationProfileRoutes.find(r => r.id === 'settings'),
+  delete: organizationProfileRoutes.find(r => r.id === 'settings'),
 };
 
 export const OrganizationProfileBreadcrumbs = (props: Pick<PropsOfComponent<typeof Breadcrumbs>, 'title'>) => {

diff --git a/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsPage.tsx b/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsPage.tsx
@@ -85,7 +85,10 @@ const AddConnectedAccount = () => {
   };
 
   return (
-    <ContentPage headerTitle={localizationKeys('userProfile.connectedAccountPage.title')}>
+    <ContentPage
+      headerTitle={localizationKeys('userProfile.connectedAccountPage.title')}
+      Breadcrumbs={UserProfileBreadcrumbs}
+    >
       <Text
         localizationKey={
           unconnectedStrategies.length

diff --git a/packages/clerk-js/src/ui/components/UserProfile/EmailPage.tsx b/packages/clerk-js/src/ui/components/UserProfile/EmailPage.tsx
@@ -50,7 +50,10 @@ export const EmailPage = withCardStateProvider(() => {
 
   return (
     <Wizard {...wizard.props}>
-      <ContentPage headerTitle={title}>
+      <ContentPage
+        headerTitle={title}
+        Breadcrumbs={UserProfileBreadcrumbs}
+      >
         <Form.Root onSubmit={addEmail}>
           <Form.ControlRow elementId={emailField.id}>
             <Form.Control
@@ -71,7 +74,10 @@ export const EmailPage = withCardStateProvider(() => {
         </Form.Root>
       </ContentPage>
 
-      <ContentPage headerTitle={title}>
+      <ContentPage
+        headerTitle={title}
+        Breadcrumbs={UserProfileBreadcrumbs}
+      >
         {preferMagicLinks ? (
           <VerifyWithLink
             nextStep={wizard.nextStep}