[MM-24708] Added What's New modal for Channel Sidebar Phase 2 changes #5883

devinbinnie · 2020-07-09T20:17:03Z

Summary

Copy of #5711 that was closed due to the feature branch being deleted.
See there for details.

Ticket Link

https://mattermost.atlassian.net/browse/MM-24708

esethna · 2020-07-09T20:57:29Z

Awaiting the updated GIF (blocked on working out bugs with sidebar before we capture it)

components/generic_modal.tsx

nevyangelova · 2020-07-13T11:42:34Z

components/generic_modal.tsx

+ show: boolean;
+}
+
+export default class GenericModal extends React.PureComponent<Props, State> {


What is the benefit of a class vs. functional component here?

Maybe I'm not understanding functional components properly. but this component does have some internal logic and state that need to be defined, so I didn't think that was possible with an FC.

My idea was to try move towards FC with the use of React hooks. You can achieve all that using this unless you are exposing the instance methods via refs (we should also try avoiding that btw :P). But I won't block this PR.

Do you feel like it's worth reworking this component to do that? I'm not sure about the effort since I haven't worked with hooks yet, but I guess I need to try it out at some point.

No you are right, I won't block this PR but we can discuss in the Hangouts how we wan't to proceed with hooks and FC.

components/edit_category_modal/edit_category_modal.tsx

components/sidebar/sidebar_whats_new_modal/sidebar_whats_new_modal.tsx

hmhealey · 2020-07-18T00:24:49Z

@andrewbrown00 Here's the modal with the preview gif. How's it look?

andrewbrown00 · 2020-07-18T02:45:48Z

Thanks @hmhealey, will you make the GIF wider to align to the right edge of the button; so the padding is equal on the left and right side of the GIF.

It’s fine if the modal gets a bit taller.

hmhealey · 2020-07-18T13:45:24Z

I removed the fixed height from the image and made sure it scaled down properly on smaller screens.

hmhealey · 2020-07-20T15:45:00Z

Andrew pointed out that this opens up immediately when the user enables the sidebar from Account Settings. I'm going to see if there's a way to delay it until either the Account Settings closes or the user next refreshes. Ideally, we'd show it after the modal closes, but if there's no easy way to do that, then next refresh might be okay.

prapti · 2020-07-21T00:59:49Z

In testing queue.

hmhealey · 2020-07-21T17:50:31Z

Having the What's New modal appear over the Account Settings modal is a bit weird, but we've decided to leave it as-is for 5.26. We've filed a follow up to possibly change it in the future: https://mattermost.atlassian.net/browse/MM-27163

prapti

"What's New" modal works as expected. Tested in Chrome, Firefox, Safari and Desktop app, both as system admin and regular user.
Approving.

mm-cloud-bot · 2020-07-22T00:44:46Z

Test server destroyed

mattermod · 2020-07-22T13:44:09Z

@devinbinnie
Error trying doing the automated Cherry picking. Please do this manually

+++ Updating remotes...
Fetching upstream
Fetching origin
+++ Updating remotes done...
+++ Creating local branch automated-cherry-pick-of-#5883-upstream-release-5.26-1595425446
Branch 'automated-cherry-pick-of-#5883-upstream-release-5.26-1595425446' set up to track remote branch 'release-5.26' from 'upstream'.
+++ Downloading patch to /tmp/5883.patch (in case you need to do this again)

+++ About to attempt cherry pick of PR. To reattempt:
  $ git am -3 /tmp/5883.patch

Applying: Genericized new modal design into component
Using index info to reconstruct a base tree...
M	i18n/en.json
Falling back to patching base and 3-way merge...
Auto-merging i18n/en.json
Applying: Architecture and functionality for What's New modal
Using index info to reconstruct a base tree...
M	i18n/en.json
Falling back to patching base and 3-way merge...
Auto-merging i18n/en.json
Applying: Added tests for generic modal and lint/type fixes
Applying: Styling of what's new modal
Using index info to reconstruct a base tree...
M	i18n/en.json
Falling back to patching base and 3-way merge...
Auto-merging i18n/en.json
Applying: Update redux to use new constants
Applying: Removed debug code
Applying: PR feedback
Applying: Bug fix and moved to ModalController
Using index info to reconstruct a base tree...
M	components/sidebar/index.ts
M	components/sidebar/sidebar.tsx
M	utils/constants.jsx
Falling back to patching base and 3-way merge...
Auto-merging utils/constants.jsx
Auto-merging components/sidebar/sidebar.tsx
Auto-merging components/sidebar/index.ts
CONFLICT (content): Merge conflict in components/sidebar/index.ts
Patch failed at 0008 Bug fix and moved to ModalController
Use 'git am --show-current-patch' to see the failed patch
When you have resolved this problem, run "git am --continue".
If you prefer to skip this patch, run "git am --skip" instead.
To restore the original branch and stop patching, run "git am --abort".

+++ Conflicts detected:

UU components/sidebar/index.ts

+++ Aborting in-progress git am.

+++ Returning you to the master branch and cleaning up.

…#5883) * Genericized new modal design into component * Architecture and functionality for What's New modal * Added tests for generic modal and lint/type fixes * Styling of what's new modal * Update redux to use new constants * Removed debug code * PR feedback * Bug fix and moved to ModalController * Use React.ReactNode instead of string | JSX.Element * Address feedback * Add example gif * Remove fixed height on What's New image and fix modal size on mobile Co-authored-by: Harrison Healey <[email protected]>

hmhealey · 2020-07-22T13:53:32Z

Manually cherry-picked onto release-5.26

devinbinnie added 7 commits July 9, 2020 16:14

Genericized new modal design into component

6aebad2

Architecture and functionality for What's New modal

01d1bbc

Added tests for generic modal and lint/type fixes

412f2cc

Styling of what's new modal

d919ce2

Update redux to use new constants

882b9b9

Removed debug code

0d939dc

PR feedback

323a6cb

devinbinnie added 2: Dev Review Requires review by a core commiter 3: QA Review Requires review by a QA tester labels Jul 9, 2020

devinbinnie requested review from hmhealey, nevyangelova and jgilliam17 July 9, 2020 20:17

esethna added the Do Not Merge Should not be merged until this label is removed label Jul 9, 2020

esethna added this to the v5.26 milestone Jul 9, 2020

Bug fix and moved to ModalController

7739fae

hmhealey reviewed Jul 10, 2020

View reviewed changes

components/generic_modal.tsx Outdated Show resolved Hide resolved

Use React.ReactNode instead of string | JSX.Element

abac826

devinbinnie requested a review from hmhealey July 10, 2020 14:52

nevyangelova reviewed Jul 13, 2020

View reviewed changes

hmhealey added 3 commits July 17, 2020 19:17

Merge branch 'master' into MM-24708

5b764ad

Address feedback

51ef810

Add example gif

80bd6bb

hmhealey added CherryPick/Approved Meant for the quality or patch release tracked in the milestone and removed Do Not Merge Should not be merged until this label is removed labels Jul 18, 2020

hmhealey approved these changes Jul 18, 2020

View reviewed changes

hmhealey requested a review from nevyangelova July 18, 2020 00:25

nevyangelova approved these changes Jul 18, 2020

View reviewed changes

Remove fixed height on What's New image and fix modal size on mobile

6ecafaa

Merge branch 'master' into MM-24708

caab6e2

andrewbrown00 added the Setup Cloud Test Server Setup a test server using Mattermost Cloud label Jul 19, 2020

hmhealey removed the 2: Dev Review Requires review by a core commiter label Jul 20, 2020

hmhealey requested review from prapti and removed request for jgilliam17 July 20, 2020 13:17

hmhealey self-assigned this Jul 20, 2020

prapti approved these changes Jul 22, 2020

View reviewed changes

prapti added 4: Reviews Complete All reviewers have approved the pull request and removed 3: QA Review Requires review by a QA tester Setup Cloud Test Server Setup a test server using Mattermost Cloud labels Jul 22, 2020

Merge branch 'master' into MM-24708

35ebfc3

hmhealey merged commit 0ded2cf into mattermost:master Jul 22, 2020

hmhealey added CherryPick/Done Successfully cherry-picked to the quality or patch release tracked in the milestone and removed CherryPick/Approved Meant for the quality or patch release tracked in the milestone labels Jul 22, 2020

amyblais added Changelog/Not Needed Does not require a changelog entry Docs/Not Needed Does not require documentation labels Jul 22, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[MM-24708] Added What's New modal for Channel Sidebar Phase 2 changes #5883

[MM-24708] Added What's New modal for Channel Sidebar Phase 2 changes #5883

devinbinnie commented Jul 9, 2020

esethna commented Jul 9, 2020

nevyangelova Jul 13, 2020

devinbinnie Jul 13, 2020

nevyangelova Jul 13, 2020

devinbinnie Jul 13, 2020

nevyangelova Jul 13, 2020

hmhealey commented Jul 18, 2020

andrewbrown00 commented Jul 18, 2020 •

edited

Loading

hmhealey commented Jul 18, 2020

hmhealey commented Jul 20, 2020

prapti commented Jul 21, 2020

hmhealey commented Jul 21, 2020

prapti left a comment

mm-cloud-bot commented Jul 22, 2020

mattermod commented Jul 22, 2020

hmhealey commented Jul 22, 2020

[MM-24708] Added What's New modal for Channel Sidebar Phase 2 changes #5883

[MM-24708] Added What's New modal for Channel Sidebar Phase 2 changes #5883

Conversation

devinbinnie commented Jul 9, 2020

Summary

Ticket Link

esethna commented Jul 9, 2020

nevyangelova Jul 13, 2020

Choose a reason for hiding this comment

devinbinnie Jul 13, 2020

Choose a reason for hiding this comment

nevyangelova Jul 13, 2020

Choose a reason for hiding this comment

devinbinnie Jul 13, 2020

Choose a reason for hiding this comment

nevyangelova Jul 13, 2020

Choose a reason for hiding this comment

hmhealey commented Jul 18, 2020

andrewbrown00 commented Jul 18, 2020 • edited Loading

hmhealey commented Jul 18, 2020

hmhealey commented Jul 20, 2020

prapti commented Jul 21, 2020

hmhealey commented Jul 21, 2020

prapti left a comment

Choose a reason for hiding this comment

mm-cloud-bot commented Jul 22, 2020

mattermod commented Jul 22, 2020

hmhealey commented Jul 22, 2020

andrewbrown00 commented Jul 18, 2020 •

edited

Loading