Skip to content

Commit b54eedb

Browse files
avivkelleravivkeller
committed
start modal
1 parent f65fffe commit b54eedb

File tree

15 files changed

+163
-140
lines changed

15 files changed

+163
-140
lines changed

‎apps/site/app/[locale]/page.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,9 @@ const getPage: FC<DynamicParams> = async props => {
150150
// within a server-side context
151151
return (
152152
<MatterProvider {...sharedContext}>
153-
<WithLayout layout={frontmatter.layout}>{content}</WithLayout>
153+
<WithLayout layout={frontmatter.layout} modal={frontmatter.modal}>
154+
{content}
155+
</WithLayout>
154156
</MatterProvider>
155157
);
156158
}

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

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,19 @@ import type { FC } from 'react';
55
import { use } from 'react';
66

77
import LinkWithArrow from '#site/components/LinkWithArrow';
8-
import { ReleaseModalContext } from '#site/providers/releaseModalProvider';
9-
import type { NodeRelease } from '#site/types';
8+
import { ModalContext } from '#site/providers/modalProvider';
109

1110
type DetailsButtonProps = {
12-
versionData: NodeRelease;
11+
data: unknown;
1312
};
1413

15-
const DetailsButton: FC<DetailsButtonProps> = ({ versionData }) => {
14+
const DetailsButton: FC<DetailsButtonProps> = ({ data }) => {
1615
const t = useTranslations('components.downloadReleasesTable');
1716

18-
const { openModal } = use(ReleaseModalContext);
17+
const { openModal } = use(ModalContext);
1918

2019
return (
21-
<LinkWithArrow
22-
className="cursor-pointer"
23-
onClick={() => openModal(versionData)}
24-
>
20+
<LinkWithArrow className="cursor-pointer" onClick={() => openModal(data)}>
2521
{t('details')}
2622
</LinkWithArrow>
2723
);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ const DownloadReleasesTable: FC = async () => {
4949
</Badge>
5050
</td>
5151
<td className="download-table-last">
52-
<DetailsButton versionData={release} />
52+
<DetailsButton data={release} />
5353
</td>
5454
</tr>
5555
))}

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { Modal, Title, Content } from '@node-core/ui-components/Common/Modal';
2+
import { useTranslations } from 'next-intl';
3+
import type { FC } from 'react';
4+
5+
import type { Vulnerability } from '#site/next-data/providers/vulnerabilities';
6+
import type { ModalProps } from '#site/providers/modalProvider';
7+
import type { NodeRelease } from '#site/types';
8+
9+
type EOLModalData = {
10+
release: NodeRelease;
11+
vulnerabilities: Array<Vulnerability>;
12+
};
13+
14+
const EOLModal: FC<ModalProps> = ({ open, closeModal, data }) => {
15+
const { release } = data as EOLModalData;
16+
const t = useTranslations();
17+
18+
const modalHeadingKey = release.codename
19+
? 'components.releaseModal.title'
20+
: 'components.releaseModal.titleWithoutCodename';
21+
22+
const modalHeading = t(modalHeadingKey, {
23+
version: release.major,
24+
codename: release.codename ?? '',
25+
});
26+
27+
return (
28+
<Modal open={open} onOpenChange={closeModal}>
29+
<Title>{modalHeading}</Title>
30+
31+
<Content></Content>
32+
</Modal>
33+
);
34+
};
35+
36+
export default EOLModal;

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

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,11 @@ import { MinorReleasesTable } from '#site/components/Downloads/MinorReleasesTabl
77
import { ReleaseOverview } from '#site/components/Downloads/ReleaseOverview';
88
import Link from '#site/components/Link';
99
import LinkWithArrow from '#site/components/LinkWithArrow';
10+
import type { ModalProps } from '#site/providers/modalProvider';
1011
import type { NodeRelease } from '#site/types';
1112

