Merge pull request #5660 from getsentry/ui/more-form-improvements

ui: various improvements to forms

Author: dcramer

src/sentry/static/sentry/app/components/forms/apiForm.jsx

@@ -43,13 +43,12 @@ export default class ApiForm extends Form {
           method: this.props.apiMethod,
           data: data,
           success: result => {
+            IndicatorStore.remove(loadingIndicator);
             this.onSubmitSuccess(result);
           },
           error: error => {
-            this.onSubmitError(error);
-          },
-          complete: () => {
             IndicatorStore.remove(loadingIndicator);
+            this.onSubmitError(error);
           }
         });
       }

src/sentry/static/sentry/app/components/forms/form.jsx

@@ -6,21 +6,26 @@ import {t} from '../../locale';
 
 export default class Form extends React.Component {
   static propTypes = {
+    cancelLabel: React.PropTypes.string,
+    onCancel: React.PropTypes.func,
     onSubmit: React.PropTypes.func.isRequired,
     onSubmitSuccess: React.PropTypes.func,
     onSubmitError: React.PropTypes.func,
     submitDisabled: React.PropTypes.bool,
     submitLabel: React.PropTypes.string,
     footerClass: React.PropTypes.string,
     extraButton: React.PropTypes.element,
-    initialData: React.PropTypes.object
+    initialData: React.PropTypes.object,
+    requireChanges: React.PropTypes.bool
   };
 
   static defaultProps = {
+    cancelLabel: t('Cancel'),
     submitLabel: t('Save Changes'),
     submitDisabled: false,
     footerClass: 'form-actions align-right',
-    className: 'form-stacked'
+    className: 'form-stacked',
+    requireChanges: false
   };
 
   static childContextTypes = {
@@ -88,7 +93,10 @@ export default class Form extends React.Component {
   render() {
     let isSaving = this.state.state === FormState.SAVING;
     let {initialData, data} = this.state;
-    let hasChanges = Object.keys(data).length && !underscore.isEqual(data, initialData);
+    let {requireChanges} = this.props;
+    let hasChanges = requireChanges
+      ? Object.keys(data).length && !underscore.isEqual(data, initialData)
+      : true;
     return (
       <form onSubmit={this.onSubmit} className={this.props.className}>
         {this.state.state === FormState.ERROR &&
@@ -105,6 +113,14 @@ export default class Form extends React.Component {
             type="submit">
             {this.props.submitLabel}
           </button>
+          {this.props.onCancel &&
+            <button
+              className="btn btn-default"
+              disabled={isSaving}
+              onClick={this.props.onCancel}
+              style={{marginLeft: 5}}>
+              {this.props.cancelLabel}
+            </button>}
           {this.props.extraButton}
         </div>
       </form>

src/sentry/static/sentry/app/components/forms/passwordField.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import InputField from './inputField';
-import {FormState} from './state';
+import FormState from './state';
 
 // TODO(dcramer): im not entirely sure this is working correctly with
 // value propagation in all scenarios

src/sentry/static/sentry/app/options.jsx

@@ -150,7 +150,7 @@ function optionsForSection(section) {
   return definitions.filter(option => option.key.split('.')[0] === section.key);
 }
 
-export function getOptionField(option, onChange, value, field) {
+export function getOptionField(option, field, value, onChange) {
   let meta = {...getOption(option), ...field};
   let Field = meta.component || TextField;
   return (

src/sentry/static/sentry/app/views/adminSettings.jsx

@@ -1,13 +1,10 @@
 import React from 'react';
 import _ from 'underscore';
 
-import AlertActions from '../actions/alertActions';
-import ApiMixin from '../mixins/apiMixin';
-import IndicatorStore from '../stores/indicatorStore';
-import LoadingIndicator from '../components/loadingIndicator';
+import AsyncView from './asyncView';
 import {t} from '../locale';
 import {getOption, getOptionField} from '../options';
-import {Form} from '../components/forms';
+import {ApiForm} from '../components/forms';
 
 const optionsAvailable = [
   'system.url-prefix',
@@ -21,190 +18,52 @@ const optionsAvailable = [
   'api.rate-limit.org-create'
 ];
 
-const SettingsList = React.createClass({
-  propTypes: {
-    formDisabled: React.PropTypes.bool,
-    options: React.PropTypes.object.isRequired,
-    onSubmit: React.PropTypes.func.isRequired
-  },
+export default class AdminSettings extends AsyncView {
+  getEndpoint() {
+    return '/internal/options/';
+  }
+
+  renderBody() {
+    let {data} = this.state;
 
-  getInitialState() {
-    let options = this.props.options;
-    let formData = {};
-    let required = [];
+    let initialData = {};
     let fields = {};
     for (let key of optionsAvailable) {
       // TODO(dcramer): we should not be mutating options
-      let option = options[key] || {field: {}};
+      let option = data[key] || {field: {}};
       if (_.isUndefined(option.value) || option.value === '') {
         let defn = getOption(key);
-        formData[key] = defn.defaultValue ? defn.defaultValue() : '';
+        initialData[key] = defn.defaultValue ? defn.defaultValue() : '';
       } else {
-        formData[key] = option.value;
-      }
-      if (option.field.required) {
-        required.push(key);
+        initialData[key] = option.value;
       }
-      fields[key] = getOptionField(
-        key,
-        this.onFieldChange.bind(this, key),
-        formData[key],
-        option.field
-      );
+      fields[key] = getOptionField(key, option.field);
     }
 
-    return {
-      required: required,
-      formData: formData,
-      fields: fields
-    };
-  },
-
-  onFieldChange(name, value) {
-    let formData = this.state.formData;
-    formData[name] = value;
-    this.setState({
-      formData: formData
-    });
-  },
-
-  onSubmit(e) {
-    this.props.onSubmit(this.state.formData);
-  },
-
-  render() {
-    let {fields, required, formData} = this.state;
-    let formValid = !required.filter(option => !formData[option]).length;
-    let submitDisabled = !formValid || this.props.formDisabled;
-
-    return (
-      <Form onSubmit={this.onSubmit} submitDisabled={submitDisabled}>
-        <h4>General</h4>
-        {fields['system.url-prefix']}
-        {fields['system.admin-email']}
-        {fields['system.support-email']}
-        {fields['system.security-email']}
-        {fields['system.rate-limit']}
-
-        <h4>Security & Abuse</h4>
-        {fields['auth.allow-registration']}
-        {fields['auth.ip-rate-limit']}
-        {fields['auth.user-rate-limit']}
-        {fields['api.rate-limit.org-create']}
-      </Form>
-    );
-  }
-});
-
-const AdminSettings = React.createClass({
-  mixins: [ApiMixin],
-
-  getInitialState() {
-    return {
-      loading: true,
-      error: false,
-      submitInProgress: false,
-      submitError: null,
-      options: {}
-    };
-  },
-
-  componentWillMount() {
-    this.fetchData();
-  },
-
-  remountComponent() {
-    this.setState(this.getInitialState(), this.fetchData);
-  },
-
-  fetchData(callback) {
-    this.api.request('/internal/options/', {
-      method: 'GET',
-      success: data => {
-        this.setState({
-          options: data,
-          loading: false,
-          error: false
-        });
-      },
-      error: () => {
-        this.setState({
-          loading: false,
-          error: true
-        });
-      }
-    });
-  },
-
-  onSubmit(formData) {
-    this.setState({
-      submitInProgress: true,
-      submitError: false
-    });
-    let loadingIndicator = IndicatorStore.add(t('Saving changes..'));
-
-    // We only want to send back the values which weren't disabled
-    formData = _.pick(formData, (value, key) => {
-      return !this.state.options[key].field.disabled;
-    });
-    this.api.request('/internal/options/', {
-      method: 'PUT',
-      data: formData,
-      success: () => {
-        this.setState({
-          submitInProgress: false
-        });
-        AlertActions.addAlert({
-          message: t('Your changes were saved, and will propagate to services shortly.'),
-          type: 'success'
-        });
-      },
-      error: () => {
-        this.setState({
-          submitInProgress: false,
-          submitError: true
-        });
-      },
-      complete: () => {
-        IndicatorStore.remove(loadingIndicator);
-      }
-    });
-  },
-
-  render() {
-    let {error, loading, options, submitError, submitInProgress} = this.state;
-
     return (
       <div>
         <h3>{t('Settings')}</h3>
 
-        {loading
-          ? <LoadingIndicator>
-              {t('Please wait while we load configuration.')}
-            </LoadingIndicator>
-          : error
-              ? <div className="loading-error">
-                  <span className="icon" />
-                  {t(
-                    'We were unable to load the required configuration from the Sentry server. Please take a look at the service logs.'
-                  )}
-                </div>
-              : <div>
-                  {submitError &&
-                    <div className="alert alert-block alert-error">
-                      {t(
-                        'We were unable to submit your changes to the Sentry server. Please take a look at the service logs.'
-                      )}
-                    </div>}
-                  <SettingsList
-                    options={options}
-                    onSubmit={this.onSubmit}
-                    formDisabled={submitInProgress}
-                  />
-                </div>}
+        <ApiForm
+          apiMethod="PUT"
+          apiEndpoint={this.getEndpoint()}
+          onSubmit={this.onSubmit}
+          initialData={initialData}
+          requireChanges={true}>
+          <h4>General</h4>
+          {fields['system.url-prefix']}
+          {fields['system.admin-email']}
+          {fields['system.support-email']}
+          {fields['system.security-email']}
+          {fields['system.rate-limit']}
+
+          <h4>Security & Abuse</h4>
+          {fields['auth.allow-registration']}
+          {fields['auth.ip-rate-limit']}
+          {fields['auth.user-rate-limit']}
+          {fields['api.rate-limit.org-create']}
+        </ApiForm>
       </div>
     );
   }
-});
-
-export default AdminSettings;
+}