fix: Add pane issues

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) => {
-      let group;
-      const iconUrl = getAssetUrl(
-        pluginGroups[action.config.pluginId]?.iconLocation,
-      );
-      if (action.config.pluginType === PluginType.API) {
-        group = isEmbeddedRestDatasource(action.config.datasource)
-          ? "APIs"
-          : datasourceIdToNameMap[action.config.datasource.id] ?? "APIs";
-      } else if (action.config.pluginType === PluginType.AI) {
-        group = isEmbeddedAIDataSource(action.config.datasource)
-          ? "AI Queries"
-          : datasourceIdToNameMap[action.config.datasource.id] ?? "AI Queries";
-      } else {
-        group = datasourceIdToNameMap[action.config.datasource.id];
-      }
-      return {
-        icon: ActionUrlIcon(iconUrl),
-        title: action.config.name,
-        key: action.config.id,
-        type: action.config.pluginType,
-        group,
-      };
-    });
+    const items: EntityItem[] = actions
+      .map((action) => {
+        let group;
+        const iconUrl = getAssetUrl(
+          pluginGroups[action.config.pluginId]?.iconLocation,
+        );
+        if (action.config.pluginType === PluginType.API) {
+          group = isEmbeddedRestDatasource(action.config.datasource)
+            ? GROUP_TYPES.API
+            : datasourceIdToNameMap[action.config.datasource.id] ?? "APIs";
+        } else if (action.config.pluginType === PluginType.AI) {
+          group = isEmbeddedAIDataSource(action.config.datasource)
+            ? GROUP_TYPES.AI
+            : datasourceIdToNameMap[action.config.datasource.id] ??
+              GROUP_TYPES.AI;
+        } else {
+          group = datasourceIdToNameMap[action.config.datasource.id];
+        }
+        return {
+          icon: ActionUrlIcon(iconUrl),
+          title: action.config.name,
+          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]: [],
@@ -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]: [],

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

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