Next quick start link update

openshift · Feb 5, 2021 · b8d1eec · b8d1eec
1 parent 33b1b12
commit b8d1eec
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 15 deletions.
diff --git a/frontend/packages/console-app/locales/en/quickstart.json b/frontend/packages/console-app/locales/en/quickstart.json
@@ -20,7 +20,7 @@
   "Not started": "Not started",
   "{{duration, number}} minutes": "{{duration, number}} minutes",
   "One or more verifications did not pass during this quick start. Revisit the tasks or the help links, and then try again.": "One or more verifications did not pass during this quick start. Revisit the tasks or the help links, and then try again.",
-  "Start {{nextQuickStart}} quick start": "Start {{nextQuickStart}} quick start",
+  "Start {{nextQSDisplayName}} quick start": "Start {{nextQSDisplayName}} quick start",
   "Start tour": "Start tour",
   "Next": "Next",
   "Close": "Close",

diff --git a/frontend/packages/console-app/locales/ja/quickstart.json b/frontend/packages/console-app/locales/ja/quickstart.json
@@ -20,7 +20,7 @@
   "Not started": "開始されていません",
   "{{duration, number}} minutes": "{{duration, number}} 分",
   "One or more verifications did not pass during this quick start. Revisit the tasks or the help links, and then try again.": "このクイックスタートで 1 つ以上の検証にパスしませんでした。タスクまたはヘルプリンクに再度アクセスし、再試行してください。",
-  "Start {{nextQuickStart}} quick start": "{{nextQuickStart}} クイックスタートを開始する",
+  "Start {{nextQSDisplayName}} quick start": "{{nextQSDisplayName}} クイックスタートを開始する",
   "Start tour": "ツアーを開始する",
   "Next": "次へ",
   "Close": "閉じる",
@@ -42,4 +42,4 @@
   "Any progress you've made will be saved.": "進行状況はすべて保存されます。",
   "In Progress": "進行中",
   "Start Tour": "ツアーを開始する"
-}
+}
diff --git a/frontend/packages/console-app/locales/zh/quickstart.json b/frontend/packages/console-app/locales/zh/quickstart.json
@@ -19,7 +19,7 @@
   "Not started": "没有开始",
   "{{duration, number}} minutes": "{{duration, number}} 分钟",
   "One or more verifications did not pass during this quick start. Revisit the tasks or the help links, and then try again.": "在此快速开始过程中，一个或多个验证未通过。重新访问这些任务或帮助链接，然后重试。",
-  "Start {{nextQuickStart}} quick start": "开始{{nextQuickStart}}快速开始",
+  "Start {{nextQSDisplayName}} quick start": "开始{{nextQSDisplayName}}快速开始",
   "Start tour": "开始功能浏览",
   "Next": "下一个",
   "Close": "关闭",
@@ -36,4 +36,4 @@
   "Cancel": "取消",
   "Leave": "离开",
   "Your progress will be saved.": "您的进度将被保存。"
