Merge pull request #144 from patternfly/prereq-links

handle prereq links, fix spacing a bit

packages/dev/src/AppLocalized.tsx

@@ -76,7 +76,7 @@ const App3: React.FC<AppProps> = ({ children, showCardFooters }) => {
     language,
     loading,
     useQueryParams: withQueryParams,
-    alwaysShowTaskReview: false,
+    alwaysShowTaskReview: true,
   };
 
   return (

packages/dev/src/AppProps.tsx

@@ -61,7 +61,7 @@ const App: React.FC<AppProps> = ({ children, showCardFooters }) => {
     language,
     loading,
     useQueryParams: withQueryParams,
-    alwaysShowTaskReview: false,
+    alwaysShowTaskReview: true,
   };
 
   const toggleQuickStart = (quickStartId: string) => {

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.

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

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

packages/module/src/QuickStartDrawer.tsx

@@ -80,7 +80,7 @@ export const QuickStartContainer: React.FC<QuickStartContainerProps> = ({
   useQueryParams = true,
   markdown,
   contextProps,
-  alwaysShowTaskReview = false,
+  alwaysShowTaskReview = true,
   ...props
 }) => {
   const valuesForQuickstartContext: QuickStartContextValues = useValuesForQuickStartContext({

packages/module/src/QuickStartPanelContent.scss

@@ -25,9 +25,6 @@
   &__body {
     display: flex;
     flex-direction: column;
-    ul, ol {
-      padding-left: 20px;
-    }
   }
   &__title {
     display: flex;

packages/module/src/catalog/QuickStartTile.tsx

@@ -90,6 +90,8 @@ const QuickStartTile: React.FC<QuickStartTileProps> = ({
           />
         }
         onClick={handleClick}
+        // https://github.com/patternfly/patternfly-react/issues/7039
+        href="#"
         data-test={`tile ${id}`}
         description={
           <QuickStartTileDescription description={description} prerequisites={prerequisites} />

packages/module/src/controller/QuickStartIntroduction.tsx

@@ -38,7 +38,9 @@ const QuickStartIntroduction: React.FC<QuickStartIntroductionProps> = ({
         {prereqs.map((pr) => {
           return (
             <ListItem key={pr} className="pfext-quick-start-intro__prereq-list__item">
-              <span className="pfext-quick-start-intro__prereq-list__item-content">{pr}</span>
+              <span className="pfext-quick-start-intro__prereq-list__item-content">
+                <QuickStartMarkdownView content={pr} />
+              </span>
             </ListItem>
           );
         })}

packages/module/src/controller/QuickStartTaskHeader.tsx

@@ -68,11 +68,13 @@ 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 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 && (
     <>
       <div />
       <div className="pfext-quick-start-task-header__tryagain">Try the steps again.</div>

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

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

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],