Ghost/ghost/admin/app/services/feature.js

147 lines
4.3 KiB
JavaScript
Raw Normal View History

import $ from 'jquery';
import Ember from 'ember';
import EmberError from '@ember/error';
import Service, {inject as service} from '@ember/service';
import classic from 'ember-classic-decorator';
import {computed, set} from '@ember/object';
export function feature(name, options = {}) {
let {user, onChange} = options;
let watchedProps = user ? [`accessibility.${name}`] : [`config.${name}`, `labs.${name}`];
return computed.apply(Ember, watchedProps.concat({
get() {
let enabled = false;
if (user) {
enabled = this.get(`accessibility.${name}`);
} else if (this.get(`config.${name}`)) {
enabled = this.get(`config.${name}`);
} else {
enabled = this.get(`labs.${name}`) || false;
}
return enabled;
},
set(key, value) {
this.update(key, value, options);
if (onChange) {
// value must be passed here because the value isn't set until
// the setter function returns
this.get(onChange).bind(this)(value);
}
return value;
}
}));
}
@classic
export default class FeatureService extends Service {
@service store;
@service config;
@service session;
@service settings;
@service notifications;
@service lazyLoader;
// features
@feature('emailAnalytics') emailAnalytics;
// user-specific flags
@feature('nightShift', {user: true, onChange: '_setAdminTheme'})
nightShift;
// labs flags
@feature('urlCache') urlCache;
@feature('beforeAfterCard') beforeAfterCard;
@feature('sodoSearch') sodoSearch;
@feature('comments') comments;
_user = null;
@computed('settings.labs')
get labs() {
let labs = this.get('settings.labs');
try {
return JSON.parse(labs) || {};
} catch (e) {
return {};
}
}
@computed('_user.accessibility')
get accessibility() {
let accessibility = this.get('_user.accessibility');
try {
return JSON.parse(accessibility) || {};
} catch (e) {
return {};
}
}
fetch() {
Made `session.user` a synchronous property rather than a promise no issue Having `session.user` return a promise made dealing with it in components difficult because you always had to remember it returned a promise rather than a model and had to handle the async behaviour. It also meant that you couldn't use any current user properties directly inside getters which made refactors to Glimmer/Octane idioms harder to reason about. `session.user` was a cached computed property so it really made no sense for it to be a promise - it was loaded on first access and then always returned instantly but with a fulfilled promise rather than the underlying model. Refactoring to a synchronous property that is loaded as part of the authentication flows (we load the current user to check that we're logged in - we may as well make use of that!) means one less thing to be aware of/remember and provides a nicer migration process to Glimmer components. As part of the refactor, the auth flows and pre-load of required data across other services was also simplified to make it easier to find and follow. - refactored app setup and `session.user` - added `session.populateUser()` that fetches a user model from the current user endpoint and sets it on `session.user` - removed knowledge of app setup from the `cookie` authenticator and moved it into = `session.postAuthPreparation()`, this means we have the same post-authentication setup no matter which authenticator is used so we have more consistent behaviour in tests which don't use the `cookie` authenticator - switched `session` service to native class syntax to get the expected `super()` behaviour - updated `handleAuthentication()` so it populate's `session.user` and performs post-auth setup before transitioning (handles sign-in after app load) - updated `application` route to remove duplicated knowledge of app preload behaviour that now lives in `session.postAuthPreparation()` (handles already-authed app load) - removed out-of-date attempt at pre-loading data from setup controller as that's now handled automatically via `session.handleAuthentication` - updated app code to not treat `session.user` as a promise - predominant usage was router `beforeModel` hooks that transitioned users without valid permissions, this sets us up for an easier removal of the `current-user-settings` mixin in the future
2021-07-08 16:37:31 +03:00
return this.settings.fetch().then(() => {
this.set('_user', this.session.user);
return this._setAdminTheme().then(() => true);
});
}
update(key, value, options = {}) {
let serviceProperty = options.user ? 'accessibility' : 'labs';
let model = this.get(options.user ? '_user' : 'settings');
let featureObject = this.get(serviceProperty);
// set the new key value for either the labs property or the accessibility property
set(featureObject, key, value);
if (options.requires && value === true) {
options.requires.forEach((flag) => {
set(featureObject, flag, true);
});
}
// update the 'labs' or 'accessibility' key of the model
model.set(serviceProperty, JSON.stringify(featureObject));
return model.save().then(() => {
// return the labs key value that we get from the server
this.notifyPropertyChange(serviceProperty);
return this.get(`${serviceProperty}.${key}`);
}).catch((error) => {
model.rollbackAttributes();
this.notifyPropertyChange(serviceProperty);
// we'll always have an errors object unless we hit a
// validation error
if (!error) {
throw new EmberError(`Validation of the feature service ${options.user ? 'user' : 'settings'} model failed when updating ${serviceProperty}.`);
}
this.notifications.showAPIError(error);
return this.get(`${serviceProperty}.${key}`);
});
}
_setAdminTheme(enabled) {
let nightShift = enabled;
if (typeof nightShift === 'undefined') {
nightShift = enabled || this.nightShift;
}
return this.lazyLoader.loadStyle('dark', 'assets/ghost-dark.css', true).then(() => {
$('link[title=dark]').prop('disabled', !nightShift);
}).catch(() => {
//TODO: Also disable toggle from settings and Labs hover
$('link[title=dark]').prop('disabled', true);
});
}
}