From 3ccf4371b0060a2dc90feae6c949a7f4ca164e2e Mon Sep 17 00:00:00 2001
From: Ankita Kinger <ankita@appsmith.com>
Date: Tue, 24 Dec 2024 13:42:42 +0530
Subject: [PATCH 1/6] updating list item and list components in ADS

---
 .../ads/src/List/List.stories.tsx             |  39 +++----
 .../ads/src/List/List.styles.tsx              |  92 ++++++++--------
 .../design-system/ads/src/List/List.tsx       | 102 ++++++------------
 .../design-system/ads/src/List/List.types.tsx |  12 +--
 .../Editor/Explorer/Actions/ActionEntity.tsx  |  42 ++++----
 .../pages/Editor/Explorer/ExplorerIcons.tsx   |   4 +-
 6 files changed, 130 insertions(+), 161 deletions(-)

diff --git a/app/client/packages/design-system/ads/src/List/List.stories.tsx b/app/client/packages/design-system/ads/src/List/List.stories.tsx
index 160b027f7d81..573aa5318fba 100644
--- a/app/client/packages/design-system/ads/src/List/List.stories.tsx
+++ b/app/client/packages/design-system/ads/src/List/List.stories.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { List, ListItem, Icon } from "@appsmith/ads";
+import { List, ListItem, Icon, Button } from "@appsmith/ads";
 import type { StoryObj } from "@storybook/react";
 import type { ListItemProps, ListProps } from "@appsmith/ads";
 
@@ -79,15 +79,21 @@ const ListItemArgTypes = {
       },
     },
   },
-  endIcon: {
-    control: "text",
-    description: "The icon to display at the end of the list item",
+  rightControl: {
+    description: "The control to display at the end of the list item",
     table: {
       type: {
-        summary: "string",
+        summary: "ReactNode",
       },
     },
   },
+  rightContolVisibility: {
+    description:
+      "`always` type will show the right control always. `hover` type will show the right control only when the list item is hovered.",
+    control: "radio",
+    options: ["always", "hover"],
+    defaultValue: "always",
+  },
   description: {
     control: "text",
     description: "Description text to be shown alongside the title",
@@ -140,14 +146,6 @@ const ListItemArgTypes = {
       },
     },
   },
