[MM-26465] Background and general layout for cloud onboarding

components/channel_view/channel_view.jsx

@@ -10,6 +10,7 @@ import deferComponentRender from 'components/deferComponentRender';
 import ChannelHeader from 'components/channel_header';
 import CreatePost from 'components/create_post';
 import FileUploadOverlay from 'components/file_upload_overlay';
+import NextStepsView from 'components/next_steps_view';
 import PostView from 'components/post_view';
 import TutorialView from 'components/tutorial';
 import {clearMarks, mark, measure, trackEvent} from 'actions/diagnostics_actions.jsx';
@@ -27,6 +28,7 @@ export default class ChannelView extends React.PureComponent {
             }).isRequired,
         }).isRequired,
         showTutorial: PropTypes.bool.isRequired,
+        showNextSteps: PropTypes.bool.isRequired,
         channelIsArchived: PropTypes.bool.isRequired,
         viewArchivedChannels: PropTypes.bool.isRequired,
         actions: PropTypes.shape({
@@ -123,6 +125,12 @@ export default class ChannelView extends React.PureComponent {
             );
         }
 
+        if (this.props.showNextSteps) {
+            return (
+                <NextStepsView/>
+            );
+        }
+
         let createPost;
         if (this.props.deactivatedChannel) {
             createPost = (

components/channel_view/channel_view.test.jsx

@@ -16,6 +16,7 @@ describe('components/channel_view', () => {
             params: {},
         },
         showTutorial: false,
+        showNextSteps: false,
         channelIsArchived: false,
         viewArchivedChannels: false,
         actions: {

components/channel_view/index.js

@@ -57,6 +57,7 @@ function mapStateToProps(state) {
         channelRolesLoading,
         deactivatedChannel: channel ? getDeactivatedChannel(state, channel.id) : false,
         showTutorial: enableTutorial && tutorialStep <= TutorialSteps.INTRO_SCREENS,
+        showNextSteps: true,
         channelIsArchived: channel ? channel.delete_at !== 0 : false,
         viewArchivedChannels,
     };

components/next_steps_view/__snapshots__/next_steps_view.test.tsx.snap

@@ -0,0 +1,52 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/next_steps_view should match snapshot 1`] = `
+<div
+  className="app__content NextStepsView"
+  id="app-content"
+>
+  <div
+    className="NextStepsView__header"
+  >
+    <div
+      className="NextStepsView__header-headerText"
+    >
+      <div
+        className="NextStepsView__header-headerTopText"
+      >
+        <FormattedMessage
+          defaultMessage="Welcome to Mattermost"
+          id="next_steps_view.welcomeToMattermost"
+          values={Object {}}
+        />
+      </div>
+      <div
+        className="NextStepsView__header-headerBottomText"
+      >
+        <FormattedMessage
+          defaultMessage="Here are some recommended next steps to help you collaborate"
+          id="next_steps_view.hereAreSomeNextSteps"
+          values={Object {}}
+        />
+      </div>
+    </div>
+    <div
+      className="NextStepsView__header-logo"
+    >
+      <img
+        src={null}
+      />
+    </div>
+  </div>
+  <div
+    className="NextStepsView__body"
+  >
+    <div
+      className="NextStepsView__body-main"
+    />
+    <div
+      className="NextStepsView__body-graphic"
+    />
+  </div>
+</div>
+`;

components/next_steps_view/index.ts

@@ -0,0 +1,31 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {connect} from 'react-redux';
+import {bindActionCreators, Dispatch} from 'redux';
+
+import {getLicense} from 'mattermost-redux/selectors/entities/general';
+
+import {GlobalState} from 'types/store';
+
+import NextStepsView from './next_steps_view';
+
+function mapStateToProps(state: GlobalState) {
+    const license = getLicense(state);
+
+    return {
+        skuName: license.SkuShortName,
+    };
+}
+
+function mapDispatchToProps(dispatch: Dispatch) {
+    return {
+        actions: bindActionCreators({
+        }, dispatch),
+    };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(NextStepsView);

components/next_steps_view/next_steps_view.scss

@@ -0,0 +1,88 @@
+#app-content.NextStepsView {
+    background-image: url(../../images/onboarding-bg.svg);
+    background-repeat: no-repeat;
+    background-position-y: bottom;
+    background-position-x: -305px;
+    background-size: calc(100% + 305px);
+}
+
+.NextStepsView__header {
+    padding: 32px 40px;
+    display: flex;
+}
+
+.NextStepsView__header-headerText {
+
+}
+
+.NextStepsView__header-headerTopText {
+    font-weight: 600;
+    font-size: 32px;
+    line-height: 40px;
+    letter-spacing: -0.02em;
+}
+
+.NextStepsView__header-headerBottomText {
+    font-size: 16px;
+    line-height: 24px;
+    margin-top: 8px;
+}
+
+.NextStepsView__header-logo {
+    margin-left: auto;
+    align-self: center;
+}
+
+.NextStepsView__body {
+    display: flex;
+    height: 100%;
+}
+
+.NextStepsView__body-main {
+    flex: 3 0 75%;
+}
+
+.NextStepsView__body-graphic {
+    background-image: url(../../images/getting-started.svg);
+    background-repeat: no-repeat;
+    background-size: 120%;
+    background-position-y: 33%;
+    flex: 1 0 25%;
+    z-index: 2;
+    min-width: 192px;
+}
+
+@media screen and (max-width: 768px) {
+    #app-content.NextStepsView {
+        background-size: auto;
+        background-position-y: top;
+    }
+
+    .NextStepsView__header {
+        padding: 24px 28px;
+    }
+
+    .NextStepsView__header-headerTopText {
+        font-size: 24px;
+        line-height: 32px;
+    }
+
+    .NextStepsView__body-main {
+        flex: 1 1 100%;
+    }
+}
+
+@media screen and (max-width: 1020px) {
+    .NextStepsView__header-logo {
+        display: none;
+    }
+
+    .NextStepsView__body-graphic {
+        flex: 0 0 0%;
+        min-width: 0;
+    }
+
+    .NextStepsView__body-main {
+        min-width: 536px;
+    }
+}

components/next_steps_view/next_steps_view.test.tsx

@@ -0,0 +1,21 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {shallow} from 'enzyme';
+
+import NextStepsView from 'components/next_steps_view/next_steps_view';
+
+describe('components/next_steps_view', () => {
+    const baseProps = {
+        skuName: '',
+    };
+
+    test('should match snapshot', () => {
+        const wrapper = shallow(
+            <NextStepsView {...baseProps}/>,
+        );
+
+        expect(wrapper).toMatchSnapshot();
+    });
+});

components/next_steps_view/next_steps_view.tsx

@@ -0,0 +1,75 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {FormattedMessage} from 'react-intl';
+
+import professionalLogo from 'images/cloud-logos/professional.svg';
+
+import './next_steps_view.scss';
+
+type Props = {
+    skuName: string;
+};
+
+export default class NextStepsView extends React.PureComponent<Props> {
+    getBottomText = () => {
+        // TODO: will be stored in user prefs at a later date
+        const {isFinished} = {isFinished: false};
+
+        if (isFinished) {
+            return (
+                <FormattedMessage
+                    id='next_steps_view.allSetToGo'
+                    defaultMessage={'You\'re all set to go!'}
+                />
+            );
+        }
+
+        return (
+            <FormattedMessage
+                id='next_steps_view.hereAreSomeNextSteps'
+                defaultMessage='Here are some recommended next steps to help you collaborate'
+            />
+        );
+    }
+
+    getLogo = () => {
+        // TODO: Switch logos based on edition once we have the other logos
+
+        switch (this.props.skuName) {
+        default:
+            return professionalLogo;
+        }
+    }
+
+    render() {
+        return (
+            <div
+                id='app-content'
+                className='app__content NextStepsView'
+            >
+                <div className='NextStepsView__header'>
+                    <div className='NextStepsView__header-headerText'>
+                        <div className='NextStepsView__header-headerTopText'>
+                            <FormattedMessage
+                                id='next_steps_view.welcomeToMattermost'
+                                defaultMessage='Welcome to Mattermost'
+                            />
+                        </div>
+                        <div className='NextStepsView__header-headerBottomText'>
+                            {this.getBottomText()}
+                        </div>
+                    </div>
+                    <div className='NextStepsView__header-logo'>
+                        <img src={this.getLogo()}/>
+                    </div>
+                </div>
+                <div className='NextStepsView__body'>
+                    <div className='NextStepsView__body-main'/>
+                    <div className='NextStepsView__body-graphic'/>
+                </div>
+            </div>
+        );
+    }
+}

i18n/en.json

@@ -3056,6 +3056,9 @@
   "navbar.toggle2": "Toggle sidebar",
   "navbar.viewInfo": "View Info",
   "navbar.viewPinnedPosts": "View Pinned Posts",
+  "next_steps_view.allSetToGo": "You're all set to go!",
+  "next_steps_view.hereAreSomeNextSteps": "Here are some recommended next steps to help you collaborate",
+  "next_steps_view.welcomeToMattermost": "Welcome to Mattermost",
   "no_results.channel_search.subtitle": "Check the spelling or try another search.",
   "no_results.channel_search.title": "No results for {channelName}",
   "no_results.flagged_posts.subtitle": "Flagged messages are only visible to you. Use flags to mark messages for follow-up or save something for later by clicking the {icon} to save them here.",