Skip to content

Commit 1b9dc9b

Browse files
ovflowdovflowd
committed
chore: numerous improvements and fixes
1 parent d837f8c commit 1b9dc9b

22 files changed

Lines changed: 158 additions & 180 deletions

File tree

‎apps/site/components/Common/Select/index.stories.tsx‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
import type { Meta as MetaObj, StoryObj } from '@storybook/react';
22

33
import Select from '@/components/Common/Select';
4-
import AIX from '@/components/Icons/OperationalSystem/AIX';
5-
import Apple from '@/components/Icons/OperationalSystem/Apple';
6-
import Linux from '@/components/Icons/OperationalSystem/Linux';
7-
import Microsoft from '@/components/Icons/OperationalSystem/Microsoft';
4+
import OSIcons from '@/components/Icons/OperatingSystem';
85

96
type Story = StoryObj<typeof Select>;
107
type Meta = MetaObj<typeof Select>;
@@ -79,22 +76,22 @@ export const InlineSelect: Story = {
7976
{
8077
value: 'linux',
8178
label: 'Linux',
82-
iconImage: <Linux width={16} height={16} />,
79+
iconImage: <OSIcons.Linux width={16} height={16} />,
8380
},
8481
{
8582
value: 'macos',
8683
label: 'macOS',
87-
iconImage: <Apple width={16} height={16} />,
84+
iconImage: <OSIcons.Apple width={16} height={16} />,
8885
},
8986
{
9087
value: 'windows',
9188
label: 'Windows',
92-
iconImage: <Microsoft width={16} height={16} />,
89+
iconImage: <OSIcons.Microsoft width={16} height={16} />,
9390
},
9491
{
9592
value: 'aix',
9693
label: 'AIX',
97-
iconImage: <AIX width={16} height={16} />,
94+
iconImage: <OSIcons.AIX width={16} height={16} />,
9895
},
9996
],
10097
},

‎apps/site/components/Common/Skeleton/index.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,14 @@ const Skeleton: FC<PropsWithChildren<SkeletonProps>> = ({
1010
hide = false,
1111
loading = true,
1212
}) => {
13+
// This can be used to completely hide the children after the Skeleton has loaded
14+
// If certain criterias do not match. This is useful for conditional rendering without
15+
// changing the actual tree that the Skeleton is wrapping
1316
if (!loading && hide) {
1417
return null;
1518
}
1619

20+
// If we finished loading, we can hide the Skeleton and render the children tree
1721
if (!loading) {
1822
return children;
1923
}

‎apps/site/components/Downloads/Release/BitnessDropdown.tsx‎

Lines changed: 16 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,11 @@ import { useEffect, useContext, useMemo } from 'react';
77
import Select from '@/components/Common/Select';
88
import { useClientContext } from '@/hooks';
99
import { ReleaseContext } from '@/providers/releaseProvider';
10-
import { ARCHITECTURES, parseCompatibility } from '@/util/downloadUtils';
10+
import {
11+
ARCHITECTURES,
12+
getNextItem,
13+
parseCompatibility,
14+
} from '@/util/downloadUtils';
1115
import { getUserBitnessByArchitecture } from '@/util/getUserBitnessByArchitecture';
1216

1317
const parseNumericBitness = (bitness: string) =>
@@ -33,32 +37,19 @@ const BitnessDropdown: FC = () => {
3337
[release.os, release.bitness, release.version]
3438
);
3539

36-
useEffect(() => {
37-
const currentBitnessItem = parsedArchitectures.find(
38-
({ value }) => value === String(release.bitness)
39-
);
40-
41-
const currentBitnessExcluded =
42-
!currentBitnessItem || currentBitnessItem.disabled;
43-
44-
const nonExcludedBitness = parsedArchitectures.find(
45-
({ disabled }) => !disabled
46-
);
47-
48-
if (currentBitnessExcluded && nonExcludedBitness) {
49-
// We set it as a Number for cases where it is 64 or 86 otherwise we are
50-
// setting it as a string (ARMv7, ARMv6, etc.)
51-
const numericBitness = Number(nonExcludedBitness);
52-
40+
// We set the Bitness to the next available Architecture when the current
41+
// one is not valid anymore due to OS or Version changes
42+
useEffect(
43+
() =>
5344
release.setBitness(
54-
numericBitness.toString() === nonExcludedBitness.value
55-
? numericBitness
56-
: nonExcludedBitness.value
57-
);
58-
}
59-
// Only react on the change of the current OS and Version
45+
parseNumericBitness(
46+
getNextItem(String(release.bitness), parsedArchitectures)
47+
)
48+
),
49+
// We only want to react on the change of the OS and Version
6050
// eslint-disable-next-line react-hooks/exhaustive-deps
61-
}, [release.os, release.version]);
51+
[release.os, release.version]
52+
);
6253

