Revert "chore: Housekeeping of List Item and Entity Item" (#38535)

app/client/packages/design-system/ads/src/List/List.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import clsx from "classnames";
 
 import type { ListItemProps, ListProps } from "./List.types";
@@ -22,7 +22,6 @@ import {
   ListItemTextOverflowClassName,
   ListItemTitleClassName,
 } from "./List.constants";
-import { useEventCallback } from "usehooks-ts";
 
 function List({ className, items, ...rest }: ListProps) {
   return (
@@ -35,30 +34,39 @@ function List({ className, items, ...rest }: ListProps) {
 }
 
 function TextWithTooltip(props: TextProps & { isMultiline?: boolean }) {
+  const ref = React.useRef<HTMLDivElement>(null);
   const [disableTooltip, setDisableTooltip] = useState(true);
 
-  const handleShowFullText = useEventCallback(
-    (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-      let isInEllipsis = false;
-      const text_node = e.target;
-
-      if (text_node instanceof HTMLElement) {
-        if (props.isMultiline) {
-          isInEllipsis =
-            text_node && text_node.clientHeight < text_node.scrollHeight;
-        } else {
-          isInEllipsis =
-            text_node && text_node.clientWidth < text_node.scrollWidth;
-        }
+  const isEllipsisActive = () => {
+    let active = false;
+
+    if (ref.current) {
+      const text_node = ref.current.children[0];
+
+      if (props.isMultiline) {
+        active = text_node && text_node.clientHeight < text_node.scrollHeight;
+      } else {
+        active = text_node && text_node.clientWidth < text_node.scrollWidth;
       }
+    }
 
-      setDisableTooltip(!isInEllipsis);
-    },
-  );
+    setDisableTooltip(!active);
+  };
+
+  useEffect(() => {
+    if (ref.current) {
+      isEllipsisActive();
+      ref.current.addEventListener("mouseover", isEllipsisActive);
+
+      return () => {
+        ref.current?.removeEventListener("mouseover", isEllipsisActive);
+      };
+    }
+  }, []);
 
   return (
     <Tooltip content={props.children} isDisabled={disableTooltip}>
-      <TooltipTextWrapper onMouseOver={handleShowFullText}>
+      <TooltipTextWrapper ref={ref}>
         <Text
           {...props}
           className={clsx(ListItemTextOverflowClassName, props.className)}
@@ -84,33 +92,28 @@ function ListItem(props: ListItemProps) {
   const isBlockDescription = descriptionType === "block" && description;
   const isInlineDescription = descriptionType === "inline" && description;
 
-  const handleOnClick = useEventCallback((e: React.MouseEvent) => {
-    e.stopPropagation();
-
+  const handleOnClick = () => {
     if (!props.isDisabled && props.onClick) {
-      props.onClick(e);
+      props.onClick();
     }
-  });
-
-  const handleDoubleClick = useEventCallback((e: React.MouseEvent) => {
-    e.stopPropagation();
+  };
 
+  const handleDoubleClick = () => {
     if (!props.isDisabled && props.onDoubleClick) {
       props.onDoubleClick();
     }
-  });
+  };
 
-  const handleRightControlClick = useEventCallback((e: React.MouseEvent) => {
+  const handleRightControlClick = (e: React.MouseEvent) => {
     e.stopPropagation();
-  });
+  };
 
   return (
     <StyledListItem
       className={clsx(ListItemClassName, props.className)}
       data-disabled={props.isDisabled || false}
       data-rightcontrolvisibility={rightControlVisibility}
       data-selected={props.isSelected}
-      id={props.id}
       onClick={handleOnClick}
       onDoubleClick={handleDoubleClick}
       role="listitem"

app/client/packages/design-system/ads/src/List/List.types.tsx

@@ -1,5 +1,5 @@
 import type { Sizes } from "../__config__/types";
-import type { MouseEvent, ReactNode } from "react";
+import type { ReactNode } from "react";
 
 export type ListSizes = Extract<Sizes, "md" | "lg">;
 
@@ -11,7 +11,7 @@ export interface ListItemProps {
   /** Control the visibility trigger of right control */
   rightControlVisibility?: "hover" | "always";
   /** callback for when the list item is clicked */
-  onClick: (e: MouseEvent) => void;
+  onClick: () => void;
   /** callback for when the list item is double-clicked */
   onDoubleClick?: () => void;
   /** Whether the list item is disabled. */

app/client/packages/design-system/ads/src/Templates/EntityExplorer/Editable/useEditableText.test.tsx

@@ -82,7 +82,6 @@ describe("useEditableText", () => {
     act(() => {
       handleKeyUp({
         key: "Enter",
-        stopPropagation: jest.fn(),
       } as unknown as React.KeyboardEvent<HTMLInputElement>);
     });
 
@@ -114,7 +113,6 @@ describe("useEditableText", () => {
     act(() => {
       handleKeyUp({
         key: "Enter",
-        stopPropagation: jest.fn(),
       } as unknown as React.KeyboardEvent<HTMLInputElement>);
     });
 
@@ -136,10 +134,7 @@ describe("useEditableText", () => {
     const [, , , handleKeyUp] = result.current;
 
     act(() => {
-      handleKeyUp({
-        key: "Escape",
-        stopPropagation: jest.fn(),
-      } as unknown as React.KeyboardEvent<HTMLInputElement>);
+      handleKeyUp({ key: "Escape" } as React.KeyboardEvent<HTMLInputElement>);
     });
 
     expect(mockExitEditing).toHaveBeenCalled();
@@ -160,10 +155,7 @@ describe("useEditableText", () => {
     const [, , , handleKeyUp] = result.current;
 
     act(() => {
-      handleKeyUp({
-        key: "Enter",
-        stopPropagation: jest.fn(),
-      } as unknown as React.KeyboardEvent<HTMLInputElement>);
+      handleKeyUp({ key: "Enter" } as React.KeyboardEvent<HTMLInputElement>);
     });
 
     expect(mockExitEditing).toHaveBeenCalled();

app/client/packages/design-system/ads/src/Templates/EntityExplorer/Editable/useEditableText.ts

@@ -74,8 +74,6 @@ export function useEditableText(
   ]);
 
   const handleKeyUp = useEventCallback((e: KeyboardEvent<HTMLInputElement>) => {
-    e.stopPropagation();
-
     if (e.key === "Enter") {
       attemptSave();
     } else if (e.key === "Escape") {

app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/EntityItem.stories.tsx

@@ -36,7 +36,6 @@ const Template = (props: EntityItemProps) => {
       <ExplorerContainer borderRight="STANDARD" height="500px" width="255px">
         <Flex flexDirection="column" gap="spaces-2" p="spaces-3">
           <EntityItem
-            id="storyItem"
             onDoubleClick={() => {
               setIsEditing(true);
             }}

app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/EntityItem.tsx

@@ -4,7 +4,6 @@ import { ListItem, Spinner, Tooltip } from "../../..";
 import type { EntityItemProps } from "./EntityItem.types";
 import { EntityEditableName } from "./EntityItem.styles";
 import { useEditableText } from "../Editable";
-import clx from "classnames";
 
 export const EntityItem = (props: EntityItemProps) => {
   const {
@@ -78,10 +77,7 @@ export const EntityItem = (props: EntityItemProps) => {
   return (
     <ListItem
       {...props}
-      className={clx("t--entity-item", props.className)}
       customTitleComponent={customTitle}
-      data-testid={`t--entity-item-${props.title}`}
-      id={"entity-" + props.id}
       startIcon={startIcon}
     />
   );

app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/EntityItem.types.ts

@@ -5,8 +5,6 @@ export interface EntityItemProps
     ListItemProps,
     "customTitleComponent" | "description" | "descriptionType"
   > {
-  /** ID of the entity. Will be added to the markup for identification */
-  id: string;
   /** Control the name editing behaviour */
   nameEditorConfig: {
     // Set editable based on user permissions