fetch themes from /themes endpoint (#542)

refs TryGhost/Ghost#8022 - use `/themes` API endpoint to fetch list of themes instead of `settings[0].availableThemes`
TryGhost · Feb 21, 2017 · c43974c · c43974c
1 parent 5674498
commit c43974c
Show file tree

Hide file tree

Showing 18 changed files with 88 additions and 87 deletions.
diff --git a/app/components/gh-theme-table.js b/app/components/gh-theme-table.js
@@ -1,18 +1,22 @@
 import Component from 'ember-component';
 import computed from 'ember-computed';
+import get from 'ember-metal/get';
 
 export default Component.extend({
 
-    availableThemes: null,
+    themes: null,
+    activeTheme: null,
 
-    themes: computed('availableThemes', function () {
-        let themes = this.get('availableThemes').map((t) => {
+    sortedThemes: computed('themes.[]', 'activeTheme', function () {
+        let activeTheme = get(this, 'activeTheme');
+        let themes = get(this, 'themes').map((t) => {
             let theme = {};
+            let themePackage = get(t, 'package');
 
-            theme.name = t.name;
-            theme.label = t.package ? `${t.package.name} - ${t.package.version}` : t.name;
-            theme.package = t.package;
-            theme.active = !!t.active;
+            theme.name = get(t, 'name');
+            theme.label = themePackage ? `${themePackage.name} - ${themePackage.version}` : theme.name;
+            theme.package = themePackage;
+            theme.active = theme.name === activeTheme;
             theme.isDeletable = !theme.active;
 
             return theme;

diff --git a/app/components/modals/upload-theme.js b/app/components/modals/upload-theme.js
@@ -14,7 +14,7 @@ export default ModalComponent.extend({
 
     accept: ['application/zip', 'application/x-zip-compressed'],
     extensions: ['zip'],
-    availableThemes: null,
+    themes: null,
     closeDisabled: false,
     file: null,
     theme: false,
@@ -34,7 +34,7 @@ export default ModalComponent.extend({
         return t.package ? `${t.package.name} - ${t.package.version}` : t.name;
     }),
 
-    availableThemeNames: mapBy('model.availableThemes', 'name'),
+    currentThemeNames: mapBy('model.themes', 'name'),
 
     fileThemeName: computed('file', function () {
         let file = this.get('file');
@@ -43,14 +43,15 @@ export default ModalComponent.extend({
 
     canActivateTheme: computed('theme', function () {
         let theme = this.get('theme');
+        // TODO: do we still get theme.active back or do we need to check settings.activeTheme?
         return theme && !theme.active;
     }),
 
     actions: {
         validateTheme(file) {
             let themeName = file.name.replace(/\.zip$/, '').replace(/[^\w@.]/gi, '-');
 
-            let availableThemeNames = this.get('availableThemeNames');
+            let currentThemeNames = this.get('currentThemeNames');
 
             this.set('file', file);
 
@@ -65,7 +66,7 @@ export default ModalComponent.extend({
                 return {errors: [{message: 'Sorry, the default Casper theme cannot be overwritten.<br>Please rename your zip file and try again.'}]};
             }
 
-            if (!this._allowOverwrite && availableThemeNames.includes(themeName)) {
+            if (!this._allowOverwrite && currentThemeNames.includes(themeName)) {
                 this.set('displayOverwriteWarning', true);
                 return false;
             }

diff --git a/app/controllers/settings/general.js b/app/controllers/settings/general.js
@@ -9,6 +9,7 @@ import $ from 'jquery';
 
 export default Controller.extend(SettingsSaveMixin, {
 
+    themes: null,
     availableTimezones: null,
     themeToDelete: null,
 
@@ -51,16 +52,13 @@ export default Controller.extend(SettingsSaveMixin, {
     }),
 
     _deleteTheme() {
-        let theme = this.get('themeToDelete');
-        let themeURL = `${this.get('ghostPaths.apiRoot')}/themes/${theme.name}/`;
+        let theme = this.get('store').peekRecord('theme', this.get('themeToDelete').name);
 
         if (!theme) {
             return;
         }
 
-        return this.get('ajax').del(themeURL).then(() => {
-            this.send('reloadSettings');
-        }).catch((error) => {
+        return theme.destroyRecord().catch((error) => {
             this.get('notifications').showAPIError(error);
         });
     },

diff --git a/app/models/setting.js b/app/models/setting.js
@@ -16,7 +16,6 @@ export default Model.extend(ValidationEngine, {
     forceI18n: attr('boolean'),
     permalinks: attr('string'),
     activeTheme: attr('string'),
-    availableThemes: attr(),
     activeTimezone: attr('string', {defaultValue: 'Etc/UTC'}),
     ghost_head: attr('string'),
     ghost_foot: attr('string'),

diff --git a/app/models/theme.js b/app/models/theme.js
@@ -0,0 +1,7 @@
+import Model from 'ember-data/model';
+import attr from 'ember-data/attr';
+
+export default Model.extend({
+    name: attr('string'),
+    package: attr('raw')
+});
diff --git a/app/routes/settings/general.js b/app/routes/settings/general.js
@@ -26,12 +26,14 @@ export default AuthenticatedRoute.extend(styleBody, CurrentUserSettings, {
     model() {
         return RSVP.hash({
             settings: this.querySettings(),
+            themes: this.get('store').findAll('theme'),
             availableTimezones: this.get('config.availableTimezones')
         });
     },
 
     setupController(controller, models) {
         controller.set('model', models.settings);
+        controller.set('themes', this.get('store').peekAll('theme'));
         controller.set('availableTimezones', models.availableTimezones);
     },
 
@@ -42,10 +44,14 @@ export default AuthenticatedRoute.extend(styleBody, CurrentUserSettings, {
 
         reloadSettings() {
             return this.querySettings((settings) => {
-                this.set('controller.model', settings);
+                this.get('controller').set('model', settings);
             });
         },
 
+        reloadThemes() {
+            return this.get('store').findAll('theme');
+        },
+
         activateTheme(theme) {
             return this.get('controller').send('setTheme', theme);
         }

diff --git a/app/routes/settings/general/uploadtheme.js b/app/routes/settings/general/uploadtheme.js
@@ -3,7 +3,7 @@ import AuthenticatedRoute from 'ghost-admin/routes/authenticated';
 export default AuthenticatedRoute.extend({
 
     model() {
-        return this.modelFor('settings.general').settings.get('availableThemes');
+        return this.get('store').findAll('theme');
     },
 
     actions: {

diff --git a/app/serializers/theme.js b/app/serializers/theme.js
@@ -0,0 +1,5 @@
+import ApplicationSerializer from './application';
+
+export default ApplicationSerializer.extend({
+    primaryKey: 'name'
+});
diff --git a/app/templates/components/gh-theme-table.hbs b/app/templates/components/gh-theme-table.hbs
@@ -1,6 +1,6 @@
-{{#if themes}}
+{{#if sortedThemes}}
     <div class="theme-list">
-        {{#each themes as |theme|}}
+        {{#each sortedThemes as |theme|}}
             <div class="theme-list-item {{if theme.active "theme-list-item--active"}}">
                 <div class="theme-list-item-body">
                     <span class="name">{{theme.label}}</span>

diff --git a/app/templates/settings/general.hbs b/app/templates/settings/general.hbs
@@ -175,7 +175,8 @@
                 <h3 id="themes">Themes</h3>
 
                 {{gh-theme-table
-                        availableThemes=model.availableThemes
+                        themes=themes
+                        activeTheme=model.activeTheme
                         activateTheme=(action "setTheme")
                         downloadTheme=(action "downloadTheme")
                         deleteTheme=(action "deleteTheme")}}

diff --git a/app/templates/settings/general/uploadtheme.hbs b/app/templates/settings/general/uploadtheme.hbs
@@ -1,7 +1,7 @@
 {{gh-fullscreen-modal "upload-theme"
     model=(hash
-        availableThemes=model
-        uploadSuccess=(route-action 'reloadSettings')
+        themes=model
+        uploadSuccess=(route-action 'reloadThemes')
         activate=(route-action 'activateTheme')
     )
     close=(route-action "cancel")

diff --git a/mirage/config/settings.js b/mirage/config/settings.js
@@ -32,19 +32,6 @@ export default function mockSettings(server) {
             db.settings.update({key}, newSetting);
         });
 
-        let [activeTheme] = db.settings.where({key: 'activeTheme'});
-        let [availableThemes] = db.settings.where({key: 'availableThemes'});
-
-        availableThemes.value.forEach((theme) => {
-            if (theme.name === activeTheme.value) {
-                theme.active = true;
-            } else {
-                theme.active = false;
-            }
-        });
-
-        db.settings.update({key: 'availableThemes'}, availableThemes);
-
         return {
             meta: {},
             settings: db.settings

diff --git a/mirage/config/themes.js b/mirage/config/themes.js
@@ -3,37 +3,30 @@ import {Response} from 'ember-cli-mirage';
 let themeCount = 1;
 
 export default function mockThemes(server) {
-    server.post('/themes/upload/', function ({db}) {
-        let [availableThemes] = db.settings.where({key: 'availableThemes'});
+    server.get('/themes');
+
+    server.post('/themes/upload/', function ({themes}) {
         // pretender/mirage doesn't currently process FormData so we can't use
         // any info passed in through the request
         let theme = {
             name: `test-${themeCount}`,
             package: {
                 name: `Test ${themeCount}`,
                 version: '0.1'
-            },
-            active: false
+            }
         };
 
         themeCount++;
 
-        availableThemes.value.pushObject(theme);
-        db.settings.update({key: 'availableThemes'}, availableThemes);
+        theme = themes.create(theme);
 
         return {
             themes: [theme]
         };
     });
 
-    server.del('/themes/:theme/', function ({db}, {params}) {
-        let [availableThemes] = db.settings.where({key: 'availableThemes'});
-
-        availableThemes.value = availableThemes.value.filter((theme) => {
-            return theme.name !== params.theme;
-        });
-
-        db.settings.update({key: 'availableThemes'}, availableThemes);
+    server.del('/themes/:theme/', function ({themes}, {params}) {
+        themes.findBy({name: params.theme}).destroy();
 
         return new Response(204, {}, null);
     });

diff --git a/mirage/fixtures/settings.js b/mirage/fixtures/settings.js
@@ -193,31 +193,6 @@ export default [
         updated_by: 1,
         value: 'Etc/UTC'
     },
-    {
-        id: 20,
-        key: 'availableThemes',
-        value: [
-            {
-                name: 'casper',
-                package: {
-                    name: 'Blog',
-                    version: '1.0'
-                },
-                active: true
-            },
-            {
-                name: 'foo',
-                package: {
-                    name: 'Foo',
-                    version: '0.1'
-                }
-            },
-            {
-                name: 'bar'
-            }
-        ],
-        type: 'theme'
-    },
     {
         id: 21,
         created_at: '2017-01-09T08:40:59.000Z',

diff --git a/mirage/fixtures/themes.js b/mirage/fixtures/themes.js
@@ -0,0 +1,19 @@
+export default [
+    {
+        name: 'casper',
+        package: {
+            name: 'Blog',
+            version: '1.0'
+        }
+    },
+    {
+        name: 'foo',
+        package: {
+            name: 'Foo',
+            version: '0.1'
+        }
+    },
+    {
+        name: 'bar'
+    }
+];
diff --git a/mirage/models/theme.js b/mirage/models/theme.js
@@ -0,0 +1,4 @@
+import {Model} from 'ember-cli-mirage';
+
+export default Model.extend({
+});
diff --git a/tests/acceptance/settings/general-test.js b/tests/acceptance/settings/general-test.js
@@ -380,6 +380,7 @@ describe('Acceptance: Settings - General', function () {
             // - displays modal
             // - deletes theme and refreshes list
 
+            server.loadFixtures('themes');
             visit('/settings/general');
 
             // lists available themes (themes are specified in mirage/fixtures/settings)