From 3b917d6eb38fd3134432a2de579fa13024783aac Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Mon, 19 Aug 2024 14:38:24 -0700
Subject: [PATCH 1/5] feat(astro): Add custom pages and links

---
 packages/astro/src/astro-components/index.ts  |  2 +-
 .../interactive/UserProfile.astro             |  8 ---
 .../UserProfile/ProfileRenderer.astro         | 60 +++++++++++++++++++
 .../interactive/UserProfile/UserProfile.astro | 11 ++++
 .../UserProfile/UserProfileLink.astro         | 14 +++++
 .../UserProfile/UserProfilePage.astro         | 23 +++++++
 .../interactive/UserProfile/index.ts          |  8 +++
 7 files changed, 117 insertions(+), 9 deletions(-)
 delete mode 100644 packages/astro/src/astro-components/interactive/UserProfile.astro
 create mode 100644 packages/astro/src/astro-components/interactive/UserProfile/ProfileRenderer.astro
 create mode 100644 packages/astro/src/astro-components/interactive/UserProfile/UserProfile.astro
 create mode 100644 packages/astro/src/astro-components/interactive/UserProfile/UserProfileLink.astro
 create mode 100644 packages/astro/src/astro-components/interactive/UserProfile/UserProfilePage.astro
 create mode 100644 packages/astro/src/astro-components/interactive/UserProfile/index.ts

diff --git a/packages/astro/src/astro-components/index.ts b/packages/astro/src/astro-components/index.ts
index e78da856ec3..dd6725c1642 100644
--- a/packages/astro/src/astro-components/index.ts
+++ b/packages/astro/src/astro-components/index.ts
@@ -19,7 +19,7 @@ export { default as SignOutButton } from './unstyled/SignOutButton.astro';
 export { default as SignIn } from './interactive/SignIn.astro';
 export { default as SignUp } from './interactive/SignUp.astro';
 export { UserButton } from './interactive/UserButton';
-export { default as UserProfile } from './interactive/UserProfile.astro';
+export { UserProfile } from './interactive/UserProfile';
 export { default as OrganizationProfile } from './interactive/OrganizationProfile.astro';
 export { default as OrganizationSwitcher } from './interactive/OrganizationSwitcher.astro';
 export { default as OrganizationList } from './interactive/OrganizationList.astro';
