From 8fb677f1440796b15be679d1bcd83755a2bad3d6 Mon Sep 17 00:00:00 2001
From: Ankita Kinger <ankita@appsmith.com>
Date: Thu, 2 Jan 2025 20:04:07 +0530
Subject: [PATCH] fix: Updating the click functionalities in list item
 component (#38453)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description

Updating the click functionalities in list item component to fix the
partial clickable issue on JS module instance editor in EE.

Fixes [#38444](https://github.com/appsmithorg/appsmith/issues/38444)

## Automation

/ok-to-test tags="@tag.Sanity, @tag.Datasource, @tag.IDE"

### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/12582242512>
> Commit: a936b58bcb20706a08d5bd9e6d447737a9956dd6
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=12582242512&attempt=2"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Sanity, @tag.Datasource, @tag.IDE`
> Spec:
> <hr>Thu, 02 Jan 2025 14:17:45 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **Refactor**
- Removed `description` and `descriptionType` properties from various
`List` component items across multiple components
- Simplified keyboard interaction model in `List` component by removing
keyboard event handling
- Modified click event handling in `ListItem` to focus on mouse
interactions

- **Bug Fixes**
	- Prevented event propagation for right control clicks in `ListItem`

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../design-system/ads/src/List/List.tsx       | 25 +++++++------------
 .../Templates/IDEHeader/IDEHeader.stories.tsx |  4 ---
 .../Preview/Debugger/helpDropdown.tsx         |  8 ------
 .../IDE/EditorPane/components/Group.tsx       |  2 --
 4 files changed, 9 insertions(+), 30 deletions(-)

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 56fd0ddee37a..85fc97c212ab 100644
--- a/app/client/packages/design-system/ads/src/List/List.tsx
+++ b/app/client/packages/design-system/ads/src/List/List.tsx
@@ -91,23 +91,16 @@ function ListItem(props: ListItemProps) {
   } = props;
   const isBlockDescription = descriptionType === "block";
 
-  const listItemhandleKeyDown = (e: React.KeyboardEvent) => {
-    if (!props.isDisabled && props.onClick) {
-      switch (e.key) {
-        case "Enter":
-        case " ":
-          props.onClick();
-          break;
-      }
-    }
-  };
-
   const handleOnClick = () => {
     if (!props.isDisabled && props.onClick) {
       props.onClick();
     }
   };
 
+  const handleRightControlClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+  };
+
   return (
     <StyledListItem
       className={clsx(ListItemClassName, props.className)}
@@ -115,13 +108,11 @@ function ListItem(props: ListItemProps) {
       data-isblockdescription={isBlockDescription}
       data-rightcontrolvisibility={rightControlVisibility}
       data-selected={props.isSelected}
+      onClick={handleOnClick}
       size={size}
       tabIndex={props.isDisabled ? -1 : 0}
     >
-      <ContentTextWrapper
-        onClick={handleOnClick}
-        onKeyDown={listItemhandleKeyDown}
-      >
+      <ContentTextWrapper>
         {startIcon}
         {props.customTitleComponent ? (
           props.customTitleComponent
@@ -158,7 +149,9 @@ function ListItem(props: ListItemProps) {
         )}
       </ContentTextWrapper>
       {rightControl && (
-        <RightControlWrapper>{rightControl}</RightControlWrapper>
+        <RightControlWrapper onClick={handleRightControlClick}>
+          {rightControl}
+        </RightControlWrapper>
       )}
     </StyledListItem>
   );
diff --git a/app/client/packages/design-system/ads/src/Templates/IDEHeader/IDEHeader.stories.tsx b/app/client/packages/design-system/ads/src/Templates/IDEHeader/IDEHeader.stories.tsx
index c24b5e8eafda..c58c1d87769f 100644
--- a/app/client/packages/design-system/ads/src/Templates/IDEHeader/IDEHeader.stories.tsx
+++ b/app/client/packages/design-system/ads/src/Templates/IDEHeader/IDEHeader.stories.tsx
@@ -84,14 +84,10 @@ export const WithHeaderDropdown = () => {
                 {
                   title: "Page1",
                   onClick: noop,
-                  description: "",
-                  descriptionType: "inline",
                 },
                 {
                   title: "Page2",
                   onClick: noop,
-                  description: "",
-                  descriptionType: "inline",
                 },
               ]}
             />
diff --git a/app/client/src/pages/Editor/CustomWidgetBuilder/Preview/Debugger/helpDropdown.tsx b/app/client/src/pages/Editor/CustomWidgetBuilder/Preview/Debugger/helpDropdown.tsx
index 1510b739a1ea..6396ce115af6 100644
--- a/app/client/src/pages/Editor/CustomWidgetBuilder/Preview/Debugger/helpDropdown.tsx
+++ b/app/client/src/pages/Editor/CustomWidgetBuilder/Preview/Debugger/helpDropdown.tsx
@@ -36,14 +36,10 @@ export default function HelpDropdown(props: DebuggerLog) {
               onClick: () => {
                 window.open(CUSTOM_WIDGET_DOC_URL, "_blank");
               },
-              description: "",
-              descriptionType: "inline",
             },
             // {
             //   startIcon: <Icon name="wand" size="md" />,
             //   title: "Troubleshoot with AI",
-            //   description: "",
-            //   descriptionType: "inline",
             //   onClick: noop,
             // },
             {
@@ -61,14 +57,10 @@ export default function HelpDropdown(props: DebuggerLog) {
                     "_blank",
                   );
               },
-              description: "",
-              descriptionType: "inline",
             },
             // {
             //   startIcon: <Icon name="support" size="md" />,
             //   title: "Appsmith Support",
-            //   description: "",
-            //   descriptionType: "inline",
             //   onClick: noop,
             // },
           ]}
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 84a551462adb..678b383f3292 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/components/Group.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/components/Group.tsx
@@ -41,8 +41,6 @@ const Group: React.FC<GroupProps> = ({ group }) => {
     if (hasMoreItems) {
       items.push({
         title: "Load more...",
-        description: "",
-        descriptionType: "inline",
         onClick: handleLoadMore,
         className: "ds-load-more",
       });