Skip to content

Commit 9a8c6c7

Browse files
avivkelleravivkeller
committed
no modal provider
1 parent 54fe024 commit 9a8c6c7

File tree

9 files changed

+133
-160
lines changed

9 files changed

+133
-160
lines changed

‎apps/site/components/Downloads/DownloadReleasesTable/DetailsButton.tsx‎

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎apps/site/components/Downloads/DownloadReleasesTable/index.tsx‎

Lines changed: 33 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,11 @@
22

33
import Badge from '@node-core/ui-components/Common/Badge';
44
import { useTranslations } from 'next-intl';
5-
import type { FC } from 'react';
5+
import { useState, type FC } from 'react';
66

77
import FormattedTime from '#site/components/Common/FormattedTime';
8-
import DetailsButton from '#site/components/Downloads/DownloadReleasesTable/DetailsButton';
8+
import LinkWithArrow from '#site/components/LinkWithArrow';
99
import provideReleaseData from '#site/next-data/providers/releaseData';
10-
import { ModalProvider } from '#site/providers/modalProvider';
1110

1211
import ReleaseModal from '../ReleaseModal';
1312

@@ -23,21 +22,23 @@ const DownloadReleasesTable: FC = () => {
2322
const releaseData = provideReleaseData();
2423
const t = useTranslations();
2524

25+
const [currentModal, setCurrentModal] = useState<string | undefined>();
26+
2627
return (
27-
<ModalProvider Component={ReleaseModal}>
28-
<table id="tbVersions">
29-
<thead>
30-
<tr>
31-
<th>{t('components.downloadReleasesTable.version')}</th>
32-
<th>{t('components.downloadReleasesTable.codename')}</th>
33-
<th>{t('components.downloadReleasesTable.firstReleased')}</th>
34-
<th>{t('components.downloadReleasesTable.lastUpdated')}</th>
35-
<th>{t('components.downloadReleasesTable.status')}</th>
36-
<th></th>
37-
</tr>
38-
</thead>
39-
<tbody>
40-
{releaseData.map(release => (
28+
<table id="tbVersions">
29+
<thead>
30+
<tr>
31+
<th>{t('components.downloadReleasesTable.version')}</th>
32+
<th>{t('components.downloadReleasesTable.codename')}</th>
33+
<th>{t('components.downloadReleasesTable.firstReleased')}</th>
34+
<th>{t('components.downloadReleasesTable.lastUpdated')}</th>
35+
<th>{t('components.downloadReleasesTable.status')}</th>
36+
<th></th>
37+
</tr>
38+
</thead>
39+
<tbody>
40+
{releaseData.map(release => (
41+
<>
4142
<tr key={release.major}>
4243
<td data-label="Version">v{release.major}</td>
4344
<td data-label="LTS">{release.codename || '-'}</td>
@@ -54,13 +55,23 @@ const DownloadReleasesTable: FC = () => {
5455
</Badge>
5556
</td>
5657
<td>
57-
<DetailsButton data={release} />
58+
<LinkWithArrow
59+
className="cursor-pointer"
60+
onClick={() => setCurrentModal(release.version)}
61+
>
62+
{t('components.downloadReleasesTable.details')}
63+
</LinkWithArrow>
5864
</td>
5965
</tr>
60-
))}
61-
</tbody>
62-
</table>
63-
</ModalProvider>
66+
<ReleaseModal
67+
release={release}
68+
open={currentModal === release.version}
69+
onOpenChange={open => open || setCurrentModal(undefined)}
70+
/>
71+
</>
72+
))}
73+
</tbody>
74+
</table>
6475
);
6576
};
6677

‎apps/site/components/Downloads/ReleaseModal/index.tsx‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,50 @@
11
import AlertBox from '@node-core/ui-components/Common/AlertBox';
22
import { Modal, Title, Content } from '@node-core/ui-components/Common/Modal';
33
import { useTranslations } from 'next-intl';
4-
import type { FC } from 'react';
4+
import type { ComponentProps, FC } from 'react';
55

66
import { MinorReleasesTable } from '#site/components/Downloads/MinorReleasesTable';
77
import { ReleaseOverview } from '#site/components/Downloads/ReleaseOverview';
88
import Link from '#site/components/Link';
9-
import type { ModalProps, NodeRelease } from '#site/types';
9+
import type { NodeRelease } from '#site/types';
1010

11-
const ReleaseModal: FC<ModalProps<NodeRelease>> = ({
12-
open,
13-
closeModal,
14-
data,
11+
type ReleaseModalProps = ComponentProps<typeof Modal> & {
12+
release: NodeRelease;
13+
};
14+
15+
const ReleaseModal: FC<ReleaseModalProps> = ({
16+
release,
17+
onOpenChange,
18+
...props
1519
}) => {
1620
const t = useTranslations();
1721

18-
const modalHeadingKey = data.codename
22+
const modalHeadingKey = release.codename
1923
? 'components.releaseModal.title'
2024
: 'components.releaseModal.titleWithoutCodename';
2125

2226
const modalHeading = t(modalHeadingKey, {
23-
version: data.major,
24-
codename: data.codename ?? '',
27+
version: release.major,
28+
codename: release.codename ?? '',
2529
});
2630

2731
return (
28-
<Modal open={open} onOpenChange={closeModal}>
29-
{data.status === 'End-of-life' && (
32+
<Modal onOpenChange={onOpenChange} {...props}>
33+
{release.status === 'End-of-life' && (
3034
<div className="mb-4">
3135
<AlertBox
3236
title={t('components.common.alertBox.warning')}
3337
level="warning"
3438
size="small"
3539
>
3640
{t.rich('components.releaseModal.unsupportedVersionWarning', {
37-
link: text => (
38-
<Link onClick={closeModal} href="/eol">
39-
{text}
40-
</Link>
41-
),
41+
link: text => <Link href="/eol">{text}</Link>,
4242
})}
4343
</AlertBox>
4444
</div>
4545
)}
4646

47-
{data.isLts && (
47+
{release.isLts && (
4848
<div className="mb-4">
4949
<AlertBox
5050
title={t('components.common.alertBox.info')}
@@ -61,11 +61,11 @@ const ReleaseModal: FC<ModalProps<NodeRelease>> = ({
6161
<Title>{modalHeading}</Title>
6262

6363
<Content>
64-
<ReleaseOverview release={data} />
64+
<ReleaseOverview release={release} />
6565

6666
<h5>{t('components.releaseModal.minorVersions')}</h5>
6767

68-
<MinorReleasesTable releases={data.minorVersions} />
68+
<MinorReleasesTable releases={release.minorVersions} />
6969
</Content>
7070
</Modal>
7171
);

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

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,23 @@
11
import { Modal, Title, Content } from '@node-core/ui-components/Common/Modal';
22
import { useTranslations } from 'next-intl';
3-
import { useMemo, type FC } from 'react';
3+
import { useMemo } from 'react';
4+
import type { FC, ComponentProps } from 'react';
45

6+
import KnownSeveritySection from '#site/components/EOL/KnownSeveritySection';
57
import UnknownSeveritySection from '#site/components/EOL/UnknownSeveritySection';
6-
import VulnerabilitiesTable from '#site/components/EOL/VulnerabilitiesTable';
78
import { SEVERITY_ORDER } from '#site/next.constants.mjs';
8-
import type { ModalProps } from '#site/types';
9-
import type { EOLModalData } from '#site/types/vulnerabilities';
9+
import type { NodeRelease } from '#site/types/releases';
10+
import type { Vulnerability } from '#site/types/vulnerabilities';
1011

11-
const EOLModal: FC<ModalProps<EOLModalData>> = ({
12-
open,
13-
closeModal,
14-
data: { release, vulnerabilities },
12+
type EOLModalProps = ComponentProps<typeof Modal> & {
13+
release: NodeRelease;
14+
vulnerabilities: Array<Vulnerability>;
15+
};
16+
17+
const EOLModal: FC<EOLModalProps> = ({
18+
release,
19+
vulnerabilities,
20+
...props
1521
}) => {
1622
const t = useTranslations();
1723

@@ -33,7 +39,7 @@ const EOLModal: FC<ModalProps<EOLModalData>> = ({
3339
);
3440

3541
return (
36-
<Modal open={open} onOpenChange={closeModal}>
42+
<Modal {...props}>
3743
<Title>{modalHeading}</Title>
3844
<Content>
3945
{vulnerabilities.length > 0 && (
@@ -44,12 +50,7 @@ const EOLModal: FC<ModalProps<EOLModalData>> = ({
4450
</p>
4551
)}
4652

47-
<VulnerabilitiesTable
48-
vulnerabilities={vulnerabilities.filter(
49-
vuln => vuln.severity !== 'unknown'
50-
)}
51-
/>
52-
53+
<KnownSeveritySection vulnerabilities={vulnerabilities} />
5354
<UnknownSeveritySection vulnerabilities={vulnerabilities} />
5455

5556
{!vulnerabilities.length && (

‎apps/site/components/EOL/EOLReleaseTable/index.tsx‎

Lines changed: 35 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
'use client';
22

33
import { useTranslations } from 'next-intl';
4-
import type { FC } from 'react';
4+
import { useState, type FC } from 'react';
55

66
import FormattedTime from '#site/components/Common/FormattedTime';
7-
import DetailsButton from '#site/components/Downloads/DownloadReleasesTable/DetailsButton';
87
import VulnerabilityChips from '#site/components/EOL/VulnerabilityChips';
8+
import LinkWithArrow from '#site/components/LinkWithArrow';
99
import provideReleaseData from '#site/next-data/providers/releaseData';
1010
import provideVulnerabilities from '#site/next-data/providers/vulnerabilities';
1111
import { EOL_VERSION_IDENTIFIER } from '#site/next.constants.mjs';
12-
import { ModalProvider } from '#site/providers/modalProvider';
1312

1413
import EOLModal from '../EOLModal';
1514

@@ -22,22 +21,24 @@ const EOLReleaseTable: FC = () => {
2221

2322
const t = useTranslations();
2423

24+
const [currentModal, setCurrentModal] = useState<string | undefined>();
25+
2526
return (
26-
<ModalProvider Component={EOLModal}>
27-
<table id="tbVulnerabilities">
28-
<thead>
29-
<tr>
30-
<th>
31-
{t('components.eolTable.version')} (
32-
{t('components.eolTable.codename')})
33-
</th>
34-
<th>{t('components.eolTable.lastUpdated')}</th>
35-
<th>{t('components.eolTable.vulnerabilities')}</th>
36-
<th>{t('components.eolTable.details')}</th>
37-
</tr>
38-
</thead>
39-
<tbody>
40-
{eolReleases.map(release => (
27+
<table id="tbVulnerabilities">
28+
<thead>
29+
<tr>
30+
<th>
31+
{t('components.eolTable.version')} (
32+
{t('components.eolTable.codename')})
33+
</th>
34+
<th>{t('components.eolTable.lastUpdated')}</th>
35+
<th>{t('components.eolTable.vulnerabilities')}</th>
36+
<th>{t('components.eolTable.details')}</th>
37+
</tr>
38+
</thead>
39+
<tbody>
40+
{eolReleases.map(release => (
41+
<>
4142
<tr key={release.major}>
4243
<td data-label="Version">
4344
v{release.major}{' '}
@@ -52,18 +53,24 @@ const EOLReleaseTable: FC = () => {
5253
/>
5354
</td>
5455
<td>
55-
<DetailsButton
56-
data={{
57-
release: release,
58-
vulnerabilities: vulnerabilities[release.major],
59-
}}
60-
/>
56+
<LinkWithArrow
57+
className="cursor-pointer"
58+
onClick={() => setCurrentModal(release.version)}
59+
>
60+
{t('components.downloadReleasesTable.details')}
61+
</LinkWithArrow>
6162
</td>
6263
</tr>
63-
))}
64-
</tbody>
65-
</table>
66-
</ModalProvider>
64+
<EOLModal
65+
release={release}
66+
vulnerabilities={vulnerabilities[release.major]}
67+
open={currentModal === release.version}
68+
onOpenChange={open => open || setCurrentModal(undefined)}
69+
/>
70+
</>
71+
))}
72+
</tbody>
73+
</table>
6774
);
6875
};
6976

‎apps/site/components/EOL/KnownSeveritySection/index.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import type { FC } from 'react';
2+
3+
import VulnerabilitiesTable from '#site/components/EOL/VulnerabilitiesTable';
4+
import type { Vulnerability } from '#site/types/vulnerabilities';
5+
6+
type KnownSeveritySectionProps = {
7+
vulnerabilities: Array<Vulnerability>;
8+
};
9+
10+
const KnownSeveritySection: FC<KnownSeveritySectionProps> = ({
11+
vulnerabilities,
12+
}) => {
13+
const knownVulnerabilities = vulnerabilities.filter(
14+
v => v.severity !== 'unknown'
15+
);
16+
17+
if (!knownVulnerabilities.length) {
18+
return null;
19+
}
20+
21+
return (
22+
<VulnerabilitiesTable
23+
vulnerabilities={vulnerabilities.filter(
24+
vuln => vuln.severity !== 'unknown'
25+
)}
26+
/>
27+
);
28+
};
29+
30+
export default KnownSeveritySection;

0 commit comments

Comments
 (0)