diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ExplorerTests/Entity_Explorer_Datasource_Structure_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ExplorerTests/Entity_Explorer_Datasource_Structure_spec.js index dc051fbd77..1d917ec4df 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ExplorerTests/Entity_Explorer_Datasource_Structure_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ExplorerTests/Entity_Explorer_Datasource_Structure_spec.js @@ -49,7 +49,7 @@ describe("Entity explorer datasource structure", function() { // cy.get(explorer.datasourceColumn) // .first() // .click(); - cy.get(".bp3-popover-content").should("be.visible"); + // cy.get(".bp3-popover-content").should("be.visible"); cy.get(explorer.templateMenuIcon) .first() diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ExplorerTests/Entity_Explorer_Long_Name_Tooltip_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ExplorerTests/Entity_Explorer_Long_Name_Tooltip_spec.js new file mode 100644 index 0000000000..6e6df32f5c --- /dev/null +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ExplorerTests/Entity_Explorer_Long_Name_Tooltip_spec.js @@ -0,0 +1,45 @@ +const explorer = require("../../../../locators/explorerlocators.json"); +import { ObjectsRegistry } from "../../../../support/Objects/Registry"; +let ee = ObjectsRegistry.EntityExplorer; + +const shortName = "shortName"; +const longName = "AVeryLongNameThatOverflows"; +const alternateName = "AlternateName"; + +describe("Entity Explorer showing tooltips on long names", function() { + it("Expect tooltip on long names only", function() { + // create an API with a short name + cy.NavigateToAPI_Panel(); + cy.CreateAPI(shortName); + ee.ExpandCollapseEntity("QUERIES/JS", true); + // assert that a tooltip does not show up during hover + cy.get(`.t--entity-item:contains(${shortName})`).realHover(); + cy.get(".bp3-tooltip > .bp3-popover-content").should("not.exist"); + // reset the hover + cy.get("body").realHover({ position: "topLeft" }); + + // create another API with a long name + cy.NavigateToAPI_Panel(); + cy.CreateAPI(longName); + + // assert that a tooltip does show up during hover + cy.get(`.t--entity-item:contains(${longName})`).realHover(); + cy.get(".bp3-tooltip > .bp3-popover-content").should("have.text", longName); + // reset the hover + cy.get("body").realHover({ position: "topLeft" }); + + // rename it and ensure the tooltip does not show again + cy.get(`.t--entity-item:contains(${longName})`).within(() => { + cy.get(".t--context-menu").click({ force: true }); + }); + cy.selectAction("Edit Name"); + cy.get(explorer.editEntity) + .last() + .type(alternateName, { force: true }) + .blur(); + cy.wait("@saveAction"); + + cy.get(`.t--entity-item:contains(${alternateName})`).realHover(); + cy.get(".bp3-tooltip > .bp3-popover-content").should("not.exist"); + }); +}); diff --git a/app/client/cypress/support/WorkspaceCommands.js b/app/client/cypress/support/WorkspaceCommands.js index a3672c1621..9e79437216 100644 --- a/app/client/cypress/support/WorkspaceCommands.js +++ b/app/client/cypress/support/WorkspaceCommands.js @@ -301,6 +301,9 @@ Cypress.Commands.add("CreateAppInFirstListedWorkspace", (appname) => { "response.body.responseMeta.status", 200, ); + // Remove tooltip on the Application Name element + cy.get(homePage.applicationName).realHover(); + cy.get("body").realHover({ position: "topLeft" }); cy.waitUntil(() => cy.get(generatePage.buildFromScratchActionCard), { errorMsg: "Build app from scratch not visible even aft 80 secs", diff --git a/app/client/cypress/tsconfig.json b/app/client/cypress/tsconfig.json index 838ff3b3e4..f1deb7f4eb 100644 --- a/app/client/cypress/tsconfig.json +++ b/app/client/cypress/tsconfig.json @@ -33,7 +33,7 @@ "sourceMap": true, "baseUrl": "./cypress", "noFallthroughCasesInSwitch": true, - "types": ["cypress", "node"] + "types": ["cypress", "node", "cypress-real-events"] }, "include": ["/**/*.ts"] } diff --git a/app/client/package.json b/app/client/package.json index 9c02527f8d..db056d922d 100644 --- a/app/client/package.json +++ b/app/client/package.json @@ -242,7 +242,7 @@ "cypress-file-upload": "^4.1.1", "cypress-image-snapshot": "^4.0.1", "cypress-multi-reporters": "^1.2.4", - "cypress-real-events": "^1.5.1", + "cypress-real-events": "^1.7.1", "cypress-wait-until": "^1.7.2", "cypress-xpath": "^1.4.0", "dotenv": "^8.1.0", diff --git a/app/client/src/pages/Editor/Explorer/Entity/Name.tsx b/app/client/src/pages/Editor/Explorer/Entity/Name.tsx index 24ec2efefa..57a4df5fd4 100644 --- a/app/client/src/pages/Editor/Explorer/Entity/Name.tsx +++ b/app/client/src/pages/Editor/Explorer/Entity/Name.tsx @@ -99,8 +99,6 @@ export const EntityName = React.memo( const { name, searchKeyword, updateEntityName } = props; const [updatedName, setUpdatedName] = useState(name); - const targetRef = useRef(null); - const handleUpdateName = ({ name }: { name: string }) => updateEntityName(name); @@ -108,6 +106,13 @@ export const EntityName = React.memo( setUpdatedName(name); }, [name, setUpdatedName]); + // Check to show tooltip on hover + const nameWrapperRef = useRef(null); + const [showTooltip, setShowTooltip] = useState(false); + useEffect(() => { + setShowTooltip(!!isEllipsisActive(nameWrapperRef.current)); + }, [updatedName, name]); + const searchHighlightedName = useMemo(() => { if (searchKeyword) { const regex = new RegExp(searchKeyword, "gi"); @@ -133,7 +138,7 @@ export const EntityName = React.memo( {searchHighlightedName} {props.isBeta ? : ""} diff --git a/app/client/yarn.lock b/app/client/yarn.lock index b8c44a1695..553759b13f 100644 --- a/app/client/yarn.lock +++ b/app/client/yarn.lock @@ -5854,9 +5854,10 @@ cypress-multi-reporters@^1.2.4: debug "^4.1.1" lodash "^4.17.15" -cypress-real-events@^1.5.1: - version "1.5.1" - resolved "https://registry.npmjs.org/cypress-real-events/-/cypress-real-events-1.5.1.tgz" +cypress-real-events@^1.7.1: + version "1.7.1" + resolved "https://registry.yarnpkg.com/cypress-real-events/-/cypress-real-events-1.7.1.tgz#8f430d67c29ea4f05b9c5b0311780120cbc9b935" + integrity sha512-/Bg15RgJ0SYsuXc6lPqH08x19z6j2vmhWN4wXfJqm3z8BTAFiK2MvipZPzxT8Z0jJP0q7kuniWrLIvz/i/8lCQ== cypress-wait-until@^1.7.2: version "1.7.2"