@patternfly/quickstarts 0.0.0

package/src/ConsoleInternal/components/utils/camel-case-wrap.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+
+const MEMO = {};
+
+export const CamelCaseWrap: React.FC<CamelCaseWrapProps> = ({ value, dataTest }) => {
+  if (!value) {
+    return '-';
+  }
+
+  if (MEMO[value]) {
+    return MEMO[value];
+  }
+
+  // Add word break points before capital letters (but keep consecutive capital letters together).
+  const words = value.match(/[A-Z]+[^A-Z]*|[^A-Z]+/g);
+  const rendered = (
+    <span data-test={dataTest}>
+      {words.map((word, i) => (
+        <React.Fragment key={i}>
+          {word}
+          {i !== words.length - 1 && <wbr />}
+        </React.Fragment>
+      ))}
+    </span>
+  );
+  MEMO[value] = rendered;
+  return rendered;
+};
+
+export interface CamelCaseWrapProps {
+  value: string;
+  dataTest?: string;
+}

package/src/ConsoleInternal/components/utils/index.tsx

@@ -0,0 +1,3 @@
+export * from './status-box';
+export * from './router';
+export * from './camel-case-wrap';

package/src/ConsoleInternal/components/utils/router.ts

@@ -0,0 +1,45 @@
+import { History, createBrowserHistory, createMemoryHistory } from 'history';
+import { QUICKSTART_SEARCH_FILTER_KEY, QUICKSTART_STATUS_FILTER_KEY } from '../../../utils/const';
+
+type AppHistory = History & { pushPath: History['push'] };
+
+let createHistory;
+
+try {
+  if (process.env.NODE_ENV === 'test') {
+    // Running in node. Can't use browser history
+    createHistory = createMemoryHistory;
+  } else {
+    createHistory = createBrowserHistory;
+  }
+} catch (unused) {
+  createHistory = createBrowserHistory;
+}
+
+export const history: AppHistory = createHistory();
+
+export const removeQueryArgument = (k: string) => {
+  const params = new URLSearchParams(window.location.search);
+  if (params.has(k)) {
+    params.delete(k);
+    const url = new URL(window.location.href);
+    history.replace(`${url.pathname}?${params.toString()}${url.hash}`);
+  }
+};
+
+export const setQueryArgument = (k: string, v: string) => {
+  if (!v) {
+    return removeQueryArgument(k);
+  }
+  const params = new URLSearchParams(window.location.search);
+  if (params.get(k) !== v) {
+    params.set(k, v);
+    const url = new URL(window.location.href);
+    history.replace(`${url.pathname}?${params.toString()}${url.hash}`);
+  }
+};
+
+export const clearFilterParams = () => {
+  removeQueryArgument(QUICKSTART_SEARCH_FILTER_KEY);
+  removeQueryArgument(QUICKSTART_STATUS_FILTER_KEY);
+};

package/src/ConsoleInternal/components/utils/status-box.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import { QuickStartContext, QuickStartContextValues } from '../../../utils/quick-start-context';
+
+export const Box: React.FC<BoxProps> = ({ children, className }) => (
+  <div className={css('pfext-status-box', className)}>{children}</div>
+);
+
+export const Loading: React.FC<LoadingProps> = ({ className }) => (
+  <div className={css('pfext-m-loader', className)}>
+    <div className="pfext-m-loader-dot__one" />
+    <div className="pfext-m-loader-dot__two" />
+    <div className="pfext-m-loader-dot__three" />
+  </div>
+);
+Loading.displayName = 'Loading';
+
+export const LoadingBox: React.FC<LoadingBoxProps> = ({ className, message }) => (
+  <Box className={css('pfext-status-box--loading', className)}>
+    <Loading />
+    {message && <div className="pfext-status-box__loading-message">{message}</div>}
+  </Box>
+);
+LoadingBox.displayName = 'LoadingBox';
+
+export const EmptyBox: React.FC<EmptyBoxProps> = ({ label }) => {
+  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
+  return (
+    <Box>
+      <div data-test="empty-message" className="text-center">
+        {label
+          ? getResource('No {{label}} found').replace('{{label}}', label)
+          : getResource('Not found')}
+      </div>
+    </Box>
+  );
+};
+EmptyBox.displayName = 'EmptyBox';
+
+interface BoxProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+interface LoadingProps {
+  className?: string;
+}
+
+interface LoadingBoxProps {
+  className?: string;
+  message?: string;
+}
+
+interface EmptyBoxProps {
+  label?: string;
+}

