Fix: Set a default option in select widget while adding from suggested widgets (#6236)

app/client/src/components/editorComponents/ActionRightPane/SuggestedWidgets.tsx

@@ -1,6 +1,6 @@
 import { getTypographyByKey } from "constants/DefaultTheme";
 import { WidgetTypes } from "constants/WidgetConstants";
-import React from "react";
+import React, { memo } from "react";
 import { useDispatch } from "react-redux";
 import styled from "styled-components";
 import { generateReactKey } from "utils/generators";
@@ -15,6 +15,10 @@ import {
   SUGGESTED_WIDGET_TOOLTIP,
 } from "constants/messages";
 import { SuggestedWidget } from "api/ActionAPI";
+import { useSelector } from "store";
+import { getDataTree } from "selectors/dataTreeSelectors";
+import { getWidgets } from "sagas/selectors";
+import { getNextWidgetName } from "sagas/WidgetOperationSagas";
 
 const WidgetList = styled.div`
   ${(props) => getTypographyByKey(props, "p1")}
@@ -107,6 +111,7 @@ function getWidgetProps(
   suggestedWidget: SuggestedWidget,
   widgetInfo: WidgetBindingInfo,
   actionName: string,
+  widgetName?: string,
 ) {
   const fieldName = widgetInfo.propertyName;
   switch (suggestedWidget.type) {
@@ -134,6 +139,18 @@ function getWidgetProps(
           dynamicBindingPathList: [{ key: `chartData.${reactKey}.data` }],
         },
       };
+    case WidgetTypes.DROP_DOWN_WIDGET:
+      return {
+        type: suggestedWidget.type,
+        props: {
+          [fieldName]: `{{${actionName}.${suggestedWidget.bindingQuery}}}`,
+          defaultOptionValue: `{{${widgetName}.options[0].value}}`,
+          dynamicBindingPathList: [
+            { key: widgetInfo.propertyName },
+            { key: "defaultOptionValue" },
+          ],
+        },
+      };
     default:
       return {
         type: suggestedWidget.type,
@@ -153,15 +170,23 @@ type SuggestedWidgetProps = {
 
 function SuggestedWidgets(props: SuggestedWidgetProps) {
   const dispatch = useDispatch();
+  const dataTree = useSelector(getDataTree);
+  const canvasWidgets = useSelector(getWidgets);
 
   const addWidget = (
     suggestedWidget: SuggestedWidget,
     widgetInfo: WidgetBindingInfo,
   ) => {
+    const widgetName = getNextWidgetName(
+      canvasWidgets,
+      suggestedWidget.type,
+      dataTree,
+    );
     const payload = getWidgetProps(
       suggestedWidget,
       widgetInfo,
       props.actionName,
+      widgetName,
     );
 
     AnalyticsUtil.logEvent("SUGGESTED_WIDGET_CLICK", {
@@ -204,4 +229,5 @@ function SuggestedWidgets(props: SuggestedWidgetProps) {
   );
 }
 
-export default SuggestedWidgets;
+const MemoizedSuggestedWidgets = memo(SuggestedWidgets);
+export default MemoizedSuggestedWidgets;

app/client/src/sagas/WidgetOperationSagas.tsx

@@ -135,6 +135,7 @@ import {
 import { getSelectedWidgets } from "selectors/ui";
 import { getParentWithEnhancementFn } from "./WidgetEnhancementHelpers";
 import { widgetSelectionSagas } from "./WidgetSelectionSagas";
+import { DataTree } from "entities/DataTree/dataTreeFactory";
 
 function* getChildWidgetProps(
   parent: FlattenedWidgetProps,
@@ -1463,15 +1464,10 @@ function* getEntityNames() {
   return Object.keys(evalTree);
 }
 
-function getNextWidgetName(
+export function getNextWidgetName(
   widgets: CanvasWidgetsReduxState,
   type: WidgetType,
-  evalTree: {
-    bottomRow: any;
-    leftColumn: any;
-    rightColumn: any;
-    topRow: any;
-  },
+  evalTree: DataTree,
   options?: Record<string, unknown>,
 ) {
   // Compute the new widget's name
@@ -1580,7 +1576,7 @@ function* pasteWidgetSaga() {
           // goToNextAvailableRow = true,
           // persistColumnPosition = false,
 
-          const evalTree = yield select(getDataTree);
+          const evalTree: DataTree = yield select(getDataTree);
 
           // Get a flat list of all the widgets to be updated
           const widgetList = copiedWidgets.list;