@patternfly/quickstarts 2.2.1 → 2.2.4

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;

package/src/catalog/Toolbar/QuickStartCatalogFilterItems.tsx

@@ -0,0 +1,199 @@
+import * as React from 'react';
+import {
+  SearchInput,
+  Select,
+  SelectOption,
+  SelectVariant,
+  ToolbarItem,
+} from '@patternfly/react-core';
+import { removeQueryArgument, setQueryArgument } from '@console/internal/components/utils';
+import { history } from '../../ConsoleInternal/components/utils/router';
+import { QUICKSTART_SEARCH_FILTER_KEY, QUICKSTART_STATUS_FILTER_KEY } from '../../utils/const';
+import { QuickStartContext, QuickStartContextValues } from '../../utils/quick-start-context';
+
+export const QuickStartCatalogFilterSearch = ({ searchInputText, handleTextChange, ...props }) => {
+  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
+  return (
+    <ToolbarItem className="pfext-quick-start-catalog-filter__input">
+      <SearchInput
+        placeholder={getResource('Filter by keyword...')}
+        value={searchInputText}
+        onChange={handleTextChange}
+        onClear={() => handleTextChange('')}
+        {...props}
+      />
+    </ToolbarItem>
+  );
+};
+
+export const QuickStartCatalogFilterSelect = ({
+  isDropdownOpen,
+  setIsDropdownOpen,
+  onRowfilterSelect,
+  selectedFilters,
+  dropdownItems,
+  ...props
+}) => {
+  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
+  return (
+    <ToolbarItem>
+      <Select
+        variant={SelectVariant.checkbox}
+        aria-label={getResource('Select filter')}
+        isOpen={isDropdownOpen}
+        onToggle={(isEnabled) => setIsDropdownOpen(isEnabled)}
+        placeholderText={getResource('Status')}
+        onSelect={onRowfilterSelect}
+        selections={selectedFilters}
+        {...props}
+      >
+        {dropdownItems}
+      </Select>
+    </ToolbarItem>
+  );
+};
+
+export const QuickStartCatalogFilterCount = ({ quickStartsCount }) => {
+  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
+  return (
+    <ToolbarItem
+      className="pfext-quick-start-catalog-filter__count"
+      alignment={{ default: 'alignRight' }}
+    >
+      {getResource('{{count, number}} item', quickStartsCount).replace(
+        '{{count, number}}',
+        quickStartsCount,
+      )}
+    </ToolbarItem>
+  );
+};
+
+interface QuickStartCatalogFilterSearchWrapperProps {
+  onSearchInputChange: any;
+}
+export const QuickStartCatalogFilterSearchWrapper: React.FC<QuickStartCatalogFilterSearchWrapperProps> = ({
+  onSearchInputChange = () => {},
+}) => {
+  const { useQueryParams, filter, setFilter } = React.useContext<QuickStartContextValues>(
+    QuickStartContext,
+  );
+  React.useEffect(() => {
+    //   use this effect to clear the search when a `clear all` action is performed higher up
+    const unlisten = history.listen(({ location }) => {
+      const searchParams = new URLSearchParams(location.search);
+      const searchQuery = searchParams.get(QUICKSTART_SEARCH_FILTER_KEY) || '';
+      if (searchQuery === '') {
+        setFilter('keyword', '');
+        onSearchInputChange('');
+      }
+    });
+    return () => {
+      unlisten();
+    };
+  }, [onSearchInputChange, setFilter]);
+  const handleTextChange = (val: string) => {
+    if (val.length > 0) {
+      useQueryParams && setQueryArgument(QUICKSTART_SEARCH_FILTER_KEY, val);
+    } else {
+      useQueryParams && removeQueryArgument(QUICKSTART_SEARCH_FILTER_KEY);
+    }
+    if (filter?.keyword !== val) {
+      setFilter('keyword', val);
+    }
+    onSearchInputChange(val);
+  };
+
+  return (
+    <QuickStartCatalogFilterSearch
+      searchInputText={filter?.keyword}
+      handleTextChange={handleTextChange}
+    />
+  );
+};
+
+// compare string/number arrays
+export const equalsIgnoreOrder = (a: any[], b: any[]) => {
+  if (a.length !== b.length) {
+    return false;
+  }
+  const uniqueValues = new Set([...a, ...b]);
+  for (const v of uniqueValues) {
+    const aCount = a.filter((e) => e === v).length;
+    const bCount = b.filter((e) => e === v).length;
+    if (aCount !== bCount) {
+      return false;
+    }
+  }
+  return true;
+};
+
+interface QuickStartCatalogFilterStatusWrapperProps {
+  onStatusChange: any;
+}
+export const QuickStartCatalogFilterStatusWrapper: React.FC<QuickStartCatalogFilterStatusWrapperProps> = ({
+  onStatusChange = () => {},
+}) => {
+  const { useQueryParams, filter, setFilter } = React.useContext<QuickStartContextValues>(
+    QuickStartContext,
+  );
+  React.useEffect(() => {
+    //   use this effect to clear the status when a `clear all` action is performed higher up
+    const unlisten = history.listen(({ location }) => {
+      const searchParams = new URLSearchParams(location.search);
+      const updatedStatusFilters = searchParams.get(QUICKSTART_STATUS_FILTER_KEY)?.split(',') || [];
+      if (updatedStatusFilters.length === 0) {
+        setFilter('status', []);
+        onStatusChange([]);
+      }
+    });
+    return () => {
+      unlisten();
+    };
+  });
+  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
+
+  const onRowfilterSelect = React.useCallback(
+    (e) => {
+      setIsDropdownOpen(false);
+      const selection = e.target.parentElement.getAttribute('data-key');
+      const selectedFiltersList = filter.status.statusFilters.includes(selection)
+        ? filter.status.statusFilters.filter((status) => status !== selection)
+        : [...filter.status.statusFilters, selection];
+      if (!equalsIgnoreOrder(filter.status.statusFilters, selectedFiltersList)) {
+        setFilter('status', selectedFiltersList);
+      }
+      if (selectedFiltersList.length > 0) {
+        useQueryParams && setQueryArgument('status', selectedFiltersList.join(','));
+      } else {
+        useQueryParams && removeQueryArgument(QUICKSTART_STATUS_FILTER_KEY);
+      }
+      onStatusChange(selectedFiltersList);
+    },
+    [filter.status.statusFilters, onStatusChange, setFilter, useQueryParams],
+  );
+
+  const dropdownItems = Object.entries(filter.status.statusTypes).map(([key, val]) => (
+    <SelectOption key={key} data-key={key} value={key}>
+      {val}
+    </SelectOption>
+  ));
+
+  return (
+    <QuickStartCatalogFilterSelect
+      isDropdownOpen={isDropdownOpen}
+      setIsDropdownOpen={setIsDropdownOpen}
+      onRowfilterSelect={onRowfilterSelect}
+      selectedFilters={filter.status.statusFilters}
+      dropdownItems={dropdownItems}
+    />
+  );
+};
+
+interface QuickStartCatalogFilterCountWrapperProps {
+  quickStartsCount: number;
+}
+export const QuickStartCatalogFilterCountWrapper: React.FC<QuickStartCatalogFilterCountWrapperProps> = ({
+  quickStartsCount,
+}) => {
+  return <QuickStartCatalogFilterCount quickStartsCount={quickStartsCount} />;
+};

