@patternfly/quickstarts 2.2.1 → 2.2.4

package/src/QuickStartPanelContent.scss

@@ -0,0 +1,46 @@
+.pfext-quick-start-panel-content {
+  &__header {
+    position: sticky;
+    top: 0px;
+    background: inherit;
+    z-index: var(--pf-global--ZIndex--xs);
+    &__shadow {
+      box-shadow: var(--pf-global--BoxShadow--sm-bottom);
+    }
+    &--blue-white {
+      background-color: var(--pf-global--palette--blue-400);
+      .pfext-quick-start-panel-content__title {
+        color: var(--pf-global--Color--light-100);
+      }
+      .pfext-quick-start-panel-content__duration {
+        color: var(--pf-global--Color--light-200);
+      }
+      .pfext-quick-start-panel-content__close-button {
+        button {
+          color: var(--pf-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-global--FontSize--md);
+    font-weight: 400;
+    line-height: 1;
+    color: #9c9c9c;
+  }
+  &__footer {
+    &__shadow {
+      box-shadow: var(--pf-global--BoxShadow--sm-top);
+    }
+  }
+}

package/src/QuickStartPanelContent.tsx

@@ -0,0 +1,153 @@
+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';
+
+type HandleClose = () => void;
+
+type 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 { 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, 10) === -1) {
+      return 'intro';
+    }
+    if (Number.parseInt(taskNumber as string, 10) === tasks) {
+      return 'conclusion';
+    }
+    return Number.parseInt(taskNumber as string, 10) + 1;
+  };
+
+  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">
+            <Title
+              headingLevel="h1"
+              size="xl"
+              className="pfext-quick-start-panel-content__name"
+              style={{ marginRight: 'var(--pf-global--spacer--md)' }}
+            >
+              {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 type 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 type 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 type 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-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';
+
+type 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,105 @@
+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 from './QuickStartTileHeader';
+
+import './QuickStartTile.scss';
+
+type QuickStartTileProps = {
+  quickStart: QuickStart;
+  status: QuickStartStatus;
+  isActive: boolean;
+  onClick?: () => void;
+};
+
+const QuickStartTile: React.FC<QuickStartTileProps> = ({
+  quickStart,
+  status,
+  isActive,
+  onClick = () => {},
+}) => {
+  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 =
+    footer && footer.show === false ? null : link ? (
+      <QuickStartTileFooterExternal link={link} quickStartId={id} />
+    ) : (
+      <QuickStartTileFooter quickStartId={id} status={status} totalTasks={tasks?.length} />
+    );
+
+  const handleClick = (e: React.SyntheticEvent<HTMLElement, Event>) => {
+    if (ref.current?.contains(e.target as Node)) {
+      if (link) {
+        window.open(link.href);
+      } else {
+        setActiveQuickStart(id, tasks?.length);
+      }
+      onClick();
+    }
+  };
+
+  return (
+    <div ref={ref}>
+      <CatalogTile
+        // @ts-ignore
+        component="div"
+        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}
+          />
+        }
+        onClick={handleClick}
+        // https://github.com/patternfly/patternfly-react/issues/7039
+        href="#"
+        data-test={`tile ${id}`}
+        description={
+          <QuickStartTileDescription description={description} prerequisites={prerequisites} />
+        }
+        footer={footerComponent}
+      />
+    </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-global--spacer--sm);
+      font-size: var(--pf-global--FontSize--md);
+      margin-top: 11.5px;
+      margin-bottom: 11.5px;
+      font-family: var(--pf-global--FontFamily--heading--sans-serif);
+      font-weight: var(--pf-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';
+
+type 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;

package/src/catalog/QuickStartTileFooter.tsx

@@ -0,0 +1,101 @@
+import * as React from 'react';
+import { Button, Flex, FlexItem } from '@patternfly/react-core';
+import { QuickStartContext, QuickStartContextValues } from '../utils/quick-start-context';
+import { QuickStartStatus } from '../utils/quick-start-types';
+
+type QuickStartTileFooterProps = {
+  quickStartId: string;
+  status: string;
+  totalTasks?: number;
+};
+
+const QuickStartTileFooter: React.FC<QuickStartTileFooterProps> = ({
+  quickStartId,
+  status,
+  totalTasks,
+}) => {
+  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
+  const { activeQuickStartID, startQuickStart, restartQuickStart } = React.useContext<
+    QuickStartContextValues
+  >(QuickStartContext);
+
+  const start = React.useCallback(
+    (e: React.SyntheticEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      startQuickStart(quickStartId, totalTasks);
+    },
+    [quickStartId, startQuickStart, totalTasks],
+  );
+
+  const restart = React.useCallback(
+    (e: React.SyntheticEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      restartQuickStart(quickStartId, totalTasks);
+    },
+    [quickStartId, restartQuickStart, totalTasks],
+  );
+
+  return (
+    <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
+      {status === QuickStartStatus.NOT_STARTED && (
+        <FlexItem>
+          <Button
+            onClick={start}
+            variant="link"
+            isInline
+            data-testid="qs-card-notStarted-start"
+            id={`${quickStartId}-start`}
+            aria-labelledby={`${quickStartId}-start ${quickStartId}`}
+          >
+            {getResource('Start')}
+          </Button>
+        </FlexItem>
+      )}
+      {status === QuickStartStatus.IN_PROGRESS && activeQuickStartID !== quickStartId && (
+        <FlexItem>
+          <Button
+            variant="link"
+            isInline
+            data-testid="qs-card-inProgress-resume"
+            id={`${quickStartId}-continue`}
+            aria-labelledby={`${quickStartId}-continue ${quickStartId}`}
+          >
+            {getResource('Continue')}
+          </Button>
+        </FlexItem>
+      )}
+      {status === QuickStartStatus.COMPLETE && (
+        <FlexItem>
+          <Button
+            onClick={restart}
+            variant="link"
+            isInline
+            data-testid="qs-card-complete-restart"
+            id={`${quickStartId}-restart`}
+            aria-labelledby={`${quickStartId}-restart ${quickStartId}`}
+          >
+            {getResource('Restart')}
+          </Button>
+        </FlexItem>
+      )}
+      {status === QuickStartStatus.IN_PROGRESS && (
+        <FlexItem>
+          <Button
+            onClick={restart}
+            variant="link"
+            isInline
+            data-testid="qs-card-inProgress-restart"
+            id={`${quickStartId}-restart`}
+            aria-labelledby={`${quickStartId}-restart ${quickStartId}`}
+          >
+            {getResource('Restart')}
+          </Button>
+        </FlexItem>
+      )}
+    </Flex>
+  );
+};
+
+export default QuickStartTileFooter;

package/src/catalog/QuickStartTileFooterExternal.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { Button, Flex, FlexItem } from '@patternfly/react-core';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
+import { QuickStartExternal } from '../utils/quick-start-types';
+
+type QuickStartTileFooterProps = {
+  link: QuickStartExternal;
+  quickStartId?: string;
+};
+
+const QuickStartTileFooterExternal: React.FC<QuickStartTileFooterProps> = ({
+  link,
+  quickStartId,
+}) => {
+  const { href, text } = link;
+
+  return (
+    <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
+      <FlexItem>
+        <Button
+          component="a"
+          href={href}
+          target="_blank"
+          rel="noopener noreferrer"
+          variant="link"
+          aria-label={`Open documentation in new window`}
+          isInline
+          icon={<ExternalLinkAltIcon />}
+          iconPosition="right"
+          id={quickStartId}
+          aria-labelledby={`${quickStartId}-external ${quickStartId}`}
+        >
+          {text || href}
+        </Button>
+      </FlexItem>
+    </Flex>
+  );
+};
+
+export default QuickStartTileFooterExternal;