Function EOLModal

apps/site/components/EOL/EOLModal.tsx:18–65

({
  release: { codename, major: version },
  vulnerabilities,
  ...props
})

};

const EOLModal: FC<EOLModalProps> = ({
  release: { codename, major: version },
  vulnerabilities,
  ...props
}) => {
  const t = useTranslations();

  const modalHeading = codename
    ? t('components.eolModal.title', { version, codename })
    : t('components.eolModal.titleWithoutCodename', { version });

  useEffect(
    () => {
      vulnerabilities.sort(
        (a, b) =>
          SEVERITY_ORDER.indexOf(a.severity) -
          SEVERITY_ORDER.indexOf(b.severity)
      );
    },
    // Only change when the vulnerabilities change
    // eslint-disable-next-line @eslint-react/exhaustive-deps
    [vulnerabilities.length]
  );

  return (
    <Modal {...props}>
      <Title>{modalHeading}</Title>
      <Content>
        {vulnerabilities.length > 0 && (
          <p className="m-1">
            {t('components.eolModal.vulnerabilitiesMessage', {
              count: vulnerabilities.length,
            })}
          </p>
        )}

        <KnownSeveritySection vulnerabilities={vulnerabilities} />
        <UnknownSeveritySection vulnerabilities={vulnerabilities} />

        {!vulnerabilities.length && (
          <p className="m-1">
            {t('components.eolModal.noVulnerabilitiesMessage')}
          </p>
        )}
      </Content>
    </Modal>
  );
};

export default EOLModal;