[MM-28099] Menu Item to return to Getting Started

actions/views/next_steps.ts

@@ -1,11 +1,30 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {ActionTypes} from 'utils/constants';
+import {savePreferences} from 'mattermost-redux/actions/preferences';
+import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
+import {DispatchFunc, GetStateFunc} from 'mattermost-redux/types/actions';
+
+import {ActionTypes, Preferences, RecommendedNextSteps} from 'utils/constants';
 
 export function setShowNextStepsView(show: boolean) {
     return {
         type: ActionTypes.SET_SHOW_NEXT_STEPS_VIEW,
         show,
     };
 }
+
+export const unhideNextSteps = () => {
+    return async (dispatch: DispatchFunc, getState: GetStateFunc) => {
+        const userId = getCurrentUserId(getState());
+
+        dispatch(setShowNextStepsView(true));
+
+        dispatch(savePreferences(userId, [{
+            user_id: userId,
+            category: Preferences.RECOMMENDED_NEXT_STEPS,
+            name: RecommendedNextSteps.HIDE,
+            value: 'false',
+        }]));
+    };
+};

components/main_menu/__snapshots__/main_menu.test.jsx.snap

@@ -308,6 +308,12 @@ exports[`components/Menu should match snapshot with id 1`] = `
       text="Help"
       url={null}
     />
+    <MenuItemAction
+      id="gettingStarted"
+      onClick={[Function]}
+      show={false}
+      text="Getting Started"
+    />
     <MenuItemAction
       id="keyboardShortcuts"
       onClick={[Function]}
@@ -664,6 +670,12 @@ exports[`components/Menu should match snapshot with most of the thing disabled 1
       text="Help"
       url={null}
     />
+    <MenuItemAction
+      id="gettingStarted"
+      onClick={[Function]}
+      show={false}
+      text="Getting Started"
+    />
     <MenuItemAction
       id="keyboardShortcuts"
       onClick={[Function]}