package/src/ConsoleInternal/module/k8s/types.ts

@@ -0,0 +1,53 @@
+export interface AccessReviewResourceAttributes {
+  group?: string;
+  resource?: string;
+  subresource?: string;
+  verb?: K8sVerb;
+  name?: string;
+  namespace?: string;
+}
+
+export type K8sVerb =
+  | 'create'
+  | 'get'
+  | 'list'
+  | 'update'
+  | 'patch'
+  | 'delete'
+  | 'deletecollection'
+  | 'watch';
+
+export interface OwnerReference {
+  name: string;
+  kind: string;
+  uid: string;
+  apiVersion: string;
+  controller?: boolean;
+  blockOwnerDeletion?: boolean;
+}
+
+export interface ObjectMetadata {
+  name: string;
+  annotations?: { [key: string]: string };
+  clusterName?: string;
+  creationTimestamp?: string;
+  deletionGracePeriodSeconds?: number;
+  deletionTimestamp?: string;
+  finalizers?: string[];
+  generateName?: string;
+  generation?: number;
+  labels?: { [key: string]: string };
+  managedFields?: any[];
+  namespace?: string;
+  ownerReferences?: OwnerReference[];
+  resourceVersion?: string;
+  uid?: string;
+  // language can be: en
+  language?: string;
+  // country can be: US
+  country?: string;
+  // locale is a combination of language and country, for example: en_US
+  locale?: string;
+  // anything else to custom define
+  [key: string]: any;
+}

package/src/ConsoleShared/index.ts

@@ -0,0 +1 @@
+export * from './src';

package/src/ConsoleShared/src/components/index.ts

@@ -0,0 +1,7 @@
+export * from './modal';
+export * from './spotlight';
+export * from './markdown-highlight-extension';
+export * from './markdown-extensions';
+export * from './popper';
+export * from './utils';
+export * from './status';

package/src/ConsoleShared/src/components/layout/PageLayout.scss

@@ -0,0 +1,29 @@
+.pfext-page-layout {
+  &__content {
+    padding: var(--pf-v5-global--spacer--lg);
+    flex: 1;
+  }
+
+  &__header {
+    padding-top: 1px;
+    background-color: var(--pf-v5-global--BackgroundColor--light-100);
+  }
+
+  &__hint {
+    padding-left: var(--pf-v5-global--spacer--lg);
+    padding-right: var(--pf-v5-global--spacer--lg);
+    padding-bottom: var(--pf-v5-global--spacer--md);
+    font-size: 14px;
+  }
+
+  &__title {
+    padding-left: var(--pf-v5-global--spacer--lg);
+    padding-right: var(--pf-v5-global--spacer--lg);
+    font-size: var(--pf-v5-global--FontSize--2xl);
+    margin-top: 23px;
+    margin-bottom: 11.5px;
+    font-family: var(--pf-v5-global--FontFamily--heading--sans-serif);
+    font-weight: var(--pf-v5-global--FontWeight--normal);
+    line-height: 1.1;
+  }
+}

