From d15eea3e1ed5cf2b3c0b9314248cf4318e9a66c5 Mon Sep 17 00:00:00 2001
From: Rahul Barwal <rahul.barwal@appsmith.com>
Date: Mon, 7 Oct 2024 17:22:02 +0530
Subject: [PATCH] fix: widget icon in Connect To options in oneclick binding
 menu (#36703)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description
This pull request fixes the issue with the widget icon not displaying
correctly in the Connect To options.
The `useConnectToOptions` function now correctly retrieves the widget
config for the current widget and uses the `iconSVG` property from the
config to display the widget icon.


Fixes #`Issue Number`
_or_
Fixes https://github.com/appsmithorg/appsmith/issues/36353
> [!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="@tag.All"

### :mag: 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/11208692370>
> Commit: 80a63553ab8f1d77695d3261095a90acdb4b5a4d
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11208692370&attempt=2"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.All`
> Spec:
> <hr>Mon, 07 Oct 2024 09:25:24 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 datasource selection validation by ensuring images associated
with queried items are present and valid.
- Improved icon retrieval for connectable widgets in the dropdown,
allowing for more accurate icon displays based on widget types.

- **Bug Fixes**
- Fixed icon rendering issues in dropdown options to ensure the correct
icons are displayed.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Jacques Ikot <jacquesikot@gmail.com>
---
 .../ClientSide/OneClickBinding/spec_utility.ts  | 17 ++++++++++++++++-
 .../useSource/useConnectToOptions.tsx           |  5 ++++-
 .../OtherFields/Field/Dropdown/useDropdown.tsx  |  5 ++++-
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/app/client/cypress/e2e/Regression/ClientSide/OneClickBinding/spec_utility.ts b/app/client/cypress/e2e/Regression/ClientSide/OneClickBinding/spec_utility.ts
index 91b52c0d11..ba218d46f1 100644
--- a/app/client/cypress/e2e/Regression/ClientSide/OneClickBinding/spec_utility.ts
+++ b/app/client/cypress/e2e/Regression/ClientSide/OneClickBinding/spec_utility.ts
@@ -12,7 +12,22 @@ export class OneClickBinding {
     column: Record<string, string> = {},
   ) {
     agHelper.GetNClick(oneClickBindingLocator.datasourceDropdownSelector);
-
+    agHelper.GetElement("[role='menu']").then(($menu) => {
+      if (
+        $menu.find(oneClickBindingLocator.datasourceQuerySelector()).length > 0
+      ) {
+        cy.wrap($menu)
+          .find(oneClickBindingLocator.datasourceQuerySelector())
+          .should("have.length.greaterThan", 0)
+          .each(($item) => {
+            cy.wrap($item)
+              .find("img")
+              .should(($img) => {
+                expect($img).to.have.attr("src").and.not.be.empty;
+              });
+          });
+      }
+    });
     expandLoadMoreOptions();
 
     agHelper.AssertElementAbsence(oneClickBindingLocator.connectData);
diff --git a/app/client/src/components/editorComponents/WidgetQueryGeneratorForm/CommonControls/DatasourceDropdown/useSource/useConnectToOptions.tsx b/app/client/src/components/editorComponents/WidgetQueryGeneratorForm/CommonControls/DatasourceDropdown/useSource/useConnectToOptions.tsx
index 9b63854020..ceedd1fda2 100644
--- a/app/client/src/components/editorComponents/WidgetQueryGeneratorForm/CommonControls/DatasourceDropdown/useSource/useConnectToOptions.tsx
+++ b/app/client/src/components/editorComponents/WidgetQueryGeneratorForm/CommonControls/DatasourceDropdown/useSource/useConnectToOptions.tsx
@@ -227,6 +227,9 @@ function useConnectToOptions(props: ConnectToOptionsProps) {
           // This is the path we bind to the sourceData field Ex: `{{Table1.selectedRow}}`
           const { widgetBindPath } =
             getOneClickBindingConnectableWidgetConfig(currWidget);
+          const iconSVG =
+            WidgetFactory.getConfig(currWidget.type)?.iconSVG ||
+            currWidget.iconSVG;
 
           return {
             id: widgetId,
@@ -237,7 +240,7 @@ function useConnectToOptions(props: ConnectToOptionsProps) {
                 <DatasourceImage
                   alt="widget-icon"
                   className="dataSourceImage"
-                  src={currWidget.iconSVG}
+                  src={iconSVG}
                 />
               </ImageWrapper>
             ),
diff --git a/app/client/src/components/editorComponents/WidgetQueryGeneratorForm/WidgetSpecificControls/OtherFields/Field/Dropdown/useDropdown.tsx b/app/client/src/components/editorComponents/WidgetQueryGeneratorForm/WidgetSpecificControls/OtherFields/Field/Dropdown/useDropdown.tsx
index efac989bf9..e5143135f2 100644
--- a/app/client/src/components/editorComponents/WidgetQueryGeneratorForm/WidgetSpecificControls/OtherFields/Field/Dropdown/useDropdown.tsx
+++ b/app/client/src/components/editorComponents/WidgetQueryGeneratorForm/WidgetSpecificControls/OtherFields/Field/Dropdown/useDropdown.tsx
@@ -81,12 +81,15 @@ export function useDropdown(props: OneClickDropdownFieldProps) {
       if (getOneClickBindingConnectableWidgetConfig) {
         const { message, widgetBindPath } =
           getOneClickBindingConnectableWidgetConfig(currWidget);
+        const iconSVG =
+          WidgetFactory.getConfig(currWidget.type)?.iconSVG ||
+          currWidget.iconSVG;
 
         return {
           id: currWidgetId,
           value: widgetBindPath,
           label: currWidget.widgetName,
-          icon: <StyledImage alt="widget-icon" src={currWidget.iconSVG} />,
+          icon: <StyledImage alt="widget-icon" src={iconSVG} />,
           data: {
             widgetType: currWidget.type,
             widgetName: currWidget.widgetName,