[NO QA] Update NAVIGATION.md with Dynamic Routes Documentation (BATCH-7)#81859
Conversation
melvin-bot
Bot
requested review from
mananjadhav and
trjExpensify
and removed request for
a team
|
@mananjadhav Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
Codecov Report❌ Looks like you've decreased code coverage for some files. Please write tests to increase, or at least maintain, the existing level of code coverage. See our documentation here for how to interpret this table.
|
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 77aef9f0f5
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
…r/dynamic-routes-batch-7
|
Documentation update, doesn't need product review. |
mananjadhav
left a comment
mananjadhav
left a comment
There was a problem hiding this comment.
Reviewed all the documentation pieces. I am assuming some of the code is stale here.
Also I can see the tests are included for the previous PR #81413 implementation. But can we add tests scenarios for the failure cases such as nested paths, multiple query params, etc.
| function startOnboardingFlow(startOnboardingFlowParams: GetOnboardingInitialPathParamsType) { | ||
| const currentRoute = navigationRef.getCurrentRoute(); | ||
| const adaptedState = getAdaptedStateFromPath(getOnboardingInitialPath(startOnboardingFlowParams), linkingConfig.config, false); | ||
| const adaptedState = getAdaptedStateFromPath(getOnboardingInitialPath(startOnboardingFlowParams) as Route, linkingConfig.config, false); |
There was a problem hiding this comment.
question: The other PR uses undefined here.
There was a problem hiding this comment.
This line contained some outdated logic. After merging the latest changes into this PR, everything is synchronized now 👍
| * Checks if a screen name is a dynamic route screen | ||
| */ | ||
| function isDynamicRouteScreen(screenName: Screen): boolean { | ||
| const dynamicRouteEntries = Object.values(DYNAMIC_ROUTES); |
There was a problem hiding this comment.
question: Assuming this is stale?
There was a problem hiding this comment.
Yeah, this part was also slightly outdated. After merging the latest updates, everything is now aligned
|
|
||
| When adding or extending a dynamic route, list every screen that should be able to open it (e.g. `SCREENS.SETTINGS.WALLET.ROOT` for Verify Account from Wallet). | ||
|
|
||
| ### Current limitations (work in progress) |
There was a problem hiding this comment.
I think we should highlight what happens when one violates this. I think this behavior is undefined/silently ignored.
| - [Reading state when it changes](#reading-state-when-it-changes) | ||
| - [Finding the code that calls the navigation function](#finding-the-code-that-calls-the-navigation-function) | ||
| - [How to remove backTo from URL](#how-to-remove-backto-from-url) | ||
| - [Dynamic routes](#dynamic-routes) |
There was a problem hiding this comment.
do you think we should add When not to use dynamic routes? for instance, routes with with required params, flows that are part of the primary navigation hierarchy
|
|
||
| The `entryScreens` array in `DYNAMIC_ROUTES` defines which base screens are allowed to open this dynamic route. | ||
|
|
||
| When parsing a URL, `src/libs/Navigation/helpers/getStateFromPath.ts` resolves the base path (without the dynamic suffix), gets the focused route for that path, and checks whether it is in `entryScreens`. If it is not, the dynamic route state is not built and a warning is logged. This prevents opening e.g. `/some/random/path/verify-account` when that path's screen is not allowed. |
There was a problem hiding this comment.
do you think we should explain - what happens if a dynamic route is accessed without matching an entry screen?
There was a problem hiding this comment.
I believe it would be beneficial to include a detailed explanation of this mechanism. Providing this context will help developers migrating routes better understand the logic, making it easier for them to identify missed screens in the "accessed screens" configuration
| A dynamic route is a URL suffix (e.g. `verify-account`) that can be appended to any base path the user is currently on. The resulting URL is `{currentPath}/{suffix}` (e.g. `/settings/wallet/verify-account`). | ||
|
|
||
| - **Static route:** A fixed path like `settings/wallet/verify-account`. The screen has one URL and typically one back destination. | ||
| - **Dynamic route:** The same screen and suffix are reused across many base paths. The "back" destination is derived from the current URL (by removing the suffix), not from a `backTo` param. |
There was a problem hiding this comment.
Do you think we should highlight the implementation details somewhere? or behavioral guarantees?
Something like:
Dynamic routes guarantee deterministic back navigation by removing the suffix from the current path and preserving query parameters.
| - **Suffix shape:** Suffixes must be a single path segment. Compound suffixes with extra path segments (e.g. `a/b`) are not supported. | ||
| - **Parameters:** Suffixes must not include path params (e.g. `a/:reportID`) or query params (e.g. `a?foo=bar`). Use a single literal segment like `verify-account` only. | ||
|
|
||
| ### How to add a new dynamic route |
There was a problem hiding this comment.
Do you think it makes sense to add one full end-to-end example or not needed as we'll be resolving everything as a part of the project?
cc - @mjasikowski
There was a problem hiding this comment.
I feel like the current guide for creating new dynamic routes is already quite comprehensive, so we can probably keep it as is. I’ll be closely supporting the first few migrations myself anyway, so we’ll have plenty of fresh PRs to use as real-world examples very soon! 😄
…r/dynamic-routes-batch-7
Since we’ve already explicitly documented which scenarios aren’t supported yet, I feel it’s better to hold off on those specific tests for now to keep the scope focused. I’ll definitely make sure to include them as soon as we start implementing those features 😄 All comments have been addressed ✅ . Could you please take one more look when you have a moment? Thanks! |
|
@collectioneur Can you please sync the latest main here? |
mananjadhav
left a comment
mananjadhav
left a comment
There was a problem hiding this comment.
Overall all good, small comments.
|
|
||
| A dynamic route is a URL suffix (e.g. `verify-account`) that can be appended to any base path the user is currently on. The resulting URL is `{currentPath}/{suffix}` (e.g. `/settings/wallet/verify-account`). | ||
|
|
||
| - **Static route:** A fixed path like `settings/wallet/verify-account`. The screen has one URL and typically one back destination. |
There was a problem hiding this comment.
Is verify-account the right example for static route here? 😅
| - `path`: The URL suffix (e.g. `'verify-account'`). | ||
| - `entryScreens`: List of screen names that are allowed to have this suffix appended (access control; see [Entry Screens (Access Control)](#entry-screens-access-control)). | ||
|
|
||
| `createDynamicRoute(suffix)` `src/libs/Navigation/helpers/createDynamicRoute.ts`. Accepts a `DynamicRouteSuffix` (from `DYNAMIC_ROUTES`), appends it to the current active route and returns the full route. Use when navigating to a dynamic route: |
There was a problem hiding this comment.
Any specific reason for using the path instead of the link here src/libs/Navigation/helpers/createDynamicRoute.ts?
| - `path`: The URL suffix (e.g. `'verify-account'`). | ||
| - `entryScreens`: List of screen names that are allowed to have this suffix appended (access control; see [Entry Screens (Access Control)](#entry-screens-access-control)). | ||
|
|
||
| `createDynamicRoute(suffix)` `src/libs/Navigation/helpers/createDynamicRoute.ts`. Accepts a `DynamicRouteSuffix` (from `DYNAMIC_ROUTES`), appends it to the current active route and returns the full route. Use when navigating to a dynamic route: |
There was a problem hiding this comment.
| `createDynamicRoute(suffix)` `src/libs/Navigation/helpers/createDynamicRoute.ts`. Accepts a `DynamicRouteSuffix` (from `DYNAMIC_ROUTES`), appends it to the current active route and returns the full route. Use when navigating to a dynamic route: | |
| `createDynamicRoute(suffix)` `src/libs/Navigation/helpers/createDynamicRoute.ts`. Accepts a `DynamicRouteSuffix` (from `DYNAMIC_ROUTES`), appends it to the current active route and returns the full route. Use the following when navigating to a dynamic route: |
Reviewer Checklist
Screenshots/VideosAndroid: HybridAppNA Android: mWeb ChromeNA iOS: HybridAppNA iOS: mWeb SafariNA MacOS: Chrome / SafariNA |
mananjadhav
left a comment
mananjadhav
left a comment
There was a problem hiding this comment.
It's a documentation update, so doesn't need screenshots.
|
🚀 Deployed to staging by https://github.com/mjasikowski in version: 9.3.26-0 🚀
|
|
🚀 Deployed to production by https://github.com/puneetlath in version: 9.3.26-8 🚀
|
5 participants
Explanation of Change
I've added documentation on how to create new dynamic routes and refactor routes with backTo.
Fixed Issues
$ #80912
Tests
Offline tests
QA Steps
NO QA
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectioncanBeMissingparam foruseOnyxtoggleReportand notonIconClick)src/languages/*files and using the translation methodSTYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))npm run compress-svg)Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.