RHODS-2212: Updated cards according to microcopy recommendations.

data/applications/aikit.yaml

@@ -9,7 +9,7 @@ spec:
     The AI Kit is a set of AI software tools to accelerate end-to-end data science and analytics pipelines on Intel® architectures.
   route: ''
   img: images/oneapi.png
-  category: Self managed
+  category: Self-managed
   support: third party support
   csvName: aikit-operator
   docsLink: https://software.intel.com/content/www/us/en/develop/tools/oneapi/ai-analytics-toolkit.html

data/applications/openvino.yaml

@@ -9,7 +9,7 @@ spec:
     OpenVINO is an open source toolkit to help optimize deep learning performance and deploy using an inference engine onto Intel hardware.
   kfdefApplications: []
   img: images/openvino.svg
-  category: Self managed
+  category: Self-managed
   support: third party support
   csvName: openvino-operator
   docsLink: https://docs.openvinotoolkit.org/latest/index.html

frontend/src/__tests__/__snapshots__/EnabledApplications.spec.tsx.snap

@@ -4,4 +4,4 @@ exports[`EnabledApplications should display a message when loading applications
 
 exports[`EnabledApplications should display a message when there are no 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, view documentation, or get started with quick start instructions and tasks.</p></div></section><section class=\\"pf-c-page__main-section pf-m-fill\\"><div class=\\"pf-c-empty-state\\" data-test-id=\\"empty-empty-state\\"><div class=\\"pf-c-empty-state__content\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 512 512\\" aria-hidden=\\"true\\" role=\\"img\\" class=\\"pf-c-empty-state__icon\\"><path d=\\"M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z\\"></path></svg><h5 class=\\"pf-c-title pf-m-lg\\">No Components Found</h5></div></div></section>"`;
 
-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, view documentation, 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<img class=\\"odh-card__supported-image\\" src=\\"../images/CheckStar.svg\\" alt=\\"Red Hat certified and supported\\"></span></div><div class=\\"pf-c-card__body\\"><div class=\\"odh-card__partner-badge-container\\"><span class=\\"odh-card__partner-badge\\">Red Hat managed</span></div>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>"`;
+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, view documentation, 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<img class=\\"odh-card__supported-image\\" src=\\"../images/CheckStar.svg\\" alt=\\"Red Hat certified and supported\\"></span></div><div class=\\"pf-c-card__body\\"><div class=\\"odh-card__partner-badge-container\\"><span class=\\"odh-card__partner-badge\\">Red Hat managed</span></div>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 application<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></div></article></div></section></div>"`;

frontend/src/components/OdhAppCard.tsx

@@ -50,34 +50,29 @@ const OdhAppCard: React.FC<OdhAppCardProps> = ({ odhApp }) => {
       target="_blank"
       rel="noopener noreferrer"
     >
-      Documentation
+      View documentation
       <ExternalLinkAltIcon />
     </DropdownItem>,
   ];
 
+  const quickStartClasses = classNames('odh-dashboard__external-link', {
+    'm-hidden': !odhApp.spec.quickStart,
+    'm-disabled':
+      getLaunchStatus(odhApp.spec.quickStart || '', qsContext) === LaunchStatusEnum.Close,
+  });
+
+  ('odh-dashboard__external-link');
   if (odhApp.spec.link) {
     dropdownItems.push(
-      <DropdownItem
-        key="launch"
-        className="odh-dashboard__external-link"
-        href={odhApp.spec.link}
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        Launch
-        <ExternalLinkAltIcon />
+      <DropdownItem key="quick-start" className={quickStartClasses} href="#" onClick={onQuickStart}>
+        {`${getLaunchStatus(odhApp.spec.quickStart || '', qsContext)} quick start`}
       </DropdownItem>,
     );
   }
 
   const launchClasses = classNames('odh-card__footer__link', {
     'm-hidden': !odhApp.spec.link,
   });
-  const quickStartClasses = classNames('odh-card__footer__link', {
-    'm-hidden': !odhApp.spec.quickStart,
-    'm-disabled':
-      getLaunchStatus(odhApp.spec.quickStart || '', qsContext) === LaunchStatusEnum.Close,
-  });
 
   const cardFooter = (
     <CardFooter className="odh-card__footer">
@@ -87,12 +82,9 @@ const OdhAppCard: React.FC<OdhAppCardProps> = ({ odhApp }) => {
         target="_blank"
         rel="noopener noreferrer"
       >
-        Launch
+        Launch application
         <ExternalLinkAltIcon />
       </a>
-      <a className={quickStartClasses} href="#" onClick={onQuickStart}>
-        Quick start
-      </a>
     </CardFooter>
   );
 

frontend/src/utilities/quickStartUtils.ts

@@ -5,7 +5,7 @@ import {
 } from '@cloudmosaic/quickstarts';
 
 export enum LaunchStatusEnum {
-  Start = 'Start',
+  Open = 'Open',
   Continue = 'Continue',
   Restart = 'Restart',
   Close = 'Close',
@@ -16,20 +16,20 @@ export const getLaunchStatus = (
   qsContext?: QuickStartContextValues,
 ): LaunchStatusEnum => {
   if (!quickStartId || !qsContext || !qsContext.allQuickStartStates) {
-    return LaunchStatusEnum.Start;
+    return LaunchStatusEnum.Open;
   }
 
   const quickStartState = qsContext.allQuickStartStates[quickStartId];
 
   if (!quickStartState) {
-    return LaunchStatusEnum.Start;
+    return LaunchStatusEnum.Open;
   }
 
   if (quickStartState.taskNumber === -1) {
     if (qsContext.activeQuickStartID === quickStartId) {
       return LaunchStatusEnum.Close;
     }
-    return LaunchStatusEnum.Start;
+    return LaunchStatusEnum.Open;
   }
 
   if (
@@ -43,7 +43,7 @@ export const getLaunchStatus = (
     return LaunchStatusEnum.Continue;
   }
 
-  return LaunchStatusEnum.Start;
+  return LaunchStatusEnum.Open;
 };
 
 export const getQuickStartLabel = (