package/src/catalog/__tests__/QuickStartCatalog.spec.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { Gallery, GalleryItem } from '@patternfly/react-core';
+import { shallow } from 'enzyme';
+import { EmptyBox } from '@console/internal/components/utils';
+import { getQuickStarts } from '../../data/test-utils';
+import { QuickStartCatalogPage } from '../../QuickStartCatalogPage';
+import QuickStartCatalog from '../QuickStartCatalog';
+
+jest.mock('@console/shared', () => {
+  const ActualShared = require.requireActual('@console/shared');
+  return {
+    ...ActualShared,
+    useQueryParams: () => new Map(),
+  };
+});
+
+describe('QuickStartCatalog', () => {
+  it('should load an emptybox if no QS exist', () => {
+    const QuickStartCatalogProps = { quickStarts: [], onClick: jest.fn() };
+    const QuickStartCatalogWrapper = shallow(<QuickStartCatalogPage {...QuickStartCatalogProps} />);
+    expect(QuickStartCatalogWrapper.find(EmptyBox).exists()).toBeTruthy();
+  });
+  it('should load a gallery if QS exist', () => {
+    const QuickStartCatalogProps = { quickStarts: getQuickStarts(), onClick: jest.fn() };
+    const QuickStartCatalogWrapper = shallow(<QuickStartCatalog {...QuickStartCatalogProps} />);
+    expect(QuickStartCatalogWrapper.find(Gallery).exists()).toBeTruthy();
+  });
+  it('should load galleryItems equal to the number of QS', () => {
+    const QuickStartCatalogProps = { quickStarts: getQuickStarts(), onClick: jest.fn() };
+    const QuickStartCatalogWrapper = shallow(<QuickStartCatalog {...QuickStartCatalogProps} />);
+    const galleryItems = QuickStartCatalogWrapper.find(GalleryItem);
+    expect(galleryItems.exists()).toBeTruthy();
+    expect(galleryItems.length).toEqual(getQuickStarts().length);
+  });
+});

