@patternfly/quickstarts 2.2.2 → 2.3.0

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;

package/src/catalog/QuickStartTileHeader.scss

@@ -0,0 +1,12 @@
+.pfext-quick-start-tile-header {
+  &__status {
+    margin: var(--pf-global--spacer--sm) 0;
+  }
+  &--margin {
+    margin-right: var(--pf-global--spacer--sm);
+    margin-bottom: var(--pf-global--spacer--sm);
+  }
+  & .pf-c-badge:not(:last-of-type) {
+    margin-right: var(--pf-global--spacer--sm);
+  }
+}

package/src/catalog/QuickStartTileHeader.tsx

@@ -0,0 +1,77 @@
+import './QuickStartTileHeader.scss';
+import * as React from 'react';
+import { Label, Title } from '@patternfly/react-core';
+import OutlinedClockIcon from '@patternfly/react-icons/dist/js/icons/outlined-clock-icon';
+import { StatusIcon } from '@console/shared';
+import { QuickStartContext, QuickStartContextValues } from '../utils/quick-start-context';
+import { QuickStartStatus, QuickStartType } from '../utils/quick-start-types';
+
+type QuickStartTileHeaderProps = {
+  status: string;
+  duration: number;
+  name: string;
+  type?: QuickStartType;
+  quickStartId?: string;
+};
+
+const statusColorMap = {
+  [QuickStartStatus.COMPLETE]: 'green',
+  [QuickStartStatus.IN_PROGRESS]: 'purple',
+  [QuickStartStatus.NOT_STARTED]: 'grey',
+};
+
+const QuickStartTileHeader: React.FC<QuickStartTileHeaderProps> = ({
+  status,
+  duration,
+  name,
+  type,
+  quickStartId,
+}) => {
+  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
+
+  const statusLocaleMap = {
+    [QuickStartStatus.COMPLETE]: getResource('Complete'),
+    [QuickStartStatus.IN_PROGRESS]: getResource('In progress'),
+    [QuickStartStatus.NOT_STARTED]: getResource('Not started'),
+  };
+
+  return (
+    <div className="pfext-quick-start-tile-header">
+      <Title headingLevel="h3" data-test="title" id={quickStartId}>
+        {name}
+      </Title>
+      <div className="pfext-quick-start-tile-header__status">
+        {type && (
+          <Label className="pfext-quick-start-tile-header--margin" color={type.color}>
+            {type.text}
+          </Label>
+        )}
+        {duration && (
+          <Label
+            variant="outline"
+            data-test="duration"
+            icon={<OutlinedClockIcon />}
+            className="pfext-quick-start-tile-header--margin"
+          >
+            {getResource('{{duration, number}} minutes', duration).replace(
+              '{{duration, number}}',
+              duration,
+            )}
+          </Label>
+        )}
+        {status !== QuickStartStatus.NOT_STARTED && (
+          <Label
+            variant="outline"
+            color={statusColorMap[status]}
+            icon={<StatusIcon status={status} />}
+            data-test="status"
+          >
+            {statusLocaleMap[status]}
+          </Label>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default QuickStartTileHeader;

package/src/catalog/Toolbar/QuickStartCatalogFilter.scss

@@ -0,0 +1,25 @@
+.pfext-quick-start-catalog-filter {
+  &__input {
+    flex-grow: 1;
+    max-width: 500px;
+  }
+
+  &__count {
+    font-weight: var(--pf-global--FontWeight--bold);
+  }
+}
+
+.pf-c-toolbar.pf-m-page-insets.pfext-quick-start-catalog-filter__flex {
+  --pf-c-toolbar--PaddingBottom: var(--pf-global--spacer--sm);
+  --pf-c-toolbar--PaddingTop: var(--pf-global--spacer--sm);
+  --pf-c-toolbar--RowGap: 0;
+  font-size: 14px;
+
+  .pf-c-select {
+    --pf-c-select__toggle--FontSize: 14px;
+  }
+
+  .pf-c-check {
+    --pf-c-check__label--FontSize: 14px;
+  }
+}

package/src/catalog/Toolbar/QuickStartCatalogFilter.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { Toolbar, ToolbarContent, ToolbarProps } from '@patternfly/react-core';
+import {
+  QuickStartCatalogFilterCountWrapper,
+  QuickStartCatalogFilterSearchWrapper,
+  QuickStartCatalogFilterStatusWrapper,
+} from './QuickStartCatalogFilterItems';
+
+import './QuickStartCatalogFilter.scss';
+
+interface QuickStartCatalogFilterProps extends Omit<ToolbarProps, 'ref'> {
+  quickStartsCount: number;
+  onSearchInputChange: any;
+  onStatusChange: any;
+}
+
+const QuickStartCatalogFilter: React.FC<QuickStartCatalogFilterProps> = ({
+  quickStartsCount,
+  onSearchInputChange = () => {},
+  onStatusChange = () => {},
+  ...props
+}) => {
+  return (
+    <Toolbar usePageInsets className="pfext-quick-start-catalog-filter__flex" {...props}>
+      <ToolbarContent>
+        <QuickStartCatalogFilterSearchWrapper onSearchInputChange={onSearchInputChange} />
+        <QuickStartCatalogFilterStatusWrapper onStatusChange={onStatusChange} />
+        <QuickStartCatalogFilterCountWrapper quickStartsCount={quickStartsCount} />
+      </ToolbarContent>
+    </Toolbar>
+  );
+};
+
+export default QuickStartCatalogFilter;