@@ -1074,6 +1086,12 @@ exports[`components/Menu should match snapshot with most of the thing disabled i
       text="Help"
       url={null}
     />
+    <MenuItemAction
+      id="gettingStarted"
+      onClick={[Function]}
+      show={false}
+      text="Getting Started"
+    />
     <MenuItemAction
       id="keyboardShortcuts"
       onClick={[Function]}
@@ -1446,6 +1464,12 @@ exports[`components/Menu should match snapshot with most of the thing enabled 1`
       text="Help"
       url="test-link-help"
     />
+    <MenuItemAction
+      id="gettingStarted"
+      onClick={[Function]}
+      show={false}
+      text="Getting Started"
+    />
     <MenuItemAction
       id="keyboardShortcuts"
       onClick={[Function]}
@@ -1856,6 +1880,12 @@ exports[`components/Menu should match snapshot with most of the thing enabled in
       text="Help"
       url="test-link-help"
     />
+    <MenuItemAction
+      id="gettingStarted"
+      onClick={[Function]}
+      show={false}
+      text="Getting Started"
+    />
     <MenuItemAction
       id="keyboardShortcuts"
       onClick={[Function]}
@@ -2245,6 +2275,12 @@ exports[`components/Menu should match snapshot with plugins 1`] = `
       text="Help"
       url={null}
     />
+    <MenuItemAction
+      id="gettingStarted"
+      onClick={[Function]}
+      show={false}
+      text="Getting Started"
+    />
     <MenuItemAction
       id="keyboardShortcuts"
       onClick={[Function]}
@@ -2672,6 +2708,12 @@ exports[`components/Menu should match snapshot with plugins in mobile 1`] = `
       text="Help"
       url={null}
     />
+    <MenuItemAction
+      id="gettingStarted"
+      onClick={[Function]}
+      show={false}
+      text="Getting Started"
+    />
     <MenuItemAction
       id="keyboardShortcuts"
       onClick={[Function]}

components/main_menu/index.jsx

@@ -4,24 +4,28 @@
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 
-import {getConfig} from 'mattermost-redux/selectors/entities/general';
+import {getConfig, getLicense} from 'mattermost-redux/selectors/entities/general';
 import {getMyTeams, getJoinableTeamIds, getCurrentTeam} from 'mattermost-redux/selectors/entities/teams';
 import {getCurrentUser} from 'mattermost-redux/selectors/entities/users';
 import {haveITeamPermission, haveICurrentTeamPermission, haveISystemPermission} from 'mattermost-redux/selectors/entities/roles';
 import {Permissions} from 'mattermost-redux/constants';
 
 import {RHSStates} from 'utils/constants';
 
+import {unhideNextSteps} from 'actions/views/next_steps';
 import {showMentions, showFlaggedPosts, closeRightHandSide, closeMenu as closeRhsMenu} from 'actions/views/rhs';
 import {openModal} from 'actions/views/modals';
 import {getRhsState} from 'selectors/rhs';
 
+import {nextStepsNotFinished} from 'components/next_steps_view/steps';
+
 import MainMenu from './main_menu.jsx';
 
 function mapStateToProps(state) {
     const config = getConfig(state);
     const currentTeam = getCurrentTeam(state);
     const currentUser = getCurrentUser(state);
+    const license = getLicense(state);
 
     const appDownloadLink = config.AppDownloadLink;
     const enableCommands = config.EnableCommands === 'true';
@@ -82,6 +86,7 @@ function mapStateToProps(state) {
         isMentionSearch: rhsState === RHSStates.MENTION,
         teamIsGroupConstrained: Boolean(currentTeam.group_constrained),
         isLicensedForLDAPGroups: state.entities.general.license.LDAPGroups === 'true',
+        showGettingStarted: !state.views.nextSteps.show && nextStepsNotFinished(state) && license.Cloud === 'true',
     };
 }
 
@@ -93,6 +98,7 @@ function mapDispatchToProps(dispatch) {
             showFlaggedPosts,
             closeRightHandSide,
             closeRhsMenu,
+            unhideNextSteps,
         }, dispatch),
     };
 }

components/main_menu/main_menu.jsx

@@ -59,13 +59,15 @@ class MainMenu extends React.PureComponent {
         isMentionSearch: PropTypes.bool,
         teamIsGroupConstrained: PropTypes.bool.isRequired,
         isLicensedForLDAPGroups: PropTypes.bool,
+        showGettingStarted: PropTypes.bool.isRequired,
         intl: intlShape.isRequired,
         actions: PropTypes.shape({
             openModal: PropTypes.func.isRequred,
             showMentions: PropTypes.func,
             showFlaggedPosts: PropTypes.func,
             closeRightHandSide: PropTypes.func.isRequired,
             closeRhsMenu: PropTypes.func.isRequired,
+            unhideNextSteps: PropTypes.func.isRequired,
         }).isRequired,
     };
 
@@ -330,6 +332,12 @@ class MainMenu extends React.PureComponent {
                         text={formatMessage({id: 'navbar_dropdown.help', defaultMessage: 'Help'})}
                         icon={this.props.mobile && <i className='fa fa-question'/>}
                     />
+                    <Menu.ItemAction
+                        id='gettingStarted'
+                        show={this.props.showGettingStarted}
+                        onClick={() => this.props.actions.unhideNextSteps()}
+                        text={formatMessage({id: 'navbar_dropdown.gettingStarted', defaultMessage: 'Getting Started'})}
+                    />
                     <Menu.ItemAction
                         id='keyboardShortcuts'
                         show={!this.props.mobile}

components/main_menu/main_menu.test.jsx

@@ -34,12 +34,14 @@ describe('components/Menu', () => {
         moreTeamsToJoin: false,
         pluginMenuItems: [],
         isMentionSearch: false,
+        showGettingStarted: false,
         actions: {
             openModal: jest.fn(),
             showMentions: jest.fn(),
             showFlaggedPosts: jest.fn(),
             closeRightHandSide: jest.fn(),
             closeRhsMenu: jest.fn(),
+            unhideNextSteps: jest.fn(),
         },
         teamIsGroupConstrained: false,
     };

components/next_steps_view/steps.test.tsx

@@ -46,7 +46,7 @@ describe('components/next_steps_view/steps', () => {
                 },
                 preferences: {
                     myPreferences: {
-                        'recommended_next_steps--hide': {name: 'hide', value: true},
+                        'recommended_next_steps--hide': {name: 'hide', value: 'true'},
                     },
                 },
             },
@@ -65,9 +65,9 @@ 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'},
                     },
                 },
             },

