@patternfly/quickstarts 6.3.0-prerelease.6 → 6.3.0-prerelease.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/quickstarts",
-  "version": "6.3.0-prerelease.6",
+  "version": "6.3.0-prerelease.8",
   "description": "PatternFly quick starts",
   "files": [
     "src",
@@ -66,7 +66,7 @@
     "@rollup/plugin-commonjs": "^17.0.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^11.1.0",
-    "@testing-library/react": "^11.2.2",
+    "@testing-library/react": "^13.4.0",
     "@types/dompurify": "^3.0.5",
     "@types/enzyme": "^3.10.7",
     "@types/enzyme-adapter-react-16": "^1.0.6",

package/src/ConsoleInternal/components/markdown-view.tsx

@@ -25,7 +25,7 @@ export const markdownConvert = async (markdown: string, extensions?: ShowdownExt
       return node;
     }
 
-    // add PF content classes
+    // add PF content classes to standard elements (details blocks get handled separately)
     if (node.nodeType === 1) {
       const contentElements = [
         'ul',
@@ -85,7 +85,90 @@ export const markdownConvert = async (markdown: string, extensions?: ShowdownExt
   );
   const markdownWithSubstitutedCodeFences = reverseString(reverseMarkdownWithSubstitutedCodeFences);
 
-  const parsedMarkdown = await marked.parse(markdownWithSubstitutedCodeFences);
+  // Fix malformed HTML entities early in the process
+  let preprocessedMarkdown = markdownWithSubstitutedCodeFences;
+  preprocessedMarkdown = preprocessedMarkdown
+    .replace(/&nbsp([^;])/g, ' $1')
+    .replace(/ /g, ' ');
+  preprocessedMarkdown = preprocessedMarkdown.replace(/&nbsp(?![;])/g, ' ');
+
+  // Process content in segments to ensure markdown parsing continues after HTML blocks
+  const htmlBlockRegex =
+    /(<(?:details|div|section|article)[^>]*>[\s\S]*?<\/(?:details|div|section|article)>)/g;
+
+  let parsedMarkdown = '';
+
+  // Check if there are any HTML blocks
+  if (htmlBlockRegex.test(preprocessedMarkdown)) {
+    // Reset regex for actual processing
+    htmlBlockRegex.lastIndex = 0;
+
+    let lastIndex = 0;
+    let match;
+
+    while ((match = htmlBlockRegex.exec(preprocessedMarkdown)) !== null) {
+      // Process markdown before the HTML block
+      const markdownBefore = preprocessedMarkdown.slice(lastIndex, match.index).trim();
+      if (markdownBefore) {
+        const parsed = await marked.parse(markdownBefore);
+        parsedMarkdown += parsed;
+      }
+
+      // Process the HTML block: parse markdown content inside while preserving HTML structure
+      let htmlBlock = match[1];
+
+      // Find and process markdown content inside HTML tags
+      const contentRegex = />(\s*[\s\S]*?)\s*</g;
+      const contentMatches = [];
+      let contentMatch;
+
+      while ((contentMatch = contentRegex.exec(htmlBlock)) !== null) {
+        const content = contentMatch[1];
+        // Only process content that has markdown formatting but no extension syntax
+        if (
+          content.trim() &&
+          !content.includes('{{') &&
+          (content.includes('**') || content.includes('- ') || content.includes('\n'))
+        ) {
+          // This looks like markdown content without extensions - parse it as block content
+          const parsedContent = await marked.parse(content.trim());
+          // Remove wrapping <p> tags if they exist since we're inside HTML already
+          const cleanedContent = parsedContent.replace(/^<p[^>]*>([\s\S]*)<\/p>[\s]*$/g, '$1');
+          contentMatches.push({
+            original: contentMatch[0],
+            replacement: `>${cleanedContent}<`,
+          });
+        }
+      }
+
+      // Apply the content replacements
+      contentMatches.forEach(({ original, replacement }) => {
+        htmlBlock = htmlBlock.replace(original, replacement);
+      });
+
+      // Apply extensions (like admonitions) to the processed HTML block
+      if (extensions) {
+        extensions.forEach(({ regex, replace }) => {
+          if (regex) {
+            htmlBlock = htmlBlock.replace(regex, replace);
+          }
+        });
+      }
+
+      parsedMarkdown += htmlBlock;
+      lastIndex = htmlBlockRegex.lastIndex;
+    }
+
+    // Process any remaining markdown after the last HTML block
+    const markdownAfter = preprocessedMarkdown.slice(lastIndex).trim();
+    if (markdownAfter) {
+      const parsed = await marked.parse(markdownAfter);
+      parsedMarkdown += parsed;
+    }
+  } else {
+    // No HTML blocks found, process normally
+    parsedMarkdown = await marked.parse(preprocessedMarkdown);
+  }
   // Swap the temporary tokens back to code fences before we run the extensions
   let md = parsedMarkdown.replace(/@@@/g, '```');
 
@@ -93,7 +176,7 @@ export const markdownConvert = async (markdown: string, extensions?: ShowdownExt
     // Convert code spans back to md format before we run the custom extension regexes
     md = md.replace(/<code>(.*)<\/code>/g, '`$1`');
 
-    extensions.forEach(({ regex, replace }) => {
+    extensions.forEach(({ regex, replace }, _index) => {
       if (regex) {
         md = md.replace(regex, replace);
       }
@@ -102,6 +185,7 @@ export const markdownConvert = async (markdown: string, extensions?: ShowdownExt
     // Convert any remaining backticks back into code spans
     md = md.replace(/`(.*)`/g, '<code>$1</code>');
   }
+
   return DOMPurify.sanitize(md);
 };
 
@@ -210,7 +294,10 @@ const InlineMarkdownView: FC<InnerSyncMarkdownProps> = ({
   const id = useMemo(() => uniqueId('markdown'), []);
   return (
     <div className={css({ 'is-empty': isEmpty } as any, className)} id={id}>
-      <div dangerouslySetInnerHTML={{ __html: markup }} />
+      <div
+        style={{ marginBlockEnd: 'var(--pf-t-global--spacer--md)' }}
+        dangerouslySetInnerHTML={{ __html: markup }}
+      />
       {renderExtension && (
         <RenderExtension renderExtension={renderExtension} selector={`#${id}`} markup={markup} />
       )}
@@ -299,6 +386,7 @@ const IFrameMarkdownView: FC<InnerSyncMarkdownProps> = ({
   return (
     <>
       <iframe
+        title="Markdown content preview"
         sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin"
         srcDoc={contents}
         style={{ border: '0px', display: 'block', width: '100%', height: '0' }}

package/src/ConsoleShared/src/components/markdown-extensions/__tests__/accordion-extension.spec.tsx

@@ -0,0 +1,105 @@
+// Generated by Cursor
+// AI-assisted implementation with human review and modifications
+import { renderHook } from '@testing-library/react';
+import useAccordionShowdownExtension from '../accordion-extension';
+import { ACCORDION_MARKDOWN_BUTTON_ID, ACCORDION_MARKDOWN_CONTENT_ID } from '../const';
+import { marked } from 'marked';
+
+// Mock marked
+jest.mock('marked', () => ({
+  marked: {
+    parseInline: jest.fn((text) => `<em>${text}</em>`),
+  },
+}));
+
+// Mock DOMPurify
+jest.mock('dompurify', () => ({
+  sanitize: jest.fn((html) => html),
+}));
+
+describe('useAccordionShowdownExtension', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should return a showdown extension with correct properties', () => {
+    const { result } = renderHook(() => useAccordionShowdownExtension());
+    const extension = result.current;
+
+    expect(extension.type).toBe('lang');
+    expect(extension.regex).toEqual(/\[(.+)]{{(accordion) (&quot;(.*?)&quot;)}}/g);
+    expect(typeof extension.replace).toBe('function');
+  });
+
+  it('should match accordion syntax with HTML-encoded quotes', () => {
+    const { result } = renderHook(() => useAccordionShowdownExtension());
+    const { regex } = result.current;
+
+    const testText = '[Some content]{{accordion &quot;My Title&quot;}}';
+    const matches = regex.exec(testText);
+
+    expect(matches).not.toBeNull();
+    if (matches) {
+      expect(matches[1]).toBe('Some content');
+      expect(matches[2]).toBe('accordion');
+      expect(matches[4]).toBe('My Title');
+    }
+  });
+
+  it('should not match accordion syntax with regular quotes', () => {
+    const { result } = renderHook(() => useAccordionShowdownExtension());
+    const { regex } = result.current;
+
+    const testText = '[Some content]{{accordion "My Title"}}';
+    expect(testText.match(regex)).toBeNull();
+  });
+
+  it('should generate correct accordion HTML structure', () => {
+    const { result } = renderHook(() => useAccordionShowdownExtension());
+    const { replace } = result.current;
+
+    const html = replace(
+      '[Test content]{{accordion &quot;Test Title&quot;}}',
+      'Test content',
+      'accordion',
+      '&quot;Test Title&quot;',
+      'Test Title',
+    );
+
+    expect(html).toContain('pf-v6-c-accordion');
+    expect(html).toContain('pf-v6-c-accordion__toggle');
+    expect(html).toContain(`${ACCORDION_MARKDOWN_BUTTON_ID}-Test-Title`);
+    expect(html).toContain(`${ACCORDION_MARKDOWN_CONTENT_ID}-Test-Title`);
+    expect(html).toContain('Test Title');
+  });
+
+  it('should process content through marked and sanitize HTML', () => {
+    const { result } = renderHook(() => useAccordionShowdownExtension());
+    const { replace } = result.current;
+
+    replace(
+      '[**Bold text**]{{accordion &quot;Title&quot;}}',
+      '**Bold text**',
+      'accordion',
+      '&quot;Title&quot;',
+      'Title',
+    );
+
+    expect(marked.parseInline).toHaveBeenCalledWith('**Bold text**');
+  });
+
+  it('should handle titles with spaces in IDs', () => {
+    const { result } = renderHook(() => useAccordionShowdownExtension());
+    const { replace } = result.current;
+
+    const html = replace(
+      '[Content]{{accordion &quot;My Test Title&quot;}}',
+      'Content',
+      'accordion',
+      '&quot;My Test Title&quot;',
+      'My Test Title',
+    );
+
+    expect(html).toContain(`${ACCORDION_MARKDOWN_BUTTON_ID}-My-Test-Title`);
+  });
+});

package/src/ConsoleShared/src/components/markdown-extensions/__tests__/admonition-extension.spec.tsx

@@ -0,0 +1,121 @@
+import { renderHook } from '@testing-library/react';
+import useAdmonitionShowdownExtension from '../admonition-extension';
+import { marked } from 'marked';
+
+// Mock marked
+jest.mock('marked', () => ({
+  marked: {
+    parseInline: jest.fn((text) => `<strong>${text}</strong>`),
+  },
+}));
+
+// Mock DOMPurify
+jest.mock('dompurify', () => ({
+  sanitize: jest.fn((html) => html),
+}));
+
+describe('useAdmonitionShowdownExtension', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should return a showdown extension with correct properties', () => {
+    const { result } = renderHook(() => useAdmonitionShowdownExtension());
+    const extension = result.current;
+
+    expect(extension.type).toBe('lang');
+    expect(extension.regex).toEqual(/\[(.+)]{{(admonition) ([\w-]+)}}/g);
+    expect(typeof extension.replace).toBe('function');
+  });
+
+  it('should match different admonition types', () => {
+    const { result } = renderHook(() => useAdmonitionShowdownExtension());
+    const { regex } = result.current;
+
+    const admonitionTypes = ['note', 'tip', 'important', 'warning', 'caution', 'custom-type'];
+
+    admonitionTypes.forEach((type) => {
+      const testText = `[Content for ${type}]{{admonition ${type}}}`;
+      // Reset regex state for global flag
+      regex.lastIndex = 0;
+      const matches = regex.exec(testText);
+
+      expect(matches).not.toBeNull();
+      if (matches) {
+        expect(matches[1]).toBe(`Content for ${type}`);
+        expect(matches[2]).toBe('admonition');
+        expect(matches[3]).toBe(type);
+      }
+    });
+  });
+
+  it('should not match malformed admonition syntax', () => {
+    const { result } = renderHook(() => useAdmonitionShowdownExtension());
+    const { regex } = result.current;
+
+    const malformedCases = [
+      'Content]{{admonition note}}',
+      '[Content{{admonition note}}',
+      '[Content]{{admonition}}',
+      '[Content]{{notadmonition note}}',
+    ];
+
+    malformedCases.forEach((testCase) => {
+      expect(testCase.match(regex)).toBeNull();
+    });
+  });
+
+  it('should generate correct alert HTML structure', () => {
+    const { result } = renderHook(() => useAdmonitionShowdownExtension());
+    const { replace } = result.current;
+
+    const html = replace('[Test message]{{admonition note}}', 'Test message', 'admonition', 'note');
+
+    expect(html).toContain('pf-v6-c-alert');
+    expect(html).toContain('pf-m-info'); // note maps to info variant
+    expect(html).toContain('pf-m-inline');
+    expect(html).toContain('pfext-markdown-admonition');
+    expect(html).toContain('NOTE'); // uppercase title
+  });
+
+  it('should handle different admonition types with correct variants', () => {
+    const { result } = renderHook(() => useAdmonitionShowdownExtension());
+    const { replace } = result.current;
+
+    const testCases = [
+      { type: 'note', expectedClass: 'pf-m-info' },
+      { type: 'warning', expectedClass: 'pf-m-warning' },
+      { type: 'important', expectedClass: 'pf-m-danger' },
+    ];
+
+    testCases.forEach(({ type, expectedClass }) => {
+      const html = replace(`[Content]{{admonition ${type}}}`, 'Content', 'admonition', type);
+
+      expect(html).toContain(expectedClass);
+      expect(html).toContain(type.toUpperCase());
+    });
+  });
+
+  it('should process content through marked', () => {
+    const { result } = renderHook(() => useAdmonitionShowdownExtension());
+    const { replace } = result.current;
+
+    replace('[**Bold text**]{{admonition note}}', '**Bold text**', 'admonition', 'note');
+
+    expect(marked.parseInline).toHaveBeenCalledWith('**Bold text**');
+  });
+
+  it('should return original text for invalid cases', () => {
+    const { result } = renderHook(() => useAdmonitionShowdownExtension());
+    const { replace } = result.current;
+
+    // Missing content
+    const originalText = '[Content]{{admonition note}}';
+    const result1 = replace(originalText, '', 'admonition', 'note');
+    expect(result1).toBe(originalText);
+
+    // Wrong command
+    const result2 = replace(originalText, 'Content', 'not-admonition', 'note');
+    expect(result2).toBe(originalText);
+  });
+});

package/src/ConsoleShared/src/components/markdown-extensions/accordion-extension.tsx

@@ -8,34 +8,41 @@ import {
 import { renderToStaticMarkup } from 'react-dom/server';
 import { removeTemplateWhitespace } from './utils';
 import { ACCORDION_MARKDOWN_BUTTON_ID, ACCORDION_MARKDOWN_CONTENT_ID } from './const';
+import { marked } from 'marked';
+
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+const DOMPurify = require('dompurify');
 
 const useAccordionShowdownExtension = () =>
   useMemo(
     () => ({
       type: 'lang',
-      regex: /\[(.+)]{{(accordion) ("(.*?)")}}/g,
+      regex: /\[(.+)]{{(accordion) ("(.*?)")}}/g,
       replace: (
         _text: string,
         accordionContent: string,
         _command: string,
+        _quotedHeading: string,
         accordionHeading: string,
       ): string => {
         const accordionId = String(accordionHeading).replace(/\s/g, '-');
 
+        // Process accordion content with markdown
+        const processedContent = marked.parseInline(accordionContent);
+        const sanitizedContent = DOMPurify.sanitize(processedContent);
+
         return removeTemplateWhitespace(
           renderToStaticMarkup(
-            <>
-              <Accordion asDefinitionList>
-                <AccordionItem isExpanded={false}>
-                  <AccordionToggle id={`${ACCORDION_MARKDOWN_BUTTON_ID}-${accordionId}`}>
-                    {accordionHeading}
-                  </AccordionToggle>
-                  <AccordionContent id={`${ACCORDION_MARKDOWN_CONTENT_ID}-${accordionId}`}>
-                    {accordionContent}
-                  </AccordionContent>
-                </AccordionItem>
-              </Accordion>
-            </>,
+            <Accordion>
+              <AccordionItem>
+                <AccordionToggle id={`${ACCORDION_MARKDOWN_BUTTON_ID}-${accordionId}`}>
+                  {accordionHeading}
+                </AccordionToggle>
+                <AccordionContent id={`${ACCORDION_MARKDOWN_CONTENT_ID}-${accordionId}`} hidden>
+                  <div dangerouslySetInnerHTML={{ __html: sanitizedContent }} />
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>,
           ),
         );
       },

package/src/ConsoleShared/src/components/markdown-extensions/accordion-render-extension.tsx

@@ -14,14 +14,28 @@ const AccordionShowdownHandler: FC<AccordionShowdownComponentProps> = ({
   const [expanded, setExpanded] = useState<boolean>(false);
 
   const handleClick = () => {
+    const newExpanded = !expanded;
     const expandedModifier = 'pf-m-expanded';
 
-    buttonElement.className = `pf-v6-c-accordion__toggle ${!expanded ? expandedModifier : ''}`;
-    contentElement.hidden = expanded;
-    contentElement.className = `pf-v6-c-accordion__expanded-content ${
-      !expanded ? expandedModifier : ''
+    // Find the accordion item element (parent of the button)
+    const accordionItem = buttonElement.closest('.pf-v6-c-accordion__item');
+
+    // Update button - both visual state and aria-expanded
+    buttonElement.className = `pf-v6-c-accordion__toggle ${newExpanded ? expandedModifier : ''}`;
+    buttonElement.setAttribute('aria-expanded', newExpanded.toString());
+
+    // Update content - both visual state and hidden attribute
+    contentElement.hidden = !newExpanded;
+    contentElement.className = `pf-v6-c-accordion__expandable-content ${
+      newExpanded ? expandedModifier : ''
     }`;
-    setExpanded(!expanded);
+
+    // Update accordion item
+    if (accordionItem) {
+      accordionItem.className = `pf-v6-c-accordion__item ${newExpanded ? expandedModifier : ''}`;
+    }
+
+    setExpanded(newExpanded);
   };
 
   useEventListener(buttonElement, 'click', handleClick);

package/src/ConsoleShared/src/components/markdown-extensions/admonition-extension.tsx

@@ -4,7 +4,10 @@ import { renderToStaticMarkup } from 'react-dom/server';
 import { Alert } from '@patternfly/react-core';
 import LightbulbIcon from '@patternfly/react-icons/dist/js/icons/lightbulb-icon';
 import FireIcon from '@patternfly/react-icons/dist/js/icons/fire-icon';
-import QuickStartMarkdownView from '../../../../QuickStartMarkdownView';
+import { marked } from 'marked';
+
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+const DOMPurify = require('dompurify');
 
 enum AdmonitionType {
   TIP = 'TIP',
@@ -33,15 +36,23 @@ const useAdmonitionShowdownExtension = () =>
         content: string,
         admonitionLabel: string,
         admonitionType: string,
-        groupId: string,
       ): string => {
-        if (!content || !admonitionLabel || !admonitionType || !groupId) {
+        if (!content || !admonitionLabel || !admonitionType) {
+          return text;
+        }
+        if (admonitionLabel !== 'admonition') {
           return text;
         }
         admonitionType = admonitionType.toUpperCase();
 
-        const { variant, customIcon } = admonitionToAlertVariantMap[admonitionType];
-        const mdContent = <QuickStartMarkdownView content={content} />;
+        // Process markdown content directly using marked
+        const processedContent = marked.parseInline(content);
+        const sanitizedContent = DOMPurify.sanitize(processedContent);
+
+        // Handle unknown admonition types by defaulting to NOTE
+        const admonitionConfig =
+          admonitionToAlertVariantMap[admonitionType] || admonitionToAlertVariantMap.NOTE;
+        const { variant, customIcon } = admonitionConfig;
         const pfAlert = (
           <Alert
             variant={variant}
@@ -50,7 +61,7 @@ const useAdmonitionShowdownExtension = () =>
             title={admonitionType}
             className="pfext-markdown-admonition"
           >
-            {mdContent}
+            <div dangerouslySetInnerHTML={{ __html: sanitizedContent }} />
           </Alert>
         );
         return removeTemplateWhitespace(renderToStaticMarkup(pfAlert));

package/src/QuickStartDrawerContent.tsx

@@ -24,11 +24,8 @@ export const QuickStartDrawerContent: FC<QuickStartDrawerContentProps> = ({
     allQuickStarts = [],
     activeQuickStartState,
   } = useContext<QuickStartContextValues>(QuickStartContext);
-  const combinedQuickStarts = [
-    ...allQuickStarts,
-    ...quickStarts,
-  ].filter(
-    (qs, idx, arr) => arr.findIndex(q => q.metadata.name === qs.metadata.name) === idx
+  const combinedQuickStarts = [...allQuickStarts, ...quickStarts].filter(
+    (qs, idx, arr) => arr.findIndex((q) => q.metadata.name === qs.metadata.name) === idx,
   );
 
   const handleClose = () => {

package/src/catalog/Toolbar/QuickStartCatalogFilterItems.tsx

@@ -72,10 +72,7 @@ export const QuickStartCatalogFilterCount = ({ quickStartsCount }) => {
   const { getResource } = useContext<QuickStartContextValues>(QuickStartContext);
   return (
     <ToolbarItem align={{ default: 'alignEnd' }}>
-      {getResource('{{count, number}} item', quickStartsCount).replace(
-        '{{count, number}}',
-        quickStartsCount,
-      )}
+      { getResource("{{count, number}} item", quickStartsCount).replace('{{count, number}}', quickStartsCount) }
     </ToolbarItem>
   );
 };

package/src/controller/QuickStartIntroduction.tsx

@@ -47,7 +47,7 @@ const QuickStartIntroduction: FC<QuickStartIntroductionProps> = ({
       <p>
         {getResource(
           'In this quick start, you will complete {{count, number}} task',
-          tasks?.length,
+          tasks?.length || 0,
         ).replace('{{count, number}}', tasks?.length || 0)}
         :
       </p>