chore: highlight name input field for newly created js objects (#13212)

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

@@ -45,6 +45,16 @@ export class JSEditor {
       .click({ force: true });
     cy.get(this._newJSobj).click({ force: true });
 
+    // Assert that the name of the JS Object is focused when newly created
+    cy.get(this._jsObjTxt)
+      .should("be.focused")
+      .type("{enter}");
+
+    cy.wait(1000);
+
+    // Assert that the name of the JS Object is no longer in the editable form after pressing "enter"
+    cy.get(this._jsObjTxt).should("not.exist");
+
     //cy.waitUntil(() => cy.get(this.locator._toastMsg).should('not.be.visible')) // fails sometimes
     //this.agHelper.WaitUntilEleDisappear(this.locator._toastMsg, 'created successfully')
     this.agHelper.Sleep();

app/client/src/components/utils/NameEditorComponent.tsx

@@ -10,12 +10,14 @@ import { toggleShowDeviationDialog } from "actions/onboardingActions";
 import {
   getUsedActionNames,
   getSavingStatusForActionName,
+  getSavingStatusForJSObjectName,
 } from "selectors/actionSelectors";
 import {
   ACTION_INVALID_NAME_ERROR,
   ACTION_NAME_CONFLICT_ERROR,
   createMessage,
 } from "@appsmith/constants/messages";
+import { PluginType } from "entities/Action";
 
 type NameEditorProps = {
   checkForGuidedTour?: boolean;
@@ -23,6 +25,7 @@ type NameEditorProps = {
   currentActionConfig: { id: string; name: string } | undefined;
   dispatchAction: (a: any) => any;
   suffixErrorMessage?: (params?: any) => string;
+  pluginType?: PluginType;
 };
 
 /**
@@ -44,7 +47,13 @@ function NameEditor(props: NameEditorProps) {
   const [forceUpdate, setForceUpdate] = useState(false);
   const dispatch = useDispatch();
   if (!currentActionConfig?.id) {
-    log.error("No correct API id or Query id found in the url.");
+    log.error(
+      `No correct ${
+        props.pluginType === PluginType.JS
+          ? "JSObject Id"
+          : "API id or Query id"
+      } found in the url.`,
+    );
   }
   const guidedTourEnabled = useSelector(inGuidedTour);
 
@@ -52,7 +61,9 @@ function NameEditor(props: NameEditorProps) {
     isSaving: boolean;
     error: boolean;
   } = useSelector((state: AppState) =>
-    getSavingStatusForActionName(state, currentActionConfig?.id || ""),
+    props.pluginType === PluginType.JS
+      ? getSavingStatusForJSObjectName(state, currentActionConfig?.id || "")
+      : getSavingStatusForActionName(state, currentActionConfig?.id || ""),
   );
 
   const conflictingNames = useSelector(

app/client/src/pages/Editor/JSEditor/JSObjectNameEditor.tsx

@@ -19,6 +19,7 @@ import {
   ACTION_NAME_PLACEHOLDER,
   createMessage,
 } from "@appsmith/constants/messages";
+import { PluginType } from "entities/Action";
 
 const JSObjectNameWrapper = styled.div<{ page?: string }>`
   min-width: 50%;
@@ -67,6 +68,7 @@ export function JSObjectNameEditor(props: ActionNameEditorProps) {
     <NameEditorComponent
       currentActionConfig={currentJSObjectConfig}
       dispatchAction={saveJSObjectName}
+      pluginType={PluginType.JS}
     >
       {({
         forceUpdate,

app/client/src/sagas/JSPaneSagas.ts

@@ -123,7 +123,9 @@ function* handleJSCollectionCreatedSaga(
   history.push(
     jsCollectionIdURL({
       collectionId: id,
-      params: {},
+      params: {
+        editName: true,
+      },
     }),
   );
 }

app/client/src/selectors/actionSelectors.tsx

@@ -4,7 +4,12 @@ import WidgetFactory from "utils/WidgetFactory";
 import { FlattenedWidgetProps } from "widgets/constants";
 import { getDataTree } from "./dataTreeSelectors";
 import { getExistingPageNames } from "./entitiesSelector";
-import { getErrorForApiName, getIsSavingForApiName } from "./ui";
+import {
+  getErrorForApiName,
+  getErrorForJSObjectName,
+  getIsSavingForApiName,
+  getIsSavingForJSObjectName,
+} from "./ui";
 import { getParentWidget } from "./widgetSelectors";
 
 /**
@@ -50,3 +55,12 @@ export const getSavingStatusForActionName = createSelector(
     error,
   }),
 );
+
+export const getSavingStatusForJSObjectName = createSelector(
+  getIsSavingForJSObjectName,
+  getErrorForJSObjectName,
+  (isSaving: boolean, error: boolean) => ({
+    isSaving,
+    error,
+  }),
+);

app/client/src/selectors/ui.tsx

@@ -17,3 +17,15 @@ export const getIsSavingForApiName = (state: AppState, id: string) =>
  */
 export const getErrorForApiName = (state: AppState, id: string) =>
   state.ui.apiName.errors[id];
+
+/**
+ * Selector to use id and provide the status of saving a JS Object.
+ */
+export const getIsSavingForJSObjectName = (state: AppState, id: string) =>
+  state.ui.jsObjectName.isSaving[id];
+
+/**
+ * Selector to use id and provide the status of error in a JS Object.
+ */
+export const getErrorForJSObjectName = (state: AppState, id: string) =>
+  state.ui.jsObjectName.errors[id];