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/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/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/ConsoleInternal/components/markdown-view.tsx b/packages/module/src/ConsoleInternal/components/markdown-view.tsx index 15f50d67..f958184f 100644 --- a/packages/module/src/ConsoleInternal/components/markdown-view.tsx +++ b/packages/module/src/ConsoleInternal/components/markdown-view.tsx @@ -28,13 +28,23 @@ 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/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/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..8bfb4a5f 100644 --- a/packages/module/src/catalog/QuickStartTile.tsx +++ b/packages/module/src/catalog/QuickStartTile.tsx @@ -90,6 +90,8 @@ const QuickStartTile: React.FC = ({ /> } onClick={handleClick} + // https://github.com/patternfly/patternfly-react/issues/7039 + 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/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/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 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],