feat: Add WDS Table Widget to list of suggested widgets (#34816)

## Description
- The Bind Data menu in the query pane did not list the WDS Table Widget
when looking for existing widgets to which to bind the query.
- This PR fixes this by adding `WDS_TABLE_WIDGET` to the following
- `SUPPORTED_SUGGESTED_WIDGETS` - Because the code checks if the key
(widget type) exists in this list before listing them
- `WIDGET_DATA_FIELD_MAP` - Because the code gets the info necessary to
bind data to the widgets using this list

This PR does not effect the functionality of Fixed mode, and only
effects Anvil apps.

Fixes #34164 

## Automation

/ok-to-test tags="@tag.IDE"

### 🔍 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/9854175427>
> Commit: 17bb948c02ce6e1e63e68641abd2ca4576c978cc
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9854175427&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.IDE`
> Spec:
> <hr>Tue, 09 Jul 2024 09:33:31 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**
- Added support for the `WDS_TABLE_WIDGET` in the data binding feature,
enabling enhanced widget configurations and transformations.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Abhinav Jha 2024-07-10 12:30:09 +05:30 committed by GitHub
parent 5379ceb312
commit 8a4f1b0a5d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -52,7 +52,7 @@ interface BindDataButtonProps {
hasResponse: boolean;
}
const SUPPORTED_SUGGESTED_WIDGETS = ["TABLE_WIDGET_V2"];
const SUPPORTED_SUGGESTED_WIDGETS = ["TABLE_WIDGET_V2", "WDS_TABLE_WIDGET"];
const connectExistingWidgetLabel = createMessage(CONNECT_EXISTING_WIDGET_LABEL);
const addNewWidgetLabel = createMessage(ADD_NEW_WIDGET);
@ -95,6 +95,14 @@ export const WIDGET_DATA_FIELD_MAP: Record<string, WidgetBindingInfo> = {
existingImage: `${ASSETS_CDN_URL}/widgetSuggestion/existing_table.svg`,
icon: tableWidgetIconSvg,
},
WDS_TABLE_WIDGET: {
label: "tabledata",
propertyName: "tableData",
widgetName: "Table",
image: `${ASSETS_CDN_URL}/widgetSuggestion/table.svg`,
existingImage: `${ASSETS_CDN_URL}/widgetSuggestion/existing_table.svg`,
icon: tableWidgetIconSvg,
},
CHART_WIDGET: {
label: "chart-series-data-control",
propertyName: "chartData",
@ -129,7 +137,9 @@ export const WIDGET_DATA_FIELD_MAP: Record<string, WidgetBindingInfo> = {
},
};
//TODO(Balaji): Abstraction leak.
// This function and the above map can resolve the abstraction leaks, if the widgets themselves provide these configurations.
// We can then access them via the widget configs and avoid mentioning individual widget types
// Created an issue here: https://github.com/appsmithorg/appsmith/issues/34813
function getWidgetProps(
suggestedWidget: SuggestedWidget,
widgetInfo: WidgetBindingInfo,
@ -264,6 +274,9 @@ function BindDataButton(props: BindDataButtonProps) {
const pages = useSelector(getPageList);
const isAnvilLayout = useSelector(getIsAnvilLayout);
// The purpose of this filter is to make sure that if Anvil is enabled
// only those widgets which have an alternative in Anvil are listed
// for selection for adding a new suggested widget
const filteredSuggestedWidgets =
isAnvilLayout && suggestedWidgets
? suggestedWidgets.filter((each) =>
@ -312,6 +325,10 @@ function BindDataButton(props: BindDataButtonProps) {
AnalyticsUtil.logEvent("SUGGESTED_WIDGET_CLICK", {
widget: suggestedWidget.type,
});
// This action calls the Anvil Suggested widget saga
// which transforms a legacy widget into an Anvil widget
// For example: a request to add TABLE_WIDGET_V2, is transformed
// to add WDS_TABLE_WIDGET
dispatch(addSuggestedWidget(payload));
};