From ad8248e06d4aaf87e9c9ecf41ae37947bad8860c Mon Sep 17 00:00:00 2001 From: Joachim Schuler Date: Wed, 9 Mar 2022 14:55:38 -0500 Subject: [PATCH 1/4] handle prereq links, fix spacing a bit --- .../yaml/add-healthchecks-quickstart.yaml | 2 +- .../src/ConsoleInternal/components/markdown-view.tsx | 9 ++++++++- packages/module/src/QuickStartPanelContent.scss | 3 --- packages/module/src/catalog/QuickStartTile.tsx | 1 + .../module/src/controller/QuickStartIntroduction.tsx | 4 +++- packages/module/src/controller/QuickStartTasks.scss | 1 - 6 files changed, 13 insertions(+), 7 deletions(-) diff --git a/packages/dev/src/quickstarts-data/yaml/add-healthchecks-quickstart.yaml b/packages/dev/src/quickstarts-data/yaml/add-healthchecks-quickstart.yaml index e29f36dd..21c7dcd6 100644 --- a/packages/dev/src/quickstarts-data/yaml/add-healthchecks-quickstart.yaml +++ b/packages/dev/src/quickstarts-data/yaml/add-healthchecks-quickstart.yaml @@ -6,7 +6,7 @@ spec: description: |- You just created a sample application. Now, let’s add health checks to it. - prerequisites: [You completed the "Getting started with a sample" quick start.] + prerequisites: ["A Red Hat user account to access the [Red Hat Hybrid Cloud Console](https://console.redhat.com/).", "An instance of OpenShift Container Platform (OCP) 4.9 or higher running on Red Hat OpenShift Dedicated (OSD), or Red Hat OpenShift Service on AWS (ROSA). When using OSD or ROSA, an Amazon Web Services (AWS) account and credentials are required.", "Access to the OpenShift Cluster Manager (OCM) console.", "A service account with either the [MongoDB Atlas](https://www.mongodb.com/atlas/database), or [Crunchy Data Bridge](https://www.crunchydata.com), or [CockroachDB](https://www.cockroachlabs.com) cloud database provider.", "An existing database instance running on one of these cloud database providers: MongoDB Atlas, Crunchy Data Bridge, or CockroachDB."] introduction: |- ### This quick start shows you how to add health checks to your sample application. You should have previously created the **sample-app** application and **nodejs-sample** deployment using the **Get started with a sample** quick start. If you haven't, you may be able to follow these tasks with any existing deployment without configured health checks. diff --git a/packages/module/src/ConsoleInternal/components/markdown-view.tsx b/packages/module/src/ConsoleInternal/components/markdown-view.tsx index 15f50d67..110ae806 100644 --- a/packages/module/src/ConsoleInternal/components/markdown-view.tsx +++ b/packages/module/src/ConsoleInternal/components/markdown-view.tsx @@ -28,13 +28,20 @@ export const markdownConvert = (markdown, extensions?: ShowdownExtension[]) => { converter.addExtension(extensions); } - // add hook to transform anchor tags DOMPurify.addHook('beforeSanitizeElements', function(node) { // nodeType 1 = element type + + // transform anchor tags if (node.nodeType === 1 && node.nodeName.toLowerCase() === 'a') { node.setAttribute('rel', 'noopener noreferrer'); return node; } + + // add PF class to ul and ol lists + if (node.nodeType === 1 && (node.nodeName.toLowerCase() === 'ul' || node.nodeName.toLowerCase() === 'ol')) { + node.setAttribute('class', 'pf-c-list'); + return node; + } }); // Add a hook to make all links open a new window diff --git a/packages/module/src/QuickStartPanelContent.scss b/packages/module/src/QuickStartPanelContent.scss index 78cb0aa7..afbefb08 100644 --- a/packages/module/src/QuickStartPanelContent.scss +++ b/packages/module/src/QuickStartPanelContent.scss @@ -25,9 +25,6 @@ &__body { display: flex; flex-direction: column; - ul, ol { - padding-left: 20px; - } } &__title { display: flex; diff --git a/packages/module/src/catalog/QuickStartTile.tsx b/packages/module/src/catalog/QuickStartTile.tsx index b55787cd..2341c936 100644 --- a/packages/module/src/catalog/QuickStartTile.tsx +++ b/packages/module/src/catalog/QuickStartTile.tsx @@ -90,6 +90,7 @@ const QuickStartTile: React.FC = ({ /> } onClick={handleClick} + href="#" data-test={`tile ${id}`} description={ diff --git a/packages/module/src/controller/QuickStartIntroduction.tsx b/packages/module/src/controller/QuickStartIntroduction.tsx index 418389bc..fad83cb1 100644 --- a/packages/module/src/controller/QuickStartIntroduction.tsx +++ b/packages/module/src/controller/QuickStartIntroduction.tsx @@ -38,7 +38,9 @@ const QuickStartIntroduction: React.FC = ({ {prereqs.map((pr) => { return ( - {pr} + + + ); })} diff --git a/packages/module/src/controller/QuickStartTasks.scss b/packages/module/src/controller/QuickStartTasks.scss index 77275fae..eead709a 100644 --- a/packages/module/src/controller/QuickStartTasks.scss +++ b/packages/module/src/controller/QuickStartTasks.scss @@ -14,7 +14,6 @@ } } .pfext-quick-start-task__content { - margin-left: var(--pf-global--spacer--lg); margin-bottom: var(--pf-global--spacer--md); } // Custom styles on PF React List rendered in custom react renderer From 3ab6e69930640a9830d9a5cf565e76edbab916e6 Mon Sep 17 00:00:00 2001 From: Joachim Schuler Date: Wed, 9 Mar 2022 15:04:26 -0500 Subject: [PATCH 2/4] fix prettier --- .../module/src/ConsoleInternal/components/markdown-view.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/module/src/ConsoleInternal/components/markdown-view.tsx b/packages/module/src/ConsoleInternal/components/markdown-view.tsx index 110ae806..f958184f 100644 --- a/packages/module/src/ConsoleInternal/components/markdown-view.tsx +++ b/packages/module/src/ConsoleInternal/components/markdown-view.tsx @@ -38,7 +38,10 @@ export const markdownConvert = (markdown, extensions?: ShowdownExtension[]) => { } // add PF class to ul and ol lists - if (node.nodeType === 1 && (node.nodeName.toLowerCase() === 'ul' || node.nodeName.toLowerCase() === 'ol')) { + if ( + node.nodeType === 1 && + (node.nodeName.toLowerCase() === 'ul' || node.nodeName.toLowerCase() === 'ol') + ) { node.setAttribute('class', 'pf-c-list'); return node; } From 69d65e4e15dc6f59cfb8e8d4b15b05812599ab5e Mon Sep 17 00:00:00 2001 From: Joachim Schuler Date: Wed, 9 Mar 2022 15:28:03 -0500 Subject: [PATCH 3/4] trigger another percy run --- packages/module/src/catalog/QuickStartTile.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/module/src/catalog/QuickStartTile.tsx b/packages/module/src/catalog/QuickStartTile.tsx index 2341c936..8bfb4a5f 100644 --- a/packages/module/src/catalog/QuickStartTile.tsx +++ b/packages/module/src/catalog/QuickStartTile.tsx @@ -90,6 +90,7 @@ const QuickStartTile: React.FC = ({ /> } onClick={handleClick} + // https://github.com/patternfly/patternfly-react/issues/7039 href="#" data-test={`tile ${id}`} description={ From ed56af63f0159bb3f0f30f86e780a7c469f3e5a6 Mon Sep 17 00:00:00 2001 From: Joachim Schuler Date: Thu, 10 Mar 2022 10:41:10 -0500 Subject: [PATCH 4/4] fix restart action and toned down failed task message --- packages/dev/src/AppLocalized.tsx | 2 +- packages/dev/src/AppProps.tsx | 2 +- packages/dev/src/quickstarts-data/yaml/template.yaml | 4 ++-- packages/module/src/QuickStartDrawer.tsx | 2 +- .../module/src/controller/QuickStartTaskHeader.tsx | 10 ++++++---- packages/module/src/styles/_base.scss | 4 ++++ packages/module/src/utils/quick-start-context.tsx | 2 +- 7 files changed, 16 insertions(+), 10 deletions(-) diff --git a/packages/dev/src/AppLocalized.tsx b/packages/dev/src/AppLocalized.tsx index db69ee3d..fe48be4e 100755 --- a/packages/dev/src/AppLocalized.tsx +++ b/packages/dev/src/AppLocalized.tsx @@ -76,7 +76,7 @@ const App3: React.FC = ({ children, showCardFooters }) => { language, loading, useQueryParams: withQueryParams, - alwaysShowTaskReview: false, + alwaysShowTaskReview: true, }; return ( diff --git a/packages/dev/src/AppProps.tsx b/packages/dev/src/AppProps.tsx index 54d74e0c..c85f803d 100755 --- a/packages/dev/src/AppProps.tsx +++ b/packages/dev/src/AppProps.tsx @@ -61,7 +61,7 @@ const App: React.FC = ({ children, showCardFooters }) => { language, loading, useQueryParams: withQueryParams, - alwaysShowTaskReview: false, + alwaysShowTaskReview: true, }; const toggleQuickStart = (quickStartId: string) => { diff --git a/packages/dev/src/quickstarts-data/yaml/template.yaml b/packages/dev/src/quickstarts-data/yaml/template.yaml index 73207f12..25892bf4 100644 --- a/packages/dev/src/quickstarts-data/yaml/template.yaml +++ b/packages/dev/src/quickstarts-data/yaml/template.yaml @@ -89,7 +89,7 @@ spec: review: instructions: |- - Did you complete the task successfully? - failedTaskHelp: This task isn’t verified yet. Try the task again. + failedTaskHelp: This task isn't verified yet. Try the task again. # optional - the task's success and failure messages summary: success: Shows a success message in the task header @@ -105,7 +105,7 @@ spec: review: instructions: |- - Thanks for checking out this quick start! - failedTaskHelp: This task isn’t verified yet. Try the task again. + 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/QuickStartDrawer.tsx b/packages/module/src/QuickStartDrawer.tsx index 277f9dc6..fc8073d9 100644 --- a/packages/module/src/QuickStartDrawer.tsx +++ b/packages/module/src/QuickStartDrawer.tsx @@ -80,7 +80,7 @@ export const QuickStartContainer: React.FC = ({ useQueryParams = true, markdown, contextProps, - alwaysShowTaskReview = false, + alwaysShowTaskReview = true, ...props }) => { const valuesForQuickstartContext: QuickStartContextValues = useValuesForQuickStartContext({ diff --git a/packages/module/src/controller/QuickStartTaskHeader.tsx b/packages/module/src/controller/QuickStartTaskHeader.tsx index 393a20af..a0cdb414 100644 --- a/packages/module/src/controller/QuickStartTaskHeader.tsx +++ b/packages/module/src/controller/QuickStartTaskHeader.tsx @@ -68,11 +68,13 @@ 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 notCompleted = taskStatus === QuickStartTaskStatus.VISITED; + // const skippedReview = taskStatus === QuickStartTaskStatus.REVIEW; + const failedReview = taskStatus === QuickStartTaskStatus.FAILED; - const tryAgain = !isActiveTask && (skippedReviewOrFailed || notCompleted) && ( + // TODO: toned down when this is shown, investigate further when we should display it + // related: https://github.com/patternfly/patternfly-quickstarts/issues/104 + const tryAgain = failedReview && ( <>
Try the steps again.
diff --git a/packages/module/src/styles/_base.scss b/packages/module/src/styles/_base.scss index f7c16a01..3f41d2f0 100644 --- a/packages/module/src/styles/_base.scss +++ b/packages/module/src/styles/_base.scss @@ -27,6 +27,10 @@ input[type="radio"] { margin-right: 7px; } + + .pf-c-list { + --pf-c-list--PaddingLeft: 20px; + } } // drawer diff --git a/packages/module/src/utils/quick-start-context.tsx b/packages/module/src/utils/quick-start-context.tsx index 1d793f71..19176d63 100644 --- a/packages/module/src/utils/quick-start-context.tsx +++ b/packages/module/src/utils/quick-start-context.tsx @@ -279,7 +279,7 @@ export const useValuesForQuickStartContext = ( }); setAllQuickStartStates((qs) => ({ ...qs, - [quickStartId]: getDefaultQuickStartState(totalTasks, QuickStartStatus.IN_PROGRESS), + [quickStartId]: getDefaultQuickStartState(totalTasks, QuickStartStatus.NOT_STARTED), })); }, [setActiveQuickStartID, setAllQuickStartStates, useQueryParams],