[MM-27526] Onboarding Flow for End Users

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

@@ -107,6 +107,7 @@ exports[`components/next_steps_view should match snapshot 1`] = `
   </div>
   <NextStepsTips
     animating={false}
+    isAdmin={true}
     showFinalScreen={false}
     stopAnimating={[Function]}
   />

components/next_steps_view/index.ts

@@ -6,12 +6,14 @@ import {bindActionCreators, Dispatch} from 'redux';
 
 import {savePreferences} from 'mattermost-redux/actions/preferences';
 import {makeGetCategory} from 'mattermost-redux/selectors/entities/preferences';
-import {getCurrentUser} from 'mattermost-redux/selectors/entities/users';
+import {getCurrentUser, isCurrentUserSystemAdmin} from 'mattermost-redux/selectors/entities/users';
 
 import {setShowNextStepsView} from 'actions/views/next_steps';
 import {GlobalState} from 'types/store';
 import {Preferences} from 'utils/constants';
 
+import {getSteps} from './steps';
+
 import NextStepsView from './next_steps_view';
 
 function makeMapStateToProps() {
@@ -20,7 +22,9 @@ function makeMapStateToProps() {
     return (state: GlobalState) => {
         return {
             currentUser: getCurrentUser(state),
+            isAdmin: isCurrentUserSystemAdmin(state),
             preferences: getCategory(state, Preferences.RECOMMENDED_NEXT_STEPS),
+            steps: getSteps(state),
         };
     };
 }

components/next_steps_view/next_steps_tips.tsx

@@ -18,6 +18,9 @@ import * as UserAgent from 'utils/user_agent';
 import {ModalIdentifiers} from 'utils/constants';
 import * as Utils from 'utils/utils';
 
+import TeamMembersModal from 'components/team_members_modal';
+import {toggleShortcutsModal} from 'actions/global_actions.jsx';
+
 const seeAllApps = () => {
     window.open('https://mattermost.com/download/#mattermostApps', '_blank');
 };
@@ -73,13 +76,17 @@ const openAuthPage = (page: string) => {
     browserHistory.push(`/admin_console/authentication/${page}`);
 };
 
-export default function NextStepsTips(props: {showFinalScreen: boolean; animating: boolean; stopAnimating: () => void}) {
+export default function NextStepsTips(props: { showFinalScreen: boolean; animating: boolean; stopAnimating: () => void; isAdmin: boolean}) {
     const dispatch = useDispatch();
     const openPluginMarketplace = openModal({modalId: ModalIdentifiers.PLUGIN_MARKETPLACE, dialogType: MarketplaceModal});
     const openMoreChannels = openModal({modalId: ModalIdentifiers.MORE_CHANNELS, dialogType: MoreChannels});
+    const openViewMembersModal = openModal({
+        modalId: ModalIdentifiers.TEAM_MEMBERS,
+        dialogType: TeamMembersModal,
+    });
 
     let nonMobileTips;
-    if (!Utils.isMobile()) {
+    if (!Utils.isMobile() && props.isAdmin) {
         nonMobileTips = (
             <>
                 <Card expanded={true}>
@@ -146,6 +153,57 @@ export default function NextStepsTips(props: {showFinalScreen: boolean; animatin
                 </Card>
             </>
         );
+    } else if (!Utils.isMobile() && !props.isAdmin) {
+        nonMobileTips = (
+            <>
+                <Card expanded={true}>
+                    <div className='Card__body'>
+                        <h3>
+                            <FormattedMessage
+                                id='next_steps_view.tips.configureLogins'
+                                defaultMessage='See who else is here'
+                            />
+                        </h3>
+                        <FormattedMessage
+                            id='next_steps_view.tips.configureLogin.texts'
+                            defaultMessage='Browse or search through the team members directory'
+                        />
+                        <button
+                            className='NextStepsView__button NextStepsView__finishButton primary'
+                            onClick={() => openViewMembersModal(dispatch)}
+                        >
+                            <FormattedMessage
+                                id='next_steps_view.tips.addPlugins.buttons'
+                                defaultMessage='View team members'
+                            />
+                        </button>
+                    </div>
+                </Card>
+                <Card expanded={true}>
+                    <div className='Card__body'>
+                        <h3>
+                            <FormattedMessage
+                                id='next_steps_view.tips.addPluginss'
+                                defaultMessage='Learn Keyboard Shortcuts'
+                            />
+                        </h3>
+                        <FormattedMessage
+                            id='next_steps_view.tips.addPlugins.texts'
+                            defaultMessage='Work more efficiently with Keyboard Shortcuts in Mattermost.'
+                        />
+                        <button
+                            className='NextStepsView__button NextStepsView__finishButton primary'
+                            onClick={toggleShortcutsModal}
+                        >
+                            <FormattedMessage
+                                id='next_steps_view.tips.addPlugins.buttons'
+                                defaultMessage='See shortcuts'
+                            />
+                        </button>
+                    </div>
+                </Card>
+            </>
+        );
     }
 
     let downloadSection;

components/next_steps_view/next_steps_view.scss

@@ -179,7 +179,7 @@
     display: flex;
     border: none;
     background: none;
-    padding: 12px;
+    padding: 13px;
     width: 100%;
 
     > span {

components/next_steps_view/next_steps_view.test.tsx

@@ -7,30 +7,31 @@ import {shallow, ShallowWrapper} from 'enzyme';
 import NextStepsView from 'components/next_steps_view/next_steps_view';
 import {TestHelper} from 'utils/test_helper';
 
-jest.mock('components/next_steps_view/steps', () => ({
-    Steps: [
-        {
-            id: 'step_1',
-            title: 'Step_1',
-            component: jest.fn(),
-        },
-        {
-            id: 'step_2',
-            title: 'Step_2',
-            component: jest.fn(),
-        },
-        {
-            id: 'step_3',
-            title: 'Step_3',
-            component: jest.fn(),
-        },
-    ],
-}));
-
 describe('components/next_steps_view', () => {
     const baseProps = {
+        steps: [
+            {
+                id: 'step_1',
+                roles: [],
+                title: 'Step_1',
+                component: jest.fn(),
+            },
+            {
+                id: 'step_2',
+                title: 'Step_2',
+                roles: [],
+                component: jest.fn(),
+            },
+            {
+                id: 'step_3',
+                title: 'Step_3',
+                roles: [],
+                component: jest.fn(),
+            },
+        ],
         currentUser: TestHelper.getUserMock(),
         preferences: [],
+        isAdmin: true,
         actions: {
             setShowNextStepsView: jest.fn(),
             savePreferences: jest.fn(),

components/next_steps_view/next_steps_view.tsx

@@ -16,7 +16,7 @@ import onboardingSuccess from 'images/onboarding-success.svg';
 import loadingIcon from 'images/spinner-48x48-blue.apng';
 import {Preferences} from 'utils/constants';
 
-import {Steps, StepType} from './steps';
+import {StepType} from './steps';
 import './next_steps_view.scss';
 import NextStepsTips from './next_steps_tips';
 
@@ -25,6 +25,8 @@ const TRANSITION_SCREEN_TIMEOUT = 1000;
 type Props = {
     currentUser: UserProfile;
     preferences: PreferenceType[];
+    isAdmin: boolean;
+    steps: StepType[];
     actions: {
         savePreferences: (userId: string, preferences: PreferenceType[]) => void;
         setShowNextStepsView: (show: boolean) => void;
@@ -49,13 +51,13 @@ export default class NextStepsView extends React.PureComponent<Props, State> {
     }
 
     getStartingStep = () => {
-        for (let i = 0; i < Steps.length; i++) {
-            if (!this.isStepComplete(Steps[i].id)) {
-                return Steps[i].id;
+        for (let i = 0; i < this.props.steps.length; i++) {
+            if (!this.isStepComplete(this.props.steps[i].id)) {
+                return this.props.steps[i].id;
             }
         }
 
-        return Steps[0].id;
+        return this.props.steps[0].id;
     }
 
     onSkip = (setExpanded: (expandedKey: string) => void) => {
@@ -98,13 +100,13 @@ export default class NextStepsView extends React.PureComponent<Props, State> {
     }
 
     nextStep = (setExpanded: (expandedKey: string) => void, id: string) => {
-        const currentIndex = Steps.findIndex((step) => step.id === id);
-        if ((currentIndex + 1) > (Steps.length - 1)) {
+        const currentIndex = this.props.steps.findIndex((step) => step.id === id);
+        if (currentIndex + 1 > this.props.steps.length - 1) {
             this.transitionToFinalScreen();
-        } else if (this.isStepComplete(Steps[currentIndex + 1].id)) {
-            this.nextStep(setExpanded, Steps[currentIndex + 1].id);
+        } else if (this.isStepComplete(this.props.steps[currentIndex + 1].id)) {
+            this.nextStep(setExpanded, this.props.steps[currentIndex + 1].id);
         } else {
-            setExpanded(Steps[currentIndex + 1].id);
+            setExpanded(this.props.steps[currentIndex + 1].id);
         }
     }
 
@@ -184,7 +186,7 @@ export default class NextStepsView extends React.PureComponent<Props, State> {
     }
 
     renderMainBody = () => {
-        const renderedSteps = Steps.map(this.renderStep);
+        const renderedSteps = this.props.steps.map(this.renderStep);
 
         return (
             <div
@@ -253,6 +255,7 @@ export default class NextStepsView extends React.PureComponent<Props, State> {
                     showFinalScreen={this.state.showFinalScreen}
                     animating={this.state.animating}
                     stopAnimating={this.stopAnimating}
+                    isAdmin={this.props.isAdmin}
                 />
             </section>
         );

components/next_steps_view/steps.test.tsx

@@ -15,6 +15,12 @@ describe('components/next_steps_view/steps', () => {
                 preferences: {
                     myPreferences: {},
                 },
+                users: {
+                    currentUserId: 'current_user_id',
+                    profiles: {
+                        current_user_id: {roles: 'system_role'},
+                    },
+                },
             },
         };
 
@@ -49,6 +55,12 @@ describe('components/next_steps_view/steps', () => {
                         'recommended_next_steps--hide': {name: 'hide', value: 'true'},
                     },
                 },
+                users: {
+                    currentUserId: 'current_user_id',
+                    profiles: {
+                        current_user_id: {roles: 'system_role'},
+                    },
+                },
             },
         };
 
@@ -65,9 +77,24 @@ describe('components/next_steps_view/steps', () => {
                 },
                 preferences: {
                     myPreferences: {
-                        'recommended_next_steps--complete_profile': {name: 'complete_profile', value: 'true'},
-                        'recommended_next_steps--team_setup': {name: 'team_setup', value: 'true'},
-                        'recommended_next_steps--invite_members': {name: 'invite_members', value: 'true'},
+                        'recommended_next_steps--complete_profile': {
+                            name: 'complete_profile',
+                            value: 'true',
+                        },
+                        'recommended_next_steps--team_setup': {
+                            name: 'team_setup',
+                            value: 'true',
+                        },
+                        'recommended_next_steps--invite_members': {
+                            name: 'invite_members',
+                            value: 'true',
+                        },
+                    },
+                },
+                users: {
+                    currentUserId: 'current_user_id',
+                    profiles: {
+                        current_user_id: {roles: 'system_role'},
                     },
                 },
             },