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

RFC: Remove subpath URLQueryParam from settings pages. #1031

Open
wants to merge 2 commits into
base: develop
Choose a base branch
from

Conversation

tomalec
Copy link
Member

@tomalec tomalec commented Sep 30, 2021

(This is a follow-up from #1025 (comment))

Changes proposed in this Pull Request:

Remove subpath URLQueryParam from settings pages.
Use WC navigation features instead.

This way we have

  • routing unified with the WC stack
  • less noise in URLs & track events
  • more intuitive URL & track event props, as the entire path is in a single param, not divided into a number of chunks
  • could get closer to simplify .~/utils/url.js, as we no longer need to construct a query object, but just use path param.
  • remove the source of problems like the one discussed at Separate Phone and Address settings #1025 (comment), TL;DR: "what if subpath is empty?"

What's left/missing/to be done later:

  • Update track event README
  • Try to simplify wc_admin_register_page calls in src/Menu/Settings.php
  • 📜 extrapolate for all other pages using subpath or similar param.
  • (edit) [ ] 📜(not sure if possible in WC-plaform) DRY/reduce duplication, of pages configs in src/Menu/*.phps, js/src/index.js and js/src/utils/url.js -> Cleanup navigation related code #1037

Screenshots:

path

Detailed test instructions:

  1. Go to Settings page /wp-admin/admin.php?page=wc-admin&path=%2Fgoogle%2Fsettings
  2. Navigate into phone & address pages - "Edit" buttons
  3. Navigate away and around observing how URL changes, and what track events are fired.
    (full page reloads instead of SPA-morph, is an unrelated issue Impaired UX/A11Y of internal button links. #1027)

Changelog entry

Make all settings pages use only path for navigation.


//cc @eason9487 @ecgan

Use WC navigation features instead.
@tomalec tomalec added type: technical debt This issue/PR represents/solves the technical debt of the project. type: technical debt - external devX This issue/PR suffers from the ergonomics of external tools/dependencies labels Sep 30, 2021
@tomalec tomalec requested a review from a team September 30, 2021 13:28
@tomalec tomalec self-assigned this Sep 30, 2021
Base automatically changed from feature/962-separate-settings-phone to develop September 30, 2021 13:36
@ecgan
Copy link
Member

ecgan commented Sep 30, 2021

@tomalec , the reason why we use subpath is to make the pages work with the new WC Navigation beta feature. Refer to the following links:

You can enable the WC Navigation feature in WC Settings > Advanced > Features.

@tomalec
Copy link
Member Author

tomalec commented Oct 5, 2021

I managed to achieve that by using matchExpression property
image

It was quite hidden in the docs, so I found it by debugging it live 🤦‍♂️
But I hope it's stable enough and desired usage.

@tomalec
Copy link
Member Author

tomalec commented Oct 5, 2021

Highlighting the subpages in legacy menu is covered by #1038

Copy link
Member

@eason9487 eason9487 left a comment

Choose a reason for hiding this comment

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

Tested with enabled/disabled the Woo Navigation feature and works well. LGTM.

Comment on lines +24 to +25
* @param {Object} [props.params = {}] `path` params extracted by React `<Router>`.
* @param {string} [props.params.subpath] Sub path of a nested settings page.
Copy link
Member

Choose a reason for hiding this comment

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

😎 👍

Comment on lines +32 to +33
// Highlight this menu item for other subpages.
'matchExpression' => '/google/settings(/[^/]+)?',
Copy link
Member

Choose a reason for hiding this comment

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

TIL: matchExpression. Great find! 🙌

@jconroy
Copy link
Member

jconroy commented Oct 14, 2021

Mental note - before we go merging will this impact any funnels we have set up or direct links we may have (in the codebase or docs)

@tomalec
Copy link
Member Author

tomalec commented Oct 14, 2021

will this impact any funnels we have set up or direct links we may have (in the codebase or docs)

Yes, it will. All path=/google/settings&subpath={subpath} will become path=/google/settings/{subpath}.

So the url, path and subpath event props will change respectively.

That's why I still have on my todo list:

Update track event README

@tomalec
Copy link
Member Author

tomalec commented Oct 21, 2021

@jconroy does the above make it a no-go? or maybe it's ok, but we should change everything at once, to update the docs and funnels only once, to minimize the inconvenience, for users of those.

@@ -88,7 +88,7 @@ protected function get_connect_callback(): callable {
return function( Request $request ) {
try {
$next = $request->get_param( 'next' );
$path = $next === 'setup-mc' ? '/google/setup-mc' : '/google/settings&subpath=/reconnect-accounts';
$path = $next === 'setup-mc' ? '/google/setup-mc' : '/google/settings/reconnect-accounts';
Copy link
Member

Choose a reason for hiding this comment

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

📝
Will conflict with this commit in PR #1069

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type: technical debt - external devX This issue/PR suffers from the ergonomics of external tools/dependencies type: technical debt This issue/PR represents/solves the technical debt of the project.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants