[MM-26473] Tips and Next Steps screen #6020

devinbinnie · 2020-07-30T18:51:51Z

Summary

Tips and Next Steps screen that is seen at the end of the onboarding flow.
Includes the transition screen that slides in when you complete the flow.

Some UX notes:

Other button states (ie. hover/active/focus) will come in another PR
The transition timings might need some tuning, let me know if they need to be tweaked
We don't have a download flow for Linux, I think we should.
'Take a tour' does nothing currently as we don't have the new tour developed yet.

Ticket Link

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

reflog

looks great!

reflog · 2020-08-03T07:45:01Z

components/card/card_body.tsx

@@ -20,6 +20,12 @@ export default class CardBody extends React.PureComponent<Props> {
    }

    componentDidMount() {
+        window.addEventListener('resize', this.setInitialHeight);


@devinbinnie seems like we need a removeEventListener on unmount

nevyangelova · 2020-08-03T10:58:12Z

components/next_steps_view/next_steps_tips.tsx

+                            />
+                            <button
+                                className='NextStepsView__button confirm'
+                                onClick={() => {}}


Is this a TODO? :P

Yeah, see this comment in the description:
'Take a tour' does nothing currently as we don't have the new tour developed yet.

nevyangelova · 2020-08-03T10:58:23Z

components/next_steps_view/next_steps_tips.tsx

+            </div>
+        </div>
+    );
+}


nit: new line

nevyangelova · 2020-08-03T11:00:18Z

components/next_steps_view/next_steps_view.tsx

+                    transitioning: this.state.showTransitionScreen,
+                    completed: this.state.showTransitionScreen && this.state.showFinalScreen,
+                })}
+                onTransitionEnd={this.setTimerToFinalScreen}


is this reliable? I remember reading that onTransitionEnd can sometimes ignore the transitions of the child elements.

Yeah it should be fine, I only care about transition on that div anyways for that callback.

matthewbirtch

Thanks @devinbinnie. Here's my first pass at the review. Let me know if anything is unclear.

Transition from Getting Started to Next Steps

Overall we can speed up this transition to 500ms and apply the 'ease-in-out' function
Have a look at this prototype for reference.
- Notice that the computer illustration transitions to the success visual.
- Let me know if this is something you'd like to do together over zoom. Also, let me know if transition that illustration makes it too difficult.
- There is more I'd like to do with this animation, but I don't want to push too much either, so let me know what is doable.

App download callout:

The devices illustration looks like it is getting stretched at some widths
Download Mattermost for Mac button:
- I don't have a windows machine, but I assume this will appropriately switch to 'Download Mattermost for Windows'?
- The background on this button should be transparent - not white

Card responsive layout:

I was somehow able to get to a state where the 3rd card didn't have the same width as the others (around 1082 width)
The app download callout is cutoff or hidden depending on my borwser height in the layout above and I can't scroll down to see it all
As soon as the layout adjusts to this layout, mabye we collapse the extra space between the titles and the cards and the extra space between the cards and the app download callout
in smaller mobile size windows, the app download callout is cut off and I can't scroll down to view it all
when they start stacking, the space between cards increases. Can we keep it 24px? (and 16px on mobile widths)
Also, when the cards stack, can we change the height from a fixed width to auto? this should tighten up the space
Layout for the app download callout feels a bit broken between 768 and 905.
- Title looks positioned down to far
- 'See all the apps' button needs to align left with the button above, add 16px space between
- Again, the illustration looks stretched vertically

'To configure your workspace, continue on a desktop computer'

Are we able to do this view only if it is actually a mobile device and check the user agent?
I was able to get this state by first starting in a mobile sized viewport and then changing to larger screen

Changing browser size issues:

When I try to resize my browser, sometimes I get elements from the previous screen peaking in

devinbinnie · 2020-08-04T15:27:56Z

@matthewbirtch

Transition from Getting Started to Next Steps

Overall we can speed up this transition to 500ms and apply the 'ease-in-out' function

Done!

Have a look at this prototype for reference.

Notice that the computer illustration transitions to the success visual.

Let me know if this is something you'd like to do together over zoom. Also, let me know if transition that illustration makes it too difficult.

There is more I'd like to do with this animation, but I don't want to push too much either, so let me know what is doable.

Yeah this is probably going to be a miss. We can have a Zoom chat but this isn't what I was expecting. My bad if that's something I should have anticipated.

App download callout:

The devices illustration looks like it is getting stretched at some widths

Fixed!

Download Mattermost for Mac button:

I don't have a windows machine, but I assume this will appropriately switch to 'Download Mattermost for Windows'?

Correct, it changes based on OS. Though we don't have one for Linux, which is partially due to that we don't have a UserAgent method to detect that. I wonder if that's something easy to do...

The background on this button should be transparent - not white

Done! Note, this is going to look funny on some resolutions as you might see some of the background shift around behind the button.

Card responsive layout:

I was somehow able to get to a state where the 3rd card didn't have the same width as the others (around 1082 width)

Okay, I've gone back to having the cards be a fixed width of 310px on the desktop view. Otherwise flexbox won't cooperate.

The app download callout is cutoff or hidden depending on my borwser height in the layout above and I can't scroll down to see it all

This should be working fine, though in mobile view I've noticed it's cutting off incorrectly. I've added some padding to the bottom of the mobile view which should fix that.

As soon as the layout adjusts to this layout, mabye we collapse the extra space between the titles and the cards and the extra space between the cards and the app download callout

Done!

in smaller mobile size windows, the app download callout is cut off and I can't scroll down to view it all

See above.

when they start stacking, the space between cards increases. Can we keep it 24px? (and 16px on mobile widths)

Done!

Also, when the cards stack, can we change the height from a fixed width to auto? this should tighten up the space

Done!

Layout for the app download callout feels a bit broken between 768 and 905.

Title looks positioned down to far

'See all the apps' button needs to align left with the button above, add 16px space between

Again, the illustration looks stretched vertically

Fixed!

'To configure your workspace, continue on a desktop computer'

Are we able to do this view only if it is actually a mobile device and check the user agent?

I was able to get this state by first starting in a mobile sized viewport and then changing to larger screen

When you refresh the page in Chrome in 'Responsive' mode, it spoofs a mobile user agent screen. This is normal.

Changing browser size issues:

When I try to resize my browser, sometimes I get elements from the previous screen peaking in

Fixed!

stevemudie · 2020-08-04T15:36:12Z

Overall it looks great.

I did however notice the same 3rd card too wide anomaly @matthewbirtch noticed. All you need to do to see it is drag the window horizontally to make it narrow and it will change as you go.

I also noticed something completely unexpected when I used my window manager (Rectangle) to jump it back to full size it flashes the transition image that displayed on the way to this point.

devinbinnie · 2020-08-04T16:21:54Z

Overall it looks great.

I did however notice the same 3rd card too wide anomaly @matthewbirtch noticed. All you need to do to see it is drag the window horizontally to make it narrow and it will change as you go.

I also noticed something completely unexpected when I used my window manager (Rectangle) to jump it back to full size it flashes the transition image that displayed on the way to this point.

@stevemudie This should all be fixed now as per above. Have another look.

devinbinnie · 2020-08-04T17:23:10Z

/update-branch

stevemudie

LGTM

matthewbirtch

A few more tweaks that would be good to resolve:

On smaller screen widths (when the sidebar hides), can we adjust the card internal padding to 24px (down from 32px)
On smaller screen widths, noticing the download apps callout gets too tight to the edges on small screens
On smaller widths, can we adjust the padding on the download container so the illustration and buttons line up with the buttons in the cards above?

On smaller widths below 500px, I think we'll want to stack the title and buttons below the image because I'm getting this:

I'm hoping we can do something more like this:
the illustration will need a max-width of 232px in the above
will need to add 24px margin to bottom of the illustration for this stacked layout

The 'to configure your workspace' card expands to the edges when I expand the window width. Just wanted to call it out, although most won't see this. It doesn't seem to follow the same rules as other cards
The text in this callout is also not vertically centered in the container by the looks of it
Looks like the space between these two cards is still double what it should be on smaller widths

matthewbirtch

All looks resolved now. Thanks @devinbinnie

mm-cloud-bot · 2020-08-10T14:10:29Z

Test server destroyed

mm-cloud-bot · 2020-08-10T14:10:30Z

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 7 commits July 28, 2020 13:03

Screen transitions for loading screen and final screen

0db4c7e

Transition screen

b523bd5

