@patternfly/quickstarts 2.2.3 → 2.2.4

package/src/controller/QuickStartIntroduction.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { ExpandableSection, List, ListItem } from '@patternfly/react-core';
+import QuickStartMarkdownView from '../QuickStartMarkdownView';
+import { QuickStartContext, QuickStartContextValues } from '../utils/quick-start-context';
+import { QuickStartTask, QuickStartTaskStatus } from '../utils/quick-start-types';
+import TaskHeaderList from './QuickStartTaskHeaderList';
+
+import './QuickStartIntroduction.scss';
+
+type QuickStartIntroductionProps = {
+  introduction: string;
+  tasks: QuickStartTask[];
+  allTaskStatuses: QuickStartTaskStatus[];
+  prerequisites?: string[];
+  onTaskSelect: (selectedTaskNumber: number) => void;
+};
+
+const QuickStartIntroduction: React.FC<QuickStartIntroductionProps> = ({
+  tasks,
+  introduction,
+  allTaskStatuses,
+  prerequisites,
+  onTaskSelect,
+}) => {
+  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
+  const prereqs = prerequisites?.filter((p) => p);
+  const [isPrereqsExpanded, setIsPrereqsExpanded] = React.useState(false);
+  const prereqList = prereqs?.length > 0 && (
+    <ExpandableSection
+      toggleText={getResource('View Prerequisites ({{totalPrereqs}})').replace(
+        '{{totalPrereqs}}',
+        prereqs.length,
+      )}
+      onToggle={() => setIsPrereqsExpanded(!isPrereqsExpanded)}
+      className="pfext-quick-start-intro__prereq"
+    >
+      <List className="pfext-quick-start-intro__prereq-list">
+        {prereqs.map((pr) => {
+          return (
+            <ListItem key={pr} className="pfext-quick-start-intro__prereq-list__item">
+              <span className="pfext-quick-start-intro__prereq-list__item-content">
+                <QuickStartMarkdownView content={pr} />
+              </span>
+            </ListItem>
+          );
+        })}
+      </List>
+    </ExpandableSection>
+  );
+  return (
+    <>
+      <QuickStartMarkdownView content={introduction} />
+      {prereqList}
+      <p style={{ marginBottom: 'var(--pf-global--spacer--md)' }}>
+        {getResource(
+          'In this quick start, you will complete {{count, number}} task',
+          tasks.length,
+        ).replace('{{count, number}}', tasks.length)}
+        :
+      </p>
+      <TaskHeaderList tasks={tasks} allTaskStatuses={allTaskStatuses} onTaskSelect={onTaskSelect} />
+    </>
+  );
+};
+
+export default QuickStartIntroduction;

package/src/controller/QuickStartTaskHeader.scss

@@ -0,0 +1,58 @@
+.pfext-quick-start-task-header {
+  margin-bottom: var(--pf-global--spacer--sm);
+  display: grid;
+  grid-template-columns: min-content auto;
+  font-size: var(--pf-global--FontSize--md);
+  button::before {
+    content: none;
+  }
+
+  &__title {
+    color: var(--pf-global--primary-color--100) !important;
+    margin-right: var(--pf-global--spacer--md) !important;
+  }
+
+  &__subtitle {
+    font-size: var(--pf-global--FontSize--sm);
+    color: var(--pf-global--Color--dark-200) !important;
+  }
+
+  &__tryagain {
+    display: block;
+    font-size: var(--pf-global--FontSize--md);
+    color: var(--pf-global--Color--300) !important;
+  }
+
+  &__title-success {
+    color: var(--pf-global--success-color--100) !important;
+  }
+
+  &__title-failed {
+    color: var(--pf-global--danger-color--100) !important;
+  }
+
+  &__task-icon {
+    &-init {
+      background-color: var(--pf-global--primary-color--100);
+      border-radius: var(--pf-global--BorderRadius--lg);
+      color: var(--pf-global--Color--light-100);
+      display: inline-flex;
+      justify-content: center;
+      height: 1.5em;
+      width: 1.5em;
+    }
+
+    &-success,
+    &-failed {
+      vertical-align: middle !important;
+    }
+
+    &-success {
+      color: var(--pf-global--success-color--100) !important;
+    }
+
+    &-failed {
+      color: var(--pf-global--danger-color--100) !important;
+    }
+  }
+}

