Update Settings page to include "Other" section #6501

delawski · 2021-07-30T15:37:35Z

Summary

This PR removes the Mobile redirection toggle from the Onboarding Wizard and adds it to a new "Other" section on the AMP Settings page. The "Other" section also contains a Dev Tools toggle:

Checklist

My code is tested and passes existing tests.
My code follows the Engineering Guidelines (updates are often made to the guidelines, check it out periodically).

github-actions · 2021-07-30T15:42:25Z

Plugin builds for 4b3a89a are ready 🛎️!

Download development build
Download production build

delawski · 2021-07-30T16:25:00Z

I've been trying to fix the failing E2E test but ran out of time. I'm pretty sure there's an easy fix for that.

pierlon · 2021-07-30T16:25:34Z

I've been trying to fix the failing E2E test but ran out of time. I'm pretty sure there's an easy fix for that.

No worries. I'll take a look.

delawski · 2021-07-30T16:26:54Z

No worries. I'll take a look.

Thanks so much, @pierlon!

CLAassistant · 2021-07-30T20:26:04Z

All committers have signed the CLA.

delawski · 2021-08-16T18:40:06Z

@jwold Thanks for updating the component!

@pierlon @westonruter I've been able to fix the E2E tests, increase the test coverage, and also resolve the merge conflicts. Now the PR is "green" and I think it's good to go through the final review.

assets/src/components/dev-tools-toggle/index.js

pierlon · 2021-08-19T14:20:50Z

assets/src/settings-page/developer-tools.js

+		<section className="developer-tools">
+			<DevToolsToggle />
+			<p>
+				{ __( 'Only enabled for your user account. This is not a sitewide setting.', 'amp' ) }


We should also mention what it's useful for, similar to how it was on the User Profile page:

How about something like this?

This is addressed in 753175f

assets/src/components/unsaved-changes-warning/index.js

Per the comment from Weston on #5578 (comment), I'm suggesting a change to the new "Other" panel. The goal is that the design should now look like this: https://d.pr/i/CPtRce. Feedback is welcome, haven't submitted a PR in a while!

Saw an error to properly indent. Trying again.

Co-authored-by: Pierre Gordon <[email protected]>

tests/e2e/specs/admin/other-settings.js

assets/src/components/user-context-provider/index.js

pierlon

Great work @delawski. Passing onto @westonruter for a final review.

…578-add-new-settings * 'develop' of github.com:ampproject/amp-wp: (44 commits) Make placeholder dependency on video ID more explicit Fix adding start to placeholder link; improve coverage Let placeholder link point to YouTube permalink and not iframe src Prevent generating closing IMG tags Use coversDefaultClass Remove condition which cannot be reached since video ID is always provided Opt to pass-through iframe for unrecognized YouTube URL rather than convert to link Remove unreachable code Give more explicit array phpdoc type Fix issues identified by phpstan Try installing phpstan via shivammathur/setup-php Try downloading a specific version of phpstan instead of latest Fix yml syntax error Try removing phpstan before composer install Print phpstan version when running on GHA Revert "Revert phpstan ignores" Try adding phpstan version to composer cache key Revert phpstan ignores update unit test cases Sanitize attribute name Use original YouTube URL as placeholder when sanitizing raw embed Fix phpcs alignment warning Use constant instead of member variable Let Document::fromNode() obtain the ownerDocument Deduplicate iframe_props into constant ...

westonruter

I added long-missing tests for OptionsMenu which I've added in 121ca24.

One of the requirements was:

Remove "redirect mobile visitors to AMP" toggle from onboarding

I've implemented this in ba02cab.

The main thing left is the E2E tests being fixed, aside from the minor comments I'm leaving here.

assets/src/settings-page/developer-tools.js

westonruter · 2021-09-09T23:02:44Z

assets/src/components/user-context-provider/index.js

- * @param {string} props.userRestPath             REST endpoint to retrieve options.
+ * @param {Object}  props                           Component props.
+ * @param {?any}    props.children                  Component children.
+ * @param {boolean} props.allowConfiguredPluginOnly Provided only for functionality that requires the plugin to be configured.


This prop name and description are unclear to me. Can this be clarified?

Yes, the description was totally wrong and the prop name could be better too.

In 418ec3c I've changed those. I'm still not convinced it's clear enough but maybe you can find a better wording?

To make it clearer, I've also replaced the REST route we used: /wp/v2/users/me with a general users path: /wp/v2/users. This way, the prop name (usersResourceRestPath) should now semantically match its value.

