feat(astro): Add OrganizationProfile custom pages and links

.changeset/swift-stingrays-cough.md

@@ -0,0 +1,5 @@
+---
+"@clerk/astro": minor
+---
+
+Add support for custom pages and links in the `<OrganizationProfile />` Astro component.

integration/templates/astro-node/src/pages/custom-pages/organization-profile.astro

@@ -0,0 +1,51 @@
+---
+import {
+  OrganizationProfile as OrganizationProfileAstro,
+  OrganizationSwitcher
+} from "@clerk/astro/components";
+import Layout from "../../layouts/Layout.astro";
+
+// Added a dedicatedPage query param to conditionally render the OrganizationProfile
+// as for some reason, the menu items in the OrganizationSwitcher
+// goes out of bounds in test environment.
+const dedicatedPage = Astro.url.searchParams.get('dedicatedPage') === 'true';
+---
+
+<Layout title="Custom Pages">
+  <div class="w-full flex justify-center">
+    <OrganizationSwitcher>
+        {
+          !dedicatedPage && (
+            <OrganizationSwitcher.OrganizationProfilePage label="Terms" url="terms">
+                <div slot="label-icon">Icon</div>
+                <div>
+                    <h1>Custom Terms Page</h1>
+                    <p>This is the custom terms page</p>
+                </div>
+            </OrganizationSwitcher.OrganizationProfilePage>
+            <OrganizationSwitcher.OrganizationProfileLink label="Homepage" url="/">
+                <div slot="label-icon">Icon</div>
+            </OrganizationSwitcher.OrganizationProfileLink>
+            <OrganizationSwitcher.OrganizationProfilePage label="members" />
+          )
+        }
+    </OrganizationSwitcher>
+    {
+      dedicatedPage && (
+        <OrganizationProfileAstro path="/custom-pages/organization-profile">
+            <OrganizationProfileAstro.Page label="Terms" url="terms">
+                <div slot="label-icon">Icon</div>
+                <div>
+                    <h1>Custom Terms Page</h1>
+                    <p>This is the custom terms page</p>
+                </div>
+            </OrganizationProfileAstro.Page>
+            <OrganizationProfileAstro.Link label="Homepage" url="/">
+                <div slot="label-icon">Icon</div>
+            </OrganizationProfileAstro.Link>
+            <OrganizationProfileAstro.Page label="general" />
+        </OrganizationProfileAstro>
+      )
+    }
+  </div>
+</Layout>

integration/templates/astro-node/src/pages/custom-pages/user-profile.astro

@@ -0,0 +1,22 @@
+---
+import { UserProfile as UserProfileAstro } from "@clerk/astro/components";
+import Layout from "../../layouts/Layout.astro";
+---
+
+<Layout title="Custom Pages">
+  <div class="w-full flex justify-center">
+    <UserProfileAstro path="/custom-pages/user-profile">
+        <UserProfileAstro.Page label="Terms" url="terms">
+            <div slot="label-icon">Icon</div>
+            <div>
+                <h1>Custom Terms Page</h1>
+                <p>This is the custom terms page</p>
+            </div>
+        </UserProfileAstro.Page>
+        <UserProfileAstro.Link label="Homepage" url="/">
+            <div slot="label-icon">Icon</div>
+        </UserProfileAstro.Link>
+        <UserProfileAstro.Page label="security" />
+    </UserProfileAstro>
+  </div>
+</Layout>

integration/tests/astro/components.test.ts

@@ -164,7 +164,7 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
     await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeAdmin.email, password: fakeAdmin.password });
     await u.po.expect.toBeSignedIn();
 
-    await u.page.goToRelative('/custom-pages');
+    await u.page.goToRelative('/custom-pages/user-profile');
     await u.po.userProfile.waitForMounted();
 
     // Check if custom pages and links are visible
@@ -176,7 +176,7 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
     await expect(u.page.getByRole('heading', { name: 'Custom Terms Page' })).toBeVisible();
 
     // Check reordered default label. Security tab is now the last item.
-    await u.page.locator('.cl-navbarButton').nth(3).click();
+    await u.page.locator('.cl-navbarButton').last().click();
     await expect(u.page.getByRole('heading', { name: 'Security' })).toBeVisible();
 
     // Click custom link and check navigation
@@ -252,7 +252,7 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
     await fakeAdmin.deleteIfExists();
   });
 
