feat: add eol page

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

@@ -6,11 +6,7 @@ import UnknownSeveritySection from '#site/components/EOL/UnknownSeveritySection'
 import VulnerabilitiesTable from '#site/components/EOL/VulnerabilitiesTable';
 import { SEVERITY_ORDER } from '#site/next.constants.mjs';
 import type { ModalProps } from '#site/types';
-import type {
-  EOLModalData,
-  KnownVulnerability,
-  UnknownSeverityVulnerability,
-} from '#site/types/vulnerabilities';
+import type { EOLModalData } from '#site/types/vulnerabilities';
 
 const EOLModal: FC<ModalProps<EOLModalData>> = ({
   open,
@@ -26,33 +22,14 @@ const EOLModal: FC<ModalProps<EOLModalData>> = ({
       })
     : t('components.eolModal.titleWithoutCodename', { version: release.major });
 
-  const [knownVulnerabilities, unknownVulnerabilities] = useMemo(
-    () =>
-      vulnerabilities.reduce(
-        (acc, vulnerability) => {
-          if (vulnerability.severity === 'unknown') {
-            acc[1].push(vulnerability as UnknownSeverityVulnerability);
-          } else {
-            acc[0].push(vulnerability as KnownVulnerability);
-          }
-          return acc;
-        },
-        [[], []] as [
-          Array<KnownVulnerability>,
-          Array<UnknownSeverityVulnerability>,
-        ]
-      ),
-    [vulnerabilities]
-  );
-
   useMemo(
     () =>
-      knownVulnerabilities.sort(
+      vulnerabilities.sort(
         (a, b) =>
           SEVERITY_ORDER.indexOf(a.severity) -
           SEVERITY_ORDER.indexOf(b.severity)
       ),
-    [knownVulnerabilities]
+    [vulnerabilities]
   );
 
   return (
@@ -67,13 +44,14 @@ const EOLModal: FC<ModalProps<EOLModalData>> = ({
           </p>
         )}
 
-        <VulnerabilitiesTable vulnerabilities={knownVulnerabilities} />
-
-        <UnknownSeveritySection
-          vulnerabilities={unknownVulnerabilities}
-          open={knownVulnerabilities.length > 0}
+        <VulnerabilitiesTable
+          vulnerabilities={vulnerabilities.filter(
+            vuln => vuln.severity !== 'unknown'
+          )}
         />
 
+        <UnknownSeveritySection vulnerabilities={vulnerabilities} />
+
         {!vulnerabilities.length && (
           <p className="m-1">
             {t('components.eolModal.noVulnerabilitiesMessage')}

apps/site/components/EOL/UnknownSeveritySection/index.tsx

@@ -1,32 +1,35 @@
 import { useTranslations } from 'next-intl';
-import type { DetailsHTMLAttributes, FC } from 'react';
+import type { FC } from 'react';
 
 import VulnerabilitiesTable from '#site/components/EOL/VulnerabilitiesTable';
-import type { UnknownSeverityVulnerability } from '#site/types/vulnerabilities';
+import type { Vulnerability } from '#site/types/vulnerabilities';
 
-type UnknownSeveritySectionProps = DetailsHTMLAttributes<HTMLDetailsElement> & {
-  vulnerabilities: Array<UnknownSeverityVulnerability>;
+type UnknownSeveritySectionProps = {
+  vulnerabilities: Array<Vulnerability>;
 };
 
 const UnknownSeveritySection: FC<UnknownSeveritySectionProps> = ({
   vulnerabilities,
-  ...props
 }) => {
   const t = useTranslations();
 
-  if (!vulnerabilities.length) {
+  const unknownVulnerabilities = vulnerabilities.filter(
+    v => v.severity === 'unknown'
+  );
+
+  if (!unknownVulnerabilities.length) {
     return null;
   }
 
   return (
-    <details {...props}>
+    <details open={unknownVulnerabilities.length === vulnerabilities.length}>
       <summary className="cursor-pointer font-semibold">
         {t('components.eolModal.showUnknownSeverities')} (
-        {vulnerabilities.length})
+        {unknownVulnerabilities.length})
       </summary>
       <div className="mt-4">
         <VulnerabilitiesTable
-          vulnerabilities={vulnerabilities}
+          vulnerabilities={unknownVulnerabilities}
           maxWidth={'max-w-3xs'}
         />
       </div>

apps/site/types/vulnerabilities.ts

@@ -34,7 +34,3 @@ export type EOLModalData = {
 export type KnownVulnerability = Vulnerability & {
   severity: (typeof SEVERITY_ORDER)[number];
 };
-
-export type UnknownSeverityVulnerability = Vulnerability & {
-  severity: 'unknown';
-};