From 9d5ed7f2fc847e4368599f86828164bd0a9702a0 Mon Sep 17 00:00:00 2001 From: Cooper Trowbridge Date: Thu, 3 Feb 2022 15:32:51 -0700 Subject: [PATCH 1/3] show task summary, cleanup --- .../src/controller/QuickStartTaskHeader.tsx | 41 ++++++++++++++----- .../module/src/controller/QuickStartTasks.tsx | 3 +- .../module/src/locales/en/quickstart.json | 4 +- 3 files changed, 35 insertions(+), 13 deletions(-) diff --git a/packages/module/src/controller/QuickStartTaskHeader.tsx b/packages/module/src/controller/QuickStartTaskHeader.tsx index 393a20af..3db5ff49 100644 --- a/packages/module/src/controller/QuickStartTaskHeader.tsx +++ b/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 {content}; }; +const TaskSummaryMessage: React.FC<{ + shouldShowSuccessMessage: boolean; + summary?: QuickStartTaskSummary; +}> = ({ shouldShowSuccessMessage, summary }) => { + const { getResource } = React.useContext(QuickStartContext); + + const successMessage = summary?.success || getResource('You have completed this task!'); + const failedMessage = summary?.failed || getResource('Try the steps again.'); + + return ( + <> +
+
+ {shouldShowSuccessMessage ? successMessage : failedMessage} +
+ + ); +}; + const QuickStartTaskHeader: React.FC = ({ title, + summary, taskIndex, subtitle, taskStatus, @@ -68,16 +89,12 @@ const QuickStartTaskHeader: React.FC = ({ '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) && ( - <> -
-
Try the steps again.
- - ); + const shouldShowFailedMessage = + taskStatus === QuickStartTaskStatus.REVIEW || + taskStatus === QuickStartTaskStatus.FAILED || + taskStatus === QuickStartTaskStatus.VISITED; + const shouldShowSuccessMessage = taskStatus === QuickStartTaskStatus.SUCCESS; const content = (
@@ -94,7 +111,9 @@ const QuickStartTaskHeader: React.FC = ({ )} - {tryAgain} + {!isActiveTask && (shouldShowSuccessMessage || shouldShowFailedMessage) && ( + + )}
); diff --git a/packages/module/src/controller/QuickStartTasks.tsx b/packages/module/src/controller/QuickStartTasks.tsx index b961fa2d..f1329ae8 100644 --- a/packages/module/src/controller/QuickStartTasks.tsx +++ b/packages/module/src/controller/QuickStartTasks.tsx @@ -32,7 +32,7 @@ const QuickStartTasks: React.FC = ({ {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 = ({ Date: Thu, 3 Feb 2022 16:47:56 -0700 Subject: [PATCH 2/3] pass summary to TaskHeaderList --- packages/module/src/controller/QuickStartTaskHeaderList.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/module/src/controller/QuickStartTaskHeaderList.tsx b/packages/module/src/controller/QuickStartTaskHeaderList.tsx index 5c9802d5..5def6a11 100644 --- a/packages/module/src/controller/QuickStartTaskHeaderList.tsx +++ b/packages/module/src/controller/QuickStartTaskHeaderList.tsx @@ -22,6 +22,7 @@ const QuickStartTaskHeaderList: React.FC = ({ Date: Thu, 3 Feb 2022 17:39:39 -0700 Subject: [PATCH 3/3] Skip review task status if review undefined on qs --- .../src/quickstarts-data/yaml/template.yaml | 11 +++--- .../module/src/utils/quick-start-context.tsx | 35 +++++++++++++------ 2 files changed, 30 insertions(+), 16 deletions(-) diff --git a/packages/dev/src/quickstarts-data/yaml/template.yaml b/packages/dev/src/quickstarts-data/yaml/template.yaml index 6ac4525b..ab641351 100644 --- a/packages/dev/src/quickstarts-data/yaml/template.yaml +++ b/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 diff --git a/packages/module/src/utils/quick-start-context.tsx b/packages/module/src/utils/quick-start-context.tsx index 1d793f71..dcc21d8f 100644 --- a/packages/module/src/utils/quick-start-context.tsx +++ b/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(() => {