Update Quick start button text on Enabled page (red-hat-data-services#76

)
crobby · Jul 21, 2021 · 0f17456 · 0f17456
1 parent 3928505
commit 0f17456
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 37 deletions.
diff --git a/frontend/src/__tests__/__snapshots__/EnabledApplications.spec.tsx.snap b/frontend/src/__tests__/__snapshots__/EnabledApplications.spec.tsx.snap
@@ -12,5 +12,5 @@ exports[`EnabledApplications should display a message when there are no enabled
 
 exports[`EnabledApplications should display enabled applications 1`] = `
 "<section class=\\"pf-c-page__main-section pf-m-light odh-apps__heading\\"><div class=\\"pf-c-content odh-apps__heading__text\\"><h1 data-pf-content=\\"true\\" class=\\"\\">Enabled</h1><p data-pf-content=\\"true\\" class=\\"\\">Launch your enabled applications or get started with quick start instructions
- and tasks.</p></div></section><div class=\\"odh-dashboard__page-content\\"><section class=\\"pf-c-page__main-section\\"><div class=\\"pf-l-gallery pf-m-gutter odh-installed-apps__gallery\\"><article id=\\"jupyterhub\\" class=\\"pf-c-card pf-m-hoverable pf-m-selectable odh-card odh-tourable-card\\" tabindex=\\"0\\" data-ouia-component-type=\\"PF4/Card\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Card-1\\"><div class=\\"pf-c-card__header\\"><img class=\\"pf-c-brand odh-card__header-brand\\" src=\\"images/jupyterhub.svg\\" alt=\\"JupyterHub\\"><div class=\\"pf-c-dropdown pf-m-align-right\\" data-ouia-component-type=\\"PF4/Dropdown\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Dropdown-1\\"><button aria-label=\\"Actions\\" id=\\"pf-dropdown-toggle-id-0\\" class=\\"pf-c-dropdown__toggle pf-m-plain\\" type=\\"button\\" aria-expanded=\\"false\\" aria-haspopup=\\"true\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 192 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z\\"></path></svg></button></div></div><div class=\\"pf-c-card__title\\"><span class=\\"odh-card__title-supported\\">JupyterHub</span></div><div class=\\"pf-c-card__body\\">A multi-user version of the notebook designed for companies, classrooms and research labs.</div><div class=\\"pf-c-card__footer odh-card__footer\\"><a class=\\"odh-card__footer__link\\" href=\\"https://jupyterhub-redhat-ods-applications.apps.jephilli-4-9-06-21-0953.devcluster.openshift.com\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">Launch<svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 512 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z\\"></path></svg></a><a class=\\"odh-card__footer__link\\" href=\\"#\\">Start</a></div></article></div></section></div>"
+ and tasks.</p></div></section><div class=\\"odh-dashboard__page-content\\"><section class=\\"pf-c-page__main-section\\"><div class=\\"pf-l-gallery pf-m-gutter odh-installed-apps__gallery\\"><article id=\\"jupyterhub\\" class=\\"pf-c-card pf-m-hoverable pf-m-selectable odh-card odh-tourable-card\\" tabindex=\\"0\\" data-ouia-component-type=\\"PF4/Card\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Card-1\\"><div class=\\"pf-c-card__header\\"><img class=\\"pf-c-brand odh-card__header-brand\\" src=\\"images/jupyterhub.svg\\" alt=\\"JupyterHub\\"><div class=\\"pf-c-dropdown pf-m-align-right\\" data-ouia-component-type=\\"PF4/Dropdown\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Dropdown-1\\"><button aria-label=\\"Actions\\" id=\\"pf-dropdown-toggle-id-0\\" class=\\"pf-c-dropdown__toggle pf-m-plain\\" type=\\"button\\" aria-expanded=\\"false\\" aria-haspopup=\\"true\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 192 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z\\"></path></svg></button></div></div><div class=\\"pf-c-card__title\\"><span class=\\"odh-card__title-supported\\">JupyterHub</span></div><div class=\\"pf-c-card__body\\">A multi-user version of the notebook designed for companies, classrooms and research labs.</div><div class=\\"pf-c-card__footer odh-card__footer\\"><a class=\\"odh-card__footer__link\\" href=\\"https://jupyterhub-redhat-ods-applications.apps.jephilli-4-9-06-21-0953.devcluster.openshift.com\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">Launch<svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 512 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z\\"></path></svg></a><a class=\\"odh-card__footer__link\\" href=\\"#\\">Quick start</a></div></article></div></section></div>"
 `;
diff --git a/frontend/src/__tests__/__snapshots__/ExploreApplications.spec.tsx.snap b/frontend/src/__tests__/__snapshots__/ExploreApplications.spec.tsx.snap
diff --git a/frontend/src/components/OdhAppCard.tsx b/frontend/src/components/OdhAppCard.tsx
@@ -2,16 +2,16 @@ import React from 'react';
 import classNames from 'classnames';
 import {
   Card,
-  CardHeader,
   CardBody,
   CardFooter,
+  CardHeader,
   Dropdown,
   DropdownItem,
   KebabToggle,
 } from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 import { OdhApplication } from '../types';
-import { getQuickStartLabel, launchQuickStart } from '../utilities/quickStartUtils';
+import { getLaunchStatus, launchQuickStart, LaunchStatusEnum } from '../utilities/quickStartUtils';
 import BrandImage from './BrandImage';
 import SupportedAppTitle from './SupportedAppTitle';
 import { useQuickStartCardSelected } from './useQuickStartCardSelected';
@@ -75,6 +75,8 @@ const OdhAppCard: React.FC<OdhAppCardProps> = ({ odhApp }) => {
   });
   const quickStartClasses = classNames('odh-card__footer__link', {
     'm-hidden': !odhApp.spec.quickStart,
+    'm-disabled':
+      getLaunchStatus(odhApp.spec.quickStart || '', qsContext) === LaunchStatusEnum.Close,
   });
 
   const cardFooter = (
@@ -89,7 +91,7 @@ const OdhAppCard: React.FC<OdhAppCardProps> = ({ odhApp }) => {
         <ExternalLinkAltIcon />
       </a>
       <a className={quickStartClasses} href="#" onClick={onQuickStart}>
-        {getQuickStartLabel(odhApp.spec.quickStart, qsContext)}
+        Quick start
       </a>
     </CardFooter>
   );

diff --git a/frontend/src/components/OdhCard.scss b/frontend/src/components/OdhCard.scss
@@ -136,6 +136,10 @@
       &.m-hidden {
         visibility: hidden;
       }
+      &.m-disabled {
+        pointer-events: none;
+        color: var(--pf-global--disabled-color--100);
+      }
     }
   }
 }
diff --git a/frontend/src/pages/exploreApplication/ExploreApplications.scss b/frontend/src/pages/exploreApplication/ExploreApplications.scss
@@ -2,11 +2,5 @@
   &__body {
     display: flex;
     flex-direction: column;
-    &.m-side-panel-open {
-      .odh-dashboard__page-content {
-        border-right: 0;
-        margin-right: 0;
-      }
-    }
   }
 }
diff --git a/frontend/src/pages/exploreApplication/ExploreApplications.tsx b/frontend/src/pages/exploreApplication/ExploreApplications.tsx
@@ -36,24 +36,21 @@ const ExploreApplicationsInner: React.FC<ExploreApplicationsInnerProps> = React.
       'm-side-panel-open': !!selectedComponent,
     });
     return (
-      <ApplicationsPage
-        title="Explore"
-        description={description}
-        loaded={loaded}
-        empty={isEmpty}
-        loadError={loadError}
-      >
-        {!isEmpty ? (
-          <Drawer isExpanded={!!selectedComponent} isInline>
-            <DrawerContent
-              panelContent={
-                <GetStartedPanel
-                  onClose={() => updateSelection()}
-                  selectedApp={selectedComponent}
-                />
-              }
+      <Drawer isExpanded={!!selectedComponent} isInline>
+        <DrawerContent
+          panelContent={
+            <GetStartedPanel onClose={() => updateSelection()} selectedApp={selectedComponent} />
+          }
+        >
+          <DrawerContentBody className={bodyClasses}>
+            <ApplicationsPage
+              title="Explore"
+              description={description}
+              loaded={loaded}
+              empty={isEmpty}
+              loadError={loadError}
             >
-              <DrawerContentBody className={bodyClasses}>
+              {!isEmpty ? (
                 <div className="odh-dashboard__page-content">
                   <PageSection>
                     <Gallery className="odh-explore-apps__gallery" hasGutter>
@@ -68,11 +65,11 @@ const ExploreApplicationsInner: React.FC<ExploreApplicationsInnerProps> = React.
                     </Gallery>
                   </PageSection>
                 </div>
-              </DrawerContentBody>
-            </DrawerContent>
-          </Drawer>
-        ) : null}
-      </ApplicationsPage>
+              ) : null}
+            </ApplicationsPage>
+          </DrawerContentBody>
+        </DrawerContent>
+      </Drawer>
     );
   },
 );

diff --git a/frontend/src/pages/exploreApplication/GetStartedPanel.scss b/frontend/src/pages/exploreApplication/GetStartedPanel.scss
@@ -1,7 +1,4 @@
 .odh-get-started {
-  border-top: solid 1px var(--pf-global--BorderColor--100);
-  margin-top: var(--pf-global--spacer--md);
-
   &__header {
     display: flex;
     flex-direction: column;