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

Add old UI component to suggest new UI #4888

Merged
merged 11 commits into from
Jul 31, 2018

Conversation

whymarrh
Copy link
Contributor

@whymarrh whymarrh commented Jul 26, 2018

Resolves #4811
Resolves #4896

This PR adds components to the old UI to suggest users try the new UI. There are two new components here, as per @cjeria's design in #4811:

  1. A full-popup announcement of the new version, close-able by the user and only seen once
  2. A persistent banner in the old UI noting that there's a new UI available

(The commits in this PR add the components in some order, feel free to read commit-by-commit.)

Screenshots of the new flow
I rewrote the old UI's QR screen to not use absolute positioning, it looks the same

I also removed the "in development" banner from atop the on-boarding flow of the new UI.

Remaining tasks:

  • Move strings out for translations? The old UI isn't localized
  • Fix e2e tests 😩
  • Have the new UI open in a new, full tab

@whymarrh whymarrh requested review from danjm and alextsg July 26, 2018 05:00
@danjm
Copy link
Contributor

danjm commented Jul 26, 2018

@whymarrh Here are some e2e test fixes: https://github.com/MetaMask/metamask-extension/tree/suggest-new-ui-e2e-fixes (I couldn't make PR against this branch because it is from your fork)

@whymarrh whymarrh force-pushed the suggest-new-ui branch 4 times, most recently from a556ebb to 7eb4535 Compare July 27, 2018 23:08
danjm
danjm previously approved these changes Jul 28, 2018
@danjm
Copy link
Contributor

danjm commented Jul 28, 2018

Approved. +5 points for the commit messages towards the end. +50 points for describing the futility of one of the commits in the commit message.


renderMultiMessage = () => {
const {Qr} = this.props
return Qr.message.map((message) => h('.qr-message', message))
Copy link
Contributor

Choose a reason for hiding this comment

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

Does this need a key prop?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This lead me to discover that this isn't ever hit in the old UI as showQrView is only ever dispatched with the identity from state.

$ git grep showQrView
old-ui/app/components/account-dropdowns.js:205:              actions.showQrView(selected, identity ? identity.name : '')
old-ui/app/components/account-dropdowns.js:314:      showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)),

So I'll remove this branch.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

But yes, it should've had a key prop for consistency sake

whymarrh and others added 11 commits July 28, 2018 11:59
The old QR screen was absolutely positioning everything which broke when
the app bar resized for the new UI announcement. This change, while futile*,
makes the QR screen less bad.

* futile because the old UI is being deprecated
When a user has opted-in to the new UI from the announcement, we don't
need an additional notification letting the user know that they've
switched.
@whymarrh whymarrh merged commit 4f02726 into MetaMask:develop Jul 31, 2018
@whymarrh whymarrh deleted the suggest-new-ui branch July 31, 2018 17:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
3 participants