Revert create new app flow to use the old flow for now (#1265)

app/client/cypress/support/commands.js

@@ -214,34 +214,28 @@ Cypress.Commands.add("CreateAppForOrg", (orgName, appname) => {
     .scrollIntoView()
     .should("be.visible")
     .click();
-  cy.wait("@createNewApplication").should(
-    "have.nested.property",
-    "response.body.responseMeta.status",
-    201,
-  );
-  cy.get(homePage.applicationName).type(appname + "{enter}");
-  cy.wait("@updateApplicationName").should(
-    "have.nested.property",
-    "response.body.responseMeta.status",
-    200,
-  );
+  cy.get(homePage.inputAppName).type(appname);
+  cy.get(homePage.CreateApp)
+    .contains("Submit")
+    .click({ force: true });
+  cy.get("#loading").should("not.exist");
 });
 
 Cypress.Commands.add("CreateApp", appname => {
   cy.get(homePage.createNew)
     .first()
     .click({ force: true });
-  cy.wait("@createNewApplication").should(
-    "have.nested.property",
-    "response.body.responseMeta.status",
-    201,
-  );
-  cy.get(homePage.applicationName).type(appname + "{enter}");
-  cy.wait("@updateApplicationName").should(
+  cy.get(homePage.inputAppName).type(appname);
+  cy.get(homePage.CreateApp)
+    .contains("Submit")
+    .click({ force: true });
+  cy.get("#loading").should("not.exist");
+  cy.wait("@getPagesForApp").should(
     "have.nested.property",
     "response.body.responseMeta.status",
     200,
   );
+  cy.get("h2").contains("Drag and drop a widget here");
 });
 
 Cypress.Commands.add("DeleteApp", appName => {

app/client/cypress/support/index.js

@@ -46,7 +46,6 @@ before(function() {
   cy.generateUUID().then(id => {
     appId = id;
     cy.CreateApp(id);
-    cy.EditApp(id);
     localStorage.setItem("AppName", appId);
   });
 

app/client/src/components/editorComponents/form/FormDialogComponent.tsx

@@ -74,7 +74,11 @@ export const FormDialogComponent = (props: FormDialogComponentProps) => {
 
   return (
     <React.Fragment>
-      <TriggerWrapper onClick={() => setIsOpen(true)}>
+      <TriggerWrapper
+        onClick={() => {
+          setIsOpen(true);
+        }}
+      >
         {props.trigger}
       </TriggerWrapper>
 

app/client/src/pages/Applications/ApplicationCard.tsx

@@ -248,18 +248,12 @@ export const ApplicationCard = (props: ApplicationCardProps) => {
   const [selectedColor, setSelectedColor] = useState<string>(colorCode);
   const [moreActionItems, setMoreActionItems] = useState<MenuItemProps[]>([]);
   const [isMenuOpen, setIsMenuOpen] = useState(false);
-  const [isNewCard, setIsNewCard] = useState(false);
   const [lastUpdatedValue, setLastUpdatedValue] = useState("");
   const menuIconRef = createRef<HTMLSpanElement>();
 
   useEffect(() => {
     setSelectedColor(colorCode);
   }, [colorCode]);
-  useEffect(() => {
-    if (isNewCard && menuIconRef.current) {
-      menuIconRef.current.click();
-    }
-  }, [isNewCard]);
   useEffect(() => {
     if (props.share) {
       moreActionItems.push({
@@ -283,7 +277,6 @@ export const ApplicationCard = (props: ApplicationCardProps) => {
   }, []);
   useEffect(() => {
     if (props.activeAppCard) {
-      setIsNewCard(true);
       setShowOverlay(true);
     }
   }, [props.activeAppCard]);
@@ -380,7 +373,6 @@ export const ApplicationCard = (props: ApplicationCardProps) => {
         onClosing={() => {
           setIsMenuOpen(false);
           setShowOverlay(false);
-          setIsNewCard(false);
           addDeleteOption();
           if (lastUpdatedValue && props.application.name !== lastUpdatedValue) {
             props.update &&
@@ -392,7 +384,6 @@ export const ApplicationCard = (props: ApplicationCardProps) => {
       >
         {hasEditPermission && (
           <EditableText
-            isEditingDefault={isNewCard}
             defaultValue={props.application.name}
             editInteractionKind={EditInteractionKind.SINGLE}
             onTextChanged={(value: string) => {
@@ -413,7 +404,6 @@ export const ApplicationCard = (props: ApplicationCardProps) => {
             }
             fill={true}
             onBlur={(value: string) => {
-              setIsNewCard(false);
               props.update &&
                 props.update(props.application.id, {
                   name: value,

app/client/src/pages/Applications/CreateApplicationForm.tsx

@@ -36,7 +36,7 @@ const validate = (values: CreateApplicationFormValues) => {
 
 // TODO(abhinav): abstract onCancel out.
 
-export const CreateApplicationForm = (props: Props) => {
+const CreateApplicationForm = (props: Props) => {
   const { error, handleSubmit, pristine, submitting, invalid } = props;
   return (
     <Form onSubmit={handleSubmit(createApplicationFormSubmitHandler)}>

app/client/src/pages/Applications/index.tsx

@@ -28,7 +28,10 @@ import FormDialogComponent from "components/editorComponents/form/FormDialogComp
 import { User } from "constants/userConstants";
 import { getCurrentUser } from "selectors/usersSelectors";
 import CreateOrganizationForm from "pages/organization/CreateOrganizationForm";
-import { CREATE_ORGANIZATION_FORM_NAME } from "constants/forms";
+import {
+  CREATE_ORGANIZATION_FORM_NAME,
+  CREATE_APPLICATION_FORM_NAME,
+} from "constants/forms";
 import {
   getOnSelectAction,
   DropdownOnSelectActions,
@@ -49,8 +52,8 @@ import { UpdateApplicationPayload } from "api/ApplicationApi";
 import PerformanceTracker, {
   PerformanceTransactionName,
 } from "utils/PerformanceTracker";
-import { getNextEntityName } from "utils/AppsmithUtils";
-import { AppLoader, loadingUserOrgs } from "./ApplicationLoaders";
+import { loadingUserOrgs } from "./ApplicationLoaders";
+import CreateApplicationForm from "./CreateApplicationForm";
 import { creatingApplicationMap } from "reducers/uiReducers/applicationsReducer";
 import CenteredWrapper from "../../components/designSystems/appsmith/CenteredWrapper";
 import NoSearchImage from "../../assets/images/NoSearchResult.svg";
@@ -342,6 +345,18 @@ ${props => {
 }
 `;
 
+const AddApplicationCard = (
+  <ApplicationAddCardWrapper>
+    <Icon
+      className="t--create-app-popup"
+      name={"plus"}
+      size={IconSize.LARGE}
+    ></Icon>
+    <CreateNewLabel type={TextType.H4} className="createnew">
+      Create New
+    </CreateNewLabel>
+  </ApplicationAddCardWrapper>
+);
 const NoSearchResultImg = styled.img`
   margin: 1em;
 `;
@@ -525,30 +540,14 @@ const ApplicationsSection = (props: any) => {
               ) &&
                 !isFetchingApplications && (
                   <PaddingWrapper>
-                    <ApplicationAddCardWrapper
-                      onClick={() =>
-                        createNewApplication(
-                          getNextEntityName(
-                            "New App",
-                            applications.map((el: any) => el.name),
-                          ),
-                          organization.id,
-                        )
-                      }
-                    >
-                      <Icon
-                        className="t--create-app-popup"
-                        name={"plus"}
-                        size={IconSize.LARGE}
-                      ></Icon>
-                      <CreateNewLabel
-                        type={TextType.H4}
-                        className="createnew"
-                        // cypressSelector={"t--create-new-app"}
-                      >
-                        Create New
-                      </CreateNewLabel>
-                    </ApplicationAddCardWrapper>
+                    <FormDialogComponent
+                      permissions={organization.userPermissions}
+                      permissionRequired={PERMISSION_TYPE.CREATE_APPLICATION}
+                      trigger={AddApplicationCard}
+                      Form={CreateApplicationForm}
+                      orgId={organization.id}
+                      title={CREATE_APPLICATION_FORM_NAME}
+                    />
                   </PaddingWrapper>
                 )}
               {applications.map((application: any) => {
@@ -572,10 +571,6 @@ const ApplicationsSection = (props: any) => {
                   )
                 );
               })}
-              {creatingApplicationMap &&
-              creatingApplicationMap[organization.id] ? (
-                <AppLoader />
-              ) : null}
               <PageSectionDivider />
             </ApplicationCardsWrapper>
           </OrgSection>

app/client/src/pages/Editor/Explorer/Actions/ActionEntityContextMenu.tsx

@@ -108,15 +108,18 @@ export const ActionEntityContextMenu = (props: EntityContextMenuProps) => {
           value: "move",
           onSelect: noop,
           label: "Move to page",
-          children: menuPages.length > 1 ?
-            menuPages
-              .filter(page => page.id !== props.pageId) // Remove current page from the list
-              .map(page => {
-                return {
-                  ...page,
-                  onSelect: () => moveActionToPage(props.id, props.name, page.id),
-                };
-              }) : [{ value: "No Pages", onSelect: noop, label: "No Pages" }]
+          children:
+            menuPages.length > 1
+              ? menuPages
+                  .filter(page => page.id !== props.pageId) // Remove current page from the list
+                  .map(page => {
+                    return {
+                      ...page,
+                      onSelect: () =>
+                        moveActionToPage(props.id, props.name, page.id),
+                    };
+                  })
+              : [{ value: "No Pages", onSelect: noop, label: "No Pages" }],
         },
         {
           value: "delete",

app/client/src/sagas/ApplicationSagas.tsx

@@ -312,9 +312,11 @@ export function* createApplicationSaga(
   action: ReduxAction<{
     applicationName: string;
     orgId: string;
+    resolve: any;
+    reject: any;
   }>,
 ) {
-  const { applicationName, orgId } = action.payload;
+  const { applicationName, orgId, resolve, reject } = action.payload;
   try {
     const userOrgs = yield select(getUserApplicationsOrgsList);
     const existingOrgs = userOrgs.filter(
@@ -327,6 +329,9 @@ export function* createApplicationSaga(
         )
       : null;
     if (existingApplication) {
+      yield call(reject, {
+        _error: "An application with this name already exists",
+      });
       yield put({
         type: ReduxActionErrorTypes.CREATE_APPLICATION_ERROR,
         payload: {
@@ -360,6 +365,11 @@ export function* createApplicationSaga(
             application,
           },
         });
+        const pageURL = BUILDER_PAGE_URL(
+          application.id,
+          application.defaultPageId,
+        );
+        history.push(pageURL);
       }
     }
   } catch (error) {