package/src/ConsoleShared/src/components/markdown-extensions/MarkdownCopyClipboard.tsx

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import { Tooltip } from '@patternfly/react-core';
+import { QuickStartContext, QuickStartContextValues } from '@quickstarts/utils/quick-start-context';
+import { useEventListener } from '../../hooks';
+import { MARKDOWN_COPY_BUTTON_ID, MARKDOWN_SNIPPET_ID } from './const';
+
+interface CopyClipboardProps {
+  element: HTMLElement;
+  rootSelector: string;
+  docContext: Document;
+}
+
+export const CopyClipboard: React.FC<CopyClipboardProps> = ({
+  element,
+  rootSelector,
+  docContext,
+}) => {
+  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
+  const [showSuccessContent, setShowSuccessContent] = React.useState<boolean>(false);
+  const textToCopy = React.useMemo(() => {
+    const copyTextId = element.getAttribute(MARKDOWN_COPY_BUTTON_ID);
+    return (
+      docContext.querySelector(
+        `${rootSelector} [${MARKDOWN_SNIPPET_ID}="${copyTextId}"]`,
+      ) as HTMLElement
+    )?.innerText;
+  }, [element, docContext, rootSelector]);
+
+  useEventListener(
+    element,
+    'click',
+    React.useCallback(() => {
+      navigator.clipboard
+        .writeText(textToCopy.trim())
+        .then(() => {
+          setShowSuccessContent(true);
+        })
+        .catch(() => {});
+    }, [textToCopy]),
+  );
+
+  useEventListener(
+    element,
+    'mouseleave',
+    React.useCallback(() => {
+      setShowSuccessContent(false);
+    }, []),
+  );
+
+  return showSuccessContent ? (
+    <Tooltip
+      key="after-copy"
+      isVisible
+      triggerRef={() => element as HTMLElement}
+      content={getResource('Successfully copied to clipboard!')}
+      className="pfext-quick-start__base"
+    />
+  ) : (
+    <Tooltip
+      key="before-copy"
+      triggerRef={() => element as HTMLElement}
+      content={getResource('Copy to clipboard')}
+      className="pfext-quick-start__base"
+    />
+  );
+};
+
+interface MarkdownCopyClipboardProps {
+  docContext: Document;
+  rootSelector: string;
+}
+
+const MarkdownCopyClipboard: React.FC<MarkdownCopyClipboardProps> = ({
+  docContext,
+  rootSelector,
+}) => {
+  const elements = docContext.querySelectorAll(`${rootSelector} [${MARKDOWN_COPY_BUTTON_ID}]`);
+  return elements.length > 0 ? (
+    <>
+      {Array.from(elements).map((elm) => {
+        const attributeValue = elm.getAttribute(MARKDOWN_COPY_BUTTON_ID);
+        return (
+          <CopyClipboard
+            key={attributeValue}
+            element={elm as HTMLElement}
+            rootSelector={rootSelector}
+            docContext={docContext}
+          />
+        );
+      })}
+    </>
+  ) : null;
+};
+
+export default MarkdownCopyClipboard;

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

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import MarkdownCopyClipboard, { CopyClipboard } from '../MarkdownCopyClipboard';
+import { htmlDocumentForCopyClipboard } from './test-data';
+
+describe('MarkdownCopyClipboard', () => {
+  beforeAll(() => {
+    document.body.innerHTML = htmlDocumentForCopyClipboard;
+  });
+  it('should render null if no element is found', () => {
+    const wrapper = shallow(
+      <MarkdownCopyClipboard docContext={document} rootSelector="#copy-markdown-3" />,
+    );
+    expect(wrapper.isEmptyRender()).toBe(true);
+    expect(wrapper.find(CopyClipboard).exists()).toBe(false);
+  });
+
+  it('should render null if no element is found', () => {
+    const wrapper = shallow(
+      <MarkdownCopyClipboard docContext={document} rootSelector="#copy-markdown-1" />,
+    );
+    expect(wrapper.isEmptyRender()).toBe(false);
+    expect(wrapper.find(CopyClipboard).exists()).toBe(true);
+  });
+});

package/src/ConsoleShared/src/components/markdown-extensions/__tests__/test-data.ts