-  onEndIconClick: {
-    description: "callback for when the end icon is clicked",
-    table: {
-      type: {
-        summary: "() => void",
-      },
-    },
-  },
 };
 
 function ListItemTemplate(args: JSX.IntrinsicAttributes & ListItemProps) {
@@ -163,7 +161,8 @@ ListItemLargeStory.args = {
   description: "inline",
   descriptionType: "inline",
   size: "lg",
-  endIcon: "add-more",
+  rightControl: <Icon name="add-more" size={"md"} />,
+  rightControlVisibility: "hover",
 };
 
 export const ListItemErrorStory = ListItemTemplate.bind({}) as StoryObj;
@@ -215,10 +214,12 @@ ListItemOverflowStory.args = {
   title: "Action item 1 Action item 1 Action item 1 Action item 1",
 };
 
-export const ListItemEndIconStory = ListItemTemplate.bind({}) as StoryObj;
-ListItemEndIconStory.storyName = "List item end icon";
-ListItemEndIconStory.argTypes = ListItemArgTypes;
-ListItemEndIconStory.args = {
+export const ListItemRightControlStory = ListItemTemplate.bind({}) as StoryObj;
+ListItemRightControlStory.storyName = "List item right control";
+ListItemRightControlStory.argTypes = ListItemArgTypes;
+ListItemRightControlStory.args = {
   title: "Action item 1",
-  endIcon: "add-more",
+  rightControl: (
+    <Button isIconButton kind="tertiary" size={"sm"} startIcon="add-more" />
+  ),
 };
diff --git a/app/client/packages/design-system/ads/src/List/List.styles.tsx b/app/client/packages/design-system/ads/src/List/List.styles.tsx
index 65bde4339738..38be7eb1fb17 100644
--- a/app/client/packages/design-system/ads/src/List/List.styles.tsx
+++ b/app/client/packages/design-system/ads/src/List/List.styles.tsx
@@ -36,14 +36,49 @@ export const StyledList = styled.div`
   gap: var(--ads-v2-spaces-2);
 `;
 
-export const Wrapper = styled.div`
+export const Wrapper = styled.div<{
+  rightControlVisibility?: "hover" | "always";
+}>`
   display: flex;
   width: 100%;
   align-items: center;
-  gap: var(--ads-v2-spaces-3);
   cursor: pointer;
   box-sizing: border-box;
   position: relative;
+  border-radius: var(--ads-v2-border-radius);
+  min-height: 32px;
+
+  ${(props) =>
+    props.rightControlVisibility === "hover" &&
+    `
+    ${RightControlWrapper} { display: none; }
+    &:hover ${RightControlWrapper} { display: block; }`}
+
+  &:hover {
+    background-color: var(--ads-v2-colors-content-surface-hover-bg);
+  }
+
+  &:active {
+    background-color: var(--ads-v2-colors-content-surface-active-bg);
+  }
+
+  &[data-selected="true"] {
+    background-color: var(--ads-v2-colors-content-surface-active-bg);
+  }
+
+  /* disabled style */
+  &[data-disabled="true"] {
+    cursor: not-allowed;
+    opacity: var(--ads-v2-opacity-disabled);
+    background-color: var(--ads-v2-colors-content-surface-default-bg);
+  }
+
+  /* Focus styles */
+  &:focus-visible {
+    outline: var(--ads-v2-border-width-outline) solid
+      var(--ads-v2-color-outline);
+    outline-offset: var(--ads-v2-offset-outline);
+  }
 `;
 
 export const TooltipTextWrapper = styled.div`
@@ -56,13 +91,6 @@ export const ContentWrapper = styled.div`
   gap: var(--ads-v2-spaces-3);
 `;
 
-export const ContentTextWrapper = styled.div`
-  display: flex;
-  gap: var(--ads-v2-spaces-3);
-  flex: 1;
-  min-width: 0;
-`;
-
 export const DescriptionWrapper = styled.div`
   flex-direction: column;
   min-width: 0;
@@ -79,14 +107,17 @@ export const InlineDescriptionWrapper = styled.div`
   flex: 1;
 `;
 
-export const EndIconWrapper = styled.div`
-  position: absolute;
-  right: var(--ads-v2-spaces-3);
+export const RightControlWrapper = styled.div`
+  height: 100%;
+
+  button {
+    height: 100% !important;
+    width: 32px;
+  }
 `;
 
 export const StyledListItem = styled.div<{
   size: ListSizes;
-  endIcon?: string;
   isBlockDescription: boolean;
 }>`
   ${Variables};
@@ -94,15 +125,14 @@ export const StyledListItem = styled.div<{
   display: flex;
   width: 100%;
   align-items: center;
-  border-radius: var(--ads-v2-border-radius);
-  padding: var(--ads-v2-spaces-3);
   box-sizing: border-box;
-  // 40px is the offset to make it look like the end icon is part of this div
-  ${(props) => !!props.endIcon && `padding: 8px 40px 8px 8px;`}}
+  padding: var(--ads-v2-spaces-2) var(--ads-v2-spaces-2) var(--ads-v2-spaces-2)
+    var(--ads-v2-spaces-3);
+  gap: var(--ads-v2-spaces-3);
+  overflow: hidden;
 
   ${({ size }) => Sizes[size]}
 
-
   & .${ListItemTextOverflowClassName} {
     overflow: hidden;
     white-space: nowrap;
@@ -126,30 +156,6 @@ export const StyledListItem = styled.div<{
 
   & .${ListItemIDescClassName} {
     font-size: var(--listitem-idescription-font-size);
-  }
-
-  &:hover {
-    background-color: var(--ads-v2-colors-content-surface-hover-bg);
-  }
-
-  &:active {
-    background-color: var(--ads-v2-colors-content-surface-active-bg);
-  }
-
-  &[data-selected="true"] {
-    background-color: var(--ads-v2-colors-content-surface-active-bg);
-  }
-
-  /* disabled style */
-  &[data-disabled="true"] {
-    cursor: not-allowed;
-    opacity: var(--ads-v2-opacity-disabled);
-  }
-
-  /* Focus styles */
-  &:focus-visible {
-    outline: var(--ads-v2-border-width-outline) solid
-      var(--ads-v2-color-outline);
-    outline-offset: var(--ads-v2-offset-outline);
+    line-height: 16px;
   }
 `;
diff --git a/app/client/packages/design-system/ads/src/List/List.tsx b/app/client/packages/design-system/ads/src/List/List.tsx
index c4761a73972b..de3563fd03f9 100644
--- a/app/client/packages/design-system/ads/src/List/List.tsx
+++ b/app/client/packages/design-system/ads/src/List/List.tsx
@@ -3,10 +3,9 @@ import clsx from "classnames";
 
 import type { ListItemProps, ListProps } from "./List.types";
 import {
-  ContentTextWrapper,
   DescriptionWrapper,
-  EndIconWrapper,
   InlineDescriptionWrapper,
+  RightControlWrapper,
   StyledList,
   StyledListItem,
   TooltipTextWrapper,
@@ -14,7 +13,6 @@ import {
 } from "./List.styles";
 import type { TextProps } from "../Text";
 import { Text } from "../Text";
-import { Button } from "../Button";
 import { Tooltip } from "../Tooltip";
 import {
   ListClassName,
@@ -85,8 +83,9 @@ function ListItem(props: ListItemProps) {
   const {
     description,
     descriptionType = "inline",
-    endIcon,
     hasError,
+    rightControl,
+    rightControlVisibility = "always",
     size = "md",
     startIcon,
     title,
@@ -104,27 +103,6 @@ function ListItem(props: ListItemProps) {
     }
   };
 
-  const endIconhandleKeyDown = (e: React.KeyboardEvent) => {
-    e.stopPropagation();
-
-    if (!props.isDisabled && props.onEndIconClick) {
-      switch (e.key) {
-        case "Enter":
-        case " ":
-          props.onEndIconClick();
-          break;
-      }
-    }
-  };
-
-  const endIconOnClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
-
-    if (!props.isDisabled && props.onEndIconClick) {
-      props.onEndIconClick();
-    }
-  };
-
   const handleOnClick = () => {
     if (!props.isDisabled && props.onClick) {
       props.onClick();
@@ -132,63 +110,53 @@ function ListItem(props: ListItemProps) {
   };
 
   return (
-    <Wrapper className={clsx(ListItemWrapperClassName, props.wrapperClassName)}>
+    <Wrapper
+      className={clsx(ListItemWrapperClassName, props.wrapperClassName)}
+      data-disabled={props.isDisabled || false}
+      data-selected={props.isSelected}
+      rightControlVisibility={rightControlVisibility}
+      tabIndex={props.isDisabled ? -1 : 0}
+    >
       <StyledListItem
         className={clsx(ListItemClassName, props.className)}
-        data-disabled={props.isDisabled || false}
-        data-selected={props.isSelected}
-        endIcon={props.endIcon}
         isBlockDescription={isBlockDescription}
         onClick={handleOnClick}
         onKeyDown={listItemhandleKeyDown}
         size={size}
-        tabIndex={props.isDisabled ? -1 : 0}
       >
-        <ContentTextWrapper>
-          {startIcon}
-          <InlineDescriptionWrapper>
-            <DescriptionWrapper>
-              <TextWithTooltip
-                className={ListItemTitleClassName}
-                color={hasError ? "var(--ads-v2-color-fg-error)" : undefined}
-              >
-                {title}
-              </TextWithTooltip>
-              {isBlockDescription && description && (
-                <TextWithTooltip
-                  className={ListItemBDescClassName}
-                  color="var(--ads-v2-color-fg-muted)"
-                  isMultiline
-                  kind="body-s"
-                >
-                  {description}
-                </TextWithTooltip>
-              )}
-            </DescriptionWrapper>
-            {!isBlockDescription && description && (
+        {startIcon}
+        <InlineDescriptionWrapper>
+          <DescriptionWrapper>
+            <TextWithTooltip
+              className={ListItemTitleClassName}
+              color={hasError ? "var(--ads-v2-color-fg-error)" : undefined}
+            >
+              {title}
+            </TextWithTooltip>
+            {isBlockDescription && description && (
               <TextWithTooltip
-                className={ListItemIDescClassName}
+                className={ListItemBDescClassName}
                 color="var(--ads-v2-color-fg-muted)"
+                isMultiline
                 kind="body-s"
               >
                 {description}
               </TextWithTooltip>
             )}
-          </InlineDescriptionWrapper>
-        </ContentTextWrapper>
+          </DescriptionWrapper>
+          {!isBlockDescription && description && (
+            <TextWithTooltip
+              className={ListItemIDescClassName}
+              color="var(--ads-v2-color-fg-muted)"
+              kind="body-s"
+            >
+              {description}
+            </TextWithTooltip>
+          )}
+        </InlineDescriptionWrapper>
       </StyledListItem>
-      {endIcon && (
-        <EndIconWrapper>
-          <Button
-            isDisabled={props.isDisabled}
-            isIconButton
-            kind="tertiary"
-            onClick={endIconOnClick}
-            onKeyDown={endIconhandleKeyDown}
-            size={"sm"}
-            startIcon={endIcon}
-          />
-        </EndIconWrapper>
+      {rightControl && (
+        <RightControlWrapper>{rightControl}</RightControlWrapper>
       )}
     </Wrapper>
   );
diff --git a/app/client/packages/design-system/ads/src/List/List.types.tsx b/app/client/packages/design-system/ads/src/List/List.types.tsx
index d522b287e705..c5a3de083b17 100644
--- a/app/client/packages/design-system/ads/src/List/List.types.tsx
+++ b/app/client/packages/design-system/ads/src/List/List.types.tsx
@@ -6,10 +6,10 @@ export type ListSizes = Extract<Sizes, "md" | "lg">;
 export interface ListItemProps {
   /** The icon to display before the list item title. */
   startIcon?: ReactNode;
-  /** The icon to display at the end. Pass name of the icon from remix-icon library(eg: home-2-line) or an svg icon. */
-  endIcon?: string;
-  /** callback for when the endIcon is clicked */
-  onEndIconClick?: () => void;
+  /** The control to display at the end. */
+  rightControl?: ReactNode;
+  /**  */
+  rightControlVisibility?: "hover" | "always";
   /** callback for when the list item is clicked */
   onClick: () => void;
   /** Whether the list item is disabled. */
@@ -23,11 +23,11 @@ export interface ListItemProps {
   /** The title/label of the list item */
   title: string;
   /** Description text to be shown alongside the title */
-  description: string;
+  description?: string;
   /** `inline` type will show the description beside the title. `block` type will show the description
    * below the title.
    */
-  descriptionType: "inline" | "block";
+  descriptionType?: "inline" | "block";
   /** class names for the list item */
   className?: string;
   /** class names for the wrapper */
diff --git a/app/client/src/pages/Editor/Explorer/Actions/ActionEntity.tsx b/app/client/src/pages/Editor/Explorer/Actions/ActionEntity.tsx
index 69f2c1130d3b..f4eae18d77e4 100644
--- a/app/client/src/pages/Editor/Explorer/Actions/ActionEntity.tsx
+++ b/app/client/src/pages/Editor/Explorer/Actions/ActionEntity.tsx
@@ -1,6 +1,6 @@
 import React, { memo, useCallback, useMemo } from "react";
 import { useSelector } from "react-redux";
-import Entity, { EntityClassNames } from "../Entity";
+import { EntityClassNames } from "../Entity";
 import ActionEntityContextMenu from "./ActionEntityContextMenu";
 import history, { NavigationMethod } from "utils/history";
 import {
@@ -21,17 +21,18 @@ import {
 } from "ee/utils/BusinessFeatures/permissionPageHelpers";
 import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
 import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
-import { saveActionNameBasedOnParentEntity } from "ee/actions/helpers";
+// import { saveActionNameBasedOnParentEntity } from "ee/actions/helpers";
 import type { ActionParentEntityTypeInterface } from "ee/entities/Engine/actionHelpers";
 import { convertToBaseParentEntityIdSelector } from "selectors/pageListSelectors";
+import { ListItem } from "@appsmith/ads";
 
-const getUpdateActionNameReduxAction = (
-  id: string,
-  name: string,
-  parentEntityType: ActionParentEntityTypeInterface,
-) => {
-  return saveActionNameBasedOnParentEntity(id, name, parentEntityType);
-};
+// const getUpdateActionNameReduxAction = (
+//   id: string,
+//   name: string,
+//   parentEntityType: ActionParentEntityTypeInterface,
+// ) => {
+//   return saveActionNameBasedOnParentEntity(id, name, parentEntityType);
+// };
 
 interface ExplorerActionEntityProps {
   step: number;
@@ -109,21 +110,14 @@ export const ExplorerActionEntity = memo((props: ExplorerActionEntityProps) => {
   );
 
   return (
-    <Entity
-      action={switchToAction}
-      active={props.isActive}
-      canEditEntityName={canManageAction}
-      className="action t--action-entity"
-      contextMenu={contextMenu}
-      entityId={action.id}
-      icon={icon}
-      key={action.id}
-      name={action.name}
-      searchKeyword={props.searchKeyword}
-      step={props.step}
-      updateEntityName={(id, name) =>
-        getUpdateActionNameReduxAction(id, name, props.parentEntityType)
-      }
+    <ListItem
+      isSelected={props.isActive}
+      onClick={switchToAction}
+      rightControl={contextMenu}
+      rightControlVisibility="hover"
+      startIcon={icon}
+      title={action.name}
+      wrapperClassName="action t--action-entity"
     />
   );
 });
diff --git a/app/client/src/pages/Editor/Explorer/ExplorerIcons.tsx b/app/client/src/pages/Editor/Explorer/ExplorerIcons.tsx
index fe87497930b5..589a2667fcda 100644
--- a/app/client/src/pages/Editor/Explorer/ExplorerIcons.tsx
+++ b/app/client/src/pages/Editor/Explorer/ExplorerIcons.tsx
@@ -266,8 +266,8 @@ export { EntityIcon };
 // fontSize is set to 56% by default.
 export function ApiMethodIcon(
   type: keyof typeof HTTP_METHOD,
-  height = "18px",
-  width = "36px",
+  height = "16px",
+  width = "34px",
   fontSize = 52,
 ) {
   return (

From 31de3951fbc0f353c885843913480c91b9e75478 Mon Sep 17 00:00:00 2001
From: Ankita Kinger <ankita@appsmith.com>
Date: Wed, 25 Dec 2024 15:11:12 +0530
Subject: [PATCH 2/6] adding functionality for custom title component in list
 item

---
 .../ads/src/List/List.stories.tsx             | 12 ++++-
 .../design-system/ads/src/List/List.tsx       | 48 ++++++++++---------
 .../design-system/ads/src/List/List.types.tsx |  2 +
 3 files changed, 38 insertions(+), 24 deletions(-)

diff --git a/app/client/packages/design-system/ads/src/List/List.stories.tsx b/app/client/packages/design-system/ads/src/List/List.stories.tsx
index 573aa5318fba..cd1acd256d6b 100644
--- a/app/client/packages/design-system/ads/src/List/List.stories.tsx
+++ b/app/client/packages/design-system/ads/src/List/List.stories.tsx
@@ -87,7 +87,7 @@ const ListItemArgTypes = {
       },
     },
   },
-  rightContolVisibility: {
+  rightControlVisibility: {
     description:
       "`always` type will show the right control always. `hover` type will show the right control only when the list item is hovered.",
     control: "radio",
@@ -146,6 +146,15 @@ const ListItemArgTypes = {
       },
     },
   },
+  customTitleComponent: {
+    description:
+      "A custom title component for the list item to use input component for name editing",
+    table: {
+      type: {
+        summary: "ReactNode",
+      },
+    },
+  },
 };
 
 function ListItemTemplate(args: JSX.IntrinsicAttributes & ListItemProps) {
@@ -162,7 +171,6 @@ ListItemLargeStory.args = {
   descriptionType: "inline",
   size: "lg",
   rightControl: <Icon name="add-more" size={"md"} />,
-  rightControlVisibility: "hover",
 };
 
 export const ListItemErrorStory = ListItemTemplate.bind({}) as StoryObj;
diff --git a/app/client/packages/design-system/ads/src/List/List.tsx b/app/client/packages/design-system/ads/src/List/List.tsx
index de3563fd03f9..8efbd293ce5e 100644
--- a/app/client/packages/design-system/ads/src/List/List.tsx
+++ b/app/client/packages/design-system/ads/src/List/List.tsx
@@ -125,35 +125,39 @@ function ListItem(props: ListItemProps) {
         size={size}
       >
         {startIcon}
-        <InlineDescriptionWrapper>
-          <DescriptionWrapper>
-            <TextWithTooltip
-              className={ListItemTitleClassName}
-              color={hasError ? "var(--ads-v2-color-fg-error)" : undefined}
-            >
-              {title}
-            </TextWithTooltip>
-            {isBlockDescription && description && (
+        {props.customTitleComponent ? (
+          props.customTitleComponent
+        ) : (
+          <InlineDescriptionWrapper>
+            <DescriptionWrapper>
               <TextWithTooltip
-                className={ListItemBDescClassName}
+                className={ListItemTitleClassName}
+                color={hasError ? "var(--ads-v2-color-fg-error)" : undefined}
+              >
+                {title}
+              </TextWithTooltip>
+              {isBlockDescription && description && (
+                <TextWithTooltip
+                  className={ListItemBDescClassName}
+                  color="var(--ads-v2-color-fg-muted)"
+                  isMultiline
+                  kind="body-s"
+                >
+                  {description}
+                </TextWithTooltip>
+              )}
+            </DescriptionWrapper>
+            {!isBlockDescription && description && (
+              <TextWithTooltip
+                className={ListItemIDescClassName}
                 color="var(--ads-v2-color-fg-muted)"
-                isMultiline
                 kind="body-s"
               >
                 {description}
               </TextWithTooltip>
             )}
-          </DescriptionWrapper>
-          {!isBlockDescription && description && (
-            <TextWithTooltip
-              className={ListItemIDescClassName}
-              color="var(--ads-v2-color-fg-muted)"
-              kind="body-s"
-            >
-              {description}
-            </TextWithTooltip>
-          )}
-        </InlineDescriptionWrapper>
+          </InlineDescriptionWrapper>
+        )}
       </StyledListItem>
       {rightControl && (
         <RightControlWrapper>{rightControl}</RightControlWrapper>
diff --git a/app/client/packages/design-system/ads/src/List/List.types.tsx b/app/client/packages/design-system/ads/src/List/List.types.tsx
index c5a3de083b17..64c92247014b 100644
--- a/app/client/packages/design-system/ads/src/List/List.types.tsx
+++ b/app/client/packages/design-system/ads/src/List/List.types.tsx
@@ -34,6 +34,8 @@ export interface ListItemProps {
   wrapperClassName?: string;
   /** id for the list item */
   id?: string;
+  /** customTitleComponent for the list item to use input component for name editing */
+  customTitleComponent?: ReactNode | ReactNode[];
 }
 
 export interface ListProps {

From 1a18d4327df8d4cfde4107e8a09442b868f8355a Mon Sep 17 00:00:00 2001
From: Ankita Kinger <ankita@appsmith.com>
Date: Fri, 27 Dec 2024 17:22:31 +0530
Subject: [PATCH 3/6] final UI changes to the list item component

---
 .../ads/src/List/List.styles.tsx              | 59 ++++++++-----------
 .../design-system/ads/src/List/List.tsx       | 14 ++---
 .../Editor/Explorer/Actions/ActionEntity.tsx  | 42 +++++++------
 3 files changed, 57 insertions(+), 58 deletions(-)

diff --git a/app/client/packages/design-system/ads/src/List/List.styles.tsx b/app/client/packages/design-system/ads/src/List/List.styles.tsx
index 38be7eb1fb17..e13c7a88680a 100644
--- a/app/client/packages/design-system/ads/src/List/List.styles.tsx
+++ b/app/client/packages/design-system/ads/src/List/List.styles.tsx
@@ -36,9 +36,13 @@ export const StyledList = styled.div`
   gap: var(--ads-v2-spaces-2);
 `;
 
-export const Wrapper = styled.div<{
+export const StyledListItem = styled.div<{
+  isBlockDescription?: boolean;
   rightControlVisibility?: "hover" | "always";
+  size: ListSizes;
 }>`
+  ${Variables};
+
   display: flex;
   width: 100%;
   align-items: center;
@@ -46,7 +50,13 @@ export const Wrapper = styled.div<{
   box-sizing: border-box;
   position: relative;
   border-radius: var(--ads-v2-border-radius);
-  min-height: 32px;
+  padding: var(--ads-v2-spaces-2);
+  padding-left: var(--ads-v2-spaces-3);
+
+  ${({ size }) => Sizes[size]}
+
+  ${({ isBlockDescription }) =>
+    `height: ${isBlockDescription ? "54px" : "32px"};`}
 
   ${(props) =>
     props.rightControlVisibility === "hover" &&
@@ -54,14 +64,6 @@ export const Wrapper = styled.div<{
     ${RightControlWrapper} { display: none; }
     &:hover ${RightControlWrapper} { display: block; }`}
 
-  &:hover {
-    background-color: var(--ads-v2-colors-content-surface-hover-bg);
-  }
-
-  &:active {
-    background-color: var(--ads-v2-colors-content-surface-active-bg);
-  }
-
   &[data-selected="true"] {
     background-color: var(--ads-v2-colors-content-surface-active-bg);
   }
@@ -73,6 +75,14 @@ export const Wrapper = styled.div<{
     background-color: var(--ads-v2-colors-content-surface-default-bg);
   }
 
+  &:hover {
+    background-color: var(--ads-v2-colors-content-surface-hover-bg);
+  }
+
+  &:active {
+    background-color: var(--ads-v2-colors-content-surface-active-bg);
+  }
+
   /* Focus styles */
   &:focus-visible {
     outline: var(--ads-v2-border-width-outline) solid
@@ -86,11 +96,6 @@ export const TooltipTextWrapper = styled.div`
   min-width: 0;
 `;
 
-export const ContentWrapper = styled.div`
-  display: flex;
-  gap: var(--ads-v2-spaces-3);
-`;
-
 export const DescriptionWrapper = styled.div`
   flex-direction: column;
   min-width: 0;
@@ -102,36 +107,24 @@ export const InlineDescriptionWrapper = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  min-width: 0;
-  gap: var(--ads-v2-spaces-3);
   flex: 1;
+  min-width: 0;
 `;
 
 export const RightControlWrapper = styled.div`
   height: 100%;
-
-  button {
-    height: 100% !important;
-    width: 32px;
-  }
+  line-height: normal;
 `;
 
-export const StyledListItem = styled.div<{
-  size: ListSizes;
-  isBlockDescription: boolean;
-}>`
-  ${Variables};
-
+export const ContentTextWrapper = styled.div`
   display: flex;
   width: 100%;
   align-items: center;
   box-sizing: border-box;
-  padding: var(--ads-v2-spaces-2) var(--ads-v2-spaces-2) var(--ads-v2-spaces-2)
-    var(--ads-v2-spaces-3);
   gap: var(--ads-v2-spaces-3);
   overflow: hidden;
-
-  ${({ size }) => Sizes[size]}
+  flex: 1;
+  min-width: 0;
 
   & .${ListItemTextOverflowClassName} {
     overflow: hidden;
@@ -145,7 +138,7 @@ export const StyledListItem = styled.div<{
   }
 
   & .${ListItemBDescClassName} {
-    -webkit-line-clamp: 2;
+    -webkit-line-clamp: 1;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     text-overflow: initial;
diff --git a/app/client/packages/design-system/ads/src/List/List.tsx b/app/client/packages/design-system/ads/src/List/List.tsx
index 8efbd293ce5e..22c1f52c23ea 100644
--- a/app/client/packages/design-system/ads/src/List/List.tsx
+++ b/app/client/packages/design-system/ads/src/List/List.tsx
@@ -3,13 +3,13 @@ import clsx from "classnames";
 
 import type { ListItemProps, ListProps } from "./List.types";
 import {
+  ContentTextWrapper,
   DescriptionWrapper,
   InlineDescriptionWrapper,
   RightControlWrapper,
   StyledList,
   StyledListItem,
   TooltipTextWrapper,
-  Wrapper,
 } from "./List.styles";
 import type { TextProps } from "../Text";
 import { Text } from "../Text";
@@ -110,19 +110,19 @@ function ListItem(props: ListItemProps) {
   };
 
   return (
-    <Wrapper
+    <StyledListItem
       className={clsx(ListItemWrapperClassName, props.wrapperClassName)}
       data-disabled={props.isDisabled || false}
       data-selected={props.isSelected}
+      isBlockDescription={isBlockDescription}
       rightControlVisibility={rightControlVisibility}
+      size={size}
       tabIndex={props.isDisabled ? -1 : 0}
     >
-      <StyledListItem
+      <ContentTextWrapper
         className={clsx(ListItemClassName, props.className)}
-        isBlockDescription={isBlockDescription}
         onClick={handleOnClick}
         onKeyDown={listItemhandleKeyDown}
-        size={size}
       >
         {startIcon}
         {props.customTitleComponent ? (
@@ -158,11 +158,11 @@ function ListItem(props: ListItemProps) {
             )}
           </InlineDescriptionWrapper>
         )}
-      </StyledListItem>
+      </ContentTextWrapper>
       {rightControl && (
         <RightControlWrapper>{rightControl}</RightControlWrapper>
       )}
-    </Wrapper>
+    </StyledListItem>
   );
 }
 
diff --git a/app/client/src/pages/Editor/Explorer/Actions/ActionEntity.tsx b/app/client/src/pages/Editor/Explorer/Actions/ActionEntity.tsx
index f4eae18d77e4..69f2c1130d3b 100644
--- a/app/client/src/pages/Editor/Explorer/Actions/ActionEntity.tsx
+++ b/app/client/src/pages/Editor/Explorer/Actions/ActionEntity.tsx
@@ -1,6 +1,6 @@
 import React, { memo, useCallback, useMemo } from "react";
 import { useSelector } from "react-redux";
-import { EntityClassNames } from "../Entity";
+import Entity, { EntityClassNames } from "../Entity";
 import ActionEntityContextMenu from "./ActionEntityContextMenu";
 import history, { NavigationMethod } from "utils/history";
 import {
@@ -21,18 +21,17 @@ import {
 } from "ee/utils/BusinessFeatures/permissionPageHelpers";
 import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
 import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
-// import { saveActionNameBasedOnParentEntity } from "ee/actions/helpers";
+import { saveActionNameBasedOnParentEntity } from "ee/actions/helpers";
 import type { ActionParentEntityTypeInterface } from "ee/entities/Engine/actionHelpers";
 import { convertToBaseParentEntityIdSelector } from "selectors/pageListSelectors";
-import { ListItem } from "@appsmith/ads";
 
-// const getUpdateActionNameReduxAction = (
-//   id: string,
-//   name: string,
-//   parentEntityType: ActionParentEntityTypeInterface,
-// ) => {
-//   return saveActionNameBasedOnParentEntity(id, name, parentEntityType);
-// };
+const getUpdateActionNameReduxAction = (
+  id: string,
+  name: string,
+  parentEntityType: ActionParentEntityTypeInterface,
+) => {
+  return saveActionNameBasedOnParentEntity(id, name, parentEntityType);
+};
 
 interface ExplorerActionEntityProps {
   step: number;
@@ -110,14 +109,21 @@ export const ExplorerActionEntity = memo((props: ExplorerActionEntityProps) => {
   );
 
   return (
-    <ListItem
-      isSelected={props.isActive}
-      onClick={switchToAction}
-      rightControl={contextMenu}
-      rightControlVisibility="hover"
-      startIcon={icon}
-      title={action.name}
-      wrapperClassName="action t--action-entity"
+    <Entity
+      action={switchToAction}
+      active={props.isActive}
+      canEditEntityName={canManageAction}
+      className="action t--action-entity"
+      contextMenu={contextMenu}
+      entityId={action.id}
+      icon={icon}
+      key={action.id}
+      name={action.name}
+      searchKeyword={props.searchKeyword}
+      step={props.step}
+      updateEntityName={(id, name) =>
+        getUpdateActionNameReduxAction(id, name, props.parentEntityType)
+      }
     />
   );
 });

From 8f55f31fe3c50bb68b7f91037bc71705707e9026 Mon Sep 17 00:00:00 2001
From: Ankita Kinger <ankita@appsmith.com>
Date: Fri, 27 Dec 2024 18:09:47 +0530
Subject: [PATCH 4/6] addressing review comment

---
 .../ads/src/List/List.styles.tsx              | 136 +++++++++---------
 .../design-system/ads/src/List/List.tsx       |   4 +-
 2 files changed, 73 insertions(+), 67 deletions(-)

diff --git a/app/client/packages/design-system/ads/src/List/List.styles.tsx b/app/client/packages/design-system/ads/src/List/List.styles.tsx
index e13c7a88680a..6baa18450e25 100644
--- a/app/client/packages/design-system/ads/src/List/List.styles.tsx
+++ b/app/client/packages/design-system/ads/src/List/List.styles.tsx
@@ -26,71 +26,6 @@ const Sizes = {
   `,
 };
 
-export const StyledList = styled.div`
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  padding: var(--ads-v2-spaces-1);
-  display: flex;
-  flex-direction: column;
-  gap: var(--ads-v2-spaces-2);
-`;
-
-export const StyledListItem = styled.div<{
-  isBlockDescription?: boolean;
-  rightControlVisibility?: "hover" | "always";
-  size: ListSizes;
-}>`
-  ${Variables};
-
-  display: flex;
-  width: 100%;
-  align-items: center;
-  cursor: pointer;
-  box-sizing: border-box;
-  position: relative;
-  border-radius: var(--ads-v2-border-radius);
-  padding: var(--ads-v2-spaces-2);
-  padding-left: var(--ads-v2-spaces-3);
-
-  ${({ size }) => Sizes[size]}
-
-  ${({ isBlockDescription }) =>
-    `height: ${isBlockDescription ? "54px" : "32px"};`}
-
-  ${(props) =>
-    props.rightControlVisibility === "hover" &&
-    `
-    ${RightControlWrapper} { display: none; }
-    &:hover ${RightControlWrapper} { display: block; }`}
-
-  &[data-selected="true"] {
-    background-color: var(--ads-v2-colors-content-surface-active-bg);
-  }
-
-  /* disabled style */
-  &[data-disabled="true"] {
-    cursor: not-allowed;
-    opacity: var(--ads-v2-opacity-disabled);
-    background-color: var(--ads-v2-colors-content-surface-default-bg);
-  }
-
-  &:hover {
-    background-color: var(--ads-v2-colors-content-surface-hover-bg);
-  }
-
-  &:active {
-    background-color: var(--ads-v2-colors-content-surface-active-bg);
-  }
-
-  /* Focus styles */
-  &:focus-visible {
-    outline: var(--ads-v2-border-width-outline) solid
-      var(--ads-v2-color-outline);
-    outline-offset: var(--ads-v2-offset-outline);
-  }
-`;
-
 export const TooltipTextWrapper = styled.div`
   display: flex;
   min-width: 0;
@@ -152,3 +87,74 @@ export const ContentTextWrapper = styled.div`
     line-height: 16px;
   }
 `;
+
+export const StyledList = styled.div`
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  padding: var(--ads-v2-spaces-1);
+  display: flex;
+  flex-direction: column;
+  gap: var(--ads-v2-spaces-2);
+`;
+
+export const StyledListItem = styled.div<{
+  size: ListSizes;
+}>`
+  ${Variables};
+
+  display: flex;
+  width: 100%;
+  align-items: center;
+  cursor: pointer;
+  box-sizing: border-box;
+  position: relative;
+  border-radius: var(--ads-v2-border-radius);
+  padding: var(--ads-v2-spaces-2);
+  padding-left: var(--ads-v2-spaces-3);
+
+  ${({ size }) => Sizes[size]}
+
+  &[data-isblockdescription="true"] {
+    height: 54px;
+  }
+
+  &[data-isblockdescription="false"] {
+    height: 32px;
+  }
+
+  &[data-rightcontrolvisibility="hover"] {
+    ${RightControlWrapper} {
+      display: none;
+    }
+    &:hover ${RightControlWrapper} {
+      display: block;
+    }
+  }
+
+  &[data-selected="true"] {
+    background-color: var(--ads-v2-colors-content-surface-active-bg);
+  }
+
+  /* disabled style */
+  &[data-disabled="true"] {
+    cursor: not-allowed;
+    opacity: var(--ads-v2-opacity-disabled);
+    background-color: var(--ads-v2-colors-content-surface-default-bg);
+  }
+
+  &:hover {
+    background-color: var(--ads-v2-colors-content-surface-hover-bg);
+  }
+
+  &:active {
+    background-color: var(--ads-v2-colors-content-surface-active-bg);
+  }
+
+  /* Focus styles */
+  &:focus-visible {
+    outline: var(--ads-v2-border-width-outline) solid
+      var(--ads-v2-color-outline);
+    outline-offset: var(--ads-v2-offset-outline);
+  }
+`;
diff --git a/app/client/packages/design-system/ads/src/List/List.tsx b/app/client/packages/design-system/ads/src/List/List.tsx
index 22c1f52c23ea..3a7c7e2eeabf 100644
--- a/app/client/packages/design-system/ads/src/List/List.tsx
+++ b/app/client/packages/design-system/ads/src/List/List.tsx
@@ -113,9 +113,9 @@ function ListItem(props: ListItemProps) {
     <StyledListItem
       className={clsx(ListItemWrapperClassName, props.wrapperClassName)}
       data-disabled={props.isDisabled || false}
+      data-isblockdescription={isBlockDescription}
+      data-rightcontrolvisibility={rightControlVisibility}
       data-selected={props.isSelected}
-      isBlockDescription={isBlockDescription}
-      rightControlVisibility={rightControlVisibility}
       size={size}
       tabIndex={props.isDisabled ? -1 : 0}
     >

From efbca9525ba38c3ef35f74334f9b20a6af253f9c Mon Sep 17 00:00:00 2001
From: Ankita Kinger <ankita@appsmith.com>
Date: Fri, 27 Dec 2024 20:13:56 +0530
Subject: [PATCH 5/6] fix for failing tests

---
 .../packages/design-system/ads/src/List/List.styles.tsx       | 1 +
 app/client/packages/design-system/ads/src/List/List.tsx       | 4 +---
 app/client/packages/design-system/ads/src/List/List.types.tsx | 2 --
 app/client/src/ce/pages/Editor/IDE/EditorPane/Query/hooks.tsx | 2 +-
 app/client/src/pages/Editor/IDE/EditorPane/JS/Add.tsx         | 2 +-
 .../src/pages/Editor/IDE/EditorPane/components/Group.tsx      | 4 ++--
 6 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/app/client/packages/design-system/ads/src/List/List.styles.tsx b/app/client/packages/design-system/ads/src/List/List.styles.tsx
index 6baa18450e25..3c4df9004bd9 100644
--- a/app/client/packages/design-system/ads/src/List/List.styles.tsx
+++ b/app/client/packages/design-system/ads/src/List/List.styles.tsx
@@ -85,6 +85,7 @@ export const ContentTextWrapper = styled.div`
   & .${ListItemIDescClassName} {
     font-size: var(--listitem-idescription-font-size);
     line-height: 16px;
+    padding-right: var(--ads-v2-spaces-2);
   }
 `;
 
diff --git a/app/client/packages/design-system/ads/src/List/List.tsx b/app/client/packages/design-system/ads/src/List/List.tsx
index 3a7c7e2eeabf..56fd0ddee37a 100644
--- a/app/client/packages/design-system/ads/src/List/List.tsx
+++ b/app/client/packages/design-system/ads/src/List/List.tsx
@@ -21,7 +21,6 @@ import {
   ListItemIDescClassName,
   ListItemTextOverflowClassName,
   ListItemTitleClassName,
-  ListItemWrapperClassName,
 } from "./List.constants";
 
 function List({ className, items, ...rest }: ListProps) {
@@ -111,7 +110,7 @@ function ListItem(props: ListItemProps) {
 
   return (
     <StyledListItem
-      className={clsx(ListItemWrapperClassName, props.wrapperClassName)}
+      className={clsx(ListItemClassName, props.className)}
       data-disabled={props.isDisabled || false}
       data-isblockdescription={isBlockDescription}
       data-rightcontrolvisibility={rightControlVisibility}
@@ -120,7 +119,6 @@ function ListItem(props: ListItemProps) {
       tabIndex={props.isDisabled ? -1 : 0}
     >
       <ContentTextWrapper
-        className={clsx(ListItemClassName, props.className)}
         onClick={handleOnClick}
         onKeyDown={listItemhandleKeyDown}
       >
diff --git a/app/client/packages/design-system/ads/src/List/List.types.tsx b/app/client/packages/design-system/ads/src/List/List.types.tsx
index 64c92247014b..a39db8ec5310 100644
--- a/app/client/packages/design-system/ads/src/List/List.types.tsx
+++ b/app/client/packages/design-system/ads/src/List/List.types.tsx
@@ -30,8 +30,6 @@ export interface ListItemProps {
   descriptionType?: "inline" | "block";
   /** class names for the list item */
   className?: string;
-  /** class names for the wrapper */
-  wrapperClassName?: string;
   /** id for the list item */
   id?: string;
   /** customTitleComponent for the list item to use input component for name editing */
diff --git a/app/client/src/ce/pages/Editor/IDE/EditorPane/Query/hooks.tsx b/app/client/src/ce/pages/Editor/IDE/EditorPane/Query/hooks.tsx
index c85ffd69def4..55246514bd81 100644
--- a/app/client/src/ce/pages/Editor/IDE/EditorPane/Query/hooks.tsx
+++ b/app/client/src/ce/pages/Editor/IDE/EditorPane/Query/hooks.tsx
@@ -319,7 +319,7 @@ export const useAddQueryListItems = () => {
 
       return {
         startIcon: icon,
-        wrapperClassName: className,
+        className: className,
         title,
         description:
           fileOperation.focusEntityType === FocusEntity.QUERY_MODULE_INSTANCE
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/JS/Add.tsx b/app/client/src/pages/Editor/IDE/EditorPane/JS/Add.tsx
index 88c686152aa3..8663ca11d1fe 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/JS/Add.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/JS/Add.tsx
@@ -48,7 +48,7 @@ const AddJS = () => {
           : "",
       descriptionType: "inline",
       onClick: onCreateItemClick.bind(null, data),
-      wrapperClassName: createAddClassName(title),
+      className: createAddClassName(title),
     } as ListItemProps;
   };
 
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/components/Group.tsx b/app/client/src/pages/Editor/IDE/EditorPane/components/Group.tsx
index b308b279554c..84a551462adb 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/components/Group.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/components/Group.tsx
@@ -15,11 +15,11 @@ const StyledList = styled(List)`
   & .ds-load-more .ads-v2-listitem__title {
     --color: var(--ads-v2-color-fg-subtle);
   }
-  & .ads-v2-listitem__wrapper .ads-v2-listitem__idesc {
+  & .ads-v2-listitem .ads-v2-listitem__idesc {
     opacity: 0;
   }
 
-  & .ads-v2-listitem__wrapper:hover .ads-v2-listitem__idesc {
+  & .ads-v2-listitem:hover .ads-v2-listitem__idesc {
     opacity: 1;
   }
 `;

From e1601a6a461cb860787a62edfb6273a94bb086bd Mon Sep 17 00:00:00 2001
From: Ankita Kinger <ankita@appsmith.com>
Date: Fri, 27 Dec 2024 20:23:51 +0530
Subject: [PATCH 6/6] minor css change

---
 app/client/packages/design-system/ads/src/List/List.styles.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/client/packages/design-system/ads/src/List/List.styles.tsx b/app/client/packages/design-system/ads/src/List/List.styles.tsx
index 3c4df9004bd9..db47e6987f99 100644
--- a/app/client/packages/design-system/ads/src/List/List.styles.tsx
+++ b/app/client/packages/design-system/ads/src/List/List.styles.tsx
@@ -34,7 +34,7 @@ export const TooltipTextWrapper = styled.div`
 export const DescriptionWrapper = styled.div`
   flex-direction: column;
   min-width: 0;
-  gap: var(--ads-v2-spaces-3);
+  gap: var(--ads-v2-spaces-2);
   display: flex;
 `;