fix: unneccessary ellipsis for page names in view mode (#12032)

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Pages/Page_Load_Spec.js

@@ -1,6 +1,5 @@
 const dsl = require("../../../../fixtures/PageLoadDsl.json");
 const commonlocators = require("../../../../locators/commonlocators.json");
-const pages = require("../../../../locators/Pages.json");
 const publish = require("../../../../locators/publishWidgetspage.json");
 const explorerLocators = require("../../../../locators/explorerlocators.json");
 
@@ -31,6 +30,8 @@ describe("Page Load tests", () => {
       .parent()
       .parent()
       .parent()
+      .parent()
+      .parent()
       .should("have.class", "is-active");
     // Assert active page DSL
     cy.get(commonlocators.headingTextStyle).should(
@@ -46,6 +47,8 @@ describe("Page Load tests", () => {
       .parent()
       .parent()
       .parent()
+      .parent()
+      .parent()
       .should("have.class", "is-active");
     // Assert active page DSL
     cy.get(commonlocators.headingTextStyle).should(
@@ -63,6 +66,8 @@ describe("Page Load tests", () => {
       .parent()
       .parent()
       .parent()
+      .parent()
+      .parent()
       .should("have.class", "is-active");
     // Assert active page DSL
     cy.get(commonlocators.headingTextStyle).should(

app/client/src/pages/AppViewer/viewer/PageTabs.tsx

@@ -92,17 +92,16 @@ function PageTabName({ name }: { name: string }) {
     }
   }, [tabNameRef]);
 
-  return ellipsisActive ? (
+  return (
     <TooltipComponent
       boundary="viewport"
       content={name}
+      disabled={!ellipsisActive}
       maxWidth="400px"
       position={Position.BOTTOM}
     >
       {tabNameText}
     </TooltipComponent>
-  ) : (
-    tabNameText
   );
 }
 

app/client/src/pages/Applications/ApplicationCard.tsx

@@ -51,7 +51,7 @@ import {
 import { Classes as CsClasses } from "components/ads/common";
 import TooltipComponent from "components/ads/Tooltip";
 import {
-  isEllipsisActive,
+  isVerticalEllipsisActive,
   truncateString,
   howMuchTimeBeforeText,
 } from "utils/helpers";
@@ -764,7 +764,7 @@ export function ApplicationCard(props: ApplicationCardProps) {
             isFetching={isFetchingApplications}
             ref={appNameWrapperRef}
           >
-            {isEllipsisActive(appNameWrapperRef?.current) ? (
+            {isVerticalEllipsisActive(appNameWrapperRef?.current) ? (
               <TooltipComponent
                 content={props.application.name}
                 maxWidth="400px"

app/client/src/utils/helpers.tsx

@@ -259,13 +259,12 @@ export const trimTrailingSlash = (path: string) => {
  * @param element
  */
 export const isEllipsisActive = (element: HTMLElement | null) => {
-  return (
+  return element && element.clientWidth < element.scrollWidth;
-    element &&
-    (element.clientWidth < element.scrollWidth ||
-      element.offsetHeight < element.scrollHeight)
-  );
 };
 
+export const isVerticalEllipsisActive = (element: HTMLElement | null) => {
+  return element && element.clientHeight < element.scrollHeight;
+};
 /**
  * converts array to sentences
  * for e.g - ['Pawan', 'Abhinav', 'Hetu'] --> 'Pawan, Abhinav and Hetu'