Merge pull request #54 from jeff-phillips-18/resource-card-names

Update resources cards to include app name. Fix styling issues.

frontend/package.json

@@ -37,10 +37,10 @@
   },
   "dependencies": {
     "@cloudmosaic/quickstarts": "0.0.11",
-    "@patternfly/patternfly": "4.87.3",
-    "@patternfly/react-core": "4.97.2",
-    "@patternfly/react-icons": "4.9.2",
-    "@patternfly/react-styles": "4.8.2",
+    "@patternfly/patternfly": "4.108.2",
+    "@patternfly/react-core": "4.128.2",
+    "@patternfly/react-icons": "4.10.11",
+    "@patternfly/react-styles": "4.10.11",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.0.4",
     "@testing-library/user-event": "^12.1.7",

frontend/src/app/App.scss

@@ -54,6 +54,15 @@ html, body, #root {
     }
   }
 
+  .pf-c-page__main-section {
+    .pf-l-gallery {
+      --pf-l-gallery--GridTemplateColumns--max-on-xl: 330px;
+      --pf-l-gallery--GridTemplateColumns--max-on-lg: 330px;
+      --pf-l-gallery--GridTemplateColumns--max-on-md: 330px;
+      --pf-l-gallery--GridTemplateColumns--max-on-sm: 330px;
+      --pf-l-gallery--GridTemplateColumns--max: 330px;
+    }
+  }
   // PF Overrides
   .pf-c-page__header {
     .pf-c-brand {

frontend/src/components/DocCardBadges.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
-import * as classNames from 'classnames';
-import { Tooltip } from '@patternfly/react-core';
+import { Label, Tooltip } from '@patternfly/react-core';
 import { SyncAltIcon, CheckCircleIcon } from '@patternfly/react-icons';
 import { QuickStartContext, QuickStartContextValues } from '@cloudmosaic/quickstarts';
 import { OdhDocument, OdhDocumentType } from '../types';
 import { isQuickStartComplete, isQuickStartInProgress } from '../utilities/quickStartUtils';
 import { DOC_TYPE_TOOLTIPS } from '../utilities/const';
-import { getDuration } from '../utilities/utils';
+import { getLabelColorForDocType, getDuration } from '../utilities/utils';
 import { getTextForDocType } from '../pages/learningCenter/learningCenterUtils';
 
 import './OdhCard.scss';
@@ -34,31 +33,27 @@ const DocCardBadges: React.FC<DocCardBadgesProps> = ({ odhDoc }) => {
   }, [qsContext, docType, docName]);
 
   const label = getTextForDocType(docType);
-  const typeBadgeClasses = classNames('odh-card__partner-badge odh-m-doc', {
-    'odh-m-documentation': docType === OdhDocumentType.Documentation,
-    'odh-m-tutorial': docType === OdhDocumentType.Tutorial,
-    'odh-m-quick-start': docType === OdhDocumentType.QuickStart,
-    'odh-m-how-to': docType === OdhDocumentType.HowTo,
-  });
-  const durationBadgeClasses = classNames('odh-card__partner-badge odh-m-doc odh-m-duration', {
-    'm-hidden': docType === OdhDocumentType.Documentation || duration === undefined,
-  });
-  const progressBadgeClasses = classNames('odh-card__partner-badge odh-m-doc', {
-    'm-hidden': !complete && !inProgress,
-    'odh-m-in-progress': inProgress,
-    'odh-m-complete': complete,
-  });
 
   return (
     <div className="odh-card__doc-badges">
       <Tooltip content={DOC_TYPE_TOOLTIPS[docType]}>
-        <div className={typeBadgeClasses}>{label}</div>
+        <Label color={getLabelColorForDocType(docType)}>{label}</Label>
       </Tooltip>
-      <div className={durationBadgeClasses}>{getDuration(duration)}</div>
-      <div className={progressBadgeClasses}>
-        {inProgress ? <SyncAltIcon /> : <CheckCircleIcon />}
-        {inProgress ? 'In progress' : 'Complete'}
-      </div>
+      {duration ? (
+        <Label variant="outline" color="grey">
+          {getDuration(duration)}
+        </Label>
+      ) : null}
+      {inProgress ? (
+        <Label variant="outline" color="purple" icon={<SyncAltIcon />}>
+          In Progress
+        </Label>
+      ) : null}
+      {complete ? (
+        <Label variant="outline" color="green" icon={<CheckCircleIcon />}>
+          Complete
+        </Label>
+      ) : null}
     </div>
   );
 };

frontend/src/components/OdhAppCard.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import * as classNames from 'classnames';
+import classNames from 'classnames';
 import {
   Card,
   CardHeader,
@@ -10,32 +10,24 @@ import {
   KebabToggle,
 } from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons';
-import { QuickStartContext, QuickStartContextValues } from '@cloudmosaic/quickstarts';
 import { OdhApplication } from '../types';
 import { getQuickStartLabel, launchQuickStart } from '../utilities/quickStartUtils';
 import BrandImage from './BrandImage';
 import SupportedAppTitle from './SupportedAppTitle';
+import { useQuickStartCardSelected } from './useQuickStartCardSelected';
 
 import './OdhCard.scss';
-import { makeCardVisible } from '../utilities/utils';
 
 type OdhAppCardProps = {
   odhApp: OdhApplication;
 };
 
 const OdhAppCard: React.FC<OdhAppCardProps> = ({ odhApp }) => {
   const [isOpen, setIsOpen] = React.useState(false);
-  const qsContext = React.useContext<QuickStartContextValues>(QuickStartContext);
-
-  const selected = React.useMemo(() => {
-    return qsContext.activeQuickStartID === odhApp.spec.quickStart;
-  }, [odhApp.spec.quickStart, qsContext.activeQuickStartID]);
-
-  React.useEffect(() => {
-    if (selected) {
-      makeCardVisible(odhApp.metadata.name);
-    }
-  }, [odhApp.metadata.name, selected]);
+  const [qsContext, selected] = useQuickStartCardSelected(
+    odhApp.spec.quickStart,
+    odhApp.metadata.name,
+  );
 
   const onToggle = (value) => {
     setIsOpen(value);
@@ -48,7 +40,6 @@ const OdhAppCard: React.FC<OdhAppCardProps> = ({ odhApp }) => {
   const onQuickStart = (e) => {
     e.preventDefault();
     launchQuickStart(odhApp.spec.quickStart, qsContext);
-    makeCardVisible(odhApp.metadata.name);
   };
 
   const dropdownItems = [