From eff3c5969eaf90c12e984973fedb5941771268cb Mon Sep 17 00:00:00 2001 From: Shivam kumar Date: Wed, 17 Jul 2024 10:54:03 +0530 Subject: [PATCH] =?UTF-8?q?fix:=20Wrong=20evaluated=20value=20after=20bind?= =?UTF-8?q?ing=20checkbox=20group=20widget=20with=E2=80=A6=20(#33906)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Description - In this PR I have fixed wrong evaluated value after binding checkbox group widget with query Output: [Loom](https://www.loom.com/share/ddcc10c5ab8b4ead8ef5d10843671d95?sid=6346b4a9-9a89-4c7d-bdcd-73c428f17626) > [!TIP] > _Add a TL;DR when the description is longer than 500 words or extremely technical (helps the content, marketing, and DevRel team)._ > > _Please also include relevant motivation and context. List any dependencies that are required for this change. Add links to Notion, Figma or any other documents that might be relevant to the PR._ Fixes #24620 _or_ Fixes https://github.com/appsmithorg/appsmith/issues/24620 > [!WARNING] > _If no issue exists, please create an issue first, and check with the maintainers if the issue is valid._ ## Automation /ok-to-test tags="" ### :mag: Cypress test results > [!CAUTION] > If you modify the content in this section, you are likely to disrupt the CI result for your PR. ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No ## Summary by CodeRabbit - **New Features** - Introduced comprehensive snapshot tests for Anvil Widgets in Canvas, Preview, and Deploy modes. - Added test cases for Anvil modals in the Anvil editor. - Enabled filtering functionality for TableV2 widgets by default. - **Bug Fixes** - Addressed issues with Git sync tests by updating selectors and function calls. - Fixed control flow in various Cypress tests by removing `cy.pause()`. - **Chores** - Updated Dockerfile to ensure custom command-scripts have executable permissions. - Added environment variable `DP_POSTGRES_URL` to Docker deployment configuration. - **Refactor** - Refined job configurations and script executions in GitHub Actions workflows for improved performance and clarity. --- .../Widgets/Switch/SwitchGroup1_spec.ts | 4 ++-- .../CheckboxGroupWidget/widget/index.test.tsx | 17 ++++++++++++++ .../CheckboxGroupWidget/widget/index.tsx | 23 +++++++++++++++++++ 3 files changed, 42 insertions(+), 2 deletions(-) diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/Switch/SwitchGroup1_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Switch/SwitchGroup1_spec.ts index 8905e7ed4d..2e965258b0 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/Widgets/Switch/SwitchGroup1_spec.ts +++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Switch/SwitchGroup1_spec.ts @@ -217,7 +217,7 @@ describe( agHelper.TypeText(widgetsLoc.RadioInput, "{{BLUE}}", 1); propPane.ToggleJSMode("Options", true); agHelper.AssertElementAbsence(locators._toastMsg); - agHelper.GetNAssertElementText(widgets.textWidget, "RED"); + agHelper.GetNAssertElementText(widgets.textWidget, ""); }); it("4. Set Label, Tooltip, Inline and check switch group", () => { @@ -278,7 +278,7 @@ describe( 0, true, ); - agHelper.AssertElementVisibility(locators._visibleTextSpan("RED")); + agHelper.AssertElementVisibility(locators._visibleTextSpan("BLUE")); }); }, ); diff --git a/app/client/src/widgets/CheckboxGroupWidget/widget/index.test.tsx b/app/client/src/widgets/CheckboxGroupWidget/widget/index.test.tsx index add2c666c8..0fe974b07c 100644 --- a/app/client/src/widgets/CheckboxGroupWidget/widget/index.test.tsx +++ b/app/client/src/widgets/CheckboxGroupWidget/widget/index.test.tsx @@ -61,4 +61,21 @@ describe("", () => { expect(result).toStrictEqual({ isValid: true, parsed: ["blue"] }); }); + + test("should return empty array when default value is not in options", async () => { + const result = defaultSelectedValuesValidation(`["blue"]`, { + options: [ + { + label: "Apple", + value: "1", + }, + { + label: "Orange", + value: "2", + }, + ], + }); + + expect(result).toStrictEqual({ isValid: true, parsed: [] }); + }); }); diff --git a/app/client/src/widgets/CheckboxGroupWidget/widget/index.tsx b/app/client/src/widgets/CheckboxGroupWidget/widget/index.tsx index 7a882633f4..fe4090a208 100644 --- a/app/client/src/widgets/CheckboxGroupWidget/widget/index.tsx +++ b/app/client/src/widgets/CheckboxGroupWidget/widget/index.tsx @@ -35,12 +35,18 @@ import { FlexVerticalAlignment } from "layoutSystems/common/utils/constants"; export function defaultSelectedValuesValidation( value: unknown, + props: any, ): ValidationResponse { let values: string[] = []; + const options: OptionProps[] = props.options || []; if (typeof value === "string") { try { values = JSON.parse(value); + values = values.filter((value: string) => + options.some((option: OptionProps) => option.value === value), + ); + if (!Array.isArray(values)) { throw new Error(); } @@ -154,6 +160,12 @@ class CheckboxGroupWidget extends BaseWidget< }; } + static getDependencyMap(): Record { + return { + defaultSelectedValues: ["options"], + }; + } + static getAutocompleteDefinitions(): AutocompletionDefinitions { return { "!doc": @@ -614,6 +626,17 @@ class CheckboxGroupWidget extends BaseWidget< } componentDidUpdate(prevProps: CheckboxGroupWidgetProps) { + const validSelectedValues = prevProps.selectedValues.filter( + (value: string) => + prevProps.options.some((option) => option.value === value), + ); + if (validSelectedValues.length !== prevProps.selectedValues.length) { + this.props.updateWidgetMetaProperty( + "selectedValues", + validSelectedValues, + ); + } + // Reset isDirty to false whenever defaultSelectedValues changes if ( xor(this.props.defaultSelectedValues, prevProps.defaultSelectedValues)