Bug 1871901: Fix restart and review quickstart scenario according to UX

frontend/packages/console-app/src/components/quick-starts/QuickStartController.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { Dispatch, connect } from 'react-redux';
 import { RootState } from '@console/internal/redux';
-import { Alert } from '@patternfly/react-core';
 import * as QuickStartActions from '../../redux/actions/quick-start-actions';
 import { getActiveQuickStartState } from '../../redux/reducers/quick-start-reducer';
 import {
@@ -121,14 +120,6 @@ const QuickStartController: React.FC<QuickStartControllerProps> = ({
 
   return (
     <>
-      {status === QuickStartStatus.COMPLETE && (
-        <Alert
-          variant="success"
-          title="This tour has already been completed."
-          style={{ marginBottom: 'var(--pf-global--spacer--lg)' }}
-          isInline
-        />
-      )}
       <QuickStartContent
         quickStart={quickStart}
         taskNumber={taskNumber}

frontend/packages/console-app/src/components/quick-starts/catalog/QuickStartTileFooter.tsx

@@ -12,6 +12,7 @@ type StateProps = {
 
 type DispatchProps = {
   setActiveQuickStart?: (quickStartID: string, totalTasks: number) => void;
+  resetQuickStart?: (quickStartID: string, totalTasks: number) => void;
   setQuickStartStatus?: (quickStartId: string, quickStartStatus: QuickStartStatus) => void;
   setQuickStartTaskNumber?: (quickStartId: string, taskNumber: number) => void;
 };
@@ -31,18 +32,8 @@ const QuickStartTileFooter: React.FC<Props> = ({
   totalTasks,
   setActiveQuickStart,
   setQuickStartStatus,
-  setQuickStartTaskNumber,
+  resetQuickStart,
 }) => {
-  const stopPropagation = React.useCallback(
-    (e: React.SyntheticEvent) => {
-      if (activeQuickStartId) {
-        e.preventDefault();
-        e.stopPropagation();
-      }
-    },
-    [activeQuickStartId],
-  );
-
   const startQuickStart = React.useCallback(
     (e: React.SyntheticEvent) => {
       e.preventDefault();
@@ -56,19 +47,10 @@ const QuickStartTileFooter: React.FC<Props> = ({
 
   const restartQuickStart = React.useCallback(
     (e: React.SyntheticEvent) => {
-      stopPropagation(e);
-      setQuickStartStatus(quickStartId, QuickStartStatus.IN_PROGRESS);
-      setQuickStartTaskNumber(quickStartId, -1);
-    },
-    [quickStartId, setQuickStartStatus, setQuickStartTaskNumber, stopPropagation],
-  );
-
-  const reviewQuickStart = React.useCallback(
-    (e: React.SyntheticEvent) => {
-      stopPropagation(e);
-      setQuickStartTaskNumber(quickStartId, -1);
+      resetQuickStart(quickStartId, totalTasks);
+      startQuickStart(e);
     },
-    [quickStartId, setQuickStartTaskNumber, stopPropagation],
+    [quickStartId, resetQuickStart, startQuickStart, totalTasks],
   );
 
   return (
@@ -80,17 +62,17 @@ const QuickStartTileFooter: React.FC<Props> = ({
           </Button>
         </FlexItem>
       )}
-      {status === QuickStartStatus.IN_PROGRESS && (
+      {status === QuickStartStatus.IN_PROGRESS && activeQuickStartId !== quickStartId && (
         <FlexItem>
-          <Button onClick={stopPropagation} variant="link" isInline>
+          <Button variant="link" isInline>
             Resume the tour
           </Button>
         </FlexItem>
       )}
       {status === QuickStartStatus.COMPLETE && (
         <FlexItem>
-          <Button onClick={reviewQuickStart} variant="link" isInline>
-            Review the tour
+          <Button onClick={restartQuickStart} variant="link" isInline>
+            Start the tour
           </Button>
         </FlexItem>
       )}
@@ -112,6 +94,8 @@ const mapStateToProps = (state: RootState): StateProps => ({
 const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
   setActiveQuickStart: (quickStartID: string, totalTasks: number) =>
     dispatch(QuickStartActions.setActiveQuickStart(quickStartID, totalTasks)),
+  resetQuickStart: (quickStartID: string, totalTasks: number) =>
+    dispatch(QuickStartActions.resetQuickStart(quickStartID, totalTasks)),
   setQuickStartStatus: (quickStartId: string, quickStartStatus: QuickStartStatus) =>
     dispatch(QuickStartActions.setQuickStartStatus(quickStartId, quickStartStatus)),
   setQuickStartTaskNumber: (quickStartId: string, taskNumber: number) =>

frontend/packages/console-app/src/components/quick-starts/controller/QuickStartTaskHeader.scss

@@ -2,7 +2,7 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  margin-bottom: var(--pf-global--spacer--md);
+  margin-bottom: var(--pf-global--spacer--xs);
   button::before {
     content: none;
   }

frontend/packages/console-app/src/redux/actions/quick-start-actions.ts

@@ -9,6 +9,7 @@ export enum Actions {
   SetQuickStartStatus = 'setQuickStartStatus',
   SetQuickStartTaskNumber = 'setQuickStartTaskNumber',
   SetQuickStartTaskStatus = 'setQuickStartTaskStatus',
+  ResetQuickStart = 'resetQuickStart',
 }
 
 export const setActiveQuickStart = (quickStartId: string, totalTasks?: number) =>
@@ -23,11 +24,15 @@ export const setQuickStartTaskNumber = (quickStartId: string, quickStartTaskNumb
 export const setQuickStartTaskStatus = (quickStartTaskStatus: QuickStartTaskStatus) =>
   action(Actions.SetQuickStartTaskStatus, { quickStartTaskStatus });
 
+export const resetQuickStart = (quickStartId: string, totalTasks?: number) =>
+  action(Actions.ResetQuickStart, { quickStartId, totalTasks });
+
 const actions = {
   setActiveQuickStart,
   setQuickStartStatus,
   setQuickStartTaskNumber,
   setQuickStartTaskStatus,
+  resetQuickStart,
 };
 
 export type QuickStartSidebarActions = ActionType<typeof actions>;

frontend/packages/console-app/src/redux/reducers/quick-start-reducer.ts

@@ -67,6 +67,16 @@ export default (state = getInitialState(), action: QuickStartSidebarActions) =>
       return newState;
     }
 
+    case Actions.ResetQuickStart: {
+      const { quickStartId, totalTasks } = action.payload;
+      const newState = state.setIn(
+        ['allQuickStartStates', quickStartId],
+        getDefaultQuickStartState(totalTasks),
+      );
+      persistState(newState);
+      return newState;
+    }
+
     case Actions.SetQuickStartStatus: {
       const { quickStartId, quickStartStatus } = action.payload;
       const newState = state.setIn(