feat: add toggle to show/hide LTS releases #8263

efekrskl · 2025-10-23T14:52:36Z

Description

Adds a toggle to the EOL table that filters non LTS releases

Validation

Content being filtered:

Other:

Related Issues

Closes #8017

Check List

I have read the Contributing Guidelines and made commit messages that follow the guideline.
I have run pnpm format to ensure the code follows the style guide.
I have run pnpm test to check if all tests are passing.
I have run pnpm build to check if the website builds without errors.
I've covered new added functionality with unit tests if necessary.

vercel · 2025-10-23T14:52:49Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Updated (UTC)
nodejs-org	Ready	Preview	Oct 29, 2025 4:14pm

Copilot

Pull Request Overview

This PR adds a toggle switch to filter non-LTS releases from the EOL (End of Life) table. Users can now hide non-LTS versions to focus on LTS releases only.

Key Changes:

Introduced a new Switch UI component with Radix UI integration
Refactored EOL table to support client-side filtering with state management
Fixed the isLts determination logic to use ltsStart instead of status string matching

Reviewed Changes

Copilot reviewed 9 out of 10 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/ui-components/src/Common/Switch/index.tsx	New Switch component implementation using Radix UI primitives
packages/ui-components/src/Common/Switch/index.stories.tsx	Storybook stories for the Switch component
packages/ui-components/src/Common/Switch/index.module.css	Styling for the Switch component with light/dark mode support
packages/ui-components/package.json	Added @radix-ui/react-switch dependency
packages/i18n/src/locales/en.json	Added translation key for "Hide non-LTS versions" label
apps/site/next-data/generators/releaseData.mjs	Fixed isLts logic to check for ltsStart existence
apps/site/components/EOL/EOLReleaseTable/index.tsx	Refactored to use new client component
apps/site/components/EOL/EOLReleaseTable/TableClient.tsx	New client component with filtering state and Switch integration
apps/site/components/EOL/EOLReleaseTable/TableBody.tsx	Removed file - functionality merged into TableClient

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

apps/site/components/EOL/EOLReleaseTable/TableClient.tsx

packages/ui-components/package.json

avivkeller

Wow! Thanks for this!

apps/site/components/EOL/EOLReleaseTable/TableClient.tsx

apps/site/next-data/generators/releaseData.mjs

packages/ui-components/src/Common/Switch/index.tsx

Copilot

Pull Request Overview

Copilot reviewed 9 out of 10 changed files in this pull request and generated 1 comment.

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

apps/site/next-data/generators/releaseData.mjs

efekrskl · 2025-10-23T17:19:52Z

Wow! Thanks for this!

Thanks for the quick review!

flakey5

lgtm for web infra bits, thank you!

AugustinMauroy

LGMT !

bmuenzenmeyer

love it - my only nit, as a fast follower or even as a never - is that it'd be nice if these occupied the same vertical spacing. that greatly complicates the MDX / header / component relationship though, so no worries

codecov · 2025-10-25T03:29:32Z

❌ 1 Tests Failed:

Tests completed	Failed	Passed	Skipped
232	1	231	0

View the top 1 failed test(s) by shortest run time

test::generates release data with correct status

Stack Traces | 0.0436s run time

