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

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 {
-    height: 28px;
-    grid-template-columns: 0 auto 1fr auto auto auto auto auto;
-
-    .entity-icon > .ads-v2-icon {
+  & .ads-v2-listitem {
+    .datasource-table-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 Entity, { EntityClassNames } from "../Explorer/Entity";
+import React, { memo, useMemo, useState } from "react";
+import { EntityClassNames } from "../Explorer/Entity";
 import { datasourceTableIcon } from "../Explorer/ExplorerIcons";
 import QueryTemplates from "./QueryTemplates";
 import type { DatasourceTable } from "entities/Datasource";
@@ -10,13 +10,20 @@ 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,
+  List,
+  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";
@@ -47,13 +54,16 @@ const StructureWrapper = styled.div`
   height: 100%;
 `;
 
+const StyledList = styled(List)`
+  padding: 0;
+`;
+
 const DatasourceStructureItem = memo((props: DatasourceStructureItemProps) => {
   const dbStructure = props.dbStructure;
   let templateMenu = null;
   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 +147,14 @@ const DatasourceStructureItem = memo((props: DatasourceStructureItemProps) => {
   }, [active, props.tableName]);
 
   return (
-    <Entity
-      action={onEntityClick}
-      active={activeState}
-      className={`datasourceStructure-${props.context}`}
-      collapseRef={collapseRef}
-      contextMenu={templateMenu}
-      entityId={`${props.datasourceId}-${dbStructure.name}-${props.context}`}
-      icon={datasourceTableIcon}
-      isDefaultExpanded={props?.isDefaultOpen}
-      name={dbStructure.name}
-      step={props.step}
+    <ListItem
+      className={`datasourceStructure-${props.context} t--entity-item`}
+      dataTestId={`t--entity-item-${dbStructure.name}`}
+      isSelected={activeState}
+      onClick={onEntityClick}
+      rightControl={templateMenu}
+      startIcon={datasourceTableIcon}
+      title={dbStructure.name}
     />
   );
 });
@@ -163,26 +170,18 @@ type DatasourceStructureProps = Partial<DatasourceStructureItemProps> & {
 };
 
 const DatasourceStructure = (props: DatasourceStructureProps) => {
-  const Row = (index: number) => {
-    const structure = props.tables[index];
-
-    return (
-      <DatasourceStructureItem
-        {...omit(props, ["tables"])}
-        dbStructure={structure}
-        key={`${props.datasourceId}${structure.name}-${props.context}`}
-        showTemplates={props.showTemplates}
-      />
-    );
-  };
-
   return (
     <StructureWrapper>
-      <Virtuoso
-        className="t--schema-virtuoso-container"
-        itemContent={Row}
-        totalCount={props.tables.length}
-      />
+      <StyledList className="t--schema-virtuoso-container">
+        {props.tables.map((dbStructure) => (
+          <DatasourceStructureItem
+            {...omit(props, ["tables"])}
+            dbStructure={dbStructure}
+            key={`${props.datasourceId}${dbStructure.name}-${props.context}`}
+            showTemplates={props.showTemplates}
+          />
+        ))}
+      </StyledList>
     </StructureWrapper>
   );
 };

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);
-  .t--entity.datasourceStructure-datasource-view-mode {
-    padding-right: var(--ads-v2-spaces-5);
-  }
+  padding: 0 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" />;