@patternfly/quickstarts 0.0.0

package/src/QuickStartMarkdownView.tsx

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { SyncMarkdownView } from '@console/internal/components/markdown-view';
+import {
+  AccordionRenderExtension,
+  MarkdownCopyClipboard,
+  MarkdownHighlightExtension,
+  useInlineCopyClipboardShowdownExtension,
+  useMultilineCopyClipboardShowdownExtension,
+  useAdmonitionShowdownExtension,
+  useCodeShowdownExtension,
+  useAccordionShowdownExtension,
+} from '@console/shared';
+import { HIGHLIGHT_REGEXP } from '@console/shared/src/components/markdown-highlight-extension/highlight-consts';
+import { QuickStartContext, QuickStartContextValues } from './utils/quick-start-context';
+
+export const removeParagraphWrap = (markdown: string) => markdown.replace(/^<p>|<\/p>$/g, '');
+
+interface QuickStartMarkdownViewProps {
+  content: string;
+  exactHeight?: boolean;
+  className?: string;
+}
+
+const QuickStartMarkdownView: React.FC<QuickStartMarkdownViewProps> = ({
+  content,
+  exactHeight,
+  className,
+}) => {
+  const { markdown } = React.useContext<QuickStartContextValues>(QuickStartContext);
+  const inlineCopyClipboardShowdownExtension = useInlineCopyClipboardShowdownExtension();
+  const multilineCopyClipboardShowdownExtension = useMultilineCopyClipboardShowdownExtension();
+  const admonitionShowdownExtension = useAdmonitionShowdownExtension();
+  const codeShowdownExtension = useCodeShowdownExtension();
+  const accordionShowdownExtension = useAccordionShowdownExtension();
+  return (
+    <SyncMarkdownView
+      inline
+      content={content}
+      exactHeight={exactHeight}
+      extensions={[
+        {
+          type: 'lang',
+          regex: HIGHLIGHT_REGEXP,
+          replace: (text: string, linkLabel: string, linkType: string, linkId: string): string => {
+            if (!linkLabel || !linkType || !linkId) {
+              return text;
+            }
+            return `<button class="pf-v5-c-button pf-m-inline pf-m-link" data-highlight="${linkId}">${linkLabel}</button>`;
+          },
+        },
+        {
+          type: 'output',
+          filter(text) {
+            // check HTML for patterns like: <em>Status: unknown</em>{#extension-requirement-status}
+            // and replace with <em id="extension-requirement-status">Status: unknown</em>
+            return text.replace(/<em>(.*)<\/em>{#(.*)}/g, '<em id="$2">$1</em>');
+          },
+        },
+        inlineCopyClipboardShowdownExtension,
+        multilineCopyClipboardShowdownExtension,
+        admonitionShowdownExtension,
+        codeShowdownExtension,
+        accordionShowdownExtension,
+        ...(markdown ? markdown.extensions : []),
+      ]}
+      renderExtension={(docContext, rootSelector) => (
+        <>
+          <AccordionRenderExtension docContext={docContext} />
+          <MarkdownHighlightExtension docContext={docContext} rootSelector={rootSelector} />
+          <MarkdownCopyClipboard docContext={docContext} rootSelector={rootSelector} />
+          {markdown &&
+            markdown.renderExtension &&
+            markdown.renderExtension(docContext, rootSelector)}
+        </>
+      )}
+      className={className}
+    />
+  );
+};
+export default QuickStartMarkdownView;

package/src/QuickStartPanelContent.scss

@@ -0,0 +1,46 @@
+.pfext-quick-start-panel-content {
+  &__header {
+    position: sticky;
+    top: 0px;
+    background: inherit;
+    z-index: var(--pf-v5-global--ZIndex--xs);
+    &__shadow {
+      box-shadow: var(--pf-v5-global--BoxShadow--sm-bottom);
+    }
+    &--blue-white {
+      background-color: var(--pf-v5-global--palette--blue-400);
+      .pfext-quick-start-panel-content__title {
+        color: var(--pf-v5-global--Color--light-100);
+      }
+      .pfext-quick-start-panel-content__duration {
+        color: var(--pf-v5-global--Color--light-200);
+      }
+      .pfext-quick-start-panel-content__close-button {
+        button {
+          color: var(--pf-v5-global--Color--light-100) !important;
+        }
+      }
+    }
+  }
+  &__body {
+    display: flex;
+    flex-direction: column;
+  }
+  &__title {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  &__duration {
+    display: inline-block;
+    font-size: var(--pf-v5-global--FontSize--md);
+    font-weight: 400;
+    line-height: 1;
+    color: #9c9c9c;
+  }
+  &__footer {
+    &__shadow {
+      box-shadow: var(--pf-v5-global--BoxShadow--sm-top);
+    }
+  }
+}

package/src/QuickStartPanelContent.tsx

@@ -0,0 +1,165 @@
+import './QuickStartPanelContent.scss';
+import * as React from 'react';
+import {
+  DrawerActions,
+  DrawerCloseButton,
+  DrawerHead,
+  DrawerPanelBody,
+  DrawerPanelContent,
+  Title,
+} from '@patternfly/react-core';
+import { css } from '@patternfly/react-styles';
+import * as ReactDOM from 'react-dom';
+import { Shadows, useScrollShadows } from '@console/shared';
+import QuickStartController from './QuickStartController';
+import { QuickStartContext, QuickStartContextValues } from './utils/quick-start-context';
+import { QuickStart } from './utils/quick-start-types';
+import { camelize } from './utils/quick-start-utils';
+import { removeParagraphWrap } from './QuickStartMarkdownView';
+import { markdownConvert } from './ConsoleInternal/components/markdown-view';
+
+type HandleClose = () => void;
+
+interface QuickStartPanelContentProps {
+  quickStarts: QuickStart[];
+  activeQuickStartID: string;
+  handleClose: HandleClose;
+  appendTo?: HTMLElement | (() => HTMLElement);
+  isResizable?: boolean;
+  showClose?: boolean;
+  headerVariant?: '' | 'blue-white';
+}
+
+const getElement = (appendTo: HTMLElement | (() => HTMLElement)) => {
+  if (typeof appendTo === 'function') {
+    return appendTo();
+  }
+  return appendTo;
+};
+
+const useScrollTopOnTaskNumberChange = (node: HTMLElement, taskNumber: number): void => {
+  React.useEffect(() => {
+    if (node) {
+      node.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+  }, [taskNumber, node]);
+};
+
+const QuickStartPanelContent: React.FC<QuickStartPanelContentProps> = ({
+  quickStarts = [],
+  handleClose,
+  activeQuickStartID,
+  appendTo,
+  isResizable = true,
+  showClose = true,
+  headerVariant = '',
+  ...props
+}) => {
+  const titleRef = React.useRef(null);
+  const { getResource, activeQuickStartState } =
+    React.useContext<QuickStartContextValues>(QuickStartContext);
+  const [contentRef, setContentRef] = React.useState<HTMLDivElement>();
+  const shadows = useScrollShadows(contentRef);
+  const quickStart = quickStarts.find((qs) => qs.metadata.name === activeQuickStartID);
+  const taskNumber = activeQuickStartState?.taskNumber;
+  useScrollTopOnTaskNumberChange(contentRef, taskNumber as number);
+  const nextQuickStarts: QuickStart[] = quickStarts.filter((qs: QuickStart) =>
+    quickStart?.spec.nextQuickStart?.includes(qs.metadata.name),
+  );
+
+  const headerClasses = css('pfext-quick-start-panel-content__header', {
+    'pfext-quick-start-panel-content__header__shadow':
+      shadows === Shadows.top || shadows === Shadows.both,
+    'pfext-quick-start-panel-content__header--blue-white': headerVariant === 'blue-white',
+  });
+
+  const footerClass = css({
+    'pfext-quick-start-panel-content__footer__shadow':
+      shadows === Shadows.bottom || shadows === Shadows.both,
+  });
+
+  const getStep = () => {
+    const tasks = quickStart.spec.tasks.length;
+    if (Number.parseInt(taskNumber as string) === -1) {
+      return 'intro';
+    }
+    if (Number.parseInt(taskNumber as string) === tasks) {
+      return 'conclusion';
+    }
+    return Number.parseInt(taskNumber as string) + 1;
+  };
+
+  React.useEffect(() => {
+    if (quickStart) {
+      titleRef.current.focus();
+    }
+  }, [quickStart]);
+
+  const content = quickStart ? (
+    <DrawerPanelContent
+      isResizable={isResizable}
+      className="pfext-quick-start__base"
+      data-testid={`qs-drawer-${camelize(quickStart.spec.displayName)}`}
+      data-qs={`qs-step-${getStep()}`}
+      data-test="quickstart drawer"
+      {...props}
+    >
+      <div className={headerClasses}>
+        <DrawerHead>
+          <div className="pfext-quick-start-panel-content__title" tabIndex={-1} ref={titleRef}>
+            <Title
+              headingLevel="h2"
+              size="xl"
+              className="pfext-quick-start-panel-content__name"
+              style={{ marginRight: 'var(--pf-v5-global--spacer--md)' }}
+            >
+              <span
+                dangerouslySetInnerHTML={{
+                  __html: removeParagraphWrap(markdownConvert(quickStart?.spec.displayName)),
+                }}
+              />{' '}
+              <small className="pfext-quick-start-panel-content__duration">
+                {quickStart?.spec.durationMinutes
+                  ? getResource(
+                      '{{type}} • {{duration, number}} minutes',
+                      quickStart?.spec.durationMinutes,
+                    )
+                      .replace('{{duration, number}}', quickStart?.spec.durationMinutes)
+                      .replace('{{type}}', getResource('Type'))
+                  : getResource('Type')}
+              </small>
+            </Title>
+          </div>
+          {showClose && (
+            <DrawerActions>
+              <DrawerCloseButton
+                onClick={handleClose}
+                className="pfext-quick-start-panel-content__close-button"
+                data-testid="qs-drawer-close"
+              />
+            </DrawerActions>
+          )}
+        </DrawerHead>
+      </div>
+      <DrawerPanelBody
+        hasNoPadding
+        className="pfext-quick-start-panel-content__body"
+        data-test="content"
+      >
+        <QuickStartController
+          quickStart={quickStart}
+          nextQuickStarts={nextQuickStarts}
+          footerClass={footerClass}
+          contentRef={setContentRef}
+        />
+      </DrawerPanelBody>
+    </DrawerPanelContent>
+  ) : null;
+
+  if (appendTo) {
+    return ReactDOM.createPortal(content, getElement(appendTo));
+  }
+  return content;
+};
+
+export default QuickStartPanelContent;

package/src/__tests__/quick-start-utils.spec.tsx

@@ -0,0 +1,16 @@
+import { allQuickStarts } from '../data/quick-start-test-data';
+import { getQuickStartByName, isDisabledQuickStart } from '../utils/quick-start-utils';
+
+describe('quick-start-utils', () => {
+  it('should return the quick start corresponding to the id for getQuickStartByName function', () => {
+    const mockID = allQuickStarts[0].metadata.name;
+    const quickStart = getQuickStartByName(mockID, allQuickStarts);
+    expect(quickStart.metadata.name === mockID).toBe(true);
+  });
+
+  it('should filter out disabled quick starts', () => {
+    const disabledQuickStarts = [allQuickStarts[0].metadata.name]; // setting allQuickStart[0] as disabled
+    expect(isDisabledQuickStart(allQuickStarts[1], disabledQuickStarts)).toBe(false);
+    expect(isDisabledQuickStart(allQuickStarts[0], disabledQuickStarts)).toBe(true);
+  });
+});

package/src/catalog/Catalog/QuickStartCatalogHeader.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+export interface QuickStartCatalogHeaderProps {
+  title: string;
+  hint?: string;
+}
+
+export const QuickStartCatalogHeader: React.FC<QuickStartCatalogHeaderProps> = ({
+  title,
+  hint,
+}) => (
+  <div className="pfext-page-layout__header">
+    <h1 data-pf-content="true" className="pfext-page-layout__title">
+      {title}
+    </h1>
+    {hint && <div className="pfext-page-layout__hint">{hint}</div>}
+  </div>
+);

package/src/catalog/Catalog/QuickStartCatalogSection.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+export interface QuickStartCatalogSectionProps {
+  children: React.ReactNode;
+}
+
+export const QuickStartCatalogSection: React.FC<QuickStartCatalogSectionProps> = ({ children }) => (
+  <div className="pfext-page-layout__content">{children}</div>
+);

package/src/catalog/Catalog/QuickStartCatalogToolbar.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { Toolbar } from '@patternfly/react-core';
+
+export interface QuickStartCatalogToolbarProps {
+  children: React.ReactNode;
+}
+
+export const QuickStartCatalogToolbar: React.FC<QuickStartCatalogToolbarProps> = ({ children }) => (
+  <Toolbar usePageInsets className="pfext-quick-start-catalog-filter__flex">
+    {children}
+  </Toolbar>
+);

package/src/catalog/Catalog/index.ts

@@ -0,0 +1,3 @@
+export * from './QuickStartCatalogHeader';
+export * from './QuickStartCatalogSection';
+export * from './QuickStartCatalogToolbar';

package/src/catalog/QuickStartCatalog.scss

@@ -0,0 +1,8 @@
+.pfext-quick-start-catalog {
+  &__gallery {
+    --pf-v5-l-gallery--GridTemplateColumns: repeat(auto-fill, 300px) !important;
+  }
+  &__gallery-item {
+    display: inherit !important;
+  }
+}

package/src/catalog/QuickStartCatalog.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { Gallery, GalleryItem } from '@patternfly/react-core';
+import { QuickStartContext, QuickStartContextValues } from '../utils/quick-start-context';
+import { QuickStart } from '../utils/quick-start-types';
+import { getQuickStartStatus } from '../utils/quick-start-utils';
+import QuickStartTile from './QuickStartTile';
+
+import './QuickStartCatalog.scss';
+
+interface QuickStartCatalogProps {
+  quickStarts: QuickStart[];
+}
+
+const QuickStartCatalog: React.FC<QuickStartCatalogProps> = ({ quickStarts }) => {
+  const { activeQuickStartID, allQuickStartStates } = React.useContext<QuickStartContextValues>(
+    QuickStartContext,
+  );
+
+  return (
+    <div className="pfext-page-layout__content">
+      <Gallery className="pfext-quick-start-catalog__gallery" hasGutter>
+        {quickStarts.map((quickStart) => {
+          const {
+            metadata: { name: id },
+          } = quickStart;
+
+          return (
+            <GalleryItem key={id} className="pfext-quick-start-catalog__gallery-item">
+              <QuickStartTile
+                quickStart={quickStart}
+                isActive={id === activeQuickStartID}
+                status={getQuickStartStatus(allQuickStartStates, id)}
+              />
+            </GalleryItem>
+          );
+        })}
+      </Gallery>
+    </div>
+  );
+};
+
+export default QuickStartCatalog;

package/src/catalog/QuickStartTile.scss

@@ -0,0 +1,11 @@
+.pfext-quick-start-tile {
+  height: 100%;
+  & .catalog-tile-pf-description .has-footer {
+    display: block;
+    -webkit-line-clamp: unset;
+  }
+
+  & .catalog-tile-pf-icon {
+    display: flex;
+  }
+}

package/src/catalog/QuickStartTile.tsx

@@ -0,0 +1,129 @@
+import * as React from 'react';
+import { CatalogTile } from '@patternfly/react-catalog-view-extension';
+import RocketIcon from '@patternfly/react-icons/dist/js/icons/rocket-icon';
+import { FallbackImg } from '@console/shared';
+import { QuickStartContext, QuickStartContextValues } from '../utils/quick-start-context';
+import { QuickStart, QuickStartStatus } from '../utils/quick-start-types';
+import { camelize } from '../utils/quick-start-utils';
+import QuickStartTileDescription from './QuickStartTileDescription';
+import QuickStartTileFooter from './QuickStartTileFooter';
+import QuickStartTileFooterExternal from './QuickStartTileFooterExternal';
+import QuickStartTileHeader, { QuickstartAction } from './QuickStartTileHeader';
+
+import './QuickStartTile.scss';
+
+interface QuickStartTileProps {
+  quickStart: QuickStart;
+  status: QuickStartStatus;
+  isActive: boolean;
+  onClick?: () => void;
+  /** Action config for button rendered next to title */
+  action?: QuickstartAction;
+}
+
+const QuickStartTile: React.FC<QuickStartTileProps> = ({
+  quickStart,
+  status,
+  isActive,
+  onClick = () => {},
+  action,
+}) => {
+  const {
+    metadata: { name: id },
+    spec: { icon, tasks, displayName, description, durationMinutes, prerequisites, link, type },
+  } = quickStart;
+
+  const { setActiveQuickStart, footer } =
+    React.useContext<QuickStartContextValues>(QuickStartContext);
+
+  const ref = React.useRef<HTMLDivElement>(null);
+
+  let quickStartIcon: React.ReactNode;
+  if (typeof icon === 'object') {
+    quickStartIcon = icon;
+  } else {
+    quickStartIcon = (
+      <FallbackImg
+        className="pfext-catalog-item-icon__img--large"
+        src={icon as string}
+        alt=""
+        fallback={<RocketIcon />}
+      />
+    );
+  }
+
+  const footerComponent = React.useMemo(() => {
+    if (footer && footer.show === false) {
+      return null;
+    }
+
+    if (link) {
+      return <QuickStartTileFooterExternal link={link} quickStartId={id} />;
+    }
+
+    return <QuickStartTileFooter quickStartId={id} status={status} totalTasks={tasks?.length} />;
+  }, [footer, id, link, status, tasks?.length]);
+
+  const handleClick = (
+    e: React.FormEvent<HTMLInputElement> | React.MouseEvent<Element, MouseEvent>,
+  ) => {
+    if (ref.current?.contains(e.target as Node)) {
+      if (!link) {
+        setActiveQuickStart(id, tasks?.length);
+      }
+      onClick();
+    }
+  };
+
+  const linkProps = link
+    ? {
+        href: link.href,
+        target: '_blank',
+        rel: 'noreferrer',
+      }
+    : {};
+
+  return (
+    <div ref={ref} onClick={handleClick}>
+      <CatalogTile
+        id={id + '-catalog-tile'}
+        style={{
+          cursor: 'pointer',
+        }}
+        icon={quickStartIcon}
+        className="pfext-quick-start-tile"
+        data-testid={`qs-card-${camelize(displayName)}`}
+        featured={isActive}
+        title={
+          <QuickStartTileHeader
+            name={displayName}
+            status={status}
+            duration={durationMinutes}
+            type={type}
+            quickStartId={id}
+            action={action}
+          />
+        }
+        onKeyDown={(event) => {
+          if (event.key === 'Enter' || event.key === ' ') {
+            setActiveQuickStart(id, tasks?.length);
+            onClick();
+          }
+        }}
+        // https://github.com/patternfly/patternfly-react/issues/7039
+        {...linkProps}
+        data-test={`tile ${id}`}
+        description={
+          <QuickStartTileDescription description={description} prerequisites={prerequisites} />
+        }
+        footer={footerComponent}
+        tabIndex={0}
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore-next-line
+        isSelectableRaised
+      />
+    </div>
+  );
+};
+
+export default QuickStartTile;

package/src/catalog/QuickStartTileDescription.scss

@@ -0,0 +1,29 @@
+.pfext-quick-start-tile {
+  &-description {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+
+    p {
+      margin: 0 0 11.5px;
+    }
+  }
+
+  &-prerequisites {
+    display: inline-flex;
+    &__text {
+      margin-right: var(--pf-v5-global--spacer--sm);
+      font-size: var(--pf-v5-global--FontSize--md);
+      margin-top: 11.5px;
+      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;
+    }
+
+    &-list {
+      padding-left: 20px;
+    }
+  }
+}

package/src/catalog/QuickStartTileDescription.tsx

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import {
+  Button,
+  Popover,
+  Text,
+  TextList,
+  TextListItem,
+  TextVariants,
+} from '@patternfly/react-core';
+import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
+import QuickStartMarkdownView from '../QuickStartMarkdownView';
+import { QuickStartContext, QuickStartContextValues } from '../utils/quick-start-context';
+
+import './QuickStartTileDescription.scss';
+
+interface QuickStartTileDescriptionProps {
+  description: string;
+  prerequisites?: string[];
+}
+const QuickStartTileDescription: React.FC<QuickStartTileDescriptionProps> = ({
+  description,
+  prerequisites,
+}) => {
+  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
+  const prereqs = prerequisites?.filter((p) => p);
+  return (
+    <>
+      <QuickStartMarkdownView
+        content={description}
+        className="pfext-quick-start-tile-description"
+      />
+      {prereqs?.length > 0 && (
+        <div className="pfext-quick-start-tile-prerequisites">
+          <Text component={TextVariants.h5} className="pfext-quick-start-tile-prerequisites__text">
+            {getResource('Prerequisites ({{totalPrereqs}})').replace(
+              '{{totalPrereqs}}',
+              prereqs.length,
+            )}{' '}
+          </Text>
+          <Popover
+            aria-label={getResource('Prerequisites')}
+            headerContent={getResource('Prerequisites')}
+            className="pfext-quick-start__base"
+            bodyContent={
+              <div className="pfext-popover__base">
+                <TextList
+                  aria-label={getResource('Prerequisites')}
+                  className="pfext-quick-start-tile-prerequisites-list"
+                >
+                  {prereqs.map((prerequisite, index) => (
+                    // eslint-disable-next-line react/no-array-index-key
+                    <TextListItem key={index}>
+                      <QuickStartMarkdownView content={prerequisite} />
+                    </TextListItem>
+                  ))}
+                </TextList>
+              </div>
+            }
+          >
+            <Button
+              variant="link"
+              isInline
+              className="pfext-quick-start-tile-prerequisites__icon"
+              data-testid="qs-card-prereqs"
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+              }}
+              aria-label={getResource('Show prerequisites')}
+            >
+              <InfoCircleIcon />
+            </Button>
+          </Popover>
+        </div>
+      )}
+    </>
+  );
+};
+export default QuickStartTileDescription;