🎨 refactor settings screens to use ember-concurrency & gh-task-button

refs TryGhost/Ghost#7865
- updates all settings screens to use EC tasks and `gh-task-button` to get save-state save buttons
- removes now-unused `settings-save` mixin
- moves the order of button color CSS so that grey buttons can change to green/red after completing
- removes the heading from `apps-loading` template so that there's no odd flash when loading slack/amp screens directly

app/controllers/settings/apps/amp.js

@@ -1,37 +1,31 @@
 import Controller from 'ember-controller';
 import injectService from 'ember-service/inject';
+import {task} from 'ember-concurrency';
 
 export default Controller.extend({
     notifications: injectService(),
 
     // will be set by route
     settings: null,
 
-    isSaving: false,
+    save: task(function* () {
+        let amp = this.get('model');
+        let settings = this.get('settings');
 
-    actions: {
-        update(value) {
-            this.set('model', value);
-        },
-
-        save() {
-            let amp = this.get('model');
-            let settings = this.get('settings');
-
-            if (this.get('isSaving')) {
-                return;
-            }
+        settings.set('amp', amp);
 
-            settings.set('amp', amp);
+        try {
+            return yield settings.save();
 
-            this.set('isSaving', true);
+        } catch (error) {
+            this.get('notifications').showAPIError(error);
+            throw error;
+        }
+    }).drop(),
 
-            return settings.save().catch((err) => {
-                this.get('notifications').showAPIError(err);
-                throw err;
-            }).finally(() => {
-                this.set('isSaving', false);
-            });
+    actions: {
+        update(value) {
+            this.set('model', value);
         }
     }
 });

app/controllers/settings/apps/slack.js

@@ -1,7 +1,8 @@
 import Controller from 'ember-controller';
 import {empty} from 'ember-computed';
 import injectService from 'ember-service/inject';
-import {invoke} from 'ember-invoke-action';
+import {task} from 'ember-concurrency';
+import {isInvalidError} from 'ember-ajax/errors';
 
 export default Controller.extend({
     ghostPaths: injectService(),
@@ -11,62 +12,52 @@ export default Controller.extend({
     // will be set by route
     settings: null,
 
-    isSaving: false,
-    savePromise: null,
-    isSendingTest: false,
-
     testNotificationDisabled: empty('model.url'),
 
-    actions: {
-        sendTestNotification() {
-            let notifications = this.get('notifications');
-            let slackApi = this.get('ghostPaths.url').api('slack', 'test');
+    save: task(function* () {
+        let slack = this.get('model');
+        let settings = this.get('settings');
+
+        try {
+            yield slack.validate();
+            settings.get('slack').clear().pushObject(slack);
+            return yield settings.save();
 
-            if (this.get('isSendingTest')) {
-                return;
+        } catch (error) {
+            if (error) {
+                this.get('notifications').showAPIError(error);
+                throw error;
             }
+        }
+    }).drop(),
 
-            this.set('isSendingTest', true);
+    sendTestNotification: task(function* () {
+        let notifications = this.get('notifications');
+        let slackApi = this.get('ghostPaths.url').api('slack', 'test');
 
-            invoke(this, 'save').then(() => {
-                this.get('ajax').post(slackApi).then(() => {
-                    notifications.showAlert('Check your slack channel test message.', {type: 'info', key: 'slack-test.send.success'});
-                }).catch((error) => {
-                    notifications.showAPIError(error, {key: 'slack-test:send'});
-                    throw error;
-                });
-            }).catch(() => {
-                // noop - error already handled in .save
-            }).finally(() => {
-                this.set('isSendingTest', false);
-            });
-        },
+        try {
+            yield this.get('save').perform();
+            yield this.get('ajax').post(slackApi);
+            notifications.showAlert('Check your slack channel test message.', {type: 'info', key: 'slack-test.send.success'});
+            return true;
 
-        updateURL(value) {
-            this.set('model.url', value);
-            this.get('model.errors').clear();
-        },
+        } catch (error) {
+            notifications.showAPIError(error, {key: 'slack-test:send'});
 
-        save() {
-            let slack = this.get('model');
-            let settings = this.get('settings');
-
-            if (this.get('isSaving')) {
-                return;
+            if (!isInvalidError(error)) {
+                throw error;
             }
+        }
+    }).drop(),
 
-            return slack.validate().then(() => {
-                settings.get('slack').clear().pushObject(slack);
-
-                this.set('isSaving', true);
+    actions: {
+        save() {
+            return this.get('save').perform();
+        },
 
-                return settings.save().catch((err) => {
-                    this.get('notifications').showAPIError(err);
-                    throw err;
-                }).finally(() => {
-                    this.set('isSaving', false);
-                });
-            });
+        updateURL(value) {
+            this.set('model.url', value);
+            this.get('model.errors').clear();
         }
     }
 });

app/controllers/settings/code-injection.js

@@ -1,15 +1,18 @@
 import Controller from 'ember-controller';
 import injectService from 'ember-service/inject';
-import SettingsSaveMixin from 'ghost-admin/mixins/settings-save';
+import {task} from 'ember-concurrency';
 
-export default Controller.extend(SettingsSaveMixin, {
+export default Controller.extend({
     notifications: injectService(),
 
-    save() {
+    save: task(function* () {
         let notifications = this.get('notifications');
 
-        return this.get('model').save().catch((error) => {
+        try {
+            return yield this.get('model').save();
+        } catch (error) {
             notifications.showAPIError(error, {key: 'code-injection.save'});
-        });
-    }
+            throw error;
+        }
+    })
 });

app/controllers/settings/design.js

@@ -2,11 +2,11 @@ import RSVP from 'rsvp';
 import Controller from 'ember-controller';
 import computed, {notEmpty} from 'ember-computed';
 import injectService from 'ember-service/inject';
-import SettingsSaveMixin from 'ghost-admin/mixins/settings-save';
+import {task} from 'ember-concurrency';
 import NavigationItem from 'ghost-admin/models/navigation-item';
 import $ from 'jquery';
 
-export default Controller.extend(SettingsSaveMixin, {
+export default Controller.extend({
     config: injectService(),
     ghostPaths: injectService(),
     notifications: injectService(),
@@ -29,7 +29,7 @@ export default Controller.extend(SettingsSaveMixin, {
         this.set('newNavItem', NavigationItem.create({isNew: true}));
     },
 
-    save() {
+    save: task(function* () {
         let navItems = this.get('model.navigation');
         let newNavItem = this.get('newNavItem');
         let notifications = this.get('notifications');
@@ -43,14 +43,17 @@ export default Controller.extend(SettingsSaveMixin, {
             validationPromises.pushObject(item.validate());
         });
 
-        return RSVP.all(validationPromises).then(() => {
-            return this.get('model').save().catch((err) => {
-                notifications.showAPIError(err);
-            });
-        }).catch(() => {
-            // TODO: noop - needed to satisfy spinner button
-        });
-    },
+        try {
+            yield RSVP.all(validationPromises);
+            return yield this.get('model').save();
+
+        } catch (error) {
+            if (error) {
+                notifications.showAPIError(error);
+                throw error;
+            }
+        }
+    }),
 
     addNewNavItem() {
         let navItems = this.get('model.navigation');

app/controllers/settings/general.js

@@ -3,10 +3,10 @@ import computed from 'ember-computed';
 import injectService from 'ember-service/inject';
 import observer from 'ember-metal/observer';
 import run from 'ember-runloop';
-import SettingsSaveMixin from 'ghost-admin/mixins/settings-save';
 import randomPassword from 'ghost-admin/utils/random-password';
+import {task} from 'ember-concurrency';
 
-export default Controller.extend(SettingsSaveMixin, {
+export default Controller.extend({
 
     availableTimezones: null,
 
@@ -58,24 +58,27 @@ export default Controller.extend(SettingsSaveMixin, {
         });
     },
 
-    save() {
+    save: task(function* () {
         let notifications = this.get('notifications');
         let config = this.get('config');
-        return this.get('model').save().then((model) => {
+
+        try {
+            let model = yield this.get('model').save();
             config.set('blogTitle', model.get('title'));
 
             // this forces the document title to recompute after
             // a blog title change
             this.send('collectTitleTokens', []);
 
             return model;
-        }).catch((error) => {
+
+        } catch (error) {
             if (error) {
                 notifications.showAPIError(error, {key: 'settings.save'});
             }
             throw error;
-        });
-    },
+        }
+    }),
 
     actions: {
         setTimezone(timezone) {
@@ -146,7 +149,7 @@ export default Controller.extend(SettingsSaveMixin, {
                 this.get('model.hasValidated').pushObject('facebook');
 
                 // User input is validated
-                return this.save().then(() => {
+                return this.get('save').perform().then(() => {
                     this.set('model.facebook', '');
                     run.schedule('afterRender', this, function () {
                         this.set('model.facebook', newUrl);
@@ -209,7 +212,7 @@ export default Controller.extend(SettingsSaveMixin, {
                 this.get('model.hasValidated').pushObject('twitter');
 
                 // User input is validated
-                return this.save().then(() => {
+                return this.get('save').perform().then(() => {
                     this.set('model.twitter', '');
                     run.schedule('afterRender', this, function () {
                         this.set('model.twitter', newUrl);

app/controllers/settings/labs.js

@@ -4,6 +4,7 @@ import Controller from 'ember-controller';
 import injectService from 'ember-service/inject';
 import {isBlank} from 'ember-utils';
 import {isEmberArray} from 'ember-array/utils';
+import {task} from 'ember-concurrency';
 import {UnsupportedMediaTypeError, isUnsupportedMediaTypeError} from 'ghost-admin/services/ajax';
 
 const {Promise} = RSVP;
@@ -62,6 +63,20 @@ export default Controller.extend({
         return RSVP.resolve();
     },
 
+    sendTestEmail: task(function* () {
+        let notifications = this.get('notifications');
+        let emailUrl = this.get('ghostPaths.url').api('mail', 'test');
+
+        try {
+            yield this.get('ajax').post(emailUrl);
+            notifications.showAlert('Check your email for the test message.', {type: 'info', key: 'test-email.send.success'});
+            return true;
+
+        } catch (error) {
+            notifications.showAPIError(error, {key: 'test-email:send'});
+        }
+    }).drop(),
+
     actions: {
         onUpload(file) {
             let formData = new FormData();
@@ -118,21 +133,6 @@ export default Controller.extend({
             iframe.attr('src', downloadURL);
         },
 
-        sendTestEmail() {
-            let notifications = this.get('notifications');
-            let emailUrl = this.get('ghostPaths.url').api('mail', 'test');
-
-            this.toggleProperty('submitting');
-
-            this.get('ajax').post(emailUrl).then(() => {
-                notifications.showAlert('Check your email for the test message.', {type: 'info', key: 'test-email.send.success'});
-                this.toggleProperty('submitting');
-            }).catch((error) => {
-                notifications.showAPIError(error, {key: 'test-email:send'});
-                this.toggleProperty('submitting');
-            });
-        },
-
         toggleDeleteAllModal() {
             this.toggleProperty('showDeleteAllModal');
         }