[MM-26466] Close Next Steps Modal and functionality #5995

devinbinnie · 2020-07-24T19:48:57Z

Summary

This PR includes the Remove Tips and Next Steps modal that pops up when the 'x' is clicked in the sidebar element.
It also includes the logic to hide/remove the next steps view and the LHS element when this is used.

Ticket Link

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

…iew modal preliminary

stevemudie

LGTM

matthewbirtch · 2020-07-27T13:19:05Z

@devinbinnie I'm not seeing a sidebar element in the LHS to test this:

devinbinnie · 2020-07-27T13:20:15Z

@devinbinnie I'm not seeing a sidebar element in the LHS to test this:

@matthewbirtch Sorry, forgot it's only on the new sidebar. Should be there now.

matthewbirtch

Thanks @devinbinnie.

The modal window should be vertically and horizontally centered on the viewport. It looks to be horizontally centered, but not vertically
The highlighted area is not positioned properly. The hand-drawn circle should be on top of the hamburger icon
Looks like the highlighted area got added to the What's New modal as well
Depending on the state of this page, can we change the name? For the initial 3 steps, this section is called 'Getting Started' and once you've completed or skipped this, it changes to 'Tips & Next Steps'. So, the sidebar element needs to reflect that and so does the modal headline and help text next to the arrow.
Need hover states on the 'Cancel' and 'Remove' buttons - but I believe that's coming in a different PR
For the text next to the arrow, let's change it to "Access Tips & Next Steps any time through the Main Menu" - To be confirmed where it will appear in the menu
The x icon on the modal looks like it's the wrong opacity. The color is set to .56 opacity, but there must be a mother opacity on it somewhere. The same problem appears in the channel switcher modal as well, so it may be an older artifact.

devinbinnie · 2020-07-27T20:11:34Z

Thanks @devinbinnie.

The modal window should be vertically and horizontally centered on the viewport. It looks to be horizontally centered, but not vertically

The highlighted area is not positioned properly. The hand-drawn circle should be on top of the hamburger icon

I neglected to account for the team sidebar missing or not, fixed.

Looks like the highlighted area got added to the What's New modal as well

Bad scoping of CSS, fixed.

Depending on the state of this page, can we change the name? For the initial 3 steps, this section is called 'Getting Started' and once you've completed or skipped this, it changes to 'Tips & Next Steps'. So, the sidebar element needs to reflect that and so does the modal headline and help text next to the arrow.

Done!

Need hover states on the 'Cancel' and 'Remove' buttons - but I believe that's coming in a different PR

Yeah I can do this when I do the Hover State for Buttons ticket.

For the text next to the arrow, let's change it to "Access Tips & Next Steps any time through the Main Menu" - To be confirmed where it will appear in the menu

Done!

The x icon on the modal looks like it's the wrong opacity. The color is set to .56 opacity, but there must be a mother opacity on it somewhere. The same problem appears in the channel switcher modal as well, so it may be an older artifact.

Is this an issue on the Create Category modal as well? If so I should fix in another ticket for the GenericModal component.

matthewbirtch · 2020-07-27T20:25:21Z

The modal window should be vertically and horizontally centered on the viewport. It looks to be horizontally centered, but not vertically

Looks like it's still not vertically centered

devinbinnie · 2020-07-28T13:17:00Z

The modal window should be vertically and horizontally centered on the viewport. It looks to be horizontally centered, but not vertically

Looks like it's still not vertically centered

@matthewbirtch Sorry missed that, fixed now.

nevyangelova · 2020-07-28T13:09:42Z

components/sidebar/sidebar_next_steps/close_next_steps_modal.scss

