Skip to content

Commit 594531f

Browse files
bmuenzenmeyerbmuenzenmeyer
committed
rename components per docs and patterns
1 parent 07befbb commit 594531f

File tree

8 files changed

+113
-99
lines changed

8 files changed

+113
-99
lines changed

apps/site/components/EOL/Alert.tsx renamed to apps/site/components/EOL/EOLAlert/index.tsx

File renamed without changes.

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

Lines changed: 3 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,14 @@
11
import { Modal, Title, Content } from '@node-core/ui-components/Common/Modal';
2-
import classNames from 'classnames';
32
import { useTranslations } from 'next-intl';
43
import type { FC } from 'react';
54

6-
import VulnerabilityChip from '#site/components/EOL/VulnerabilityChips/Chip';
7-
import LinkWithArrow from '#site/components/LinkWithArrow';
5+
import UnknownSeveritySection from '#site/components/EOL/UnknownSeveritySection';
6+
import VulnerabilitiesTable from '#site/components/EOL/VulnerabilitiesTable';
7+
import { SEVERITY_ORDER } from '#site/components/EOL/VulnerabilityChips';
88
import type { ModalProps } from '#site/providers/modalProvider';
99
import type { NodeRelease } from '#site/types';
1010
import type { Vulnerability } from '#site/types/vulnerabilities';
1111

