Show configurable task summary + don't show CYW if no review section

packages/dev/src/quickstarts-data/yaml/template.yaml

@@ -7,7 +7,7 @@ spec:
   displayName: Getting started with quick starts
   durationMinutes: 10
   # Optional type section, will display as a tile on the card
-  type: 
+  type:
     text: Type
     # 'blue' | 'cyan' | 'green' | 'orange' | 'purple' | 'red' | 'grey'
     color: grey
@@ -88,10 +88,11 @@ spec:
         Also, don't forget to [check out the source](https://github.com/patternfly/patternfly-quickstarts/blob/main/packages/dev/src/quickstarts-data/yaml/template.yaml) for this quick start for more information!
 
         Happy writing!
-      review:
-        instructions: |-
-          - Thanks for checking out this quick start!
-        failedTaskHelp: This task isn’t verified yet. Try the task again.
+      # review commented out here to show interaction when review is not defined
+      # review:
+      #   instructions: |-
+      #     - Thanks for checking out this quick start!
+      #   failedTaskHelp: This task isn’t verified yet. Try the task again.
   conclusion: |-
     The conclusion appears in the last section of the quick start.
   # you can link to the next quick start(s) here

packages/module/src/controller/QuickStartTaskHeader.tsx

@@ -6,12 +6,13 @@ import { css } from '@patternfly/react-styles';
 import { markdownConvert } from '../ConsoleInternal/components/markdown-view';
 import { removeParagraphWrap } from '../QuickStartMarkdownView';
 import { QuickStartContext, QuickStartContextValues } from '../utils/quick-start-context';
