fix: correct component for Query Add States (#30752)

fixes the issue of add states not showing up correctly for Api and Saas
routes in Query tab

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Enhanced URL construction for SaaS editor API to support additional
view options.
- Improved query handling in the Editor Pane to recognize and construct
URLs for new query types.
- **Refactor**
	- Updated internal logic for constructing SaaS editor API URLs.
- Refined query type determination logic based on entity focus
parameters.
- **Style**
- Adjusted SaaS editor path constants to include an additional API
segment.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

app/client/src/ce/RouteBuilder.ts

@@ -116,14 +116,17 @@ export const saasEditorDatasourceIdURL = (
   });
 
 export const saasEditorApiIdURL = (
-  props: URLBuilderParams & {
-    pluginPackageName: string;
-    apiId: string;
-  },
+  props: URLBuilderParams &
+    WithAddView & {
+      pluginPackageName: string;
+      apiId: string;
+    },
 ): string =>
   urlBuilder.build({
     ...props,
-    suffix: `saas/${props.pluginPackageName}/api/${props.apiId}`,
+    suffix: `saas/${props.pluginPackageName}/api/${props.apiId}${
+      props.add ? ADD_PATH : ""
+    }`,
   });
 
 export const generateTemplateFormURL = (props: URLBuilderParams): string =>

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

@@ -9,6 +9,7 @@ import {
   apiEditorIdURL,
   queryAddURL,
   queryEditorIdURL,
+  saasEditorApiIdURL,
 } from "@appsmith/RouteBuilder";
 import { useSelector } from "react-redux";
 import { useFilteredFileOperations } from "components/editorComponents/GlobalSearch/GlobalSearchHooks";
@@ -19,6 +20,7 @@ import { getHasCreateActionPermission } from "@appsmith/utils/BusinessFeatures/p
 import type { ActionOperation } from "components/editorComponents/GlobalSearch/utils";
 import { SEARCH_ITEM_TYPES } from "components/editorComponents/GlobalSearch/utils";
 import { createMessage, EDITOR_PANE_TEXTS } from "@appsmith/constants/messages";
+import { getQueryType, QueryType } from "./utils";
 
 export const useQueryAdd = () => {
   const location = useLocation();
@@ -28,13 +30,21 @@ export const useQueryAdd = () => {
   const addButtonClickHandler = useCallback(() => {
     let url = queryAddURL({});
     if (segmentMode === EditorEntityTabState.Edit) {
-      switch (currentEntityInfo.entity) {
-        case FocusEntity.QUERY:
+      switch (getQueryType(currentEntityInfo)) {
+        case QueryType.QUERY:
           url = queryEditorIdURL({ queryId: currentEntityInfo.id, add: true });
           break;
-        case FocusEntity.API:
+        case QueryType.API:
           url = apiEditorIdURL({ apiId: currentEntityInfo.id, add: true });
           break;
+        case QueryType.SAAS:
+          if (currentEntityInfo.params.pluginPackageName) {
+            url = saasEditorApiIdURL({
+              apiId: currentEntityInfo.id,
+              pluginPackageName: currentEntityInfo.params.pluginPackageName,
+              add: true,
+            });
+          }
       }
     }
     history.push(url);

app/client/src/ce/pages/Editor/IDE/EditorPane/Query/utils.ts

@@ -1,5 +1,6 @@
 import type { EntityItem } from "@appsmith/entities/IDE/constants";
 import { getActionConfig } from "pages/Editor/Explorer/Actions/helpers";
+import type { FocusEntityInfo } from "navigation/FocusEntity";
 
 export const getQueryEntityItemUrl = (
   item: EntityItem,
@@ -11,3 +12,21 @@ export const getQueryEntityItemUrl = (
   }
   return config.getURL(pageId, item.key, item.type);
 };
+
+export enum QueryType {
+  API = "API",
+  SAAS = "SAAS",
+  QUERY = "QUERY",
+}
+
+export const getQueryType = (item: FocusEntityInfo): QueryType | undefined => {
+  if (item.params.apiId) {
+    if (item.params.pluginPackageName) {
+      return QueryType.SAAS;
+    } else {
+      return QueryType.API;
+    }
+  } else if (item.params.queryId) {
+    return QueryType.QUERY;
+  }
+};

app/client/src/ce/pages/Editor/IDE/EditorPane/constants.ts

@@ -10,7 +10,7 @@ import { SAAS_EDITOR_PATH } from "pages/Editor/SaaSEditor/constants";
 export const querySegmentRoutes = [
   CURL_IMPORT_PAGE_PATH,
   API_EDITOR_BASE_PATH,
-  SAAS_EDITOR_PATH,
+  `${SAAS_EDITOR_PATH}/api`,
   QUERIES_EDITOR_BASE_PATH,
 ];