@@ -0,0 +1,5 @@
+import { MARKDOWN_COPY_BUTTON_ID, MARKDOWN_SNIPPET_ID, MARKDOWN_EXECUTE_BUTTON_ID } from '../const';
+
+export const htmlDocumentForCopyClipboard = `<div id="copy-markdown-1"><div ${MARKDOWN_SNIPPET_ID}="1234">some test data for testing</div><button ${MARKDOWN_COPY_BUTTON_ID}="1234"</button><div ${MARKDOWN_SNIPPET_ID}="12354">some test data for testing</div><button ${MARKDOWN_COPY_BUTTON_ID}="12354"</button></div>`;
+
+export const htmlDocumentForExecuteButton = `<div id="execute-markdown-1"><div ${MARKDOWN_SNIPPET_ID}="1234">some test data for testing</div><button ${MARKDOWN_EXECUTE_BUTTON_ID}="1234"</button><div ${MARKDOWN_SNIPPET_ID}="12354">some test data for testing</div><button ${MARKDOWN_EXECUTE_BUTTON_ID}="12354"</button></div>`;

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

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import {
+  Accordion,
+  AccordionItem,
+  AccordionToggle,
+  AccordionContent,
+} from '@patternfly/react-core';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { removeTemplateWhitespace } from './utils';
+import { ACCORDION_MARKDOWN_BUTTON_ID, ACCORDION_MARKDOWN_CONTENT_ID } from './const';
+import './showdown-extension.scss';
+
+const useAccordionShowdownExtension = () =>
+  React.useMemo(
+    () => ({
+      type: 'lang',
+      regex: /\[(.+)]{{(accordion) ("(.*?)")}}/g,
+      replace: (
+        _text: string,
+        accordionContent: string,
+        _command: string,
+        accordionHeading: string,
+      ): string => {
+        const accordionId = String(accordionHeading).replace(/\s/g, '-');
+
+        return removeTemplateWhitespace(
+          renderToStaticMarkup(
+            <Accordion asDefinitionList>
+              <AccordionItem>
+                <AccordionToggle
+                  isExpanded={false}
+                  id={`${ACCORDION_MARKDOWN_BUTTON_ID}-${accordionId}`}
+                >
+                  {accordionHeading}
+                </AccordionToggle>
+                <AccordionContent
+                  id={`${ACCORDION_MARKDOWN_CONTENT_ID}-${accordionId}`}
+                  isHidden={!false}
+                >
+                  {accordionContent}
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>,
+          ),
+        );
+      },
+    }),
+    [],
+  );
+
+export default useAccordionShowdownExtension;

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

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { useEventListener } from '../../hooks';
+import { ACCORDION_MARKDOWN_BUTTON_ID, ACCORDION_MARKDOWN_CONTENT_ID } from './const';
+
+interface AccordionShowdownComponentProps {
+  buttonElement: HTMLElement;
+  contentElement: HTMLElement;
+}
+
+const AccordionShowdownHandler: React.FC<AccordionShowdownComponentProps> = ({
+  buttonElement,
+  contentElement,
+}) => {
+  const [expanded, setExpanded] = React.useState<boolean>(false);
+
+  const handleClick = () => {
+    const expandedModifier = 'pf-m-expanded';
+
+    buttonElement.className = `pf-v5-c-accordion__toggle ${!expanded ? expandedModifier : ''}`;
+    contentElement.hidden = expanded;
+    contentElement.className = `pf-v5-c-accordion__expanded-content ${
+      !expanded ? expandedModifier : ''
+    }`;
+    setExpanded(!expanded);
+  };
+
+  useEventListener(buttonElement, 'click', handleClick);
+
+  return <></>;
+};
+
+interface accordionRenderExtensionProps {
+  docContext: Document;
+}
+
+const AccordionRenderExtension: React.FC<accordionRenderExtensionProps> = ({ docContext }) => {
+  const buttonElements = docContext.querySelectorAll(`[id ^= ${ACCORDION_MARKDOWN_BUTTON_ID}]`);
+  const contentElements = docContext.querySelectorAll(`[id ^= ${ACCORDION_MARKDOWN_CONTENT_ID}]`);
+
+  return buttonElements.length > 0 ? (
+    <>
+      {Array.from(buttonElements).map((elm) => {
+        const content = Array.from(contentElements).find((elm2) => {
+          const elmId = elm.id.split(ACCORDION_MARKDOWN_BUTTON_ID)[1];
+          const elm2Id = elm2.id.split(ACCORDION_MARKDOWN_CONTENT_ID)[1];
+          return elmId === elm2Id;
+        });
+        return (
+          <AccordionShowdownHandler
+            key={elm.id.split(ACCORDION_MARKDOWN_BUTTON_ID)[1]}
+            buttonElement={elm as HTMLElement}
+            contentElement={content as HTMLElement}
+          />
+        );
+      })}
+    </>
+  ) : null;
+};
+
+export default AccordionRenderExtension;

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

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { removeTemplateWhitespace } from './utils';
+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 './showdown-extension.scss';
+import QuickStartMarkdownView from '../../../../QuickStartMarkdownView';
+
+enum AdmonitionType {
+  TIP = 'TIP',
+  NOTE = 'NOTE',
+  IMPORTANT = 'IMPORTANT',
+  WARNING = 'WARNING',
+  CAUTION = 'CAUTION',
+}
+
+const admonitionToAlertVariantMap = {
+  [AdmonitionType.NOTE]: { variant: 'info' },
+  [AdmonitionType.TIP]: { variant: 'default', customIcon: <LightbulbIcon /> },
+  [AdmonitionType.IMPORTANT]: { variant: 'danger' },
+  [AdmonitionType.CAUTION]: { variant: 'warning', customIcon: <FireIcon /> },
+  [AdmonitionType.WARNING]: { variant: 'warning' },
+};
+
+const useAdmonitionShowdownExtension = () => 
+  // const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
+   React.useMemo(
+    () => ({
+      type: 'lang',
+      regex: /\[(.+)]{{(admonition) ([\w-]+)}}/g,
+      replace: (
+        text: string,
+        content: string,
+        admonitionLabel: string,
+        admonitionType: string,
+        groupId: string,
+      ): string => {
+        if (!content || !admonitionLabel || !admonitionType || !groupId) {
+          return text;
+        }
+        admonitionType = admonitionType.toUpperCase();
+
+        const { variant, customIcon } = admonitionToAlertVariantMap[admonitionType];
+        const style =
+          admonitionType === AdmonitionType.CAUTION ? { backgroundColor: '#ec7a0915' } : {};
+        const mdContent = <QuickStartMarkdownView content={content} />;
+        const pfAlert = (
+          <Alert
+            variant={variant}
+            customIcon={customIcon && customIcon}
+            isInline
+            title={admonitionType}
+            className="pfext-markdown-admonition"
+            style={style}
+          >
+            {mdContent}
+          </Alert>
+        );
+        return removeTemplateWhitespace(renderToStaticMarkup(pfAlert));
+      },
+    }),
+    [],
+  )
+;
+
+export default useAdmonitionShowdownExtension;

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

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { removeTemplateWhitespace } from './utils';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { CodeBlock } from '@patternfly/react-core';
+import './showdown-extension.scss';
+
+const useCodeShowdownExtension = () => React.useMemo(
+    () => ({
+      type: 'output',
+      regex: /<pre><code>(.*?)\n?<\/code><\/pre>/g,
+      replace: (text: string, content: string): string => {
+        if (!content) {
+          return text;
+        }
+        const pfCodeBlock = <CodeBlock>{content}</CodeBlock>;
+
+        return removeTemplateWhitespace(renderToStaticMarkup(pfCodeBlock));
+      },
+    }),
+    [],
+  );
+
+export default useCodeShowdownExtension;

