fix: Add pane issues (#33627)

## Description

Fixes issues in add pane 


Fixes #33583

## Automation

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

### 🔍 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/9178183004>
> Commit: eeb8f4067fd18779380c0918ba9c4bd294b5134d
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9178183004&attempt=1"
target="_blank">Click here!</a>

<!-- end of auto-generated comment: Cypress test results  -->




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

app/client/src/ce/selectors/entitiesSelector.ts

@@ -1499,30 +1499,33 @@ export const getQuerySegmentItems = createSelector(
   selectDatasourceIdToNameMap,
   (actions, plugins, datasourceIdToNameMap) => {
     const pluginGroups = keyBy(plugins, "id");
-    const items: EntityItem[] = actions.map((action) => {
+    const items: EntityItem[] = actions
-      let group;
+      .map((action) => {
-      const iconUrl = getAssetUrl(
+        let group;
-        pluginGroups[action.config.pluginId]?.iconLocation,
+        const iconUrl = getAssetUrl(
-      );
+          pluginGroups[action.config.pluginId]?.iconLocation,
-      if (action.config.pluginType === PluginType.API) {
+        );
-        group = isEmbeddedRestDatasource(action.config.datasource)
+        if (action.config.pluginType === PluginType.API) {
-          ? "APIs"
+          group = isEmbeddedRestDatasource(action.config.datasource)
-          : datasourceIdToNameMap[action.config.datasource.id] ?? "APIs";
+            ? GROUP_TYPES.API
-      } else if (action.config.pluginType === PluginType.AI) {
+            : datasourceIdToNameMap[action.config.datasource.id] ?? "APIs";
-        group = isEmbeddedAIDataSource(action.config.datasource)
+        } else if (action.config.pluginType === PluginType.AI) {
-          ? "AI Queries"
+          group = isEmbeddedAIDataSource(action.config.datasource)
-          : datasourceIdToNameMap[action.config.datasource.id] ?? "AI Queries";
+            ? GROUP_TYPES.AI
-      } else {
+            : datasourceIdToNameMap[action.config.datasource.id] ??
-        group = datasourceIdToNameMap[action.config.datasource.id];
+              GROUP_TYPES.AI;
-      }
+        } else {
-      return {
+          group = datasourceIdToNameMap[action.config.datasource.id];
-        icon: ActionUrlIcon(iconUrl),
+        }
-        title: action.config.name,
+        return {
-        key: action.config.id,
+          icon: ActionUrlIcon(iconUrl),
-        type: action.config.pluginType,
+          title: action.config.name,
-        group,
+          key: action.config.id,
-      };
+          type: action.config.pluginType,
-    });
+          group,
+        };
+      })
+      .filter((a) => !!a.group);
     return items;
   },
 );

app/client/src/pages/Editor/IDE/EditorPane/JS/Add.tsx

@@ -43,7 +43,6 @@ const AddJS = ({ containerProps, innerContainerProps }: AddProps) => {
       data-testid="t--ide-add-pane"
       height="100%"
       justifyContent="center"
-      p="spaces-3"
       {...containerProps}
     >
       <Flex

app/client/src/pages/Editor/IDE/EditorPane/Query/Add.tsx

@@ -19,7 +19,6 @@ const AddQuery = ({ containerProps, innerContainerProps }: AddProps) => {
       data-testid="t--ide-add-pane"
       height="100%"
       justifyContent="center"
-      p="spaces-3"
       {...containerProps}
     >
       <Flex

app/client/src/pages/Editor/IDE/EditorPane/Query/QueryRender.test.tsx

@@ -17,6 +17,7 @@ import { getIDETestState } from "test/factories/AppIDEFactoryUtils";
 import { PageFactory } from "test/factories/PageFactory";
 import { screen } from "@testing-library/react";
 import { GoogleSheetFactory } from "test/factories/Actions/GoogleSheetFactory";
+import { datasourceFactory } from "test/factories/DatasourceFactory";
 
 const FeatureFlags = {
   rollout_side_by_side_enabled: true,
@@ -299,6 +300,10 @@ describe("IDE URL rendering of Queries", () => {
   });
 
   describe("Postgres Routes", () => {
+    const mockDS = datasourceFactory().build({
+      name: "Users",
+      id: "PostgresDatasourceID",
+    });
     it("Renders Postgres routes in Full Screen", async () => {
       const page = PageFactory.build();
       const anQuery = PostgresFactory.build({
@@ -308,6 +313,7 @@ describe("IDE URL rendering of Queries", () => {
       const state = getIDETestState({
         actions: [anQuery],
         pages: [page],
+        datasources: [mockDS],
         tabs: {
           [EditorEntityTab.QUERIES]: ["query_id"],
           [EditorEntityTab.JS]: [],
@@ -355,6 +361,7 @@ describe("IDE URL rendering of Queries", () => {
       const state = getIDETestState({
         actions: [anQuery],
         pages: [page],
+        datasources: [mockDS],
         tabs: {
           [EditorEntityTab.QUERIES]: ["query_id"],
           [EditorEntityTab.JS]: [],
@@ -403,6 +410,7 @@ describe("IDE URL rendering of Queries", () => {
       const state = getIDETestState({
         actions: [anQuery],
         pages: [page],
+        datasources: [mockDS],
         tabs: {
           [EditorEntityTab.QUERIES]: ["query_id"],
           [EditorEntityTab.JS]: [],
@@ -444,6 +452,7 @@ describe("IDE URL rendering of Queries", () => {
       const state = getIDETestState({
         actions: [anQuery],
         pages: [page],
+        datasources: [mockDS],
         tabs: {
           [EditorEntityTab.QUERIES]: ["query_id"],
           [EditorEntityTab.JS]: [],
@@ -478,7 +487,7 @@ describe("IDE URL rendering of Queries", () => {
       getByText(createMessage(EDITOR_PANE_TEXTS.queries_create_from_existing));
       getByText("New datasource");
       getByText("REST API");
-      // Check new tab presence
+      // Check the new tab presence
       const newTab = getByTestId("t--ide-tab-new");
       expect(newTab).not.toBeNull();
       // Close button is rendered
@@ -489,6 +498,10 @@ describe("IDE URL rendering of Queries", () => {
   });
 
   describe("Google Sheets Routes", () => {
+    const gSheetsDS = datasourceFactory().build({
+      name: "Sheet",
+      id: "GoogleSheetsDatasourceID",
+    });
     it("Renders Google Sheets routes in Full Screen", async () => {
       const page = PageFactory.build();
       const anQuery = GoogleSheetFactory.build({
@@ -499,6 +512,7 @@ describe("IDE URL rendering of Queries", () => {
       const state = getIDETestState({
         actions: [anQuery],
         pages: [page],
+        datasources: [gSheetsDS],
         tabs: {
           [EditorEntityTab.QUERIES]: ["saas_api_id"],
           [EditorEntityTab.JS]: [],
@@ -547,6 +561,7 @@ describe("IDE URL rendering of Queries", () => {
       const state = getIDETestState({
         actions: [anQuery],
         pages: [page],
+        datasources: [gSheetsDS],
         tabs: {
           [EditorEntityTab.QUERIES]: ["saas_api_id"],
           [EditorEntityTab.JS]: [],
@@ -632,7 +647,7 @@ describe("IDE URL rendering of Queries", () => {
     });
     it("Renders Google Sheets add routes in Split Screen", async () => {
       const page = PageFactory.build();
-      const anQuery = PostgresFactory.build({
+      const anQuery = GoogleSheetFactory.build({
         name: "Sheets4",
         id: "saas_api_id",
         pageId: page.pageId,
@@ -640,6 +655,7 @@ describe("IDE URL rendering of Queries", () => {
       const state = getIDETestState({
         actions: [anQuery],
         pages: [page],
+        datasources: [gSheetsDS],
         tabs: {
           [EditorEntityTab.QUERIES]: ["saas_api_id"],
           [EditorEntityTab.JS]: [],
@@ -659,7 +675,7 @@ describe("IDE URL rendering of Queries", () => {
         },
       );
 
-      // There will be 1 Api4 text ( The tab )
+      // There will be 1 Sheets4 text (The tab)
       expect(getAllByText("Sheets4").length).toEqual(1);
       // Tabs active state
       expect(
@@ -674,7 +690,7 @@ describe("IDE URL rendering of Queries", () => {
       getByText(createMessage(EDITOR_PANE_TEXTS.queries_create_from_existing));
       getByText("New datasource");
       getByText("REST API");
-      // Check new tab presence
+      // Check the new tab presence
       const newTab = getByTestId("t--ide-tab-new");
       expect(newTab).not.toBeNull();
       // Close button is rendered

app/client/src/pages/Editor/IDE/EditorPane/components/SegmentAddHeader.tsx

@@ -8,13 +8,7 @@ interface Props {
 
 const SegmentAddHeader = (props: Props) => {
   return (
-    <Flex
+    <Flex alignItems="center" justifyContent="space-between" p="spaces-3">
-      alignItems="center"
-      justifyContent="space-between"
-      pl="spaces-4"
-      pr="spaces-2"
-      py="spaces-2"
-    >
       <Text color="var(--ads-v2-color-fg)" kind="heading-xs">
         {createMessage(props.titleMessage)}
       </Text>