feat: Overflow tabs list view

app/client/src/IDE/Components/FileTab.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+import styled from "styled-components";
+import clsx from "classnames";
+
+import { Flex, Icon } from "design-system";
+
+interface FileTabProps {
+  isActive: boolean;
+  title: string;
+  onClick: () => void;
+  onClose: (e: React.MouseEvent) => void;
+  icon?: React.ReactNode;
+}
+
+export const StyledTab = styled(Flex)`
+  position: relative;
+  height: 100%;
+  font-size: 12px;
+  color: var(--ads-v2-colors-text-default);
+  cursor: pointer;
+  gap: var(--ads-v2-spaces-2);
+  border-top: 1px solid transparent;
+  border-top-left-radius: var(--ads-v2-border-radius);
+  border-top-right-radius: var(--ads-v2-border-radius);
+  align-items: center;
+  justify-content: center;
+  padding: var(--ads-v2-spaces-3);
+  border-left: 1px solid transparent;
+  border-right: 1px solid transparent;
+  border-top: 2px solid transparent;
+
+  &.active {
+    background: var(--ads-v2-colors-control-field-default-bg);
+    border-top-color: var(--ads-v2-color-bg-brand);
+    border-left-color: var(--ads-v2-color-border-muted);
+    border-right-color: var(--ads-v2-color-border-muted);
+  }
+
+  & > .tab-close {
+    position: relative;
+    right: -2px;
+    visibility: hidden;
+  }
+
+  &:hover > .tab-close {
+    visibility: visible;
+  }
+
+  &.active > .tab-close {
+    visibility: visible;
+  }
+`;
+
+export const TabTextContainer = styled.span`
+  width: 100%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+`;
+
+export const TabIconContainer = styled.div`
+  height: 12px;
+  width: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  img {
+    width: 12px;
+  }
+`;
+
+export const FileTab = ({
+  icon,
+  isActive,
+  onClick,
+  onClose,
+  title,
+}: FileTabProps) => {
+  return (
+    <StyledTab
+      className={clsx("editor-tab", isActive && "active")}
+      data-testid={`t--ide-tab-${title}`}
+      onClick={onClick}
+    >
+      {icon ? <TabIconContainer>{icon}</TabIconContainer> : null}
+      <TabTextContainer>{title}</TabTextContainer>
+      {/* not using button component because of the size not matching design */}
+      <Icon
+        className="tab-close rounded-[4px] hover:bg-[var(--ads-v2-colors-action-tertiary-surface-hover-bg)] cursor-pointer p-[2px]"
+        data-testid="t--tab-close-btn"
+        name="close-line"
+        onClick={onClose}
+      />
+    </StyledTab>
+  );
+};

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

