[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,7 +6,7 @@ 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';
@@ -20,6 +20,7 @@ function makeMapStateToProps() {
     return (state: GlobalState) => {
         return {
             currentUser: getCurrentUser(state),
+            isAdmin: isCurrentUserSystemAdmin(state),
             preferences: getCategory(state, Preferences.RECOMMENDED_NEXT_STEPS),
         };
     };

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.test.tsx

@@ -25,12 +25,14 @@ jest.mock('components/next_steps_view/steps', () => ({
             component: jest.fn(),
         },
     ],
+    isStepForUser: () => true,
 }));
 
 describe('components/next_steps_view', () => {
     const baseProps = {
         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 {Steps, StepType, isStepForUser} from './steps';
 import './next_steps_view.scss';
 import NextStepsTips from './next_steps_tips';
 
@@ -25,6 +25,7 @@ const TRANSITION_SCREEN_TIMEOUT = 1000;
 type Props = {
     currentUser: UserProfile;
     preferences: PreferenceType[];
+    isAdmin: boolean;
     actions: {
         savePreferences: (userId: string, preferences: PreferenceType[]) => void;
         setShowNextStepsView: (show: boolean) => void;
@@ -49,13 +50,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.steps.length; i++) {
+            if (!this.isStepComplete(this.steps[i].id)) {
+                return this.steps[i].id;
             }
         }
 
-        return Steps[0].id;
+        return this.steps[0].id;
     }
 
     onSkip = (setExpanded: (expandedKey: string) => void) => {
@@ -98,13 +99,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.steps.findIndex((step) => step.id === id);
+        if (currentIndex + 1 > this.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.steps[currentIndex + 1].id)) {
+            this.nextStep(setExpanded, this.steps[currentIndex + 1].id);
         } else {
-            setExpanded(Steps[currentIndex + 1].id);
+            setExpanded(this.steps[currentIndex + 1].id);
         }
     }
 
@@ -183,8 +184,15 @@ export default class NextStepsView extends React.PureComponent<Props, State> {
         );
     }
 
+    // Filter the steps shown by checking if our user has any of the required roles for that step
+    filterSteps = (step: StepType) => {
+        return isStepForUser(step, this.props.currentUser.roles);
+    }
+
+    steps = Steps.filter(this.filterSteps);
+
     renderMainBody = () => {
-        const renderedSteps = Steps.map(this.renderStep);
+        const renderedSteps = this.steps.map(this.renderStep);
 
         return (
             <div
@@ -253,6 +261,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'},
                     },
                 },
             },

components/next_steps_view/steps.ts

@@ -6,45 +6,93 @@ import {getLicense} from 'mattermost-redux/selectors/entities/general';
 import {makeGetCategory} from 'mattermost-redux/selectors/entities/preferences';
 import {UserProfile} from 'mattermost-redux/types/users';
 
+import {getCurrentUser} from 'mattermost-redux/selectors/entities/users';
+import {isEqual} from 'lodash';
+
 import {GlobalState} from 'types/store';
 import {RecommendedNextSteps, Preferences} from 'utils/constants';
 import {localizeMessage} from 'utils/utils';
 
 import CompleteProfileStep from './steps/complete_profile_step';
+import SetupPreferencesStep from './steps/setup_preferences_step/setup_preferences_step';
 import InviteMembersStep from './steps/invite_members_step';
 import TeamProfileStep from './steps/team_profile_step';
+import EnableNotificationsStep from './steps/enable_notifications_step/enable_notifications_step';
 
 export type StepComponentProps = {
     id: string;
     currentUser: UserProfile;
     onSkip: (id: string) => void;
     onFinish: (id: string) => void;
 }
-
 export type StepType = {
     id: string;
     title: string;
     component: React.ComponentType<StepComponentProps>;
-}
+
+    // An array of all roles a user must have in order to see the step e.g. admins are both system_admin and system_user
+    // so you would require ['system_admin','system_user'] to match.
+    // to show step for all roles, leave the roles array blank.
+    roles: Array<string>;
+};
 
 export const Steps: StepType[] = [
     {
         id: RecommendedNextSteps.COMPLETE_PROFILE,
-        title: localizeMessage('next_steps_view.titles.completeProfile', 'Complete your profile'),
+        title: localizeMessage(
+            'next_steps_view.titles.completeProfile',
+            'Complete your profile'
+        ),
         component: CompleteProfileStep,
+        roles: [],
     },
     {
         id: RecommendedNextSteps.TEAM_SETUP,
-        title: localizeMessage('next_steps_view.titles.teamSetup', 'Name your team'),
+        title: localizeMessage(
+            'next_steps_view.titles.teamSetup',
+            'Name your team'
+        ),
+        roles: ['system_admin', 'system_user'],
         component: TeamProfileStep,
     },
     {
         id: RecommendedNextSteps.INVITE_MEMBERS,
-        title: localizeMessage('next_steps_view.titles.inviteMembers', 'Invite members to the team'),
+        title: localizeMessage(
+            'next_steps_view.titles.inviteMembers',
+            'Invite members to the team'
+        ),
+        roles: ['system_admin', 'system_user'],
         component: InviteMembersStep,
     },
+    {
+        id: RecommendedNextSteps.NOTIFICATION_SETUP,
+        title: localizeMessage(
+            'next_steps_view.notificationSetup.setNotifications',
+            'Turn on notifications'
+        ),
+        roles: ['system_user'],
+        component: EnableNotificationsStep,
+    },
+    {
+        id: RecommendedNextSteps.PREFERENCES_SETUP,
+        title: localizeMessage(
+            'next_steps_view.titles.preferenceSetup',
+            'Set your preferences'
+        ),
+        roles: ['system_user'],
+        component: SetupPreferencesStep,
+    },
 ];
 
+// Filter the steps shown by checking if our user has any of the required roles for that step
+export function isStepForUser(step: StepType, roles: string): boolean {
+    const userRoles = roles.split(' ');
+    return (
+        isEqual(userRoles.sort(), step.roles.sort()) ||
+          step.roles.length === 0
+    );
+}
+
 const getCategory = makeGetCategory();
 export const showNextSteps = createSelector(
     (state: GlobalState) => getCategory(state, Preferences.RECOMMENDED_NEXT_STEPS),
@@ -65,8 +113,9 @@ export const showNextSteps = createSelector(
 
 export const nextStepsNotFinished = createSelector(
     (state: GlobalState) => getCategory(state, Preferences.RECOMMENDED_NEXT_STEPS),
-    (stepPreferences) => {
-        const checkPref = (step: StepType) => stepPreferences.some((pref) => pref.name === step.id && pref.value === 'true');
+    (state: GlobalState) => getCurrentUser(state),
+    (stepPreferences, currentUser) => {
+        const checkPref = (step: StepType) => stepPreferences.some((pref) => (pref.name === step.id && pref.value === 'true') || !isStepForUser(step, currentUser.roles));
         return !Steps.every(checkPref);
     }
 );

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

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/next_steps_view/steps/setup_preferences_step should match snapshot 1`] = `
+<TextCardWithAction
+  buttonDefaultMessage="Enable notifications"
+  buttonMessageId="next_steps_view.notificationSetup.enableNotifications"
+  cardBodyDefaultMessage="We recommend enabling desktop notifications so you don’t miss any important communications."
+  cardBodyMessageId="next_steps_view.notificationSetup"
+  onClick={[Function]}
+/>
+`;