feat: New tab ui changes

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

@@ -5,6 +5,7 @@ import EditorNavigation, {
 } from "../../../../support/Pages/EditorNavigation";
 import { ObjectsRegistry } from "../../../../support/Objects/Registry";
 import FileTabs from "../../../../support/Pages/IDE/FileTabs";
+import AddView from "../../../../support/Pages/IDE/AddView";
 
 const agHelper = ObjectsRegistry.AggregateHelper;
 const commonLocators = ObjectsRegistry.CommonLocators;
@@ -66,8 +67,8 @@ describe("IDE add pane interactions", { tags: ["@tag.IDE"] }, () => {
     PageLeftPane.switchToAddNew();
     // check add pane
     PageLeftPane.assertInAddView();
-    // close add pane
-    PageLeftPane.closeAddView();
+    // close add tab
+    FileTabs.closeTab("new");
     // open add pane to add item
     PageLeftPane.switchToAddNew();
     // add item

app/client/cypress/support/Pages/AggregateHelper.ts

@@ -1806,4 +1806,18 @@ export class AggregateHelper {
   //     }
   //     return items;
   //   }, { timeout: 5000 });
+
+  public GetChildrenNClick(
+    selector: string,
+    childSelector: string,
+    index = 0,
+    force = false,
+    waitTimeInterval = 500,
+    ctrlKey = false,
+  ) {
+    return this.ScrollIntoView(selector, index)
+      .children(childSelector)
+      .click({ force: force, ctrlKey: ctrlKey })
+      .wait(waitTimeInterval);
+  }
 }

app/client/cypress/support/Pages/EntityExplorer.ts

@@ -8,6 +8,7 @@ import EditorNavigation, {
   PageLeftPane,
   PagePaneSegment,
 } from "./EditorNavigation";
+import AddView from "./IDE/AddView";
 import PageList from "./PageList";
 
 type templateActions =
@@ -247,8 +248,7 @@ export class EntityExplorer {
     this.agHelper.ClickOutside(); //to close the evaluated pop-up
     PageLeftPane.switchSegment(PagePaneSegment.Queries);
     PageLeftPane.switchToAddNew();
-    let overlayItem = this._visibleTextSpan(dsName);
-    this.agHelper.GetNClick(overlayItem);
+    AddView.clickCreateOption(dsName);
   }
 
   public CopyPasteWidget(widgetName: string) {

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

@@ -2,8 +2,10 @@ import { ObjectsRegistry } from "../../Objects/Registry";
 
 class AddView {
   public locators = {
+    addPane: "[data-testid='t--ide-add-pane']",
     closePaneButton: "[data-testid='t--add-pane-close-icon']",
-    createOption: "[data-testid='t--create-option']",
+    createOption: (name: string) =>
+      ".t--datasoucre-create-option-" + name.toLowerCase().replace(/ /g, "_"),
   };
 
   constructor() {
@@ -12,17 +14,17 @@ class AddView {
 
   public assertInAddView() {
     ObjectsRegistry.AggregateHelper.AssertElementVisibility(
-      this.locators.closePaneButton,
+      this.locators.addPane,
     );
   }
 
   public closeAddView() {
     ObjectsRegistry.AggregateHelper.GetNClick(this.locators.closePaneButton);
   }
 
-  public getCreateOptions(): Cypress.Chainable {
-    return cy.get(this.locators.createOption);
+  public clickCreateOption(name: string) {
+    ObjectsRegistry.AggregateHelper.GetNClick(this.locators.createOption(name));
   }
 }
 
-export default AddView;
+export default new AddView();

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

@@ -4,7 +4,8 @@ class FileTabs {
     container: "[data-testid='t--editor-tabs']",
     tabName: (name: string) => `[data-testid='t--ide-tab-${name}']`,
     tabs: ".editor-tab",
-    addItem: "[data-testid='t--ide-split-screen-add-button']",
+    addItem: "[data-testid='t--ide-tabs-add-button']",
+    closeTab: "[data-testid='t--tab-close-btn']",
   };
 
   assertVisibility() {
@@ -32,6 +33,17 @@ class FileTabs {
       }
     });
   }
+
+  closeTab(name: string) {
+    const tab = this.locators.tabName(name);
+    ObjectsRegistry.AggregateHelper.HoverElement(tab);
+    ObjectsRegistry.AggregateHelper.GetChildrenNClick(
+      tab,
+      this.locators.closeTab,
+      0,
+      true,
+    );
+  }
 }
 
 export default new FileTabs();

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

@@ -1,5 +1,7 @@
 import { ObjectsRegistry } from "../../Objects/Registry";
+import { PagePaneSegment } from "../EditorNavigation";
 import AddView from "./AddView";
+import FileTabs from "./FileTabs";
 import ListView from "./ListView";
 
 export class LeftPane {
@@ -15,8 +17,6 @@ export class LeftPane {
     activeItemSelector: "",
     selector: "",
   };
-
-  private addView: AddView;
   private listView: ListView;
 
   constructor(
@@ -29,7 +29,6 @@ export class LeftPane {
     this.segments = segments;
     this.locators.selector = selector;
     this.locators.activeItemSelector = activeItemSelector;
-    this.addView = new AddView();
     this.listView = new ListView();
   }
 
@@ -109,15 +108,15 @@ export class LeftPane {
   }
 
   public assertInAddView() {
-    this.addView.assertInAddView();
+    AddView.assertInAddView();
   }
 
   public closeAddView() {
-    this.addView.closeAddView();
+    AddView.closeAddView();
   }
 
-  public getCreateOptions() {
-    return this.addView.getCreateOptions();
+  public clickCreateOption(name: string) {
+    return AddView.clickCreateOption(name);
   }
 
   public assertInListView() {

app/client/src/ce/constants/messages.ts

@@ -2326,9 +2326,9 @@ export const EDITOR_PANE_TEXTS = {
   js_add_button: () => "New JS object",
   js_blank_object_item: () => "Blank JS object",
   widget_add_button: () => "New UI element",
-  query_create_tab_title: () => "Create new query / API",
+  query_create_tab_title: () => "Create new query from",
   widgets_create_tab_title: () => "Drag & drop UI elements",
-  js_create_tab_title: () => "Create JS object",
+  js_create_tab_title: () => "Create JS object from",
   queries_create_from_existing: () => "From existing datasource",
   queries_create_new: () => "New API",
   loading_building_blocks: () => "Loading building blocks",

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

@@ -7,16 +7,12 @@ import { createMessage, EDITOR_PANE_TEXTS } from "@appsmith/constants/messages";
 import { JsFileIconV2 } from "pages/Editor/Explorer/ExplorerIcons";
 import { SEARCH_ITEM_TYPES } from "components/editorComponents/GlobalSearch/utils";
 import type { UseRoutes } from "@appsmith/entities/IDE/constants";
-import {
-  EditorEntityTabState,
-  EditorViewMode,
-} from "@appsmith/entities/IDE/constants";
+import { EditorViewMode } from "@appsmith/entities/IDE/constants";
 import { getIDEViewMode, getIsSideBySideEnabled } from "selectors/ideSelectors";
 import JSEditor from "pages/Editor/JSEditor";
 import AddJS from "pages/Editor/IDE/EditorPane/JS/Add";
 import { ADD_PATH } from "@appsmith/constants/routes/appRoutes";
 import ListJS from "pages/Editor/IDE/EditorPane/JS/List";
-import { useCurrentEditorState } from "pages/Editor/IDE/hooks";
 import history from "utils/history";
 import { FocusEntity, identifyEntityFromPath } from "navigation/FocusEntity";
 import { useModuleOptions } from "@appsmith/utils/moduleInstanceHelpers";
@@ -26,34 +22,29 @@ export const useJSAdd = () => {
   const pageId = useSelector(getCurrentPageId);
   const dispatch = useDispatch();
   const currentEntityInfo = identifyEntityFromPath(location.pathname);
-  const { segmentMode } = useCurrentEditorState();
   const moduleCreationOptions = useModuleOptions();
   const jsModuleCreationOptions = moduleCreationOptions.filter(
     (opt) => opt.focusEntityType === FocusEntity.JS_MODULE_INSTANCE,
   );
 
-  return useCallback(() => {
+  const openAddJS = useCallback(() => {
     if (jsModuleCreationOptions.length === 0) {
-      if (segmentMode === EditorEntityTabState.Add) {
-        const url = getJSUrl(currentEntityInfo, false);
-        history.push(url);
-      } else {
-        dispatch(createNewJSCollection(pageId, "ENTITY_EXPLORER"));
-      }
+      dispatch(createNewJSCollection(pageId, "ENTITY_EXPLORER"));
     } else {
-      const url = getJSUrl(
-        currentEntityInfo,
-        !(segmentMode === EditorEntityTabState.Add),
-      );
+      if (currentEntityInfo.entity === FocusEntity.JS_OBJECT_ADD) {
+        return;
+      }
+      const url = getJSUrl(currentEntityInfo, true);
       history.push(url);
     }
-  }, [
-    dispatch,
-    pageId,
-    segmentMode,
-    currentEntityInfo,
-    jsModuleCreationOptions,
-  ]);
+  }, [jsModuleCreationOptions, pageId, dispatch, currentEntityInfo]);
+
+  const closeAddJS = useCallback(() => {
+    const url = getJSUrl(currentEntityInfo, false);
+    history.push(url);
+  }, [pageId, currentEntityInfo]);
+
+  return { openAddJS, closeAddJS };
 };
 
 export const useIsJSAddLoading = () => {
@@ -111,17 +102,11 @@ export const useJSSegmentRoutes = (path: string): UseRoutes => {
     ];
   }
   return [
-    {
-      exact: true,
-      key: "AddJS",
-      component: AddJS,
-      path: [`${path}${ADD_PATH}`, `${path}/:collectionId${ADD_PATH}`],
-    },
     {
       exact: false,
       key: "ListJS",
       component: ListJS,
-      path: [path],
+      path: [path, `${path}${ADD_PATH}`, `${path}/:collectionId${ADD_PATH}`],
     },
   ];
 };

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

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from "react";
+import React, { useCallback, useMemo } from "react";
 import history from "utils/history";
 import { useLocation } from "react-router";
 import { FocusEntity, identifyEntityFromPath } from "navigation/FocusEntity";
@@ -27,37 +27,39 @@ import {
 import { SAAS_EDITOR_API_ID_PATH } from "pages/Editor/SaaSEditor/constants";
 import ApiEditor from "pages/Editor/APIEditor";
 import type { UseRoutes } from "@appsmith/entities/IDE/constants";
-import {
-  EditorEntityTabState,
-  EditorViewMode,
-} from "@appsmith/entities/IDE/constants";
+import { EditorViewMode } from "@appsmith/entities/IDE/constants";
 import QueryEditor from "pages/Editor/QueryEditor";
 import AddQuery from "pages/Editor/IDE/EditorPane/Query/Add";
 import ListQuery from "pages/Editor/IDE/EditorPane/Query/List";
 import type { AppState } from "@appsmith/reducers";
 import keyBy from "lodash/keyBy";
 import { getPluginEntityIcon } from "pages/Editor/Explorer/ExplorerIcons";
-import type { ListItemProps } from "design-system";
+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";
 
 export const useQueryAdd = () => {
   const location = useLocation();
   const currentEntityInfo = identifyEntityFromPath(location.pathname);
   const { segmentMode } = useCurrentEditorState();
 
-  const addButtonClickHandler = useCallback(() => {
-    let url = "";
-    if (segmentMode === EditorEntityTabState.Add) {
-      // Already in add mode, back to the previous active item
-      url = getQueryUrl(currentEntityInfo, false);
-    } else {
-      url = getQueryUrl(currentEntityInfo);
+  const openAddQuery = useCallback(() => {
+    if (currentEntityInfo.entity === FocusEntity.QUERY_ADD) {
+      return;
     }
+    let url = "";
+    url = getQueryUrl(currentEntityInfo);
+    history.push(url);
+  }, [currentEntityInfo, segmentMode, location]);
+
+  const closeAddQuery = useCallback(() => {
+    let url = "";
+    url = getQueryUrl(currentEntityInfo, false);
     history.push(url);
-  }, [currentEntityInfo, segmentMode]);
+  }, [currentEntityInfo, segmentMode, location]);
 
-  return addButtonClickHandler;
+  return { openAddQuery, closeAddQuery };
 };
 
 export type GroupedAddOperations = Array<{
@@ -166,17 +168,11 @@ export const useQuerySegmentRoutes = (path: string): UseRoutes => {
     ];
   }
   return [
-    {
-      key: "AddQuery",
-      exact: true,
-      component: AddQuery,
-      path: [`${path}${ADD_PATH}`, `${path}/:queryId${ADD_PATH}`],
-    },
     {
       key: "ListQuery",
       exact: false,
       component: ListQuery,
-      path: [path],
+      path: [path, `${path}${ADD_PATH}`, `${path}/:queryId${ADD_PATH}`],
     },
   ];
 };
@@ -202,17 +198,24 @@ export const useAddQueryListItems = () => {
 
   const getListItems = (data: any[]) => {
     return data.map((fileOperation) => {
+      const title =
+        fileOperation.entityExplorerTitle ||
+        fileOperation.dsName ||
+        fileOperation.title;
+      const className = createAddClassName(title);
       const icon =
         fileOperation.icon ||
         (fileOperation.pluginId &&
           getPluginEntityIcon(pluginGroups[fileOperation.pluginId]));
       return {
         startIcon: icon,
-        title:
-          fileOperation.entityExplorerTitle ||
-          fileOperation.dsName ||
-          fileOperation.title,
-        description: !!fileOperation.isBeta ? "Beta" : "",
+        wrapperClassName: className,
+        title,
+        description: !!fileOperation.isBeta ? (
+          <Tag isClosable={false}>Beta</Tag>
+        ) : (
+          ""
+        ),
         descriptionType: "inline",
         onClick: onCreateItemClick.bind(null, fileOperation),
       } as ListItemProps;

app/client/src/ce/pages/Editor/IDE/EditorPane/__tests__/JS/JSSegment.test.tsx

@@ -43,7 +43,7 @@ describe("JS Segment", () => {
     expect(result.current).toBeDefined();
 
     act(() => {
-      result.current();
+      result.current.openAddJS();
     });
 
     expect(mockDispatchFn).toBeCalledWith({
@@ -66,7 +66,7 @@ describe("JS Segment", () => {
 
     // Call the function now from a different page
     act(() => {
-      result.current();
+      result.current.openAddJS();
     });
 
     // Now the creation action should have the new page id