12-
type ReleaseModalProps = {
13-
isOpen: boolean;
14-
closeModal: () => void;
15-
release: NodeRelease;
16-
};
17-
18-
const ReleaseModal: FC<ReleaseModalProps> = ({
19-
isOpen,
20-
closeModal,
21-
release,
22-
}) => {
13+
const ReleaseModal: FC<ModalProps> = ({ open, closeModal, data }) => {
14+
const release = data as NodeRelease;
2315
const t = useTranslations();
2416

2517
const modalHeadingKey = release.codename
@@ -32,7 +24,7 @@ const ReleaseModal: FC<ReleaseModalProps> = ({
3224
});
3325

3426
return (
35-
<Modal open={isOpen} onOpenChange={closeModal}>
27+
<Modal open={open} onOpenChange={closeModal}>
3628
{release.status === 'End-of-life' && (
3729
<div className="mb-4">
3830
<AlertBox

‎apps/site/components/MDX/EOL/DetailsButton.tsx‎

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

‎apps/site/components/MDX/EOL/Table.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { getTranslations } from 'next-intl/server';
22
import type { FC } from 'react';
33

44
import FormattedTime from '#site/components/Common/FormattedTime';
5-
import DetailsButton from '#site/components/MDX/EOL/DetailsButton';
5+
import DetailsButton from '#site/components/Downloads/DownloadReleasesTable/DetailsButton';
66
import provideVulnerabilities from '#site/next-data/providers/vulnerabilities';
77
import getReleaseData from '#site/next-data/releaseData';
88

@@ -46,7 +46,12 @@ const EOLTable: FC = async () => {
4646
/>
4747
</td>
4848
<td className="download-table-last">
49-
<DetailsButton versionData={release} />
49+
<DetailsButton
50+
data={{
51+
release: release,
52+
vulnerabilities: vulnerabilities[release.major],
53+
}}
54+
/>
5055
</td>
5156
</tr>
5257
))}

‎apps/site/components/MDX/EOL/VulnerabilityChips.tsx‎

Lines changed: 28 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,52 @@
11
import Badge from '@node-core/ui-components/Common/Badge';
22
import type { FC } from 'react';
33

4-
// mapping of vulnerability severities to UI labels and colors
4+
import type { Vulnerability } from '#site/next-data/providers/vulnerabilities.js';
5+
6+
// Mapping of vulnerability severities to UI labels and colors
57
// TODO @bmuenzenmeyer we need i18n keys for these labels
6-
const severityLabels: Record<string, { label: string; kind: string }> = {
7-
low: { label: 'Low', kind: 'default' },
8-
medium: { label: 'Medium', kind: 'info' },
9-
high: { label: 'High', kind: 'warning' },
8+
const SEVERITY_CONFIG = {
109
critical: { label: 'Critical', kind: 'error' },
10+
high: { label: 'High', kind: 'warning' },
11+
medium: { label: 'Medium', kind: 'info' },
12+
low: { label: 'Low', kind: 'default' },
13+
} as const;
14+
15+
const SEVERITY_ORDER = Object.keys(SEVERITY_CONFIG) as Array<
16+
keyof typeof SEVERITY_CONFIG
17+
>;
18+
19+
type VulnerabilityChipsProps = {
20+
vulnerabilities: Array<Vulnerability>;
1121
};
1222

13-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
14-
// TODO @bmuenzenmeyer type
15-
const VulnerabilityChips: FC<{ vulnerabilities: Array<any> }> = ({
23+
const VulnerabilityChips: FC<VulnerabilityChipsProps> = ({
1624
vulnerabilities,
1725
}) => {
18-
if (!vulnerabilities || vulnerabilities.length === 0) {
19-
return <span>No vulnerabilities reported</span>;
20-
}
21-
22-
// group all vulnerabilities by severity
23-
const groupedVulnerabilities = vulnerabilities.reduce(
26+
// Group vulnerabilities by severity
27+
const groupedBySeverity = vulnerabilities.reduce<Record<string, number>>(
2428
(acc, vuln) => {
2529
const severity = vuln.severity.toLowerCase();
26-
if (!acc[severity]) {
27-
acc[severity] = [];
28-
}
29-
acc[severity].push(vuln);
30+
acc[severity] = (acc[severity] || 0) + 1;
3031
return acc;
3132
},
32-
{} as Record<string, Array<any>>
33+
{}
3334
);
3435

3536
return (
3637
<div className="vulnerability-chips">
37-
{Object.entries(groupedVulnerabilities)
38-
.sort((a, b) => {
39-
const severityOrder = ['critical', 'high', 'medium', 'low'];
40-
return severityOrder.indexOf(a[0]) - severityOrder.indexOf(b[0]);
41-
})
42-
.filter(([severity]) => severityLabels[severity]) // filter out unknown severities. there are 78+, with increasing frequency the older you get into our release or security governance
43-
.map(([severity, vulnerabilityCount]) => {
44-
const { label, kind } = severityLabels[severity];
38+
{SEVERITY_ORDER.filter(severity => groupedBySeverity[severity] > 0).map(
39+
severity => {
40+
const { label, kind } = SEVERITY_CONFIG[severity];
41+
const count = groupedBySeverity[severity];
42+
4543
return (
4644
<Badge size="small" key={severity} kind={kind} className="mr-0.5">
47-
{label} ({vulnerabilityCount.length})
45+
{label} ({count})
4846
</Badge>
4947
);
50-
})}
48+
}
49+
)}
5150
</div>
5251
);
5352
};

‎apps/site/components/withLayout.tsx‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import DownloadLayout from '#site/layouts/Download';
88
import GlowingBackdropLayout from '#site/layouts/GlowingBackdrop';
99
import LearnLayout from '#site/layouts/Learn';
1010
import PostLayout from '#site/layouts/Post';
11+
import { ModalProvider } from '#site/providers/modalProvider';
1112
import type { Layouts } from '#site/types';
1213

1314
const layouts = {
@@ -21,11 +22,26 @@ const layouts = {
2122
article: ArticlePageLayout,
2223
} satisfies Record<Layouts, FC>;
2324

24-
type WithLayoutProps<L = Layouts> = PropsWithChildren<{ layout: L }>;
25+
type WithLayoutProps<L = Layouts> = PropsWithChildren<{
26+
layout: L;
27+
modal?: string;
28+
}>;
2529

26-
const WithLayout: FC<WithLayoutProps<Layouts>> = ({ layout, children }) => {
30+
const WithLayout: FC<WithLayoutProps<Layouts>> = ({
31+
layout,
32+
children,
33+
modal,
34+
}) => {
2735
const LayoutComponent = layouts[layout] ?? DefaultLayout;
2836

37+
if (modal) {
38+
return (
39+
<ModalProvider type={modal}>
40+
<LayoutComponent>{children}</LayoutComponent>
41+
</ModalProvider>
42+
);
43+
}
44+
2945
return <LayoutComponent>{children}</LayoutComponent>;
3046
};
3147

‎apps/site/layouts/About.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,9 @@ import WithFooter from '#site/components/withFooter';
66
import WithMetaBar from '#site/components/withMetaBar';
77
import WithNavBar from '#site/components/withNavBar';
88
import WithSidebar from '#site/components/withSidebar';
9-
import { ReleaseModalProvider } from '#site/providers/releaseModalProvider';
109

1110
const AboutLayout: FC<PropsWithChildren> = ({ children }) => (
12-
<ReleaseModalProvider>
11+
<>
1312
<WithNavBar />
1413

1514
<Article>
@@ -25,7 +24,7 @@ const AboutLayout: FC<PropsWithChildren> = ({ children }) => (
2524
</Article>
2625

2726
<WithFooter />
28-
</ReleaseModalProvider>
27+
</>
2928
);
3029

3130
export default AboutLayout;

0 commit comments

Comments
 (0)