Error [ERR_TEST_FAILURE]: Expected values to be partially and strictly deep-equal:
+ actual - expected

  {
    codename: '',
+   currentStart: '2021-10-26',
+   endOfLife: '2024-10-18',
+   isLts: true,
+   ltsStart: '2022-10-18',
+   maintenanceStart: '2023-10-18',
-   isLts: false,
    major: 14,
+   minorVersions: [
+     {
+       modules: '83',
+       npm: '6.14.10',
+       releaseDate: '2021-04-20',
+       v8: '8.0.276.20',
+       version: '14.0.0',
+       versionWithPrefix: 'v14.0.0'
+     }
+   ],
    modules: '83',
    npm: '6.14.10',
    releaseDate: '2021-04-20',
    status: 'End-of-life',
    v8: '8.0.276.20',

    at async Promise.all (index 0) {
  code: 'ERR_TEST_FAILURE',
  failureType: 'testCodeFailure',
  cause: AssertionError [ERR_ASSERTION]: Expected values to be partially and strictly deep-equal:
  + actual - expected
  
    {
      codename: '',
  +   currentStart: '2021-10-26',
  +   endOfLife: '2024-10-18',
  +   isLts: true,
  +   ltsStart: '2022-10-18',
  +   maintenanceStart: '2023-10-18',
  -   isLts: false,
      major: 14,
  +   minorVersions: [
  +     {
  +       modules: '83',
  +       npm: '6.14.10',
  +       releaseDate: '2021-04-20',
  +       v8: '8.0.276.20',
  +       version: '14.0.0',
  +       versionWithPrefix: 'v14.0.0'
  +     }
  +   ],
      modules: '83',
      npm: '6.14.10',
      releaseDate: '2021-04-20',
      status: 'End-of-life',
      v8: '8.0.276.20',
  
      at TestContext.<anonymous> (.../runner/work/nodejs.org/nodejs..../generators/__tests__/releaseData.test.mjs:41:12)
      at async Test.run (node:internal/test_runner/test:980:9)
      at async Promise.all (index 0)
      at async Suite.run (node:internal/test_runner/test:1358:7)
      at async startSubtestAfterBootstrap (node:internal/test_runner/harness:296:3) {
    generatedMessage: true,
    code: 'ERR_ASSERTION',
    actual: { currentStart: '2021-10-26', ltsStart: '2022-10-18', maintenanceStart: '2023-10-18', endOfLife: '2024-10-18', status: 'End-of-life', major: 14, version: '14.0.0', versionWithPrefix: 'v14.0.0', codename: '', isLts: true, npm: '6.14.10', v8: '8.0.276.20', releaseDate: '2021-04-20', modules: '83', minorVersions: [Array] },
    expected: { major: 14, version: '14.0.0', versionWithPrefix: 'v14.0.0', codename: '', isLts: false, npm: '6.14.10', v8: '8.0.276.20', releaseDate: '2021-04-20', modules: '83', status: 'End-of-life' },
    operator: 'partialDeepStrictEqual'
  }
}

To view more test analytics, go to the Test Analytics Dashboard
_{📋 Got 3 mins? Take this short survey to help us improve Test Analytics.}

bjohansebas

LGTM, it looks cool to be able to do that

github-actions · 2025-10-25T20:20:17Z

Lighthouse Results

URL	Performance	Accessibility	Best Practices	SEO	Report
/en	🟢 97	🟠 88	🟢 100	🟢 100	🔗
/en/about	🟢 100	🟢 93	🟢 100	🟠 88	🔗
/en/about/previous-releases	🟢 97	🟢 93	🟢 100	🟢 100	🔗
/en/download	🟢 98	🟢 96	🟢 100	🟢 100	🔗
/en/download/archive/current	🟢 100	🟢 100	🟢 100	🟢 100	🔗
/en/blog	🟢 100	🟢 100	🟢 96	🟢 100	🔗

bmuenzenmeyer · 2025-10-29T10:10:45Z

rebased, the doc kit lockfile bump was causing errors - resolved via #8275

if my local testing is correct, there is a unit test yet to resolve

bmuenzenmeyer · 2025-10-29T11:27:48Z

the logic changes here

make me increasingly sour on the strategy we have for determine node release states, and I think we should move toward the emerging plan within #8277 - even if this lands as a nice to have feature. looking for other thoughts on this

bmuenzenmeyer

blocking til we have alignment among @nodejs/nodejs-website - not necessarily directly related to this PR (the work is great and an improvement on UX, thank you, but more about our data source)

ovflowd

This PR is doing something that it shouldn't (Out of Scope): https://github.com/efekrskl/nodejs.org/blob/f530878450c63aee83ab09bbaa615bfe45105601/apps/site/next-data/generators/releaseData.mjs

packages/ui-components/src/Common/Switch/index.tsx

efekrskl · 2025-10-29T16:15:04Z

This PR is doing something that it shouldn't (Out of Scope): efekrskl/nodejs.org@f530878/apps/site/next-data/generators/releaseData.mjs

Yeah, in hindsight, maybe I should've created an issue or something. Because right now isLts just doesn't work at all for EOL releases, so at least some fix is needed.

efekrskl · 2025-10-29T16:18:43Z

blocking til we have alignment among @nodejs/nodejs-website - not necessarily directly related to this PR (the work is great and an improvement on UX, thank you, but more about our data source)

all good! If I can in any way would be happy to help.

canerakdas

Sorry for the late review. I really like the feature, it makes reading the table easier! 🚀

canerakdas · 2025-10-30T18:00:10Z

packages/ui-components/src/Common/Switch/index.module.css

+      transition-colors
+      duration-100
+      ease-out


Suggested change

transition-colors

duration-100

ease-out

motion-safe:transition-colors

motion-safe:duration-100

motion-safe:ease-out

As a best practice for accessibility, it would be beneficial to apply animations using motion-safe https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html

canerakdas · 2025-10-30T18:00:28Z

packages/ui-components/src/Common/Switch/index.module.css

+      focus-visible:ring-2
+      focus-visible:ring-green-500
+      focus-visible:ring-offset-2
+      focus-visible:ring-offset-neutral-900


I think the outline looks great! We can discuss this and later apply it to other components in a separate issue for design consistency

Just one little nitpick: it might be better to use the current outline for the dark theme and add a lighter background color for the light theme

canerakdas · 2025-10-30T18:00:40Z

packages/ui-components/src/Common/Switch/index.module.css

+      h-5
+      w-5


Suggested change

h-5

w-5

size-5

canerakdas · 2025-10-30T18:00:45Z

packages/ui-components/src/Common/Switch/index.module.css

+      transition-transform
+      duration-100
+      ease-out;


Suggested change

transition-transform

duration-100

ease-out;

motion-safe:transition-transform

motion-safe:duration-100

motion-safe:ease-out;

canerakdas · 2025-10-30T18:02:39Z

packages/ui-components/src/Common/Switch/index.tsx

+
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import classNames from 'classnames';
+import { FC, PropsWithChildren, useId } from 'react';


Suggested change

import { FC, PropsWithChildren, useId } from 'react';

import { useId } from 'react';

import type { FC, PropsWithChildren } from 'react';

efekrskl requested a review from a team as a code owner October 23, 2025 14:52

Copilot AI review requested due to automatic review settings October 23, 2025 14:52

efekrskl requested a review from a team as a code owner October 23, 2025 14:52

Copilot AI reviewed Oct 23, 2025

View reviewed changes

apps/site/components/EOL/EOLReleaseTable/TableClient.tsx Outdated Show resolved Hide resolved

packages/ui-components/package.json Outdated Show resolved Hide resolved

vercel bot deployed to Preview October 23, 2025 14:54 View deployment

avivkeller reviewed Oct 23, 2025

View reviewed changes

vercel bot deployed to Preview October 23, 2025 17:02 View deployment

vercel bot deployed to Preview October 23, 2025 17:11 View deployment

efekrskl requested review from avivkeller and Copilot October 23, 2025 17:13

Copilot AI reviewed Oct 23, 2025

View reviewed changes

apps/site/next-data/generators/releaseData.mjs Show resolved Hide resolved

flakey5 approved these changes Oct 23, 2025

View reviewed changes

AugustinMauroy approved these changes Oct 23, 2025

View reviewed changes

avivkeller approved these changes Oct 23, 2025

View reviewed changes

mikeesto approved these changes Oct 23, 2025

View reviewed changes

aymen94 approved these changes Oct 24, 2025

View reviewed changes

bmuenzenmeyer approved these changes Oct 24, 2025

View reviewed changes

This comment was marked as outdated.

Sign in to view

bjohansebas approved these changes Oct 25, 2025

View reviewed changes

bjohansebas added the github_actions:pull-request Trigger Pull Request Checks label Oct 25, 2025

bjohansebas deployed to Storybook October 25, 2025 20:19 — with GitHub Actions View deployment

github-actions bot removed the github_actions:pull-request Trigger Pull Request Checks label Oct 25, 2025

efekrskl added 4 commits October 29, 2025 04:53

feat: add switch in eol table

b37d970

feat: translation keys

680b0ca

refactor: client renaming

6f7ab98

fix: dont create arrow fn onCheckedChange

bdf5ce9

efekrskl added 2 commits October 29, 2025 04:53

chore: use tilde for version

aebe830

refactor: rename prop

4502c6c

bmuenzenmeyer force-pushed the feat/eol-table-lts-toggle branch from eb7d2fd to 4502c6c Compare October 29, 2025 10:09

vercel bot deployed to Preview October 29, 2025 10:11 View deployment

fixes test, but does it?

f530878

vercel bot deployed to Preview October 29, 2025 11:31 View deployment

bmuenzenmeyer requested changes Oct 29, 2025

View reviewed changes

ovflowd requested changes Oct 29, 2025

View reviewed changes

ovflowd reviewed Oct 29, 2025

View reviewed changes

packages/ui-components/src/Common/Switch/index.tsx Show resolved Hide resolved

fix: add use client directive

39eb665

vercel bot deployed to Preview October 29, 2025 16:14 View deployment

canerakdas reviewed Oct 30, 2025

View reviewed changes

	import { FC, PropsWithChildren, useId } from 'react';
	import { useId } from 'react';
	import type { FC, PropsWithChildren } from 'react';

Uh oh!

feat: add toggle to show/hide LTS releases #8263

Are you sure you want to change the base?

feat: add toggle to show/hide LTS releases #8263

Uh oh!

Conversation

efekrskl commented Oct 23, 2025

Description

Validation

Related Issues

Check List

Uh oh!

vercel bot commented Oct 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

avivkeller left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Uh oh!

efekrskl commented Oct 23, 2025

Uh oh!

flakey5 left a comment

Choose a reason for hiding this comment

Uh oh!

AugustinMauroy left a comment

Choose a reason for hiding this comment

Uh oh!

bmuenzenmeyer left a comment

Choose a reason for hiding this comment

Uh oh!

codecov bot commented Oct 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

❌ 1 Tests Failed:

Uh oh!

This comment was marked as outdated.

bjohansebas left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Oct 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bmuenzenmeyer commented Oct 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bmuenzenmeyer commented Oct 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bmuenzenmeyer left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ovflowd left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

efekrskl commented Oct 29, 2025

Uh oh!

efekrskl commented Oct 29, 2025

Uh oh!

canerakdas left a comment

Choose a reason for hiding this comment

Uh oh!

canerakdas Oct 30, 2025

Choose a reason for hiding this comment

Uh oh!

vercel bot commented Oct 23, 2025 •

edited

Loading

codecov bot commented Oct 25, 2025 •

edited

Loading

github-actions bot commented Oct 25, 2025 •

edited

Loading

bmuenzenmeyer commented Oct 29, 2025 •

edited

Loading

bmuenzenmeyer commented Oct 29, 2025 •

edited

Loading

bmuenzenmeyer left a comment •

edited

Loading