From 62e58b0366297156196a6ba00a878d5e3f40a952 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Wed, 30 Aug 2017 13:31:04 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fixed=20"active"=20state=20of=20?=
 =?UTF-8?q?apps=20on=20apps=20index=20screen=20(#843)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

no issue

On the apps index screen there were conditionals for each app so that active apps show "Active" instead of "Configure" when they are activated - the conditionals weren't working because the properties they check for weren't available in the template's context.

- add a new `settings/apps/index` controller that imports the `settings` service
- updates template conditionals to check for properties on the `settings` service
---
 .../app/controllers/settings/apps/index.js    |  6 ++++
 .../app/templates/settings/apps/index.hbs     | 30 +++++++++----------
 .../tests/acceptance/settings/apps-test.js    | 24 +++++++++++++--
 3 files changed, 42 insertions(+), 18 deletions(-)
 create mode 100644 ghost/admin/app/controllers/settings/apps/index.js

diff --git a/ghost/admin/app/controllers/settings/apps/index.js b/ghost/admin/app/controllers/settings/apps/index.js
new file mode 100644
index 0000000000..ec571b4561
--- /dev/null
+++ b/ghost/admin/app/controllers/settings/apps/index.js
@@ -0,0 +1,6 @@
+import Controller from '@ember/controller';
+import {inject as injectService} from '@ember/service';
+
+export default Controller.extend({
+    settings: injectService()
+});
diff --git a/ghost/admin/app/templates/settings/apps/index.hbs b/ghost/admin/app/templates/settings/apps/index.hbs
index fa7ff20871..5c5c56099b 100644
--- a/ghost/admin/app/templates/settings/apps/index.hbs
+++ b/ghost/admin/app/templates/settings/apps/index.hbs
@@ -6,8 +6,8 @@
     <section class="apps-grid-container">
         <span class="apps-grid-title">Available integrations</span>
         <div class="apps-grid">
-            <div class="apps-grid-cell">
-                {{#link-to "settings.apps.slack" id="slack-link"}}
+            <div class="apps-grid-cell" data-test-app="slack">
+                {{#link-to "settings.apps.slack" data-test-link="slack"}}
                 <article class="apps-card-app">
                     <div class="apps-card-left">
                         <figure class="apps-card-app-icon" style="background-image:url(assets/img/slackicon.png)"></figure>
@@ -18,10 +18,10 @@
                     </div>
                     <div class="gh-card-right">
                         <div class="apps-configured">
-                            {{#if slack.isActive}}
-                                <span class="green">Active</span>
+                            {{#if settings.slack.isActive}}
+                                <span class="green" data-test-app-status>Active</span>
                             {{else}}
-                                <span>Configure</span>
+                                <span data-test-app-status>Configure</span>
                             {{/if}}
                             {{inline-svg "arrow-right"}}
                         </div>
@@ -30,8 +30,8 @@
                 {{/link-to}}
             </div>
 
-            <div class="apps-grid-cell">
-                {{#link-to "settings.apps.amp" id="amp-link"}}
+            <div class="apps-grid-cell" data-test-app="amp">
+                {{#link-to "settings.apps.amp" data-test-link="amp"}}
                 <article class="apps-card-app">
                     <div class="apps-card-left">
                         <figure class="apps-card-app-icon" style="background-image:url(assets/img/ampicon.png)"></figure>
@@ -42,10 +42,10 @@
                     </div>
                     <div class="gh-card-right">
                         <div class="apps-configured">
-                            {{#if amp}}
-                                <span class="green">Active</span>
+                            {{#if settings.amp}}
+                                <span class="green" data-test-app-status>Active</span>
                             {{else}}
-                                <span>Configure</span>
+                                <span data-test-app-status>Configure</span>
                             {{/if}}
                             {{inline-svg "arrow-right"}}
                         </div>
@@ -54,8 +54,8 @@
                 {{/link-to}}
             </div>
 
-            <div class="apps-grid-cell">
-                {{#link-to "settings.apps.unsplash" id="unsplash-link"}}
+            <div class="apps-grid-cell" data-test-app="unsplash">
+                {{#link-to "settings.apps.unsplash" data-test-link="unsplash"}}
                 <article class="apps-card-app">
                     <div class="apps-card-left">
                         <figure class="apps-card-app-icon" style="background-image:url(assets/img/unsplashicon.png);background-size:45px;"></figure>
@@ -66,10 +66,10 @@
                     </div>
                     <div class="gh-card-right">
                         <div class="apps-configured">
-                            {{#if unsplash.isActive}}
-                                <span class="green">Active</span>
+                            {{#if settings.unsplash.isActive}}
+                                <span class="green" data-test-app-status>Active</span>
                             {{else}}
-                                <span>Configure</span>
+                                <span data-test-app-status>Configure</span>
                             {{/if}}
                             {{inline-svg "arrow-right"}}
                         </div>
diff --git a/ghost/admin/tests/acceptance/settings/apps-test.js b/ghost/admin/tests/acceptance/settings/apps-test.js
index e6fc46abe8..09c9dea1ac 100644
--- a/ghost/admin/tests/acceptance/settings/apps-test.js
+++ b/ghost/admin/tests/acceptance/settings/apps-test.js
@@ -56,35 +56,53 @@ describe('Acceptance: Settings - Apps', function () {
             return authenticateSession(application);
         });
 
+        it('renders correctly', async function () {
+            await visit('/settings/apps');
+
+            // slack is not configured in the fixtures
+            expect(
+                find('[data-test-app="slack"] [data-test-app-status]').text().trim(),
+                'slack app status'
+            ).to.equal('Configure');
+
+            // amp is enabled in the fixtures
+            expect(
+                find('[data-test-app="amp"] [data-test-app-status]').text().trim(),
+                'amp app status'
+            ).to.equal('Active');
+        });
+
         it('it redirects to Slack when clicking on the grid', async function () {
             await visit('/settings/apps');
 
             // has correct url
             expect(currentURL(), 'currentURL').to.equal('/settings/apps');
 
-            await click('#slack-link');
+            await click('[data-test-link="slack"]');
 
             // has correct url
             expect(currentURL(), 'currentURL').to.equal('/settings/apps/slack');
         });
+
         it('it redirects to AMP when clicking on the grid', async function () {
             await visit('/settings/apps');
 
             // has correct url
             expect(currentURL(), 'currentURL').to.equal('/settings/apps');
 
-            await click('#amp-link');
+            await click('[data-test-link="amp"]');
 
             // has correct url
             expect(currentURL(), 'currentURL').to.equal('/settings/apps/amp');
         });
+
         it('it redirects to Unsplash when clicking on the grid', async function () {
             await visit('/settings/apps');
 
             // has correct url
             expect(currentURL(), 'currentURL').to.equal('/settings/apps');
 
-            await click('#unsplash-link');
+            await click('[data-test-link="unsplash"]');
 
             // has correct url
             expect(currentURL(), 'currentURL').to.equal('/settings/apps/unsplash');