-  test('test updateClerkOptions by changing localization on the fly', async ({ page, context }) => {
+  test('updateClerkOptions by changing localization on the fly', async ({ page, context }) => {
     const u = createTestUtils({ app, page, context });
     await u.po.signIn.goTo();
     await u.po.signIn.waitForMounted();
@@ -268,6 +268,70 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
     await expect(u.page.getByText('pour continuer vers')).toBeVisible();
   });
 
+  test('render organization profile with custom pages and links in dedicated page', async ({ page, context }) => {
+    const u = createTestUtils({ app, page, context });
+    await u.page.goToRelative('/sign-in');
+    await u.po.signIn.waitForMounted();
+    await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeAdmin.email, password: fakeAdmin.password });
+    await u.po.expect.toBeSignedIn();
+
+    await u.page.goToRelative('/custom-pages/organization-profile?dedicatedPage=true');
+    await u.po.organizationSwitcher.waitForMounted();
+    await u.po.organizationSwitcher.waitForAnOrganizationToSelected();
+
+    // Check if custom pages and links are visible
+    await expect(u.page.getByRole('button', { name: /Terms/i })).toBeVisible();
+    await expect(u.page.getByRole('button', { name: /Homepage/i })).toBeVisible();
+
+    // Navigate to custom page
+    await u.page.getByRole('button', { name: /Terms/i }).click();
+    await expect(u.page.getByRole('heading', { name: 'Custom Terms Page' })).toBeVisible();
+
+    // Check reordered default label. General tab is now the last item.
+    await u.page.locator('.cl-navbarButton').last().click();
+    await expect(u.page.getByRole('heading', { name: 'General' })).toBeVisible();
+
+    // Click custom link and check navigation
+    await u.page.getByRole('button', { name: /Homepage/i }).click();
+    await u.page.waitForAppUrl('/');
+  });
+
+  test('render organization profile with custom pages and links inside organization switcher', async ({
+    page,
+    context,
+  }) => {
+    const u = createTestUtils({ app, page, context });
+    await u.page.goToRelative('/sign-in');
+    await u.po.signIn.waitForMounted();
+    await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeAdmin.email, password: fakeAdmin.password });
+    await u.po.expect.toBeSignedIn();
+
+    await u.page.goToRelative('/custom-pages/organization-profile?dedicatedPage=false');
+    await u.po.organizationSwitcher.waitForMounted();
+    await u.po.organizationSwitcher.waitForAnOrganizationToSelected();
+
+    // Open organization profile inside organization switcher
+    await u.po.organizationSwitcher.toggleTrigger();
+    await u.page.waitForSelector('.cl-organizationSwitcherPopoverCard', { state: 'visible' });
+    await u.page.locator('.cl-button__manageOrganization').click();
+
+    // Check if custom pages and links are visible
+    await expect(u.page.getByRole('button', { name: /Terms/i })).toBeVisible();
+    await expect(u.page.getByRole('button', { name: /Homepage/i })).toBeVisible();
+
+    // Navigate to custom page
+    await u.page.getByRole('button', { name: /Terms/i }).click();
+    await expect(u.page.getByRole('heading', { name: 'Custom Terms Page' })).toBeVisible();
+
+    // Check reordered default label. Members tab is now the last item.
+    await u.page.locator('.cl-navbarButton').last().click();
+    await expect(u.page.getByRole('heading', { name: 'Members' })).toBeVisible();
+
+    // Click custom link and check navigation
+    await u.page.getByRole('button', { name: /Homepage/i }).click();
+    await u.page.waitForAppUrl('/');
+  });
+
   // ---- react/protect
   test('only admin react', async ({ page, context }) => {
     const u = createTestUtils({ app, page, context });

packages/astro/src/astro-components/index.ts

@@ -20,7 +20,7 @@ export { default as SignIn } from './interactive/SignIn.astro';
 export { default as SignUp } from './interactive/SignUp.astro';
 export { UserButton } from './interactive/UserButton';
 export { UserProfile } from './interactive/UserProfile';
-export { default as OrganizationProfile } from './interactive/OrganizationProfile.astro';
-export { default as OrganizationSwitcher } from './interactive/OrganizationSwitcher.astro';
+export { OrganizationProfile } from './interactive/OrganizationProfile';
+export { OrganizationSwitcher } from './interactive/OrganizationSwitcher';
 export { default as OrganizationList } from './interactive/OrganizationList.astro';
 export { default as GoogleOneTap } from './interactive/GoogleOneTap.astro';

packages/astro/src/astro-components/interactive/CustomProfilePageRenderer.astro

@@ -0,0 +1,76 @@
+---
+interface Props {
+  url: string
+  label: string
+  type: 'page' | 'link'
+  component: 'organization-profile' | 'user-profile' | 'organization-switcher'
+  reorderItemsLabels?: Readonly<Array<string>>
+}
+
+const { url, label, type, component, reorderItemsLabels = [] } = Astro.props
+
+let labelIcon = '';
+let content = ''
+
+if (Astro.slots.has('label-icon')) {
+  labelIcon = await Astro.slots.render('label-icon');
+}
+
+if (Astro.slots.has('default') && type === 'page') {
+  content = await Astro.slots.render('default');
+}
+---
+
+<script is:inline define:vars={{ url, label, content, labelIcon, type, component, reorderItemsLabels }}>
+// Get the component map from window that we set in the `<InternalUIComponentRenderer />`.
+const clerkComponentMap = window.__astro_clerk_component_props.get(component);
+
+const componentElement = document.querySelector(`[data-clerk-id^="clerk-${component}"]`);
+
+const safeId = componentElement.getAttribute('data-clerk-id');
+const currentOptions = clerkComponentMap.get(safeId);
+
+const isReorderItem = reorderItemsLabels.includes(label);
+
+let newCustomPage = { label }
+
+if (!isReorderItem) {
+  newCustomPage = {
+    ...newCustomPage,
+    url,
+    mountIcon: (el) => { el.innerHTML = labelIcon },
+    unmountIcon: () => { /* Implement cleanup if needed */ }
+  }
+
+  if (type === 'page') {
+    newCustomPage = {
+      ...newCustomPage,
+      mount: (el) => { el.innerHTML = content },
+      unmount: () => { /* Implement cleanup if needed */ }
+    }
+  }
+}
+
+// Custom <OrganizationProfile /> pages can be added inside
+// the <OrganizationSwitcher /> component.
+if (component === 'organization-switcher') {
+  clerkComponentMap.set(safeId, {
+    ...currentOptions,
+    organizationProfileProps: {
+      ...currentOptions.organizationProfileProps,
+      customPages: [
+        ...(currentOptions?.organizationProfileProps?.customPages ?? []),
+        newCustomPage
+      ]
+    }
+  })
+} else {
+  clerkComponentMap.set(safeId, {
+    ...currentOptions,
+    customPages: [
+      ...(currentOptions?.customPages ?? []),
+      newCustomPage,
+    ]
+  })
+}
+</script>

packages/astro/src/astro-components/interactive/OrganizationProfile/OrganizationProfile.astro

@@ -0,0 +1,10 @@
+---
+import type { OrganizationProfileProps, Without } from '@clerk/types'
+
+type Props = Without<OrganizationProfileProps, 'customPages'>
+
+import InternalUIComponentRenderer from '../InternalUIComponentRenderer.astro'
+---
+
+<InternalUIComponentRenderer {...Astro.props} component="organization-profile" />
+<slot />

packages/astro/src/astro-components/interactive/OrganizationProfile/OrganizationProfileLink.astro

@@ -0,0 +1,14 @@
+---
+import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro'
+
+interface Props {
+  url: string
+  label: string
+}
+
+const { url, label } = Astro.props
+---
+
+<CustomProfilePageRenderer label={label} url={url} type="link" component="organization-profile">
+    <slot name="label-icon" slot="label-icon" />
+</CustomProfilePageRenderer>

packages/astro/src/astro-components/interactive/OrganizationProfile/OrganizationProfilePage.astro

@@ -0,0 +1,24 @@
+---
+import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro'
+
+const reorderItemsLabels = ['general', 'members'] as const;
+type ReorderItemsLabels = typeof reorderItemsLabels[number];
+
+type Props<Label extends string> = {
+  label: Label
+} & (Label extends ReorderItemsLabels
+  ? {
+      url?: string
+    }
+  : {
+    url: string
+  }
+)
+
+const { url, label } = Astro.props
+---
+
+<CustomProfilePageRenderer label={label} url={url} type="page" component="organization-profile" reorderItemsLabels={reorderItemsLabels}>
+    <slot name="label-icon" slot="label-icon" />
+    <slot />
+</CustomProfilePageRenderer>

packages/astro/src/astro-components/interactive/OrganizationProfile/index.ts

@@ -0,0 +1,8 @@
+import _OrganizationProfile from './OrganizationProfile.astro';
+import OrganizationProfileLink from './OrganizationProfileLink.astro';
+import OrganizationProfilePage from './OrganizationProfilePage.astro';
+
+export const OrganizationProfile = Object.assign(_OrganizationProfile, {
+  Page: OrganizationProfilePage,
+  Link: OrganizationProfileLink,
+});

packages/astro/src/astro-components/interactive/OrganizationSwitcher/OrganizationProfileLink.astro

@@ -0,0 +1,14 @@
+---
+import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro'
+
+interface Props {
+  url: string
+  label: string
+}
+
+const { url, label } = Astro.props
+---
+
+<CustomProfilePageRenderer label={label} url={url} type="link" component="organization-switcher">
+    <slot name="label-icon" slot="label-icon" />
+</CustomProfilePageRenderer>

packages/astro/src/astro-components/interactive/OrganizationSwitcher/OrganizationProfilePage.astro

@@ -0,0 +1,24 @@
+---
+import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro'
+
+const reorderItemsLabels = ['general', 'members'] as const;
+type ReorderItemsLabels = typeof reorderItemsLabels[number];
+
+type Props<Label extends string> = {
+  label: Label
+} & (Label extends ReorderItemsLabels
+  ? {
+      url?: string
+    }
+  : {
+    url: string
+  }
+)
+
+const { url, label } = Astro.props
+---
+
+<CustomProfilePageRenderer label={label} url={url} type="page" component="organization-switcher" reorderItemsLabels={reorderItemsLabels}>
+    <slot name="label-icon" slot="label-icon" />
+    <slot />
+</CustomProfilePageRenderer>