chore: Replacing entity item component in schema tables with the new List item component in ADS (#38987)

## Description

Replacing entity item component in schema tables with the new List item
component in ADS

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

## Automation

/ok-to-test tags="@tag.All"

### 🔍 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/13130548638>
> Commit: a280e4796a2ee1187ef7753107bb8dfb610b60b5
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=13130548638&attempt=2"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.All`
> Spec:
> <hr>Tue, 04 Feb 2025 09: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

- **New Features**
- Improved API action selection with refined filtering to ensure
accurate plugin association.

- **Refactor**
- Updated the datasource structure view for a streamlined and simplified
list presentation.

- **Style**
- Modernized styling across the datasource tab and schema view,
including adjusted spacing.
  - Enhanced icon appearance for more consistent visual cues.
- Added testability attributes to list items for improved automated
testing support.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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

@@ -124,6 +124,7 @@ function ListItem(props: ListItemProps) {
       data-isblockdescription={isBlockDescription}
       data-rightcontrolvisibility={rightControlVisibility}
       data-selected={props.isSelected}
+      data-testid={props.dataTestId}
       id={props.id}
       onClick={handleOnClick}
       onDoubleClick={handleDoubleClick}

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

@@ -36,6 +36,8 @@ export interface ListItemProps {
   id?: string;
   /** customTitleComponent for the list item to use input component for name editing */
   customTitleComponent?: ReactNode | ReactNode[];
+  /** dataTestId which will be used in automated tests */
+  dataTestId?: string;
 }
 
 export interface ListProps {

app/client/src/PluginActionEditor/components/PluginActionResponse/components/DatasourceTab/styles.ts

@@ -12,16 +12,9 @@ export const TableColumn = styled(Flex)`
 `;
 
 export const SchemaTableContainer = styled(Flex)`
-  & .t--entity-item {
+  & .ads-v2-listitem {
-    height: 28px;
+    .datasource-table-icon {
-    grid-template-columns: 0 auto 1fr auto auto auto auto auto;
-
-    .entity-icon > .ads-v2-icon {
       display: none;
     }
-
-    .t--entity-name {
-      padding-left: 0;
-    }
   }
 `;

app/client/src/components/editorComponents/GlobalSearch/GlobalSearchHooks.tsx

@@ -24,7 +24,7 @@ import {
   isMatching,
   SEARCH_ITEM_TYPES,
 } from "./utils";
-import { type Plugin, PluginType } from "entities/Plugin";
+import { type Plugin, PluginType, UIComponentTypes } from "entities/Plugin";
 import { integrationEditorURL } from "ee/RouteBuilder";
 import type { AppState } from "ee/reducers";
 import { getCurrentAppWorkspace } from "ee/selectors/selectedWorkspaceSelectors";
@@ -313,7 +313,9 @@ export const updateActionOperations = (
   actionOps: ActionOperation[],
 ) => {
   const restApiPlugin = plugins.find(
-    (plugin) => plugin.type === PluginType.API,
+    (plugin) =>
+      plugin.type === PluginType.API &&
+      plugin.uiComponent === UIComponentTypes.ApiEditorForm,
   );
   const newApiActionIdx = actionOps.findIndex(
     (op) => op.title === "New blank API",

app/client/src/pages/Editor/DatasourceInfo/DatasourceStructure.tsx

@@ -1,5 +1,5 @@
-import React, { memo, useMemo, useRef, useState } from "react";
+import React, { memo, useMemo, useState } from "react";
-import Entity, { EntityClassNames } from "../Explorer/Entity";
+import { EntityClassNames } from "../Explorer/Entity";
 import { datasourceTableIcon } from "../Explorer/ExplorerIcons";
 import QueryTemplates from "./QueryTemplates";
 import type { DatasourceTable } from "entities/Datasource";
@@ -10,18 +10,25 @@ import { useSelector } from "react-redux";
 import type { AppState } from "ee/reducers";
 import { getDatasource, getPlugin } from "ee/selectors/entitiesSelector";
 import { getPagePermissions } from "selectors/editorSelectors";
-import { Menu, MenuTrigger, Button, Tooltip, MenuContent } from "@appsmith/ads";
+import {
+  Menu,
+  MenuTrigger,
+  Button,
+  Tooltip,
+  MenuContent,
+  ListItem,
+} from "@appsmith/ads";
 import { SHOW_TEMPLATES, createMessage } from "ee/constants/messages";
 import styled from "styled-components";
 import AnalyticsUtil from "ee/utils/AnalyticsUtil";
 import type { Plugin } from "entities/Plugin";
 import { omit } from "lodash";
-import { Virtuoso } from "react-virtuoso";
 import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
 import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
 import { hasCreateDSActionPermissionInApp } from "ee/utils/BusinessFeatures/permissionPageHelpers";
 import history from "utils/history";
 import { getIDETypeByUrl } from "ee/entities/IDE/utils";
+import { Virtuoso } from "react-virtuoso";
 
 interface DatasourceStructureItemProps {
   dbStructure: DatasourceTable;
@@ -53,7 +60,6 @@ const DatasourceStructureItem = memo((props: DatasourceStructureItemProps) => {
   const [active, setActive] = useState(false);
 
   useCloseMenuOnScroll(SIDEBAR_ID, active, () => setActive(false));
-  const collapseRef = useRef<HTMLDivElement | null>(null);
 
   const datasource = useSelector((state: AppState) =>
     getDatasource(state, props.datasourceId),
@@ -137,17 +143,14 @@ const DatasourceStructureItem = memo((props: DatasourceStructureItemProps) => {
   }, [active, props.tableName]);
 
   return (
-    <Entity
+    <ListItem
-      action={onEntityClick}
+      className={`datasourceStructure-${props.context} t--entity-item`}
-      active={activeState}
+      dataTestId={`t--entity-item-${dbStructure.name}`}
-      className={`datasourceStructure-${props.context}`}
+      isSelected={activeState}
-      collapseRef={collapseRef}
+      onClick={onEntityClick}
-      contextMenu={templateMenu}
+      rightControl={templateMenu}
-      entityId={`${props.datasourceId}-${dbStructure.name}-${props.context}`}
+      startIcon={datasourceTableIcon}
-      icon={datasourceTableIcon}
+      title={dbStructure.name}
-      isDefaultExpanded={props?.isDefaultOpen}
-      name={dbStructure.name}
-      step={props.step}
     />
   );
 });

app/client/src/pages/Editor/DatasourceInfo/SchemaViewModeCSS.tsx

@@ -43,10 +43,7 @@ export const DatasourceListContainer = styled.div`
   height: 100%;
   display: flex;
   flex-direction: column;
-  padding-left: var(--ads-v2-spaces-5);
+  padding: 0 var(--ads-v2-spaces-5);
-  .t--entity.datasourceStructure-datasource-view-mode {
-    padding-right: var(--ads-v2-spaces-5);
-  }
   &.t--gsheet-structure {
     padding-bottom: var(--ads-v2-spaces-8);
     .t--gsheet-structure-list {
@@ -203,7 +200,6 @@ export const DatasourceStructureSearchContainer = styled.div`
   margin: var(--ads-v2-spaces-3) 0 var(--ads-v2-spaces-2) 0;
   background: white;
   flex-shrink: 0;
-  padding-right: var(--ads-v2-spaces-5);
   display: flex;
   align-items: center;
   gap: var(--ads-v2-spaces-2);
@@ -212,7 +208,6 @@ export const DatasourceStructureSearchContainer = styled.div`
     margin-bottom: var(--ads-v2-spaces-2);
   }
   &.t--search-container--query-editor {
-    padding-right: 0;
     margin: 0;
   }
 `;

app/client/src/pages/Editor/Explorer/ExplorerIcons.tsx

@@ -97,7 +97,9 @@ export const datasourceIcon = (
   />
 );
 
-export const datasourceTableIcon = <Icon name="layout-5-line" size="md" />;
+export const datasourceTableIcon = (
+  <Icon className="datasource-table-icon" name="layout-5-line" size="md" />
+);
 
 export const primaryKeyIcon = <Icon name="key-2-line" size="md" />;