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
| 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. |
||
| {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,66 @@ | ||||||
| import { Modal, Title, Content } from '@node-core/ui-components/Common/Modal'; | ||||||
| import { useTranslations } from 'next-intl'; | ||||||
| import { useMemo } from 'react'; | ||||||
| import type { FC, ComponentProps } from 'react'; | ||||||
|
|
||||||
| import KnownSeveritySection from '#site/components/EOL/KnownSeveritySection'; | ||||||
| import UnknownSeveritySection from '#site/components/EOL/UnknownSeveritySection'; | ||||||
| import { SEVERITY_ORDER } from '#site/next.constants.mjs'; | ||||||
| import type { NodeRelease } from '#site/types/releases'; | ||||||
| import type { Vulnerability } from '#site/types/vulnerabilities'; | ||||||
|
|
||||||
| type EOLModalProps = ComponentProps<typeof Modal> & { | ||||||
| release: NodeRelease; | ||||||
| vulnerabilities: Array<Vulnerability>; | ||||||
| }; | ||||||
|
|
||||||
| const EOLModal: FC<EOLModalProps> = ({ | ||||||
| release, | ||||||
|
There was a problem hiding this comment. Could we destruct this to:
Suggested change
|
||||||
| vulnerabilities, | ||||||
| ...props | ||||||
| }) => { | ||||||
| const t = useTranslations(); | ||||||
|
|
||||||
| const modalHeading = release.codename | ||||||
| ? t('components.eolModal.title', { | ||||||
|
There was a problem hiding this comment. Which would allow us to do: t('components.eolModal.title', { major, codename }) |
||||||
| version: release.major, | ||||||
| codename: release.codename, | ||||||
| }) | ||||||
| : t('components.eolModal.titleWithoutCodename', { version: release.major }); | ||||||
|
|
||||||
| useMemo( | ||||||
| () => | ||||||
| vulnerabilities.sort( | ||||||
| (a, b) => | ||||||
| SEVERITY_ORDER.indexOf(a.severity) - | ||||||
| SEVERITY_ORDER.indexOf(b.severity) | ||||||
| ), | ||||||
| [vulnerabilities] | ||||||
|
There was a problem hiding this comment.
Suggested change
Should be enough and less expensive |
||||||
| ); | ||||||
|
|
||||||
| 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; | ||||||
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,78 @@ | ||
| 'use client'; | ||
|
There was a problem hiding this comment. This shouldn't be a client component, does it really need to be? It forces the provdeVulnerabilities and provideReleaseData to run on client-side too. + Even if EOLModal is a client component, that's completely fine, as it will just slot in, afaik. There was a problem hiding this comment. I see, that's due to useState.... 🤔 In this case, I wonder how this will behave. It will probably run these fetch() requests on the client-side, which we want to avoid. There was a problem hiding this comment. If we move'em to another sub-component, we'll have the same situation as of: React splitting the prop data into the client-side. At the very least Next.js will do an initial hydration, so there won't be load times for users to see this. But these requests will definitely run every time they open this page.... There was a problem hiding this comment. 
Yeah it is requesting on every load, although it does then cache and load from disk cache. My wonder is:
There was a problem hiding this comment. The only thought here is, do we have other pages that are also running these fetch requests on client-side? During the development of this website, we made a conscious effort for all these requests to only be server-side, should we be fine with them being client-side? Instead of having mixed JSONs within the bundle? |
||
|
|
||
| import { useTranslations } from 'next-intl'; | ||
| import { useState } from 'react'; | ||
| import type { FC } from 'react'; | ||
|
|
||
| import FormattedTime from '#site/components/Common/FormattedTime'; | ||
| import VulnerabilityChips from '#site/components/EOL/VulnerabilityChips'; | ||
| import LinkWithArrow from '#site/components/LinkWithArrow'; | ||
| import provideReleaseData from '#site/next-data/providers/releaseData'; | ||
| import provideVulnerabilities from '#site/next-data/providers/vulnerabilities'; | ||
| import { EOL_VERSION_IDENTIFIER } from '#site/next.constants.mjs'; | ||
|
|
||
| import EOLModal from '../EOLModal'; | ||
|
There was a problem hiding this comment. Full import descriptors please 🙇 |
||
|
|
||
| const EOLReleaseTable: FC = () => { | ||
| const releaseData = provideReleaseData(); | ||
| const vulnerabilities = provideVulnerabilities(); | ||
| const eolReleases = releaseData.filter( | ||
| release => release.status === EOL_VERSION_IDENTIFIER | ||
| ); | ||
|
|
||
| const t = useTranslations(); | ||
|
|
||
| const [currentModal, setCurrentModal] = useState<string | undefined>(); | ||
|
|
||
| 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> | ||
| <LinkWithArrow | ||
| className="cursor-pointer" | ||
| onClick={() => setCurrentModal(release.version)} | ||
| > | ||
| {t('components.downloadReleasesTable.details')} | ||
| </LinkWithArrow> | ||
| </td> | ||
| </tr> | ||
| <EOLModal | ||
| release={release} | ||
| vulnerabilities={vulnerabilities[release.major]} | ||
| open={currentModal === release.version} | ||
| onOpenChange={open => open || setCurrentModal(undefined)} | ||
| /> | ||
| </> | ||
| ))} | ||
| </tbody> | ||
| </table> | ||
| ); | ||
| }; | ||
|
|
||
| export default EOLReleaseTable; | ||
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.
Maybe the modalProps could just be
onClosesince we know when it is open or not ;)So tha
onClosebecomes just afn