@@ -38,6 +38,7 @@ 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();
@@ -161,7 +162,7 @@ export const useQuerySegmentRoutes = (path: string): UseRoutes => {
       },
       {
         key: "QueryEmpty",
-        component: ListQuery,
+        component: QueriesBlankState,
         exact: true,
         path: [path],
       },

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/SplitScreenTabs";
+import EditorTabs from "../EditorTabs";
 import {
   jsSegmentRoutes,
   querySegmentRoutes,
@@ -17,19 +17,23 @@ 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 />
-      <EditorTabs />
+      {ideViewMode === EditorViewMode.SplitScreen ? <EditorTabs /> : null}
       <Flex
         className="ide-editor-left-pane__content"
         flexDirection="column"

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

@@ -51,6 +51,7 @@ const ListJSObjects = () => {
   return (
     <JSContainer
       className="ide-editor-left-pane__content-js"
+      flex="1"
       flexDirection="column"
       gap="spaces-3"
       overflow="hidden"

app/client/src/pages/Editor/IDE/EditorTabs/AddButton.tsx

@@ -2,34 +2,56 @@ import React from "react";
 import { Flex, Spinner, Button } from "design-system";
 import { useCurrentEditorState, useIDETabClickHandlers } from "../hooks";
 import { useIsJSAddLoading } from "@appsmith/pages/Editor/IDE/EditorPane/JS/hooks";
-import { EditorEntityTabState } from "@appsmith/entities/IDE/constants";
+import {
+  EditorEntityTab,
+  EditorEntityTabState,
+} from "@appsmith/entities/IDE/constants";
+import { FileTab } from "IDE/Components/FileTab";
 
-const AddButton = () => {
+const AddButton = ({
+  newTabClickCallback,
+  onClose,
+}: {
+  newTabClickCallback: () => void;
+  onClose: (actionId?: string) => void;
+}) => {
   const { addClickHandler } = useIDETabClickHandlers();
   const isJSLoading = useIsJSAddLoading();
-  const { segmentMode } = useCurrentEditorState();
+  const { segment, segmentMode } = useCurrentEditorState();
 
-  if (segmentMode === EditorEntityTabState.Add) {
-    return null;
-  }
   if (isJSLoading) {
     return (
       <Flex px="spaces-2">
         <Spinner size="md" />
       </Flex>
     );
   }
-  return (
-    <Button
-      className="!min-w-[24px]"
-      data-testid="t--ide-tabs-add-button"
-      id="tabs-add-toggle"
-      isIconButton
-      kind="tertiary"
-      onClick={addClickHandler}
-      size="sm"
-      startIcon="add-line"
+
+  const onCloseClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onClose();
+  };
+
+  return segmentMode === EditorEntityTabState.Add ? (
+    <FileTab
+      isActive={segmentMode === EditorEntityTabState.Add}
+      onClick={newTabClickCallback}
+      onClose={(e) => onCloseClick(e)}
+      title={`New ${segment === EditorEntityTab.JS ? "JS" : "Query"}`}
     />
+  ) : (
+    <div className="bg-white sticky right-0 flex items-center h-[32px] border-b border-b-[var(--ads-v2-color-border-muted)] pl-[var(--ads-v2-spaces-2)]">
+      <Button
+        className="!min-w-[24px]"
+        data-testid="t--ide-tabs-add-button"
+        id="tabs-add-toggle"
+        isIconButton
+        kind="tertiary"
+        onClick={addClickHandler}
+        size="sm"
+        startIcon="add-line"
+      />
+    </div>
   );
 };
 

app/client/src/pages/Editor/IDE/EditorTabs/Container.tsx

@@ -9,6 +9,7 @@ const Container = (props: { children: ReactNode }) => {
       backgroundColor="#FFFFFF"
       borderBottom="1px solid var(--ads-v2-color-border-muted)"
       gap="spaces-2"
+      id="ide-tabs-container"
       maxHeight="32px"
       minHeight="32px"
       px="spaces-2"

app/client/src/pages/Editor/IDE/EditorTabs/FileTabs.test.tsx

@@ -18,6 +18,7 @@ describe("FileTabs", () => {
   it("renders tabs correctly", () => {
     const { getByTestId, getByText } = render(
       <FileTabs
+        currentTab={mockTabs[0].key}
         navigateToTab={mockNavigateToTab}
         onClose={mockOnClose}
         tabs={mockTabs}
@@ -40,6 +41,7 @@ describe("FileTabs", () => {
   it("check tab click", () => {
     const { getByTestId } = render(
       <FileTabs
+        currentTab={mockTabs[0].key}
         navigateToTab={mockNavigateToTab}
         onClose={mockOnClose}
         tabs={mockTabs}
@@ -54,6 +56,7 @@ describe("FileTabs", () => {
   it("check for close click", () => {
     const { getByTestId } = render(
       <FileTabs
+        currentTab={mockTabs[1].key}
         navigateToTab={mockNavigateToTab}
         onClose={mockOnClose}
         tabs={mockTabs}

app/client/src/pages/Editor/IDE/EditorTabs/FileTabs.tsx

@@ -1,36 +1,19 @@
 import React, { useEffect } from "react";
-import { useLocation } from "react-router";
-import clsx from "classnames";
-import { Flex, Icon, ScrollArea } from "design-system";
 
-import {
-  EditorEntityTab,
-  EditorEntityTabState,
-  type EntityItem,
-} from "@appsmith/entities/IDE/constants";
-import {
-  StyledTab,
-  TabIconContainer,
-  TabTextContainer,
-} from "./StyledComponents";
-import { identifyEntityFromPath } from "navigation/FocusEntity";
+import type { EntityItem } from "@appsmith/entities/IDE/constants";
 import { useCurrentEditorState } from "../hooks";
+import { FileTab } from "IDE/Components/FileTab";
 
 interface Props {
   tabs: EntityItem[];
   navigateToTab: (tab: EntityItem) => void;
   onClose: (actionId?: string) => void;
+  currentTab: string;
 }
 
-const FILE_TABS_CONTAINER_ID = "file-tabs-container";
-
 const FileTabs = (props: Props) => {
-  const { navigateToTab, onClose, tabs } = props;
-  const { segment, segmentMode } = useCurrentEditorState();
-
-  const location = useLocation();
-
-  const currentEntity = identifyEntityFromPath(location.pathname);
+  const { currentTab, navigateToTab, onClose, tabs } = props;
+  const { segmentMode } = useCurrentEditorState();
 
   useEffect(() => {
     const activetab = document.querySelector(".editor-tab.active");
@@ -41,74 +24,24 @@ const FileTabs = (props: Props) => {
     }
   }, [tabs, segmentMode]);
 
-  useEffect(() => {
-    const ele = document.getElementById(FILE_TABS_CONTAINER_ID)?.parentElement;
-    if (ele && ele.scrollWidth > ele.clientWidth) {
-      ele.style.borderRight = "1px solid var(--ads-v2-color-border)";
-    } else if (ele) {
-      ele.style.borderRight = "unset";
-    }
-  }, [tabs]);
-
   const onCloseClick = (e: React.MouseEvent, id?: string) => {
     e.stopPropagation();
     onClose(id);
   };
 
   return (
-    <ScrollArea
-      className="h-[32px] top-[0.5px]"
-      data-testid="t--editor-tabs"
-      options={{
-        overflow: {
-          x: "scroll",
-          y: "hidden",
-        },
-      }}
-      size={"sm"}
-    >
-      <Flex gap="spaces-2" height="100%" id={FILE_TABS_CONTAINER_ID}>
-        {tabs.map((tab: EntityItem) => (
-          <StyledTab
-            className={clsx(
-              "editor-tab",
-              currentEntity.id === tab.key && "active",
-            )}
-            data-testid={`t--ide-tab-${tab.title}`}
-            key={tab.key}
-            onClick={() => navigateToTab(tab)}
-          >
-            <TabIconContainer>{tab.icon}</TabIconContainer>
-            <TabTextContainer>{tab.title}</TabTextContainer>
-            {/* not using button component because of the size not matching design */}
-            <Icon
-              className="tab-close rounded-[4px] hover:bg-[var(--ads-v2-colors-action-tertiary-surface-hover-bg)] cursor-pointer p-[2px]"
-              data-testid="t--tab-close-btn"
-              name="close-line"
-              onClick={(e) => onCloseClick(e, tab.key)}
-            />
-          </StyledTab>
-        ))}
-        {/* New Tab */}
-        {segmentMode === EditorEntityTabState.Add ? (
-          <StyledTab
-            className={clsx("editor-tab", "active")}
-            data-testid={`t--ide-tab-new`}
-          >
-            <TabTextContainer>
-              New {segment === EditorEntityTab.JS ? "JS" : "Query"}
-            </TabTextContainer>
-            {/* not using button component because of the size not matching design */}
-            <Icon
-              className="tab-close rounded-[4px] hover:bg-[var(--ads-v2-colors-action-tertiary-surface-hover-bg)] cursor-pointer p-[2px]"
-              data-testid="t--tab-close-btn"
-              name="close-line"
-              onClick={(e) => onCloseClick(e)}
-            />
-          </StyledTab>
-        ) : null}
-      </Flex>
-    </ScrollArea>
+    <>
+      {tabs.map((tab: EntityItem) => (
+        <FileTab
+          icon={tab.icon}
+          isActive={currentTab === tab.key}
+          key={tab.key}
+          onClick={() => navigateToTab(tab)}
+          onClose={(e) => onCloseClick(e, tab.key)}
+          title={tab.title}
+        />
+      ))}
+    </>
   );
 };