@patternfly/quickstarts 2.2.3 → 2.2.4

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;
+  }
+}

package/src/controller/QuickStartFooter.tsx

@@ -0,0 +1,128 @@
+import * as React from 'react';
+import { Button } from '@patternfly/react-core';
+import { QuickStartContext, QuickStartContextValues } from '../utils/quick-start-context';
+import { QuickStartStatus } from '../utils/quick-start-types';
+import { camelize } from '../utils/quick-start-utils';
+
+import './QuickStartFooter.scss';
+
+export type QuickStartFooterProps = {
+  status: QuickStartStatus;
+  footerClass: string;
+  taskNumber: number;
+  totalTasks: number;
+  onNext: () => void;
+  onBack: () => void;
+  quickStartId: string;
+};
+
+const QuickStartFooter: React.FC<QuickStartFooterProps> = ({
+  status,
+  taskNumber,
+  totalTasks,
+  onNext,
+  onBack,
+  footerClass,
+  quickStartId,
+}) => {
+  const { restartQuickStart, getResource } = React.useContext<QuickStartContextValues>(
+    QuickStartContext,
+  );
+
+  const PrimaryButtonText = React.useMemo(() => {
+    return {
+      START: getResource('Start'),
+      CONTINUE: getResource('Continue'),
+      NEXT: getResource('Next'),
+      CLOSE: getResource('Close'),
+    };
+  }, [getResource]);
+
+  const SecondaryButtonText = React.useMemo(() => {
+    return {
+      BACK: getResource('Back'),
+      RESTART: getResource('Restart'),
+    };
+  }, [getResource]);
+
+  const onRestart = React.useCallback(
+    (e: React.SyntheticEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      restartQuickStart(quickStartId, totalTasks);
+    },
+    [quickStartId, restartQuickStart, totalTasks],
+  );
+
+  const getPrimaryButtonText = React.useMemo(() => {
+    if (status === QuickStartStatus.NOT_STARTED) {
+      return PrimaryButtonText.START;
+    }
+
+    if (taskNumber === totalTasks) {
+      return PrimaryButtonText.CLOSE;
+    }
+
+    if (taskNumber > -1 && taskNumber < totalTasks) {
+      return PrimaryButtonText.NEXT;
+    }
+
+    return PrimaryButtonText.CONTINUE;
+  }, [taskNumber, totalTasks, PrimaryButtonText, status]);
+
+  const getPrimaryButton = React.useMemo(
+    () => (
+      <Button
+        variant="primary"
+        className="pfext-quick-start-footer__actionbtn"
+        onClick={onNext}
+        data-testid={`qs-drawer-${camelize(getPrimaryButtonText)}`}
+        data-test={`${getPrimaryButtonText} button`}
+      >
+        {getPrimaryButtonText}
+      </Button>
+    ),
+    [getPrimaryButtonText, onNext],
+  );
+
+  const getSecondaryButton = React.useMemo(
+    () =>
+      taskNumber === -1 && status !== QuickStartStatus.NOT_STARTED ? (
+        <Button variant="secondary" onClick={onRestart} data-testid="qs-drawer-restart">
+          {SecondaryButtonText.RESTART}
+        </Button>
+      ) : (
+        taskNumber > -1 && (
+          <Button variant="secondary" onClick={onBack} data-testid="qs-drawer-back">
+            {SecondaryButtonText.BACK}
+          </Button>
+        )
+      ),
+    [onRestart, onBack, SecondaryButtonText, status, taskNumber],
+  );
+
+  const getSideNoteAction = React.useMemo(
+    () =>
+      taskNumber !== -1 && (
+        <Button
+          variant="link"
+          className="pfext-quick-start-footer__restartbtn"
+          onClick={onRestart}
+          data-testid="qs-drawer-side-note-action"
+        >
+          {SecondaryButtonText.RESTART}
+        </Button>
+      ),
+    [taskNumber, onRestart, SecondaryButtonText.RESTART],
+  );
+
+  return (
+    <div className={`pfext-quick-start-footer ${footerClass}`}>
+      {getPrimaryButton}
+      {getSecondaryButton}
+      {getSideNoteAction}
+    </div>
+  );
+};
+
+export default QuickStartFooter;

package/src/controller/QuickStartIntroduction.scss

@@ -0,0 +1,35 @@
+.pfext-quick-start-intro {
+  &__prereq {
+    margin-bottom: var(--pf-global--spacer--md);
+    .pf-c-expandable-section__content {
+      margin-top: var(--pf-global--spacer--sm);
+    }
+    .pf-c-expandable-section__toggle {
+      padding-top: 0;
+      padding-bottom: 0;
+      &-text {
+        margin-left: var(--pf-global--spacer--sm);
+      }
+      &-icon {
+        color: var(--pf-c-expandable-section__toggle--Color);
+        &:focus, &:hover {
+          --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--focus--Color);
+        }
+      }
+    }
+
+    &-list {
+      padding-left: 20px;
+      &__item {
+        &::marker {
+          font-size: 0.8rem;
+        }
+        &-content {
+          position: relative;
+          left: 2px;
+        }
+      }
+    }
+
+  }
+}