This repository has been archived by the owner on Mar 13, 2024. It is now read-only.
[MM-27526] Onboarding Flow for End Users #6296
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* WIP * WIP * [MM-26465] Background and general layout for cloud onboarding * Mobile view, lint and type fixes, added a test file for later use * More test fixes * UX feedback * Replaced dumb comment with useful one * Turn off graphic at 1020px * Lint fix * Update copy * PR feedback Co-authored-by: Mattermod <mattermod@users.noreply.github.com>
* WIP * WIP * [MM-26465] Background and general layout for cloud onboarding * Mobile view, lint and type fixes, added a test file for later use * More test fixes * UX feedback * Replaced dumb comment with useful one * Turn off graphic at 1020px * WIP * Initial card style * Collapse functionality (no animation) * WIP * Rest of accordion common component and some animation * Lint, type and test fixes * Updated snapshot * Reduce nesting * Merge'd * PR feedback * Fix box-shadow on collapsed state
* WIP * WIP * [MM-26465] Background and general layout for cloud onboarding * Mobile view, lint and type fixes, added a test file for later use * More test fixes * UX feedback * Replaced dumb comment with useful one * Turn off graphic at 1020px * WIP * Initial card style * Collapse functionality (no animation) * WIP * Rest of accordion common component and some animation * Lint, type and test fixes * Updated snapshot * Reduce nesting * WIP - Wiring for step wizard * Skip getting started link, hook for final page * Moved steps into its own constants file, type and test fixes * Shifted around the screen changing and added final screen placeholder * Translations and wizard navigation button styling * Pick starting step based on which are finished, button styling fixes * Allow for getting out of next steps view by switching channels * PR feedback * PR feedback * blank * Change style of complete card header to be more like the regular one * Fixed background on complete step * Merge'd * PR feedback * PR feedback * Removed translation * Fixed box shadow transition on card * Removed duplicate logic * PR feedback * PR feedback * Fixed hover state on completed cards * re-add margin on complete state
* Hooked up the sidebar next steps bar and some fixes * Integration of state into app for next steps view, close next steps view modal preliminary * Styling and help arrow for modal * Missed a translation * PR feedback * Center the next steps modal * PR feedback * Translation fix
* WIP * WIP * [MM-26465] Background and general layout for cloud onboarding * Mobile view, lint and type fixes, added a test file for later use * More test fixes * UX feedback * Replaced dumb comment with useful one * Turn off graphic at 1020px * WIP * Initial card style * Collapse functionality (no animation) * WIP * Rest of accordion common component and some animation * Lint, type and test fixes * Updated snapshot * Reduce nesting * WIP - Wiring for step wizard * Skip getting started link, hook for final page * Moved steps into its own constants file, type and test fixes * Shifted around the screen changing and added final screen placeholder * Translations and wizard navigation button styling * Pick starting step based on which are finished, button styling fixes * Allow for getting out of next steps view by switching channels * PR feedback * PR feedback * blank * Change style of complete card header to be more like the regular one * Fixed background on complete step * Merge'd * PR feedback * PR feedback * Removed translation * Fixed box shadow transition on card * Removed duplicate logic * WIP * Functional component that works * Styling and a couple tweaks * A few tests * Snapshots * Type and i18n fixes * PR feedback and test fixes * Added button hover states * PR feedback * Blur select button on select image * Blur on click, not on select image * Update components/picture_selector.tsx Co-authored-by: Nev Angelova <nevyana.angelova@mattermost.com> Co-authored-by: Nev Angelova <nevyana.angelova@mattermost.com>
* WIP * WIP * [MM-26465] Background and general layout for cloud onboarding * Mobile view, lint and type fixes, added a test file for later use * More test fixes * UX feedback * Replaced dumb comment with useful one * Turn off graphic at 1020px * WIP * Initial card style * Collapse functionality (no animation) * WIP * Rest of accordion common component and some animation * Lint, type and test fixes * Updated snapshot * Reduce nesting * WIP - Wiring for step wizard * Skip getting started link, hook for final page * Moved steps into its own constants file, type and test fixes * Shifted around the screen changing and added final screen placeholder * Translations and wizard navigation button styling * Pick starting step based on which are finished, button styling fixes * Allow for getting out of next steps view by switching channels * PR feedback * WIP * [MM-26472] Textbox Common Component for Cloud Onboarding * Specific styling for the Cloud Onboarding components * Added info component and some other styling * Fixed the error styling * Fixed most of the shifting in the textbox * Lint fix * PR feedback * blank * PR feedback * Change style of complete card header to be more like the regular one * Fixed background on complete step * Merge'd * PR feedback * PR feedback * Removed translation * PR feedback * Use box shadow instead of border for changing text input * Improved CSS from Asaad * Removed inner border when focused/error state * Removed unnecessary commented code * Merge'd * Switch to proper BEM
* Screen transitions for loading screen and final screen * Transition screen * Fixed APNG issue * Style for desktop and mobile * Fixed styling * More fixes * Functionality and test fixes * Dev PR feedback * UX PR feedback * UX feedback * Merge'd Co-authored-by: Mattermod <mattermod@users.noreply.github.com>
* WIP * WIP * [MM-26742] Functionality for Invite Members step, and most of styling * Beginning of common component, currently for use only in the Invite Members step * Cleanup * Couple small style fixes * Fixed the invite link at the bottom * Lint and test fixes * PR feedback * Fixed button width for copy link and fixed test
|
The 2 UX issues you mentioned should be fixed in the next spinwick @devinbinnie |
matthewbirtch
suggested changes
Aug 31, 2020
There was a problem hiding this comment.
Nice work @nickmisasi.
One thing that feels a bit odd is the transition of completing the 3rd step and then moving in to the 'Tips & Next Steps' section. To help this feel a bit less awkward, I'm hoping we can make the following tweaks....I thought @devinbinnie worked on this already, but maybe not:
- Animate the accordion to the completed state first before sliding in the next screen
- Then, when the 'loading' screen slides in, hold on it - you don't have time to read it at all right now. Hold for 3 seconds as per the note in the Figma file
- Then slide in the 'Tips & Next Steps Screen
This may take a bit of back-and-forth or working it out over a zoom call to get it right
Also...
- It looks like we transition to the complete state when I complete step 3. However, it shouldn't do that if steps 1 and 2 are note completed yet. We should only do the transition when all 3 steps are completed. Users can complete them in any order they choose.
- In the tips and next steps section the button for the 'See who else is here' says 'See shortcuts'. It should say ' View team members'
devinbinnie
approved these changes
Aug 31, 2020
marianunez
approved these changes
Aug 31, 2020
There was a problem hiding this comment.
Looks great @nickmisasi! Minor non-blocking comments below.
matthewbirtch
approved these changes
Aug 31, 2020
nickmisasi
added
4: Reviews Complete
mattermod
removed
the
Setup Cloud Test Server
|
Test server destroyed |
1 similar comment
|
Test server destroyed |
amyblais
added
Changelog/Not Needed
jfrerich
pushed a commit
that referenced
this pull request
Oct 23, 2020
* [MM-26468][MM-26483] Progress Bar Common Component/Sidebar Next Steps Component (#5865) * [MM-26483] Progress bar common component and PoC in the sidebar * Styling for the sidebar element and some tests * Added translations * Snapshot update * Style changes * Use same border design as channels * [MM-26465] Background and general layout for cloud onboarding (#5823) * WIP * WIP * [MM-26465] Background and general layout for cloud onboarding * Mobile view, lint and type fixes, added a test file for later use * More test fixes * UX feedback * Replaced dumb comment with useful one * Turn off graphic at 1020px * Lint fix * Update copy * PR feedback Co-authored-by: Mattermod <mattermod@users.noreply.github.com> * [MM-26480] Card/Accordion Common Component (#5861) * WIP * WIP * [MM-26465] Background and general layout for cloud onboarding * Mobile view, lint and type fixes, added a test file for later use * More test fixes * UX feedback * Replaced dumb comment with useful one * Turn off graphic at 1020px * WIP * Initial card style * Collapse functionality (no animation) * WIP * Rest of accordion common component and some animation * Lint, type and test fixes * Updated snapshot * Reduce nesting * Merge'd * PR feedback * Fix box-shadow on collapsed state * [MM-26470] Base Next Step Wizard Controller and Styling (#5893) * WIP * WIP * [MM-26465] Background and general layout for cloud onboarding * Mobile view, lint and type fixes, added a test file for later use * More test fixes * UX feedback * Replaced dumb comment with useful one * Turn off graphic at 1020px * WIP * Initial card style * Collapse functionality (no animation) * WIP * Rest of accordion common component and some animation * Lint, type and test fixes * Updated snapshot * Reduce nesting * WIP - Wiring for step wizard * Skip getting started link, hook for final page * Moved steps into its own constants file, type and test fixes * Shifted around the screen changing and added final screen placeholder * Translations and wizard navigation button styling * Pick starting step based on which are finished, button styling fixes * Allow for getting out of next steps view by switching channels * PR feedback * PR feedback * blank * Change style of complete card header to be more like the regular one * Fixed background on complete step * Merge'd * PR feedback * PR feedback * Removed translation * Fixed box shadow transition on card * Removed duplicate logic * PR feedback * PR feedback * Fixed hover state on completed cards * re-add margin on complete state * [MM-26466] Close Next Steps Modal and functionality (#5995) * Hooked up the sidebar next steps bar and some fixes * Integration of state into app for next steps view, close next steps view modal preliminary * Styling and help arrow for modal * Missed a translation * PR feedback * Center the next steps modal * PR feedback * Translation fix * Screen transitions for loading screen and final screen * Transition screen * Fixed APNG issue * Style for desktop and mobile * Fixed styling * More fixes * Functionality and test fixes * Dev PR feedback * UX PR feedback * [MM-27164] Picture Selector Common Component (#5973) * WIP * WIP * [MM-26465] Background and general layout for cloud onboarding * Mobile view, lint and type fixes, added a test file for later use * More test fixes * UX feedback * Replaced dumb comment with useful one * Turn off graphic at 1020px * WIP * Initial card style * Collapse functionality (no animation) * WIP * Rest of accordion common component and some animation * Lint, type and test fixes * Updated snapshot * Reduce nesting * WIP - Wiring for step wizard * Skip getting started link, hook for final page * Moved steps into its own constants file, type and test fixes * Shifted around the screen changing and added final screen placeholder * Translations and wizard navigation button styling * Pick starting step based on which are finished, button styling fixes * Allow for getting out of next steps view by switching channels * PR feedback * PR feedback * blank * Change style of complete card header to be more like the regular one * Fixed background on complete step * Merge'd * PR feedback * PR feedback * Removed translation * Fixed box shadow transition on card * Removed duplicate logic * WIP * Functional component that works * Styling and a couple tweaks * A few tests * Snapshots * Type and i18n fixes * PR feedback and test fixes * Added button hover states * PR feedback * Blur select button on select image * Blur on click, not on select image * Update components/picture_selector.tsx Co-authored-by: Nev Angelova <nevyana.angelova@mattermost.com> Co-authored-by: Nev Angelova <nevyana.angelova@mattermost.com> * [MM-26482] Textbox Common Component for Cloud Onboarding (#5904) * WIP * WIP * [MM-26465] Background and general layout for cloud onboarding * Mobile view, lint and type fixes, added a test file for later use * More test fixes * UX feedback * Replaced dumb comment with useful one * Turn off graphic at 1020px * WIP * Initial card style * Collapse functionality (no animation) * WIP * Rest of accordion common component and some animation * Lint, type and test fixes * Updated snapshot * Reduce nesting * WIP - Wiring for step wizard * Skip getting started link, hook for final page * Moved steps into its own constants file, type and test fixes * Shifted around the screen changing and added final screen placeholder * Translations and wizard navigation button styling * Pick starting step based on which are finished, button styling fixes * Allow for getting out of next steps view by switching channels * PR feedback * WIP * [MM-26472] Textbox Common Component for Cloud Onboarding * Specific styling for the Cloud Onboarding components * Added info component and some other styling * Fixed the error styling * Fixed most of the shifting in the textbox * Lint fix * PR feedback * blank * PR feedback * Change style of complete card header to be more like the regular one * Fixed background on complete step * Merge'd * PR feedback * PR feedback * Removed translation * PR feedback * Use box shadow instead of border for changing text input * Improved CSS from Asaad * Removed inner border when focused/error state * Removed unnecessary commented code * Merge'd * Switch to proper BEM * Adding a card for opening and setting preferences * Adding files * [MM-26469] Complete Profile Step (#6077) * [MM-26469] Complete Profile Step * Lint fix * [MM-26473] Tips and Next Steps screen (#6020) * Screen transitions for loading screen and final screen * Transition screen * Fixed APNG issue * Style for desktop and mobile * Fixed styling * More fixes * Functionality and test fixes * Dev PR feedback * UX PR feedback * UX feedback * Merge'd Co-authored-by: Mattermod <mattermod@users.noreply.github.com> * [MM-26471] Team Profile Setup step (#6083) * [MM-26471] Team Profile Setup step * Translation fix * PR feedback * Fixed an issue with an older version of the styles * Removed commented code * [MM-26472] Invite Members step (#6143) * WIP * WIP * [MM-26742] Functionality for Invite Members step, and most of styling * Beginning of common component, currently for use only in the Invite Members step * Cleanup * Couple small style fixes * Fixed the invite link at the bottom * Lint and test fixes * PR feedback * Fixed button width for copy link and fixed test * [MM-27908] Updated Cloud Logo (#6190) * [MM-27908] Updated Cloud Logo * Remove extra prop * Type fix * [MM-27907] Fixed input focus colour and fixed placeholder focus on multi_input (#6182) * [MM-27907] Fixed input focus colour and fixed placeholder focus on multi_input * PR feedback * [MM-27159] Button States for Cloud Onboarding (#6189) * [MM-27159] Button States * PR feedback * [MM-27305] Card Component Refactor for smoothness (#6172) * Refactor Card component to be more responsive and robust * Cleanup and a couple other bug fixes * [MM-27974] Unit Tests for Cloud Onboarding (#6208) * [MM-27974] Unit Tests for Cloud Onboarding * Translation fix * [MM-27923] Turn on Cloud Onboarding for Cloud-only instances (#6225) * Flow working, pre cleanup, pre merge of Devin's work * Code clean up * Adding tests for my added components * Put package-lock back to master * Fix bug that always redirects you to the next steps page * Change function name to avoid confusion * Code clean up, and this dang package-lock * Fix one of the test issues * Fix other tests * fix alignment of body text in text_card_with_action component * Fix a few issues in PR review * pushing to get help * Fixes and updating tests * Fix package-lock * Fix package-lock * Remove package-lock changes * Increase transition time from 1 second to 3 seconds * Some fixes for UX * add 2 tests to be sure that step filter logic is working based on user roles * Fix tests * Fix test Co-authored-by: Devin Binnie <52460000+devinbinnie@users.noreply.github.com> Co-authored-by: Mattermod <mattermod@users.noreply.github.com> Co-authored-by: Devin Binnie <devin.binnie@mattermost.com> Co-authored-by: Nev Angelova <nevyana.angelova@mattermost.com>
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
When an end user logs in to mattermost for the first time, we want to greet them with an onboarding flow. This PR adds a few steps to Devin's work that reveals cards with end-user specific actions on them.
Setting up your profile
Enable desktop notifications
Set preferences
Once these are complete (or skipped) the user will be shown some end-user specific tips. Currently, these are:
Browse Channels
See who's here
Keyboard shortcuts
Each of these cards has buttons that will open a modal for each action.
note: When using the Turn on notifications button, this will only request access on your first try for your entire browser. It is not per user. If you have already enabled notifications you will see a notification, rather than having permission requested.
Ticket Link
https://mattermost.atlassian.net/browse/MM-27526
Related Pull Requests
Screenshots