From 5fe3a1c2cd346b703704c0b78b26c06e5f29bb31 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C4=90=E1=BB=97=20Tr=E1=BB=8Dng=20H=E1=BA=A3i?= <41283691+hainenber@users.noreply.github.com> Date: Tue, 28 Apr 2026 01:17:17 +0700 Subject: [PATCH] fix(dev): revert `react-checkbox-tree` from 2.1.0 to 1.8.0 in /superset-frontend (#39660) Signed-off-by: hainenber Co-authored-by: Evan Rusackas --- .github/dependabot.yml | 4 ++ superset-frontend/package-lock.json | 42 +++++++++------- superset-frontend/package.json | 2 +- .../filterscope/FilterScope.test.tsx | 48 +++++++++---------- 4 files changed, 53 insertions(+), 43 deletions(-) diff --git a/.github/dependabot.yml b/.github/dependabot.yml index 86feb412782..5ff981e7bae 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -37,6 +37,10 @@ updates: # `just-handlerbars-helpers` library in plugin-chart-handlebars requires `currencyformatter`` to be < 2 - dependency-name: "currencyformatter.js" update-types: ["version-update:semver-major"] + # TODO: remove below clause once https://github.com/pmmmwh/react-refresh-webpack-plugin/pull/940 lands onto a future release + # and confirm the issue https://github.com/apache/superset/issues/39600 is fixed + - dependency-name: "react-checkbox-tree" + update-types: ["version-update:semver-major"] groups: storybook: applies-to: version-updates diff --git a/superset-frontend/package-lock.json b/superset-frontend/package-lock.json index 09e47401063..f4e0fe30e5c 100644 --- a/superset-frontend/package-lock.json +++ b/superset-frontend/package-lock.json @@ -115,7 +115,7 @@ "re-resizable": "^6.11.2", "react": "^17.0.2", "react-arborist": "^3.5.0", - "react-checkbox-tree": "^2.0.1", + "react-checkbox-tree": "^1.8.0", "react-diff-viewer-continued": "^4.2.2", "react-dnd": "^11.1.3", "react-dnd-html5-backend": "^11.1.3", @@ -25521,15 +25521,6 @@ "dev": true, "license": "Apache-2.0" }, - "node_modules/fast-equals": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-6.0.0.tgz", - "integrity": "sha512-PFhhIGgdM79r5Uztdj9Zb6Tt1zKafqVfdMGwVca1z5z6fbX7DmsySSuJd8HiP6I1j505DCS83cLxo5rmSNeVEA==", - "license": "MIT", - "engines": { - "node": ">=6.0.0" - } - }, "node_modules/fast-fifo": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/fast-fifo/-/fast-fifo-1.3.2.tgz", @@ -35611,6 +35602,7 @@ "version": "4.1.2", "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==", + "dev": true, "license": "MIT" }, "node_modules/lodash.merge": { @@ -41848,18 +41840,36 @@ } }, "node_modules/react-checkbox-tree": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/react-checkbox-tree/-/react-checkbox-tree-2.0.1.tgz", - "integrity": "sha512-ZUh9strXP3a+RpXEGPSq5qWC0HSo3pjjGQEwNWYdmo1OfSNq0L61boy4ANIN2O+ybo/n80hadQYNAeMgwdQqRQ==", + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/react-checkbox-tree/-/react-checkbox-tree-1.8.0.tgz", + "integrity": "sha512-ufC4aorihOvjLpvY1beab2hjVLGZbDTFRzw62foG0+th+KX7e/sdmWu/nD1ZS/U5Yr0rWGwedGH5GOtR0IkUXw==", "license": "MIT", "dependencies": { "classnames": "^2.2.5", - "fast-equals": "^6.0.0", - "lodash.memoize": "^4.1.2", + "lodash": "^4.17.10", + "nanoid": "^3.0.0", "prop-types": "^15.5.8" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" + "react": "^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/react-checkbox-tree/node_modules/nanoid": { + "version": "3.3.11", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz", + "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "bin": { + "nanoid": "bin/nanoid.cjs" + }, + "engines": { + "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" } }, "node_modules/react-diff-viewer-continued": { diff --git a/superset-frontend/package.json b/superset-frontend/package.json index 65fd6de7a1e..e829c3b6cca 100644 --- a/superset-frontend/package.json +++ b/superset-frontend/package.json @@ -196,7 +196,7 @@ "re-resizable": "^6.11.2", "react": "^17.0.2", "react-arborist": "^3.5.0", - "react-checkbox-tree": "^2.0.1", + "react-checkbox-tree": "^1.8.0", "react-diff-viewer-continued": "^4.2.2", "react-dnd": "^11.1.3", "react-dnd-html5-backend": "^11.1.3", diff --git a/superset-frontend/src/dashboard/components/filterscope/FilterScope.test.tsx b/superset-frontend/src/dashboard/components/filterscope/FilterScope.test.tsx index 4f4194904ac..2c18ba4a208 100644 --- a/superset-frontend/src/dashboard/components/filterscope/FilterScope.test.tsx +++ b/superset-frontend/src/dashboard/components/filterscope/FilterScope.test.tsx @@ -171,7 +171,7 @@ function getCheckboxIcon(element: HTMLElement): Element { * checkbox state change is the fill color of the SVG icon. */ function getCheckboxState(name: string): CheckboxState { - const element = screen.getByRole('button', { name }); + const element = screen.getByRole('link', { name }); const svgPath = getCheckboxIcon(element).children[1].children[0].children[0]; const fill = svgPath.getAttribute('fill'); return fill === supersetTheme.colorPrimary @@ -183,7 +183,7 @@ function getCheckboxState(name: string): CheckboxState { // Replace the original clickCheckbox function with the async version async function clickCheckbox(name: string) { - const element = screen.getByRole('button', { name }); + const element = screen.getByRole('link', { name }); const checkboxLabel = getCheckboxIcon(element); await userEvent.click(checkboxLabel); } @@ -204,11 +204,11 @@ test('renders with empty filters', () => { test('renders with filters values', () => { render(, { useRedux: true }); - expect(screen.getByRole('button', { name: FILTER_A })).toBeInTheDocument(); - expect(screen.getByRole('button', { name: FILTER_B })).toBeInTheDocument(); - expect(screen.getByRole('button', { name: FILTER_C })).toBeInTheDocument(); - expect(screen.getByRole('button', { name: TAB_A })).toBeInTheDocument(); - expect(screen.getByRole('button', { name: TAB_B })).toBeInTheDocument(); + expect(screen.getByRole('link', { name: FILTER_A })).toBeInTheDocument(); + expect(screen.getByRole('link', { name: FILTER_B })).toBeInTheDocument(); + expect(screen.getByRole('link', { name: FILTER_C })).toBeInTheDocument(); + expect(screen.getByRole('link', { name: TAB_A })).toBeInTheDocument(); + expect(screen.getByRole('link', { name: TAB_B })).toBeInTheDocument(); expect(screen.queryByText(CHART_A)).not.toBeInTheDocument(); expect(screen.queryByText(CHART_B)).not.toBeInTheDocument(); expect(screen.queryByText(CHART_C)).not.toBeInTheDocument(); @@ -222,21 +222,21 @@ test('collapses/expands all filters', () => { useRedux: true, }); userEvent.click(screen.getAllByRole('button', { name: COLLAPSE_ALL })[0]); - expect(screen.getByRole('button', { name: ALL_FILTERS })).toBeInTheDocument(); + expect(screen.getByRole('link', { name: ALL_FILTERS })).toBeInTheDocument(); expect( - screen.queryByRole('button', { name: FILTER_A }), + screen.queryByRole('link', { name: FILTER_A }), ).not.toBeInTheDocument(); expect( - screen.queryByRole('button', { name: FILTER_B }), + screen.queryByRole('link', { name: FILTER_B }), ).not.toBeInTheDocument(); expect( - screen.queryByRole('button', { name: FILTER_C }), + screen.queryByRole('link', { name: FILTER_C }), ).not.toBeInTheDocument(); userEvent.click(screen.getAllByRole('button', { name: EXPAND_ALL })[0]); - expect(screen.getByRole('button', { name: ALL_FILTERS })).toBeInTheDocument(); - expect(screen.getByRole('button', { name: FILTER_A })).toBeInTheDocument(); - expect(screen.getByRole('button', { name: FILTER_B })).toBeInTheDocument(); - expect(screen.getByRole('button', { name: FILTER_C })).toBeInTheDocument(); + expect(screen.getByRole('link', { name: ALL_FILTERS })).toBeInTheDocument(); + expect(screen.getByRole('link', { name: FILTER_A })).toBeInTheDocument(); + expect(screen.getByRole('link', { name: FILTER_B })).toBeInTheDocument(); + expect(screen.getByRole('link', { name: FILTER_C })).toBeInTheDocument(); }); test('collapses/expands all charts', () => { @@ -251,10 +251,10 @@ test('collapses/expands all charts', () => { expect(screen.queryByText(CHART_D)).not.toBeInTheDocument(); userEvent.click(screen.getAllByRole('button', { name: EXPAND_ALL })[1]); expect(screen.getByText(ALL_CHARTS)).toBeInTheDocument(); - expect(screen.getByRole('button', { name: CHART_A })).toBeInTheDocument(); - expect(screen.getByRole('button', { name: CHART_B })).toBeInTheDocument(); - expect(screen.getByRole('button', { name: CHART_C })).toBeInTheDocument(); - expect(screen.getByRole('button', { name: CHART_D })).toBeInTheDocument(); + expect(screen.getByRole('link', { name: CHART_A })).toBeInTheDocument(); + expect(screen.getByRole('link', { name: CHART_B })).toBeInTheDocument(); + expect(screen.getByRole('link', { name: CHART_C })).toBeInTheDocument(); + expect(screen.getByRole('link', { name: CHART_D })).toBeInTheDocument(); }); test('searches for a chart', () => { @@ -262,13 +262,9 @@ test('searches for a chart', () => { useRedux: true, }); userEvent.type(screen.getByPlaceholderText('Search...'), CHART_C); - expect( - screen.queryByRole('button', { name: CHART_A }), - ).not.toBeInTheDocument(); - expect( - screen.queryByRole('button', { name: CHART_B }), - ).not.toBeInTheDocument(); - expect(screen.getByRole('button', { name: CHART_C })).toBeInTheDocument(); + expect(screen.queryByRole('link', { name: CHART_A })).not.toBeInTheDocument(); + expect(screen.queryByRole('link', { name: CHART_B })).not.toBeInTheDocument(); + expect(screen.getByRole('link', { name: CHART_C })).toBeInTheDocument(); }); // Update all tests that use clickCheckbox to be async and await the function call