6354
return (
6455
<Select

‎apps/site/components/Downloads/Release/DownloadButton.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@ import type { FC } from 'react';
88
import Button from '@/components/Common/Button';
99
import Skeleton from '@/components/Common/Skeleton';
1010
import { ReleaseContext } from '@/providers/releaseProvider';
11-
import { OperatingSystemLabel } from '@/util/downloadUtils';
11+
import {
12+
OperatingSystemLabel,
13+
OS_NOT_SUPPORTING_INSTALLERS,
14+
} from '@/util/downloadUtils';
1215
import { getNodeDownloadUrl } from '@/util/getNodeDownloadUrl';
1316

14-
// @TODO: Eventually move this to a Helper
15-
const UNSUPPORTED_OS_INSTALLERS = ['LINUX', 'AIX'];
16-
1717
// Retrieves the pure extension piece from the input string
1818
const getExtension = (input: string) => String(input.split('.').slice(-1));
1919

@@ -37,7 +37,7 @@ const DownloadButton: FC = () => {
3737

3838
return (
3939
<div className="my-4 flex gap-2">
40-
{UNSUPPORTED_OS_INSTALLERS.includes(os) || (
40+
{OS_NOT_SUPPORTING_INSTALLERS.includes(os) || (
4141
<Skeleton loading={os === 'LOADING'}>
4242
<Button
4343
href={installerUrl}

‎apps/site/components/Downloads/Release/OperatingSystemDropdown.tsx‎

Lines changed: 12 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,11 @@ import Select from '@/components/Common/Select';
88
import { useClientContext } from '@/hooks';
99
import { ReleaseContext } from '@/providers/releaseProvider';
1010
import type { UserOS } from '@/types/userOS';
11-
import { OPERATING_SYSTEMS, parseCompatibility } from '@/util/downloadUtils';
11+
import {
12+
getNextItem,
13+
OPERATING_SYSTEMS,
14+
parseCompatibility,
15+
} from '@/util/downloadUtils';
1216

1317
type OperatingSystemDropdownProps = { exclude?: Array<UserOS> };
1418

@@ -29,24 +33,14 @@ const OperatingSystemDropdown: FC<OperatingSystemDropdownProps> = () => {
2933
[release.os, release.bitness, release.version]
3034
);
3135

32-
useEffect(() => {
33-
const currentOperatingSystem = parsedOperatingSystems.find(
34-
({ value }) => value === release.os
35-
);
36-
37-
const currentPlatformExcluded =
38-
!currentOperatingSystem || currentOperatingSystem.disabled;
39-
40-
const nonExcludedOperatingSystem = parsedOperatingSystems.find(
41-
({ disabled }) => !disabled
42-
);
43-
44-
if (currentPlatformExcluded && nonExcludedOperatingSystem) {
45-
release.setOS(nonExcludedOperatingSystem.value);
46-
}
47-
// Only react on the change of the current Platform
36+
// We set the OS to the next available OS when the current
37+
// one is not valid anymore due to Platform changes
38+
useEffect(
39+
() => release.setOS(getNextItem(release.os, parsedOperatingSystems)),
40+
// We only want to react on the change of the OS and Version
4841
// eslint-disable-next-line react-hooks/exhaustive-deps
49-
}, [release.platform]);
42+
[release.platform]
43+
);
5044

5145
return (
5246
<Select

‎apps/site/components/Downloads/Release/PlatformDropdown.tsx‎

Lines changed: 12 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,11 @@ import type { FC } from 'react';
77
import Select from '@/components/Common/Select';
88
import { ReleaseContext } from '@/providers/releaseProvider';
99
import type { InstallationMethod } from '@/types/release';
10-
import { INSTALLATION_METHODS, parseCompatibility } from '@/util/downloadUtils';
10+
import {
11+
getNextItem,
12+
INSTALLATION_METHODS,
13+
parseCompatibility,
14+
} from '@/util/downloadUtils';
1115

1216
const PlatformDropdown: FC = () => {
1317
const release = useContext(ReleaseContext);
@@ -56,28 +60,14 @@ const PlatformDropdown: FC = () => {
5660
// eslint-disable-next-line react-hooks/exhaustive-deps
5761
}, []);
5862

59-
// @TODO: We should have a proper utility that gives
60-
// disabled OSs, Platforms, based on specific criteria
61-
// this can be an optimisation for the future
62-
// to remove this logic from this component
63-
useEffect(() => {
64-
const currentPlatformItem = parsedPlatforms.find(
65-
({ value }) => value === release.platform
66-
);
67-
68-
const currentPlatformExcluded =
69-
!currentPlatformItem || currentPlatformItem.disabled;
70-
71-
const nonExcludedPlatform = parsedPlatforms.find(
72-
({ disabled }) => !disabled
73-
);
74-
75-
if (currentPlatformExcluded && nonExcludedPlatform) {
76-
release.setPlatform(nonExcludedPlatform.value);
77-
}
78-
// Only react on the change of the current OS and Version
63+
// We set the Platform to the next available platform when the current
64+
// one is not valid anymore due to OS or Version changes
65+
useEffect(
66+
() => release.setPlatform(getNextItem(release.platform, parsedPlatforms)),
67+
// We only want to react on the change of the OS and Version
7968
// eslint-disable-next-line react-hooks/exhaustive-deps
80-
}, [release.os, release.version]);
69+
[release.os, release.version]
70+
);
8171

8272
return (
8373
<Select

‎apps/site/components/Downloads/Release/ReleaseCodeBox.tsx‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,10 @@
33
import { useTranslations } from 'next-intl';
44
import type { FC } from 'react';
55
import { useContext, useMemo } from 'react';
6-
import semVer from 'semver';
76

87
import AlertBox from '@/components/Common/AlertBox';
98
import Skeleton from '@/components/Common/Skeleton';
109
import JSXCodeBox from '@/components/JSX/CodeBox';
11-
import { ESP_SUPPORT_THRESHOLD_VERSION } from '@/next.constants.mjs';
1210
import { createSval } from '@/next.jsx.compiler.mjs';
1311
import { ReleaseContext, ReleasesContext } from '@/providers/releaseProvider';
1412
import type { ReleaseContextType } from '@/types/release';
@@ -46,6 +44,7 @@ const ReleaseCodeBox: FC = () => {
4644
[platform]
4745
);
4846

47+
// Parses the snippets based on the selected platform, package manager, and release context
4948
const parsedSnippets = useMemo(() => {
5049
// Retrieves a snippet for the given Installation Method (aka Platform)
5150
const platformSnippet = snippets.find(
@@ -67,20 +66,19 @@ const ReleaseCodeBox: FC = () => {
6766

6867
// Determines the code language based on the OS
6968
const codeLanguage = os === 'WIN' ? 'ps1' : 'bash';
69+
70+
// Determines if the code box should render the skeleton loader
7071
const renderSkeleton = os === 'LOADING' || platform === '';
7172

7273
return (
7374
<div className="mb-6 mt-4 flex flex-col gap-2">
74-
{semVer.lt(release.versionWithPrefix, ESP_SUPPORT_THRESHOLD_VERSION) && (
75+
{release.status === 'End-of-life' && (
7576
<AlertBox title="Warning" level="warning" size="small">
7677
{t('layouts.download.codeBox.unsupportedVersionWarning')}
7778
</AlertBox>
7879
)}
7980

80-
<Skeleton
81-
loading={renderSkeleton}
82-
hide={!currentPlatform || currentPlatform.recommended}
83-
>
81+
<Skeleton loading={renderSkeleton} hide={currentPlatform?.recommended}>
8482
<AlertBox title="Info" level="info" size="small">
8583
{t('layouts.download.codeBox.communityPlatformInfo')}
8684
</AlertBox>
@@ -108,7 +106,7 @@ const ReleaseCodeBox: FC = () => {
108106
platform: currentPlatform?.label,
109107
b: chunks => <b>{chunks}</b>,
110108
link: chunks => (
111-
<LinkWithArrow href={currentPlatform?.maintainerUrl}>
109+
<LinkWithArrow href={currentPlatform?.url}>
112110
{chunks}
113111
</LinkWithArrow>
114112
),

apps/site/components/Icons/OperationalSystem/AIX.tsx renamed to apps/site/components/Icons/OperatingSystem/AIX.tsx

File renamed without changes.

apps/site/components/Icons/OperationalSystem/Apple.tsx renamed to apps/site/components/Icons/OperatingSystem/Apple.tsx

File renamed without changes.

apps/site/components/Icons/OperationalSystem/Linux.tsx renamed to apps/site/components/Icons/OperatingSystem/Linux.tsx

File renamed without changes.

0 commit comments

Comments
 (0)