-}
+}
diff --git a/frontend/packages/console-app/src/components/quick-starts/QuickStartController.tsx b/frontend/packages/console-app/src/components/quick-starts/QuickStartController.tsx
@@ -6,12 +6,14 @@ import { QuickStartContext, QuickStartContextValues } from './utils/quick-start-
 
 type QuickStartControllerProps = {
   quickStart: QuickStart;
+  nextQuickStarts?: QuickStart[];
   footerClass: string;
   contentRef: React.Ref<HTMLDivElement>;
 };
 
 const QuickStartController: React.FC<QuickStartControllerProps> = ({
   quickStart,
+  nextQuickStarts,
   contentRef,
   footerClass,
 }) => {
@@ -66,6 +68,7 @@ const QuickStartController: React.FC<QuickStartControllerProps> = ({
     <>
       <QuickStartContent
         quickStart={quickStart}
+        nextQuickStarts={nextQuickStarts}
         taskNumber={taskNumber}
         allTaskStatuses={allTaskStatuses}
         onTaskSelect={handleTaskSelect}

diff --git a/frontend/packages/console-app/src/components/quick-starts/QuickStartPanelContent.tsx b/frontend/packages/console-app/src/components/quick-starts/QuickStartPanelContent.tsx
@@ -32,6 +32,9 @@ const QuickStartPanelContent: React.FC<QuickStartPanelContentProps> = ({
   const shadows = useScrollShadows(contentRef);
 
   const quickStart = quickStarts.find((qs) => qs.metadata.name === activeQuickStartID);
+  const nextQuickStarts: QuickStart[] = quickStarts.filter((qs: QuickStart) =>
+    quickStart?.spec.nextQuickStart?.includes(qs.metadata.name),
+  );
 
   const headerClasses = classNames({
     'pf-u-box-shadow-sm-bottom': shadows === Shadows.top || shadows === Shadows.both,
@@ -68,6 +71,7 @@ const QuickStartPanelContent: React.FC<QuickStartPanelContentProps> = ({
         <AsyncComponent
           loader={() => import('./QuickStartController').then((c) => c.default)}
           quickStart={quickStart}
+          nextQuickStarts={nextQuickStarts}
           footerClass={footerClass}
           contentRef={setContentRef}
         />

diff --git a/...tend/packages/console-app/src/components/quick-starts/controller/QuickStartConclusion.tsx b/...tend/packages/console-app/src/components/quick-starts/controller/QuickStartConclusion.tsx
@@ -3,14 +3,14 @@ import { useTranslation } from 'react-i18next';
 import { Button } from '@patternfly/react-core';
 import { ArrowRightIcon } from '@patternfly/react-icons';
 import QuickStartMarkdownView from '../QuickStartMarkdownView';
-import { QuickStartTask, QuickStartTaskStatus } from '../utils/quick-start-types';
+import { QuickStartTask, QuickStartTaskStatus, QuickStart } from '../utils/quick-start-types';
 import TaskHeader from './QuickStartTaskHeader';
 
 type QuickStartConclusionProps = {
   tasks: QuickStartTask[];
   conclusion: string;
   allTaskStatuses: QuickStartTaskStatus[];
-  nextQuickStart?: string;
+  nextQuickStart?: QuickStart;
   onQuickStartChange: (quickStartid: string) => void;
   onTaskSelect: (selectedTaskNumber: number) => void;
 };
@@ -24,6 +24,8 @@ const QuickStartConclusion: React.FC<QuickStartConclusionProps> = ({
   onTaskSelect,
 }) => {
   const hasFailedTask = allTaskStatuses.includes(QuickStartTaskStatus.FAILED);
+  const nextQSDisplayName = nextQuickStart?.spec?.displayName;
+
   const { t } = useTranslation();
   return (
     <>
@@ -47,8 +49,12 @@ const QuickStartConclusion: React.FC<QuickStartConclusionProps> = ({
         }
       />
       {nextQuickStart && !hasFailedTask && (
-        <Button variant="link" onClick={() => onQuickStartChange(nextQuickStart)} isInline>
-          {t('quickstart~Start {{nextQuickStart}} quick start', { nextQuickStart })}{' '}
+        <Button
+          variant="link"
+          onClick={() => onQuickStartChange(nextQuickStart.metadata.name)}
+          isInline
+        >
+          {t('quickstart~Start {{nextQSDisplayName}} quick start', { nextQSDisplayName })}{' '}
           <ArrowRightIcon
             style={{ marginLeft: 'var(--pf-global--spacer--xs)', verticalAlign: 'middle' }}
           />

diff --git a/frontend/packages/console-app/src/components/quick-starts/controller/QuickStartContent.tsx b/frontend/packages/console-app/src/components/quick-starts/controller/QuickStartContent.tsx
@@ -8,6 +8,7 @@ import './QuickStartContent.scss';
 
 type QuickStartContentProps = {
   quickStart: QuickStart;
+  nextQuickStarts?: QuickStart[];
   taskNumber: number;
   allTaskStatuses: QuickStartTaskStatus[];
   onTaskSelect: (selectedTaskNumber: number) => void;
@@ -17,14 +18,22 @@ type QuickStartContentProps = {
 
 const QuickStartContent = React.forwardRef<HTMLDivElement, QuickStartContentProps>(
   (
-    { quickStart, taskNumber, allTaskStatuses, onTaskSelect, onTaskReview, onQuickStartChange },
+    {
+      quickStart,
+      nextQuickStarts = [],
+      taskNumber,
+      allTaskStatuses,
+      onTaskSelect,
+      onTaskReview,
+      onQuickStartChange,
+    },
     ref,
   ) => {
     const {
-      spec: { introduction, tasks, conclusion, nextQuickStart = [] },
+      spec: { introduction, tasks, conclusion },
     } = quickStart;
     const totalTasks = tasks.length;
-    const nextQS = nextQuickStart.length > 0 && nextQuickStart[0];
+    const nextQS = nextQuickStarts.length > 0 && nextQuickStarts[0];
 
     return (
       <div className="co-quick-start-content" ref={ref}>

diff --git a/...onsole-app/src/components/quick-starts/controller/__tests__/QuickStartConclusion.spec.tsx b/...onsole-app/src/components/quick-starts/controller/__tests__/QuickStartConclusion.spec.tsx
@@ -45,13 +45,15 @@ describe('QuickStartConclusion', () => {
   });
 
   it('should render link for next quick start if nextQuickStart prop is available and there are no failed tasks', () => {
-    wrapper = shallow(<QuickStartConclusion {...props} nextQuickStart="Serverless Application" />);
+    wrapper = shallow(
+      <QuickStartConclusion {...props} nextQuickStart={getQuickStartByName('explore-pipelines')} />,
+    );
     expect(
       wrapper
         .find(Button)
         .at(0)
         .props().children[0],
-    ).toEqual(`${i18nNS}~Start {{nextQuickStart}} quick start`);
+    ).toEqual(`${i18nNS}~Start {{nextQSDisplayName}} quick start`);
   });
 
   it('should not render link for next quick start if nextQuickStart props is not available', () => {
@@ -62,7 +64,7 @@ describe('QuickStartConclusion', () => {
     wrapper = shallow(
       <QuickStartConclusion
         {...props}
-        nextQuickStart="Serverless Application"
+        nextQuickStart={getQuickStartByName('explore-pipelines')}
         allTaskStatuses={[
           QuickStartTaskStatus.FAILED,
           QuickStartTaskStatus.SUCCESS,