fix: Handle 404 state on CVE details page (#1549)

RedHatInsights · Feb 14, 2022 · 344af12 · 344af12
1 parent 7f8db51
commit 344af12
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 18 deletions.
diff --git a/locales/en.json b/locales/en.json
@@ -26,6 +26,7 @@
   "configModalTitle": "Report by CVEs",
   "count": "Num. systems",
   "createCveListByAccount.tooltip": "Status for individual systems may differ from the status of the CVE.",
+  "critical": "Critical",
   "current": "current",
   "customReportAnd": "; and",
   "customReportCardButton": "Create report",
@@ -295,6 +296,7 @@
   "systemsPDFreportFiltersSearchTerm": "{prefix} matching the search term <b>\"{values}\"</b>",
   "systemsReport.subheader": "This report includes systems",
   "timeFrame": "Time frame",
+  "unknownCveId": "Unknown CVE id",
   "upgradePageTitle": "Upgrade",
   "vector": "Vector",
   "vectorNames.V2A": "Availability impact",

diff --git a/src/Components/PresentationalComponents/ErrorHandler/ErrorHandler.js b/src/Components/PresentationalComponents/ErrorHandler/ErrorHandler.js
@@ -6,7 +6,7 @@ import { ErrorState } from '@redhat-cloud-services/frontend-components/ErrorStat
 import { NotAuthorized } from '../EmptyStates/EmptyStates';
 
 const ErrorHandler = ({ code }) => {
-    switch (code) {
+    switch (parseInt(code)) {
         case 403:
             return <NotAuthorized />;
 
@@ -24,7 +24,7 @@ const ErrorHandler = ({ code }) => {
 };
 
 ErrorHandler.propTypes = {
-    code: propTypes.number
+    code: propTypes.oneOf([propTypes.number, propTypes.string])
 };
 
 export default ErrorHandler;
diff --git a/src/Components/SmartComponents/CVEDetailsPage/CVEDetailsPage.js b/src/Components/SmartComponents/CVEDetailsPage/CVEDetailsPage.js
@@ -21,13 +21,16 @@ import { useRbac } from '../../../Helpers/Hooks';
 import { NotAuthorized } from '../../PresentationalComponents/EmptyStates/EmptyStates';
 import { clearNotifications } from '@redhat-cloud-services/frontend-components-notifications/redux';
 import { useRouteMatch } from 'react-router-dom';
+import { useIntl } from 'react-intl';
+import messages from '../../../Messages';
 
 export const CVEPageContext = React.createContext({ isLoading: true });
 
 const CVEDetailsPage = () => {
     const dispatch = useDispatch();
     const inventoryRef = React.createRef();
     const match = useRouteMatch();
+    const intl = useIntl();
 
     const [[canEditPairStatus, canEditStatusOrBusinessRisk, canExport, canReadVulnerabilityResults], isRbacLoading] = useRbac([
         PERMISSIONS.setPairStatus,
@@ -106,12 +109,26 @@ const CVEDetailsPage = () => {
         ({ rule_id: ruleId, description }) => ({ value: ruleId, label: description })
     );
 
+    const createBreadcrumbs = lastSegment =>
+        [
+            {
+                title: PATHS.cvesPage.title,
+                to: PATHS.cvesPage.to,
+                loaded: true
+            },
+            {
+                title: lastSegment,
+                isActive: true,
+                loaded: true
+            }
+        ];
+
     return (
         <CVEPageContext.Provider value={cveDetails && { isLoading: cveDetails.isLoading || isRbacLoading }}>
             {canReadVulnerabilityResults ? (
                 error?.hasError ? (
                     <React.Fragment>
-                        <Header title={cveName} />
+                        <Header title={cveName} breadcrumbs={createBreadcrumbs(intl.formatMessage(messages.unknownCveId))}/>
                         <ErrorHandler code={error?.errorCode} />
                     </React.Fragment>
                 ) : (
@@ -120,18 +137,7 @@ const CVEDetailsPage = () => {
                             title={data.celebrity_name ? cveName + ' - ' + data.celebrity_name : cveName}
                             actions={canEditStatusOrBusinessRisk && kebabItems}
                             actionsOuiaId="cve-actions"
-                            breadcrumbs={[
-                                {
-                                    title: PATHS.cvesPage.title,
-                                    to: PATHS.cvesPage.to,
-                                    loaded: true
-                                },
-                                {
-                                    title: cveName,
-                                    isActive: true,
-                                    loaded: true
-                                }
-                            ]}
+                            breadcrumbs={createBreadcrumbs(cveName)}
                             labels={[
                                 <GroupedCVELabels
                                     key="labels"
@@ -162,7 +168,7 @@ const CVEDetailsPage = () => {
                     </Fragment>
                 )) : (
                 <React.Fragment>
-                    <Header title={cveName} showBreadcrumb={false} />
+                    <Header title={cveName} breadcrumbs={createBreadcrumbs(cveName)} />
                     <NotAuthorized />
                 </React.Fragment>
             )}

diff --git a/src/Components/SmartComponents/CVEs/CVEs.js b/src/Components/SmartComponents/CVEs/CVEs.js
@@ -187,7 +187,7 @@ export const CVEs = () => {
                 ) : <NotAuthorized/>
         );
     } else {
-        return <ErrorHandler code={parseInt(cves.errors.status)}/>;
+        return <ErrorHandler code={cves.errors.status}/>;
     }
 
 };

diff --git a/src/Messages.js b/src/Messages.js
@@ -1726,5 +1726,10 @@ export default defineMessages({
         id: 'noMetadataDescription',
         description: 'No CVE metadata description',
         defaultMessage: 'This CVE has been published, however metadata about this CVE is not yet available on Red Hat Insights. Metadata is usually available on Insights within 24 hours of a CVE being published.'
+    },
+    unknownCveId: {
+        id: 'unknownCveId',
+        description: 'Breadcrumb item when user tries to access detail of CVE that does not exist',
+        defaultMessage: 'Unknown CVE id'
     }
 });
diff --git a/src/Store/Actions/Actions.js b/src/Store/Actions/Actions.js
@@ -34,7 +34,7 @@ export const fetchSystems = options => ({
 export const fetchCveDetails = synopsis => ({
     type: ActionTypes.FETCH_CVE_DETAILS,
     meta: {
-        noNotificationOnStatus: [403]
+        noNotificationOnStatus: [403, 404]
     },
     payload: new Promise(resolve => {
         resolve(APIHelper.getCveDetails(synopsis));