components/next_steps_view/steps.ts

@@ -49,15 +49,23 @@ const getCategory = makeGetCategory();
 export const showNextSteps = createSelector(
     (state: GlobalState) => getCategory(state, Preferences.RECOMMENDED_NEXT_STEPS),
     (state: GlobalState) => getLicense(state),
-    (stepPreferences, license) => {
-        if (stepPreferences.some((pref) => pref.name === RecommendedNextSteps.HIDE && pref.value)) {
+    (state: GlobalState) => nextStepsNotFinished(state),
+    (stepPreferences, license, nextStepsNotFinished) => {
+        if (stepPreferences.some((pref) => pref.name === RecommendedNextSteps.HIDE && pref.value === 'true')) {
             return false;
         }
 
         if (license.Cloud !== 'true') {
             return false;
         }
 
+        return nextStepsNotFinished;
+    }
+);
+
+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);
         return !Steps.every(checkPref);
     }

components/sidebar/sidebar_next_steps/sidebar_next_steps.tsx

@@ -77,7 +77,7 @@ export default class SidebarNextSteps extends React.PureComponent<Props, State>
     }
 
     render() {
-        if (this.props.preferences.some((pref) => pref.name === RecommendedNextSteps.HIDE && pref.value)) {
+        if (this.props.preferences.some((pref) => pref.name === RecommendedNextSteps.HIDE && pref.value === 'true')) {
             return null;
         }
 
@@ -86,7 +86,7 @@ export default class SidebarNextSteps extends React.PureComponent<Props, State>
         }
 
         const total = Steps.length;
-        const complete = this.props.preferences.filter((pref) => pref.value).length;
+        const complete = this.props.preferences.filter((pref) => pref.name !== RecommendedNextSteps.HIDE && pref.value === 'true').length;
 
         let header = (
             <FormattedMessage

i18n/en.json

@@ -3069,6 +3069,7 @@
   "navbar_dropdown.console": "System Console",
   "navbar_dropdown.create": "Create a Team",
   "navbar_dropdown.emoji": "Custom Emoji",
+  "navbar_dropdown.gettingStarted": "Getting Started",
   "navbar_dropdown.help": "Help",
   "navbar_dropdown.integrations": "Integrations",
   "navbar_dropdown.invitePeople": "Invite People",

plugins/test/__snapshots__/main_menu_action.test.jsx.snap

@@ -315,6 +315,12 @@ exports[`plugins/MainMenuActions should match snapshot and click plugin item for
       show={false}
       text="Help"
     />
+    <MenuItemAction
+      id="gettingStarted"
+      onClick={[Function]}
+      show={true}
+      text="Getting Started"
+    />
     <MenuItemAction
       id="keyboardShortcuts"
       onClick={[Function]}

plugins/test/main_menu_action.test.jsx

@@ -33,12 +33,14 @@ describe('plugins/MainMenuActions', () => {
             canManageIntegrations: true,
             moreTeamsToJoin: true,
             teamIsGroupConstrained: true,
+            showGettingStarted: true,
             actions: {
                 openModal: jest.fn(),
                 showMentions: jest.fn(),
                 showFlaggedPosts: jest.fn(),
                 closeRightHandSide: jest.fn(),
                 closeRhsMenu: jest.fn(),
+                unhideNextSteps: jest.fn(),
             },
         };