diff --git a/packages/astro/src/astro-components/interactive/UserProfile.astro b/packages/astro/src/astro-components/interactive/UserProfile.astro
deleted file mode 100644
index 1cf962e5d2a..00000000000
--- a/packages/astro/src/astro-components/interactive/UserProfile.astro
+++ /dev/null
@@ -1,8 +0,0 @@
----
-import type { UserProfileProps } from "@clerk/types";
-type Props = UserProfileProps
-
-import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
----
-
-<InternalUIComponentRenderer {...Astro.props} component="user-profile" />
diff --git a/packages/astro/src/astro-components/interactive/UserProfile/ProfileRenderer.astro b/packages/astro/src/astro-components/interactive/UserProfile/ProfileRenderer.astro
new file mode 100644
index 00000000000..647d3433d36
--- /dev/null
+++ b/packages/astro/src/astro-components/interactive/UserProfile/ProfileRenderer.astro
@@ -0,0 +1,60 @@
+---
+interface Props {
+  url: string
+  label: string
+  type: 'page' | 'link'
+}
+
+const { url, label, type } = 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 }}>
+// Get the user profile map from window that we set in the `<InternalUIComponentRenderer />`.
+const userProfileComponentMap = window.__astro_clerk_component_props.get('user-profile');
+
+const userProfile = document.querySelector('[data-clerk-id^="clerk-user-profile"]');
+
+const safeId = userProfile.getAttribute('data-clerk-id');
+const currentOptions = userProfileComponentMap.get(safeId);
+
+const REORDER_ITEM_LABELS = ['account', 'security'];
+const isReorderItem = REORDER_ITEM_LABELS.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 */ }
+    }
+  }
+}
+
+userProfileComponentMap.set(safeId, {
+  ...currentOptions,
+  customPages: [
+    ...(currentOptions?.customPages ?? []),
+    newCustomPage,
+  ]
+})
+</script>
diff --git a/packages/astro/src/astro-components/interactive/UserProfile/UserProfile.astro b/packages/astro/src/astro-components/interactive/UserProfile/UserProfile.astro
new file mode 100644
index 00000000000..92f8b1554ea
--- /dev/null
+++ b/packages/astro/src/astro-components/interactive/UserProfile/UserProfile.astro
@@ -0,0 +1,11 @@
+---
+import type { UserProfileProps, Without } from "@clerk/types";
+
+type Props = Without<UserProfileProps, 'customPages'>
+
+import InternalUIComponentRenderer from '../InternalUIComponentRenderer.astro'
+---
+
+<InternalUIComponentRenderer {...Astro.props} component="user-profile" />
+
+<slot />
diff --git a/packages/astro/src/astro-components/interactive/UserProfile/UserProfileLink.astro b/packages/astro/src/astro-components/interactive/UserProfile/UserProfileLink.astro
new file mode 100644
index 00000000000..211dfa40026
--- /dev/null
+++ b/packages/astro/src/astro-components/interactive/UserProfile/UserProfileLink.astro
@@ -0,0 +1,14 @@
+---
+import ProfileRenderer from './ProfileRenderer.astro'
+
+interface Props {
+  url: string
+  label: string
+}
+
+const { url, label } = Astro.props
+---
+
+<ProfileRenderer label={label} url={url} type="link">
+    <slot name="label-icon" slot="label-icon" />
+</ProfileRenderer>
diff --git a/packages/astro/src/astro-components/interactive/UserProfile/UserProfilePage.astro b/packages/astro/src/astro-components/interactive/UserProfile/UserProfilePage.astro
new file mode 100644
index 00000000000..01c933bde70
--- /dev/null
+++ b/packages/astro/src/astro-components/interactive/UserProfile/UserProfilePage.astro
@@ -0,0 +1,23 @@
+---
+import ProfileRenderer from './ProfileRenderer.astro'
+
+type ReorderItemsLabels = 'account' | 'security'
+
+type Props<Label extends string> = {
+  label: Label
+} & (Label extends ReorderItemsLabels
+  ? {
+      url?: string
+    }
+  : {
+    url: string
+  }
+)
+
+const { url, label } = Astro.props
+---
+
+<ProfileRenderer label={label} url={url} type="page">
+    <slot name="label-icon" slot="label-icon" />
+    <slot />
+</ProfileRenderer>
diff --git a/packages/astro/src/astro-components/interactive/UserProfile/index.ts b/packages/astro/src/astro-components/interactive/UserProfile/index.ts
new file mode 100644
index 00000000000..91db3a87a26
--- /dev/null
+++ b/packages/astro/src/astro-components/interactive/UserProfile/index.ts
@@ -0,0 +1,8 @@
+import _UserProfile from './UserProfile.astro';
+import UserProfileLink from './UserProfileLink.astro';
+import UserProfilePage from './UserProfilePage.astro';
+
+export const UserProfile = Object.assign(_UserProfile, {
+  Page: UserProfilePage,
+  Link: UserProfileLink,
+});

From c75b4f2dbe225ccd3d32260bbfc116adb5120714 Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Mon, 19 Aug 2024 15:18:04 -0700
Subject: [PATCH 2/5] test(astro): Add e2e test for custom pages and links

---
 .../astro-node/src/pages/custom-pages.astro   | 22 +++++++++++++++
 integration/tests/astro/components.test.ts    | 27 +++++++++++++++++++
 .../UserProfile/ProfileRenderer.astro         |  4 +--
 .../interactive/UserProfile/UserProfile.astro |  1 -
 4 files changed, 51 insertions(+), 3 deletions(-)
 create mode 100644 integration/templates/astro-node/src/pages/custom-pages.astro

diff --git a/integration/templates/astro-node/src/pages/custom-pages.astro b/integration/templates/astro-node/src/pages/custom-pages.astro
new file mode 100644
index 00000000000..21d598adc7b
--- /dev/null
+++ b/integration/templates/astro-node/src/pages/custom-pages.astro
@@ -0,0 +1,22 @@
+---
+import { UserProfile } from "@clerk/astro/components";
+import Layout from "../layouts/Layout.astro";
+---
+
+<Layout title="Custom Pages">
+  <div class="w-full flex justify-center">
+    <UserProfile path="/custom-pages">
+        <UserProfile.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>
+        </UserProfile.Page>
+        <UserProfile.Link label="Homepage" url="/">
+            <div slot="label-icon">Icon</div>
+        </UserProfile.Link>
+        <UserProfile.Page label="security" />
+    </UserProfile>
+  </div>
+</Layout>
diff --git a/integration/tests/astro/components.test.ts b/integration/tests/astro/components.test.ts
index 7ddba1bdc3c..62a697e71d9 100644
--- a/integration/tests/astro/components.test.ts
+++ b/integration/tests/astro/components.test.ts
@@ -157,6 +157,33 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
     await expect(u.page.getByText(`"firstName":"${fakeAdmin.firstName}"`)).toBeVisible();
   });
 
