fix: widget icon in Connect To options in oneclick binding menu (#36703)

## 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"

### 🔍 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>

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);

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>
             ),

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,