fix: Tooltip for long names in Entity Explorer (#15068)

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

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");
+  });
+});

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

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"]
 }

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

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<HTMLDivElement | null>(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<HTMLDivElement | null>(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(
           <TooltipComponent
             boundary={"viewport"}
             content={updatedName}
-            disabled={!isEllipsisActive(targetRef.current)}
+            disabled={!showTooltip}
             hoverOpenDelay={TOOLTIP_HOVER_ON_DELAY}
             modifiers={{ arrow: { enabled: false } }}
             position="top-left"
@@ -143,7 +148,7 @@ export const EntityName = React.memo(
                 props.className ? props.className : ""
               } ContextMenu`}
               onDoubleClick={props.enterEditMode}
-              ref={targetRef}
+              ref={nameWrapperRef}
             >
               {searchHighlightedName}
               {props.isBeta ? <BetaIcon className="beta-icon" /> : ""}

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"