@patternfly/quickstarts 2.2.1 → 2.2.4

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';
+
+type 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,56 @@
+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);
+  });
+});

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

@@ -0,0 +1,81 @@
+import * as React from 'react';
+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 TaskHeader from '../QuickStartTaskHeader';
+import QuickStartTaskReview from '../QuickStartTaskReview';
+import QuickStartTask from '../QuickStartTasks';
+
+jest.mock('react', () => {
+  const ActualReact = require.requireActual('react');
+  return {
+    ...ActualReact,
+    useContext: () => jest.fn(),
+  };
+});
+
+type QuickStartTaskProps = React.ComponentProps<typeof QuickStartTask>;
+let wrapper: ShallowWrapper<QuickStartTaskProps>;
+const props: QuickStartTaskProps = {
+  tasks: getQuickStartByName('monitor-sampleapp', allQuickStarts).spec.tasks,
+  allTaskStatuses: [
+    QuickStartTaskStatus.SUCCESS,
+    QuickStartTaskStatus.INIT,
+    QuickStartTaskStatus.INIT,
+  ],
+  taskNumber: 1,
+  onTaskReview: jest.fn(),
+  onTaskSelect: jest.fn(),
+};
+
+describe('QuickStartTasks', () => {
+  beforeEach(() => {
+    spyOn(React, 'useContext').and.returnValue({
+      activeQuickStartID: '',
+      startQuickStart: () => {},
+      restartQuickStart: () => {},
+      getResource: (key) => `quickstart~${key}`,
+    });
+    wrapper = shallow(<QuickStartTask {...props} />);
+  });
+
+  it('should render correct number of tasks based on currentTaskIndex', () => {
+    expect(wrapper.find(TaskHeader).length).toBe(1);
+  });
+
+  it('should render SyncMarkdownView with description if a task is active', () => {
+    wrapper = shallow(
+      <QuickStartTask
+        {...props}
+        allTaskStatuses={[
+          QuickStartTaskStatus.SUCCESS,
+          QuickStartTaskStatus.FAILED,
+          QuickStartTaskStatus.VISITED,
+        ]}
+        taskNumber={2}
+      />,
+    );
+    expect(
+      wrapper
+        .find(QuickStartMarkdownView)
+        .at(0)
+        .props().content,
+    ).toEqual(props.tasks[2].description);
+  });
+
+  it('should render review when task is active and in Review state', () => {
+    wrapper = shallow(
+      <QuickStartTask
+        {...props}
+        allTaskStatuses={[
+          QuickStartTaskStatus.SUCCESS,
+          QuickStartTaskStatus.REVIEW,
+          QuickStartTaskStatus.INIT,
+        ]}
+      />,
+    );
+    expect(wrapper.find(QuickStartTaskReview).exists()).toBe(true);
+  });
+});

package/src/data/mocks/json/explore-pipeline-quickstart.ts

@@ -0,0 +1,66 @@
+import { QuickStart } from '@patternfly/quickstarts';
+import { pipelineIcon } from './tour-icons';
+
+export const explorePipelinesQuickStart: QuickStart = {
+  apiVersion: 'console.openshift.io/v1',
+  kind: 'QuickStarts',
+  metadata: {
+    name: 'explore-pipelines',
+  },
+  spec: {
+    version: 4.7,
+    displayName: `Installing the Pipelines Operator`,
+    durationMinutes: 10,
+    icon: pipelineIcon,
+    description: `Install the OpenShift® Pipelines Operator to build Pipelines using Tekton.`,
+    prerequisites: [''],
+    introduction: `OpenShift® Pipelines is a cloud-native, continuous integration and continuous delivery (CI/CD) solution based on Kubernetes resources. It uses Tekton building blocks to automate deployments across multiple Kubernetes distributions by abstracting away the underlying implementation details.
+* OpenShift Pipelines is a serverless CI/CD system that runs pipelines with all the required dependencies in isolated containers.
+* They are designed for decentralized teams that work on a microservice-based architecture.
+* They are defined using standard Custom Resource Definitions making them extensible and easy to integrate with the existing Kubernetes tools. This enables you to scale on-demand.
+* You can use OpenShift Pipelines to build images with Kubernetes tools such as Source-to-Image (S2I), Buildah, Buildpacks, and Kaniko that are portable across any Kubernetes platform.
+* You can use the Developer perspective to create and manage pipelines and view logs in your namespaces.
+
+To start using Pipelines, install the OpenShift® Pipelines Operator on your cluster.`,
+    tasks: [
+      {
+        title: `Installing the OpenShift Pipelines Operator`,
+        description: `### To install the OpenShift Pipelines Operator:
+
+1. From the **Administrator** perspective in the console navigation panel, click **Operators > OperatorHub**.
+2. In the **Filter by keyword** field, type \`OpenShift Pipelines Operator\`.
+3. If the tile has an Installed label, the Operator is already installed. Proceed to the next quick start to create a Pipeline.
+4. Click the **tile** to open the Operator details.
+5. At the top of the OpenShift Pipelines Operator panel that opens, click **Install**.
+6. Fill out the Operator subscription form by selecting the channel that matches your OpenShift cluster, and then click **Install**.
+7. On the **Installed Operators** page, wait for the OpenShift Pipelines Operator's status to change from **Installing** to **Succeeded**. `,
+        review: {
+          instructions: `#### To verify that the OpenShift Pipelines Operator is installed:
+1. From the **Operators** section of the navigation, go to the **Installed Operators** page.
+2. Verify that the **OpenShift Pipelines Operator** appears in the list of Operators.
+
+In the status column, is the status of the OpenShift Pipelines Operator **Succeeded**?`,
+          failedTaskHelp: `This task isn’t verified yet. Try the task again, or [read more](https://docs.openshift.com/container-platform/4.6/pipelines/installing-pipelines.html#op-installing-pipelines-operator-in-web-console_installing-pipelines) about this topic.`,
+        },
+        summary: {
+          success: `You have installed the Pipelines Operator!`,
+          failed: `Try the steps again.`,
+        },
+      },
+    ],
+    conclusion: `You successfully installed the OpenShift Pipelines Operator! If you want to learn how to deploy an application and associate a Pipeline with it, take the Creating a Pipeline quick start.`,
+    nextQuickStart: [`install-app-and-associate-pipeline`],
+    accessReviewResources: [
+      {
+        group: 'operators.coreos.com',
+        resource: 'operatorgroups',
+        verb: 'list',
+      },
+      {
+        group: 'packages.operators.coreos.com',
+        resource: 'packagemanifests',
+        verb: 'list',
+      },
+    ],
+  },
+};