feat: Adds tooltip to reconnect datasources list. (#22083)

## Description
Adds tooltip to the icon next to data source name

This is helpful when data source name is long and truncated.

Fixes # (issue)
[16067](https://github.com/appsmithorg/appsmith/issues/16067)


Media
![Screenshot 2023-04-04 at 3 50 11
PM](https://user-images.githubusercontent.com/6761673/229762544-9a82f80e-f493-4fda-9b5b-6ab486fa699d.png)

## Type of change

- New feature (non-breaking change which adds functionality)


## How Has This Been Tested?
Added cypress test and confirmed locally.
Steps to reproduce are in the issue link above

- Cypress

### Test Plan
> Add Testsmith test cases links that relate to this PR

### Issues raised during DP testing
> Link issues raised during DP testing for better visiblity and tracking
(copy link from comments dropped on this PR)


## Checklist:
### Dev activity
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


### QA activity:
- [ ] Test plan has been approved by relevant developers
- [ ] Test plan has been peer reviewed by QA
- [ ] Cypress test cases have been added and approved by either SDET or
manual QA
- [ ] Organized project review call with relevant stakeholders after
Round 1/2 of QA
- [ ] Added Test Plan Approved label after reveiwing all Cypress test

app/client/cypress/integration/Regression_TestSuite/ClientSideTests/Templates/Fork_Template_spec.js

@@ -1,5 +1,6 @@
 const commonlocators = require("../../../../locators/commonlocators.json");
 const templateLocators = require("../../../../locators/TemplatesLocators.json");
+const reconnectDatasourceLocators = require("../../../../locators/ReconnectLocators.js");
 import { ObjectsRegistry } from "../../../../support/Objects/Registry";
 const { AggregateHelper, HomePage } = ObjectsRegistry;
 
@@ -56,4 +57,27 @@ describe("Fork a template to an workspace", () => {
       templateLocators.templateViewForkButton,
     );
   });
+
+  it("4. Check if tooltip is working in 'Reconnect Datasources'", () => {
+    cy.NavigateToHome();
+    cy.get(templateLocators.templatesTab).click();
+    cy.wait(1000);
+    cy.xpath(
+      "//div[text()='Customer Messaging Tool']/parent::div//button[contains(@class, 't--fork-template')]",
+    )
+      .scrollIntoView()
+      .wait(500)
+      .click();
+    cy.get("body").then(($ele) => {
+      if ($ele.find(templateLocators.templateViewForkButton).length) {
+        cy.get(templateLocators.templateViewForkButton).click();
+      }
+    });
+    cy.get(templateLocators.dialogForkButton).click();
+    cy.get(reconnectDatasourceLocators.Modal).should("be.visible");
+    cy.get(reconnectDatasourceLocators.ListItemIcon)
+      .first()
+      .trigger("mouseover");
+    cy.get("[class$='popover-open']").should("be.visible");
+  });
 });

app/client/cypress/integration/SmokeSuite/Application/ReconnectDatasource_spec.js

@@ -33,7 +33,7 @@ describe("Reconnect Datasource Modal validation while importing application", fu
               "Untitled Datasource",
             );
             // not configured yet
-            cy.get(".t--ds-list .cs-icon")
+            cy.get(".t--ds-list .t--ds-list-icon")
               .invoke("attr", "name")
               .should("eq", "info");
             // check db type

app/client/cypress/locators/ReconnectLocators.js

@@ -4,4 +4,5 @@ export default {
   SkipToAppBtn: ".t--skip-to-application-btn",
   ImportSuccessModal: ".t--import-app-success-modal",
   ImportSuccessModalCloseBtn: ".t--import-success-modal-got-it",
+  ListItemIcon: ".t--ds-list-icon"
 };

app/client/src/pages/Editor/gitSync/components/DatasourceListItem.tsx

@@ -1,5 +1,11 @@
-import { Icon, IconSize, Text, TextType } from "design-system-old";
 import { Colors } from "constants/Colors";
+import {
+  Icon,
+  IconSize,
+  Text,
+  TextType,
+  TooltipComponent,
+} from "design-system-old";
 import type { Datasource } from "entities/Datasource";
 import { PluginImage } from "pages/Editor/DataSourceEditor/JSONtoForm";
 import React from "react";
@@ -69,11 +75,14 @@ function ListItemWrapper(props: {
           >
             {ds.name}
           </Text>
-          <Icon
-            fillColor={ds.isConfigured ? Colors.GREEN : Colors.ERROR_RED}
-            name={ds.isConfigured ? "oval-check" : "info"}
-            size={IconSize.MEDIUM}
-          />
+          <TooltipComponent content={ds.name} position="left">
+            <Icon
+              className="t--ds-list-icon"
+              fillColor={ds.isConfigured ? Colors.GREEN : Colors.ERROR_RED}
+              name={ds.isConfigured ? "oval-check" : "info"}
+              size={IconSize.MEDIUM}
+            />
+          </TooltipComponent>
         </DsTitle>
         <Text color={Colors.GRAY_700} type={TextType.H5}>
           {plugin.name}