modal

Author: avivkeller

apps/site/components/Downloads/EOLModal/index.tsx

@@ -2,6 +2,8 @@ import { Modal, Title, Content } from '@node-core/ui-components/Common/Modal';
 import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
 
+import LinkWithArrow from '#site/components/LinkWithArrow';
+import { VulnerabilityChip } from '#site/components/MDX/EOL/VulnerabilityChips';
 import type { Vulnerability } from '#site/next-data/providers/vulnerabilities';
 import type { ModalProps } from '#site/providers/modalProvider';
 import type { NodeRelease } from '#site/types';
@@ -12,23 +14,88 @@ type EOLModalData = {
 };
 
 const EOLModal: FC<ModalProps> = ({ open, closeModal, data }) => {
-  const { release } = data as EOLModalData;
-  const t = useTranslations();
+  const { release, vulnerabilities } = data as EOLModalData;
+  const t = useTranslations('components.eolModal');
 
-  const modalHeadingKey = release.codename
-    ? 'components.releaseModal.title'
-    : 'components.releaseModal.titleWithoutCodename';
+  const modalHeadingKey = release.codename ? 'title' : 'titleWithoutCodename';
 
   const modalHeading = t(modalHeadingKey, {
     version: release.major,
     codename: release.codename ?? '',
   });
 
+  const actualVulnerabilities = vulnerabilities.filter(
+    vuln => vuln.severity !== 'unknown'
+  );
+
   return (
     <Modal open={open} onOpenChange={closeModal}>
       <Title>{modalHeading}</Title>
 
-      <Content></Content>
+      <Content>
+        {actualVulnerabilities.length > 0 ? (
+          <>
+            <p className="m-1">
+              {t('vulnerabilitiesMessage', {
+                count: actualVulnerabilities.length,
+              })}
+            </p>
+
+            <table>
+              <thead>
+                <tr>
+                  <th>{t('table.cves')}</th>
+                  <th>{t('table.severity')}</th>
+                  <th>{t('table.overview')}</th>
+                  <th>{t('table.details')}</th>
+                </tr>
+              </thead>
+              <tbody>
+                {actualVulnerabilities.map((vuln, index) => (
+                  <tr key={index}>
+                    <td>
+                      {vuln.cve.length > 0
+                        ? vuln.cve.map(cveId => (
+                            <div key={cveId}>
+                              <LinkWithArrow
+                                href={`https://cve.mitre.org/cgi-bin/cvename.cgi?name=${cveId}`}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                              >
+                                {cveId}
+                              </LinkWithArrow>
+                            </div>
+                          ))
+                        : '-'}
+                    </td>
+                    <td>
+                      <VulnerabilityChip severity={vuln.severity} />
+                    </td>
+                    <td className="max-w-xs truncate">
+                      {vuln.description || vuln.overview || '-'}
+                    </td>
+                    <td>
+                      {vuln.ref ? (
+                        <LinkWithArrow
+                          href={vuln.ref}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                        >
+                          {t('blogLinkText')}
+                        </LinkWithArrow>
+                      ) : (
+                        '—'
+                      )}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </>
+        ) : (
+          <p className="m-1">{t('noVulnerabilitiesMessage')}</p>
+        )}
+      </Content>
     </Modal>
   );
 };

apps/site/components/MDX/EOL/VulnerabilityChips.tsx

@@ -6,15 +6,39 @@ import type { Vulnerability } from '#site/next-data/providers/vulnerabilities.js
 // Mapping of vulnerability severities to UI labels and colors
 // TODO @bmuenzenmeyer we need i18n keys for these labels
 const SEVERITY_CONFIG = {
-  critical: { label: 'Critical', kind: 'error' },
-  high: { label: 'High', kind: 'warning' },
-  medium: { label: 'Medium', kind: 'info' },
+  unknown: { label: 'Unknown', kind: 'neutral' },
   low: { label: 'Low', kind: 'default' },
+  medium: { label: 'Medium', kind: 'info' },
+  high: { label: 'High', kind: 'warning' },
+  critical: { label: 'Critical', kind: 'error' },
 } as const;
 
-const SEVERITY_ORDER = Object.keys(SEVERITY_CONFIG) as Array<
-  keyof typeof SEVERITY_CONFIG
->;
+const SEVERITY_ORDER = (
+  Object.keys(SEVERITY_CONFIG) as Array<keyof typeof SEVERITY_CONFIG>
+)
+  // Remove 'unknown'
+  .slice(1)
+  // Order by importance
+  .reverse();
+
+type VulnerabilityChipProps = {
+  severity: Vulnerability['severity'];
+  count?: number;
+};
+
+export const VulnerabilityChip: FC<VulnerabilityChipProps> = ({
+  severity,
+  count = 0,
+}) => {
+  const { label, kind } = SEVERITY_CONFIG[severity];
+
+  return (
+    <Badge size="small" kind={kind} className="mr-0.5">
+      {label}
+      {count > 0 ? ` (${count})` : null}
+    </Badge>
+  );
+};
 
 type VulnerabilityChipsProps = {
   vulnerabilities: Array<Vulnerability>;
@@ -36,16 +60,13 @@ const VulnerabilityChips: FC<VulnerabilityChipsProps> = ({
   return (
     <div className="vulnerability-chips">
       {SEVERITY_ORDER.filter(severity => groupedBySeverity[severity] > 0).map(
-        severity => {
-          const { label, kind } = SEVERITY_CONFIG[severity];
-          const count = groupedBySeverity[severity];
-
-          return (
-            <Badge size="small" key={severity} kind={kind} className="mr-0.5">
-              {label} ({count})
-            </Badge>
-          );
-        }
+        severity => (
+          <VulnerabilityChip
+            key={severity}
+            severity={severity}
+            count={groupedBySeverity[severity]}
+          />
+        )
       )}
     </div>
   );

apps/site/next-data/providers/vulnerabilities.ts

@@ -8,7 +8,7 @@ export interface Vulnerability {
   description: string;
   overview: string;
   affectedEnvironments: Array<string>;
-  severity: string;
+  severity: 'critical' | 'high' | 'medium' | 'low' | 'unknown';
 }
 
 interface GroupedVulnerabilities {

packages/i18n/src/locales/en.json

@@ -171,6 +171,19 @@
       "unsupportedVersionWarning": "This version is out of maintenance. Please use a supported version. <link>Understand EOL support.</link>",
       "ltsVersionFeaturesNotice": "Want new features sooner? Get the <link>latest Node.js version</link> instead and try the latest improvements!"
     },
+    "eolModal": {
+      "title": "Node.js v{version} ({codename}) is EoL",
+      "titleWithoutCodename": "Node.js v{version} is EoL",
+      "vulnerabilitiesMessage": "There are {count}+ known vulnerabilities associated with this Node.js release. Please review their severity and details to understand the potential impact.",
+      "noVulnerabilitiesMessage": "There are no known vulnerabilities for this release, but that does not guarantee it is secure. Older or unsupported versions may still contain undiscovered vulnerabilities. We recommend upgrading to a supported release for continued security and stability.",
+      "blogLinkText": "Blog",
+      "table": {
+        "cves": "CVE(s)",
+        "severity": "Severity",
+        "overview": "Overview",
+        "details": "Details"
+      }
+    },
     "minorReleasesTable": {
       "version": "Version",
       "links": "Links",