UI enhancement to support quickStart as CRs

openshift · Nov 18, 2020 · 226cec9 · 226cec9
1 parent 33da36b
commit 226cec9
Show file tree

Hide file tree

Showing 35 changed files with 798 additions and 650 deletions.
diff --git a/frontend/packages/console-app/src/components/quick-starts/QuickStartDrawer.scss b/frontend/packages/console-app/src/components/quick-starts/QuickStartDrawer.scss
@@ -1,28 +1,11 @@
-.co-quick-start-drawer-head {
-  position: sticky;
-  top: 0px;
-  background: inherit;
-  z-index: var(--pf-global--ZIndex--xs);
-}
-
 .co-quick-start-drawer {
-  &__title {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-  }
-
   &__body {
     display: flex;
     flex-direction: column;
     z-index: 0;
     position: relative;
   }
-
   &__modal > .pf-c-modal-box__footer {
     display: block;
   }
-  &__duration {
-    display: inline-block;
-  }
 }
diff --git a/frontend/packages/console-app/src/components/quick-starts/QuickStartDrawer.tsx b/frontend/packages/console-app/src/components/quick-starts/QuickStartDrawer.tsx
@@ -1,32 +1,20 @@
 import * as React from 'react';
-import * as classNames from 'classnames';
+
 import { Dispatch } from 'redux';
 import { connect } from 'react-redux';
-import { useTranslation } from 'react-i18next';
-import {
-  Drawer,
-  DrawerPanelContent,
-  DrawerContent,
-  DrawerPanelBody,
-  DrawerHead,
-  DrawerActions,
-  DrawerCloseButton,
-  DrawerContentBody,
-  Title,
-} from '@patternfly/react-core';
+
+import { Drawer, DrawerContent, DrawerContentBody } from '@patternfly/react-core';
 import { RootState } from '@console/internal/redux';
-import { AsyncComponent } from '@console/internal/components/utils';
-import { useScrollDirection, ScrollDirection } from '@console/shared/';
 import {
   getActiveQuickStartID,
   getActiveQuickStartStatus,
 } from '../../redux/reducers/quick-start-reducer';
 import { setActiveQuickStart } from '../../redux/actions/quick-start-actions';
-import { getQuickStartByName } from './utils/quick-start-utils';
 import { QuickStartStatus } from './utils/quick-start-types';
-
-import './QuickStartDrawer.scss';
+import QuickStartPanelContent from './QuickStartPanelContent';
 import QuickStartCloseModal from './QuickStartCloseModal';
