JITMs: add component to be used in the Jetpack Dashboard. #10759

jeherve · 2018-11-30T19:53:03Z

Changes proposed in this Pull Request:

JITMs: add component to be used in the Jetpack Dashboard.

The first part of this PR (the necessary new method in the rest api client and the new redux structure) was merged in #10818. This PR brings the second part: a new Jitm component and a new QueryJitm component, as well as a call to the new Jitm component in the main dashboard.

Check all the to-dos for things to do.
Dequeue regular JITMs on the JP dashboard pages.
Figure out what to do with existing JITMs; with the current implementation we have no JITMs that are set to be displayed on JP dash. We will most likely need to edit the JITMs on wpcom to add the string matching JP Dash for some messages.
Some HTML encoding issues with the messages.

Testing instructions:

You'll need a WordPress.com sandbox.
Start by applying D19944-code.
Sandbox your Jetpack site with the JETPACK__SANDBOX_DOMAIN constant (reference).
- If you don't have a WordPress.com sandbox, you can sandbox mine. Through a Jurassic Ninja site with that branch, go to Settings > Jetpack Constants, and add sandboxme.wordpress.com as the sandbox you want to use.
Visit Jetpack > Dashboard: a message should appear.
Visit Jetpack > Settings: the message should disappear.
Visit Jetpack > Plans: a different message should appear.

Known issues / To do:

toplevel_page_jetpack should continue to work as a string one can use to target all pages of the Jetpack dashboard at once.
~~Lists are not displayed properly right now.~~
~~Props warnings for isActivatingModule and isModuleActivated~~
~~When dismissing a message, and then switching to a different tab, the dismissed message is visible for a few seconds until the new message (or no message at all) is loaded.~~
~~When activating a module via a JITM, the JITM remains in place once the module has been activated. This is related to JITM: Hide JITMs whose CTAs were clicked recently #9462~~ I opted to remove the button once the module has been activated. This way one can still click on the CTA to learn more if they are interested. If they leave the page or refresh, the JITM will disappear for good.
The look of the messages is a bit different from the ones you'll find in other places in wp-admin. The CTA button uses Calypso's button component, and as such the text inside the button is in uppercase. That is not the case with the wp-admin implementation of the button.

Proposed changelog entry for your changes:

Notices: display more relevant notices depending on the Jetpack dashboard screen you visit.

jetpackbot · 2018-11-30T19:57:08Z

Thank you for the great PR description!

When this PR is ready for review, please apply the [Status] Needs Review label. If you are an a11n, please have someone from your team review the code if possible. The Jetpack team will also review this PR and merge it to be included in the next Jetpack release.

Scheduled Jetpack release: January 10, 2019.
Scheduled code freeze: January 3, 2019

Generated by 🚫 dangerJS

_inc/client/components/jitm/index.jsx

oskosk · 2018-11-30T20:02:14Z

_inc/client/components/jitm/style.scss is empty right now

_inc/client/state/reducer.js

oskosk · 2018-11-30T21:05:04Z

I'm seeing the message encoded. Maybe we can use lib/decode-entities/.

_inc/client/components/jitm/index.jsx

oskosk · 2018-11-30T21:36:32Z

We can split this work in two PRs at least. This is how we've done a few things...

One for Redux-related stuff (action, reducer selectors).
Another one for introducing the component.

It would be cool to at least provide one or two unit tests for the redux piece of code. they're straightforward if you take another one as example. This usually speeds up work because we can easily merge the redux work if the tests pass.

oskosk

I think I commented all of the previous things without using a Review.

_inc/client/components/jitm/index.jsx

oskosk

LGTM!

wrong tab

@jeherve

