⚡❓ AMP app integration (#499)

refs TryGhost/Ghost#7769
- Removes Google AMP option from general settings and adds it to apps instead.

app/controllers/settings/apps/amp.js

@@ -0,0 +1,37 @@
+import Controller from 'ember-controller';
+import injectService from 'ember-service/inject';
+
+export default Controller.extend({
+    notifications: injectService(),
+
+    // will be set by route
+    settings: null,
+
+    isSaving: false,
+
+    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);
+
+            this.set('isSaving', true);
+
+            return settings.save().catch((err) => {
+                this.get('notifications').showAPIError(err);
+                throw err;
+            }).finally(() => {
+                this.set('isSaving', false);
+            });
+        }
+    }
+});

app/controllers/settings/apps/index.js

@@ -5,5 +5,6 @@ import {alias} from 'ember-computed';
 export default Controller.extend({
     appsController: injectController('settings.apps'),
 
-    slack: alias('appsController.model.slack.firstObject')
+    slack: alias('appsController.model.slack.firstObject'),
+    amp: alias('appsController.model.amp')
 });

app/router.js

@@ -56,9 +56,10 @@ GhostRouter.map(function () {
     this.route('settings.navigation', {path: '/settings/navigation'});
     this.route('settings.apps', {path: '/settings/apps'}, function () {
         this.route('slack', {path: 'slack'});
+        this.route('amp', {path: 'amp'});
     });
 
-    this.route('subscribers', function() {
+    this.route('subscribers', function () {
         this.route('new');
         this.route('import');
     });

app/routes/settings/apps/amp.js

@@ -0,0 +1,19 @@
+import AuthenticatedRoute from 'ghost-admin/routes/authenticated';
+import CurrentUserSettings from 'ghost-admin/mixins/current-user-settings';
+import styleBody from 'ghost-admin/mixins/style-body';
+
+export default AuthenticatedRoute.extend(styleBody, CurrentUserSettings, {
+    titleToken: 'Settings - Apps - AMP',
+
+    classNames: ['settings-view-apps-amp'],
+
+    model() {
+        return this.modelFor('settings.apps').get('amp');
+    },
+
+    setupController(controller) {
+        this._super(...arguments);
+
+        controller.set('settings', this.modelFor('settings.apps'));
+    }
+});

app/styles/layouts/apps.css

@@ -54,6 +54,10 @@
     transition: background 0.3s ease;
 }
 
+.apps-card-app:not(last-child) {
+    border-bottom: rgba(0,0,0,0.1) 1px solid;
+}
+
 .apps-card-app:first-of-type {
     border-top: none;
 }

app/templates/settings/apps/amp.hbs

@@ -0,0 +1,35 @@
+<header class="view-header">
+    {{#gh-view-title openMobileMenu="openMobileMenu"}}<span style="padding-left:1px">{{#link-to "settings.apps.index"}}Apps{{/link-to}} <i class="icon-arrow-right" style="display:inline"></i> AMP</span>{{/gh-view-title}}
+    <section class="view-actions">
+        {{#gh-spin-button id="saveSlackIntegration" class="btn btn-green" action=(action "save") submitting=isSaving}}
+            Save
+        {{/gh-spin-button}}
+    </section>
+</header>
+<section class="view-container">
+    <section class="view-content">
+        <section class="app-grid">
+            <div class="app-cell">
+                <img class="app-icon" src="{{gh-path 'admin' '/img/slackicon.png'}}" />
+            </div>
+            <div class="app-cell">
+                <h3>AMP</h3>
+                <p>Accelerated Mobile Pages</p>
+            </div>
+        </section>
+        <section class="app-subtitle">
+            <p>Enable <a href="https://ampproject.org">Google Accelerated Mobile Pages</a> for your site?</p>
+        </section>
+        <form class="app-config-form" id="amp-settings" novalidate="novalidate">
+            <div class="form-group for-checkbox">
+                <label for="amp">AMP support for your publications</label>
+                <label class="checkbox" for="amp">
+                    {{one-way-checkbox model id="amp" name="amp" type="checkbox" update=(action "update")}}
+                    <span class="input-toggle-component"></span>
+                    <p>Enable AMP support</p>
+                </label>
+            </div>
+        </form>
+
+    </section>
+</section>

app/templates/settings/apps/index.hbs

@@ -27,6 +27,28 @@
                 </article>
                 {{/link-to}}
             </div>
+
+            <div class="apps-grid-cell">
+                {{#link-to "settings.apps.amp" id="amp-link"}}
+                <article class="apps-card-app">
+                    <div class="apps-card-content">
+                        <figure class="apps-card-app-icon" style="background-image:url({{gh-path 'admin' '/img/ampicon.png'}})"></figure>
+                        <div class="apps-card-meta">
+                            <h3 class="apps-card-app-title">AMP</h3>
+                            <p class="apps-card-app-desc">Google Accelerated Mobile Pages</p>
+                        </div>
+                        <div class="apps-configured">
+                            {{#if amp}}
+                                <span class="green">Active</span>
+                            {{else}}
+                                <span>Configure</span>
+                            {{/if}}
+                            <i class="icon-arrow-right"></i>
+                        </div>
+                    </div>
+                </article>
+                {{/link-to}}
+            </div>
         </div>
         <p class="apps-grid-note">(More coming soon!)</p>
     </section>

app/templates/settings/general.hbs

@@ -105,15 +105,6 @@
                         availableTimezones=availableTimezones
                         update=(action "setTimezone")}}
 
-                <div class="form-group for-checkbox">
-                    <label for="amp">AMP support</label>
-                    <label class="checkbox" for="amp">
-                        {{one-way-checkbox model.amp id="amp" name="general[amp]" type="checkbox" update=(action (mut model.amp))}}
-                        <span class="input-toggle-component"></span>
-                        <p>Enable AMP support for your blog posts</p>
-                    </label>
-                </div>
-
                 <div class="form-group for-checkbox">
                     <label for="isPrivate">Make this blog private</label>
                     <label class="checkbox" for="isPrivate">

tests/acceptance/settings/apps-test.js

@@ -83,5 +83,21 @@ describe('Acceptance: Settings - Apps', function () {
 
         });
 
+        it('it redirects to AMP when clicking on the grid', function () {
+            visit('/settings/apps');
+
+            andThen(() => {
+                // has correct url
+                expect(currentURL(), 'currentURL').to.equal('/settings/apps');
+            });
+
+            click('#amp-link');
+
+            andThen(() => {
+                // has correct url
+                expect(currentURL(), 'currentURL').to.equal('/settings/apps/amp');
+            });
+        });
+
     });
 });

tests/acceptance/settings/general-test.js

@@ -180,18 +180,6 @@ describe('Acceptance: Settings - General', function () {
                     .to.equal('');
             });
 
-            // handles amp checkbox correctly
-
-            andThen(() => {
-                expect(find('input#amp').prop('checked'), 'AMP is enabled').to.be.true;
-            });
-
-            click('input#amp');
-
-            andThen(() => {
-                expect(find('input#amp').prop('checked'), 'AMP is disabled').to.be.false;
-            });
-
             // validates a facebook url correctly
 
             andThen(() => {