feat(clerk-js): Support open userProfile and organizationProfile modals to specific navitems #3732

EmmanouelaPothitou · 2024-07-16T14:20:28Z

Description

Support opening the userProfileModal and organizationProfileModal to specific navigation items through the userButton and organizationSwitcher.

Checklist

npm test runs as expected.
npm run build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

…ofile modal case

changeset-bot · 2024-07-16T14:20:32Z

🦋 Changeset detected

Latest commit: e92ffe0

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 18 packages

Name	Type
@clerk/clerk-js	Patch
@clerk/types	Patch
@clerk/astro	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-expo	Patch
@clerk/backend	Patch
@clerk/elements	Patch
@clerk/express	Patch
@clerk/fastify	Patch
@clerk/localizations	Patch
@clerk/nextjs	Patch
@clerk/clerk-react	Patch
@clerk/remix	Patch
@clerk/clerk-sdk-node	Patch
@clerk/shared	Patch
@clerk/tanstack-start	Patch
@clerk/testing	Patch
@clerk/themes	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

packages/clerk-js/src/ui/hooks/useNavigateToFlowStart.ts

…dal on specific page

packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx

packages/clerk-js/src/ui/components/UserButton/useMultisessionActions.tsx

packages/clerk-js/src/ui/elements/Navbar.tsx

panteliselef · 2024-07-22T09:24:09Z

packages/clerk-js/src/ui/hooks/useNavigateToFlowStart.ts

-    const to = '/' + router.basePath + router.flowStartPath;
+    const to = router.indexPath;


Could you briefly, our discoveries and why this is a "safe" change ?

In the current modal setup, the first element is associated with the '/' path. Previously, clicking the back button in the modal's sidebar navigation would navigate back to the path constructed by '/' + router.basePath + router.flowStartPath, since the modal always opened with the first element selected.

Now, with the ability to open the modal on a specific element, the router.flowStartPath is not necessarily the path for the first element anymore. That's why we should now navigate to router.indexPath instead of the previously used router.flowStartPath.

anagstef · 2024-07-22T09:37:18Z

@EmmanouelaPothitou can we have an example code snippet of how this will be used by the users?

…lick

EmmanouelaPothitou · 2024-07-23T10:54:00Z

have an example code snippet

@anagstef This function will not be used directly by the user. Instead, it will be utilized by custom menu items, which will be introduced in another PR that Nikos will open in the next days. Therefore, I do not have an example code snippet at this time.

packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx

packages/clerk-js/src/ui/Components.tsx

panteliselef · 2024-07-24T11:46:00Z

packages/clerk-js/src/ui/components/UserButton/useMultisessionActions.tsx