…he JITM component of the Jetpack Dashboard (Spin-off of #10759). (#10818) This PR is an extract of #10759 in order to simplify that PR and scope it to UI changes. Author: @jeherve #### Changes proposed in this Pull Request: * Introduces `_inc/client/state/jitm` and files for reducer, actions and tests. * Introduces method `fetchJitm` in the REST API client. #### Testing instructions: * Checkout this branch * Run `yarn test-client _inc/client/state/jitm/test/*` * Confirm tests pass #### Proposed changelog entry for your changes: None needed

jeherve · 2018-12-05T17:44:26Z

@AnnaMag @keoshi I'd be happy if you could give this a try when you get the chance! Thank you!

… of functions

This is only needed if one wants to refer to a prop after destructuring instead of referring to it as this.props.isModuleActivated, so to avoid collision of name scopes

oskosk

LGTM!

jeherve · 2018-12-07T18:45:59Z

Closing this in favor of #10889

…sed by the JITM component of the Jetpack Dashboard (Spin-off of #10759). (#10818)" This reverts commit dabff02. We will take a different approach, outlined in #10889

jeherve · 2018-12-07T18:49:17Z

Previous changes will be reverted in #10890

#### Changes proposed in this Pull Request: Revert "JITMs: add redux structure and REST API client method to be u…sed by the JITM component of the Jetpack Dashboard (Spin-off of #10759). (#10818)" This reverts commit dabff02. We will take a different approach, outlined in #10889 #### Testing instructions: * None #### Proposed changelog entry for your changes: * None

jeherve added [Status] In Progress Admin Page React-powered dashboard under the Jetpack menu [Feature] JITM Just In Time Messages - pop-up tips and suggestions that appear on the dashboard and sidebar. DO NOT MERGE don't merge it! labels Nov 30, 2018

jeherve self-assigned this Nov 30, 2018

jeherve requested a review from a team as a code owner November 30, 2018 19:53

jeherve mentioned this pull request Nov 30, 2018

JITM: detect that we are looking at the Plans page. #10407

Closed

oskosk reviewed Nov 30, 2018

View reviewed changes

_inc/client/components/jitm/index.jsx Show resolved Hide resolved

oskosk reviewed Nov 30, 2018

View reviewed changes

_inc/client/components/jitm/index.jsx Outdated Show resolved Hide resolved

oskosk reviewed Nov 30, 2018

View reviewed changes

_inc/client/state/reducer.js Outdated Show resolved Hide resolved

oskosk reviewed Nov 30, 2018

View reviewed changes

_inc/client/components/jitm/index.jsx Outdated Show resolved Hide resolved

oskosk requested changes Nov 30, 2018

View reviewed changes

_inc/client/components/jitm/index.jsx Outdated Show resolved Hide resolved

jeherve mentioned this pull request Dec 3, 2018

Should we hide JITMS during a customer's first session in the Jetpack dashboard? #10752

Closed

oskosk previously approved these changes Dec 4, 2018

View reviewed changes

jeherve force-pushed the add/jitm-component branch 2 times, most recently from 496f8dc to 4d18803 Compare December 4, 2018 12:33

oskosk mentioned this pull request Dec 4, 2018

JITMs: add redux structure and REST API client method to be used by the JITM component of the Jetpack Dashboard (Spin-off of #10759). #10818

Merged

jeherve force-pushed the add/jitm-component branch from 9035151 to 575efb0 Compare December 5, 2018 13:27

jeherve added 2 commits December 5, 2018 15:19

JITM: first pass at a query component to gather JITMs in JP dash.

a158ba8

Pass message path when fetching a JITM

9446595

jeherve added [Status] Needs Design Review Design has been added. Needs a review! and removed DO NOT MERGE don't merge it! [Status] In Progress labels Dec 5, 2018

jeherve requested review from keoshi and AnnaMag December 5, 2018 17:41

jeherve and others added 9 commits December 5, 2018 19:47

Don't attempt to display the message when it's still being fetched

d1b2bf9

Ensure CTA buttons are not all uppercase.

273e2c3

Hide the activate button once a module has been activated.

69c7fcf

Fix rendering of list items.

5ba060d

Use isModuleActivated and isActivatingModule as boolean props instead…

9234dca

… of functions

Remove unnecessary aliasing of isModuleActivated import

6479bb5

This is only needed if one wants to refer to a prop after destructuring instead of referring to it as this.props.isModuleActivated, so to avoid collision of name scopes

Use module_slug instead of activate_module as var name for readability

8f689f2

Prettier formatting

ea07bbe

Avoid trailing 0 when we have no list.

bd63fdc

oskosk approved these changes Dec 7, 2018

View reviewed changes

oskosk added [Status] Ready to Merge Go ahead, you can push that green button! and removed [Status] Needs Review To request a review from Crew. Label will be renamed soon. labels Dec 7, 2018

jeherve added [Status] Needs Review To request a review from Crew. Label will be renamed soon. [Status] In Progress and removed [Status] Ready to Merge Go ahead, you can push that green button! [Status] Needs Review To request a review from Crew. Label will be renamed soon. labels Dec 7, 2018

jeherve closed this Dec 7, 2018

jeherve mentioned this pull request Dec 7, 2018

JITMs: revert redux changes for new JITM component #10890

Merged

kraftbj deleted the add/jitm-component branch January 4, 2021 22:47

kraftbj removed the [Status] In Progress label Oct 8, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

JITMs: add component to be used in the Jetpack Dashboard. #10759

JITMs: add component to be used in the Jetpack Dashboard. #10759

jeherve commented Nov 30, 2018 •

edited

Loading

jetpackbot commented Nov 30, 2018

oskosk commented Nov 30, 2018

oskosk commented Nov 30, 2018

oskosk commented Nov 30, 2018

oskosk left a comment

oskosk left a comment

jeherve commented Dec 5, 2018

oskosk left a comment

jeherve commented Dec 7, 2018

jeherve commented Dec 7, 2018

JITMs: add component to be used in the Jetpack Dashboard. #10759

JITMs: add component to be used in the Jetpack Dashboard. #10759

Conversation

jeherve commented Nov 30, 2018 • edited Loading

Changes proposed in this Pull Request:

Testing instructions:

Known issues / To do:

Proposed changelog entry for your changes:

jetpackbot commented Nov 30, 2018

oskosk commented Nov 30, 2018

oskosk commented Nov 30, 2018

oskosk commented Nov 30, 2018

oskosk left a comment

Choose a reason for hiding this comment

oskosk left a comment

Choose a reason for hiding this comment

jeherve commented Dec 5, 2018

oskosk left a comment

Choose a reason for hiding this comment

jeherve commented Dec 7, 2018

jeherve commented Dec 7, 2018

jeherve commented Nov 30, 2018 •

edited

Loading