move checks into children components

Author: avivkeller

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

@@ -55,10 +55,6 @@ const EOLModal: FC<ModalProps<EOLModalData>> = ({
     [knownVulnerabilities]
   );
 
-  const hasKnownVulnerabilities = knownVulnerabilities.length > 0;
-  const hasAnyVulnerabilities =
-    hasKnownVulnerabilities || unknownVulnerabilities.length > 0;
-
   return (
     <Modal open={open} onOpenChange={closeModal}>
       <Title>{modalHeading}</Title>
@@ -71,16 +67,14 @@ const EOLModal: FC<ModalProps<EOLModalData>> = ({
           </p>
         )}
 
-        {hasKnownVulnerabilities && (
-          <VulnerabilitiesTable vulnerabilities={knownVulnerabilities} />
-        )}
+        <VulnerabilitiesTable vulnerabilities={knownVulnerabilities} />
 
         <UnknownSeveritySection
           vulnerabilities={unknownVulnerabilities}
-          hasKnownVulnerabilities={hasKnownVulnerabilities}
+          open={knownVulnerabilities.length > 0}
         />
 
-        {!hasAnyVulnerabilities && (
+        {!vulnerabilities.length && (
           <p className="m-1">
             {t('components.eolModal.noVulnerabilitiesMessage')}
           </p>

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

@@ -1,21 +1,25 @@
 import { useTranslations } from 'next-intl';
-import type { FC } from 'react';
+import type { DetailsHTMLAttributes, FC } from 'react';
 
 import VulnerabilitiesTable from '#site/components/EOL/VulnerabilitiesTable';
 import type { UnknownSeverityVulnerability } from '#site/types/vulnerabilities';
 
-const UnknownSeveritySection: FC<{
+type UnknownSeveritySectionProps = DetailsHTMLAttributes<HTMLDetailsElement> & {
   vulnerabilities: Array<UnknownSeverityVulnerability>;
-  hasKnownVulnerabilities: boolean;
-}> = ({ vulnerabilities, hasKnownVulnerabilities }) => {
+};
+
+const UnknownSeveritySection: FC<UnknownSeveritySectionProps> = ({
+  vulnerabilities,
+  ...props
+}) => {
   const t = useTranslations();
 
   if (!vulnerabilities.length) {
     return null;
   }
 
   return (
-    <details open={!hasKnownVulnerabilities}>
+    <details {...props}>
       <summary className="cursor-pointer font-semibold">
         {t('components.eolModal.showUnknownSeverities')} (
         {vulnerabilities.length})

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

@@ -12,6 +12,10 @@ const VulnerabilitiesTable: FC<{
 }> = ({ vulnerabilities, maxWidth = 'max-w-2xs' }) => {
   const t = useTranslations();
 
+  if (!vulnerabilities.length) {
+    return null;
+  }
+
   return (
     <table className="w-full">
       <thead>