Fixed APNG issue

f997f8a

Style for desktop and mobile

28de81d

Fixed styling

4b99a39

More fixes

e549f19

Functionality and test fixes

c4fe1ca

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 30, 2020

devinbinnie requested review from reflog, matthewbirtch, stevemudie and nevyangelova July 30, 2020 18:51

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

reflog approved these changes Aug 3, 2020

View reviewed changes

nevyangelova reviewed Aug 3, 2020

View reviewed changes

matthewbirtch suggested changes Aug 3, 2020

View reviewed changes

Dev PR feedback

f3b43cf

devinbinnie requested a review from nevyangelova August 4, 2020 14:10

stevemudie added Setup Cloud Test Server Setup a test server using Mattermost Cloud and removed Setup Cloud Test Server Setup a test server using Mattermost Cloud labels Aug 4, 2020

nevyangelova approved these changes Aug 4, 2020

View reviewed changes

devinbinnie removed the 2: Dev Review Requires review by a core commiter label Aug 4, 2020

UX PR feedback

79d18c9

devinbinnie requested a review from matthewbirtch August 4, 2020 16:22

Merge branch 'feature/cloud-onboarding' into MM-26473

dea01e0

stevemudie approved these changes Aug 4, 2020

View reviewed changes

stevemudie added QA Review Done and removed 3: QA Review Requires review by a QA tester labels Aug 4, 2020

matthewbirtch suggested changes Aug 5, 2020

View reviewed changes

UX feedback

55ee3f8

devinbinnie requested a review from matthewbirtch August 6, 2020 14:41

devinbinnie and others added 2 commits August 10, 2020 09:39

Merge branch 'feature/cloud-onboarding' into MM-26473

c354273

Merge'd

7c12fce

matthewbirtch approved these changes Aug 10, 2020

View reviewed changes

devinbinnie removed the 1: UX Review Requires review by a UX Designer label Aug 10, 2020

devinbinnie merged commit 26701b5 into mattermost:feature/cloud-onboarding Aug 10, 2020

mattermod removed the Setup Cloud Test Server Setup a test server using Mattermost Cloud label Aug 10, 2020

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[MM-26473] Tips and Next Steps screen #6020

[MM-26473] Tips and Next Steps screen #6020

devinbinnie commented Jul 30, 2020

reflog left a comment

reflog Aug 3, 2020 •

edited

Loading

nevyangelova Aug 3, 2020

devinbinnie Aug 4, 2020

nevyangelova Aug 3, 2020

nevyangelova Aug 3, 2020

devinbinnie Aug 4, 2020

matthewbirtch left a comment

devinbinnie commented Aug 4, 2020

stevemudie commented Aug 4, 2020

devinbinnie commented Aug 4, 2020

devinbinnie commented Aug 4, 2020

stevemudie left a comment

matthewbirtch left a comment

matthewbirtch left a comment

mm-cloud-bot commented Aug 10, 2020

mm-cloud-bot commented Aug 10, 2020

[MM-26473] Tips and Next Steps screen #6020

[MM-26473] Tips and Next Steps screen #6020

Conversation

devinbinnie commented Jul 30, 2020

Summary

Ticket Link

reflog left a comment

Choose a reason for hiding this comment

reflog Aug 3, 2020 • edited Loading

Choose a reason for hiding this comment

nevyangelova Aug 3, 2020

Choose a reason for hiding this comment

devinbinnie Aug 4, 2020

Choose a reason for hiding this comment

nevyangelova Aug 3, 2020

Choose a reason for hiding this comment

nevyangelova Aug 3, 2020

Choose a reason for hiding this comment

devinbinnie Aug 4, 2020

Choose a reason for hiding this comment

matthewbirtch left a comment

Choose a reason for hiding this comment

devinbinnie commented Aug 4, 2020

stevemudie commented Aug 4, 2020

devinbinnie commented Aug 4, 2020

devinbinnie commented Aug 4, 2020

stevemudie left a comment

Choose a reason for hiding this comment

matthewbirtch left a comment

Choose a reason for hiding this comment

matthewbirtch left a comment

Choose a reason for hiding this comment

mm-cloud-bot commented Aug 10, 2020

mm-cloud-bot commented Aug 10, 2020

reflog Aug 3, 2020 •

edited

Loading