feat: New tab ui changes

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

@@ -2320,9 +2320,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

@@ -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";
@@ -37,7 +37,7 @@ 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";
 
@@ -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}`],
     },
   ];
 };
@@ -212,7 +206,11 @@ export const useAddQueryListItems = () => {
           fileOperation.entityExplorerTitle ||
           fileOperation.dsName ||
           fileOperation.title,
-        description: !!fileOperation.isBeta ? "Beta" : "",
+        description: !!fileOperation.isBeta ? (
+          <Tag isClosable={false}>Beta</Tag>
+        ) : (
+          ""
+        ),
         descriptionType: "inline",
         onClick: onCreateItemClick.bind(null, fileOperation),
       } as ListItemProps;

app/client/src/ce/pages/Editor/IDE/MainPane/useRoutes.ts

@@ -46,6 +46,8 @@ import { QueriesBlankState } from "pages/Editor/QueryEditor/QueriesBlankState";
 import { useSelector } from "react-redux";
 import { getIDEViewMode, getIsSideBySideEnabled } from "selectors/ideSelectors";
 import { EditorViewMode } from "@appsmith/entities/IDE/constants";
+import { JSAddState } from "pages/Editor/JSEditor/JSAddState";
+import { QueriesAddState } from "pages/Editor/QueryEditor/QueriesAddState";
 
 export interface RouteReturnType extends RouteProps {
   key: string;
@@ -170,58 +172,61 @@ function useRoutes(path: string): RouteReturnType[] {
       path: `${path}${BUILDER_CHECKLIST_PATH}`,
     },
     {
-      key: "ApiEditor",
-      component: ApiEditor,
+      key: "QueryEditorAdd",
+      component: QueriesAddState,
       exact: true,
       path: [
-        `${path}${API_EDITOR_ID_PATH}`,
+        `${path}${QUERIES_EDITOR_BASE_PATH}${ADD_PATH}`,
+        `${path}${QUERIES_EDITOR_ID_ADD_PATH}`,
         `${path}${API_EDITOR_ID_ADD_PATH}`,
+        `${path}${CURL_IMPORT_PAGE_PATH}${ADD_PATH}`,
+        `${path}${SAAS_EDITOR_API_ID_ADD_PATH}`,
       ],
     },
+    {
+      key: "ApiEditor",
+      component: ApiEditor,
+      exact: true,
+      path: [`${path}${API_EDITOR_ID_PATH}`],
+    },
     {
       key: "QueryEditorList",
       component: QueriesBlankState,
       exact: true,
-      path: [
-        `${path}${QUERIES_EDITOR_BASE_PATH}`,
-        `${path}${QUERIES_EDITOR_BASE_PATH}${ADD_PATH}`,
-      ],
+      path: [`${path}${QUERIES_EDITOR_BASE_PATH}`],
     },
     {
       key: "QueryEditor",
       component: QueryEditor,
       exact: true,
+      path: [`${path}${QUERIES_EDITOR_ID_PATH}`],
+    },
+    {
+      key: "JSEditorAdd",
+      component: JSAddState,
+      exact: true,
       path: [
-        `${path}${QUERIES_EDITOR_ID_PATH}`,
-        `${path}${QUERIES_EDITOR_ID_ADD_PATH}`,
+        `${path}${JS_COLLECTION_EDITOR_PATH}${ADD_PATH}`,
+        `${path}${JS_COLLECTION_ID_PATH}${ADD_PATH}`,
       ],
     },
     {
       key: "JSEditorList",
       component: JSBlankState,
       exact: true,
-      path: [
-        `${path}${JS_COLLECTION_EDITOR_PATH}`,
-        `${path}${JS_COLLECTION_EDITOR_PATH}${ADD_PATH}`,
-      ],
+      path: [`${path}${JS_COLLECTION_EDITOR_PATH}`],
     },
     {
       key: "JSEditor File",
       component: JSEditor,
       exact: true,
-      path: [
-        `${path}${JS_COLLECTION_ID_PATH}`,
-        `${path}${JS_COLLECTION_ID_PATH}${ADD_PATH}`,
-      ],
+      path: [`${path}${JS_COLLECTION_ID_PATH}`],
     },
     {
       key: "CurlImportEditor",
       component: CurlImportEditor,
       exact: true,
-      path: [
-        `${path}${CURL_IMPORT_PAGE_PATH}`,
-        `${path}${CURL_IMPORT_PAGE_PATH}${ADD_PATH}`,
-      ],
+      path: [`${path}${CURL_IMPORT_PAGE_PATH}`],
     },
     {
       key: "SAASList",
@@ -239,10 +244,7 @@ function useRoutes(path: string): RouteReturnType[] {
       key: "SAASEditor",
       component: QueryEditor,
       exact: true,
-      path: [
-        `${path}${SAAS_EDITOR_API_ID_PATH}`,
-        `${path}${SAAS_EDITOR_API_ID_ADD_PATH}`,
-      ],
+      path: [`${path}${SAAS_EDITOR_API_ID_PATH}`],
     },
     {
       key: "DatasourceEditor",

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

@@ -2,7 +2,7 @@ import React, { useCallback } from "react";
 import SegmentAddHeader from "../components/SegmentAddHeader";
 import { EDITOR_PANE_TEXTS } from "@appsmith/constants/messages";
 import type { ListItemProps } from "design-system";
-import { Flex } from "design-system";
+import { Flex, Tag } from "design-system";
 import { useDispatch, useSelector } from "react-redux";
 import { getCurrentPageId } from "selectors/editorSelectors";
 import GroupedList from "../components/GroupedList";
@@ -11,8 +11,9 @@ import {
   useJSAdd,
 } from "@appsmith/pages/Editor/IDE/EditorPane/JS/hooks";
 import type { ActionOperation } from "components/editorComponents/GlobalSearch/utils";
+import type { AddProps } from "../types/AddProps";
 
-const AddJS = () => {
+const AddJS = ({ containerProps, innerContainerProps }: AddProps) => {
   const dispatch = useDispatch();
   const pageId = useSelector(getCurrentPageId);
   const closeButtonClickHandler = useJSAdd();
@@ -32,29 +33,38 @@ const AddJS = () => {
     return {
       startIcon: data.icon,
       title: data.entityExplorerTitle || data.title,
-      description: !!data.isBeta ? "Beta" : "",
+      description: !!data.isBeta ? <Tag isClosable={false}>Beta</Tag> : "",
       descriptionType: "inline",
       onClick: onCreateItemClick.bind(null, data),
     } as ListItemProps;
   };
 
   return (
-    <Flex flexDirection="column" gap={"spaces-4"} overflow="hidden">
-      <SegmentAddHeader
-        onCloseClick={closeButtonClickHandler}
-        titleMessage={EDITOR_PANE_TEXTS.js_create_tab_title}
-      />
-      <GroupedList
-        flexProps={{
-          pr: "spaces-2",
-          px: "spaces-3",
-        }}
-        groups={groupedJsOperations.map((op) => ({
-          groupTitle: op.title,
-          className: op.className,
-          items: op.operations.map(getListItems),
-        }))}
-      />
+    <Flex justifyContent="center" p="spaces-3" {...containerProps}>
+      <Flex
+        flexDirection="column"
+        gap={"spaces-4"}
+        overflow="hidden"
+        width="100%"
+        {...innerContainerProps}
+      >
+        <SegmentAddHeader
+          onCloseClick={closeButtonClickHandler}
+          titleMessage={EDITOR_PANE_TEXTS.js_create_tab_title}
+        />
+
+        <GroupedList
+          flexProps={{
+            pr: "spaces-2",
+            px: "spaces-3",
+          }}
+          groups={groupedJsOperations.map((op) => ({
+            groupTitle: op.title,
+            className: op.className,
+            items: op.operations.map(getListItems),
+          }))}
+        />
+      </Flex>
     </Flex>
   );
 };