PromucFlow_constructor/app/client/packages/dsl/src/migrate/migrations
Jacques Ikot 002ee78966
fix: resolve empty table dropdown issue with dynamic select options in add new row functionality (#37108)
## Description
**Problem**
When using a Table widget's Select column type with dynamic options, the
computed value binding fails to handle empty table states correctly. If
the table has no data (`processedTableData` is empty), the dynamic
options evaluation still attempts to map over the non-existent table
data, resulting in an empty array instead of the expected options.

**Root Cause**
The issue stems from the `getComputedValue` function always using the
table mapping binding prefix:
```typescript
{{${tableName}.processedTableData.map((currentRow, currentIndex) => (
  // dynamic options here
))}}
```
This creates an unnecessary dependency on table data even when the
dynamic options don't reference `currentRow` or `currentIndex`, causing
evaluation to fail when the table is empty.

### Problematic Evaluation
When the table is empty, expressions like this in table widget computed
properties:
```typescript
{{[
  { label: "Released", value: "Released" },
  { label: "Not Released", value: "Not Released" }
]}}
```
Would evaluate to an empty array `[]` because it's wrapped in a `.map()`
over empty table data.

**Solution**
Updated the binding logic to account for scenarios where table does not
have data and return the evaluated string directly in an IIFE

1. Updated the binding prefix and suffix
```typescript
static getBindingPrefix = (tableName: string) => {
  return `{{(() => { const tableData = ${tableName}.processedTableData || []; return tableData.length > 0 ? tableData.map((currentRow, currentIndex) => (`;
};

static getBindingSuffix = (stringToEvaluate: string) => {
  return `)) : ${stringToEvaluate} })()}}`;
};
```

2. Refactored `getComputedValue` and `getInputComputedValue` to
implement the new bindings
3. Created a migration and migration test for the DSL change

This ensures that:
- Dynamic options not dependent on table context evaluate correctly even
with empty tables
- The component maintains consistent behaviour across all table states

The solution prevents unnecessary table data dependencies while
preserving the ability to use table-specific values when required.


Fixes #23470  

## Automation

/ok-to-test tags="@tag.Table, @tag.Binding, @tag.Select, @tag.Sanity,
@tag.Widget"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/13514895959>
> Commit: 0d2e78a0a7be63d4f70fc3499829621bd1761b3d
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=13514895959&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Table, @tag.Binding, @tag.Select, @tag.Sanity,
@tag.Widget`
> Spec:
> <hr>Tue, 25 Feb 2025 07:52:52 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Enhanced test coverage for adding new rows in the `TableV2` widget,
ensuring proper UI behavior when no data exists.
- **Bug Fixes**
- Improved validation of UI elements based on the "Allow adding a row"
property.
- **Refactor**
- Streamlined logic for handling computed values in the
`ComputeTablePropertyControlV2`, improving readability and
functionality.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-02-25 10:38:38 +01:00
..
001-update-containers.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
002-chart-data-migration.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
003-map-data-migration.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
004-single-chart-data-migration.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
005-tabs-widget-property-migration.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
006-dynamic-path-list-migration.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
007-canvas-name-conflict-migration.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
008-renamed-canvas-name-conflict-migration.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
009-table-widget-property-pane-migration.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
010-add-version-number-migration.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
011-migrate-table-primary-columns-binding.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
012-migrate-incorrect-dynamic-binding-path-lists.ts chore: decouple widget-config.json from main chunk (#36924) 2024-10-17 20:48:39 +05:30
013-migrate-old-chart-data.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
014-rte-default-value-migration.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
015-migrate-text-style-from-text-widget.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
016-migrate-chart-data-from-array-to-object.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
017-migrate-tabs-data.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
018-migrate-initial-values.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
019-migrate-to-new-layout.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
020-migrate-newly-added-tabs-widgets-missing-data.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
021-migrate-overflowing-tabs-widgets.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
022-migrate-table-widget-parent-row-space-property.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
023-add-log-blacklist-to-all-widget-children.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
024-migrate-table-widget-header-visibility-properties.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
025-migrate-items-to-list-data-in-list-widget.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
026-migrate-datepicker-min-max-date.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
027-migrate-filter-value-for-dropdown-widget.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
028-migrate-table-primary-columns-computed-value.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
029-migrate-to-new-multiselect.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
030-migrate-table-widget-delimiter-properties.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
031-migrate-is-disabled-to-button-column.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
032-migrate-table-default-selected-row.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
033-migrate-menu-button-widget-button-properties.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
034-migrate-button-widget-validation.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
035-migrate-input-validation.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
036-revert-table-default-selected-row.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
037-migrate-table-sanitize-column-keys.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
038-migrate-resizable-modal-widget-properties.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
039-migrate-table-widget-selected-row-bindings.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
040-revert-button-style-to-button-color.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
041-migrate-button-variant.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
042-migrate-map-widget-is-clicked-marker-centered.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
043-map-allow-horizontal-scroll-mirgation.ts
044-is-sortable-migration.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
045-migrate-table-widget-icon-button-variant.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
046-migrate-checkbox-group-widget-inline-property.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
048-migrate-recaptcha-type.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
049-add-private-widgets-to-all-list-widgets.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
051-migrate-phone-input-widget-allow-formatting.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
052-migrate-modal-icon-button-widget.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
053-migrate-scroll-truncate-property.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
054-migrate-phone-input-widget-default-dial-code.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
055-migrate-currency-input-widget-default-currency-code.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
056-migrate-radio-group-alignment-property.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
057-migrate-styling-properties-for-theming.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
058-migrate-checkbox-switch-property.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
059-migrate-chart-widget-reskinning-data.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
060-migrate-table-widget-v2-validation.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
062-migrate-select-type-widget-default-value.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
063-migrate-map-chart-widget-reskinning-data.ts
064-migrate-rate-widget-disabed-state.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
065-migrate-code-scanner-layout.ts
066-migrate-table-widget-v2-validation-binding.ts
067-migrate-label-position.ts
068-migrate-properties-for-dynamic-height.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
069-migrate-menu-button-dynamic-items.ts
070-migrate-child-stylesheet-from-dynamic-binding-path-list.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
071-migrate-table-widget-v2-select-option.ts
072-migrate-list-widget-children-for-auto-height.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
073-mirgate-input-widget-show-step-arrows.ts
074-migrate-mwnu-button-dynamic-items-inside-table-widget.ts
075-migrate-input-widgets-multiline-input-type.ts
076-migrate-column-freeze-attributes.ts
077-migrate-table-select-option-attributes-for-new-row.ts
078-migrate-binding-prefix-suffix-for-inline-edit-validation-control.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
079-migrate-table-widget-table-data-js-mode.ts
080-migrate-select-widget-option-to-source-data.ts
081-migrate-select-widget-source-data-binding-path-list.ts
082-migrate-chart-widget-label-orientation-stagger-option.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
083-migrate-add-show-hide-data-point-labels.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
084-migrate-select-widget-add-source-data-property-path-list.ts
085-migrate-default-values-for-custom-echart.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
086-migrate-table-server-side-filtering.ts
087-migrate-chart-widget-customechartdata.ts
088-migrate-custom-widget-dynamic-height.ts
089-migrage-table-widget-v2-currentRow-binding.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
090-migrate-table-compute-value-binding.ts fix: resolve empty table dropdown issue with dynamic select options in add new row functionality (#37108) 2025-02-25 10:38:38 +01:00