From 28ac53bf6e69654dc9ddc5817b185d3a099bf515 Mon Sep 17 00:00:00 2001 From: Jacques Ikot Date: Fri, 23 Aug 2024 10:10:27 +0100 Subject: [PATCH] fix: Ensure Select Column Displays Data When Options Are Not Set (#35817) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Description **Problem** When using a table widget, changing a column to the "Select" type causes the data in that column to disappear unless the options property is explicitly set. This creates a poor user experience, as it appears that the data has been lost or the widget is malfunctioning. **Solution** We have implemented a fallback mechanism to ensure a smoother user experience. If no options are set in the property pane, the label inside the select cell will now default to displaying the existing value. This ensures that the data remains visible, even in the absence of predefined options. Fixes #35807 ## Automation /ok-to-test tags="@tag.Widget, @tag.Select, @tag.Binding, @tag.Table, @tag.Sanity" ### :mag: Cypress test results > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: > Commit: 1e89468e8345f2fc351c100428dca76a7a455dbc > Cypress dashboard. > Tags: `@tag.Widget, @tag.Select, @tag.Binding, @tag.Table, @tag.Sanity` > Spec: >
Thu, 22 Aug 2024 19:43:53 UTC ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No ## Summary by CodeRabbit - **New Features** - Enhanced the select column in the table widget to return a default value when no options are available. - **Bug Fixes** - Improved robustness of the select cell component to prevent errors when the options array is empty. - **Tests** - Updated and reorganized test cases for the select column to improve clarity and specificity. - Introduced a new test case to validate default value behavior when no options are provided. --- .../TableV2/columnTypes/Select1_spec.ts | 22 ++++++++++++------- .../component/cellComponents/SelectCell.tsx | 1 + 2 files changed, 15 insertions(+), 8 deletions(-) diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/Select1_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/Select1_spec.ts index bf1f91ae4a1..fafe2da10f9 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/Select1_spec.ts +++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/Select1_spec.ts @@ -31,7 +31,13 @@ describe( cy.get(".t--property-pane-section-collapse-events").should("exist"); }); - it("2. should check that options given in the property pane is appearing on the table", () => { + it("2. should check that select column returns value if no option is provided", () => { + cy.readTableV2data(0, 0).then((val) => { + expect(val).to.equal("#1"); + }); + }); + + it("3. should check that options given in the property pane is appearing on the table", () => { cy.get(".t--property-control-options").should("exist"); cy.updateCodeInput( ".t--property-control-options", @@ -74,7 +80,7 @@ describe( cy.get(".menu-item-active.has-focus").should("contain", "#1"); }); - it("3. should check that placeholder property is working", () => { + it("4. should check that placeholder property is working", () => { cy.updateCodeInput( ".t--property-control-options", ` @@ -110,7 +116,7 @@ describe( ).should("contain", "choose an item"); }); - it("4. should check that filterable property is working", () => { + it("5. should check that filterable property is working", () => { cy.updateCodeInput( ".t--property-control-options", ` @@ -155,7 +161,7 @@ describe( cy.get(".t--canvas-artboard").click({ force: true }); }); - it("5. should check that on option select is working", () => { + it("6. should check that on option select is working", () => { featureFlagIntercept({ release_table_cell_label_value_enabled: true }); cy.openPropertyPane("tablewidgetv2"); cy.editColumn("step"); @@ -197,7 +203,7 @@ describe( cy.discardTableRow(4, 0); }); - it("6. should check that currentRow is accessible in the select options", () => { + it("7. should check that currentRow is accessible in the select options", () => { cy.updateCodeInput( ".t--property-control-options", ` @@ -222,7 +228,7 @@ describe( cy.get(".menu-item-text").contains("#1").should("not.exist"); }); - it("7. should check that 'same select option in new row' property is working", () => { + it("8. should check that 'same select option in new row' property is working", () => { _.propPane.NavigateBackToPropertyPane(); const checkSameOptionsInNewRowWhileEditing = () => { @@ -288,7 +294,7 @@ describe( checkSameOptionsWhileAddingNewRow(); }); - it("8. should check that 'new row select options' is working", () => { + it("9. should check that 'new row select options' is working", () => { const checkNewRowOptions = () => { // New row select options should be visible when "Same options in new row" is turned off _.propPane.TogglePropertyState("Same options in new row", "Off"); @@ -353,7 +359,7 @@ describe( checkNoOptionState(); }); - it("9. should check that server side filering is working", () => { + it("10. should check that server side filering is working", () => { _.dataSources.CreateDataSource("Postgres"); _.dataSources.CreateQueryAfterDSSaved( "SELECT * FROM public.astronauts {{this.params.filterText ? `WHERE name LIKE '%${this.params.filterText}%'` : ''}} LIMIT 10;", diff --git a/app/client/src/widgets/TableWidgetV2/component/cellComponents/SelectCell.tsx b/app/client/src/widgets/TableWidgetV2/component/cellComponents/SelectCell.tsx index fbf3b7208b1..792f1672e2c 100644 --- a/app/client/src/widgets/TableWidgetV2/component/cellComponents/SelectCell.tsx +++ b/app/client/src/widgets/TableWidgetV2/component/cellComponents/SelectCell.tsx @@ -200,6 +200,7 @@ export const SelectCell = (props: SelectProps) => { const cellLabelValue = useMemo(() => { if (releaseTableSelectCellLabelValue) { + if (!options.length) return value; const selectedOption = options.find( (option) => option[TableSelectColumnOptionKeys.VALUE] === value, );