feat: add eol page #7990
+905
−636
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| import AlertBox from '@node-core/ui-components/Common/AlertBox'; | ||
| import { useTranslations } from 'next-intl'; | ||
|
|
||
| import Link from '#site/components/Link'; | ||
|
|
||
| const EOLAlert = () => { | ||
| const t = useTranslations(); | ||
| return ( | ||
| <AlertBox level="warning"> | ||
| {t('components.eolAlert.intro')}{' '} | ||
|
There was a problem hiding this comment. Actually this whole thing could be an i18n string. And you pass the |
||
| <Link href="/eol"> | ||
| OpenJS Ecosystem Sustainability Program{' '} | ||
|
There was a problem hiding this comment. This whole thing should be an i18n string. Even more due to RTL languages. There was a problem hiding this comment. as I mentioned in my self-review, I did not make this an i18n string. It's a proper noun, like we should not translate the phrase There was a problem hiding this comment. You're misunderstanding my intent here. This should be on a translation string. Doesn't mean it should be translated. You can blocklist the word OpenJS Foundation on Crowdin to not be translated. Or whatever other words you need. There was a problem hiding this comment. The core here is: Putting the whole alertbox on the i18n makes it way easier for translation of the affected pieces. |
||
| {t('components.eolAlert.partner')} HeroDevs | ||
| </Link> | ||
| </AlertBox> | ||
| ); | ||
| }; | ||
|
|
||
| export default EOLAlert; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| import { Modal, Title, Content } from '@node-core/ui-components/Common/Modal'; | ||
| import { useTranslations } from 'next-intl'; | ||
| import type { FC } from 'react'; | ||
|
|
||
| import UnknownSeveritySection from '#site/components/EOL/UnknownSeveritySection'; | ||
| import VulnerabilitiesTable from '#site/components/EOL/VulnerabilitiesTable'; | ||
| import { SEVERITY_ORDER } from '#site/components/EOL/VulnerabilityChips'; | ||
| import type { ModalProps } from '#site/providers/modalProvider'; | ||
| import type { NodeRelease } from '#site/types'; | ||
| import type { Vulnerability } from '#site/types/vulnerabilities'; | ||
|
|
||
| type EOLModalData = { | ||
| release: NodeRelease; | ||
| vulnerabilities: Array<Vulnerability>; | ||
| }; | ||
|
|
||
| type KnownVulnerability = Vulnerability & { | ||
| severity: (typeof SEVERITY_ORDER)[number]; | ||
| }; | ||
|
|
||
| const EOLModal: FC<ModalProps> = ({ open, closeModal, data }) => { | ||
| const { release, vulnerabilities } = data as EOLModalData; | ||
avivkeller marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| const t = useTranslations(); | ||
|
|
||
| const modalHeading = t( | ||
bmuenzenmeyer marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| release.codename | ||
| ? 'components.eolModal.title' | ||
| : 'components.eolModal.titleWithoutCodename', | ||
| { | ||
| version: release.major, | ||
| codename: release.codename ?? '', | ||
| } | ||
| ); | ||
|
|
||
| const [knownVulns, unknownVulns] = vulnerabilities.reduce( | ||
bmuenzenmeyer marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| (acc, vuln) => { | ||
| acc[vuln.severity === 'unknown' ? 1 : 0].push(vuln as KnownVulnerability); | ||
| return acc; | ||
| }, | ||
| [[], []] as [Array<KnownVulnerability>, Array<Vulnerability>] | ||
| ); | ||
|
|
||
| knownVulns.sort( | ||
| (a, b) => | ||
| SEVERITY_ORDER.indexOf(a.severity) - SEVERITY_ORDER.indexOf(b.severity) | ||
| ); | ||
|
|
||
| const hasKnownVulns = knownVulns.length > 0; | ||
| const hasAnyVulns = hasKnownVulns || unknownVulns.length > 0; | ||
|
|
||
| return ( | ||
| <Modal open={open} onOpenChange={closeModal}> | ||
| <Title>{modalHeading}</Title> | ||
| <Content> | ||
| {vulnerabilities.length > 0 && ( | ||
| <p className="m-1"> | ||
| {t('components.eolModal.vulnerabilitiesMessage', { | ||
| count: vulnerabilities.length, | ||
| })} | ||
| </p> | ||
| )} | ||
|
|
||
| {hasKnownVulns && <VulnerabilitiesTable vulnerabilities={knownVulns} />} | ||
|
|
||
| <UnknownSeveritySection | ||
| vulnerabilities={unknownVulns} | ||
| hasKnownVulns={hasKnownVulns} | ||
| /> | ||
|
|
||
| {!hasAnyVulns && ( | ||
| <p className="m-1"> | ||
| {t('components.eolModal.noVulnerabilitiesMessage')} | ||
| </p> | ||
| )} | ||
| </Content> | ||
| </Modal> | ||
| ); | ||
| }; | ||
|
|
||
| export default EOLModal; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| import { useTranslations } from 'next-intl'; | ||
| import type { FC } from 'react'; | ||
|
|
||
| import FormattedTime from '#site/components/Common/FormattedTime'; | ||
| import DetailsButton from '#site/components/Downloads/DownloadReleasesTable/DetailsButton'; | ||
| import provideReleaseData from '#site/next-data/providers/releaseData'; | ||
| import provideVulnerabilities from '#site/next-data/providers/vulnerabilities'; | ||
|
|
||
| import VulnerabilityChips from '../VulnerabilityChips'; | ||
|
|
||
| const EOLReleaseTable: FC = () => { | ||
| const releaseData = provideReleaseData(); | ||
| const vulnerabilities = provideVulnerabilities(); | ||
| const eolReleases = releaseData.filter( | ||
| release => release.status === 'End-of-life' | ||
| ); | ||
|
|
||
| const t = useTranslations(); | ||
|
|
||
| return ( | ||
| <table id="tbVulnerabilities"> | ||
| <thead> | ||
| <tr> | ||
| <th> | ||
| {t('components.eolTable.version')} ( | ||
| {t('components.eolTable.codename')}) | ||
| </th> | ||
| <th>{t('components.eolTable.lastUpdated')}</th> | ||
| <th>{t('components.eolTable.vulnerabilities')}</th> | ||
| <th>{t('components.eolTable.details')}</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| {eolReleases.map(release => ( | ||
| <tr key={release.major}> | ||
| <td data-label="Version"> | ||
| v{release.major} {release.codename ? `(${release.codename})` : ''} | ||
| </td> | ||
| <td data-label="Date"> | ||
| <FormattedTime date={release.releaseDate} /> | ||
| </td> | ||
| <td> | ||
| <VulnerabilityChips | ||
| vulnerabilities={vulnerabilities[release.major]} | ||
| /> | ||
| </td> | ||
| <td> | ||
| <DetailsButton | ||
| data={{ | ||
| release: release, | ||
| vulnerabilities: vulnerabilities[release.major], | ||
| }} | ||
| /> | ||
| </td> | ||
| </tr> | ||
| ))} | ||
| </tbody> | ||
| </table> | ||
| ); | ||
| }; | ||
|
|
||
| export default EOLReleaseTable; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import { useTranslations } from 'next-intl'; | ||
| import type { FC } from 'react'; | ||
|
|
||
| import VulnerabilitiesTable from '#site/components/EOL/VulnerabilitiesTable'; | ||
| import type { Vulnerability } from '#site/types/vulnerabilities'; | ||
|
|
||
| const UnknownSeveritySection: FC<{ | ||
bmuenzenmeyer marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| vulnerabilities: Array<Vulnerability>; | ||
| hasKnownVulns: boolean; | ||
| }> = ({ vulnerabilities, hasKnownVulns }) => { | ||
| const t = useTranslations(); | ||
|
|
||
| if (!vulnerabilities.length) { | ||
avivkeller marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <details open={!hasKnownVulns}> | ||
| <summary className="cursor-pointer font-semibold"> | ||
| {t('components.eolModal.showUnknownSeverities')} ( | ||
| {vulnerabilities.length}) | ||
| </summary> | ||
| <div className="mt-4"> | ||
| <VulnerabilitiesTable | ||
| vulnerabilities={vulnerabilities} | ||
| maxWidth={'max-w-3xs'} | ||
| /> | ||
| </div> | ||
| </details> | ||
| ); | ||
| }; | ||
|
|
||
| export default UnknownSeveritySection; | ||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't like this approach of modal metadata to be injected at layout-level, it implies you cannnot have different sort of modals per page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Even less making it part of the frontmatter, which is even worse IMO.