feat(clerk-js): Support open userProfile and organizationProfile modals to specific navitems by EmmanouelaPothitou · Pull Request #3732 · clerk/javascript

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

…dal on specific page

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

  const router = useRouter();
  const navigateToFlowStart = async () => {
-    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.

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

+    }
+    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 <panteliselef@outlook.com>

Co-authored-by: panteliselef <panteliselef@outlook.com>

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

          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

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

💯

Co-authored-by: Vaggelis Yfantis <me@octoper.me>

Co-authored-by: Stefanos Anagnostou <anagstef@users.noreply.github.com>

…ls to specific navitems (#3732) Co-authored-by: panteliselef <panteliselef@outlook.com> Co-authored-by: Vaggelis Yfantis <me@octoper.me> Co-authored-by: Stefanos Anagnostou <anagstef@users.noreply.github.com>

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

Comment thread packages/clerk-js/src/ui/hooks/useNavigateToFlowStart.ts Outdated

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 anagstef, nikosdouvlis, octoper 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 <panteliselef@outlook.com>

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

33c13ce

Co-authored-by: panteliselef <panteliselef@outlook.com>

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

5f1f508

Co-authored-by: panteliselef <panteliselef@outlook.com>

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

Comment thread .changeset/cuddly-spoons-decide.md

Update cuddly-spoons-decide.md

691bfef

desiprisg reviewed Jul 25, 2024

View reviewed changes

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

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

octoper reviewed Jul 25, 2024

View reviewed changes

Comment thread packages/clerk-js/src/ui/Components.tsx Outdated

octoper approved these changes Jul 25, 2024

View reviewed changes

anagstef approved these changes Jul 25, 2024

View reviewed changes

Comment thread .changeset/cuddly-spoons-decide.md Outdated

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 <me@octoper.me>

Update .changeset/cuddly-spoons-decide.md

e92ffe0

Co-authored-by: Stefanos Anagnostou <anagstef@users.noreply.github.com>

EmmanouelaPothitou merged commit b486897 into main Jul 25, 2024

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

Uh oh!

Conversation

EmmanouelaPothitou commented Jul 16, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Type of change

Uh oh!

changeset-bot Bot commented Jul 16, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

panteliselef Jul 22, 2024

Choose a reason for hiding this comment

Uh oh!

EmmanouelaPothitou Jul 23, 2024

Choose a reason for hiding this comment

Uh oh!

anagstef commented Jul 22, 2024

Uh oh!

EmmanouelaPothitou commented Jul 23, 2024

Uh oh!

Uh oh!

Uh oh!

Uh oh!

panteliselef Jul 24, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

octoper Jul 25, 2024

Choose a reason for hiding this comment

Uh oh!

EmmanouelaPothitou Jul 25, 2024

Choose a reason for hiding this comment

Uh oh!

octoper Jul 25, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

octoper commented Jul 25, 2024

Uh oh!

clerk-cookie commented Jul 25, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

octoper left a comment

Choose a reason for hiding this comment

Uh oh!

anagstef left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

EmmanouelaPothitou commented Jul 16, 2024 •

edited

Loading

changeset-bot Bot commented Jul 16, 2024 •

edited

Loading

clerk-cookie commented Jul 25, 2024 •

edited

Loading