Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DashboardLayout] Support route patterns in navigation #3991

Merged

Conversation

apedroferreira
Copy link
Member

@apedroferreira apedroferreira commented Aug 23, 2024

Closes #3974 (partially, must create new partial issue for PageContainer component and follow #3991 (comment) + #3991 (review)

Adds an optional pattern property to navigation page items so that these can be marked as selected according to that pattern (using path-to-regexp), instead of the default behavior that uses their segment property.

  • Tests
  • Documentation (no demo as this doesn't make a lot of sense to demo, just an explanation)

https://deploy-preview-3991--mui-toolpad-docs.netlify.app/toolpad/core/react-dashboard-layout/#navigation-pattern-matching

Also simplifies the logic for the console warning in DashboardLayout for duplicate navigation items.

No changes to PageContainer or any more complex behavior for now, those will be done separately, as well as refactored logic for the selected item.

@apedroferreira apedroferreira changed the title Support route patterns in DashboardLayout [DashboardLayout] Support route patterns in navigation Aug 23, 2024
@apedroferreira apedroferreira added the feature: Components Button, input, table, etc. label Aug 23, 2024
@apedroferreira apedroferreira self-assigned this Aug 23, 2024
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Aug 26, 2024
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Aug 26, 2024
@apedroferreira apedroferreira marked this pull request as ready for review August 26, 2024 16:37
@apedroferreira apedroferreira requested a review from a team August 26, 2024 16:37
@apedroferreira
Copy link
Member Author

apedroferreira commented Aug 26, 2024

In a further PR, will add further refactoring to keep track of one only selected list item and share that logic between DashboardLayout and PageContainer components.

Also create a separate issue for these improvements.


- Standard paths: `/foo`
- Named parameters: `/:foo/:bar`
- Unnamed parameters: `/:foo/(.*)`
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think named vs unnamed is relevant to us. I'd just say "Parameters" on the line above. I'd also use something slightly more real-life as an example, like "orders"

- Constant path: `/orders`
- Dynamic segment: `/orders/:segment`
- Zero or more segments: `/orders{/:segment}*`
- One or more segments: `/orders{/:segment}+`
- Optional segment: `/orders{/:segment}+?`

- Standard paths: `/foo`
- Named parameters: `/:foo/:bar`
- Unnamed parameters: `/:foo/(.*)`
- Optional parameters: `/:foo{/:bar}?`
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could maybe add demo. a "product" page that has links to show the "next product" and the current path. e.g.

current path: /products/20
title: Item 20
[next product](/products/21)

Copy link
Member

@Janpot Janpot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added a few suggestions. Would also add more tests. e.g. cases for when a /orders/new is shadowed by a /orders/:id, or /orders/:id shadowed by /orders/*. etc... All kinds of permutations you can think of that users could build. But these can go in follow-up

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Aug 29, 2024
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Aug 29, 2024
@apedroferreira apedroferreira requested a review from Janpot August 29, 2024 17:14
Copy link
Member

@Janpot Janpot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good 👍

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Sep 1, 2024
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Sep 2, 2024
@apedroferreira apedroferreira enabled auto-merge (squash) September 2, 2024 14:00
@apedroferreira apedroferreira merged commit eb60981 into mui:master Sep 2, 2024
12 of 13 checks passed
@apedroferreira apedroferreira deleted the navigation-match-multiple-routes branch September 2, 2024 15:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature: Components Button, input, table, etc.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

DashboardLayout: Match multiple routes with a single navigation item
2 participants