@patternfly/quickstarts 0.0.0

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';
+
+interface 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-v5-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-v5-global--spacer--lg);
+  font-size: 16px;
+
+  .pf-v5-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';
+
+interface 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-v5-global--BackgroundColor--100);   // this is an example about how we should use PF variables
+  flex: 0 0 auto;
+  padding: var(--pf-v5-global--spacer--md) var(--pf-v5-global--spacer--lg);
+
+  &__actionbtn {
+    margin-right: var(--pf-v5-global--spacer--md);
+  }
+
+  &__restartbtn {
+    float: right;
+  }
+}

package/src/controller/QuickStartFooter.tsx

@@ -0,0 +1,124 @@
+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 interface 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(() => ({
+      START: getResource('Start'),
+      CONTINUE: getResource('Continue'),
+      NEXT: getResource('Next'),
+      CLOSE: getResource('Close'),
+    }), [getResource]);
+
+  const SecondaryButtonText = React.useMemo(() => ({
+      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-v5-global--spacer--md);
+    .pf-v5-c-expandable-section__content {
+      margin-top: var(--pf-v5-global--spacer--sm);
+    }
+    .pf-v5-c-expandable-section__toggle {
+      padding-top: 0;
+      padding-bottom: 0;
+      &-text {
+        margin-left: var(--pf-v5-global--spacer--sm);
+      }
+      &-icon {
+        color: var(--pf-v5-c-expandable-section__toggle--Color);
+        &:focus, &:hover {
+          --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--focus--Color);
+        }
+      }
+    }
+
+    &-list {
+      padding-left: 20px;
+      &__item {
+        &::marker {
+          font-size: 0.8rem;
+        }
+        &-content {
+          position: relative;
+          left: 2px;
+        }
+      }
+    }
+
+  }
+}

package/src/controller/QuickStartIntroduction.tsx

@@ -0,0 +1,64 @@
+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';
+
+interface 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) => (
+            <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-v5-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-v5-global--spacer--sm);
+  display: grid;
+  grid-template-columns: min-content auto;
+  font-size: var(--pf-v5-global--FontSize--md);
+  button::before {
+    content: none;
+  }
+
+  &__title {
+    color: var(--pf-v5-global--primary-color--100) !important;
+    margin-right: var(--pf-v5-global--spacer--md) !important;
+  }
+
+  &__subtitle {
+    font-size: var(--pf-v5-global--FontSize--sm);
+    color: var(--pf-v5-global--Color--dark-200) !important;
+  }
+
+  &__tryagain {
+    display: block;
+    font-size: var(--pf-v5-global--FontSize--md);
+    color: var(--pf-v5-global--Color--300) !important;
+  }
+
+  &__title-success {
+    color: var(--pf-v5-global--success-color--100) !important;
+  }
+
+  &__title-failed {
+    color: var(--pf-v5-global--danger-color--100) !important;
+  }
+
+  &__task-icon {
+    &-init {
+      background-color: var(--pf-v5-global--primary-color--100);
+      border-radius: var(--pf-v5-global--BorderRadius--lg);
+      color: var(--pf-v5-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-v5-global--success-color--100) !important;
+    }
+
+    &-failed {
+      color: var(--pf-v5-global--danger-color--100) !important;
+    }
+  }
+}

package/src/controller/QuickStartTaskHeader.tsx

@@ -0,0 +1,125 @@
+import * as React from 'react';
+import { Icon, 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';
+
+interface QuickStartTaskHeaderProps {
+  title: string;
+  taskIndex: number;
+  subtitle?: string;
+  taskStatus?: QuickStartTaskStatus;
+  size?: 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+  isActiveTask?: boolean;
+  onTaskSelect: (index: number) => void;
+  children?: 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: React.ReactNode;
+
+  if (success) {
+    content = (
+      <Icon size="md">
+        <CheckCircleIcon className="pfext-quick-start-task-header__task-icon-success" />{' '}
+      </Icon>
+    );
+  } else if (failed) {
+    content = (
+      <Icon size="md">
+        <ExclamationCircleIcon className="pfext-quick-start-task-header__task-icon-failed" />
+      </Icon>
+    );
+  } 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 titleRef = React.useRef(null);
+  React.useEffect(() => {
+    if (isActiveTask) {
+      // Focus the WizardNavItem button element that contains the title
+      titleRef.current.parentNode.focus();
+    }
+  }, [isActiveTask]);
+  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" ref={titleRef}>
+      <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}
+      stepIndex={taskIndex}
+      onClick={() => onTaskSelect(taskIndex - 1)}
+      component="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-v5-global--spacer--xs);
+    }
+  }
+}

package/src/controller/QuickStartTaskHeaderList.tsx

@@ -0,0 +1,33 @@
+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';
+
+interface QuickStartTaskHeaderListProps {
+  tasks: QuickStartTask[];
+  allTaskStatuses: QuickStartTaskStatus[];
+  onTaskSelect: (selectedTaskNumber: number) => void;
+}
+
+const QuickStartTaskHeaderList: React.FC<QuickStartTaskHeaderListProps> = ({
+  tasks,
+  allTaskStatuses,
+  onTaskSelect,
+}) => 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-v5-global--spacer--lg) 0;
+}
+.pfext-quick-start-task-review {
+  font-size: var(--pf-v5-global--FontSize--md);
+  line-height: var(--pf-v5-global--FontSize--xl);
+  font-family: var(--pf-v5-global--FontFamily--heading--sans-serif);
+
+  &__actions {
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: var(--pf-v5-global--spacer--sm);
+    input[type='radio'] {
+      margin-top: 0;
+      margin-right: 0;
+    }
+  }
+
+  &__radio {
+    margin-right: var(--pf-v5-global--spacer--xl) !important;
+  }
+
+  &--success {
+    color: var(--pf-v5-global--success-color--100) !important;
+  }
+
+  &--failed {
+    color: var(--pf-chart-global--danger--Color--100);
+  }
+}