+import QuickStartsLoader from './loader/QuickStartsLoader';
+import './QuickStartDrawer.scss';
 
 type StateProps = {
   activeQuickStartID: string;
@@ -46,9 +34,6 @@ const QuickStartDrawer: React.FC<QuickStartDrawerProps> = ({
   onClose,
 }) => {
   const [modalOpen, setModalOpen] = React.useState<boolean>(false);
-  const quickStart = getQuickStartByName(activeQuickStartID);
-  const [scrollDirection, handleScrollCallback] = useScrollDirection();
-  const { t } = useTranslation();
 
   const handleClose = () => {
     if (activeQuickStartStatus === QuickStartStatus.IN_PROGRESS) {
@@ -65,42 +50,17 @@ const QuickStartDrawer: React.FC<QuickStartDrawerProps> = ({
 
   const onModalCancel = () => setModalOpen(false);
 
-  const headerClasses = classNames('co-quick-start-drawer-head', {
-    'pf-u-box-shadow-sm-bottom':
-      scrollDirection && scrollDirection !== ScrollDirection.scrolledToTop,
-  });
-
-  const panelContent = quickStart ? (
-    <DrawerPanelContent onScroll={handleScrollCallback}>
-      <div className={headerClasses}>
-        <DrawerHead>
-          <div className="co-quick-start-drawer__title">
-            <Title
-              headingLevel="h1"
-              size="xl"
-              style={{ marginRight: 'var(--pf-global--spacer--md)' }}
-            >
-              {quickStart?.spec.displayName}{' '}
-              <small className="co-quick-start-drawer__duration text-secondary">
-                {t('quickstart~{{duration, number}} minutes', {
-                  duration: quickStart?.spec.duration,
-                })}
-              </small>
-            </Title>
-          </div>
-          <DrawerActions>
-            <DrawerCloseButton onClick={handleClose} />
-          </DrawerActions>
-        </DrawerHead>
-      </div>
-      <DrawerPanelBody>
-        <AsyncComponent
-          loader={() => import('./QuickStartController').then((c) => c.default)}
-          quickStart={quickStart}
+  const panelContent = (
+    <QuickStartsLoader>
+      {(quickStarts) => (
+        <QuickStartPanelContent
+          quickStarts={quickStarts}
+          handleClose={handleClose}
+          activeQuickStartID={activeQuickStartID}
         />
-      </DrawerPanelBody>
-    </DrawerPanelContent>
-  ) : null;
+      )}
+    </QuickStartsLoader>
+  );
 
   return (
     <>

diff --git a/frontend/packages/console-app/src/components/quick-starts/QuickStartPanelContent.scss b/frontend/packages/console-app/src/components/quick-starts/QuickStartPanelContent.scss
@@ -0,0 +1,16 @@
+.co-quick-start-panel-content {
+  &-head {
+    position: sticky;
+    top: 0px;
+    background: inherit;
+    z-index: var(--pf-global--ZIndex--xs);
+  }
+  &__title {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  &__duration {
+    display: inline-block;
+  }
+}
diff --git a/frontend/packages/console-app/src/components/quick-starts/QuickStartPanelContent.tsx b/frontend/packages/console-app/src/components/quick-starts/QuickStartPanelContent.tsx
@@ -0,0 +1,72 @@
+import * as React from 'react';
+import * as classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import {
+  DrawerPanelContent,
+  DrawerPanelBody,
+  DrawerHead,
+  DrawerActions,
+  DrawerCloseButton,
+  Title,
+} from '@patternfly/react-core';
+import { QuickStart } from './utils/quick-start-types';
+import { AsyncComponent } from '@console/internal/components/utils';
+import { useScrollDirection, ScrollDirection } from '@console/shared/';
+import './QuickStartDrawer.scss';
+
+type HandleClose = () => void;
+
+type QuickStartPanelContentProps = {
+  quickStarts: QuickStart[];
+  activeQuickStartID: string;
+  handleClose: HandleClose;
+};
+
+const QuickStartPanelContent: React.FC<QuickStartPanelContentProps> = ({
+  quickStarts = [],
+  handleClose,
+  activeQuickStartID,
+}) => {
+  const [scrollDirection, handleScrollCallback] = useScrollDirection();
+  const { t } = useTranslation();
+  const quickStart = quickStarts.find((qs) => qs.metadata.name === activeQuickStartID);
+
+  const headerClasses = classNames('co-quick-start-panel-content-head', {
+    'pf-u-box-shadow-sm-bottom':
+      scrollDirection && scrollDirection !== ScrollDirection.scrolledToTop,
+  });
+
+  return quickStart ? (
+    <DrawerPanelContent onScroll={handleScrollCallback}>
+      <div className={headerClasses}>
+        <DrawerHead>
+          <div className="co-quick-start-panel-content__title">
+            <Title
+              headingLevel="h1"
+              size="xl"
+              style={{ marginRight: 'var(--pf-global--spacer--md)' }}
+            >
+              {quickStart?.spec.displayName}{' '}
+              <small className="co-quick-start-panel-content__duration text-secondary">
+                {t('quickstart~{{duration, number}} minutes', {
+                  duration: quickStart?.spec.durationMinutes,
+                })}
+              </small>
+            </Title>
+          </div>
+          <DrawerActions>
+            <DrawerCloseButton onClick={handleClose} />
+          </DrawerActions>
+        </DrawerHead>
+      </div>
+      <DrawerPanelBody>
+        <AsyncComponent
+          loader={() => import('./QuickStartController').then((c) => c.default)}
+          quickStart={quickStart}
+        />
+      </DrawerPanelBody>
+    </DrawerPanelContent>
+  ) : null;
+};
+
+export default QuickStartPanelContent;
diff --git a/...end/packages/console-app/src/components/quick-starts/__tests__/quick-start-utils.spec.tsx b/...end/packages/console-app/src/components/quick-starts/__tests__/quick-start-utils.spec.tsx
@@ -1,5 +1,5 @@
 import { getQuickStartByName } from '../utils/quick-start-utils';
-import { allQuickStarts } from '../data/quick-start-data';
+import { allQuickStarts } from '../data/quick-start-test-data';
 
 describe('quick-start-utils', () => {
   it('should return the quick start corresponding to the id', () => {

diff --git a/frontend/packages/console-app/src/components/quick-starts/catalog/QuickStartTile.tsx b/frontend/packages/console-app/src/components/quick-starts/catalog/QuickStartTile.tsx
@@ -24,23 +24,23 @@ const QuickStartTile: React.FC<QuickStartTileProps> = ({
 }) => {
   const {
     metadata: { name: id },
-    spec: { iconURL, tasks, displayName, description, duration, prerequisites },
+    spec: { icon, tasks, displayName, description, durationMinutes, prerequisites },
   } = quickStart;
 
-  const icon = (
+  const quickStartIcon = (
     <FallbackImg
       className="co-catalog-item-icon__img--large"
-      src={iconURL}
+      src={icon}
       fallback={<RocketIcon />}
     />
   );
 
   return (
     <CatalogTile
-      icon={icon}
+      icon={quickStartIcon}
       className="co-quick-start-tile"
       featured={isActive}
-      title={<QuickStartTileHeader name={displayName} status={status} duration={duration} />}
+      title={<QuickStartTileHeader name={displayName} status={status} duration={durationMinutes} />}
       onClick={onClick}
       description={
         <QuickStartTileDescription description={description} prerequisites={prerequisites} />

diff --git a/...nd/packages/console-app/src/components/quick-starts/catalog/QuickStartTileDescription.tsx b/...nd/packages/console-app/src/components/quick-starts/catalog/QuickStartTileDescription.tsx
@@ -6,7 +6,7 @@ import './QuickStartTileDescription.scss';
 
 type QuickStartTileDescriptionProps = {
   description: string;
-  prerequisites?: string;
+  prerequisites?: string[];
   unmetPrerequisite?: boolean;
 };
 const QuickStartTileDescription: React.FC<QuickStartTileDescriptionProps> = ({
@@ -23,7 +23,9 @@ const QuickStartTileDescription: React.FC<QuickStartTileDescriptionProps> = ({
         {prerequisites && (
           <>
             <Text component={TextVariants.h5}>{t('quickstart~Prerequisites')}</Text>
-            <Text component={TextVariants.small}>{prerequisites}</Text>
+            {prerequisites.map((prerequisite) => (
+              <Text component={TextVariants.small}>{prerequisite}</Text>
+            ))}
           </>
         )}
       </div>

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
@@ -24,9 +24,10 @@ const QuickStartContent: React.FC<QuickStartContentProps> = ({
   onQuickStartChange,
 }) => {
   const {
-    spec: { introduction, tasks, conclusion, nextQuickStart },
+    spec: { introduction, tasks, conclusion, nextQuickStart = [] },
   } = quickStart;
   const totalTasks = tasks.length;
+  const nextQS = nextQuickStart.length > 0 && nextQuickStart[0];
   return (
     <div className="co-quick-start-content">
       {taskNumber === -1 && (
@@ -51,7 +52,7 @@ const QuickStartContent: React.FC<QuickStartContentProps> = ({
           tasks={tasks}
           conclusion={conclusion}
           allTaskStatuses={allTaskStatuses}
-          nextQuickStart={nextQuickStart}
+          nextQuickStart={nextQS}
           onQuickStartChange={onQuickStartChange}
           onTaskSelect={onTaskSelect}
         />

diff --git a/...tend/packages/console-app/src/components/quick-starts/controller/QuickStartTaskReview.tsx b/...tend/packages/console-app/src/components/quick-starts/controller/QuickStartTaskReview.tsx
@@ -29,7 +29,7 @@ const QuickStartTaskReview: React.FC<QuickStartTaskReviewProps> = ({
   taskStatus,
   onTaskReview,
 }) => {
-  const { instructions, taskHelp } = review;
+  const { instructions, failedTaskHelp: taskHelp } = review;
   const { t } = useTranslation();
 
   const alertClassNames = cx('co-quick-start-task-review', {

diff --git a/frontend/packages/console-app/src/components/quick-starts/controller/QuickStartTasks.tsx b/frontend/packages/console-app/src/components/quick-starts/controller/QuickStartTasks.tsx
@@ -26,14 +26,12 @@ const QuickStartTasks: React.FC<QuickStartTaskProps> = ({
       {tasks
         .filter((_, index) => index <= taskNumber)
         .map((task, index) => {
-          const { title, description, review, recapitulation } = task;
+          const { title, description, review, summary } = task;
           const isActiveTask = index === taskNumber;
           const taskStatus = allTaskStatuses[index];
-          const recapitulationInstructions =
-            taskStatus === QuickStartTaskStatus.SUCCESS
-              ? recapitulation.success
-              : recapitulation.failed;
-          const taskInstructions = isActiveTask ? description : recapitulationInstructions;
+          const summaryInstructions =
+            taskStatus === QuickStartTaskStatus.SUCCESS ? summary?.success : summary?.failed;
+          const taskInstructions = isActiveTask ? description : summaryInstructions;
 
           return (
             <React.Fragment key={title}>

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
@@ -19,7 +19,7 @@ const i18nNS = 'quickstart';
 type QuickStartConclusionProps = React.ComponentProps<typeof QuickStartConclusion>;
 let wrapper: ShallowWrapper<QuickStartConclusionProps>;
 const props: QuickStartConclusionProps = {
-  tasks: getQuickStartByName('explore-serverless').spec.tasks,
+  tasks: getQuickStartByName('explore-pipelines').spec.tasks,
   allTaskStatuses: [
     QuickStartTaskStatus.SUCCESS,
     QuickStartTaskStatus.SUCCESS,

diff --git a/...onsole-app/src/components/quick-starts/controller/__tests__/QuickStartTaskReview.spec.tsx b/...onsole-app/src/components/quick-starts/controller/__tests__/QuickStartTaskReview.spec.tsx
@@ -47,6 +47,6 @@ describe('QuickStartTaskReview', () => {
         .find(SyncMarkdownView)
         .at(1)
         .props().content,
-    ).toEqual(props.review.taskHelp);
+    ).toEqual(props.review.failedTaskHelp);
   });
 });
diff --git a/...ges/console-app/src/components/quick-starts/controller/__tests__/QuickStartTasks.spec.tsx b/...ges/console-app/src/components/quick-starts/controller/__tests__/QuickStartTasks.spec.tsx
@@ -38,7 +38,7 @@ describe('QuickStartTasks', () => {
     expect(wrapper.find(TaskHeader).length).toBe(2);
   });
 
-  it('should render SyncMarkdownView with description or recapitulation according to task status', () => {
+  it('should render SyncMarkdownView with description or summary according to task status', () => {
     wrapper = shallow(
       <QuickStartTask
         {...props}
@@ -56,14 +56,14 @@ describe('QuickStartTasks', () => {
         .find(SyncMarkdownView)
         .at(0)
         .props().content,
-    ).toEqual(props.tasks[0].recapitulation.success);
+    ).toEqual(props.tasks[0].summary.success);
 
     expect(
       wrapper
         .find(SyncMarkdownView)
         .at(1)
         .props().content,
-    ).toEqual(props.tasks[1].recapitulation.failed);
+    ).toEqual(props.tasks[1].summary.failed);
 
     expect(
       wrapper