-import { QuickStartTaskStatus } from '../utils/quick-start-types';
+import { QuickStartTaskStatus, QuickStartTaskSummary } from '../utils/quick-start-types';
 
 import './QuickStartTaskHeader.scss';
 
 type QuickStartTaskHeaderProps = {
   title: string;
+  summary?: QuickStartTaskSummary;
   taskIndex: number;
   subtitle?: string;
   taskStatus?: QuickStartTaskStatus;
@@ -53,8 +54,28 @@ const TaskIcon: React.FC<{
   return <span className={classNames}>{content}</span>;
 };
 
+const TaskSummaryMessage: React.FC<{
+  shouldShowSuccessMessage: boolean;
+  summary?: QuickStartTaskSummary;
+}> = ({ shouldShowSuccessMessage, summary }) => {
+  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
+
+  const successMessage = summary?.success || getResource('You have completed this task!');
+  const failedMessage = summary?.failed || getResource('Try the steps again.');
+
+  return (
+    <>
+      <div />
+      <div className="pfext-quick-start-task-header__tryagain">
+        {shouldShowSuccessMessage ? successMessage : failedMessage}
+      </div>
+    </>
+  );
+};
+
 const QuickStartTaskHeader: React.FC<QuickStartTaskHeaderProps> = ({
   title,
+  summary,
   taskIndex,
   subtitle,
   taskStatus,
@@ -68,16 +89,12 @@ const QuickStartTaskHeader: React.FC<QuickStartTaskHeaderProps> = ({
     'pfext-quick-start-task-header__title-failed':
       taskStatus === (QuickStartTaskStatus.FAILED || QuickStartTaskStatus.VISITED),
   });
-  const notCompleted = taskStatus === QuickStartTaskStatus.VISITED;
-  const skippedReviewOrFailed =
-    taskStatus === QuickStartTaskStatus.REVIEW || taskStatus === QuickStartTaskStatus.FAILED;
 
-  const tryAgain = !isActiveTask && (skippedReviewOrFailed || notCompleted) && (
-    <>
-      <div />
-      <div className="pfext-quick-start-task-header__tryagain">Try the steps again.</div>
-    </>
-  );
+  const shouldShowFailedMessage =
+    taskStatus === QuickStartTaskStatus.REVIEW ||
+    taskStatus === QuickStartTaskStatus.FAILED ||
+    taskStatus === QuickStartTaskStatus.VISITED;
+  const shouldShowSuccessMessage = taskStatus === QuickStartTaskStatus.SUCCESS;
 
   const content = (
     <div className="pfext-quick-start-task-header">
@@ -94,7 +111,9 @@ const QuickStartTaskHeader: React.FC<QuickStartTaskHeaderProps> = ({
           </span>
         )}
       </Title>
-      {tryAgain}
+      {!isActiveTask && (shouldShowSuccessMessage || shouldShowFailedMessage) && (
+        <TaskSummaryMessage shouldShowSuccessMessage={shouldShowSuccessMessage} summary={summary} />
+      )}
     </div>
   );
 

packages/module/src/controller/QuickStartTaskHeaderList.tsx

@@ -22,6 +22,7 @@ const QuickStartTaskHeaderList: React.FC<QuickStartTaskHeaderListProps> = ({
         <TaskHeader
           key={task.title}
           title={task.title}
+          summary={task.summary}
           taskIndex={index + 1}
           size="md"
           taskStatus={allTaskStatuses[index]}

packages/module/src/controller/QuickStartTasks.tsx

@@ -32,7 +32,7 @@ const QuickStartTasks: React.FC<QuickStartTaskProps> = ({
         {tasks
           .filter((_, index) => allTaskStatuses[index] !== QuickStartTaskStatus.INIT)
           .map((task, index) => {
-            const { title, description, review } = task;
+            const { title, description, review, summary } = task;
             const isActiveTask = index === taskNumber;
             const taskStatus = allTaskStatuses[index];
             const shouldShowTaskReview =
@@ -43,6 +43,7 @@ const QuickStartTasks: React.FC<QuickStartTaskProps> = ({
                 <TaskHeader
                   taskIndex={index + 1}
                   title={title}
+                  summary={summary}
                   size="md"
                   subtitle={getResource('{{index, number}} of {{tasks, number}}')
                     .replace('{{index, number}}', index + 1)

packages/module/src/locales/en/quickstart.json

@@ -42,5 +42,7 @@
   "Copy to clipboard": "Copy to clipboard",
   "Successfully copied to clipboard!": "Successfully copied to clipboard!",
   "Type": "Quick start",
-  "{{type}} • {{duration, number}} minutes": "{{type}} • {{duration, number}} minutes"
+  "{{type}} • {{duration, number}} minutes": "{{type}} • {{duration, number}} minutes",
+  "Try the steps again.": "Try the steps again.",
+  "You have completed this task!": "You have completed this task!"
 }

packages/module/src/utils/quick-start-context.tsx

@@ -296,16 +296,22 @@ export const useValuesForQuickStartContext = (
         return;
       }
 
-      setAllQuickStartStates((qs) => {
-        const quickStart = qs[activeQuickStartID];
-        const status = quickStart?.status;
-        const taskNumber = quickStart?.taskNumber as number;
-        const taskStatus = quickStart[getTaskStatusKey(taskNumber)];
+      setAllQuickStartStates((quickStartStates) => {
+        const quickStartState: QuickStartState = quickStartStates[activeQuickStartID];
+        const status = quickStartState?.status;
+        const taskNumber = quickStartState?.taskNumber as number;
+        const taskStatus = quickStartState[getTaskStatusKey(taskNumber)];
 
         let updatedStatus;
         let updatedTaskNumber;
         let updatedTaskStatus;
 
+        const quickStart: QuickStart = allQuickStarts.find((qs) => {
+          return qs.metadata.name === activeQuickStartID;
+        });
+
+        const task = quickStart.spec.tasks[taskNumber];
+
         if (status === QuickStartStatus.NOT_STARTED) {
           updatedStatus = QuickStartStatus.IN_PROGRESS;
         } else if (
@@ -317,7 +323,14 @@ export const useValuesForQuickStartContext = (
         }
 
         if (taskStatus === QuickStartTaskStatus.VISITED) {
-          updatedTaskStatus = QuickStartTaskStatus.REVIEW;
+          if (task.review) {
+            updatedTaskStatus = QuickStartTaskStatus.REVIEW;
+          } else {
+            updatedTaskStatus = QuickStartTaskStatus.SUCCESS;
+            if (taskNumber < totalTasks) {
+              updatedTaskNumber = taskNumber + 1;
+            }
+          }
         }
 
         if (taskNumber < totalTasks && !updatedTaskStatus) {
@@ -326,13 +339,13 @@ export const useValuesForQuickStartContext = (
 
         const markInitialStepVisitedOrReview =
           updatedTaskNumber > -1 &&
-          quickStart[getTaskStatusKey(updatedTaskNumber)] === QuickStartTaskStatus.INIT
+          quickStartState[getTaskStatusKey(updatedTaskNumber)] === QuickStartTaskStatus.INIT
             ? stepAfterInitial
-            : quickStart[getTaskStatusKey(updatedTaskNumber)];
+            : quickStartState[getTaskStatusKey(updatedTaskNumber)];
         const newState = {
-          ...qs,
+          ...quickStartStates,
           [activeQuickStartID]: {
-            ...quickStart,
+            ...quickStartState,
             ...(updatedStatus ? { status: updatedStatus } : {}),
             ...(updatedTaskNumber > -1
               ? {
@@ -346,7 +359,7 @@ export const useValuesForQuickStartContext = (
         return newState;
       });
     },
-    [activeQuickStartID, setAllQuickStartStates, stepAfterInitial],
+    [activeQuickStartID, allQuickStarts, setAllQuickStartStates, stepAfterInitial],
   );
 
   const previousStep = useCallback(() => {