🐛 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
This commit is contained in:
Kevin Ansfield 2017-08-30 13:31:04 +01:00 committed by Katharina Irrgang
parent 62775ecd54
commit 62e58b0366
3 changed files with 42 additions and 18 deletions

View File

@ -0,0 +1,6 @@
import Controller from '@ember/controller';
import {inject as injectService} from '@ember/service';
export default Controller.extend({
settings: injectService()
});

View File

@ -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>

View File

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