@patternfly/quickstarts 0.0.0

package/src/controller/QuickStartTaskReview.tsx

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { Alert, Radio } from '@patternfly/react-core';
+import { css } from '@patternfly/react-styles';
+import QuickStartMarkdownView from '../QuickStartMarkdownView';
+import { QuickStartContext, QuickStartContextValues } from '../utils/quick-start-context';
+import {
+  QuickStartTaskReview as QuickStartTaskReviewType,
+  QuickStartTaskStatus,
+} from '../utils/quick-start-types';
+
+import './QuickStartTaskReview.scss';
+
+interface QuickStartTaskReviewProps {
+  review: QuickStartTaskReviewType;
+  taskStatus: QuickStartTaskStatus;
+  onTaskReview: (status: QuickStartTaskStatus) => void;
+}
+
+const getAlertVariant = (status) => {
+  switch (status) {
+    case QuickStartTaskStatus.SUCCESS:
+      return 'success';
+    case QuickStartTaskStatus.FAILED:
+      return 'danger';
+    default:
+      return 'info';
+  }
+};
+
+const QuickStartTaskReview: React.FC<QuickStartTaskReviewProps> = ({
+  review,
+  taskStatus,
+  onTaskReview,
+}) => {
+  const { instructions, failedTaskHelp: taskHelp } = review;
+  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
+
+  const alertClassNames = css('pfext-quick-start-task-review', {
+    'pfext-quick-start-task-review--success': taskStatus === QuickStartTaskStatus.SUCCESS,
+    'pfext-quick-start-task-review--failed': taskStatus === QuickStartTaskStatus.FAILED,
+  });
+
+  const title = <span className={alertClassNames}>{getResource('Check your work')}</span>;
+
+  return (
+    <Alert
+      className="pfext-quick-start-task-review-alert"
+      variant={getAlertVariant(taskStatus)}
+      title={title}
+      isInline
+      role="alert"
+    >
+      <QuickStartMarkdownView content={instructions} />
+      <span className="pfext-quick-start-task-review__actions">
+        <Radio
+          id="review-success"
+          name="review-success"
+          data-testid="qs-drawer-check-yes"
+          label={getResource('Yes')}
+          className="pfext-quick-start-task-review__radio"
+          isChecked={taskStatus === QuickStartTaskStatus.SUCCESS}
+          onChange={() => onTaskReview(QuickStartTaskStatus.SUCCESS)}
+        />
+        <Radio
+          id="review-failed"
+          name="review-failed"
+          data-testid="qs-drawer-check-no"
+          label={getResource('No')}
+          className="pfext-quick-start-task-review__radio"
+          isChecked={taskStatus === QuickStartTaskStatus.FAILED}
+          onChange={() => onTaskReview(QuickStartTaskStatus.FAILED)}
+        />
+      </span>
+      {taskStatus === QuickStartTaskStatus.FAILED && taskHelp && (
+        <QuickStartMarkdownView content={taskHelp} exactHeight />
+      )}
+    </Alert>
+  );
+};
+
+export default QuickStartTaskReview;

package/src/controller/QuickStartTasks.scss