package/src/ConsoleShared/src/components/markdown-extensions/const.ts

@@ -0,0 +1,5 @@
+export const MARKDOWN_COPY_BUTTON_ID = 'data-copy-for';
+export const MARKDOWN_EXECUTE_BUTTON_ID = 'data-execute-for';
+export const MARKDOWN_SNIPPET_ID = 'data-snippet-id';
+export const ACCORDION_MARKDOWN_BUTTON_ID = `accordion-markdown-button-id`;
+export const ACCORDION_MARKDOWN_CONTENT_ID = `accordion-markdown-content-id`;

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

@@ -0,0 +1,7 @@
+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';
+export { default as useCodeShowdownExtension } from './code-extension';
+export { default as useAccordionShowdownExtension } from './accordion-extension';
+export { default as AccordionRenderExtension } from './accordion-render-extension';

package/src/ConsoleShared/src/components/markdown-extensions/inline-clipboard-extension.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { QuickStartContext, QuickStartContextValues } from '@quickstarts/utils/quick-start-context';
+import { MARKDOWN_COPY_BUTTON_ID, MARKDOWN_SNIPPET_ID } from './const';
+import { removeTemplateWhitespace } from './utils';
+import { renderToStaticMarkup } from 'react-dom/server';
+import CopyIcon from '@patternfly/react-icons/dist/js/icons/copy-icon';
+import './showdown-extension.scss';
+
+const useInlineCopyClipboardShowdownExtension = () => {
+  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
+  return React.useMemo(
+    () => ({
+      type: 'lang',
+      regex: /`([^`](.*?)[^`])`{{copy}}/g,
+      replace: (text: string, group: string, _: string, groupId: number): string => {
+        if (!group || isNaN(groupId)) {
+          return text;
+        }
+        return removeTemplateWhitespace(
+          `<span class="pf-v5-c-clipboard-copy pf-m-inline">
+              <span class="pf-v5-c-clipboard-copy__text" ${MARKDOWN_SNIPPET_ID}="${groupId}">${group}</span>
+              <span class="pf-v5-c-clipboard-copy__actions">
+                <span class="pf-v5-c-clipboard-copy__actions-item">
+                  <button class="pf-v5-c-button pf-m-plain" aria-label="${getResource(
+                    'Copy to clipboard',
+                  )}" ${MARKDOWN_COPY_BUTTON_ID}="${groupId}">
+                    ${renderToStaticMarkup(<CopyIcon />)}
+                  </button>
+                </span>
+              </span>
+            </span>`,
+        );
+      },
+    }),
+    [getResource],
+  );
+};
+
+export default useInlineCopyClipboardShowdownExtension;