12-
import { SEVERITY_ORDER } from '../VulnerabilityChips';
13-
1412
type EOLModalData = {
1513
release: NodeRelease;
1614
vulnerabilities: Array<Vulnerability>;
@@ -20,92 +18,6 @@ type KnownVulnerability = Vulnerability & {
2018
severity: (typeof SEVERITY_ORDER)[number];
2119
};
2220

23-
const VulnerabilitiesTable: FC<{
24-
vulnerabilities: Array<Vulnerability>;
25-
maxWidth?: string;
26-
}> = ({ vulnerabilities, maxWidth = 'max-w-2xs' }) => {
27-
const t = useTranslations();
28-
29-
return (
30-
<table className="w-full">
31-
<thead>
32-
<tr>
33-
<th>{t('components.eolModal.table.cves')}</th>
34-
<th>{t('components.eolModal.table.severity')}</th>
35-
<th>{t('components.eolModal.table.overview')}</th>
36-
<th>{t('components.eolModal.table.details')}</th>
37-
</tr>
38-
</thead>
39-
<tbody>
40-
{vulnerabilities.map((vuln, i) => (
41-
<tr key={i}>
42-
<td>
43-
{vuln.cve.length
44-
? vuln.cve.map(cveId => (
45-
<div key={cveId}>
46-
<LinkWithArrow
47-
href={`https://www.cve.org/CVERecord?id=${cveId}`}
48-
target="_blank"
49-
rel="noopener noreferrer"
50-
>
51-
{cveId}
52-
</LinkWithArrow>
53-
</div>
54-
))
55-
: '-'}
56-
</td>
57-
<td>
58-
<VulnerabilityChip severity={vuln.severity} />
59-
</td>
60-
<td className={classNames(maxWidth, 'truncate')}>
61-
{vuln.description || vuln.overview || '-'}
62-
</td>
63-
<td>
64-
{vuln.ref ? (
65-
<LinkWithArrow
66-
href={vuln.ref}
67-
target="_blank"
68-
rel="noopener noreferrer"
69-
>
70-
{t('components.eolModal.blogLinkText')}
71-
</LinkWithArrow>
72-
) : (
73-
'—'
74-
)}
75-
</td>
76-
</tr>
77-
))}
78-
</tbody>
79-
</table>
80-
);
81-
};
82-
83-
const UnknownSeveritySection: FC<{
84-
vulnerabilities: Array<Vulnerability>;
85-
hasKnownVulns: boolean;
86-
}> = ({ vulnerabilities, hasKnownVulns }) => {
87-
const t = useTranslations();
88-
89-
if (!vulnerabilities.length) {
90-
return null;
91-
}
92-
93-
return (
94-
<details open={!hasKnownVulns}>
95-
<summary className="cursor-pointer font-semibold">
96-
{t('components.eolModal.showUnknownSeverities')} (
97-
{vulnerabilities.length})
98-
</summary>
99-
<div className="mt-4">
100-
<VulnerabilitiesTable
101-
vulnerabilities={vulnerabilities}
102-
maxWidth={'max-w-3xs'}
103-
/>
104-
</div>
105-
</details>
106-
);
107-
};
108-
10921
const EOLModal: FC<ModalProps> = ({ open, closeModal, data }) => {
11022
const { release, vulnerabilities } = data as EOLModalData;
11123
const t = useTranslations();

apps/site/components/EOL/Table.tsx renamed to apps/site/components/EOL/EOLReleaseTable/index.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ import DetailsButton from '#site/components/Downloads/DownloadReleasesTable/Deta
66
import provideReleaseData from '#site/next-data/providers/releaseData';
77
import provideVulnerabilities from '#site/next-data/providers/vulnerabilities';
88

9-
import VulnerabilityChips from './VulnerabilityChips';
9+
import VulnerabilityChips from '../VulnerabilityChips';
1010

11-
const EOLTable: FC = () => {
11+
const EOLReleaseTable: FC = () => {
1212
const releaseData = provideReleaseData();
1313
const vulnerabilities = provideVulnerabilities();
1414
const eolReleases = releaseData.filter(
@@ -59,4 +59,4 @@ const EOLTable: FC = () => {
5959
);
6060
};
6161

62-
export default EOLTable;
62+
export default EOLReleaseTable;

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { useTranslations } from 'next-intl';
2+
import type { FC } from 'react';
3+
4+
import VulnerabilitiesTable from '#site/components/EOL/VulnerabilitiesTable';
5+
import type { Vulnerability } from '#site/types/vulnerabilities';
6+
7+
const UnknownSeveritySection: FC<{
8+
vulnerabilities: Array<Vulnerability>;
9+
hasKnownVulns: boolean;
10+
}> = ({ vulnerabilities, hasKnownVulns }) => {
11+
const t = useTranslations();
12+
13+
if (!vulnerabilities.length) {
14+
return null;
15+
}
16+
17+
return (
18+
<details open={!hasKnownVulns}>
19+
<summary className="cursor-pointer font-semibold">
20+
{t('components.eolModal.showUnknownSeverities')} (
21+
{vulnerabilities.length})
22+
</summary>
23+
<div className="mt-4">
24+
<VulnerabilitiesTable
25+
vulnerabilities={vulnerabilities}
26+
maxWidth={'max-w-3xs'}
27+
/>
28+
</div>
29+
</details>
30+
);
31+
};
32+
33+
export default UnknownSeveritySection;

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

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import classNames from 'classnames';
2+
import { useTranslations } from 'next-intl';
3+
import type { FC } from 'react';
4+
5+
import VulnerabilityChip from '#site/components/EOL/VulnerabilityChips/Chip';
6+
import LinkWithArrow from '#site/components/LinkWithArrow';
7+
import type { Vulnerability } from '#site/types/vulnerabilities';
8+
9+
const VulnerabilitiesTable: FC<{
10+
vulnerabilities: Array<Vulnerability>;
11+
maxWidth?: string;
12+
}> = ({ vulnerabilities, maxWidth = 'max-w-2xs' }) => {
13+
const t = useTranslations();
14+
15+
return (
16+
<table className="w-full">
17+
<thead>
18+
<tr>
19+
<th>{t('components.eolModal.table.cves')}</th>
20+
<th>{t('components.eolModal.table.severity')}</th>
21+
<th>{t('components.eolModal.table.overview')}</th>
22+
<th>{t('components.eolModal.table.details')}</th>
23+
</tr>
24+
</thead>
25+
<tbody>
26+
{vulnerabilities.map((vuln, i) => (
27+
<tr key={i}>
28+
<td>
29+
{vuln.cve.length
30+
? vuln.cve.map(cveId => (
31+
<div key={cveId}>
32+
<LinkWithArrow
33+
href={`https://www.cve.org/CVERecord?id=${cveId}`}
34+
target="_blank"
35+
rel="noopener noreferrer"
36+
>
37+
{cveId}
38+
</LinkWithArrow>
39+
</div>
40+
))
41+
: '-'}
42+
</td>
43+
<td>
44+
<VulnerabilityChip severity={vuln.severity} />
45+
</td>
46+
<td className={classNames(maxWidth, 'truncate')}>
47+
{vuln.description || vuln.overview || '-'}
48+
</td>
49+
<td>
50+
{vuln.ref ? (
51+
<LinkWithArrow
52+
href={vuln.ref}
53+
target="_blank"
54+
rel="noopener noreferrer"
55+
>
56+
{t('components.eolModal.blogLinkText')}
57+
</LinkWithArrow>
58+
) : (
59+
'—'
60+
)}
61+
</td>
62+
</tr>
63+
))}
64+
</tbody>
65+
</table>
66+
);
67+
};
68+
69+
export default VulnerabilitiesTable;

‎apps/site/layouts/Post.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import Preview from '@node-core/ui-components/Common/Preview';
22
import type { FC, PropsWithChildren } from 'react';
33

4-
import EOLAlert from '#site/components/EOL/Alert';
4+
import EOLAlert from '#site/components/EOL/EOLAlert';
55
import WithAvatarGroup from '#site/components/withAvatarGroup';
66
import WithBlogCrossLinks from '#site/components/withBlogCrossLinks';
77
import WithFooter from '#site/components/withFooter';

‎apps/site/next.mdx.use.mjs‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
import BadgeGroup from '@node-core/ui-components/Common/BadgeGroup';
44

55
import DownloadReleasesTable from './components/Downloads/DownloadReleasesTable';
6-
import EOLAlertBox from './components/EOL/Alert';
7-
import EOLTable from './components/EOL/Table';
6+
import EOLAlertBox from './components/EOL/EOLAlert';
7+
import EOLReleaseTable from './components/EOL/EOLReleaseTable';
88
import UpcomingMeetings from './components/MDX/Calendar/UpcomingMeetings';
99
import WithBadgeGroup from './components/withBadgeGroup';
1010
import WithBanner from './components/withBanner';
@@ -30,5 +30,5 @@ export const mdxComponents = {
3030
// Renders an EOL alert
3131
EOLAlertBox,
3232
// Renders the EOL Table
33-
EOLTable,
33+
EOLReleaseTable,
3434
};

‎apps/site/pages/en/eol.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ When a version reaches End-Of-Life, it means that it will no longer receive upda
3333

3434
## EOL Versions
3535

36-
<EOLTable />
36+
<EOLReleaseTable />
3737

3838
## Commercial Support
3939

0 commit comments

Comments
 (0)