diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 4bed77b7ce..3df1f7a945 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -10,10 +10,10 @@ "license": "ISC", "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", @@ -2131,9 +2131,9 @@ } }, "node_modules/@patternfly/patternfly": { - "version": "4.87.3", - "resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-4.87.3.tgz", - "integrity": "sha512-hDNMPa7B1zKD8LWFZO4SS5hC/N+yvuci2sAn8HJd+EIbAvbMAUkRsyZ0/XO3BG3RVtpSlgq7q8x1pAHC/FTFuA==" + "version": "4.108.2", + "resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-4.108.2.tgz", + "integrity": "sha512-z0VB+1CXcH+eoClYQABwapX5FURSvm1nPr6asLWwg/Z4Wuxs0RjZpC6Gb+KRm8nGQwSAcMKZY1jLfPqVnznQnw==" }, "node_modules/@patternfly/react-catalog-view-extension": { "version": "4.11.25", @@ -2156,51 +2156,14 @@ "resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-4.103.6.tgz", "integrity": "sha512-veWpHv/Dlk0P7tu96QUjLzD2Aq4IysUSGOjGPXlbb/KOUfnIrErLRmQnljY01ykXLJ7kxQSnC3yaJqCU+4fDPQ==" }, - "node_modules/@patternfly/react-catalog-view-extension/node_modules/@patternfly/react-core": { - "version": "4.121.1", - "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-4.121.1.tgz", - "integrity": "sha512-WIlh7Wd4o4r0PA2+9/fPcOxMAnc2H/InPx8rulJzD9a8KdUevl7+XDtKok6p6grKRUriV5wKPQyfZrxcb5VVHw==", - "dependencies": { - "@patternfly/react-icons": "^4.10.7", - "@patternfly/react-styles": "^4.10.7", - "@patternfly/react-tokens": "^4.11.8", - "focus-trap": "6.2.2", - "react-dropzone": "9.0.0", - "tippy.js": "5.1.2", - "tslib": "1.13.0" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0", - "react-dom": "^16.8.0 || ^17.0.0" - } - }, - "node_modules/@patternfly/react-catalog-view-extension/node_modules/@patternfly/react-icons": { - "version": "4.10.7", - "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-4.10.7.tgz", - "integrity": "sha512-CiHYDOS8jrxNiy/KIxv9vPqg3cie4SzsbQKh+eW8lj41x68IrgILiw3VvjcJeVXXJDRW36T7u3IPKjMI6zuoyA==", - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0", - "react-dom": "^16.8.0 || ^17.0.0" - } - }, - "node_modules/@patternfly/react-catalog-view-extension/node_modules/@patternfly/react-styles": { - "version": "4.10.7", - "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-4.10.7.tgz", - "integrity": "sha512-oA9R1dXAJaKhj0/1z/uf2Z1wzsQ4jGQw2F8alPBagbDLyZD+pvUmElBr7o2Ucz/fm+/pLcphekCkGEVtyV3jOA==" - }, - "node_modules/@patternfly/react-catalog-view-extension/node_modules/tslib": { - "version": "1.13.0", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz", - "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==" - }, "node_modules/@patternfly/react-core": { - "version": "4.97.2", - "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-4.97.2.tgz", - "integrity": "sha512-Xl/l/+OjWVtWnbb9Kw//1bn+6KEM9aOc1nk+Vm6D8wlbuuz+RAFBc0rZjPWuq00YYnVA+sExESe0W2d3wdn/SQ==", + "version": "4.128.2", + "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-4.128.2.tgz", + "integrity": "sha512-EhrxE3+V7AYVhbERrcRVH7oY6TeVRqqzaRx8HXWnyn/hxE2rTzhhaLHyjotxk9mGYmIYtMuMebBHFbX0g+6Ymg==", "dependencies": { - "@patternfly/react-icons": "^4.9.2", - "@patternfly/react-styles": "^4.8.2", - "@patternfly/react-tokens": "^4.10.2", + "@patternfly/react-icons": "^4.10.11", + "@patternfly/react-styles": "^4.10.11", + "@patternfly/react-tokens": "^4.11.12", "focus-trap": "6.2.2", "react-dropzone": "9.0.0", "tippy.js": "5.1.2", @@ -2217,18 +2180,18 @@ "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==" }, "node_modules/@patternfly/react-icons": { - "version": "4.9.2", - "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-4.9.2.tgz", - "integrity": "sha512-3PY81A9mj9YyUpznSWhcWMKHRyGWNgZ1IDYqbMva7Q8wgd0fjsiTJ+5zAp4YQLo1mA8KwYX9v5s37hK8XiTbAA==", + "version": "4.10.11", + "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-4.10.11.tgz", + "integrity": "sha512-Qyxwvghb9HZB2do3UVw4EzJSvqWaw/AEw6mFzqshZiIm2oPrL4NkvavwDt5WRicz5sbyWTZluB4grOj33PEpww==", "peerDependencies": { "react": "^16.8.0 || ^17.0.0", "react-dom": "^16.8.0 || ^17.0.0" } }, "node_modules/@patternfly/react-styles": { - "version": "4.8.2", - "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-4.8.2.tgz", - "integrity": "sha512-JLVZTUYa8LIyASLvfiAgByLgNcg+OPkuXSh8Za5KdjqrBaNVQ3Wlul+oWQGwlGjbq7KSiyDg1oWemxOuLJH1VQ==" + "version": "4.10.11", + "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-4.10.11.tgz", + "integrity": "sha512-M+NhTtAXreJzMAV2Z1P2pbnKpRYnWbB5iZ6mxB0tkxxG+KyZ0/se8M5rUepLOE/n7BMq8IiOjPJ9zu/vpWj0gA==" }, "node_modules/@patternfly/react-table": { "version": "4.23.2", @@ -2248,15 +2211,20 @@ "react-dom": "^16.8.0 || ^17.0.0" } }, + "node_modules/@patternfly/react-table/node_modules/@patternfly/patternfly": { + "version": "4.87.3", + "resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-4.87.3.tgz", + "integrity": "sha512-hDNMPa7B1zKD8LWFZO4SS5hC/N+yvuci2sAn8HJd+EIbAvbMAUkRsyZ0/XO3BG3RVtpSlgq7q8x1pAHC/FTFuA==" + }, "node_modules/@patternfly/react-table/node_modules/tslib": { "version": "1.13.0", "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz", "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==" }, "node_modules/@patternfly/react-tokens": { - "version": "4.11.8", - "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-4.11.8.tgz", - "integrity": "sha512-k3UwsnWRoHHYbFbiqmUHtkrAPtw6D8BZLB1tPGzdXBlqQXRX1t8xukgDcTSUWo6wOPVdk8WrOgmWMy0u0Tk+sw==" + "version": "4.11.12", + "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-4.11.12.tgz", + "integrity": "sha512-PTEc2CQa/BqcDcUwT0V02l+ZoJa+bheLlh9R5g1+JQ6vlqH31gk0dpHmj6goEcSDLkbvMJgr3kNZdJsP1VdBMg==" }, "node_modules/@rollup/plugin-node-resolve": { "version": "7.1.3", @@ -35248,9 +35216,9 @@ } }, "@patternfly/patternfly": { - "version": "4.87.3", - "resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-4.87.3.tgz", - "integrity": "sha512-hDNMPa7B1zKD8LWFZO4SS5hC/N+yvuci2sAn8HJd+EIbAvbMAUkRsyZ0/XO3BG3RVtpSlgq7q8x1pAHC/FTFuA==" + "version": "4.108.2", + "resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-4.108.2.tgz", + "integrity": "sha512-z0VB+1CXcH+eoClYQABwapX5FURSvm1nPr6asLWwg/Z4Wuxs0RjZpC6Gb+KRm8nGQwSAcMKZY1jLfPqVnznQnw==" }, "@patternfly/react-catalog-view-extension": { "version": "4.11.25", @@ -35268,47 +35236,17 @@ "version": "4.103.6", "resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-4.103.6.tgz", "integrity": "sha512-veWpHv/Dlk0P7tu96QUjLzD2Aq4IysUSGOjGPXlbb/KOUfnIrErLRmQnljY01ykXLJ7kxQSnC3yaJqCU+4fDPQ==" - }, - "@patternfly/react-core": { - "version": "4.121.1", - "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-4.121.1.tgz", - "integrity": "sha512-WIlh7Wd4o4r0PA2+9/fPcOxMAnc2H/InPx8rulJzD9a8KdUevl7+XDtKok6p6grKRUriV5wKPQyfZrxcb5VVHw==", - "requires": { - "@patternfly/react-icons": "^4.10.7", - "@patternfly/react-styles": "^4.10.7", - "@patternfly/react-tokens": "^4.11.8", - "focus-trap": "6.2.2", - "react-dropzone": "9.0.0", - "tippy.js": "5.1.2", - "tslib": "1.13.0" - } - }, - "@patternfly/react-icons": { - "version": "4.10.7", - "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-4.10.7.tgz", - "integrity": "sha512-CiHYDOS8jrxNiy/KIxv9vPqg3cie4SzsbQKh+eW8lj41x68IrgILiw3VvjcJeVXXJDRW36T7u3IPKjMI6zuoyA==", - "requires": {} - }, - "@patternfly/react-styles": { - "version": "4.10.7", - "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-4.10.7.tgz", - "integrity": "sha512-oA9R1dXAJaKhj0/1z/uf2Z1wzsQ4jGQw2F8alPBagbDLyZD+pvUmElBr7o2Ucz/fm+/pLcphekCkGEVtyV3jOA==" - }, - "tslib": { - "version": "1.13.0", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz", - "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==" } } }, "@patternfly/react-core": { - "version": "4.97.2", - "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-4.97.2.tgz", - "integrity": "sha512-Xl/l/+OjWVtWnbb9Kw//1bn+6KEM9aOc1nk+Vm6D8wlbuuz+RAFBc0rZjPWuq00YYnVA+sExESe0W2d3wdn/SQ==", + "version": "4.128.2", + "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-4.128.2.tgz", + "integrity": "sha512-EhrxE3+V7AYVhbERrcRVH7oY6TeVRqqzaRx8HXWnyn/hxE2rTzhhaLHyjotxk9mGYmIYtMuMebBHFbX0g+6Ymg==", "requires": { - "@patternfly/react-icons": "^4.9.2", - "@patternfly/react-styles": "^4.8.2", - "@patternfly/react-tokens": "^4.10.2", + "@patternfly/react-icons": "^4.10.11", + "@patternfly/react-styles": "^4.10.11", + "@patternfly/react-tokens": "^4.11.12", "focus-trap": "6.2.2", "react-dropzone": "9.0.0", "tippy.js": "5.1.2", @@ -35323,15 +35261,15 @@ } }, "@patternfly/react-icons": { - "version": "4.9.2", - "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-4.9.2.tgz", - "integrity": "sha512-3PY81A9mj9YyUpznSWhcWMKHRyGWNgZ1IDYqbMva7Q8wgd0fjsiTJ+5zAp4YQLo1mA8KwYX9v5s37hK8XiTbAA==", + "version": "4.10.11", + "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-4.10.11.tgz", + "integrity": "sha512-Qyxwvghb9HZB2do3UVw4EzJSvqWaw/AEw6mFzqshZiIm2oPrL4NkvavwDt5WRicz5sbyWTZluB4grOj33PEpww==", "requires": {} }, "@patternfly/react-styles": { - "version": "4.8.2", - "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-4.8.2.tgz", - "integrity": "sha512-JLVZTUYa8LIyASLvfiAgByLgNcg+OPkuXSh8Za5KdjqrBaNVQ3Wlul+oWQGwlGjbq7KSiyDg1oWemxOuLJH1VQ==" + "version": "4.10.11", + "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-4.10.11.tgz", + "integrity": "sha512-M+NhTtAXreJzMAV2Z1P2pbnKpRYnWbB5iZ6mxB0tkxxG+KyZ0/se8M5rUepLOE/n7BMq8IiOjPJ9zu/vpWj0gA==" }, "@patternfly/react-table": { "version": "4.23.2", @@ -35347,6 +35285,11 @@ "tslib": "1.13.0" }, "dependencies": { + "@patternfly/patternfly": { + "version": "4.87.3", + "resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-4.87.3.tgz", + "integrity": "sha512-hDNMPa7B1zKD8LWFZO4SS5hC/N+yvuci2sAn8HJd+EIbAvbMAUkRsyZ0/XO3BG3RVtpSlgq7q8x1pAHC/FTFuA==" + }, "tslib": { "version": "1.13.0", "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz", @@ -35355,9 +35298,9 @@ } }, "@patternfly/react-tokens": { - "version": "4.11.8", - "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-4.11.8.tgz", - "integrity": "sha512-k3UwsnWRoHHYbFbiqmUHtkrAPtw6D8BZLB1tPGzdXBlqQXRX1t8xukgDcTSUWo6wOPVdk8WrOgmWMy0u0Tk+sw==" + "version": "4.11.12", + "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-4.11.12.tgz", + "integrity": "sha512-PTEc2CQa/BqcDcUwT0V02l+ZoJa+bheLlh9R5g1+JQ6vlqH31gk0dpHmj6goEcSDLkbvMJgr3kNZdJsP1VdBMg==" }, "@rollup/plugin-node-resolve": { "version": "7.1.3", diff --git a/frontend/package.json b/frontend/package.json index 86015533f8..23565b5f65 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/src/app/App.scss b/frontend/src/app/App.scss index cfb3466e53..35f5ca2056 100644 --- a/frontend/src/app/App.scss +++ b/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 { diff --git a/frontend/src/components/DocCardBadges.tsx b/frontend/src/components/DocCardBadges.tsx index 815a1b3a78..ee85ccc95e 100644 --- a/frontend/src/components/DocCardBadges.tsx +++ b/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 = ({ 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 (
-
{label}
+ -
{getDuration(duration)}
-
- {inProgress ? : } - {inProgress ? 'In progress' : 'Complete'} -
+ {duration ? ( + + ) : null} + {inProgress ? ( + + ) : null} + {complete ? ( + + ) : null}
); }; diff --git a/frontend/src/components/OdhAppCard.tsx b/frontend/src/components/OdhAppCard.tsx index 397a7670ec..353054b444 100644 --- a/frontend/src/components/OdhAppCard.tsx +++ b/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,14 +10,13 @@ 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; @@ -25,17 +24,10 @@ type OdhAppCardProps = { const OdhAppCard: React.FC = ({ odhApp }) => { const [isOpen, setIsOpen] = React.useState(false); - const qsContext = React.useContext(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 = ({ odhApp }) => { const onQuickStart = (e) => { e.preventDefault(); launchQuickStart(odhApp.spec.quickStart, qsContext); - makeCardVisible(odhApp.metadata.name); }; const dropdownItems = [ diff --git a/frontend/src/components/OdhCard.scss b/frontend/src/components/OdhCard.scss index 645bf53d44..9253c6084a 100644 --- a/frontend/src/components/OdhCard.scss +++ b/frontend/src/components/OdhCard.scss @@ -17,13 +17,15 @@ cursor: default !important; } - &__doc-title.pf-c-card__title { - padding-bottom: 0; + &__doc-title { + &.pf-c-card__title { + padding-bottom: 0; + } } &__header-brand { display: flex; - height: 50px; + height: 40px; max-width: 33%; } @@ -73,53 +75,6 @@ > svg { margin-right: var(--pf-global--spacer--xs); } - &.m-hidden { - display: none; - } - &.odh-m-documentation { - background-color: var(--pf-global--palette--gold-50); - border-color: var(--pf-global--palette--orange-100); - color: var(--pf-global--palette--gold-700); - } - - &.odh-m-how-to { - background-color: var(--pf-global--palette--black-150); - border-color: var(--pf-global--BorderColor--100); - color: var(--pf-global--Color--100); - } - - &.odh-m-tutorial { - background-color: var(--pf-global--palette--cyan-50); - border-color: var(--pf-global--palette--cyan-100); - color: var(--pf-global--default-color--300); - } - - &.odh-m-quick-start { - background-color: var(--pf-global--palette--green-50); - border-color: var(--pf-global--palette--green-100); - color: var(--pf-global--success-color--200); - } - - &.odh-m-in-progress { - background-color: var(--pf-global--palette--purple-50); - border-color: var(--pf-global--palette--purple-100); - color: var(--pf-global--palette--purple-700); - > svg { - color: var(--pf-global--palette--purple-500); - } - } - - &.odh-m-complete { - background-color: var(--pf-global--BackgroundColor--100); - border-color: var(--pf-global--palette--purple-100); - color: var(--pf-global--palette--green-500); - } - - &.odh-m-duration { - background-color: var(--pf-global--BackgroundColor--100); - border-color: var(--pf-global--BorderColor--100); - color: var(--pf-global--Color--100); - } } } @@ -127,8 +82,21 @@ display: flex; flex-wrap: wrap; margin-top: var(--pf-global--spacer--sm); - .odh-card__partner-badge:not(:last-of-type) { - margin-right: var(--pf-global--spacer--xs); + .pf-c-label { + font-size: var(--pf-c-label--FontSize); + margin-bottom: var(--pf-global--spacer--sm); + &:not(:last-of-type) { + margin-right: var(--pf-global--spacer--xs); + } + } + } + + .pf-c-card__body { + .odh-card__body-text { + display: -webkit-box; + -webkit-line-clamp: 4; + -webkit-box-orient: vertical; + overflow: hidden; } } diff --git a/frontend/src/components/OdhDocCard.tsx b/frontend/src/components/OdhDocCard.tsx index 5b9c47e46c..6969067e30 100644 --- a/frontend/src/components/OdhDocCard.tsx +++ b/frontend/src/components/OdhDocCard.tsx @@ -1,8 +1,7 @@ import React from 'react'; -import * as classNames from 'classnames'; -import { Card, CardBody, CardFooter, CardHeader, CardTitle } from '@patternfly/react-core'; +import classNames from 'classnames'; +import { Card, CardBody, CardFooter, CardHeader, CardTitle, Tooltip } from '@patternfly/react-core'; import { ExternalLinkAltIcon, StarIcon } from '@patternfly/react-icons'; -import { QuickStartContext, QuickStartContextValues } from '@cloudmosaic/quickstarts'; import { OdhDocument, OdhDocumentType } from '../types'; import { getLaunchStatus, @@ -12,7 +11,7 @@ import { } from '../utilities/quickStartUtils'; import BrandImage from './BrandImage'; import DocCardBadges from './DocCardBadges'; -import { makeCardVisible } from '../utilities/utils'; +import { useQuickStartCardSelected } from './useQuickStartCardSelected'; import './OdhCard.scss'; @@ -28,21 +27,10 @@ const RIGHT_JUSTIFIED_STATUSES = [ LaunchStatusEnum.Close, ]; const OdhDocCard: React.FC = ({ odhDoc, favorite, updateFavorite }) => { - const qsContext = React.useContext(QuickStartContext); - - const selected = React.useMemo(() => { - return ( - odhDoc.metadata.type === OdhDocumentType.QuickStart && - qsContext.activeQuickStartID === odhDoc.metadata.name - ); - }, [odhDoc.metadata.name, odhDoc.metadata.type, qsContext.activeQuickStartID]); - - React.useEffect(() => { - if (selected) { - makeCardVisible(odhDoc.metadata.name); - } - }, [odhDoc.metadata.name, selected]); - + const [qsContext, selected] = useQuickStartCardSelected( + odhDoc.metadata.name, + odhDoc.metadata.name, + ); const footerClassName = React.useMemo(() => { if (odhDoc.metadata.type !== OdhDocumentType.QuickStart) { return 'odh-card__footer'; @@ -54,19 +42,9 @@ const OdhDocCard: React.FC = ({ odhDoc, favorite, updateFavorit }); }, [odhDoc.metadata.name, odhDoc.metadata.type, qsContext]); - if (odhDoc.metadata.type === OdhDocumentType.QuickStart) { - const quickStart = qsContext.allQuickStarts?.find( - (qs) => qs.metadata.name === odhDoc.metadata.name, - ); - if (!quickStart) { - return null; - } - } - const onQuickStart = (e) => { e.preventDefault(); launchQuickStart(odhDoc.metadata.name, qsContext); - makeCardVisible(odhDoc.metadata.name); }; const renderDocLink = () => { @@ -137,9 +115,14 @@ const OdhDocCard: React.FC = ({ odhDoc, favorite, updateFavorit {odhDoc.spec.displayName} +
by {odhDoc.spec.appDisplayName}
 - {odhDoc.spec.description} + + + {odhDoc.spec.description} + + {renderDocLink()} ); diff --git a/frontend/src/components/OdhDocListItem.tsx b/frontend/src/components/OdhDocListItem.tsx index 82e5f7a19b..ad652ed460 100644 --- a/frontend/src/components/OdhDocListItem.tsx +++ b/frontend/src/components/OdhDocListItem.tsx @@ -1,12 +1,12 @@ import React from 'react'; -import * as classNames from 'classnames'; +import classNames from 'classnames'; import { Tooltip } from '@patternfly/react-core'; import { ExternalLinkAltIcon, StarIcon } from '@patternfly/react-icons'; -import { QuickStartContext, QuickStartContextValues } from '@cloudmosaic/quickstarts'; import { OdhDocument, OdhDocumentType } from '../types'; import { getQuickStartLabel, launchQuickStart } from '../utilities/quickStartUtils'; import { DOC_TYPE_TOOLTIPS } from '../utilities/const'; -import { getDuration, makeCardVisible } from '../utilities/utils'; +import { getDuration } from '../utilities/utils'; +import { useQuickStartCardSelected } from './useQuickStartCardSelected'; import './OdhListItem.scss'; @@ -17,34 +17,11 @@ type OdhDocCardProps = { }; const OdhDocListItem: React.FC = ({ odhDoc, favorite, updateFavorite }) => { - const qsContext = React.useContext(QuickStartContext); - - const selected = React.useMemo(() => { - return ( - odhDoc.metadata.type === OdhDocumentType.QuickStart && - qsContext.activeQuickStartID === odhDoc.metadata.name - ); - }, [odhDoc.metadata.name, odhDoc.metadata.type, qsContext.activeQuickStartID]); - - React.useEffect(() => { - if (selected) { - makeCardVisible(odhDoc.metadata.name); - } - }, [odhDoc.metadata.name, selected]); - - if (odhDoc.metadata.type === OdhDocumentType.QuickStart) { - const quickStart = qsContext.allQuickStarts?.find( - (qs) => qs.metadata.name === odhDoc.metadata.name, - ); - if (!quickStart) { - return null; - } - } + const [qsContext] = useQuickStartCardSelected(odhDoc.metadata.name, odhDoc.metadata.name); const onQuickStart = (e) => { e.preventDefault(); launchQuickStart(odhDoc.metadata.name, qsContext); - makeCardVisible(odhDoc.metadata.name); }; const renderTypeBadge = () => { @@ -110,14 +87,30 @@ const OdhDocListItem: React.FC = ({ odhDoc, favorite, updateFav
- {odhDoc.spec.displayName} + + {odhDoc.spec.displayName} + +
+
+ + {odhDoc.spec.description} +
-
{odhDoc.spec.description}
- {odhDoc.spec.appDisplayName || ''} + {odhDoc.spec.appDisplayName ? ( +
+ + {odhDoc.spec.appDisplayName} + +
+ ) : null} {odhDoc.spec.provider ? ( -
by {odhDoc.spec.provider}
+
+ + by {odhDoc.spec.provider} + +
) : null}
{renderTypeBadge()}
diff --git a/frontend/src/components/OdhExploreCard.tsx b/frontend/src/components/OdhExploreCard.tsx index b5ee06cd87..35cdf74faa 100644 --- a/frontend/src/components/OdhExploreCard.tsx +++ b/frontend/src/components/OdhExploreCard.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import * as classNames from 'classnames'; +import classNames from 'classnames'; import { Card, CardHeader, CardBody } from '@patternfly/react-core'; import { OdhApplication } from '../types'; import BrandImage from './BrandImage'; diff --git a/frontend/src/components/useQuickStartCardSelected.ts b/frontend/src/components/useQuickStartCardSelected.ts new file mode 100644 index 0000000000..61163eac20 --- /dev/null +++ b/frontend/src/components/useQuickStartCardSelected.ts @@ -0,0 +1,22 @@ +import React from 'react'; +import { QuickStartContext, QuickStartContextValues } from '@cloudmosaic/quickstarts'; +import { makeCardVisible } from '../utilities/utils'; + +export const useQuickStartCardSelected = ( + quickStartName: string | null | undefined, + cardId: string, +): [QuickStartContextValues, boolean] => { + const qsContext = React.useContext(QuickStartContext); + + const selected = React.useMemo(() => { + return !!quickStartName && qsContext.activeQuickStartID === quickStartName; + }, [quickStartName, qsContext.activeQuickStartID]); + + React.useEffect(() => { + if (selected) { + makeCardVisible(cardId); + } + }, [cardId, selected]); + + return [qsContext, selected]; +}; diff --git a/frontend/src/pages/learningCenter/LearningCenter.tsx b/frontend/src/pages/learningCenter/LearningCenter.tsx index 6befc9a2f1..b01f54badd 100644 --- a/frontend/src/pages/learningCenter/LearningCenter.tsx +++ b/frontend/src/pages/learningCenter/LearningCenter.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import * as classNames from 'classnames'; +import classNames from 'classnames'; import * as _ from 'lodash'; import useDimensions from 'react-cool-dimensions'; import { Gallery, PageSection, PageSectionVariants } from '@patternfly/react-core'; diff --git a/frontend/src/pages/learningCenter/LearningCenterFilters.tsx b/frontend/src/pages/learningCenter/LearningCenterFilters.tsx index 013a71c3c5..dcc3e9573c 100644 --- a/frontend/src/pages/learningCenter/LearningCenterFilters.tsx +++ b/frontend/src/pages/learningCenter/LearningCenterFilters.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { useHistory } from 'react-router'; -import * as classNames from 'classnames'; +import classNames from 'classnames'; import { Button, ButtonVariant, diff --git a/frontend/src/utilities/utils.ts b/frontend/src/utilities/utils.ts index c526b5c4f5..497e0206fa 100644 --- a/frontend/src/utilities/utils.ts +++ b/frontend/src/utilities/utils.ts @@ -1,13 +1,14 @@ import { DEV_MODE, API_PORT } from './const'; +import { OdhDocumentType } from '../types'; -const getBackendURL = (path: string): string => { +export const getBackendURL = (path: string): string => { if (!DEV_MODE) { return path; } return `${window.location.protocol}//${window.location.hostname}:${API_PORT}${path}`; }; -const makeCardVisible = (id: string): void => { +export const makeCardVisible = (id: string): void => { setTimeout(() => { const element = document.getElementById(id); if (element) { @@ -16,7 +17,7 @@ const makeCardVisible = (id: string): void => { }, 100); }; -const getDuration = (minutes = 0): string => { +export const getDuration = (minutes = 0): string => { const hours = Math.floor(minutes / 60); const mins = minutes % 60; const hoursString = hours > 0 ? `${hours} ${hours > 1 ? 'hours' : 'hour'} ` : ''; @@ -27,4 +28,23 @@ const getDuration = (minutes = 0): string => { return mins > 0 ? `${mins} ${mins > 1 ? 'minutes' : 'minute'}` : ''; }; -export { getBackendURL, makeCardVisible, getDuration }; +// Returns the possible colors allowed for a patternly-react Label component +// There is no type defined for this so it must be exactly one of the possible strings +// required :/ +// FixMe: Fix when https://github.com/patternfly/patternfly-react/issues/5895 is resolved +export const getLabelColorForDocType = ( + docType: string, +): 'blue' | 'cyan' | 'green' | 'orange' | 'purple' | 'red' | 'grey' => { + switch (docType) { + case OdhDocumentType.Documentation: + return 'orange'; + case OdhDocumentType.Tutorial: + return 'cyan'; + case OdhDocumentType.QuickStart: + return 'green'; + case OdhDocumentType.HowTo: + return 'orange'; + default: + return 'grey'; + } +};