+    }
+    openUserProfile({
+      ...opts.userProfileProps,
+      ...(__experimental_startPath && { __experimental_startPath }),


❓Shouldn't we update the types of UserProfileModalProps and OrgProfileModalProps to include __experimental_startPath ?

…izationSwitcherPopover.tsx Co-authored-by: panteliselef <[email protected]>

Co-authored-by: panteliselef <[email protected]>

.changeset/cuddly-spoons-decide.md

packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx

octoper · 2024-07-25T10:33:02Z

packages/clerk-js/src/ui/Components.tsx

@@ -128,7 +128,7 @@ export const mountComponentRenderer = (clerk: Clerk, environment: EnvironmentRes
          void preloadComponent(preloadHint);
        }
        componentsControlsResolver = import('./lazyModules/common').then(({ createRoot }) => {
-          createRoot(clerkRoot!).render(


Is this changed by mistake from the linter or it's a conscious change?

Linter changed it.

We should revert it then

packages/clerk-js/src/ui/Components.tsx

octoper · 2024-07-25T11:37:07Z

!preview

clerk-cookie · 2024-07-25T11:44:30Z

Hey @octoper, your preview is available.

Status	Preview	Updated (UTC)
🍪 Deployed	Visit preview	Jul 25, 2024 11:44 AM

octoper

💯 Good job @EmmanouelaPothitou!

anagstef

💯

.changeset/cuddly-spoons-decide.md

Co-authored-by: Vaggelis Yfantis <[email protected]>

Co-authored-by: Stefanos Anagnostou <[email protected]>

…ls to specific navitems (#3732) Co-authored-by: panteliselef <[email protected]> Co-authored-by: Vaggelis Yfantis <[email protected]> Co-authored-by: Stefanos Anagnostou <[email protected]>

EmmanouelaPothitou added 3 commits July 16, 2024 13:12

feat(clerk-js): Support open to specific page through userButton

ef8ca52

feat(clerk-js): Update internal navigation function on navbar

635eb04

feat(clerk-js): Update navigateToFlowStart function to handle user pr…

b6b1395

…ofile modal case

clerk-cookie added the clerk-js label Jul 16, 2024

nikospapcom reviewed Jul 17, 2024

View reviewed changes

packages/clerk-js/src/ui/hooks/useNavigateToFlowStart.ts Outdated Show resolved Hide resolved

feat(clerk-js): Update handleManageOrganizationClicked to open org mo…

5953bb2

…dal on specific page

EmmanouelaPothitou force-pushed the emmanouela/user-176-support-open-openuserprofile-to-specific-page branch from e5a8015 to 5953bb2 Compare July 17, 2024 10:11

Create cuddly-spoons-decide.md

c0908fe

EmmanouelaPothitou changed the title ~~Emmanouela/user 176 support open openuserprofile to specific page~~ feat(clerk-js): support open userProfile and organizationProfile modals to specific nav items Jul 17, 2024

EmmanouelaPothitou changed the title ~~feat(clerk-js): support open userProfile and organizationProfile modals to specific nav items~~ feat(clerk-js):support-open-userProfile-and-organizationProfile-modals-to-specific-navitems Jul 17, 2024

EmmanouelaPothitou changed the title ~~feat(clerk-js):support-open-userProfile-and-organizationProfile-modals-to-specific-navitems~~ feat(clerk-js): Support open userProfile and organizationProfile modals to specific navitems Jul 17, 2024

EmmanouelaPothitou marked this pull request as ready for review July 17, 2024 12:51

EmmanouelaPothitou requested review from nikosdouvlis, octoper, anagstef and panteliselef July 22, 2024 08:35

panteliselef reviewed Jul 22, 2024

View reviewed changes

feat(clerk-js): Rename handleManageOrganizationClicked to handleItemC…

076d16e

…lick

feat(clerk-js): Rename path to __experimental_startPath

8da90ff

panteliselef reviewed Jul 24, 2024

View reviewed changes

EmmanouelaPothitou and others added 4 commits July 24, 2024 14:46

Update packages/clerk-js/src/ui/components/OrganizationSwitcher/Organ…

cb32066

…izationSwitcherPopover.tsx Co-authored-by: panteliselef <[email protected]>

Update packages/clerk-js/src/ui/Components.tsx

33c13ce

Co-authored-by: panteliselef <[email protected]>

Update packages/clerk-js/src/ui/Components.tsx

5f1f508

Co-authored-by: panteliselef <[email protected]>

feat(clerk-js): Rename path to __experimental_startPath

a642fce

EmmanouelaPothitou force-pushed the emmanouela/user-176-support-open-openuserprofile-to-specific-page branch from f3b0b4c to a642fce Compare July 24, 2024 14:22

clerk-cookie added the types label Jul 24, 2024

nikospapcom reviewed Jul 25, 2024

View reviewed changes

.changeset/cuddly-spoons-decide.md Show resolved Hide resolved

Update cuddly-spoons-decide.md

691bfef

desiprisg reviewed Jul 25, 2024

View reviewed changes

packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx Show resolved Hide resolved

packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx Show resolved Hide resolved

octoper reviewed Jul 25, 2024

View reviewed changes

packages/clerk-js/src/ui/Components.tsx Outdated Show resolved Hide resolved

octoper approved these changes Jul 25, 2024

View reviewed changes

anagstef approved these changes Jul 25, 2024

View reviewed changes

.changeset/cuddly-spoons-decide.md Outdated Show resolved Hide resolved

EmmanouelaPothitou and others added 2 commits July 25, 2024 14:57

Update packages/clerk-js/src/ui/Components.tsx

362dcf8

Co-authored-by: Vaggelis Yfantis <[email protected]>

Update .changeset/cuddly-spoons-decide.md

e92ffe0

Co-authored-by: Stefanos Anagnostou <[email protected]>

EmmanouelaPothitou merged commit b486897 into main Jul 25, 2024
17 checks passed

EmmanouelaPothitou deleted the emmanouela/user-176-support-open-openuserprofile-to-specific-page branch July 25, 2024 12:21

clerk-cookie mentioned this pull request Jul 25, 2024

ci(repo): Version packages #3805

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(clerk-js): Support open userProfile and organizationProfile modals to specific navitems #3732

feat(clerk-js): Support open userProfile and organizationProfile modals to specific navitems #3732

EmmanouelaPothitou commented Jul 16, 2024 •

edited

Loading

changeset-bot bot commented Jul 16, 2024 •

edited

Loading

panteliselef Jul 22, 2024

EmmanouelaPothitou Jul 23, 2024

anagstef commented Jul 22, 2024

EmmanouelaPothitou commented Jul 23, 2024

panteliselef Jul 24, 2024

octoper Jul 25, 2024

EmmanouelaPothitou Jul 25, 2024

octoper Jul 25, 2024

octoper commented Jul 25, 2024

clerk-cookie commented Jul 25, 2024 •

edited

Loading

octoper left a comment

anagstef left a comment

		const to = '/' + router.basePath + router.flowStartPath;
		const to = router.indexPath;

feat(clerk-js): Support open userProfile and organizationProfile modals to specific navitems #3732

feat(clerk-js): Support open userProfile and organizationProfile modals to specific navitems #3732

Conversation

EmmanouelaPothitou commented Jul 16, 2024 • edited Loading

Description

Checklist

Type of change

changeset-bot bot commented Jul 16, 2024 • edited Loading

🦋 Changeset detected

panteliselef Jul 22, 2024

Choose a reason for hiding this comment

EmmanouelaPothitou Jul 23, 2024

Choose a reason for hiding this comment

anagstef commented Jul 22, 2024

EmmanouelaPothitou commented Jul 23, 2024

panteliselef Jul 24, 2024

Choose a reason for hiding this comment

octoper Jul 25, 2024

Choose a reason for hiding this comment

EmmanouelaPothitou Jul 25, 2024

Choose a reason for hiding this comment

octoper Jul 25, 2024

Choose a reason for hiding this comment

octoper commented Jul 25, 2024

clerk-cookie commented Jul 25, 2024 • edited Loading

octoper left a comment

Choose a reason for hiding this comment

anagstef left a comment

Choose a reason for hiding this comment

EmmanouelaPothitou commented Jul 16, 2024 •

edited

Loading

changeset-bot bot commented Jul 16, 2024 •

edited

Loading

clerk-cookie commented Jul 25, 2024 •

edited

Loading