package/src/catalog/__tests__/QuickStartTile.spec.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { CatalogTile } from '@patternfly/react-catalog-view-extension';
+import { shallow } from 'enzyme';
+import { getQuickStarts } from '../../data/test-utils';
+import { QuickStartStatus } from '../../utils/quick-start-types';
+import QuickStartTile from '../QuickStartTile';
+
+describe('QuickStartTile', () => {
+  const quickstarts = getQuickStarts();
+
+  it('should load proper catalog tile without featured property', () => {
+    const wrapper = shallow(
+      <QuickStartTile
+        quickStart={quickstarts[0]}
+        status={QuickStartStatus.NOT_STARTED}
+        onClick={jest.fn()}
+        isActive={false}
+      />,
+    );
+    const catalogTile = wrapper.find(CatalogTile);
+    expect(catalogTile.exists()).toBeTruthy();
+    expect(catalogTile.prop('featured')).toBe(false);
+  });
+
+  it('should load proper catalog tile with featured property', () => {
+    const wrapper = shallow(
+      <QuickStartTile
+        quickStart={quickstarts[1]}
+        status={QuickStartStatus.IN_PROGRESS}
+        onClick={jest.fn()}
+        isActive
+      />,
+    );
+    const catalogTile = wrapper.find(CatalogTile);
+    expect(catalogTile.exists()).toBeTruthy();
+    expect(catalogTile.prop('featured')).toBe(true);
+  });
+});

package/src/catalog/__tests__/QuickStartTileDescription.spec.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { Popover, Text } from '@patternfly/react-core';
+import { shallow } from 'enzyme';
+import { getQuickStarts } from '../../data/test-utils';
+import QuickStartTileDescription from '../QuickStartTileDescription';
+
+jest.mock('react', () => {
+  const ActualReact = require.requireActual('react');
+  return {
+    ...ActualReact,
+    useContext: () => jest.fn(),
+  };
+});
+
+describe('QuickStartCatalog', () => {
+  beforeEach(() => {
+    spyOn(React, 'useContext').and.returnValue({
+      activeQuickStartID: '',
+      startQuickStart: () => {},
+      restartQuickStart: () => {},
+      getResource: (key) => `quickstart~${key}`,
+    });
+  });
+
+  it('should show prerequisites only if provided', () => {
+    // this quick start does not have prereqs
+    const quickStart = getQuickStarts()[0].spec;
+    const QuickStartTileDescriptionWrapper = shallow(
+      <QuickStartTileDescription description={quickStart.description} />,
+    );
+    expect(QuickStartTileDescriptionWrapper.find(Text)).toHaveLength(0);
+  });
+
+  it('shoould render prerequisites inside a popover', () => {
+    const quickStart = getQuickStarts()[2].spec;
+    const QuickStartTileDescriptionWrapper = shallow(
+      <QuickStartTileDescription
+        description={quickStart.description}
+        prerequisites={quickStart.prerequisites}
+      />,
+    );
+    expect(QuickStartTileDescriptionWrapper.find(Popover)).toHaveLength(1);
+  });
+});

package/src/catalog/index.ts

@@ -0,0 +1,9 @@
+export { default as QuickStartCatalog } from './QuickStartCatalog';
+export { default as QuickStartCatalogFilter } from './Toolbar/QuickStartCatalogFilter';
+export { default as QuickStartTile } from './QuickStartTile';
+export { default as QuickStartTileDescription } from './QuickStartTileDescription';
+export { default as QuickStartTileFooter } from './QuickStartTileFooter';
+export { default as QuickStartTileFooterExternal } from './QuickStartTileFooterExternal';
+export { default as QuickStartTileHeader } from './QuickStartTileHeader';
+export * from './Toolbar/QuickStartCatalogFilterItems';
+export * from './Catalog';

