Add option to create a field after creating a class #1726 (#1728)

* combined create class flow

* config revert

* reformating -- 1

* reset forms after submitting

* Improve feed back for add column dialog

* improve add column dialog -- 2

* reverting isDisabled

* mergeconflicts resolve 2

* required column changes

* required col in addAndContinue

* removed index.html

Co-authored-by: Faisal Nadeem <mfaisalnadeem@hotmail.com>

Author: fn-faisal

Parse-Dashboard/parse-dashboard-config.json

@@ -11,4 +11,4 @@
     }
   ],
   "iconsFolder": "icons"
-}
+}

src/components/Modal/Modal.react.js

@@ -39,6 +39,9 @@ let Modal = (({
   customFooter,
   textModal = false,
   width,
+  continueText,
+  onContinue,
+  showContinue,
   buttonsInCenter = React.Children.count(children) === 0,
 }) => {
   if (children) {
@@ -63,6 +66,15 @@ let Modal = (({
         disabled={!!disabled}
         onClick={onConfirm}
         progress={progress} />
+      {
+      showContinue === true ?
+      <Button
+        primary={true}
+        value={continueText}
+        color={buttonColors[type]}
+        disabled={!!disabled}
+        onClick={onContinue}
+        progress={progress} />: null}
     </div>
   );
 

src/dashboard/Data/Browser/AddColumnDialog.react.js

@@ -206,6 +206,11 @@ export default class AddColumnDialog extends React.Component {
         confirmText='Add column'
         cancelText={'Never mind, don\u2019t.'}
         onCancel={this.props.onCancel}
+        continueText={'Add column & continue'}
+        showContinue={true}
+        onContinue={() => {
+          this.props.onContinue(this.state);
+        }}
         onConfirm={() => {
           this.props.onConfirm(this.state);
         }}>
@@ -246,4 +251,4 @@ export default class AddColumnDialog extends React.Component {
       </Modal>
     );
   }
-}
+}

src/dashboard/Data/Browser/Browser.react.js

@@ -79,6 +79,7 @@ class Browser extends DashboardView {
 
       isUnique: false,
       uniqueField: null,
+      keepAddingCols: false,
       markRequiredField: false,
       requiredColumnFields: []
     };
@@ -117,6 +118,7 @@ class Browser extends DashboardView {
     this.showCreateClass = this.showCreateClass.bind(this);
     this.createClass = this.createClass.bind(this);
     this.addColumn = this.addColumn.bind(this);
+    this.addColumnAndContinue = this.addColumnAndContinue.bind(this);
     this.removeColumn = this.removeColumn.bind(this);
     this.showNote = this.showNote.bind(this);
     this.showEditRowDialog = this.showEditRowDialog.bind(this);
@@ -274,6 +276,21 @@ class Browser extends DashboardView {
     });
   }
 
+  newColumn(payload, required) {
+    return this.props.schema.dispatch(ActionTypes.ADD_COLUMN, payload)
+      .then(() => {
+        if (required) {
+          let requiredCols = [...this.state.requiredColumnFields, name];
+          this.setState({
+            requiredColumnFields: requiredCols
+          });
+        }
+      })
+      .catch((err) => {
+        this.showNote(err.message, true);
+      });
+  }
+
   addColumn({ type, name, target, required, defaultValue }) {
     let payload = {
       className: this.props.params.className,
@@ -283,18 +300,23 @@ class Browser extends DashboardView {
       required,
       defaultValue
     };
-    this.props.schema.dispatch(ActionTypes.ADD_COLUMN, payload).then(() => {
-      // if new required field column is added, then add field in requiredColumn
-      if (required) {
-        let requiredCols = [...this.state.requiredColumnFields, name];
-        this.setState({
-          requiredColumnFields: requiredCols
-        });
-      }
-    }).catch((err) => {
-      this.showNote(err.message, true);
-    }).finally(() => {
-      this.setState({ showAddColumnDialog: false });
+    this.newColumn(payload, required).finally(() => {
+      this.setState({ showAddColumnDialog: false, keepAddingCols: false });
+    });
+  }
+
+  addColumnAndContinue({ type, name, target, required, defaultValue }) {
+    let payload = {
+      className: this.props.params.className,
+      columnType: type,
+      name: name,
+      targetClass: target,
+      required,
+      defaultValue
+    };
+    this.newColumn(payload, required).finally(() => {
+      this.setState({ showAddColumnDialog: false, keepAddingCols: false });
+      this.setState({ showAddColumnDialog: true, keepAddingCols: true });
     });
   }
 
@@ -412,7 +434,7 @@ class Browser extends DashboardView {
           }
           this.state.counts[obj.className] += 1;
         }
-        
+
         this.setState(state);
       },
       error => {
@@ -599,7 +621,7 @@ class Browser extends DashboardView {
       // Construct complex pagination query
       let equalityQuery = queryFromFilters(source, this.state.filters);
       let comp = this.state.data[this.state.data.length - 1].get(field);
-      
+
       if (sortDir === '-') {
         query.lessThan(field, comp);
         equalityQuery.lessThan('objectId', this.state.data[this.state.data.length - 1].id);
@@ -719,7 +741,7 @@ class Browser extends DashboardView {
     } else {
       obj.set(attr, value);
     }
-    
+
     if (isNewObject) {
       // for dynamically changing required placeholder text for _User class new row object
       if (obj.className === '_User' && attr === 'authData' && value !== undefined) {
@@ -739,7 +761,7 @@ class Browser extends DashboardView {
       if (obj.className === '_User' && obj.get('username') === undefined && obj.get('password') === undefined && obj.get('authData') === undefined) {
         this.setRequiredColumnFields();
       }
-      
+
       this.setState({
         isNewObject: obj
       });
@@ -1209,6 +1231,8 @@ class Browser extends DashboardView {
     if (this.state.showCreateClassDialog) {
       extras = (
         <CreateClassDialog
+          currentAppSlug={this.context.currentApp.slug}
+          onAddColumn={this.showAddColumn}
           currentClasses={this.props.schema.data.get('classes').keySeq().toArray()}
           onCancel={() => this.setState({ showCreateClassDialog: false })}
           onConfirm={this.createClass} />
@@ -1221,10 +1245,12 @@ class Browser extends DashboardView {
       });
       extras = (
         <AddColumnDialog
+          onAddColumn={this.showAddColumn}
           currentColumns={currentColumns}
           classes={this.props.schema.data.get('classes').keySeq().toArray()}
           onCancel={() => this.setState({ showAddColumnDialog: false })}
           onConfirm={this.addColumn}
+          onContinue={this.addColumnAndContinue}
           showNote={this.showNote}
           parseServerVersion={currentApp.serverInfo && currentApp.serverInfo.parseServerVersion} />
       );

src/dashboard/Data/Browser/CreateClassDialog.react.js

@@ -13,6 +13,7 @@ import Option             from 'components/Dropdown/Option.react';
 import React              from 'react';
 import { SpecialClasses } from 'lib/Constants';
 import TextInput          from 'components/TextInput/TextInput.react';
+import history            from 'dashboard/history';
 
 function validClassName(name) {
   return !!name.match(/^[a-zA-Z][_a-zA-Z0-9]*$/);
@@ -68,7 +69,16 @@ export default class CreateClassDialog extends React.Component {
         disabled={!this.valid()}
         confirmText='Create class'
         cancelText={'Cancel'}
+        continueText={'Create class & add columns'}
         onCancel={this.props.onCancel}
+        showContinue={true}
+        onContinue={async () => {
+          let type = this.state.type;
+          let className = type === 'Custom' ? this.state.name : '_' + type;
+          await this.props.onConfirm(className);
+          history.push(`/apps/${this.props.currentAppSlug}/browser/${className}`);
+          this.props.onAddColumn();
+        }}
         onConfirm={() => {
           let type = this.state.type;
           let className = type === 'Custom' ? this.state.name : '_' + type;