🐛 Fixed "active" state of apps on apps index screen (#843)

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

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()
+});

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">
+            <div class="apps-grid-cell" data-test-app="slack">
-                {{#link-to "settings.apps.slack" id="slack-link"}}
+                {{#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}}
+                            {{#if settings.slack.isActive}}
-                                <span class="green">Active</span>
+                                <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">
+            <div class="apps-grid-cell" data-test-app="amp">
-                {{#link-to "settings.apps.amp" id="amp-link"}}
+                {{#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}}
+                            {{#if settings.amp}}
-                                <span class="green">Active</span>
+                                <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">
+            <div class="apps-grid-cell" data-test-app="unsplash">
-                {{#link-to "settings.apps.unsplash" id="unsplash-link"}}
+                {{#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}}
+                            {{#if settings.unsplash.isActive}}
-                                <span class="green">Active</span>
+                                <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>

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');