@patternfly/quickstarts 2.2.0 → 2.2.3

package/dist/index.js

@@ -1357,6 +1357,20 @@ const useAdmonitionShowdownExtension = () => {
     }), []);
 };
 
+const useCodeShowdownExtension = () => {
+    return React__namespace.useMemo(() => ({
+        type: 'output',
+        regex: /<pre><code>(.*?)\n?<\/code><\/pre>/g,
+        replace: (text, content) => {
+            if (!content) {
+                return text;
+            }
+            const pfCodeBlock = React__namespace.createElement(reactCore.CodeBlock, null, content);
+            return removeTemplateWhitespace(server.renderToStaticMarkup(pfCodeBlock));
+        },
+    }), []);
+};
+
 const FallbackImg = ({ src, alt, className, fallback }) => {
     const [isSrcValid, setIsSrcValid] = React__namespace.useState(true);
     if (src && isSrcValid) {
@@ -1597,6 +1611,7 @@ const QuickStartMarkdownView = ({ content, exactHeight, className, }) => {
     const inlineCopyClipboardShowdownExtension = useInlineCopyClipboardShowdownExtension();
     const multilineCopyClipboardShowdownExtension = useMultilineCopyClipboardShowdownExtension();
     const admonitionShowdownExtension = useAdmonitionShowdownExtension();
+    const codeShowdownExtension = useCodeShowdownExtension();
     return (React__namespace.createElement(SyncMarkdownView, { inline: true, content: content, exactHeight: exactHeight, extensions: [
             {
                 type: 'lang',
@@ -1619,6 +1634,7 @@ const QuickStartMarkdownView = ({ content, exactHeight, className, }) => {
             inlineCopyClipboardShowdownExtension,
             multilineCopyClipboardShowdownExtension,
             admonitionShowdownExtension,
+            codeShowdownExtension,
             ...(markdown ? markdown.extensions : []),
         ], renderExtension: (docContext, rootSelector) => (React__namespace.createElement(React__namespace.Fragment, null,
             React__namespace.createElement(MarkdownHighlightExtension, { docContext: docContext, rootSelector: rootSelector }),
@@ -1738,7 +1754,7 @@ const QuickStartTile = ({ quickStart, status, isActive, onClick = () => { }, })
 
 const QuickStartCatalog = ({ quickStarts }) => {
     const { activeQuickStartID, allQuickStartStates } = React__namespace.useContext(QuickStartContext);
-    return (React__namespace.createElement("div", { className: "pfext-page-layout__content pfext-is-dark" },
+    return (React__namespace.createElement("div", { className: "pfext-page-layout__content" },
         React__namespace.createElement(reactCore.Gallery, { className: "pfext-quick-start-catalog__gallery", hasGutter: true }, quickStarts.map((quickStart) => {
             const { metadata: { name: id }, } = quickStart;
             return (React__namespace.createElement(reactCore.GalleryItem, { key: id, className: "pfext-quick-start-catalog__gallery-item" },
@@ -1943,7 +1959,7 @@ const QuickStartCatalogHeader = ({ title, hint, }) => (React__namespace.createEl
     React__namespace.createElement("h1", { "data-pf-content": "true", className: "pfext-page-layout__title" }, title),
     hint && React__namespace.createElement("div", { className: "pfext-page-layout__hint" }, hint)));
 
-const QuickStartCatalogSection = ({ children }) => (React__namespace.createElement("div", { className: "pfext-page-layout__content pfext-is-dark" }, children));
+const QuickStartCatalogSection = ({ children }) => (React__namespace.createElement("div", { className: "pfext-page-layout__content" }, children));
 
 const QuickStartCatalogToolbar = ({ children }) => (React__namespace.createElement(reactCore.Toolbar, { usePageInsets: true, className: "pfext-quick-start-catalog-filter__flex" }, children));
 
@@ -2340,6 +2356,7 @@ const QuickStartDrawer = (_a) => {
 
 const HelpTopicContextDefaults = {
     helpTopics: [],
+    setHelpTopics: () => { },
     activeHelpTopic: null,
     setActiveHelpTopicByName: () => { },
     filteredHelpTopics: [],
@@ -2366,6 +2383,7 @@ const useValuesForHelpTopicContext = (value = {}) => {
     const [filteredHelpTopics, setFilteredHelpTopics] = React__default['default'].useState(combinedValue.filteredHelpTopics || []);
     return {
         helpTopics,
+        setHelpTopics,
         activeHelpTopic,
         setActiveHelpTopicByName,
         filteredHelpTopics,
@@ -2376,7 +2394,8 @@ const useValuesForHelpTopicContext = (value = {}) => {
 };
 
 const HelpTopicPanelContent = (_a) => {
-    var { activeHelpTopic = null, filteredHelpTopics = [], isResizable = true } = _a, props = tslib.__rest(_a, ["activeHelpTopic", "filteredHelpTopics", "isResizable"]);
+    var _b, _c;
+    var { activeHelpTopic = null, filteredHelpTopics = [], isResizable = true, onClose } = _a, props = tslib.__rest(_a, ["activeHelpTopic", "filteredHelpTopics", "isResizable", "onClose"]);
     const { setActiveHelpTopicByName } = React__namespace.useContext(HelpTopicContext);
     const [isHelpTopicMenuOpen, setIsHelpTopicMenuOpen] = React__namespace.useState(false);
     const toggleHelpTopicMenu = () => {
@@ -2387,24 +2406,28 @@ const HelpTopicPanelContent = (_a) => {
         setActiveHelpTopicByName(topicName);
         toggleHelpTopicMenu();
     };
-    const menuItems = filteredHelpTopics.map((topic) => {
-        return (React__namespace.createElement(reactCore.OptionsMenuItem, { key: topic.name, onSelect: onSelectHelpTopic, id: topic.name }, topic.title));
-    });
+    const menuItems = filteredHelpTopics.length > 0 &&
+        filteredHelpTopics.map((topic) => {
+            return (React__namespace.createElement(reactCore.OptionsMenuItem, { key: topic.name, onSelect: onSelectHelpTopic, id: topic.name }, topic.title));
+        });
+    const paddingContainer = (children) => React__namespace.createElement("div", { style: { padding: '24px' } }, children);
+    const panelBodyItems = (React__namespace.createElement(React__namespace.Fragment, null,
+        paddingContainer(React__namespace.createElement(QuickStartMarkdownView, { content: activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.content })),
+        ((_b = activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.links) === null || _b === void 0 ? void 0 : _b.length) && React__namespace.createElement(reactCore.Divider, null),
+        paddingContainer(React__namespace.createElement(reactCore.Stack, { hasGutter: true }, (_c = activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.links) === null || _c === void 0 ? void 0 : _c.map(({ href, text, newTab, isExternal }, index) => {
+            return (React__namespace.createElement(reactCore.StackItem, { key: index },
+                React__namespace.createElement(reactCore.Button, { component: "a", href: href, target: newTab ? '_blank' : '', rel: "noopener noreferrer", variant: "link", "aria-label": `Open documentation in new window`, isInline: true, icon: isExternal ? React__namespace.createElement(ExternalLinkAltIcon__default['default'], null) : null, iconPosition: "right", style: { fontSize: 'inherit' } }, text || href)));
+        })))));
     const content = (React__namespace.createElement(reactCore.DrawerPanelContent, Object.assign({ isResizable: isResizable, className: "pfext-quick-start__base" }, props),
         React__namespace.createElement("div", null,
             React__namespace.createElement(reactCore.DrawerHead, null,
                 React__namespace.createElement("div", { className: "pfext-quick-start-panel-content__title" },
-                    React__namespace.createElement(reactCore.OptionsMenu, { id: 'helptopics', isPlain: true, isOpen: isHelpTopicMenuOpen, toggle: React__namespace.createElement(reactCore.OptionsMenuToggle, { onToggle: toggleHelpTopicMenu, toggleTemplate: React__namespace.createElement(BarsIcon__default['default'], null) }), menuItems: menuItems }),
-                    React__namespace.createElement(reactCore.Title, { headingLevel: "h1", size: "xl", className: "pfext-quick-start-panel-content__name", style: { marginRight: 'var(--pf-global--spacer--md)' } }, activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.title))),
+                    menuItems && (React__namespace.createElement(reactCore.OptionsMenu, { id: 'helptopics', isPlain: true, isOpen: isHelpTopicMenuOpen, toggle: React__namespace.createElement(reactCore.OptionsMenuToggle, { style: { paddingLeft: '0px' }, onToggle: toggleHelpTopicMenu, toggleTemplate: React__namespace.createElement(BarsIcon__default['default'], null) }), menuItems: menuItems })),
+                    React__namespace.createElement(reactCore.Title, { headingLevel: "h1", size: "xl", className: "pfext-quick-start-panel-content__name", style: { marginRight: 'var(--pf-global--spacer--md)' } }, activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.title)),
+                React__namespace.createElement(reactCore.DrawerActions, null,
+                    React__namespace.createElement(reactCore.DrawerCloseButton, { onClick: onClose, className: "pfext-quick-start-panel-content__close-button", "data-testid": "qs-drawer-close" }))),
             React__namespace.createElement(reactCore.Divider, null),
-            React__namespace.createElement(reactCore.DrawerPanelBody, { hasNoPadding: true, className: "pfext-quick-start-panel-content__body", "data-test": "content" },
-                React__namespace.createElement(reactCore.Stack, { hasGutter: true },
-                    React__namespace.createElement(reactCore.StackItem, { style: { padding: '20px' } },
-                        React__namespace.createElement(QuickStartMarkdownView, { content: activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.content })),
-                    React__namespace.createElement(reactCore.Divider, null),
-                    React__namespace.createElement(reactCore.StackItem, { style: { padding: '20px' } }, activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.links.map((link) => {
-                        return React__namespace.createElement(QuickStartMarkdownView, { key: link, content: link });
-                    })))))));
+            React__namespace.createElement(reactCore.DrawerPanelBody, { hasNoPadding: true, className: "pfext-quick-start-panel-content__body", "data-test": "content" }, panelBodyItems))));
     return content;
 };
 
@@ -2418,26 +2441,23 @@ const HelpTopicContainer = (_a) => {
             valuesForHelpTopicContext.setLoading(loading);
         }
     }, [loading, valuesForHelpTopicContext]);
+    React__namespace.useEffect(() => {
+        if (helpTopics &&
+            JSON.stringify(helpTopics) !== JSON.stringify(valuesForHelpTopicContext.helpTopics)) {
+            valuesForHelpTopicContext.setHelpTopics(helpTopics);
+        }
+    }, [helpTopics, valuesForHelpTopicContext]);
     const drawerProps = Object.assign({}, props);
     return (React__namespace.createElement(HelpTopicContext.Provider, { value: valuesForHelpTopicContext },
         React__namespace.createElement(HelpTopicDrawer, Object.assign({}, drawerProps), children)));
 };
 const HelpTopicDrawer = (_a) => {
-    var { 
-    // helpTopics,
-    children } = _a, props = tslib.__rest(_a, ["children"]);
-    const { activeHelpTopic, filteredHelpTopics } = React__namespace.useContext(HelpTopicContext);
-    // Leave here if query param is desired for help topics later
-    // React.useEffect(() => {
-    //   const params = new URLSearchParams(window.location.search);
-    //   // 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 helpTopicNameFromParam = params.get(HELP_TOPIC_NAME_KEY) || '';
-    //   if (helpTopicNameFromParam) {
-    //     setActiveHelpTopicByName(helpTopicNameFromParam);
-    //   }
-    // }, [inContextHelpTopics, setActiveHelpTopicByName]);
-    const panelContent = (React__namespace.createElement(HelpTopicPanelContent, { activeHelpTopic: activeHelpTopic, filteredHelpTopics: filteredHelpTopics }));
+    var { children } = _a, props = tslib.__rest(_a, ["children"]);
+    const { activeHelpTopic, filteredHelpTopics, setActiveHelpTopicByName } = React__namespace.useContext(HelpTopicContext);
+    const onClose = () => {
+        setActiveHelpTopicByName('');
+    };
+    const panelContent = (React__namespace.createElement(HelpTopicPanelContent, { activeHelpTopic: activeHelpTopic, filteredHelpTopics: filteredHelpTopics, onClose: onClose }));
     return (React__namespace.createElement(React__namespace.Fragment, null,
         React__namespace.createElement(reactCore.Drawer, Object.assign({ isExpanded: !!activeHelpTopic, isInline: true }, props), children ? (React__namespace.createElement(reactCore.DrawerContent, { panelContent: panelContent },
             React__namespace.createElement(reactCore.DrawerContentBody, { className: "pfext-quick-start-drawer__body" }, children))) : (React__namespace.createElement("div", { className: "pf-c-drawer__main" }, panelContent)))));
@@ -2480,6 +2500,106 @@ const useLocalStorage = (key, initialValue) => {
     return [storedValue, setValue];
 };
 
+/* eslint-disable */
+// Brought in from dev to publish this with QS module
+// Dev now imports from here
+const ProcQuickStartParser = (quickStart, environmentVariables) => {
+    var _a;
+    const replaceEnvironmentVariables = (s) => s === null || s === void 0 ? void 0 : s.replace(/\${(\w+)}/, (substring, name) => {
+        return environmentVariables ? ([name] ? environmentVariables[name] : substring) : substring;
+    });
+    quickStart.spec.tasks = (_a = quickStart.spec.tasks) === null || _a === void 0 ? void 0 : _a.map((task, index) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        let proc;
+        let answer;
+        if (typeof task === 'string') {
+            proc = task;
+            answer = {};
+        }
+        else {
+            // @ts-ignore
+            proc = task.proc;
+            answer = task;
+            // @ts-ignore
+            delete task.proc;
+        }
+        let description = '', procedure, verification, title, summaryFailed, success, reviewFailed, prerequisites;
+        if (proc) {
+            const taskDOM = document.createElement('div');
+            taskDOM.innerHTML = proc;
+            // remove the screencapture images
+            taskDOM.querySelectorAll('.imageblock.screencapture').forEach((node) => {
+                var _a;
+                (_a = node.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(node);
+            });
+            title = (_a = taskDOM
+                .querySelector('h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child')) === null || _a === void 0 ? void 0 : _a.innerHTML.trim();
+            let sectionBody = taskDOM.querySelector('.sectionbody');
+            if (!(sectionBody === null || sectionBody === void 0 ? void 0 : sectionBody.hasChildNodes())) {
+                // possibly in other templates, where we want to look for article
+                sectionBody = taskDOM.querySelector('article');
+            }
+            if (sectionBody) {
+                for (let i = 0; i < sectionBody.children.length || 0; i++) {
+                    /**
+                    child typically looks like:
+          
+                    <div class="paragraph|olist|ulist|admonitionblock">
+                       <div class="title">Procedure|Prerequisites|Verification|Note|Warning</div>
+                       <ol|ul class="arabic">
+                         <li>
+                         <li>...
+                       </ol|ul>
+                    </div>
+          
+                    And the below code extracts the <ol> or <ul>
+                    Except for when there is no <div class="title|heading"/>, then the description is extracted
+                    in the else if below
+                    */
+                    const child = sectionBody.children.item(i);
+                    // find the title
+                    const sectionTitle = child === null || child === void 0 ? void 0 : child.querySelector('.heading,.title');
+                    // should this section be assigned to a specific section
+                    const sectionTitleText = (_b = sectionTitle === null || sectionTitle === void 0 ? void 0 : sectionTitle.textContent) === null || _b === void 0 ? void 0 : _b.trim();
+                    const isKnownSection = ['Procedure', 'Verification', 'Prerequisites'].includes((_c = sectionTitle === null || sectionTitle === void 0 ? void 0 : sectionTitle.textContent) === null || _c === void 0 ? void 0 : _c.trim());
+                    if (isKnownSection) {
+                        switch (sectionTitleText) {
+                            case 'Procedure':
+                                procedure = (_d = child === null || child === void 0 ? void 0 : child.querySelector(':not(.heading):not(.title)')) === null || _d === void 0 ? void 0 : _d.outerHTML.trim();
+                                break;
+                            case 'Verification':
+                                verification = (_e = child === null || child === void 0 ? void 0 : child.querySelector(':not(.heading):not(.title)')) === null || _e === void 0 ? void 0 : _e.outerHTML.trim();
+                                break;
+                            case 'Prerequisites':
+                                prerequisites = (_f = child === null || child === void 0 ? void 0 : child.querySelector(':not(.heading):not(.title)')) === null || _f === void 0 ? void 0 : _f.outerHTML.trim();
+                                break;
+                        }
+                    }
+                    else if (!procedure) {
+                        // Otherwise if it comes before a procedure it's part of the description
+                        description = description + (child === null || child === void 0 ? void 0 : child.outerHTML.trim());
+                    }
+                }
+            }
+            success = (_g = taskDOM.querySelector('.qs-summary.success')) === null || _g === void 0 ? void 0 : _g.innerHTML.trim();
+            reviewFailed = (_h = taskDOM.querySelector('.qs-review.failed')) === null || _h === void 0 ? void 0 : _h.innerHTML.trim();
+            summaryFailed = (_j = taskDOM.querySelector('.qs-summary.failed')) === null || _j === void 0 ? void 0 : _j.innerHTML.trim();
+        }
+        answer.title = replaceEnvironmentVariables(answer.title || title);
+        answer.description = replaceEnvironmentVariables(answer.description || `${description} ${prerequisites || ''} ${procedure}`);
+        answer.review = answer.review || {};
+        answer.review.instructions = replaceEnvironmentVariables(((_k = answer.review) === null || _k === void 0 ? void 0 : _k.instructions) || verification || 'Have you completed these steps?');
+        answer.review.failedTaskHelp = replaceEnvironmentVariables(answer.review.failedTaskHelp ||
+            reviewFailed ||
+            'This task isn’t verified yet. Try the task again.');
+        answer.summary = answer.summary || {};
+        answer.summary.success = replaceEnvironmentVariables(answer.summary.success || success || 'You have completed this task!');
+        answer.summary.failed = replaceEnvironmentVariables(answer.summary.failed || summaryFailed || 'Try the steps again.');
+        return answer;
+    });
+    return quickStart;
+};
+
 exports.Box = Box;
 exports.CamelCaseWrap = CamelCaseWrap;
 exports.EmptyBox = EmptyBox;
@@ -2490,6 +2610,7 @@ exports.HelpTopicContextDefaults = HelpTopicContextDefaults;
 exports.HelpTopicDrawer = HelpTopicDrawer;
 exports.Loading = Loading;
 exports.LoadingBox = LoadingBox;
+exports.ProcQuickStartParser = ProcQuickStartParser;
 exports.QUICKSTART_ID_FILTER_KEY = QUICKSTART_ID_FILTER_KEY;
 exports.QUICKSTART_SEARCH_FILTER_KEY = QUICKSTART_SEARCH_FILTER_KEY;
 exports.QUICKSTART_STATUS_FILTER_KEY = QUICKSTART_STATUS_FILTER_KEY;