Name of a newly created api and query is focused on mount. (#21)

* New api and query has name in edit mode

* Curl import new api.

* Changing createApi command for new ui.

* Edit Api name is not visible in UI.

* Removed edit api name click.

Co-authored-by: Satbir Singh <satbir@appsmith.com>
Co-authored-by: Arpit Mohan <me@arpitmohan.com>
Co-authored-by: Satbir Singh <apple@apples-MacBook-Pro.local>

app/client/cypress/support/commands.js

@@ -188,7 +188,7 @@ Cypress.Commands.add("CreateAPI", apiname => {
   //cy.WaitAutoSave();
   // Added because api name edit takes some time to
   // reflect in api sidebar after the call passes.
-  cy.wait(4000);
+  cy.wait(2000);
 });
 
 Cypress.Commands.add("CreateSubsequentAPI", apiname => {
@@ -385,7 +385,6 @@ Cypress.Commands.add("CreationOfUniqueAPIcheck", apiname => {
   cy.wait("@createNewApi");
   // cy.wait("@getUser");
   cy.get(apiwidget.resourceUrl).should("be.visible");
-  cy.get(apiwidget.EditApiName).click();
   cy.get(apiwidget.apiTxt)
     .clear()
     .type(apiname)
@@ -1156,7 +1155,7 @@ Cypress.Commands.add("startServerAndRoutes", () => {
   cy.route("DELETE", "/api/v1/datasources/*").as("deleteDatasource");
   cy.route("DELETE", "/api/v1/applications/*").as("deleteApplication");
 
-  cy.route("PUT", "/api/v1/actions/*").as("saveQuery");
+  cy.route("PUT", "/api/v1/actions/*").as("saveAction");
 });
 
 Cypress.Commands.add("alertValidate", text => {

app/client/src/actions/apiPaneActions.ts

@@ -1,9 +1,12 @@
 import { ReduxAction, ReduxActionTypes } from "constants/ReduxActionConstants";
 
-export const changeApi = (id: string): ReduxAction<{ id: string }> => {
+export const changeApi = (
+  id: string,
+  newApi?: boolean,
+): ReduxAction<{ id: string; newApi?: boolean }> => {
   return {
     type: ReduxActionTypes.API_PANE_CHANGE_API,
-    payload: { id },
+    payload: { id, newApi },
   };
 };
 

app/client/src/components/editorComponents/ActionNameEditor.tsx

@@ -30,6 +30,8 @@ const ApiNameWrapper = styled.div`
 
 export const ActionNameEditor = () => {
   const params = useParams<{ apiId?: string; queryId?: string }>();
+  const isNew =
+    new URLSearchParams(window.location.search).get("new") === "true";
   const [forceUpdate, setForceUpdate] = useState(false);
   const dispatch = useDispatch();
   if (!params.apiId && !params.queryId) {
@@ -118,6 +120,7 @@ export const ActionNameEditor = () => {
           onTextChanged={handleAPINameChange}
           isInvalid={isInvalidActionName}
           valueTransform={convertToCamelCase}
+          isEditingDefault={isNew}
           updating={saveStatus.isSaving}
           editInteractionKind={EditInteractionKind.SINGLE}
         />

app/client/src/constants/routes.ts

@@ -81,13 +81,24 @@ export const QUERIES_EDITOR_ID_URL = (
   applicationId = ":applicationId",
   pageId = ":pageId",
   queryId = ":queryId",
-): string => `${QUERIES_EDITOR_URL(applicationId, pageId)}/${queryId}`;
+  params = {},
+): string => {
+  const queryparams = convertToQueryParams(params);
+  return `${QUERIES_EDITOR_URL(
+    applicationId,
+    pageId,
+  )}/${queryId}${queryparams}`;
+};
 
 export const API_EDITOR_ID_URL = (
   applicationId = ":applicationId",
   pageId = ":pageId",
   apiId = ":apiId",
-): string => `${API_EDITOR_URL(applicationId, pageId)}/${apiId}`;
+  params = {},
+): string => {
+  const queryParams = convertToQueryParams(params);
+  return `${API_EDITOR_URL(applicationId, pageId)}/${apiId}${queryParams}`;
+};
 
 export const API_EDITOR_URL_WITH_SELECTED_PAGE_ID = (
   applicationId = ":applicationId",

app/client/src/pages/Editor/QueryEditor/Form.tsx

@@ -252,7 +252,7 @@ const QueryEditorForm: React.FC<Props> = (props: Props) => {
   const [showTemplateMenu, setMenuVisibility] = useState(true);
 
   const isSQL = selectedPluginPackage === PLUGIN_PACKAGE_POSTGRES;
-  const isNewQuery = props.location.state?.newQuery ?? false;
+  const isNewQuery = props.location.state?.new ?? false;
   let queryOutput: {
     body: Record<string, any>[];
   } = { body: [] };

app/client/src/sagas/ApiPaneSagas.ts

@@ -187,8 +187,11 @@ function* initializeExtraFormDataSaga() {
   }
 }
 
-function* changeApiSaga(actionPayload: ReduxAction<{ id: string }>) {
+function* changeApiSaga(
+  actionPayload: ReduxAction<{ id: string; newApi?: boolean }>,
+) {
   const { id } = actionPayload.payload;
+  const { newApi } = actionPayload.payload;
   // Typescript says Element does not have blur function but it does;
   document.activeElement &&
     "blur" in document.activeElement &&
@@ -205,7 +208,14 @@ function* changeApiSaga(actionPayload: ReduxAction<{ id: string }>) {
   if (!action) return;
 
   yield put(initialize(API_EDITOR_FORM_NAME, action));
-  history.push(API_EDITOR_ID_URL(applicationId, pageId, id));
+  history.push(
+    API_EDITOR_ID_URL(
+      applicationId,
+      pageId,
+      id,
+      newApi ? { new: "true" } : undefined,
+    ),
+  );
 
   yield call(initializeExtraFormDataSaga);
 
@@ -333,7 +343,11 @@ function* handleActionCreatedSaga(actionPayload: ReduxAction<RestAction>) {
     yield put(initialize(API_EDITOR_FORM_NAME, _.omit(data, "name")));
     const applicationId = yield select(getCurrentApplicationId);
     const pageId = yield select(getCurrentPageId);
-    history.push(API_EDITOR_ID_URL(applicationId, pageId, id));
+    history.push(
+      API_EDITOR_ID_URL(applicationId, pageId, id, {
+        new: "true",
+      }),
+    );
   }
 }
 

app/client/src/sagas/CurlImportSagas.ts

@@ -54,7 +54,7 @@ export function* curlImportSaga(action: ReduxAction<CurlImportRequest>) {
         payload: response.data,
       });
 
-      yield put(changeApi(data.id));
+      yield put(changeApi(data.id, true));
     }
   } catch (error) {
     yield put({

app/client/src/sagas/QueryPaneSagas.ts

@@ -157,9 +157,11 @@ function* handleQueryCreatedSaga(actionPayload: ReduxAction<RestAction>) {
     yield put(initialize(QUERY_EDITOR_FORM_NAME, data));
     const applicationId = yield select(getCurrentApplicationId);
     const pageId = yield select(getCurrentPageId);
-    history.replace(QUERIES_EDITOR_ID_URL(applicationId, pageId, id), {
-      newQuery: true,
-    });
+    history.replace(
+      QUERIES_EDITOR_ID_URL(applicationId, pageId, id, {
+        new: true,
+      }),
+    );
   }
 }