fix Quickstart subtitle blocking

openshift · Oct 1, 2020 · 02c71ec · 02c71ec
1 parent 2dd047c
commit 02c71ec
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 11 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
@@ -22,4 +22,7 @@
   &__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
@@ -12,6 +12,8 @@ import {
   DrawerCloseButton,
   DrawerContentBody,
   Title,
+  Text,
+  TextVariants,
 } from '@patternfly/react-core';
 import { RootState } from '@console/internal/redux';
 import { AsyncComponent } from '@console/internal/components/utils';
@@ -78,10 +80,12 @@ const QuickStartDrawer: React.FC<QuickStartDrawerProps> = ({
               size="xl"
               style={{ marginRight: 'var(--pf-global--spacer--md)' }}
             >
-              {quickStart?.spec.displayName}
-            </Title>
-            <Title headingLevel="h6" size="md" className="text-secondary">
-              {`${quickStart?.spec.duration} minutes`}
+              {quickStart?.spec.displayName}{' '}
+              <span className="co-quick-start-drawer__duration">
+                <Text component={TextVariants.small} className="text-secondary">
+                  {`${quickStart?.spec.duration} minutes`}
+                </Text>
+              </span>
             </Title>
           </div>
           <DrawerActions>

diff --git a/...end/packages/console-app/src/components/quick-starts/controller/QuickStartTaskHeader.scss b/...end/packages/console-app/src/components/quick-starts/controller/QuickStartTaskHeader.scss
@@ -16,6 +16,10 @@
     margin-right: var(--pf-global--spacer--md) !important;
   }
 
+  &__subtitle {
+    display: inline-block;
+  }
+
   &__title-success {
     color: var(--pf-global--palette--green-500) !important;
   }

diff --git a/...tend/packages/console-app/src/components/quick-starts/controller/QuickStartTaskHeader.tsx b/...tend/packages/console-app/src/components/quick-starts/controller/QuickStartTaskHeader.tsx
@@ -71,12 +71,13 @@ const QuickStartTaskHeader: React.FC<QuickStartTaskHeaderProps> = ({
       <Title headingLevel="h3" size={size} className={classNames}>
         <TaskIcon taskIndex={taskIndex} taskStatus={taskStatus} isActiveTask={isActiveTask} />
         {title}
+        {isActiveTask && subtitle && (
+          <Text component={TextVariants.a} className="text-secondary">
+            {' '}
+            {subtitle}
+          </Text>
+        )}
       </Title>
-      {isActiveTask && subtitle && (
-        <Text component={TextVariants.small} className="text-secondary">
-          {subtitle}
-        </Text>
-      )}
     </span>
   );
 

diff --git a/...onsole-app/src/components/quick-starts/controller/__tests__/QuickStartTaskHeader.spec.tsx b/...onsole-app/src/components/quick-starts/controller/__tests__/QuickStartTaskHeader.spec.tsx
@@ -33,10 +33,9 @@ describe('QuickStartTaskHeader', () => {
         .find(WizardNavItem)
         .dive()
         .find(Text)
-        .props().children,
+        .props().children[1],
     ).toEqual(props.subtitle);
   });
-
   it('should not render subtitle if task is not active', () => {
     wrapper = shallow(<QuickStartTaskHeader {...props} isActiveTask={false} />);
     expect(