From 9e3f70f89444d10fea0cd11620fac2013ee74e63 Mon Sep 17 00:00:00 2001 From: Rahul Barwal Date: Tue, 18 Apr 2023 19:06:38 +0530 Subject: [PATCH] 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 --- .../Templates/Fork_Template_spec.js | 24 +++++++++++++++++++ .../Application/ReconnectDatasource_spec.js | 2 +- .../cypress/locators/ReconnectLocators.js | 1 + .../gitSync/components/DatasourceListItem.tsx | 21 +++++++++++----- 4 files changed, 41 insertions(+), 7 deletions(-) diff --git a/app/client/cypress/integration/Regression_TestSuite/ClientSideTests/Templates/Fork_Template_spec.js b/app/client/cypress/integration/Regression_TestSuite/ClientSideTests/Templates/Fork_Template_spec.js index b8f16dacd4..b1ef2915ba 100644 --- a/app/client/cypress/integration/Regression_TestSuite/ClientSideTests/Templates/Fork_Template_spec.js +++ b/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"); + }); }); diff --git a/app/client/cypress/integration/SmokeSuite/Application/ReconnectDatasource_spec.js b/app/client/cypress/integration/SmokeSuite/Application/ReconnectDatasource_spec.js index 4d848027af..e1d1e05b40 100644 --- a/app/client/cypress/integration/SmokeSuite/Application/ReconnectDatasource_spec.js +++ b/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 diff --git a/app/client/cypress/locators/ReconnectLocators.js b/app/client/cypress/locators/ReconnectLocators.js index 0f36420058..b71728d005 100644 --- a/app/client/cypress/locators/ReconnectLocators.js +++ b/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" }; diff --git a/app/client/src/pages/Editor/gitSync/components/DatasourceListItem.tsx b/app/client/src/pages/Editor/gitSync/components/DatasourceListItem.tsx index 06db6bfd62..8ce59509a3 100644 --- a/app/client/src/pages/Editor/gitSync/components/DatasourceListItem.tsx +++ b/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} - + + + {plugin.name}