@patternfly/quickstarts 1.4.1-rc.1 → 2.1.0

package/README.md

@@ -99,7 +99,7 @@ const App = () => {
     setTimeout(() => {
       // simulate loading time to get the quick starts from somewhere
       load();
-    }, 1500);
+    }, 500);
   }, []);
 
   const withQueryParams = true;
@@ -166,38 +166,17 @@ See above usage of `useLegacyHeaderColors` boolean to opt-out of update. Should
 
 ## Quick starts format
 
-Quick starts are parsed as markdown. To write your own quick start, if you use Typescript you can [check out the type definition here](https://github.com/patternfly/patternfly-quickstarts/blob/d52b194119f1ff16e69bf589d49a14931a19ac4b/packages/module/src/utils/quick-start-types.ts#L6).
-
-A basic quick start has this structure:
-```yaml
-metadata:
-  name: id-of-this-quick-start
-spec:
-  displayName: Get started with Node
-  durationMinutes: 10
-  description: 'Import a Node Application from git, build, and deploy it onto OpenShift.'
-  introduction: >-
-    **Node.js** is based on the V8 JavaScript engine and allows you to write
-    server-side JavaScript applications. It provides an I/O model based on
-    events and non-blocking operations that enables you to write efficient
-    applications.
-  tasks:
-    - title: Create a Node application
-      description: First task description
-      review:
-        failedTaskHelp: This task isn’t verified yet. Try the task again.
-        instructions: >-
-          The application is represented by the light grey area with the white border. The deployment is a white circle. Verify that the application was successfully created.
-    - title: View the build status
-      description: Second task description
-      review:
-        failedTaskHelp: This task isn’t verified yet. Try the task again.
-        instructions: >-
-          This build may take a few minutes. When it's finished, a **Complete** badge will surface on the page header beside build name **nodejsrest-http-redhat-1**. Did this badge appear?
-  conclusion: Your Node application is deployed and ready.
-```
+Quick starts are parsed as markdown. To write your own quick start, if you use Typescript you can [check out the type definition here](https://github.com/patternfly/patternfly-quickstarts/blob/main/packages/module/src/utils/quick-start-types.ts).
+
+Here's a [yaml template](https://github.com/patternfly/patternfly-quickstarts/blob/main/packages/dev/src/quickstarts-data/yaml/template.yaml) to get you started on writing your own quick starts.
+
+## Writing quick starts
 
-For more examples of quick starts, [you can go here](https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/dev/src/quickstarts-data/mocks/yamls).
+Quick starts are typically written in yaml, but we've also seen projects use asciidoc and json. As long as you can pass in an [array of quick starts](https://github.com/patternfly/patternfly-quickstarts/blob/b086faefb0699e4259ca23d058ed330df1d87f8a/packages/module/src/QuickStartDrawer.tsx#L18) it doesn't really matter in what format your content is sourced.
+- We have a [yaml starter template here](https://github.com/patternfly/patternfly-quickstarts/blob/main/packages/dev/src/quickstarts-data/yaml/template.yaml)
+- The easiest way to preview the content as you're writing it, is to use Visual Studio code with our [quickstarts-preview extension](https://marketplace.visualstudio.com/items?itemName=PatternFly.quickstarts-preview).
+  - Alternatively, you can use [github.dev](https://github.dev/) which is basically VS Code on the web, and install the extension there, then edit your yaml content!
+- For guidelines on writing a quick start, the fine folks at OpenShift have created [this guide](https://docs.openshift.com/container-platform/4.9/web_console/creating-quick-start-tutorials.html)
 
 ### Highlighting elements
 
@@ -250,4 +229,4 @@ return (
 Use this [file](https://github.com/patternfly/patternfly-quickstarts/blob/main/packages/module/src/locales/en/quickstart.json) as a base for your translations.
 Each language is different, especially when it comes to plurals. Try [this utility](https://jsfiddle.net/6bpxsgd4) sourced from [i18next](https://www.i18next.com/translation-function/plurals#how-to-find-the-correct-plural-suffix) to determine the suffixes for the right plural format.
 
-#### 
+For localizing the content of quick starts files, we provide the option to include `language` and `countryCode` key to your translated file. Based on these keys you can filter out quick starts. We have a demo of this behaviour in our [demo app](https://quickstarts.netlify.app/quickstarts-localized). You can have a look at the code [here](https://github.com/patternfly/patternfly-quickstarts/blob/main/packages/dev/src/AppLocalized.tsx).

package/dist/ConsoleInternal/module/k8s/types.d.ts

@@ -16,6 +16,7 @@ export declare type OwnerReference = {
     blockOwnerDeletion?: boolean;
 };
 export declare type ObjectMetadata = {
+    name: string;
     annotations?: {
         [key: string]: string;
     };
@@ -30,9 +31,12 @@ export declare type ObjectMetadata = {
         [key: string]: string;
     };
     managedFields?: any[];
-    name?: string;
     namespace?: string;
     ownerReferences?: OwnerReference[];
     resourceVersion?: string;
     uid?: string;
+    language?: string;
+    country?: string;
+    locale?: string;
+    [key: string]: any;
 };

package/dist/ConsoleShared/src/components/markdown-extensions/admonition-extension.d.ts

@@ -0,0 +1,7 @@
+import './showdown-extension.scss';
+declare const useAdmonitionShowdownExtension: () => {
+    type: string;
+    regex: RegExp;
+    replace: (text: string, content: string, admonitionLabel: string, admonitionType: string, groupId: string) => string;
+};
+export default useAdmonitionShowdownExtension;

package/dist/ConsoleShared/src/components/markdown-extensions/index.d.ts

@@ -1,3 +1,4 @@
 export { default as MarkdownCopyClipboard } from './MarkdownCopyClipboard';
 export { default as useInlineCopyClipboardShowdownExtension } from './inline-clipboard-extension';
 export { default as useMultilineCopyClipboardShowdownExtension } from './multiline-clipboard-extension';
+export { default as useAdmonitionShowdownExtension } from './admonition-extension';

package/dist/QuickStartCatalogPage.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { QuickStart } from './utils/quick-start-types';
-declare type QuickStartCatalogPageProps = {
+export declare type QuickStartCatalogPageProps = {
     quickStarts?: QuickStart[];
     showFilter?: boolean;
     sortFnc?: (q1: QuickStart, q2: QuickStart) => number;
@@ -12,4 +12,3 @@ export declare const QuickStartCatalogEmptyState: ({ clearFilters }: {
     clearFilters: any;
 }) => JSX.Element;
 export declare const QuickStartCatalogPage: React.FC<QuickStartCatalogPageProps>;
-export {};

package/dist/controller/QuickStartTaskHeader.d.ts

@@ -9,6 +9,7 @@ declare type QuickStartTaskHeaderProps = {
     size?: 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
     isActiveTask?: boolean;
     onTaskSelect: (index: number) => void;
+    chidlren?: React.ReactNode;
 };
 declare const QuickStartTaskHeader: React.FC<QuickStartTaskHeaderProps>;
 export default QuickStartTaskHeader;

package/dist/index.es.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import React__default, { createContext, useCallback, useEffect, useState } from 'react';
-import { Card, CardHeader, CardActions, CardTitle, CardBody, CardFooter, Modal as Modal$1, Tooltip, Popover, PopoverPosition, Button, Text, TextVariants, TextList, TextListItem, Flex, FlexItem, Title, Label, Gallery, GalleryItem, ToolbarItem, SearchInput, Select, SelectVariant, SelectOption, Toolbar, ToolbarContent, EmptyState, EmptyStateIcon, EmptyStateBody, EmptyStatePrimary, Divider, ModalVariant, WizardNavItem, List, ExpandableSection, ListItem, Alert, Radio, DrawerPanelContent, DrawerHead, DrawerActions, DrawerCloseButton, DrawerPanelBody, Drawer, DrawerContent, DrawerContentBody } from '@patternfly/react-core';
+import { Card, CardHeader, CardActions, CardTitle, CardBody, CardFooter, Modal as Modal$1, Tooltip, Alert, Popover, PopoverPosition, Button, Text, TextVariants, TextList, TextListItem, Flex, FlexItem, Title, Label, Gallery, GalleryItem, ToolbarItem, SearchInput, Select, SelectVariant, SelectOption, Toolbar, ToolbarContent, EmptyState, EmptyStateIcon, EmptyStateBody, EmptyStatePrimary, Divider, ModalVariant, WizardNavItem, List, ExpandableSection, ListItem, Radio, DrawerPanelContent, DrawerHead, DrawerActions, DrawerCloseButton, DrawerPanelBody, Drawer, DrawerContent, DrawerContentBody } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
 import { css } from '@patternfly/react-styles';
 import RocketIcon from '@patternfly/react-icons/dist/js/icons/rocket-icon';
@@ -8,6 +8,8 @@ import { __rest } from 'tslib';
 import * as ReactDOM from 'react-dom';
 import { renderToStaticMarkup } from 'react-dom/server';
 import CopyIcon from '@patternfly/react-icons/dist/js/icons/copy-icon';
+import LightbulbIcon from '@patternfly/react-icons/dist/js/icons/lightbulb-icon';
+import FireIcon from '@patternfly/react-icons/dist/js/icons/fire-icon';
 import SyncAltIcon from '@patternfly/react-icons/dist/js/icons/sync-alt-icon';
 import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
@@ -125,6 +127,7 @@ var Yes = "Yes";
 var No = "No";
 var Cancel = "Cancel";
 var Leave = "Leave";
+var Type = "Quick start";
 var en = {
 	"No results found": "No results found",
 	"No results match the filter criteria. Remove filters or clear all filters to show results.": "No results match the filter criteria. Remove filters or clear all filters to show results.",
@@ -168,7 +171,8 @@ var en = {
 	"Not available": "Not available",
 	"Copy to clipboard": "Copy to clipboard",
 	"Successfully copied to clipboard!": "Successfully copied to clipboard!",
-	"Quick start • {{duration, number}} minutes": "Quick start • {{duration, number}} minutes"
+	Type: Type,
+	"{{type}} • {{duration, number}} minutes": "{{type}} • {{duration, number}} minutes"
 };
 
 /* eslint-disable */
@@ -581,7 +585,7 @@ const QuickStartContextDefaults = {
     useLegacyHeaderColors: false,
     markdown: null,
     loading: false,
-    alwaysShowTaskReview: false,
+    alwaysShowTaskReview: true,
 };
 const QuickStartContext = createContext(QuickStartContextDefaults);
 const getResource = (resource, options, resourceBundle, lng) => {
@@ -678,7 +682,7 @@ const useValuesForQuickStartContext = (value = {}) => {
             useQueryParams && setQueryArgument(QUICKSTART_ID_FILTER_KEY, id);
             return id;
         });
-        setAllQuickStartStates((qs) => (Object.assign(Object.assign({}, qs), { [quickStartId]: getDefaultQuickStartState(totalTasks, QuickStartStatus.IN_PROGRESS) })));
+        setAllQuickStartStates((qs) => (Object.assign(Object.assign({}, qs), { [quickStartId]: getDefaultQuickStartState(totalTasks, QuickStartStatus.NOT_STARTED) })));
     }, [setActiveQuickStartID, setAllQuickStartStates, useQueryParams]);
     // When alwaysShowTaskReview preference is enabled, skip visited step and go directly to review
     const stepAfterInitial = alwaysShowTaskReview
@@ -1276,6 +1280,39 @@ const useMultilineCopyClipboardShowdownExtension = () => {
     }), [getResource]);
 };
 
+var AdmonitionType;
+(function (AdmonitionType) {
+    AdmonitionType["TIP"] = "TIP";
+    AdmonitionType["NOTE"] = "NOTE";
+    AdmonitionType["IMPORTANT"] = "IMPORTANT";
+    AdmonitionType["WARNING"] = "WARNING";
+    AdmonitionType["CAUTION"] = "CAUTION";
+})(AdmonitionType || (AdmonitionType = {}));
+const admonitionToAlertVariantMap = {
+    [AdmonitionType.NOTE]: { variant: 'info' },
+    [AdmonitionType.TIP]: { variant: 'default', customIcon: React.createElement(LightbulbIcon, null) },
+    [AdmonitionType.IMPORTANT]: { variant: 'danger' },
+    [AdmonitionType.CAUTION]: { variant: 'warning', customIcon: React.createElement(FireIcon, null) },
+    [AdmonitionType.WARNING]: { variant: 'warning' },
+};
+const useAdmonitionShowdownExtension = () => {
+    // const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
+    return React.useMemo(() => ({
+        type: 'lang',
+        regex: /\[([\d\w\s-()$!]+)]{{(admonition) ([\w-]+)}}/g,
+        replace: (text, content, admonitionLabel, admonitionType, groupId) => {
+            if (!content || !admonitionLabel || !admonitionType || !groupId) {
+                return text;
+            }
+            admonitionType = admonitionType.toUpperCase();
+            const { variant, customIcon } = admonitionToAlertVariantMap[admonitionType];
+            const style = admonitionType === AdmonitionType.CAUTION ? { backgroundColor: '#ec7a0915' } : {};
+            const pfAlert = (React.createElement(Alert, { variant: variant, customIcon: customIcon && customIcon, isInline: true, title: admonitionType, className: "pfext-markdown-admonition", style: style }, content));
+            return removeTemplateWhitespace(renderToStaticMarkup(pfAlert));
+        },
+    }), []);
+};
+
 const FallbackImg = ({ src, alt, className, fallback }) => {
     const [isSrcValid, setIsSrcValid] = React.useState(true);
     if (src && isSrcValid) {
@@ -1353,13 +1390,31 @@ const markdownConvert = (markdown, extensions) => {
     if (extensions) {
         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
+    DOMPurify.addHook('afterSanitizeAttributes', function (node) {
+        // set all elements owning target to target=_blank
+        if ('target' in node) {
+            node.setAttribute('target', '_blank');
+        }
+        // set non-HTML/MathML links to xlink:show=new
+        if (!node.hasAttribute('target') &&
+            (node.hasAttribute('xlink:href') || node.hasAttribute('href'))) {
+            node.setAttribute('xlink:show', 'new');
+        }
     });
     return DOMPurify.sanitize(converter.makeHtml(markdown), {
         USE_PROFILES: {
@@ -1497,6 +1552,7 @@ const QuickStartMarkdownView = ({ content, exactHeight, className, }) => {
     const { markdown } = React.useContext(QuickStartContext);
     const inlineCopyClipboardShowdownExtension = useInlineCopyClipboardShowdownExtension();
     const multilineCopyClipboardShowdownExtension = useMultilineCopyClipboardShowdownExtension();
+    const admonitionShowdownExtension = useAdmonitionShowdownExtension();
     return (React.createElement(SyncMarkdownView, { inline: true, content: content, exactHeight: exactHeight, extensions: [
             {
                 type: 'lang',
@@ -1518,6 +1574,7 @@ const QuickStartMarkdownView = ({ content, exactHeight, className, }) => {
             },
             inlineCopyClipboardShowdownExtension,
             multilineCopyClipboardShowdownExtension,
+            admonitionShowdownExtension,
             ...(markdown ? markdown.extensions : []),
         ], renderExtension: (docContext, rootSelector) => (React.createElement(React.Fragment, null,
             React.createElement(MarkdownHighlightExtension, { docContext: docContext, rootSelector: rootSelector }),
@@ -1628,7 +1685,9 @@ const QuickStartTile = ({ quickStart, status, isActive, onClick = () => { }, })
             // @ts-ignore
             component: "div", style: {
                 cursor: 'pointer',
-            }, icon: quickStartIcon, className: "pfext-quick-start-tile", "data-testid": `qs-card-${camelize(displayName)}`, featured: isActive, title: React.createElement(QuickStartTileHeader, { name: displayName, status: status, duration: durationMinutes, type: type, quickStartId: id }), onClick: handleClick, "data-test": `tile ${id}`, description: React.createElement(QuickStartTileDescription, { description: description, prerequisites: prerequisites }), footer: footerComponent })));
+            }, icon: quickStartIcon, className: "pfext-quick-start-tile", "data-testid": `qs-card-${camelize(displayName)}`, featured: isActive, title: React.createElement(QuickStartTileHeader, { name: displayName, status: status, duration: durationMinutes, type: type, quickStartId: id }), onClick: handleClick, 
+            // https://github.com/patternfly/patternfly-react/issues/7039
+            href: "#", "data-test": `tile ${id}`, description: React.createElement(QuickStartTileDescription, { description: description, prerequisites: prerequisites }), footer: footerComponent })));
 };
 
 const QuickStartCatalog = ({ quickStarts }) => {
@@ -1779,7 +1838,9 @@ const QuickStartCatalogPage = ({ quickStarts, showFilter, sortFnc = (q1, q2) =>
         const filteredQs = showFilter
             ? filterQuickStarts(allQuickStarts, filter.keyword, filter.status.statusFilters, allQuickStartStates).sort(sortFncCallback)
             : allQuickStarts;
-        if (filteredQs.length !== filteredQuickStarts.length) {
+        // also needs a check whether the content of the QS changed
+        if (filteredQs.length !== filteredQuickStarts.length ||
+            JSON.stringify(filteredQs) !== JSON.stringify(filteredQuickStarts)) {
             setFilteredQuickStarts(filteredQs);
         }
     }, [
@@ -1868,14 +1929,17 @@ const TaskIcon = ({ taskIndex, taskStatus }) => {
     }
     return React.createElement("span", { className: classNames }, content);
 };
-const QuickStartTaskHeader = ({ title, taskIndex, subtitle, taskStatus, size, isActiveTask, onTaskSelect, }) => {
+const QuickStartTaskHeader = ({ title, taskIndex, subtitle, taskStatus, size, isActiveTask, onTaskSelect, children, }) => {
     const classNames = css('pfext-quick-start-task-header__title', {
         'pfext-quick-start-task-header__title-success': taskStatus === QuickStartTaskStatus.SUCCESS,
         '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) && (React.createElement(React.Fragment, null,
+    // const notCompleted = taskStatus === QuickStartTaskStatus.VISITED;
+    // const skippedReview = taskStatus === QuickStartTaskStatus.REVIEW;
+    const failedReview = taskStatus === QuickStartTaskStatus.FAILED;
+    // 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 && (React.createElement(React.Fragment, null,
         React.createElement("div", null),
         React.createElement("div", { className: "pfext-quick-start-task-header__tryagain" }, "Try the steps again.")));
     const content = (React.createElement("div", { className: "pfext-quick-start-task-header" },
@@ -1886,7 +1950,7 @@ const QuickStartTaskHeader = ({ title, taskIndex, subtitle, taskStatus, size, is
                 ' ',
                 subtitle))),
         tryAgain));
-    return (React.createElement(WizardNavItem, { content: content, step: taskIndex, onNavItemClick: () => onTaskSelect(taskIndex - 1), navItemComponent: "button", isCurrent: isActiveTask }));
+    return (React.createElement(WizardNavItem, { content: content, step: taskIndex, onNavItemClick: () => onTaskSelect(taskIndex - 1), navItemComponent: "button", isCurrent: isActiveTask }, children));
 };
 
 const QuickStartTaskHeaderList = ({ tasks, allTaskStatuses, onTaskSelect, }) => {
@@ -1920,7 +1984,8 @@ const QuickStartIntroduction = ({ tasks, introduction, allTaskStatuses, prerequi
     const prereqList = (prereqs === null || prereqs === void 0 ? void 0 : prereqs.length) > 0 && (React.createElement(ExpandableSection, { toggleText: getResource('View Prerequisites ({{totalPrereqs}})').replace('{{totalPrereqs}}', prereqs.length), onToggle: () => setIsPrereqsExpanded(!isPrereqsExpanded), className: "pfext-quick-start-intro__prereq" },
         React.createElement(List, { className: "pfext-quick-start-intro__prereq-list" }, prereqs.map((pr) => {
             return (React.createElement(ListItem, { key: pr, className: "pfext-quick-start-intro__prereq-list__item" },
-                React.createElement("span", { className: "pfext-quick-start-intro__prereq-list__item-content" }, pr)));
+                React.createElement("span", { className: "pfext-quick-start-intro__prereq-list__item-content" },
+                    React.createElement(QuickStartMarkdownView, { content: pr }))));
         }))));
     return (React.createElement(React.Fragment, null,
         React.createElement(QuickStartMarkdownView, { content: introduction }),
@@ -1949,7 +2014,7 @@ const QuickStartTaskReview = ({ review, taskStatus, onTaskReview, }) => {
         'pfext-quick-start-task-review--failed': taskStatus === QuickStartTaskStatus.FAILED,
     });
     const title = React.createElement("span", { className: alertClassNames }, getResource('Check your work'));
-    return (React.createElement(Alert, { className: "pfext-quick-start-task-review-alert", variant: getAlertVariant(taskStatus), title: title, isInline: true },
+    return (React.createElement(Alert, { className: "pfext-quick-start-task-review-alert", variant: getAlertVariant(taskStatus), title: title, isInline: true, role: "alert" },
         React.createElement(QuickStartMarkdownView, { content: instructions }),
         React.createElement("span", { className: "pfext-quick-start-task-review__actions" },
             React.createElement(Radio, { id: "review-success", name: "review-success", "data-testid": "qs-drawer-check-yes", label: getResource('Yes'), className: "pfext-quick-start-task-review__radio", isChecked: taskStatus === QuickStartTaskStatus.SUCCESS, onChange: () => onTaskReview(QuickStartTaskStatus.SUCCESS) }),
@@ -1959,22 +2024,22 @@ const QuickStartTaskReview = ({ review, taskStatus, onTaskReview, }) => {
 
 const QuickStartTasks = ({ tasks, taskNumber, allTaskStatuses, onTaskReview, onTaskSelect, }) => {
     const { getResource, alwaysShowTaskReview } = React.useContext(QuickStartContext);
-    return (React.createElement("div", { className: "pfext-quick-start-tasks__list" }, tasks
-        .filter((_, index) => allTaskStatuses[index] !== QuickStartTaskStatus.INIT)
-        .map((task, index) => {
-        const { title, description, review } = task;
-        const isActiveTask = index === taskNumber;
-        const taskStatus = allTaskStatuses[index];
-        const shouldShowTaskReview = (!QUICKSTART_TASKS_INITIAL_STATES.includes(taskStatus) || alwaysShowTaskReview) &&
-            review;
-        return (React.createElement(React.Fragment, { key: title },
-            React.createElement(QuickStartTaskHeader, { taskIndex: index + 1, title: title, size: "md", subtitle: getResource('{{index, number}} of {{tasks, number}}')
-                    .replace('{{index, number}}', index + 1)
-                    .replace('{{tasks, number}}', tasks.length), taskStatus: taskStatus, isActiveTask: isActiveTask, onTaskSelect: onTaskSelect }),
-            isActiveTask && (React.createElement("div", { className: "pfext-quick-start-task__content" },
-                React.createElement(QuickStartMarkdownView, { content: description }),
-                shouldShowTaskReview && (React.createElement(QuickStartTaskReview, { review: review, taskStatus: taskStatus, onTaskReview: onTaskReview }))))));
-    })));
+    return (React.createElement("div", { className: "pfext-quick-start-tasks__list" },
+        React.createElement("ul", null, tasks
+            .filter((_, index) => allTaskStatuses[index] !== QuickStartTaskStatus.INIT)
+            .map((task, index) => {
+            const { title, description, review } = task;
+            const isActiveTask = index === taskNumber;
+            const taskStatus = allTaskStatuses[index];
+            const shouldShowTaskReview = (!QUICKSTART_TASKS_INITIAL_STATES.includes(taskStatus) || alwaysShowTaskReview) &&
+                review;
+            return (React.createElement(React.Fragment, { key: title },
+                React.createElement(QuickStartTaskHeader, { taskIndex: index + 1, title: title, size: "md", subtitle: getResource('{{index, number}} of {{tasks, number}}')
+                        .replace('{{index, number}}', index + 1)
+                        .replace('{{tasks, number}}', tasks.length), taskStatus: taskStatus, isActiveTask: isActiveTask, onTaskSelect: onTaskSelect }, isActiveTask && (React.createElement("div", { className: "pfext-quick-start-task__content" },
+                    React.createElement(QuickStartMarkdownView, { content: description }),
+                    shouldShowTaskReview && (React.createElement(QuickStartTaskReview, { review: review, taskStatus: taskStatus, onTaskReview: onTaskReview })))))));
+        }))));
 };
 
 const QuickStartContent = React.forwardRef(({ quickStart, nextQuickStarts = [], taskNumber, allTaskStatuses, onTaskSelect, onTaskReview, onQuickStartChange, }, ref) => {
@@ -2116,7 +2181,10 @@ const QuickStartPanelContent = (_a) => {
                     React.createElement(Title, { headingLevel: "h1", size: "xl", className: "pfext-quick-start-panel-content__name", style: { marginRight: 'var(--pf-global--spacer--md)' } }, quickStart === null || quickStart === void 0 ? void 0 :
                         quickStart.spec.displayName,
                         ' ',
-                        React.createElement("small", { className: "pfext-quick-start-panel-content__duration" }, getResource('Quick start • {{duration, number}} minutes', quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.durationMinutes).replace('{{duration, number}}', quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.durationMinutes)))),
+                        React.createElement("small", { className: "pfext-quick-start-panel-content__duration" }, (quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.durationMinutes) ? getResource('{{type}} • {{duration, number}} minutes', quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.durationMinutes)
+                            .replace('{{duration, number}}', quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.durationMinutes)
+                            .replace('{{type}}', getResource('Type'))
+                            : getResource('Type')))),
                 showClose && (React.createElement(DrawerActions, null,
                     React.createElement(DrawerCloseButton, { onClick: handleClose, className: "pfext-quick-start-panel-content__close-button", "data-testid": "qs-drawer-close" }))))),
         React.createElement(DrawerPanelBody, { hasNoPadding: true, className: "pfext-quick-start-panel-content__body", "data-test": "content" },
@@ -2128,7 +2196,7 @@ const QuickStartPanelContent = (_a) => {
 };
 
 const QuickStartContainer = (_a) => {
-    var { quickStarts, children, activeQuickStartID, allQuickStartStates, setActiveQuickStartID, setAllQuickStartStates, appendTo, fullWidth, onCloseInProgress, onCloseNotInProgress, resourceBundle, showCardFooters, useLegacyHeaderColors, language, loading = false, useQueryParams = true, markdown, contextProps, alwaysShowTaskReview = false } = _a, props = __rest(_a, ["quickStarts", "children", "activeQuickStartID", "allQuickStartStates", "setActiveQuickStartID", "setAllQuickStartStates", "appendTo", "fullWidth", "onCloseInProgress", "onCloseNotInProgress", "resourceBundle", "showCardFooters", "useLegacyHeaderColors", "language", "loading", "useQueryParams", "markdown", "contextProps", "alwaysShowTaskReview"]);
+    var { quickStarts, children, activeQuickStartID, allQuickStartStates, setActiveQuickStartID, setAllQuickStartStates, appendTo, fullWidth, onCloseInProgress, onCloseNotInProgress, resourceBundle, showCardFooters, useLegacyHeaderColors, language, loading = false, useQueryParams = true, markdown, contextProps, alwaysShowTaskReview = true } = _a, props = __rest(_a, ["quickStarts", "children", "activeQuickStartID", "allQuickStartStates", "setActiveQuickStartID", "setAllQuickStartStates", "appendTo", "fullWidth", "onCloseInProgress", "onCloseNotInProgress", "resourceBundle", "showCardFooters", "useLegacyHeaderColors", "language", "loading", "useQueryParams", "markdown", "contextProps", "alwaysShowTaskReview"]);
     const valuesForQuickstartContext = useValuesForQuickStartContext(Object.assign({ allQuickStarts: quickStarts, activeQuickStartID,
         setActiveQuickStartID,
         allQuickStartStates,
@@ -2166,7 +2234,7 @@ const QuickStartDrawer = (_a) => {
         // if there is a quick start param, but the quick start is not active, set it
         // this can happen if a new browser session is opened or an incognito window for example
         const quickStartIdFromParam = params.get(QUICKSTART_ID_FILTER_KEY) || '';
-        if (quickStartIdFromParam && !activeQuickStartID) {
+        if (quickStartIdFromParam && activeQuickStartID !== quickStartIdFromParam) {
             const activeQuickStart = getQuickStartByName(quickStartIdFromParam, combinedQuickStarts);
             // don't try to load a quick start that is actually just an external resource (spec.link)
             if (combinedQuickStarts.length > 0 && activeQuickStart && !activeQuickStart.spec.link) {