package/src/controller/QuickStartTaskHeader.tsx

@@ -0,0 +1,116 @@
+import * as React from 'react';
+import { Title, WizardNavItem } from '@patternfly/react-core';
+import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
+import { css } from '@patternfly/react-styles';
+import { markdownConvert } from '../ConsoleInternal/components/markdown-view';
+import { removeParagraphWrap } from '../QuickStartMarkdownView';
+import { QuickStartContext, QuickStartContextValues } from '../utils/quick-start-context';
+import { QuickStartTaskStatus } from '../utils/quick-start-types';
+
+import './QuickStartTaskHeader.scss';
+
+type QuickStartTaskHeaderProps = {
+  title: string;
+  taskIndex: number;
+  subtitle?: string;
+  taskStatus?: QuickStartTaskStatus;
+  size?: 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+  isActiveTask?: boolean;
+  onTaskSelect: (index: number) => void;
+  chidlren?: React.ReactNode;
+};
+
+const TaskIcon: React.FC<{
+  taskIndex: number;
+  taskStatus: QuickStartTaskStatus;
+}> = ({ taskIndex, taskStatus }) => {
+  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
+  const success = taskStatus === QuickStartTaskStatus.SUCCESS;
+  const failed = taskStatus === QuickStartTaskStatus.FAILED;
+
+  const classNames = css('pfext-icon-and-text__icon', {
+    'pfext-quick-start-task-header__task-icon-init': !failed && !success,
+  });
+  let content: {};
+  if (success) {
+    content = (
+      <CheckCircleIcon size="md" className="pfext-quick-start-task-header__task-icon-success" />
+    );
+  } else if (failed) {
+    content = (
+      <ExclamationCircleIcon
+        size="md"
+        className="pfext-quick-start-task-header__task-icon-failed"
+      />
+    );
+  } else {
+    content = getResource('{{taskIndex, number}}', taskIndex).replace(
+      '{{taskIndex, number}}',
+      taskIndex,
+    );
+  }
+  return <span className={classNames}>{content}</span>;
+};
+
+const QuickStartTaskHeader: React.FC<QuickStartTaskHeaderProps> = ({
+  title,
+  taskIndex,
+  subtitle,
+  taskStatus,
+  size,
+  isActiveTask,
+  onTaskSelect,
+  children,
+}) => {
+  const classNames = css('pfext-quick-start-task-header__title', {
+    'pfext-quick-start-task-header__title-success': taskStatus === QuickStartTaskStatus.SUCCESS,
+    'pfext-quick-start-task-header__title-failed':
+      taskStatus === (QuickStartTaskStatus.FAILED || QuickStartTaskStatus.VISITED),
+  });
+  // const notCompleted = taskStatus === QuickStartTaskStatus.VISITED;
+  // const skippedReview = taskStatus === QuickStartTaskStatus.REVIEW;
+  const failedReview = taskStatus === QuickStartTaskStatus.FAILED;
+
+  // TODO: toned down when this is shown, investigate further when we should display it
+  // related: https://github.com/patternfly/patternfly-quickstarts/issues/104
+  const tryAgain = failedReview && (
+    <>
+      <div />
+      <div className="pfext-quick-start-task-header__tryagain">Try the steps again.</div>
+    </>
+  );
+
+  const content = (
+    <div className="pfext-quick-start-task-header">
+      <TaskIcon taskIndex={taskIndex} taskStatus={taskStatus} />
+      <Title headingLevel="h3" size={size} className={classNames}>
+        <span dangerouslySetInnerHTML={{ __html: removeParagraphWrap(markdownConvert(title)) }} />
+        {isActiveTask && subtitle && (
+          <span
+            className="pfext-quick-start-task-header__subtitle"
+            data-test-id="quick-start-task-subtitle"
+          >
+            {' '}
+            {subtitle}
+          </span>
+        )}
+      </Title>
+      {tryAgain}
+    </div>
+  );
+
+  return (
+    <WizardNavItem
+      content={content}
+      step={taskIndex}
+      onNavItemClick={() => onTaskSelect(taskIndex - 1)}
+      navItemComponent="button"
+      isCurrent={isActiveTask}
+    >
+      {children}
+    </WizardNavItem>
+  );
+};
+
+export default QuickStartTaskHeader;