package/src/ConsoleShared/src/components/markdown-extensions/multiline-clipboard-extension.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { QuickStartContext, QuickStartContextValues } from '@quickstarts/utils/quick-start-context';
+import { MARKDOWN_COPY_BUTTON_ID, MARKDOWN_SNIPPET_ID } from './const';
+import { renderToStaticMarkup } from 'react-dom/server';
+import CopyIcon from '@patternfly/react-icons/dist/js/icons/copy-icon';
+
+import './showdown-extension.scss';
+
+const useMultilineCopyClipboardShowdownExtension = () => {
+  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
+  return React.useMemo(
+    () => ({
+      type: 'lang',
+      regex: /```[\n]\s*((((?!```).)*?\n)+)\s*```{{copy}}/g,
+      replace: (text: string, group: string, _1: string, _2: string, groupId: number): string => {
+        if (!group || isNaN(groupId)) {
+          return text;
+        }
+        return `<div class="pf-v5-c-code-block">
+              <div class="pf-v5-c-code-block__header">
+                <div class="pf-v5-c-code-block__actions">
+                  <div class="pf-v5-c-code-block__actions-item">
+                    <button class="pf-v5-c-button pf-m-plain" type="button" aria-label="${getResource(
+                      'Copy to clipboard',
+                    )}" ${MARKDOWN_COPY_BUTTON_ID}="${groupId}">
+                      ${renderToStaticMarkup(<CopyIcon />)}
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <div class="pf-v5-c-code-block__content">
+                <pre class="pf-v5-c-code-block__pre pfext-code-block__pre">
+                  <code class="pf-v5-c-code-block__code" 
+                    ${MARKDOWN_SNIPPET_ID}="${groupId}">${group.trim()}</code>
+                </pre>
+              </div>
+            </div>`;
+      },
+    }),
+    [getResource],
+  );
+};
+
+export default useMultilineCopyClipboardShowdownExtension;