+  test('render user profile with custom pages and links', 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');
+    await u.po.userProfile.waitForMounted();
+
+    // 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. Security tab is now the last item.
+    await u.page.locator('.cl-navbarButton').nth(3).click();
+    await expect(u.page.getByRole('heading', { name: 'Security' })).toBeVisible();
+
+    // Click custom link and check navigation
+    await u.page.getByRole('button', { name: /Homepage/i }).click();
+    await u.page.waitForAppUrl('/');
+  });
+
   test('redirects to sign-in when unauthenticated', async ({ page, context }) => {
     const u = createTestUtils({ app, page, context });
     await u.page.goToRelative('/user');
diff --git a/packages/astro/src/astro-components/interactive/UserProfile/ProfileRenderer.astro b/packages/astro/src/astro-components/interactive/UserProfile/ProfileRenderer.astro
index 647d3433d36..b099591d884 100644
--- a/packages/astro/src/astro-components/interactive/UserProfile/ProfileRenderer.astro
+++ b/packages/astro/src/astro-components/interactive/UserProfile/ProfileRenderer.astro
@@ -28,8 +28,8 @@ const userProfile = document.querySelector('[data-clerk-id^="clerk-user-profile"
 const safeId = userProfile.getAttribute('data-clerk-id');
 const currentOptions = userProfileComponentMap.get(safeId);
 
-const REORDER_ITEM_LABELS = ['account', 'security'];
-const isReorderItem = REORDER_ITEM_LABELS.includes(label);
+const reorderItemsLabels = ['account', 'security'];
+const isReorderItem = reorderItemsLabels.includes(label);
 
 let newCustomPage = { label }
 
diff --git a/packages/astro/src/astro-components/interactive/UserProfile/UserProfile.astro b/packages/astro/src/astro-components/interactive/UserProfile/UserProfile.astro
index 92f8b1554ea..edb6704840b 100644
--- a/packages/astro/src/astro-components/interactive/UserProfile/UserProfile.astro
+++ b/packages/astro/src/astro-components/interactive/UserProfile/UserProfile.astro
@@ -7,5 +7,4 @@ import InternalUIComponentRenderer from '../InternalUIComponentRenderer.astro'
 ---
 
 <InternalUIComponentRenderer {...Astro.props} component="user-profile" />
-
 <slot />

From 0e160acd270049f64901caa62506274ce0367380 Mon Sep 17 00:00:00 2001
From: Robert Soriano <sorianorobertc@gmail.com>
Date: Mon, 19 Aug 2024 15:22:10 -0700
Subject: [PATCH 3/5] chore(astro): Add changeset

---
 .changeset/big-trains-beg.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/big-trains-beg.md

diff --git a/.changeset/big-trains-beg.md b/.changeset/big-trains-beg.md
new file mode 100644
index 00000000000..2b690092cd5
--- /dev/null
+++ b/.changeset/big-trains-beg.md
@@ -0,0 +1,5 @@
+---
+"@clerk/astro": minor
+---
+
+Add support for custom pages and links in the `<UserProfile />` Astro component.

From 3d835f407407132ace2d29f0846eef7a911f76ea Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Mon, 19 Aug 2024 15:23:13 -0700
Subject: [PATCH 4/5] chore(astro): Formatting fix

---
 .../astro-components/interactive/UserProfile/UserProfile.astro  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/astro/src/astro-components/interactive/UserProfile/UserProfile.astro b/packages/astro/src/astro-components/interactive/UserProfile/UserProfile.astro
index edb6704840b..e9e3cfef6cb 100644
--- a/packages/astro/src/astro-components/interactive/UserProfile/UserProfile.astro
+++ b/packages/astro/src/astro-components/interactive/UserProfile/UserProfile.astro
@@ -1,5 +1,5 @@
 ---
-import type { UserProfileProps, Without } from "@clerk/types";
+import type { UserProfileProps, Without } from '@clerk/types'
 
 type Props = Without<UserProfileProps, 'customPages'>
 

From 1f7bb0087a684e949b19751393ce31861f3ecda3 Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Mon, 19 Aug 2024 15:45:33 -0700
Subject: [PATCH 5/5] chore(astro): Update ignored files in astro components

---
 packages/astro/.eslintrc.cjs | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/astro/.eslintrc.cjs b/packages/astro/.eslintrc.cjs
index 7288f46d3b7..39dd0364e5a 100644
--- a/packages/astro/.eslintrc.cjs
+++ b/packages/astro/.eslintrc.cjs
@@ -4,7 +4,11 @@ module.exports = {
   rules: {
     'import/no-unresolved': ['error', { ignore: ['^#'] }],
   },
-  ignorePatterns: ['src/astro-components/index.ts', 'src/astro-components/interactive/UserButton/index.ts'],
+  ignorePatterns: [
+    'src/astro-components/index.ts',
+    'src/astro-components/interactive/UserButton/index.ts',
+    'src/astro-components/interactive/UserProfile/index.ts',
+  ],
   overrides: [
     {
       files: ['./env.d.ts'],