package/src/controller/QuickStartTaskHeaderList.scss

@@ -0,0 +1,17 @@
+.pfext-quick-start-task-header {
+  &__list {
+    padding: 0 !important;
+
+    button::before {
+      content: none;
+    }
+
+    li {
+      list-style-type: none;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-bottom: var(--pf-global--spacer--xs);
+    }
+  }
+}

package/src/controller/QuickStartTaskHeaderList.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { List } from '@patternfly/react-core';
+import { QuickStartTask, QuickStartTaskStatus } from '../utils/quick-start-types';
+import TaskHeader from './QuickStartTaskHeader';
+
+import './QuickStartTaskHeaderList.scss';
+
+type QuickStartTaskHeaderListProps = {
+  tasks: QuickStartTask[];
+  allTaskStatuses: QuickStartTaskStatus[];
+  onTaskSelect: (selectedTaskNumber: number) => void;
+};
+
+const QuickStartTaskHeaderList: React.FC<QuickStartTaskHeaderListProps> = ({
+  tasks,
+  allTaskStatuses,
+  onTaskSelect,
+}) => {
+  return tasks.length > 0 ? (
+    <List className="pfext-quick-start-task-header__list">
+      {tasks.map((task, index) => (
+        <TaskHeader
+          key={task.title}
+          title={task.title}
+          taskIndex={index + 1}
+          size="md"
+          taskStatus={allTaskStatuses[index]}
+          onTaskSelect={onTaskSelect}
+        />
+      ))}
+    </List>
+  ) : null;
+};
+
+export default QuickStartTaskHeaderList;

package/src/controller/QuickStartTaskReview.scss

@@ -0,0 +1,30 @@
+.pfext-quick-start-task-review-alert {
+  margin: var(--pf-global--spacer--lg) 0;
+}
+.pfext-quick-start-task-review {
+  font-size: var(--pf-global--FontSize--md);
+  line-height: var(--pf-global--FontSize--xl);
+  font-family: var(--pf-global--FontFamily--heading--sans-serif);
+
+  &__actions {
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: var(--pf-global--spacer--sm);
+    input[type='radio'] {
+      margin-top: 0;
+      margin-right: 0;
+    }
+  }
+
+  &__radio {
+    margin-right: var(--pf-global--spacer--xl) !important;
+  }
+
+  &--success {
+    color: var(--pf-global--success-color--100) !important;
+  }
+
+  &--failed {
+    color: var(--pf-chart-global--danger--Color--100);
+  }
+}

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';
+
+type 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-c-wizard__nav-item {
+        list-style-type: none;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        margin-bottom: var(--pf-global--spacer--xs);
+      }
+    }
+    .pfext-quick-start-task__content {
+      margin-bottom: var(--pf-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-global--Color--200);
+        font-size: 16px;
+      }
+      &-list {
+        font-size: 16px;
+        &--prereq {
+          padding-left: var(--pf-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-c-alert {
+              // add margins to match design
+              margin: var(--pf-global--spacer--md) 0;
+            }
+            .pf-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-c-alert__title--FontWeight);
+              font-family: inherit;
+              line-height: inherit;
+              color: var(--pf-c-alert__title--Color);
+              word-break: break-word;
+            }
+            .task-pflist-list__item__content__note {
+              background-color: var(--pf-global--palette--blue-50);
+              border-color: var(--pf-global--active-color--200);
+              margin: var(--pf-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';
+
+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);
+  });
+});