What do you think?

I don't see that allowConfiguredPluginOnly was changed.

The users REST path change looks good.

Oh my! I have no idea why I looked at the wrong prop (and "fixed" it). I'll get the allowConfiguredPluginOnly clarified.

So this flag is used to allow fetching users data even if the plugin is not fully configured (the Onboarding Wizard has not been completed).

So far, the user data was fetched only after completing the Wizard but right now we need the user data earlier (it's possible to visit the AMP Settings page without going through the Wizard).

Naming is hard. Anything I come up with so far is long and may sound a bit awkward: skipFetchingIfUnconfiguredPlugin, onlyFetchIfPluginIsConfigured... Suggestions are well appreciated.

onlyFetchIfPluginIsConfigured sounds good to me!

Perfect! It's been updated in 4b3a89a.

westonruter · 2021-09-10T03:42:10Z

Oh, hold on, E2E tests are passing now! 🤷

Maybe they'll fail again when the above suggestions are applied.

Co-authored-by: Weston Ruter <[email protected]>

codecov · 2021-09-10T12:08:31Z

Codecov Report

Merging #6501 (aafb4b1) into develop (deba08a) will increase coverage by 0.43%.
The diff coverage is 89.47%.

❗ Current head aafb4b1 differs from pull request most recent head 418ec3c. Consider uploading reports for the commit 418ec3c to get more accurate results

@@              Coverage Diff              @@
##             develop    #6501      +/-   ##
=============================================
+ Coverage      75.83%   76.26%   +0.43%     
  Complexity      6060     6060              
=============================================
  Files            190      240      +50     
  Lines          18219    19001     +782     
=============================================
+ Hits           13817    14492     +675     
- Misses          4402     4509     +107

Flag	Coverage Δ
javascript	`78.84% <66.66%> (?)`
php	`76.15% <100.00%> (+0.32%)`	⬆️
unit	`76.15% <100.00%> (+0.32%)`	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
assets/src/components/redirect-toggle/index.js	`75.00% <0.00%> (ø)`
...sets/src/onboarding-wizard/components/nav/index.js	`100.00% <ø> (ø)`
assets/src/components/dev-tools-toggle/index.js	`80.00% <80.00%> (ø)`
src/Admin/OptionsMenu.php	`89.09% <100.00%> (+53.90%)`	⬆️
src/MobileRedirection.php	`83.51% <100.00%> (ø)`
assets/src/components/svg/transitional.js	`100.00% <0.00%> (ø)`
...idation/components/error/get-error-source-title.js	`93.75% <0.00%> (ø)`
.../block-validation/hooks/use-amp-document-toggle.js	`80.00% <0.00%> (ø)`
...ock-validation/components/error/error-type-icon.js	`100.00% <0.00%> (ø)`
...ets/src/block-validation/components/error/index.js	`100.00% <0.00%> (ø)`
... and 46 more

delawski · 2021-09-10T12:35:13Z

Oh, hold on, E2E tests are passing now! 🤷

Maybe they'll fail again when the above suggestions are applied.

That's strange. I don't seem to be getting the E2E error locally. I think this may be some kind of hazard where the Puppeteer doesn't wait for a specific selector before assessing its existence.

delawski added the WS:UX Work stream for UX/Front-end label Jul 30, 2021

delawski added this to the v2.2 milestone Jul 30, 2021

delawski requested review from westonruter and pierlon July 30, 2021 15:37

delawski changed the title ~~Feature/5578 add new settings~~ Update Settings page to include "Other" section Jul 30, 2021

delawski force-pushed the feature/5578-add-new-settings branch 2 times, most recently from 7f6e93b to 0422246 Compare August 16, 2021 15:33

pierlon suggested changes Aug 19, 2021

View reviewed changes

delawski requested a review from pierlon August 20, 2021 12:56

westonruter mentioned this pull request Aug 25, 2021

Consider adding UI setting for data removal upon uninstall #6486

Closed

delawski and others added 14 commits September 3, 2021 11:03

Remove mobile redirect toggle from Onboarding Wizard

5621ad8

Add mobile redirection toggle to new Other Settings section

0a47e53

Move UserContextProvider to general components directory

e8b226f

Add User context and Dev Tools section to Settings page

5e77d90

Fix e2e test

07b7697

Open "Other" panel before searching for mobile redirect toggle

a1dfcd0

Wait for "Other" panel before attempting to click it

041ba12

Updated headings within the Other section of Settings

490dfc9

Per the comment from Weston on #5578 (comment), I'm suggesting a change to the new "Other" panel. The goal is that the design should now look like this: https://d.pr/i/CPtRce. Feedback is welcome, haven't submitted a PR in a while!

Update developer-tools.js

87fc3b1

Saw an error to properly indent. Trying again.

Remove unused import

0516198

Update snapshots

f32516a

Add unit test for loading state

c14d740

Fix Other settings box spacing

06833b6

Fix E2E test

9948aa7

delawski and others added 5 commits September 3, 2021 11:03

Add E2E test for dev tools toggle

f51a83d

Apply suggestions from code review

bcd1e67

Co-authored-by: Pierre Gordon <[email protected]>

Update Jest snapshot

a7c7cf1

Improve dev tools toggle description

a1f9b31

Allow user-related changes on Options page

2f7d0b5

delawski force-pushed the feature/5578-add-new-settings branch from 753175f to 2f7d0b5 Compare September 3, 2021 09:30

pierlon suggested changes Sep 3, 2021

View reviewed changes

tests/e2e/specs/admin/other-settings.js Outdated Show resolved Hide resolved

assets/src/components/user-context-provider/index.js Outdated Show resolved Hide resolved

pierlon added 2 commits September 3, 2021 15:36

Fix typo

ca6a642

Update param description

bbadaf2

pierlon approved these changes Sep 3, 2021

View reviewed changes

delawski mentioned this pull request Sep 8, 2021

Introduce Site Review to the Onboarding Wizard #6596

Merged

2 tasks

westonruter added 4 commits September 9, 2021 15:40

Add missing tests for OptionsMenu

121ca24

Enable mobile redirection by default

ba02cab

Set current screen to fix test_enqueue_assets_right_hook_suffix

7162a05

westonruter reviewed Sep 10, 2021

View reviewed changes

Update assets/src/settings-page/developer-tools.js

aafb4b1

Co-authored-by: Weston Ruter <[email protected]>

delawski added 2 commits September 10, 2021 14:26

Update users resource prop and its description

418ec3c

Fix the unit test

ca79001

delawski added 2 commits September 10, 2021 15:42

Try fixing failing E2E test

acfab6f

Improve prop name and description

4b3a89a

westonruter merged commit 6164a77 into develop Sep 13, 2021

westonruter deleted the feature/5578-add-new-settings branch September 13, 2021 19:37

westonruter added the Changelogged Whether the issue/PR has been added to release notes. label Dec 14, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update Settings page to include "Other" section #6501

Update Settings page to include "Other" section #6501

delawski commented Jul 30, 2021 •

edited

Loading

github-actions bot commented Jul 30, 2021 •

edited

Loading

delawski commented Jul 30, 2021

pierlon commented Jul 30, 2021

delawski commented Jul 30, 2021

CLAassistant commented Jul 30, 2021 •

edited

Loading

delawski commented Aug 16, 2021

pierlon Aug 19, 2021

delawski Aug 19, 2021

delawski Aug 20, 2021

pierlon left a comment

westonruter left a comment

westonruter Sep 9, 2021

delawski Sep 10, 2021

westonruter Sep 10, 2021

delawski Sep 10, 2021

delawski Sep 10, 2021

westonruter Sep 10, 2021

delawski Sep 13, 2021

westonruter commented Sep 10, 2021

codecov bot commented Sep 10, 2021 •

edited

Loading

delawski commented Sep 10, 2021

Update Settings page to include "Other" section #6501

Update Settings page to include "Other" section #6501

Conversation

delawski commented Jul 30, 2021 • edited Loading

Summary

Checklist

github-actions bot commented Jul 30, 2021 • edited Loading

delawski commented Jul 30, 2021

pierlon commented Jul 30, 2021

delawski commented Jul 30, 2021

CLAassistant commented Jul 30, 2021 • edited Loading

delawski commented Aug 16, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pierlon left a comment

Choose a reason for hiding this comment

westonruter left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

westonruter commented Sep 10, 2021

codecov bot commented Sep 10, 2021 • edited Loading

Codecov Report

delawski commented Sep 10, 2021

delawski commented Jul 30, 2021 •

edited

Loading

github-actions bot commented Jul 30, 2021 •

edited

Loading

CLAassistant commented Jul 30, 2021 •

edited

Loading

codecov bot commented Sep 10, 2021 •

edited

Loading