[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/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/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