feat: New tab ui changes

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

@@ -14,7 +14,7 @@ describe("IDE add pane interactions", { tags: ["@tag.IDE"] }, () => {
  // check add pane is open
  PageLeftPane.assertInAddView();
  // close add pane to show blank state
- PageLeftPane.closeAddView();
+ PageLeftPane.closeAddView(PagePaneSegment.UI);
  // click on add button and check add state
  PageLeftPane.switchToAddNew();
  // check add pane
@@ -28,7 +28,7 @@ describe("IDE add pane interactions", { tags: ["@tag.IDE"] }, () => {
  // check add pane is open
  PageLeftPane.assertInAddView();
  // close add pane
- PageLeftPane.closeAddView();
+ PageLeftPane.closeAddView(PagePaneSegment.UI);
  // click on canvas and check add pane visible or not
  agHelper.GetNClick(commonLocators._canvas).click();
  // check add pane
@@ -67,7 +67,7 @@ describe("IDE add pane interactions", { tags: ["@tag.IDE"] }, () => {
  // check add pane
  PageLeftPane.assertInAddView();
  // close add pane
- PageLeftPane.closeAddView();
+ PageLeftPane.closeAddView(PagePaneSegment.Queries);
  // 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 =
@@ -49,6 +50,7 @@ export class EntityExplorer {
  public locator = ObjectsRegistry.CommonLocators;
  private modifierKey = Cypress.platform === "darwin" ? "meta" : "ctrl";
  private assertHelper = ObjectsRegistry.AssertHelper;
+ private addView = new AddView();
 
  public _contextMenu = (entityNameinLeftSidebar: string) =>
  "//div[text()='" +
@@ -247,8 +249,8 @@ 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);
+ let overlayItem = this.addView.getCreateOptions(dsName);
+ overlayItem.click({ force: true });
  }
 
  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,16 +14,16 @@ 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 getCreateOptions(name: string): Cypress.Chainable {
+ return cy.get(this.locators.createOption(name));
  }
 }
 

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 {
@@ -112,12 +114,20 @@ export class LeftPane {
  this.addView.assertInAddView();
  }
 
- public closeAddView() {
- this.addView.closeAddView();
+ public closeAddView(segment: PagePaneSegment) {
+ if (!this.segments) {
+ throw Error("No Segments configured");
+ }
+ cy.log(segment, "===Albin");
+ if (segment === PagePaneSegment.UI) {
+ this.addView.closeAddView();
+ } else {
+ FileTabs.closeTab("new");
+ }
  }
 
- public getCreateOptions() {
- return this.addView.getCreateOptions();
+ public getCreateOptions(name: string) {
+ return this.addView.getCreateOptions(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

@@ -32,28 +32,28 @@ export const useJSAdd = () => {
  (opt) => opt.focusEntityType === FocusEntity.JS_MODULE_INSTANCE,
  );
 
- return useCallback(() => {
- if (jsModuleCreationOptions.length === 0) {
- if (segmentMode === EditorEntityTabState.Add) {
- const url = getJSUrl(currentEntityInfo, false);
- history.push(url);
+ return useCallback(
+ (add: boolean) => {
+ if (jsModuleCreationOptions.length === 0) {
+ if (segmentMode === EditorEntityTabState.Add) {
+ const url = getJSUrl(currentEntityInfo, false);
+ history.push(url);
+ } else {
+ dispatch(createNewJSCollection(pageId, "ENTITY_EXPLORER"));
+ }
  } else {
- dispatch(createNewJSCollection(pageId, "ENTITY_EXPLORER"));
+ if (currentEntityInfo.entity === FocusEntity.JS_OBJECT_ADD && add) {
+ return;
+ }
+ const url = getJSUrl(
+ currentEntityInfo,
+ !(segmentMode === EditorEntityTabState.Add),
+ );
+ history.push(url);
  }
- } else {
- const url = getJSUrl(
- currentEntityInfo,
- !(segmentMode === EditorEntityTabState.Add),
- );
- history.push(url);
- }
- }, [
- dispatch,
- pageId,
- segmentMode,
- currentEntityInfo,
- jsModuleCreationOptions,
- ]);
+ },
+ [dispatch, pageId, segmentMode, currentEntityInfo, jsModuleCreationOptions],
+ );
 };
 
 export const useIsJSAddLoading = () => {
@@ -111,17 +111,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,35 +27,35 @@ 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);
- }
- history.push(url);
- }, [currentEntityInfo, segmentMode]);
+ const addButtonClickHandler = useCallback(
+ (add: boolean) => {
+ // if already in add mode, don call url function
+ // same for if not in add mode
+ if (currentEntityInfo.entity === FocusEntity.QUERY_ADD && add) {
+ return;
+ }
+ const url = getQueryUrl(currentEntityInfo, add);
+ history.push(url);
+ },
+ [currentEntityInfo, segmentMode],
+ );
 
  return addButtonClickHandler;
 };
@@ -166,17 +166,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 +196,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(true);
  });
 
  expect(mockDispatchFn).toBeCalledWith({
@@ -66,7 +66,7 @@ describe("JS Segment", () => {
 
  // Call the function now from a different page
  act(() => {
- result.current();
+ result.current(true);
  });
 
  // Now the creation action should have the new page id