Add {{background-image-style}} helper

no issue
- cleans up multiple CPs that were only outputting a background image style
- moves URL decoding/encoding and `htmlSafe` output into one place

ghost/admin/app/components/gh-post-settings-menu.js

@@ -5,7 +5,6 @@ import formatMarkdown from 'ghost-admin/utils/format-markdown';
 import moment from 'moment';
 import {alias, or} from '@ember/object/computed';
 import {computed} from '@ember/object';
-import {htmlSafe} from '@ember/string';
 import {run} from '@ember/runloop';
 import {inject as service} from '@ember/service';
 import {task, timeout} from 'ember-concurrency';
@@ -46,16 +45,6 @@ export default Component.extend(SettingsMenuMixin, {
     twitterImage: or('post.twitterImage', 'post.featureImage'),
     twitterTitle: or('twitterTitleScratch', 'seoTitle'),
 
-    twitterImageStyle: computed('twitterImage', function () {
-        let image = this.get('twitterImage');
-        return htmlSafe(`background-image: url(${image})`);
-    }),
-
-    facebookImageStyle: computed('facebookImage', function () {
-        let image = this.get('facebookImage');
-        return htmlSafe(`background-image: url(${image})`);
-    }),
-
     seoDescription: computed('post.scratch', 'metaDescriptionScratch', function () {
         let metaDescription = this.get('metaDescriptionScratch') || '';
         let mobiledoc = this.get('post.scratch');

ghost/admin/app/components/gh-user-active.js

@@ -1,18 +1,12 @@
 import Component from '@ember/component';
 import moment from 'moment';
 import {computed} from '@ember/object';
-import {htmlSafe} from '@ember/string';
 
 export default Component.extend({
     tagName: '',
 
     user: null,
 
-    userImageBackground: computed('user.profileImageUrl', function () {
-        let url = encodeURI(decodeURI(this.user.get('profileImageUrl')));
-        return htmlSafe(`background-image: url(${url})`);
-    }),
-
     lastLoginUTC: computed('user.lastLoginUTC', function () {
         let lastLoginUTC = this.get('user.lastLoginUTC');
 

ghost/admin/app/controllers/team/user.js

@@ -1,12 +1,10 @@
 import Controller from '@ember/controller';
-import Ember from 'ember';
 import boundOneWay from 'ghost-admin/utils/bound-one-way';
 import isNumber from 'ghost-admin/utils/isNumber';
 import validator from 'npm:validator';
 import windowProxy from 'ghost-admin/utils/window-proxy';
 import {alias, and, not, or, readOnly} from '@ember/object/computed';
 import {computed} from '@ember/object';
-import {htmlSafe} from '@ember/string';
 import {isArray as isEmberArray} from '@ember/array';
 import {run} from '@ember/runloop';
 import {inject as service} from '@ember/service';
@@ -61,18 +59,6 @@ export default Controller.extend({
         }
     }),
 
-    // duplicated in gh-user-active -- find a better home and consolidate?
-    userImageBackground: computed('user.profileImageUrl', function () {
-        let url = encodeURI(decodeURI(this.user.get('profileImageUrl')));
-        return htmlSafe(`background-image: url(${url})`);
-    }),
-    // end duplicated
-
-    coverImageBackground: computed('user.coverImage', function () {
-        let url = encodeURI(decodeURI(this.user.get('coverImageUrl')));
-        return htmlSafe(`background-image: url(${url})`);
-    }),
-
     coverTitle: computed('user.name', function () {
         return `${this.get('user.name')}'s Cover Image`;
     }),

ghost/admin/app/helpers/background-image-style.js

@@ -0,0 +1,13 @@
+import {helper} from '@ember/component/helper';
+import {htmlSafe} from '@ember/string';
+
+export function backgroundImageStyle([url]/*, hash*/) {
+    if (url) {
+        let safeUrl = encodeURI(decodeURI(url));
+        return htmlSafe(`background-image: url(${safeUrl});`);
+    }
+
+    return '';
+}
+
+export default helper(backgroundImageStyle);

ghost/admin/app/templates/components/gh-post-settings-menu.hbs

@@ -271,7 +271,7 @@
                                     <label>Preview</label>
                                     <div class="gh-twitter-preview">
                                         {{#if twitterImage}}
-                                        <div class="gh-twitter-preview-image" style={{twitterImageStyle}}></div>
+                                        <div class="gh-twitter-preview-image" style={{background-image-style twitterImage}}></div>
                                         {{/if}}
                                         <div class="gh-twitter-preview-content">
                                             <div class="gh-twitter-preview-title">{{twitterTitle}}</div>
@@ -341,7 +341,7 @@
                                     <label>Preview</label>
                                     <div class="gh-og-preview">
                                         {{#if facebookImage}}
-                                        <div class="gh-og-preview-image" style={{facebookImageStyle}}></div>
+                                        <div class="gh-og-preview-image" style={{background-image-style facebookImage}}></div>
                                         {{/if}}
                                         <div class="gh-og-preview-content">
                                             <div class="gh-og-preview-title">{{truncate facebookTitle 88}}</div>

ghost/admin/app/templates/components/gh-user-list-item.hbs

@@ -2,7 +2,7 @@
     {{#link-to 'team.user' user.slug data-test-user-id=user.id}}
     <article class="apps-card-app">
         <div class="apps-card-left">
-            <span class="user-list-item-figure" style={{component.userImageBackground}}>
+            <span class="user-list-item-figure" style={{background-image-style user.profileImageUrl}}>
                 <span class="hidden">Photo of {{user.name}}</span>
             </span>
             <div class="apps-card-meta">

ghost/admin/app/templates/team/user.hbs

@@ -96,7 +96,7 @@
     <div class="gm-main view-container settings-user">
         <form class="user-profile" novalidate="novalidate" autocomplete="off" {{action (perform save) on="submit"}}>
 
-          <figure class="user-cover" style={{coverImageBackground}}>
+          <figure class="user-cover" style={{background-image-style user.coverImageUrl}}>
               <button type="button" class="gh-btn gh-btn-default user-cover-edit" {{action "toggleUploadCoverModal"}}><span>Change Cover</span></button>
               {{#if showUploadCoverModal}}
                   {{gh-fullscreen-modal "upload-image"
@@ -107,7 +107,7 @@
           </figure>
 
           <figure class="user-image">
-              <div id="user-image" class="img" style="{{userImageBackground}}"><span class="hidden">{{user.name}}"s Picture</span></div>
+              <div id="user-image" class="img" style={{background-image-style user.profileImageUrl}}><span class="hidden">{{user.name}}"s Picture</span></div>
               <button type="button" {{action "toggleUploadImageModal"}} class="edit-user-image">Edit Picture</button>
               {{#if showUploadImageModal}}
                   {{gh-fullscreen-modal "upload-image"

ghost/admin/tests/integration/helpers/background-image-style-test.js

@@ -0,0 +1,39 @@
+import hbs from 'htmlbars-inline-precompile';
+import {describe, it} from 'mocha';
+import {expect} from 'chai';
+import {setupComponentTest} from 'ember-mocha';
+
+describe('Integration: Helper: background-image-style', function () {
+    setupComponentTest('background-image-style', {
+        integration: true
+    });
+
+    it('renders', function () {
+        this.render(hbs`{{background-image-style "test.png"}}`);
+        expect(this.$().text().trim()).to.equal('background-image: url(test.png);');
+    });
+
+    it('escapes URLs', function () {
+        this.render(hbs`{{background-image-style "test image.png"}}`);
+        expect(this.$().text().trim()).to.equal('background-image: url(test%20image.png);');
+    });
+
+    it('handles already escaped URLs', function () {
+        this.render(hbs`{{background-image-style "test%20image.png"}}`);
+        expect(this.$().text().trim()).to.equal('background-image: url(test%20image.png);');
+    });
+
+    it('handles empty URLs', function () {
+        this.set('testImage', undefined);
+        this.render(hbs`{{background-image-style testImage}}`);
+        expect(this.$().text().trim(), 'undefined').to.equal('');
+
+        this.set('testImage', null);
+        this.render(hbs`{{background-image-style testImage}}`);
+        expect(this.$().text().trim(), 'null').to.equal('');
+
+        this.set('testImage', '');
+        this.render(hbs`{{background-image-style testImage}}`);
+        expect(this.$().text().trim(), 'blank').to.equal('');
+    });
+});