@@ -0,0 +1,89 @@
+.pfext-quick-start-tasks {
+  &__list {
+    button::before {
+      content: none;
+    }
+
+    li {
+      &.pf-v5-c-wizard__nav-item {
+        list-style-type: none;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        margin-bottom: var(--pf-v5-global--spacer--xs);
+      }
+    }
+    .pfext-quick-start-task__content {
+      margin-bottom: var(--pf-v5-global--spacer--md);
+    }
+    // Custom styles on PF React List rendered in custom react renderer
+    .task-pflist {
+      &-title {
+        font-size: 14px !important;
+        margin-bottom: 6px;
+      }
+      &-subtitle {
+        color: var(--pf-v5-global--Color--200);
+        font-size: 16px;
+      }
+      &-list {
+        font-size: 16px;
+        &--prereq {
+          padding-left: var(--pf-v5-global--spacer--lg);
+          li + li {
+            margin-top: 4px;
+          }
+        }
+        &--proc {
+          padding-left: 10px;
+          li + li {
+            margin-top: 16px;
+          }
+        }
+        &__item {
+          &--prereq {
+            &::marker {
+              font-size: 0.8rem;
+            }
+            .task-pflist-list__item__content {
+              position: relative;
+              left: 2px;
+            }
+          }
+          &--proc {
+            font-size: 14px;
+            .task-pflist-list__item__content {
+              position: relative;
+              left: 4px;
+            }
+          }
+          &__content {
+            .pf-v5-c-alert {
+              // add margins to match design
+              margin: var(--pf-v5-global--spacer--md) 0;
+            }
+            .pf-v5-c-alert__title {
+              // remove margins from markdown css
+              margin-top: 0;
+              margin-bottom: 0;
+              // lift PF style specificity to override markdown css
+              font-weight: var(--pf-v5-c-alert__title--FontWeight);
+              font-family: inherit;
+              line-height: inherit;
+              color: var(--pf-v5-c-alert__title--Color);
+              word-break: break-word;
+            }
+            .task-pflist-list__item__content__note {
+              background-color: var(--pf-v5-global--palette--blue-50);
+              border-color: var(--pf-v5-global--active-color--200);
+              margin: var(--pf-v5-global--spacer--md) 0;
+              &__body {
+                font-size: 14px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/controller/QuickStartTasks.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import QuickStartMarkdownView from '../QuickStartMarkdownView';
+import { QUICKSTART_TASKS_INITIAL_STATES } from '../utils/const';
+import { QuickStartContext, QuickStartContextValues } from '../utils/quick-start-context';
+import { QuickStartTask, QuickStartTaskStatus } from '../utils/quick-start-types';
+import TaskHeader from './QuickStartTaskHeader';
+import QuickStartTaskReview from './QuickStartTaskReview';
+
+import './QuickStartTasks.scss';
+
+interface QuickStartTaskProps {
+  tasks: QuickStartTask[];
+  taskNumber: number;
+  allTaskStatuses: QuickStartTaskStatus[];
+  onTaskReview: (reviewState: QuickStartTaskStatus) => void;
+  onTaskSelect: (activeQuickStartId) => void;
+}
+
+const QuickStartTasks: React.FC<QuickStartTaskProps> = ({
+  tasks,
+  taskNumber,
+  allTaskStatuses,
+  onTaskReview,
+  onTaskSelect,
+}) => {
+  const { getResource, alwaysShowTaskReview } = React.useContext<QuickStartContextValues>(
+    QuickStartContext,
+  );
+  return (
+    <div className="pfext-quick-start-tasks__list">
+      <ul>
+        {tasks
+          .filter((_, index) => allTaskStatuses[index] !== QuickStartTaskStatus.INIT)
+          .map((task, index) => {
+            const { title, description, review } = task;
+            const isActiveTask = index === taskNumber;
+            const taskStatus = allTaskStatuses[index];
+            const shouldShowTaskReview =
+              (!QUICKSTART_TASKS_INITIAL_STATES.includes(taskStatus) || alwaysShowTaskReview) &&
+              review;
+            return (
+              <React.Fragment key={title}>
+                <TaskHeader
+                  taskIndex={index + 1}
+                  title={title}
+                  size="md"
+                  subtitle={getResource('{{index, number}} of {{tasks, number}}')
+                    .replace('{{index, number}}', index + 1)
+                    .replace('{{tasks, number}}', tasks.length)}
+                  taskStatus={taskStatus}
+                  isActiveTask={isActiveTask}
+                  onTaskSelect={onTaskSelect}
+                >
+                  {isActiveTask && (
+                    <div className="pfext-quick-start-task__content">
+                      <QuickStartMarkdownView content={description} />
+                      {shouldShowTaskReview && (
+                        <QuickStartTaskReview
+                          review={review}
+                          taskStatus={taskStatus}
+                          onTaskReview={onTaskReview}
+                        />
+                      )}
+                    </div>
+                  )}
+                </TaskHeader>
+              </React.Fragment>
+            );
+          })}
+      </ul>
+    </div>
+  );
+};
+
+export default QuickStartTasks;

package/src/controller/__tests__/QuickStartConclusion.spec.tsx

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import { Button } from '@patternfly/react-core';
+import { ShallowWrapper, shallow } from 'enzyme';
+import { allQuickStarts } from '../../data/quick-start-test-data';
+import QuickStartMarkdownView from '../../QuickStartMarkdownView';
+import { QuickStartTaskStatus } from '../../utils/quick-start-types';
+import { getQuickStartByName } from '../../utils/quick-start-utils';
+import QuickStartConclusion from '../QuickStartConclusion';
+
+jest.mock('react', () => {
+  const ActualReact = require.requireActual('react');
+  return {
+    ...ActualReact,
+    useContext: () => jest.fn(),
+  };
+});
+
+const i18nNS = 'quickstart';
+
+type QuickStartConclusionProps = React.ComponentProps<typeof QuickStartConclusion>;
+let wrapper: ShallowWrapper<QuickStartConclusionProps>;
+const props: QuickStartConclusionProps = {
+  tasks: getQuickStartByName('explore-pipelines', allQuickStarts).spec.tasks,
+  allTaskStatuses: [
+    QuickStartTaskStatus.SUCCESS,
+    QuickStartTaskStatus.SUCCESS,
+    QuickStartTaskStatus.SUCCESS,
+  ],
+  conclusion: 'conclusion',
+  onTaskSelect: jest.fn(),
+  onQuickStartChange: jest.fn(),
+};
+
+describe('QuickStartConclusion', () => {
+  beforeEach(() => {
+    spyOn(React, 'useContext').and.returnValue({
+      activeQuickStartID: '',
+      startQuickStart: () => {},
+      restartQuickStart: () => {},
+      getResource: (key) => `quickstart~${key}`,
+    });
+    wrapper = shallow(<QuickStartConclusion {...props} />);
+  });
+
+  it('should render conclusion if there are no failed tasks', () => {
+    expect(
+      wrapper
+        .find(QuickStartMarkdownView)
+        .first()
+        .props().content,
+    ).toEqual('conclusion');
+  });
+
+  it('should render link for next quick start if nextQuickStart prop is available and there are no failed tasks', () => {
+    wrapper = shallow(
+      <QuickStartConclusion
+        {...props}
+        nextQuickStarts={[getQuickStartByName('explore-pipelines', allQuickStarts)]}
+      />,
+    );
+    expect(
+      wrapper
+        .find(Button)
+        .at(0)
+        .props().children[0],
+    ).toEqual(`${i18nNS}~Start Installing the Pipelines Operator quick start`);
+  });
+
+  it('should not render link for next quick start if nextQuickStart props is not available', () => {
+    expect(wrapper.find(Button).length).toBe(0);
+  });
+
+  it('should not render conclusion, link for next quick start and should render message for retrying if there are failed tasks', () => {
+    wrapper = shallow(
+      <QuickStartConclusion
+        {...props}
+        nextQuickStart={getQuickStartByName('explore-pipelines', allQuickStarts)}
+        allTaskStatuses={[
+          QuickStartTaskStatus.FAILED,
+          QuickStartTaskStatus.SUCCESS,
+          QuickStartTaskStatus.SUCCESS,
+        ]}
+      />,
+    );
+    expect(
+      wrapper
+        .find(QuickStartMarkdownView)
+        .first()
+        .props().content,
+    ).toEqual(
+      `${i18nNS}~One or more verifications did not pass during this quick start. Revisit the tasks or the help links, and then try again.`,
+    );
+    expect(wrapper.find(Button).length).toBe(0);
+  });
+});

package/src/controller/__tests__/QuickStartContent.spec.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { ShallowWrapper, shallow } from 'enzyme';
+import { allQuickStarts } from '../../data/quick-start-test-data';
+import { QuickStartTaskStatus } from '../../utils/quick-start-types';
+import { getQuickStartByName } from '../../utils/quick-start-utils';
+import QuickStartConclusion from '../QuickStartConclusion';
+import QuickStartContent from '../QuickStartContent';
+import QuickStartIntroduction from '../QuickStartIntroduction';
+import QuickStartTasks from '../QuickStartTasks';
+
+type QuickStartContentProps = React.ComponentProps<typeof QuickStartContent>;
+
+let wrapper: ShallowWrapper<QuickStartContentProps>;
+
+const props: QuickStartContentProps = {
+  quickStart: getQuickStartByName('explore-serverless', allQuickStarts),
+  allTaskStatuses: [
+    QuickStartTaskStatus.INIT,
+    QuickStartTaskStatus.INIT,
+    QuickStartTaskStatus.INIT,
+  ],
+  taskNumber: -1,
+  onTaskReview: jest.fn(),
+  onTaskSelect: jest.fn(),
+  onQuickStartChange: jest.fn(),
+};
+
+describe('QuickStartContent', () => {
+  beforeEach(() => {
+    wrapper = shallow(<QuickStartContent {...props} />);
+  });
+
+  it('should render QuickStartIntroduction when the tour status is Not Started', () => {
+    expect(wrapper.find(QuickStartIntroduction).length).toBe(1);
+    expect(wrapper.find(QuickStartTasks).length).toBe(0);
+    expect(wrapper.find(QuickStartConclusion).length).toBe(0);
+  });
+
+  it('should render QuickStartTasks when the tour is In Progress', () => {
+    wrapper = shallow(<QuickStartContent {...props} taskNumber={1} />);
+    expect(wrapper.find(QuickStartIntroduction).length).toBe(0);
+    expect(wrapper.find(QuickStartTasks).length).toBe(1);
+    expect(wrapper.find(QuickStartConclusion).length).toBe(0);
+  });
+
+  it('should render QuickStartConclusion when the tour is Complete', () => {
+    wrapper = shallow(<QuickStartContent {...props} taskNumber={2} />);
+    expect(wrapper.find(QuickStartIntroduction).length).toBe(0);
+    expect(wrapper.find(QuickStartTasks).length).toBe(0);
+    expect(wrapper.find(QuickStartConclusion).length).toBe(1);
+  });
+});

package/src/controller/__tests__/QuickStartFooter.spec.tsx

@@ -0,0 +1,148 @@
+import * as React from 'react';
+import { Button } from '@patternfly/react-core';
+import { shallow } from 'enzyme';
+import { QuickStartStatus } from '../../utils/quick-start-types';
+import QuickStartFooter from '../QuickStartFooter';
+
+jest.mock('react', () => {
+  const ActualReact = require.requireActual('react');
+  return {
+    ...ActualReact,
+    useContext: () => jest.fn(),
+  };
+});
+
+describe('QuickStartFooter', () => {
+  type QuickStartFooterProps = React.ComponentProps<typeof QuickStartFooter>;
+  let quickStartFooterProps: QuickStartFooterProps;
+  beforeEach(() => {
+    spyOn(React, 'useContext').and.returnValue({
+      activeQuickStartID: '',
+      startQuickStart: () => {},
+      restartQuickStart: () => {},
+      getResource: (key) => `quickstart~${key}`,
+    });
+  });
+
+  it('should load Start button for not started tours', () => {
+    quickStartFooterProps = {
+      status: QuickStartStatus.NOT_STARTED,
+      footerClass: 'test',
+      quickStartId: 'test-quickstart',
+      onNext: () => null,
+      onBack: () => null,
+      totalTasks: 4,
+      taskNumber: -1,
+    };
+
+    const quickStartFooterWrapper = shallow(<QuickStartFooter {...quickStartFooterProps} />);
+    const footerButtons = quickStartFooterWrapper.find(Button);
+    expect(footerButtons.exists()).toBeTruthy();
+    expect(footerButtons.length).toEqual(1);
+    expect(
+      footerButtons
+        .at(0)
+        .childAt(0)
+        .text(),
+    ).toBe('quickstart~Start');
+  });
+
+  it('should load Continue and Restart buttons for in progress tours at into page', () => {
+    quickStartFooterProps = {
+      status: QuickStartStatus.IN_PROGRESS,
+      footerClass: 'test',
+      quickStartId: 'test-quickstart',
+      onNext: () => null,
+      onBack: () => null,
+      totalTasks: 4,
+      taskNumber: -1,
+    };
+
+    const quickStartFooterWrapper = shallow(<QuickStartFooter {...quickStartFooterProps} />);
+    const footerButtons = quickStartFooterWrapper.find(Button);
+    expect(footerButtons.exists()).toBeTruthy();
+    expect(footerButtons.length).toEqual(2);
+    expect(
+      footerButtons
+        .at(0)
+        .childAt(0)
+        .text(),
+    ).toBe('quickstart~Continue');
+    expect(
+      footerButtons
+        .at(1)
+        .childAt(0)
+        .text(),
+    ).toBe('quickstart~Restart');
+  });
+
+  it('should load Next and Back buttons, and Restart link for in progress tours in task page', () => {
+    quickStartFooterProps = {
+      status: QuickStartStatus.IN_PROGRESS,
+      footerClass: 'test',
+      quickStartId: 'test-quickstart',
+      onNext: () => null,
+      onBack: () => null,
+      totalTasks: 4,
+      taskNumber: 2,
+    };
+
+    const quickStartFooterWrapper = shallow(<QuickStartFooter {...quickStartFooterProps} />);
+    const footerButtons = quickStartFooterWrapper.find(Button);
+    expect(footerButtons.exists()).toBeTruthy();
+    expect(footerButtons.length).toEqual(3);
+    expect(
+      footerButtons
+        .at(0)
+        .childAt(0)
+        .text(),
+    ).toBe('quickstart~Next');
+    expect(
+      footerButtons
+        .at(1)
+        .childAt(0)
+        .text(),
+    ).toBe('quickstart~Back');
+    expect(
+      footerButtons
+        .at(2)
+        .childAt(0)
+        .text(),
+    ).toBe('quickstart~Restart');
+  });
+
+  it('should load Close, Back and Restart buttons for completed tours in conclusion page', () => {
+    quickStartFooterProps = {
+      status: QuickStartStatus.COMPLETE,
+      footerClass: 'test',
+      quickStartId: 'test-quickstart',
+      onNext: () => null,
+      onBack: () => null,
+      totalTasks: 4,
+      taskNumber: 4,
+    };
+
+    const quickStartFooterWrapper = shallow(<QuickStartFooter {...quickStartFooterProps} />);
+    const footerButtons = quickStartFooterWrapper.find(Button);
+    expect(footerButtons.exists()).toBeTruthy();
+    expect(footerButtons.length).toEqual(3);
+    expect(
+      footerButtons
+        .at(0)
+        .childAt(0)
+        .text(),
+    ).toBe('quickstart~Close');
+    expect(
+      footerButtons
+        .at(1)
+        .childAt(0)
+        .text(),
+    ).toBe('quickstart~Back');
+    expect(
+      footerButtons
+        .at(2)
+        .childAt(0)
+        .text(),
+    ).toBe('quickstart~Restart');
+  });
+});

package/src/controller/__tests__/QuickStartTaskHeader.spec.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { Title, WizardNavItem } from '@patternfly/react-core';
+import { ShallowWrapper, shallow } from 'enzyme';
+import { QuickStartTaskStatus } from '../../utils/quick-start-types';
+import QuickStartTaskHeader from '../QuickStartTaskHeader';
+
+type QuickStartTaskHeaderProps = React.ComponentProps<typeof QuickStartTaskHeader>;
+let wrapper: ShallowWrapper<QuickStartTaskHeaderProps>;
+const props: QuickStartTaskHeaderProps = {
+  title: 'title',
+  taskIndex: 1,
+  subtitle: 'subtitle',
+  taskStatus: QuickStartTaskStatus.INIT,
+  size: 'lg',
+  isActiveTask: true,
+  onTaskSelect: jest.fn(),
+};
+
+describe('QuickStartTaskHeader', () => {
+  beforeEach(() => {
+    // DOMPurify.addHook = jest.fn();
+    wrapper = shallow(<QuickStartTaskHeader {...props} />);
+  });
+
+  it('should render subtitle for active task', () => {
+    expect(wrapper.find(WizardNavItem).dive().find(Title).length).toBe(1);
+    expect(
+      wrapper.find(WizardNavItem).dive().find('[data-test-id="quick-start-task-subtitle"]').props()
+        .children,
+    ).toEqual([' ', props.subtitle]);
+  });
+  it('should not render subtitle if task is not active', () => {
+    wrapper = shallow(<QuickStartTaskHeader {...props} isActiveTask={false} />);
+    expect(wrapper.find(WizardNavItem).dive().find(Title).length).toBe(1);
+    expect(
+      wrapper
+        .find(WizardNavItem)
+        .dive()
+        .find('[data-test-id="quick-start-task-subtitle"]')
+        .exists(),
+    ).toBe(false);
+  });
+});

package/src/controller/__tests__/QuickStartTaskReview.spec.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { Alert } from '@patternfly/react-core';
+import { ShallowWrapper, shallow } from 'enzyme';
+import { allQuickStarts } from '../../data/quick-start-test-data';
+import QuickStartMarkdownView from '../../QuickStartMarkdownView';
+import { QuickStartTaskStatus } from '../../utils/quick-start-types';
+import { getQuickStartByName } from '../../utils/quick-start-utils';
+import QuickStartTaskReview from '../QuickStartTaskReview';
+
+type QuickStartTaskReviewProps = React.ComponentProps<typeof QuickStartTaskReview>;
+let wrapper: ShallowWrapper<QuickStartTaskReviewProps>;
+const props: QuickStartTaskReviewProps = {
+  review: getQuickStartByName('explore-serverless', allQuickStarts).spec.tasks[0].review,
+  taskStatus: QuickStartTaskStatus.REVIEW,
+  onTaskReview: jest.fn(),
+};
+
+describe('QuickStartTaskReview', () => {
+  it('should render alert with info variant when task status is review', () => {
+    wrapper = shallow(<QuickStartTaskReview {...props} />);
+    expect(wrapper.find(Alert).props().variant).toBe('info');
+  });
+
+  it('should render alert with success variant when task status is success', () => {
+    props.taskStatus = QuickStartTaskStatus.SUCCESS;
+    wrapper = shallow(<QuickStartTaskReview {...props} />);
+    expect(wrapper.find(Alert).props().variant).toBe('success');
+  });
+
+  it('should render alert with danger variant when task status is failed', () => {
+    props.taskStatus = QuickStartTaskStatus.FAILED;
+    wrapper = shallow(<QuickStartTaskReview {...props} />);
+    expect(wrapper.find(Alert).props().variant).toBe('danger');
+  });
+
+  it('should render task help in markdown when task status is failed', () => {
+    wrapper = shallow(<QuickStartTaskReview {...props} />);
+    expect(
+      wrapper
+        .find(QuickStartMarkdownView)
+        .at(1)
+        .props().content,
+    ).toEqual(props.review.failedTaskHelp);
+  });
+});