package/src/controller/QuickStartConclusion.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { Button } from '@patternfly/react-core';
+import ArrowRightIcon from '@patternfly/react-icons/dist/js/icons/arrow-right-icon';
+import QuickStartMarkdownView from '../QuickStartMarkdownView';
+import { QuickStartContext, QuickStartContextValues } from '../utils/quick-start-context';
+import { QuickStart, QuickStartTask, QuickStartTaskStatus } from '../utils/quick-start-types';
+import TaskHeaderList from './QuickStartTaskHeaderList';
+
+type QuickStartConclusionProps = {
+  tasks: QuickStartTask[];
+  conclusion: string;
+  allTaskStatuses: QuickStartTaskStatus[];
+  nextQuickStarts?: QuickStart[];
+  onQuickStartChange: (quickStartid: string) => void;
+  onTaskSelect: (selectedTaskNumber: number) => void;
+};
+
+const QuickStartConclusion: React.FC<QuickStartConclusionProps> = ({
+  tasks,
+  conclusion,
+  allTaskStatuses,
+  nextQuickStarts,
+  onQuickStartChange,
+  onTaskSelect,
+}) => {
+  const hasFailedTask = allTaskStatuses.includes(QuickStartTaskStatus.FAILED);
+  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
+  return (
+    <>
+      <TaskHeaderList tasks={tasks} allTaskStatuses={allTaskStatuses} onTaskSelect={onTaskSelect} />
+      <QuickStartMarkdownView
+        content={
+          hasFailedTask
+            ? getResource(
+                'One or more verifications did not pass during this quick start. Revisit the tasks or the help links, and then try again.',
+              )
+            : conclusion
+        }
+      />
+      {!hasFailedTask &&
+        nextQuickStarts &&
+        nextQuickStarts.length > 0 &&
+        nextQuickStarts.map((nextQuickStart, index) => (
+          <Button
+            variant="link"
+            onClick={() => onQuickStartChange(nextQuickStart.metadata.name)}
+            isInline
+            isBlock
+            key={index}
+          >
+            {getResource('Start {{nextQSDisplayName}} quick start').replace(
+              '{{nextQSDisplayName}}',
+              nextQuickStart?.spec?.displayName,
+            )}{' '}
+            <ArrowRightIcon
+              style={{ marginLeft: 'var(--pf-global--spacer--xs)', verticalAlign: 'middle' }}
+            />
+          </Button>
+        ))}
+    </>
+  );
+};
+export default QuickStartConclusion;

package/src/controller/QuickStartContent.scss

@@ -0,0 +1,12 @@
+.pfext-quick-start-content {
+  flex: 1 1 0;
+  overflow: auto;
+  padding: var(--pf-global--spacer--lg);
+  font-size: 16px;
+
+  .pf-c-alert__description {
+    p {
+      font-size: 13px;
+    }
+  }
+}

package/src/controller/QuickStartContent.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { QuickStart, QuickStartTaskStatus } from '../utils/quick-start-types';
+import QuickStartConclusion from './QuickStartConclusion';
+import QuickStartIntroduction from './QuickStartIntroduction';
+import QuickStartTasks from './QuickStartTasks';
+
+import './QuickStartContent.scss';
+
+type QuickStartContentProps = {
+  quickStart: QuickStart;
+  nextQuickStarts?: QuickStart[];
+  taskNumber: number;
+  allTaskStatuses: QuickStartTaskStatus[];
+  onTaskSelect: (selectedTaskNumber: number) => void;
+  onTaskReview: (taskStatus: QuickStartTaskStatus) => void;
+  onQuickStartChange?: (quickStartId: string) => void;
+};
+
+const QuickStartContent = React.forwardRef<HTMLDivElement, QuickStartContentProps>(
+  (
+    {
+      quickStart,
+      nextQuickStarts = [],
+      taskNumber,
+      allTaskStatuses,
+      onTaskSelect,
+      onTaskReview,
+      onQuickStartChange,
+    },
+    ref,
+  ) => {
+    const {
+      spec: { introduction, tasks, conclusion, prerequisites },
+    } = quickStart;
+    const totalTasks = tasks.length;
+
+    return (
+      <div className="pfext-quick-start-content" ref={ref}>
+        {taskNumber === -1 && (
+          <QuickStartIntroduction
+            tasks={tasks}
+            allTaskStatuses={allTaskStatuses}
+            introduction={introduction}
+            prerequisites={prerequisites}
+            onTaskSelect={onTaskSelect}
+          />
+        )}
+        {taskNumber > -1 && taskNumber < totalTasks && (
+          <QuickStartTasks
+            tasks={tasks}
+            taskNumber={taskNumber}
+            allTaskStatuses={allTaskStatuses}
+            onTaskReview={onTaskReview}
+            onTaskSelect={onTaskSelect}
+          />
+        )}
+        {taskNumber === totalTasks && (
+          <QuickStartConclusion
+            tasks={tasks}
+            conclusion={conclusion}
+            allTaskStatuses={allTaskStatuses}
+            nextQuickStarts={nextQuickStarts}
+            onQuickStartChange={onQuickStartChange}
+            onTaskSelect={onTaskSelect}
+          />
+        )}
+      </div>
+    );
+  },
+);
+
+export default QuickStartContent;

package/src/controller/QuickStartFooter.scss

@@ -0,0 +1,13 @@
+.pfext-quick-start-footer {
+  background-color: var(--pf-global--BackgroundColor--100);   // this is an example about how we should use PF variables
+  flex: 0 0 auto;
+  padding: var(--pf-global--spacer--md) var(--pf-global--spacer--lg);
+
+  &__actionbtn {
+    margin-right: var(--pf-global--spacer--md);
+  }
+
+  &__restartbtn {
+    float: right;
+  }
+}