+        text-align: center;
+        padding-bottom: 8px;
+
+        h1 {


3/5 prefer the use of class names to avoid clashes.

It's wrapped in a class for this modal already, so unless we have 2 h1s in the header, this can't clash with anything.

nevyangelova · 2020-07-28T13:17:14Z

components/sidebar/sidebar_next_steps/close_next_steps_modal.tsx

+    onCancel: () => void;
+}
+
+export default function CloseNextStepsModal(props: Props) {


Can we rename this to "RemoveNextStepsModal" ? Initially it was a bit confusing because it gave me the idea that it's a 'Close button' component.

nevyangelova · 2020-07-28T13:18:58Z

components/sidebar/sidebar_next_steps/index.ts

+    const getCategory = makeGetCategory();
+
+    return (state: GlobalState) => ({
+        active: state.views.nextSteps.show,


can we rename this to 'shown' ?

matthewbirtch

Looks great! Thanks @devinbinnie

mm-cloud-bot · 2020-07-28T16:42:58Z

Test server destroyed

mm-cloud-bot · 2020-07-28T16:42:58Z

Test server destroyed

* [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 * [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 * [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) * [MM-28099] Menu Item to return to Getting Started (#6276) * [MM-28099] Menu Item to return to Getting Started * Translation fix * Test fixes * [MM-28107] Refactor MoreChannels and NewChannelsFlow modals and add them to next_steps_tips (#6279) * [MM-28107] Refactor MoreChannels and NewChannelsFlow modals and add them to next_steps_tips * Translation fix * Test and type fixes * More test fixes * [MM-26477] E2E tests and fixes for Cloud Onboarding - sysadmin (#6269) * [MM-26477] E2E tests and fixes for Cloud Onboarding - sysadmin * Changed copy link method and added test for Copy Invite Link * Snapshot update * Test including the Getting started menu item * PR feedback * Quick fix Co-authored-by: Mattermod <mattermod@users.noreply.github.com> Co-authored-by: Nev Angelova <nevyana.angelova@mattermost.com>

* [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>

* [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 * [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 * [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 * WIP * WIP * Final screens WIP * WIP * Lot's of CSS fixes, some SVG's added, general cleanup * Adding translations all over * Have the user_limit_modal component open the PurchaseModal when upgrade button is clicked * merge master (banners), hook up announcement banner 'Upgrade Mattermost Cloud' button * Fix issue with optional subtitle prop in IconMessage * Fix linter * Fix i18n * Fix a bunch of types * Fix country sort definitions * fix most type issues * Fix flow * Fix lint * Fix isDevMode * Fix lint * Attempt at fixing error with payment processing * fix weird issue with padding * remove main menu item * Few changes for MR review * Theme changes * Appease the pipeline gods * some fixes * Fixing card input typescript issue * First batch of CSS fixes * Fix CSS on progress and success screens * Update redux, fix tsc * Fix pipeline * Fix placeholder text colour * fix credit card entry error state * Some changes * One more change * Fixed one issue * Some more fixes * Dropdown styling * Integrate state/province selector with Devin's common component * Fix pipeline * fix i18n * Add types/cloud/sku, remove the customer type in favour of mattermost-redux versiong * Delete customer.ts * Couple UX fixes * One more fix * Adding lower right blue dots * Remove comment * Update components/payment_form/card_input.css Co-authored-by: Devin Binnie <52460000+devinbinnie@users.noreply.github.com> * Update components/payment_form/payment_form.scss Co-authored-by: Devin Binnie <52460000+devinbinnie@users.noreply.github.com> * Bunch of changes for PR * More code changes * Remove debug logs * Changes for PR review * Fix i18n * Fixes for PR * Localize * Fixes for PR 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> Co-authored-by: marianunez <maria.nunez@mattermost.com>

* [MM-26468][MM-26483] Progress Bar Common Component/Sidebar Next Steps Component (mattermost#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 (mattermost#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 (mattermost#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 (mattermost#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 (mattermost#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 * [MM-27164] Picture Selector Common Component (mattermost#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 (mattermost#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 * [MM-26469] Complete Profile Step (mattermost#6077) * [MM-26469] Complete Profile Step * Lint fix * [MM-26473] Tips and Next Steps screen (mattermost#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 (mattermost#6083) * [MM-26471] Team Profile Setup step * Translation fix * PR feedback * Fixed an issue with an older version of the styles * Removed commented code * WIP * WIP * Final screens WIP * WIP * Lot's of CSS fixes, some SVG's added, general cleanup * Adding translations all over * Have the user_limit_modal component open the PurchaseModal when upgrade button is clicked * merge master (banners), hook up announcement banner 'Upgrade Mattermost Cloud' button * Fix issue with optional subtitle prop in IconMessage * Fix linter * Fix i18n * Fix a bunch of types * Fix country sort definitions * fix most type issues * Fix flow * Fix lint * Fix isDevMode * Fix lint * Attempt at fixing error with payment processing * fix weird issue with padding * remove main menu item * Few changes for MR review * Theme changes * Appease the pipeline gods * some fixes * Fixing card input typescript issue * First batch of CSS fixes * Fix CSS on progress and success screens * Update redux, fix tsc * Fix pipeline * Fix placeholder text colour * fix credit card entry error state * Some changes * One more change * Fixed one issue * Some more fixes * Dropdown styling * Integrate state/province selector with Devin's common component * Fix pipeline * fix i18n * Add types/cloud/sku, remove the customer type in favour of mattermost-redux versiong * Delete customer.ts * Couple UX fixes * One more fix * Adding lower right blue dots * Remove comment * Update components/payment_form/card_input.css Co-authored-by: Devin Binnie <52460000+devinbinnie@users.noreply.github.com> * Update components/payment_form/payment_form.scss Co-authored-by: Devin Binnie <52460000+devinbinnie@users.noreply.github.com> * Bunch of changes for PR * More code changes * Remove debug logs * Changes for PR review * Fix i18n * Fixes for PR * Localize * Fixes for PR 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> Co-authored-by: marianunez <maria.nunez@mattermost.com> (cherry picked from commit 7b7607d)

* [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 * [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 * [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 * WIP * WIP * Final screens WIP * WIP * Lot's of CSS fixes, some SVG's added, general cleanup * Adding translations all over * Have the user_limit_modal component open the PurchaseModal when upgrade button is clicked * merge master (banners), hook up announcement banner 'Upgrade Mattermost Cloud' button * Fix issue with optional subtitle prop in IconMessage * Fix linter * Fix i18n * Fix a bunch of types * Fix country sort definitions * fix most type issues * Fix flow * Fix lint * Fix isDevMode * Fix lint * Attempt at fixing error with payment processing * fix weird issue with padding * remove main menu item * Few changes for MR review * Theme changes * Appease the pipeline gods * some fixes * Fixing card input typescript issue * First batch of CSS fixes * Fix CSS on progress and success screens * Update redux, fix tsc * Fix pipeline * Fix placeholder text colour * fix credit card entry error state * Some changes * One more change * Fixed one issue * Some more fixes * Dropdown styling * Integrate state/province selector with Devin's common component * Fix pipeline * fix i18n * Add types/cloud/sku, remove the customer type in favour of mattermost-redux versiong * Delete customer.ts * Couple UX fixes * One more fix * Adding lower right blue dots * Remove comment * Update components/payment_form/card_input.css Co-authored-by: Devin Binnie <52460000+devinbinnie@users.noreply.github.com> * Update components/payment_form/payment_form.scss Co-authored-by: Devin Binnie <52460000+devinbinnie@users.noreply.github.com> * Bunch of changes for PR * More code changes * Remove debug logs * Changes for PR review * Fix i18n * Fixes for PR * Localize * Fixes for PR 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> Co-authored-by: marianunez <maria.nunez@mattermost.com> (cherry picked from commit 7b7607d) Co-authored-by: Nick Misasi <nick.misasi@mattermost.com>

* [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>

* [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 * [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 * [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 * WIP * WIP * Final screens WIP * WIP * Lot's of CSS fixes, some SVG's added, general cleanup * Adding translations all over * Have the user_limit_modal component open the PurchaseModal when upgrade button is clicked * merge master (banners), hook up announcement banner 'Upgrade Mattermost Cloud' button * Fix issue with optional subtitle prop in IconMessage * Fix linter * Fix i18n * Fix a bunch of types * Fix country sort definitions * fix most type issues * Fix flow * Fix lint * Fix isDevMode * Fix lint * Attempt at fixing error with payment processing * fix weird issue with padding * remove main menu item * Few changes for MR review * Theme changes * Appease the pipeline gods * some fixes * Fixing card input typescript issue * First batch of CSS fixes * Fix CSS on progress and success screens * Update redux, fix tsc * Fix pipeline * Fix placeholder text colour * fix credit card entry error state * Some changes * One more change * Fixed one issue * Some more fixes * Dropdown styling * Integrate state/province selector with Devin's common component * Fix pipeline * fix i18n * Add types/cloud/sku, remove the customer type in favour of mattermost-redux versiong * Delete customer.ts * Couple UX fixes * One more fix * Adding lower right blue dots * Remove comment * Update components/payment_form/card_input.css Co-authored-by: Devin Binnie <52460000+devinbinnie@users.noreply.github.com> * Update components/payment_form/payment_form.scss Co-authored-by: Devin Binnie <52460000+devinbinnie@users.noreply.github.com> * Bunch of changes for PR * More code changes * Remove debug logs * Changes for PR review * Fix i18n * Fixes for PR * Localize * Fixes for PR 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> Co-authored-by: marianunez <maria.nunez@mattermost.com>

devinbinnie added 4 commits July 24, 2020 10:39

Hooked up the sidebar next steps bar and some fixes

00655de

Integration of state into app for next steps view, close next steps v…

b3949f3

…iew modal preliminary

Styling and help arrow for modal

b75bda7

Missed a translation

1f0cb85

devinbinnie added 2: Dev Review Requires review by a core commiter 3: QA Review Requires review by a QA tester 1: UX Review Requires review by a UX Designer labels Jul 24, 2020

devinbinnie requested review from reflog, matthewbirtch, stevemudie and nevyangelova July 24, 2020 19:48

matthewbirtch added the Setup Cloud Test Server Setup a test server using Mattermost Cloud label Jul 24, 2020

reflog approved these changes Jul 25, 2020

View reviewed changes

stevemudie approved these changes Jul 27, 2020

View reviewed changes

matthewbirtch suggested changes Jul 27, 2020

View reviewed changes

PR feedback

29c0f9b

devinbinnie requested a review from matthewbirtch July 27, 2020 20:11

devinbinnie removed the 3: QA Review Requires review by a QA tester label Jul 27, 2020

Center the next steps modal

ccba981

nevyangelova reviewed Jul 28, 2020

View reviewed changes

PR feedback

69ece1b

matthewbirtch approved these changes Jul 28, 2020

View reviewed changes

devinbinnie removed the 1: UX Review Requires review by a UX Designer label Jul 28, 2020

devinbinnie requested a review from nevyangelova July 28, 2020 15:08

nevyangelova approved these changes Jul 28, 2020

View reviewed changes

devinbinnie added 4: Reviews Complete All reviewers have approved the pull request and removed 2: Dev Review Requires review by a core commiter labels Jul 28, 2020

Translation fix

ddc579f

devinbinnie merged commit 77f56af into mattermost:feature/cloud-onboarding Jul 28, 2020

mattermod removed the Setup Cloud Test Server Setup a test server using Mattermost Cloud label Jul 28, 2020

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[MM-26466] Close Next Steps Modal and functionality #5995

[MM-26466] Close Next Steps Modal and functionality #5995

devinbinnie commented Jul 24, 2020

stevemudie left a comment

matthewbirtch commented Jul 27, 2020

devinbinnie commented Jul 27, 2020 •

edited

Loading

matthewbirtch left a comment

devinbinnie commented Jul 27, 2020

matthewbirtch commented Jul 27, 2020

devinbinnie commented Jul 28, 2020 •

edited

Loading

nevyangelova Jul 28, 2020

devinbinnie Jul 28, 2020

nevyangelova Jul 28, 2020

nevyangelova Jul 28, 2020

matthewbirtch left a comment

mm-cloud-bot commented Jul 28, 2020

mm-cloud-bot commented Jul 28, 2020

[MM-26466] Close Next Steps Modal and functionality #5995

[MM-26466] Close Next Steps Modal and functionality #5995

Conversation

devinbinnie commented Jul 24, 2020

Summary

Ticket Link

stevemudie left a comment

Choose a reason for hiding this comment

matthewbirtch commented Jul 27, 2020

devinbinnie commented Jul 27, 2020 • edited Loading

matthewbirtch left a comment

Choose a reason for hiding this comment

devinbinnie commented Jul 27, 2020

matthewbirtch commented Jul 27, 2020

devinbinnie commented Jul 28, 2020 • edited Loading

nevyangelova Jul 28, 2020

Choose a reason for hiding this comment

devinbinnie Jul 28, 2020

Choose a reason for hiding this comment

nevyangelova Jul 28, 2020

Choose a reason for hiding this comment

nevyangelova Jul 28, 2020

Choose a reason for hiding this comment

matthewbirtch left a comment

Choose a reason for hiding this comment

mm-cloud-bot commented Jul 28, 2020

mm-cloud-bot commented Jul 28, 2020

devinbinnie commented Jul 27, 2020 •

edited

Loading

devinbinnie commented Jul 28, 2020 •

edited

Loading