[MM-28328][MM-28329] Click "Getting Started" in lower LHS to go back …

…to Next Steps View (#6384)

* Click 'Getting Started' in lower LHS to go to getting started modal

* Fix pipeline

* Revert package-lock

* Persistence for Tips & Next Steps lower LHS, and same click to open functionality

* Remove commented code

* Add hover tint for section

* Add spaces

* revert package-lock

* Update components/next_steps_view/next_steps_view.tsx

Co-authored-by: Ali Farooq <[email protected]>

* Remove important, use variable instead of 255x3

Co-authored-by: Ali Farooq <[email protected]>

components/next_steps_view/next_steps_view.tsx

@@ -89,6 +89,10 @@ export default class NextStepsView extends React.PureComponent<Props, State> {
  };
  }
 
+ showFinalScreenNoAnimation = () => {
+ this.setState({showFinalScreen: true});
+ }
+
  showFinalScreen = () => {
  this.setState({showFinalScreen: true, animating: true});
  }
@@ -208,6 +212,11 @@ export default class NextStepsView extends React.PureComponent<Props, State> {
  renderMainBody = () => {
  const renderedSteps = this.props.steps.map(this.renderStep);
 
+ // If all steps are complete, don't render this and skip to the tips screen
+ if (this.getIncompleteStep() === null) {
+ this.showFinalScreenNoAnimation();
+ return null;
+ }
  return (
  <div
  className={classNames('NextStepsView__viewWrapper NextStepsView__mainView', {

components/sidebar/sidebar_next_steps/sidebar_next_steps.scss

@@ -5,6 +5,11 @@
  align-self: flex-end;
  position: relative;
  background-color: var(--sidebar-bg);
+ cursor: pointer;
+
+ &:hover:not(.active) {
+ background-color: rgba(var(--button-color-rgb), 0.08);
+ }
 
  &.active {
  background-color: var(--sidebar-text-hover-bg);

components/sidebar/sidebar_next_steps/sidebar_next_steps.tsx

@@ -47,7 +47,8 @@ export default class SidebarNextSteps extends React.PureComponent<Props, State>
  };
  }
 
- closeNextSteps = () => {
+ closeNextSteps = (event: React.SyntheticEvent) => {
+ event.stopPropagation();
  const screenTitle = this.props.showNextSteps ?
  localizeMessage('sidebar_next_steps.gettingStarted', 'Getting Started') :
  localizeMessage('sidebar_next_steps.tipsAndNextSteps', 'Tips & Next Steps');
@@ -63,6 +64,10 @@ export default class SidebarNextSteps extends React.PureComponent<Props, State>
  });
  }
 
+ showNextSteps = () => {
+ this.props.actions.setShowNextStepsView(true);
+ }
+
  onCloseModal = () => {
  this.props.actions.closeModal(ModalIdentifiers.REMOVE_NEXT_STEPS_MODAL);
  }
@@ -85,10 +90,6 @@ export default class SidebarNextSteps extends React.PureComponent<Props, State>
  return null;
  }
 
- if (!this.props.active && !this.props.showNextSteps) {
- return null;
- }
-
  const total = this.props.steps.length;
  const complete = this.props.preferences.filter((pref) => pref.name !== RecommendedNextSteps.HIDE && pref.value === 'true').length;
 
@@ -125,17 +126,15 @@ export default class SidebarNextSteps extends React.PureComponent<Props, State>
  />
  );
  }
-
  return (
  <div
  className={classNames('SidebarNextSteps', {
  active: this.props.active,
  })}
+ onClick={this.showNextSteps}
  >
  <div className='SidebarNextSteps__top'>
- <span>
- {header}
- </span>
+ <span>{header}</span>
  <button
  className='SidebarNextSteps__close'
  onClick={this.closeNextSteps}
@@ -144,18 +143,17 @@ export default class SidebarNextSteps extends React.PureComponent<Props, State>
  </button>
  </div>
  <div className='SidebarNextSteps__middle'>
- <span>
- {middleSection}
- </span>
+ <span>{middleSection}</span>
  </div>
- {this.props.showNextSteps &&
- <div className='SidebarNextSteps__progressBar'>
- <ProgressBar
- current={complete}
- total={total}
- basePercentage={4}
- />
- </div>}
+ {this.props.showNextSteps && (
+ <div className='SidebarNextSteps__progressBar'>
+ <ProgressBar
+ current={complete}
+ total={total}
+ basePercentage={4}
+ />
+ </div>
+ )}
  </div>
  );
  }