fix: Revert "feat: Overflow tabs list view" (#34613)

## Description
This reverts commit 519b53e.


Fixes #`Issue Number`  
_or_  
Fixes `Issue URL`
> [!WARNING]  
> _If no issue exists, please create an issue first, and check with the
maintainers if the issue is valid._

## 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/9755650204>
> Commit: 3e273b6
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9755650204&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.All`

<!-- 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**
  - Improved tab closing interaction in the IDE pane.
- Updated components for better consistency and performance in the
Editor.
  - Renamed and reorganized components for clarity.

- **New Features**
- Added `FullScreenTabs` component for a more immersive tab management
experience.

- **Style**
- Enhanced styling for tabs and related UI elements to improve user
experience.
  
- **Tests**
  - Refined test cases for better accuracy and reliability.

- **Performance**
- Enhanced selector functions for better memoization and performance in
the IDE.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

app/client/cypress/e2e/Regression/ClientSide/IDE/IDE_Add_Pane_Interactions_spec.ts

@@ -68,7 +68,7 @@ describe("IDE add pane interactions", { tags: ["@tag.IDE"] }, () => {
     // check add pane
     PageLeftPane.assertInAddView();
     // close add tab
-    FileTabs.closeTab("new_query");
+    FileTabs.closeTab("new");
     // open add pane to add item
     PageLeftPane.switchToAddNew();
     // add item

app/client/cypress/support/Pages/IDE/FileTabs.ts

@@ -1,10 +1,8 @@
 import { ObjectsRegistry } from "../../Objects/Registry";
-import { sanitizeString } from "../../../../src/utils/URLUtils";
 class FileTabs {
   locators = {
     container: "[data-testid='t--editor-tabs']",
-    tabName: (name: string) =>
-      `[data-testid='t--ide-tab-${sanitizeString(name)}']`,
+    tabName: (name: string) => `[data-testid='t--ide-tab-${name}']`,
     tabs: ".editor-tab",
     addItem: "[data-testid='t--ide-tabs-add-button']",
     closeTab: "[data-testid='t--tab-close-btn']",

app/client/src/ce/pages/Editor/IDE/EditorPane/JS/hooks.ts

@@ -17,7 +17,6 @@ import history from "utils/history";
 import { FocusEntity, identifyEntityFromPath } from "navigation/FocusEntity";
 import { useModuleOptions } from "@appsmith/utils/moduleInstanceHelpers";
 import { getJSUrl } from "@appsmith/pages/Editor/IDE/EditorPane/JS/utils";
-import { JSBlankState } from "pages/Editor/JSEditor/JSBlankState";
 
 export const useJSAdd = () => {
   const pageId = useSelector(getCurrentPageId);
@@ -96,7 +95,7 @@ export const useJSSegmentRoutes = (path: string): UseRoutes => {
       },
       {
         key: "JSEmpty",
-        component: JSBlankState,
+        component: ListJS,
         exact: true,
         path: [path],
       },

app/client/src/ce/pages/Editor/IDE/EditorPane/Query/hooks.tsx

@@ -38,7 +38,6 @@ import { Tag, type ListItemProps } from "design-system";
 import { useCurrentEditorState } from "pages/Editor/IDE/hooks";
 import CurlImportEditor from "pages/Editor/APIEditor/CurlImportEditor";
 import { createAddClassName } from "pages/Editor/IDE/EditorPane/utils";
-import { QueriesBlankState } from "pages/Editor/QueryEditor/QueriesBlankState";
 
 export const useQueryAdd = () => {
   const location = useLocation();
@@ -162,7 +161,7 @@ export const useQuerySegmentRoutes = (path: string): UseRoutes => {
       },
       {
         key: "QueryEmpty",
-        component: QueriesBlankState,
+        component: ListQuery,
         exact: true,
         path: [path],
       },

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

@@ -6,7 +6,6 @@ import {
   getQuerySegmentItems,
 } from "@appsmith/selectors/entitiesSelector";
 import { getJSTabs, getQueryTabs } from "selectors/ideSelectors";
-import type { AppState } from "@appsmith/reducers";
 
 export type EditorSegmentList = Array<{
   group: string | "NA";
@@ -46,22 +45,28 @@ export const selectJSSegmentEditorList = createSelector(
   },
 );
 
-export const selectJSSegmentEditorTabs = (state: AppState) => {
-  const items = getJSSegmentItems(state);
-  const tabs = getJSTabs(state);
-
-  const keyedItems = keyBy(items, "key");
-  return tabs
-    .map((tab) => {
-      return keyedItems[tab];
-    })
-    .filter(Boolean);
-};
-
-export const selectQuerySegmentEditorTabs = (state: AppState) => {
-  const items = getQuerySegmentItems(state);
-  const tabs = getQueryTabs(state);
+export const selectJSSegmentEditorTabs = createSelector(
+  getJSSegmentItems,
+  getJSTabs,
+  (items, tabs) => {
+    const keyedItems = keyBy(items, "key");
+    return tabs
+      .map((tab) => {
+        return keyedItems[tab];
+      })
+      .filter(Boolean);
+  },
+);
 
-  const keyedItems = keyBy(items, "key");
-  return tabs.map((tab) => keyedItems[tab]).filter(Boolean);
-};
+export const selectQuerySegmentEditorTabs = createSelector(
+  getQuerySegmentItems,
+  getQueryTabs,
+  (items, tabs) => {
+    const keyedItems = keyBy(items, "key");
+    return tabs
+      .map((tab) => {
+        return keyedItems[tab];
+      })
+      .filter(Boolean);
+  },
+);

app/client/src/pages/Editor/IDE/EditorPane/EditorPaneSegments.tsx

@@ -6,7 +6,7 @@ import QueriesSegment from "./Query";
 import WidgetsSegment from "./UI";
 import JSSegment from "./JS";
 import SegmentedHeader from "./components/SegmentedHeader";
-import EditorTabs from "../EditorTabs";
+import EditorTabs from "../EditorTabs/SplitScreenTabs";
 import {
   jsSegmentRoutes,
   querySegmentRoutes,
@@ -17,23 +17,19 @@ import {
   BUILDER_PATH,
   BUILDER_PATH_DEPRECATED,
 } from "@appsmith/constants/routes/appRoutes";
-import { useSelector } from "react-redux";
-import { getIDEViewMode } from "selectors/ideSelectors";
-import { EditorViewMode } from "@appsmith/entities/IDE/constants";
 
 const EditorPaneSegments = () => {
   const { path } = useRouteMatch();
-  const ideViewMode = useSelector(getIDEViewMode);
 
   return (
     <Flex
-      className="relative"
       flexDirection="column"
+      gap="spacing-2"
       height="100%"
       overflow="hidden"
     >
       <SegmentedHeader />
-      {ideViewMode === EditorViewMode.SplitScreen ? <EditorTabs /> : null}
+      <EditorTabs />
       <Flex
         className="ide-editor-left-pane__content"
         flexDirection="column"

app/client/src/pages/Editor/IDE/EditorPane/JS/JSRender.test.tsx

@@ -151,7 +151,7 @@ describe("IDE Render: JS", () => {
       ).toBe(true);
       // Tabs active state
       expect(
-        getByTestId("t--ide-tab-jsobject1").classList.contains("active"),
+        getByTestId("t--ide-tab-JSObject1").classList.contains("active"),
       ).toBe(true);
       // Check if the form is rendered
       expect(container.querySelector(".js-editor-tab")).not.toBeNull();
@@ -201,7 +201,7 @@ describe("IDE Render: JS", () => {
       expect(getAllByText("JSObject2").length).toBe(2);
       // Tabs active state
       expect(
-        getByTestId("t--ide-tab-jsobject2").classList.contains("active"),
+        getByTestId("t--ide-tab-JSObject2").classList.contains("active"),
       ).toBe(true);
 
       // Check if the form is rendered
@@ -245,7 +245,7 @@ describe("IDE Render: JS", () => {
       expect(getAllByText("JSObject3").length).toEqual(2);
       // Tabs active state
       expect(
-        getByTestId("t--ide-tab-jsobject3").classList.contains("active"),
+        getByTestId("t--ide-tab-JSObject3").classList.contains("active"),
       ).toBe(false);
       // Check js object is not rendered. Instead new tab should render
       expect(container.querySelector(".js-editor-tab")).toBeNull();
@@ -283,7 +283,7 @@ describe("IDE Render: JS", () => {
       expect(getAllByText("JSObject4").length).toEqual(1);
       // Tabs active state
       expect(
-        getByTestId("t--ide-tab-jsobject4").classList.contains("active"),
+        getByTestId("t--ide-tab-JSObject4").classList.contains("active"),
       ).toBe(false);
 
       // Check if the form is not rendered

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

@@ -51,7 +51,6 @@ const ListJSObjects = () => {
   return (
     <JSContainer
       className="ide-editor-left-pane__content-js"
-      flex="1"
       flexDirection="column"
       gap="spaces-3"
       overflow="hidden"
@@ -78,6 +77,7 @@ const ListJSObjects = () => {
       >
         <Flex
           data-testid="t--ide-list"
+          flex="1"
           flexDirection="column"
           gap="spaces-4"
           overflowY="auto"