diff --git a/ghost/admin/app/adapters/embedded-relation-adapter.js b/ghost/admin/app/adapters/embedded-relation-adapter.js index 2f9405ccf4..d57414985f 100644 --- a/ghost/admin/app/adapters/embedded-relation-adapter.js +++ b/ghost/admin/app/adapters/embedded-relation-adapter.js @@ -1,6 +1,7 @@ import BaseAdapter from 'ghost-admin/adapters/base'; import {get} from '@ember/object'; import {isNone} from '@ember/utils'; +import {underscore} from '@ember/string'; // EmbeddedRelationAdapter will augment the query object in calls made to // DS.Store#findRecord, findAll, query, and queryRecord with the correct "includes" @@ -76,7 +77,7 @@ export default BaseAdapter.extend({ let url = this.buildURL(modelName, id, snapshot, requestType, query); if (includes.length) { - url += `?include=${includes.join(',')}`; + url += `?include=${includes.map(underscore).join(',')}`; } return url; @@ -92,7 +93,7 @@ export default BaseAdapter.extend({ if (typeof options === 'string' || typeof options === 'number') { query = {}; query.id = options; - query.include = toInclude.join(','); + query.include = toInclude.map(underscore).join(','); } else if (typeof options === 'object' || isNone(options)) { // If this is a find all (no existing query object) build one and attach // the includes. diff --git a/ghost/admin/app/components/modal-new-integration.js b/ghost/admin/app/components/modal-new-integration.js new file mode 100644 index 0000000000..f9e0861099 --- /dev/null +++ b/ghost/admin/app/components/modal-new-integration.js @@ -0,0 +1,51 @@ +import ModalComponent from 'ghost-admin/components/modal-base'; +import {alias} from '@ember/object/computed'; +import {A as emberA} from '@ember/array'; +import {isInvalidError} from 'ember-ajax/errors'; +import {inject as service} from '@ember/service'; +import {task} from 'ember-concurrency'; + +export default ModalComponent.extend({ + router: service(), + + confirm() {}, + + integration: alias('model'), + + actions: { + updateName(name) { + this.integration.set('name', name); + this.integration.set('hasValidated', emberA()); + this.integration.errors.clear(); + }, + + confirm() { + return this.createIntegration.perform(); + } + }, + + createIntegration: task(function* () { + try { + let integration = yield this.confirm(); + this.router.transitionTo('settings.integration', integration); + } catch (error) { + // TODO: server-side validation errors should be serialized + // properly so that errors are added to model.errors automatically + if (error && isInvalidError(error)) { + let [firstError] = error.payload.errors; + let {message} = firstError; + + if (message && message.match(/name/i)) { + this.get('integration.errors').add('name', message); + this.get('integration.hasValidated').pushObject('name'); + return; + } + } + + // bubble up to the global error handler + if (error) { + throw error; + } + } + }).drop() +}); diff --git a/ghost/admin/app/components/modal-new-webhook.js b/ghost/admin/app/components/modal-new-webhook.js new file mode 100644 index 0000000000..d8eb20fe16 --- /dev/null +++ b/ghost/admin/app/components/modal-new-webhook.js @@ -0,0 +1,68 @@ +import ModalComponent from 'ghost-admin/components/modal-base'; +import Webhook from 'ghost-admin/models/webhook'; +import {alias} from '@ember/object/computed'; +import {camelize} from '@ember/string'; +import {isInvalidError} from 'ember-ajax/errors'; +import {inject as service} from '@ember/service'; +import {task} from 'ember-concurrency'; + +export default ModalComponent.extend({ + router: service(), + + availableEvents: null, + + confirm() {}, + + webhook: alias('model'), + + init() { + this._super(...arguments); + this.availableEvents = [ + {event: 'site.changed', name: 'Site Changed (rebuild)'}, + {event: 'subscriber.added', name: 'Subscriber Added'}, + {event: 'subscriber.deleted', name: 'Subscriber Deleted'} + ]; + }, + + actions: { + selectEvent(value) { + this.webhook.set('event', value); + this.webhook.validate({property: 'event'}); + }, + + confirm() { + this.createWebhook.perform(); + } + }, + + createWebhook: task(function* () { + try { + let webhook = yield this.confirm(); + let integration = yield webhook.get('integration'); + this.router.transitionTo('settings.integration', integration); + } catch (error) { + // TODO: server-side validation errors should be serialized + // properly so that errors are added to model.errors automatically + if (error && isInvalidError(error)) { + let attrs = Array.from(Webhook.attributes.keys()); + + error.payload.errors.forEach((error) => { + let {message, property} = error; + property = camelize(property); + + if (property && attrs.includes(property)) { + this.webhook.errors.add(property, message); + this.webhook.hasValidated.pushObject(property); + } + }); + + return; + } + + // bubble up to the global error handler + if (error) { + throw error; + } + } + }) +}); diff --git a/ghost/admin/app/controllers/settings/integration.js b/ghost/admin/app/controllers/settings/integration.js new file mode 100644 index 0000000000..7bec53a6ce --- /dev/null +++ b/ghost/admin/app/controllers/settings/integration.js @@ -0,0 +1,87 @@ +import Controller from '@ember/controller'; +import {alias} from '@ember/object/computed'; +import {computed} from '@ember/object'; +import {task} from 'ember-concurrency'; + +export default Controller.extend({ + integration: alias('model'), + + allWebhooks: computed(function () { + return this.store.peekAll('webhook'); + }), + + filteredWebhooks: computed('allWebhooks.@each.{isNew,isDeleted}', function () { + return this.allWebhooks.filter((webhook) => { + let matchesIntegration = webhook.belongsTo('integration').id() === this.integration.id; + + return matchesIntegration + && !webhook.isNew + && !webhook.isDeleted; + }); + }), + + actions: { + save() { + return this.save.perform(); + }, + + copyContentKey() { + this._copyInputTextToClipboard('input#content_key'); + }, + + copyAdminKey() { + this._copyInputTextToClipboard('input#admin_key'); + }, + + toggleUnsavedChangesModal(transition) { + let leaveTransition = this.leaveScreenTransition; + + if (!transition && this.showUnsavedChangesModal) { + this.set('leaveScreenTransition', null); + this.set('showUnsavedChangesModal', false); + return; + } + + if (!leaveTransition || transition.targetName === leaveTransition.targetName) { + this.set('leaveScreenTransition', transition); + + // if a save is running, wait for it to finish then transition + if (this.save.isRunning) { + return this.save.last.then(() => { + transition.retry(); + }); + } + + // we genuinely have unsaved data, show the modal + this.set('showUnsavedChangesModal', true); + } + }, + + leaveScreen() { + let transition = this.leaveScreenTransition; + + if (!transition) { + this.notifications.showAlert('Sorry, there was an error in the application. Please let the Ghost team know what happened.', {type: 'error'}); + return; + } + + // roll back changes on model props + this.integration.rollbackAttributes(); + + return transition.retry(); + } + }, + + save: task(function* () { + return yield this.integration.save(); + }), + + _copyInputTextToClipboard(selector) { + let input = document.querySelector(selector); + input.disabled = false; + input.focus(); + input.select(); + document.execCommand('copy'); + input.disabled = true; + } +}); diff --git a/ghost/admin/app/controllers/settings/integration/webhooks/new.js b/ghost/admin/app/controllers/settings/integration/webhooks/new.js new file mode 100644 index 0000000000..6cc9234613 --- /dev/null +++ b/ghost/admin/app/controllers/settings/integration/webhooks/new.js @@ -0,0 +1,19 @@ +import Controller from '@ember/controller'; +import {alias} from '@ember/object/computed'; + +export default Controller.extend({ + webhook: alias('model'), + + actions: { + save() { + return this.webhook.save(); + }, + + cancel() { + // 'new' route's dectivate hook takes care of rollback + return this.webhook.get('integration').then((integration) => { + this.transitionToRoute('settings.integration', integration); + }); + } + } +}); diff --git a/ghost/admin/app/controllers/settings/integrations.js b/ghost/admin/app/controllers/settings/integrations.js index 137009b32f..1e3b070424 100644 --- a/ghost/admin/app/controllers/settings/integrations.js +++ b/ghost/admin/app/controllers/settings/integrations.js @@ -1,7 +1,31 @@ /* eslint-disable ghost/ember/alias-model-in-controller */ import Controller from '@ember/controller'; +import {computed} from '@ember/object'; import {inject as service} from '@ember/service'; +import {task} from 'ember-concurrency'; export default Controller.extend({ - settings: service() + config: service(), + settings: service(), + store: service(), + + _allIntegrations: null, + + init() { + this._super(...arguments); + this._allIntegrations = this.store.peekAll('integration'); + }, + + // filter over the live query so that the list is automatically updated + // as integrations are added/removed + integrations: computed('_allIntegrations.@each.isNew', function () { + return this._allIntegrations.rejectBy('isNew', true); + }), + + // use ember-concurrency so that we can use the derived state to show + // a spinner only in the integrations list and avoid delaying the whole + // screen display + fetchIntegrations: task(function* () { + return yield this.store.findAll('integration'); + }) }); diff --git a/ghost/admin/app/controllers/settings/integrations/new.js b/ghost/admin/app/controllers/settings/integrations/new.js new file mode 100644 index 0000000000..3ce84d1256 --- /dev/null +++ b/ghost/admin/app/controllers/settings/integrations/new.js @@ -0,0 +1,17 @@ +import Controller from '@ember/controller'; +import {alias} from '@ember/object/computed'; + +export default Controller.extend({ + integration: alias('model'), + + actions: { + save() { + return this.integration.save(); + }, + + cancel() { + // 'new' route's dectivate hook takes care of rollback + this.transitionToRoute('settings.integrations'); + } + } +}); diff --git a/ghost/admin/app/helpers/integration-icon-style.js b/ghost/admin/app/helpers/integration-icon-style.js new file mode 100644 index 0000000000..d95c3c32cd --- /dev/null +++ b/ghost/admin/app/helpers/integration-icon-style.js @@ -0,0 +1,11 @@ +import {helper} from '@ember/component/helper'; +import {htmlSafe} from '@ember/string'; + +export function integrationLogoStyle([integration]/*, hash*/) { + if (integration.iconImage) { + let style = `background-image:url(${integration.iconImage});background-size:45px;`; + return htmlSafe(style); + } +} + +export default helper(integrationLogoStyle); diff --git a/ghost/admin/app/mixins/validation-engine.js b/ghost/admin/app/mixins/validation-engine.js index 8a07662961..ed3c22c49d 100644 --- a/ghost/admin/app/mixins/validation-engine.js +++ b/ghost/admin/app/mixins/validation-engine.js @@ -1,4 +1,5 @@ import DS from 'ember-data'; +import IntegrationValidator from 'ghost-admin/validators/integration'; import InviteUserValidator from 'ghost-admin/validators/invite-user'; import Mixin from '@ember/object/mixin'; import Model from 'ember-data/model'; @@ -14,6 +15,7 @@ import SlackIntegrationValidator from 'ghost-admin/validators/slack-integration' import SubscriberValidator from 'ghost-admin/validators/subscriber'; import TagSettingsValidator from 'ghost-admin/validators/tag-settings'; import UserValidator from 'ghost-admin/validators/user'; +import WebhookValidator from 'ghost-admin/validators/webhook'; import {A as emberA, isArray as isEmberArray} from '@ember/array'; const {Errors} = DS; @@ -42,7 +44,9 @@ export default Mixin.create({ slackIntegration: SlackIntegrationValidator, subscriber: SubscriberValidator, tag: TagSettingsValidator, - user: UserValidator + user: UserValidator, + integration: IntegrationValidator, + webhook: WebhookValidator }, // This adds the Errors object to the validation engine, and shouldn't affect diff --git a/ghost/admin/app/models/api-key.js b/ghost/admin/app/models/api-key.js new file mode 100644 index 0000000000..683e9cd75b --- /dev/null +++ b/ghost/admin/app/models/api-key.js @@ -0,0 +1,15 @@ +import Model from 'ember-data/model'; +import attr from 'ember-data/attr'; +import {belongsTo} from 'ember-data/relationships'; + +export default Model.extend({ + type: attr('string'), + secret: attr('string'), + lastSeenAtUTC: attr('moment-utc'), + createdAtUTC: attr('moment-utc'), + createdBy: attr('number'), + updatedAtUTC: attr('moment-utc'), + updatedBy: attr('number'), + + integration: belongsTo('integration') +}); diff --git a/ghost/admin/app/models/integration.js b/ghost/admin/app/models/integration.js new file mode 100644 index 0000000000..f5f2603f44 --- /dev/null +++ b/ghost/admin/app/models/integration.js @@ -0,0 +1,35 @@ +import Model from 'ember-data/model'; +import ValidationEngine from 'ghost-admin/mixins/validation-engine'; +import attr from 'ember-data/attr'; +import {computed} from '@ember/object'; +import {hasMany} from 'ember-data/relationships'; + +export default Model.extend(ValidationEngine, { + validationType: 'integration', + + name: attr('string'), + slug: attr('string'), + iconImage: attr('string'), + description: attr('string'), + createdAtUTC: attr('moment-utc'), + createdBy: attr('number'), + updatedAtUTC: attr('moment-utc'), + updatedBy: attr('number'), + + apiKeys: hasMany('api-key', { + embedded: 'always', + async: false + }), + webhooks: hasMany('webhook', { + embedded: 'always', + async: false + }), + + adminKey: computed('apiKeys.[]', function () { + return this.apiKeys.findBy('type', 'admin'); + }), + + contentKey: computed('apiKeys.[]', function () { + return this.apiKeys.findBy('type', 'content'); + }) +}); diff --git a/ghost/admin/app/models/webhook.js b/ghost/admin/app/models/webhook.js new file mode 100644 index 0000000000..eff39e05dc --- /dev/null +++ b/ghost/admin/app/models/webhook.js @@ -0,0 +1,20 @@ +import Model from 'ember-data/model'; +import ValidationEngine from 'ghost-admin/mixins/validation-engine'; +import attr from 'ember-data/attr'; +import {belongsTo} from 'ember-data/relationships'; + +export default Model.extend(ValidationEngine, { + validationType: 'webhook', + + name: attr('string'), + event: attr('string'), + targetUrl: attr('string'), + secret: attr('string'), + lastTriggeredAtUTC: attr('moment-utc'), + createdAtUTC: attr('moment-utc'), + createdBy: attr('number'), + updatedAtUTC: attr('moment-utc'), + updatedBy: attr('number'), + + integration: belongsTo('integration') +}); diff --git a/ghost/admin/app/router.js b/ghost/admin/app/router.js index e50d7be76a..abf18f2c57 100644 --- a/ghost/admin/app/router.js +++ b/ghost/admin/app/router.js @@ -52,8 +52,12 @@ Router.map(function () { this.route('settings.design', {path: '/settings/design'}, function () { this.route('uploadtheme'); }); - - this.route('settings.integrations', {path: '/settings/integrations'}); + this.route('settings.integrations', {path: '/settings/integrations'}, function () { + this.route('new'); + }); + this.route('settings.integration', {path: '/settings/integrations/:integration_id'}, function () { + this.route('webhooks.new', {path: 'webhooks/new'}); + }); this.route('settings.integrations.slack', {path: '/settings/integrations/slack'}); this.route('settings.integrations.amp', {path: '/settings/integrations/amp'}); this.route('settings.integrations.unsplash', {path: '/settings/integrations/unsplash'}); diff --git a/ghost/admin/app/routes/settings/integration.js b/ghost/admin/app/routes/settings/integration.js new file mode 100644 index 0000000000..27d58be47b --- /dev/null +++ b/ghost/admin/app/routes/settings/integration.js @@ -0,0 +1,56 @@ +import AuthenticatedRoute from 'ghost-admin/routes/authenticated'; +import CurrentUserSettings from 'ghost-admin/mixins/current-user-settings'; +import styleBody from 'ghost-admin/mixins/style-body'; + +export default AuthenticatedRoute.extend(styleBody, CurrentUserSettings, { + titleToken: 'Settings - Integrations', + classNames: ['settings-view-integration'], + + beforeModel() { + this._super(...arguments); + return this.get('session.user') + .then(this.transitionAuthor()) + .then(this.transitionEditor()); + }, + + model(params, transition) { + let integration = this.store.peekRecord('integration', params.integration_id); + + if (integration) { + return integration; + } + + // integration is not already in the store so use the integrations controller + // to fetch all of them and pull out the one we're interested in. Using the + // integrations controller means it's possible to navigate back to the integrations + // screen without triggering a loading state + return this.controllerFor('settings.integrations') + .fetchIntegrations.perform() + .then((integrations) => { + let integration = integrations.findBy('id', params.integration_id); + + if (!integration) { + let path = transition.intent.url.replace(/^\//, ''); + return this.replaceWith('error404', {path, status: 404}); + } + + return integration; + }); + }, + + actions: { + save() { + this.controller.send('save'); + }, + + willTransition(transition) { + let {controller} = this; + + if (controller.integration.hasDirtyAttributes) { + transition.abort(); + controller.send('toggleUnsavedChangesModal', transition); + return; + } + } + } +}); diff --git a/ghost/admin/app/routes/settings/integration/webhooks/new.js b/ghost/admin/app/routes/settings/integration/webhooks/new.js new file mode 100644 index 0000000000..ba5fb4828c --- /dev/null +++ b/ghost/admin/app/routes/settings/integration/webhooks/new.js @@ -0,0 +1,13 @@ +import Route from '@ember/routing/route'; + +export default Route.extend({ + model() { + let integration = this.modelFor('settings.integration'); + return this.store.createRecord('webhook', {integration}); + }, + + deactivate() { + this._super(...arguments); + this.controller.webhook.rollbackAttributes(); + } +}); diff --git a/ghost/admin/app/routes/settings/integrations.js b/ghost/admin/app/routes/settings/integrations.js index e93b14c09c..d402854d32 100644 --- a/ghost/admin/app/routes/settings/integrations.js +++ b/ghost/admin/app/routes/settings/integrations.js @@ -14,5 +14,11 @@ export default AuthenticatedRoute.extend(styleBody, CurrentUserSettings, { return this.get('session.user') .then(this.transitionAuthor()) .then(this.transitionEditor()); + }, + + setupController(controller) { + // kick off the background fetch of integrations so that we can + // show the screen immediately + controller.fetchIntegrations.perform(); } }); diff --git a/ghost/admin/app/routes/settings/integrations/new.js b/ghost/admin/app/routes/settings/integrations/new.js new file mode 100644 index 0000000000..f680466045 --- /dev/null +++ b/ghost/admin/app/routes/settings/integrations/new.js @@ -0,0 +1,12 @@ +import Route from '@ember/routing/route'; + +export default Route.extend({ + model() { + return this.store.createRecord('integration'); + }, + + deactivate() { + this._super(...arguments); + this.controller.integration.rollbackAttributes(); + } +}); diff --git a/ghost/admin/app/serializers/api-key.js b/ghost/admin/app/serializers/api-key.js new file mode 100644 index 0000000000..1f35f09fe6 --- /dev/null +++ b/ghost/admin/app/serializers/api-key.js @@ -0,0 +1,9 @@ +import ApplicationSerializer from './application'; + +export default ApplicationSerializer.extend({ + attrs: { + lastSeenAtUTC: {key: 'last_seen_at'}, + createdAtUTC: {key: 'created_at'}, + updatedAtUTC: {key: 'updated_at'} + } +}); diff --git a/ghost/admin/app/serializers/integration.js b/ghost/admin/app/serializers/integration.js new file mode 100644 index 0000000000..113cf0a844 --- /dev/null +++ b/ghost/admin/app/serializers/integration.js @@ -0,0 +1,11 @@ +import ApplicationSerializer from './application'; +import EmbeddedRecordsMixin from 'ember-data/serializers/embedded-records-mixin'; + +export default ApplicationSerializer.extend(EmbeddedRecordsMixin, { + attrs: { + apiKeys: {embedded: 'always'}, + webhooks: {embedded: 'always'}, + createdAtUTC: {key: 'created_at'}, + updatedAtUTC: {key: 'updated_at'} + } +}); diff --git a/ghost/admin/app/serializers/webhook.js b/ghost/admin/app/serializers/webhook.js new file mode 100644 index 0000000000..9073a383eb --- /dev/null +++ b/ghost/admin/app/serializers/webhook.js @@ -0,0 +1,9 @@ +import ApplicationSerializer from './application'; + +export default ApplicationSerializer.extend({ + attrs: { + lastTriggeredAtUTC: {key: 'last_triggered_at'}, + createdAtUTC: {key: 'created_at'}, + updatedAtUTC: {key: 'updated_at'} + } +}); diff --git a/ghost/admin/app/styles/patterns/forms.css b/ghost/admin/app/styles/patterns/forms.css index 2ffb5c0c33..4773a15f3a 100644 --- a/ghost/admin/app/styles/patterns/forms.css +++ b/ghost/admin/app/styles/patterns/forms.css @@ -148,6 +148,7 @@ select { .gh-input.error, .error .gh-input, +.error .gh-select select, .error .ember-power-select-multiple-trigger, .gh-select.error, select.error { diff --git a/ghost/admin/app/templates/components/modal-leave-settings.hbs b/ghost/admin/app/templates/components/modal-leave-settings.hbs index 22e45d3435..0c6afe0c46 100644 --- a/ghost/admin/app/templates/components/modal-leave-settings.hbs +++ b/ghost/admin/app/templates/components/modal-leave-settings.hbs @@ -1,4 +1,4 @@ -
+

Are you sure you want to leave this page?

{{svg-jar "close"}} diff --git a/ghost/admin/app/templates/components/modal-new-integration.hbs b/ghost/admin/app/templates/components/modal-new-integration.hbs new file mode 100644 index 0000000000..64f5a2e2ed --- /dev/null +++ b/ghost/admin/app/templates/components/modal-new-integration.hbs @@ -0,0 +1,35 @@ +
+

New custom integration

+
+ + +
+
+ {{#gh-form-group errors=integration.errors hasValidated=integration.hasValidated property="name"}} + + + {{gh-error-message errors=integration.errors property="name" data-test-error="new-integration-name"}} + {{/gh-form-group}} +
+
+ +
+ + {{gh-task-button "Create" + successText="Created" + task=createIntegration + class="gh-btn gh-btn-green gh-btn-icon" + data-test-button="create-integration"}} +
diff --git a/ghost/admin/app/templates/components/modal-new-webhook.hbs b/ghost/admin/app/templates/components/modal-new-webhook.hbs new file mode 100644 index 0000000000..af4878225e --- /dev/null +++ b/ghost/admin/app/templates/components/modal-new-webhook.hbs @@ -0,0 +1,92 @@ +
+

New webhook

+
+ + +
+
+ {{#gh-form-group errors=webhook.errors hasValidated=webhook.hasValidated property="name"}} + + {{gh-text-input + value=(readonly webhook.name) + input=(action (mut webhook.name) value="target.value") + focus-out=(action "validate" "name" target=webhook) + id="new-webhook-name" + name="name" + class="gh-input" + placeholder="Webhook name..." + autofocus="autofocus" + autocapitalize="off" + autocorrect="off" + data-test-input="new-webhook-name"}} + {{gh-error-message errors=webhook.errors property="name" data-test-error="new-webhook-name"}} + {{/gh-form-group}} +
+
+ {{#gh-form-group errors=webhook.errors hasValidated=webhook.hasValidated property="event"}} + + + {{one-way-select webhook.event + options=availableEvents + optionValuePath="event" + optionLabelPath="name" + optionTargetPath="event" + includeBlank=true + prompt="Select an event:" + update=(action "selectEvent") + id="new-webhook-event" + name="event" + data-test-select="new-webhook-event"}} + {{svg-jar "arrow-down-small"}} + + {{gh-error-message errors=webhook.errors property="event" data-test-error="new-webhook-event"}} + {{/gh-form-group}} +
+
+ {{#gh-form-group errors=webhook.errors hasValidated=webhook.hasValidated property="targetUrl"}} + + {{gh-text-input + value=(readonly webhook.targetUrl) + input=(action (mut webhook.targetUrl) value="target.value") + focus-out=(action "validate" "targetUrl" target=webhook) + id="new-webhook-targetUrl" + name="targetUrl" + class="gh-input" + placeholder="Webhook target URL..." + autofocus="autofocus" + autocapitalize="off" + autocorrect="off" + data-test-input="new-webhook-targetUrl"}} + {{gh-error-message errors=webhook.errors property="targetUrl" data-test-error="new-webhook-targetUrl"}} + {{/gh-form-group}} +
+
+ {{#gh-form-group errors=webhook.errors hasValidated=webhook.hasValidated property="secret"}} + + {{gh-text-input + value=(readonly webhook.secret) + oninput=(action (mut webhook.secret) value="target.value") + focus-out=(action "validate" "secret" target=webhook) + id="new-webhook-secret" + name="secret" + class="gh-input" + placeholder="Webhook secret..." + autofocus="autofocus" + autocapitalize="off" + autocorrect="off" + data-test-input="new-webhook-secret"}} + {{gh-error-message errors=webhook.errors property="secret" data-test-error="new-webhook-secret"}} + {{/gh-form-group}} +
+
+ +
+ + {{gh-task-button "Create" + successText="Created" + task=createWebhook + class="gh-btn gh-btn-green gh-btn-icon" + data-test-button="create-webhook"}} +
diff --git a/ghost/admin/app/templates/settings/integration-loading.hbs b/ghost/admin/app/templates/settings/integration-loading.hbs new file mode 100644 index 0000000000..4009a187c6 --- /dev/null +++ b/ghost/admin/app/templates/settings/integration-loading.hbs @@ -0,0 +1,11 @@ +
+
+

+ {{#link-to "settings.integrations" data-test-link="integrations-back"}}Integrations{{/link-to}} +

+
+ +
+ {{gh-loading-spinner}} +
+
\ No newline at end of file diff --git a/ghost/admin/app/templates/settings/integration.hbs b/ghost/admin/app/templates/settings/integration.hbs new file mode 100644 index 0000000000..703935f7ab --- /dev/null +++ b/ghost/admin/app/templates/settings/integration.hbs @@ -0,0 +1,155 @@ +
+
+
+

+ {{#link-to "settings.integrations" data-test-link="integrations-back"}}Integrations{{/link-to}} + {{svg-jar "arrow-right"}} + {{integration.name}} +

+
+ {{gh-task-button task=save class="gh-btn gh-btn-blue gh-btn-icon" data-test-button="save"}} +
+
+ +
+
+ {{#unless integration.iconImage}} + {{svg-jar "integration" class="w-100"}} + {{/unless}} +
+
+ {{#gh-validation-status-container + class="flex flex-column w-100 mr3" + errors=integration.errors + hasValidated=integration.hasValidated + property="name" + }} + + {{gh-text-input + id="integration_name" + class="gh-input" + type="text" + value=(readonly integration.name) + input=(action (mut integration.name) value="target.value") + focus-out=(action "validate" "name" target=integration) + data-test-input="name" + }} + {{gh-error-message errors=integration.errors property="name" data-test-error="name"}} + {{/gh-validation-status-container}} + + {{#gh-validation-status-container + class="flex flex-column w-100 mr3" + errors=integration.errors + hasValidated=integration.hasValidated + property="decription" + }} + + {{gh-text-input + id="integration_description" + class="gh-input" + type="text" + value=(readonly integration.description) + input=(action (mut integration.description) value="target.value") + focus-out=(action "validate" "description" target=integration) + data-test-input="description" + }} + {{gh-error-message errors=integration.errors property="description" data-test-error="description"}} + {{/gh-validation-status-container}} +
+
+
+ +
API Keys
+
+ {{#with integration.contentKey as |contentKey|}} + {{#gh-validation-status-container class="flex flex-column w-100 mr3"}} + +
+ + + {{#if showContentKeyActions}} +
+ +
+ {{/if}} +
+ {{/gh-validation-status-container}} + {{/with}} + {{#with integration.adminKey as |adminKey|}} + {{#gh-validation-status-container class="flex flex-column w-100 ml3"}} + +
+ + + {{#if showAdminKeyActions}} +
+ +
+ {{/if}} +
+ {{/gh-validation-status-container}} + {{/with}} +
+ +
Webhooks
+
+ + + + + + + + + + + {{#each filteredWebhooks as |webhook|}} + + + + + + + {{else}} + + + + {{/each}} + + + + + + +
NameEventURLLast triggered
{{webhook.name}}{{webhook.event}}{{webhook.targetUrl}}{{webhook.lastTriggeredAtUTC}}
+ No webhooks configured +
+ {{#link-to "settings.integration.webhooks.new" integration}}+ Add webhook{{/link-to}} +
+
+
+ +{{#if showUnsavedChangesModal}} + {{gh-fullscreen-modal "leave-settings" + confirm=(action "leaveScreen") + close=(action "toggleUnsavedChangesModal") + modifier="action wide"}} +{{/if}} + +{{outlet}} \ No newline at end of file diff --git a/ghost/admin/app/templates/settings/integration/webhooks/new.hbs b/ghost/admin/app/templates/settings/integration/webhooks/new.hbs new file mode 100644 index 0000000000..02290f798c --- /dev/null +++ b/ghost/admin/app/templates/settings/integration/webhooks/new.hbs @@ -0,0 +1,5 @@ +{{gh-fullscreen-modal "new-webhook" + model=webhook + confirm=(action "save") + close=(action "cancel") + modifier="action wide"}} \ No newline at end of file diff --git a/ghost/admin/app/templates/settings/integrations.hbs b/ghost/admin/app/templates/settings/integrations.hbs index 3dee70ed50..6ec65a8eda 100644 --- a/ghost/admin/app/templates/settings/integrations.hbs +++ b/ghost/admin/app/templates/settings/integrations.hbs @@ -100,6 +100,60 @@ + + {{#if config.enableDeveloperExperiments}} +
+
+ Custom integrations + {{#link-to "settings.integrations.new" class="gh-btn gh-btn-green" data-test-button="new-integration"}} + Add custom integration + {{/link-to}} +
+ +
+ {{#each integrations as |integration|}} +
+ {{#link-to "settings.integration" integration data-test-integration=integration.id}} +
+
+
+ {{#unless integration.iconImage}} + {{svg-jar "integration" class="w-100"}} + {{/unless}} +
+
+

+ {{integration.name}} +

+

+ {{integration.description}} +

+
+
+
+
+ Configure + {{svg-jar "arrow-right"}} +
+
+
+ {{/link-to}} +
+ {{else}} +
+ {{#if fetchIntegrations.isRunning}} + + {{else}} +

+ Use API keys and webhooks to create custom integrations.
+ No custom integrations. +

+ {{/if}} +
+ {{/each}} +
+
+ {{/if}} {{outlet}} \ No newline at end of file diff --git a/ghost/admin/app/templates/settings/integrations/new.hbs b/ghost/admin/app/templates/settings/integrations/new.hbs new file mode 100644 index 0000000000..a16c31eb1f --- /dev/null +++ b/ghost/admin/app/templates/settings/integrations/new.hbs @@ -0,0 +1,5 @@ +{{gh-fullscreen-modal "new-integration" + model=integration + confirm=(action "save") + close=(action "cancel") + modifier="action wide"}} \ No newline at end of file diff --git a/ghost/admin/app/validators/integration.js b/ghost/admin/app/validators/integration.js new file mode 100644 index 0000000000..d45045c7ef --- /dev/null +++ b/ghost/admin/app/validators/integration.js @@ -0,0 +1,19 @@ +import BaseValidator from './base'; +import validator from 'npm:validator'; +import {isBlank} from '@ember/utils'; + +export default BaseValidator.create({ + properties: ['name'], + + name(model) { + if (isBlank(model.name)) { + model.errors.add('name', 'Please enter a name'); + model.hasValidated.pushObject('name'); + this.invalidate(); + } else if (!validator.isLength(model.name, 0, 191)) { + model.errors.add('name', 'Name is too long, max 191 chars'); + model.hasValidated.pushObject('name'); + this.invalidate(); + } + } +}); diff --git a/ghost/admin/app/validators/webhook.js b/ghost/admin/app/validators/webhook.js new file mode 100644 index 0000000000..4759ba5010 --- /dev/null +++ b/ghost/admin/app/validators/webhook.js @@ -0,0 +1,43 @@ +import BaseValidator from './base'; +import validator from 'npm:validator'; +import {isBlank} from '@ember/utils'; + +export default BaseValidator.create({ + properties: ['name', 'event', 'targetUrl'], + + name(model) { + if (isBlank(model.name)) { + model.errors.add('name', 'Please enter a name'); + model.hasValidated.pushObject('name'); + this.invalidate(); + } else if (!validator.isLength(model.name, 0, 191)) { + model.errors.add('name', 'Name is too long, max 191 chars'); + model.hasValidated.pushObject('name'); + this.invalidate(); + } + }, + + event(model) { + if (isBlank(model.event)) { + model.errors.add('event', 'Please select an event'); + model.hasValidated.pushObject('event'); + this.invalidate(); + } + }, + + targetUrl(model) { + if (isBlank(model.targetUrl)) { + model.errors.add('targetUrl', 'Please enter a target URL'); + } else if (!validator.isURL(model.targetUrl || '', {require_protocol: false})) { + model.errors.add('targetUrl', 'Please enter a valid URL'); + } else if (!validator.isLength(model.targetUrl, 0, 2000)) { + model.errors.add('targetUrl', 'Target URL is too long, max 2000 chars'); + } + + model.hasValidated.pushObject('targetUrl'); + + if (model.errors.has('targetUrl')) { + this.invalidate(); + } + } +}); diff --git a/ghost/admin/mirage/config.js b/ghost/admin/mirage/config.js index ea10db0e0d..deab1d8775 100644 --- a/ghost/admin/mirage/config.js +++ b/ghost/admin/mirage/config.js @@ -1,5 +1,7 @@ +import mockApiKeys from './config/api-keys'; import mockAuthentication from './config/authentication'; import mockConfiguration from './config/configuration'; +import mockIntegrations from './config/integrations'; import mockInvites from './config/invites'; import mockPosts from './config/posts'; import mockRoles from './config/roles'; @@ -10,18 +12,22 @@ import mockTags from './config/tags'; import mockThemes from './config/themes'; import mockUploads from './config/uploads'; import mockUsers from './config/users'; +import mockWebhooks from './config/webhooks'; // import {versionMismatchResponse} from 'utils'; export default function () { // this.urlPrefix = ''; // make this `http://localhost:8080`, for example, if your API is on a different server - this.namespace = '/ghost/api/v0.1'; // make this `api`, for example, if your API is namespaced + this.namespace = '/ghost/api/v2/admin'; // make this `api`, for example, if your API is namespaced this.timing = 400; // delay for each request, automatically set to 0 during testing // Mock endpoints here to override real API requests during development, eg... // this.put('/posts/:id/', versionMismatchResponse); // mockTags(this); // this.loadFixtures('settings'); + mockIntegrations(this); + mockApiKeys(this); + mockWebhooks(this); // keep this line, it allows all other API requests to hit the real server this.passthrough(); diff --git a/ghost/admin/mirage/config/api-keys.js b/ghost/admin/mirage/config/api-keys.js new file mode 100644 index 0000000000..0e007dea4f --- /dev/null +++ b/ghost/admin/mirage/config/api-keys.js @@ -0,0 +1,8 @@ +import {paginatedResponse} from '../utils'; + +export default function mockApiKeys(server) { + server.get('/api-keys/', paginatedResponse('api-keys')); + server.post('/api-keys/'); + server.put('/api-keys/:id/'); + server.del('/api-keys/:id/'); +} diff --git a/ghost/admin/mirage/config/integrations.js b/ghost/admin/mirage/config/integrations.js new file mode 100644 index 0000000000..2250bea7fe --- /dev/null +++ b/ghost/admin/mirage/config/integrations.js @@ -0,0 +1,64 @@ +import moment from 'moment'; +import {Response} from 'ember-cli-mirage'; +import {paginatedResponse} from '../utils'; + +export default function mockIntegrations(server) { + server.get('/integrations/', paginatedResponse('integrations')); + + server.post('/integrations/', function ({integrations}, {requestBody}) { + let body = JSON.parse(requestBody); + let [params] = body.integrations; + + if (!params.name) { + return new Response(422, {}, {errors: [{ + errorType: 'ValidationError', + message: 'Name is required', + property: 'name' + }]}); + } + + if (integrations.findBy({name: params.name}) || params.name.match(/Duplicate/i)) { + return new Response(422, {}, {errors: [{ + errorType: 'ValidationError', + message: 'Name has already been used', + property: 'name' + }]}); + } + + // allow factory to create defaults + if (!params.slug) { + delete params.slug; + } + + // use factory creation to auto-create api keys + return server.create('integration', params); + }); + + server.put('/integrations/:id/', function (schema, {params}) { + let {integrations, apiKeys, webhooks} = schema; + let attrs = this.normalizedRequestAttrs(); + let integration = integrations.find(params.id); + let _apiKeys = []; + let _webhooks = []; + + // this is required to work around an issue with ember-cli-mirage and + // embedded records. The `attrs` object will contain POJOs of the + // embedded apiKeys and webhooks but mirage expects schema model + // objects for relations so we need to fetch model records and replace + // the relationship keys + attrs.apiKeys.forEach((apiKey) => { + _apiKeys.push(apiKeys.find(apiKey.id)); + }); + attrs.webhooks.forEach((webhook) => { + _webhooks.push(webhooks.find(webhook.id)); + }); + attrs.apiKeys = _apiKeys; + attrs.webhooks = _webhooks; + + attrs.updatedAt = moment.utc().format(); + + return integration.update(attrs); + }); + + server.del('/integrations/:id/'); +} diff --git a/ghost/admin/mirage/config/webhooks.js b/ghost/admin/mirage/config/webhooks.js new file mode 100644 index 0000000000..785cc666f9 --- /dev/null +++ b/ghost/admin/mirage/config/webhooks.js @@ -0,0 +1,67 @@ +import {Response} from 'ember-cli-mirage'; +import {isEmpty} from '@ember/utils'; +import {paginatedResponse} from '../utils'; + +export default function mockWebhooks(server) { + server.get('/webhooks/', paginatedResponse('webhooks')); + + server.post('/webhooks/', function ({webhooks}) { + let attrs = this.normalizedRequestAttrs(); + + // TODO: should mirage be handling this? + attrs.integrationId = attrs.integration; + delete attrs.integration; + + let errors = []; + + if (!attrs.name) { + errors.push({ + errorType: 'ValidationError', + message: 'Name is required', + property: 'name' + }); + } + + if (!attrs.event) { + errors.push({ + errorType: 'ValidationError', + message: 'Event is required', + property: 'event' + }); + } + + if (!attrs.targetUrl) { + errors.push({ + errorType: 'ValidationError', + message: 'Target URL is required', + property: 'target_url' + }); + } + + if (attrs.name && (webhooks.findBy({name: attrs.name, integrationId: attrs.integrationId}) || attrs.name.match(/Duplicate/i))) { + errors.push({ + errorType: 'ValidationError', + message: 'Name has already been used', + property: 'name' + }); + } + + // TODO: check server-side validation + if (webhooks.findBy({targetUrl: attrs.targetUrl, event: attrs.event})) { + errors.push({ + errorType: 'ValidationError', + message: 'Target URL has already used for this event', + property: 'target_url' + }); + } + + if (!isEmpty(errors)) { + return new Response(422, {}, {errors}); + } + + return webhooks.create(attrs); + }); + + server.put('/webhooks/:id/'); + server.del('/webhooks/:id/'); +} diff --git a/ghost/admin/mirage/factories/api-key.js b/ghost/admin/mirage/factories/api-key.js new file mode 100644 index 0000000000..772dd9e04c --- /dev/null +++ b/ghost/admin/mirage/factories/api-key.js @@ -0,0 +1,20 @@ +import moment from 'moment'; +import {Factory} from 'ember-cli-mirage'; + +export default Factory.extend({ + type: 'content', + secret() { + if (this.integration) { + return `${this.integration.slug}_${this.type}_key-12345`; + } + return `${this.type}_key-12345`; + }, + lastSeenAt() { + return moment.utc().format(); + }, + + createdAt() { return moment.utc().format(); }, + createdBy: 1, + updatedAt() { return moment.utc().format(); }, + updatedBy: 1 +}); diff --git a/ghost/admin/mirage/factories/integration.js b/ghost/admin/mirage/factories/integration.js new file mode 100644 index 0000000000..dd55fac48e --- /dev/null +++ b/ghost/admin/mirage/factories/integration.js @@ -0,0 +1,22 @@ +import moment from 'moment'; +import {Factory} from 'ember-cli-mirage'; + +export default Factory.extend({ + name(i) { return `Integration ${i + 1}`;}, + slug() { return this.name.toLowerCase().replace(' ', '-'); }, + description: null, + iconImage: null, + + createdAt() { return moment.utc().format(); }, + createdBy: 1, + updatedAt() { return moment.utc().format(); }, + updatedBy: 1, + + afterCreate(integration, server) { + let contentKey = server.create('api-key', {type: 'content', integration}); + let adminKey = server.create('api-key', {type: 'admin', integration}); + + integration.apiKeyIds = [contentKey.id, adminKey.id]; + integration.save(); + } +}); diff --git a/ghost/admin/mirage/models/api-key.js b/ghost/admin/mirage/models/api-key.js new file mode 100644 index 0000000000..5cbe41a850 --- /dev/null +++ b/ghost/admin/mirage/models/api-key.js @@ -0,0 +1,5 @@ +import {Model, belongsTo} from 'ember-cli-mirage'; + +export default Model.extend({ + integration: belongsTo() +}); diff --git a/ghost/admin/mirage/models/configuration.js b/ghost/admin/mirage/models/configuration.js new file mode 100644 index 0000000000..6bfe517e93 --- /dev/null +++ b/ghost/admin/mirage/models/configuration.js @@ -0,0 +1,4 @@ +import {Model} from 'ember-cli-mirage'; + +export default Model.extend({ +}); diff --git a/ghost/admin/mirage/models/integration.js b/ghost/admin/mirage/models/integration.js new file mode 100644 index 0000000000..1b7f212bcd --- /dev/null +++ b/ghost/admin/mirage/models/integration.js @@ -0,0 +1,6 @@ +import {Model, hasMany} from 'ember-cli-mirage'; + +export default Model.extend({ + apiKeys: hasMany(), + webhooks: hasMany() +}); diff --git a/ghost/admin/mirage/models/webhook.js b/ghost/admin/mirage/models/webhook.js new file mode 100644 index 0000000000..5cbe41a850 --- /dev/null +++ b/ghost/admin/mirage/models/webhook.js @@ -0,0 +1,5 @@ +import {Model, belongsTo} from 'ember-cli-mirage'; + +export default Model.extend({ + integration: belongsTo() +}); diff --git a/ghost/admin/mirage/scenarios/default.js b/ghost/admin/mirage/scenarios/default.js index 31ac3d4c88..cd650f3c09 100644 --- a/ghost/admin/mirage/scenarios/default.js +++ b/ghost/admin/mirage/scenarios/default.js @@ -6,4 +6,6 @@ export default function (server) { server.createList('subscriber', 125); server.createList('tag', 100); + + server.create('integration', {name: 'Demo'}); } diff --git a/ghost/admin/mirage/serializers/application.js b/ghost/admin/mirage/serializers/application.js index ed95f2f6ae..8de724e520 100644 --- a/ghost/admin/mirage/serializers/application.js +++ b/ghost/admin/mirage/serializers/application.js @@ -3,10 +3,22 @@ import {pluralize} from 'ember-cli-mirage/utils/inflector'; import {underscore} from '@ember/string'; export default RestSerializer.extend({ + keyForCollection(collection) { + return underscore(pluralize(collection)); + }, + keyForAttribute(attr) { return underscore(attr); }, + keyForRelationship(relationship) { + return underscore(relationship); + }, + + keyForEmbeddedRelationship(relationship) { + return underscore(relationship); + }, + serialize(object, request) { // Ember expects pluralized responses for the post, user, and invite models, // and this shortcut will ensure that those models are pluralized diff --git a/ghost/admin/mirage/serializers/integration.js b/ghost/admin/mirage/serializers/integration.js new file mode 100644 index 0000000000..ec64b7203d --- /dev/null +++ b/ghost/admin/mirage/serializers/integration.js @@ -0,0 +1,13 @@ +import BaseSerializer from './application'; +import {camelize} from '@ember/string'; + +export default BaseSerializer.extend({ + embed: true, + + include(request) { + if (!request.queryParams.include) { + return; + } + return request.queryParams.include.split(',').map(camelize); + } +}); diff --git a/ghost/admin/public/assets/icons/integration.svg b/ghost/admin/public/assets/icons/integration.svg new file mode 100644 index 0000000000..bda5598c0b --- /dev/null +++ b/ghost/admin/public/assets/icons/integration.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ghost/admin/tests/acceptance/settings/integrations-test.js b/ghost/admin/tests/acceptance/settings/integrations-test.js index f6b84c56ef..1d3584bc33 100644 --- a/ghost/admin/tests/acceptance/settings/integrations-test.js +++ b/ghost/admin/tests/acceptance/settings/integrations-test.js @@ -20,44 +20,87 @@ describe('Acceptance: Settings - Integrations', function () { destroyApp(application); }); - it('redirects to signin when not authenticated', async function () { - invalidateSession(application); - await visit('/settings/integrations'); + describe('access permissions', function () { + beforeEach(function () { + server.create('integration', {name: 'Test'}); + }); - expect(currentURL(), 'currentURL').to.equal('/signin'); + it('redirects /integrations/ to signin when not authenticated', async function () { + invalidateSession(application); + await visit('/settings/integrations'); + + expect(currentURL(), 'currentURL').to.equal('/signin'); + }); + + it('redirects /integrations/ to team page when authenticated as contributor', async function () { + let role = server.create('role', {name: 'Contributor'}); + server.create('user', {roles: [role], slug: 'test-user'}); + + authenticateSession(application); + await visit('/settings/integrations'); + + expect(currentURL(), 'currentURL').to.equal('/team/test-user'); + }); + + it('redirects /integrations/ to team page when authenticated as author', async function () { + let role = server.create('role', {name: 'Author'}); + server.create('user', {roles: [role], slug: 'test-user'}); + + authenticateSession(application); + await visit('/settings/integrations'); + + expect(currentURL(), 'currentURL').to.equal('/team/test-user'); + }); + + it('redirects /integrations/ to team page when authenticated as editor', async function () { + let role = server.create('role', {name: 'Editor'}); + server.create('user', {roles: [role], slug: 'test-user'}); + + authenticateSession(application); + await visit('/settings/integrations/1'); + + expect(currentURL(), 'currentURL').to.equal('/team'); + }); + + it('redirects /integrations/:id/ to signin when not authenticated', async function () { + invalidateSession(application); + await visit('/settings/integrations/1'); + + expect(currentURL(), 'currentURL').to.equal('/signin'); + }); + + it('redirects /integrations/:id/ to team page when authenticated as contributor', async function () { + let role = server.create('role', {name: 'Contributor'}); + server.create('user', {roles: [role], slug: 'test-user'}); + + authenticateSession(application); + await visit('/settings/integrations/1'); + + expect(currentURL(), 'currentURL').to.equal('/team/test-user'); + }); + + it('redirects /integrations/:id/ to team page when authenticated as author', async function () { + let role = server.create('role', {name: 'Author'}); + server.create('user', {roles: [role], slug: 'test-user'}); + + authenticateSession(application); + await visit('/settings/integrations/1'); + + expect(currentURL(), 'currentURL').to.equal('/team/test-user'); + }); + + it('redirects /integrations/:id/ to team page when authenticated as editor', async function () { + let role = server.create('role', {name: 'Editor'}); + server.create('user', {roles: [role], slug: 'test-user'}); + + authenticateSession(application); + await visit('/settings/integrations/1'); + + expect(currentURL(), 'currentURL').to.equal('/team'); + }); }); - it('redirects to team page when authenticated as contributor', async function () { - let role = server.create('role', {name: 'Contributor'}); - server.create('user', {roles: [role], slug: 'test-user'}); - - authenticateSession(application); - await visit('/settings/integrations'); - - expect(currentURL(), 'currentURL').to.equal('/team/test-user'); - }); - - it('redirects to team page when authenticated as author', async function () { - let role = server.create('role', {name: 'Author'}); - server.create('user', {roles: [role], slug: 'test-user'}); - - authenticateSession(application); - await visit('/settings/integrations'); - - expect(currentURL(), 'currentURL').to.equal('/team/test-user'); - }); - - it('redirects to team page when authenticated as editor', async function () { - let role = server.create('role', {name: 'Editor'}); - server.create('user', {roles: [role], slug: 'test-user'}); - - authenticateSession(application); - await visit('/settings/integrations'); - - expect(currentURL(), 'currentURL').to.equal('/team'); - }); - - describe('when logged in', function () { + describe('navigation', function () { beforeEach(function () { let role = server.create('role', {name: 'Administrator'}); server.create('user', {roles: [role]}); @@ -117,4 +160,283 @@ describe('Acceptance: Settings - Integrations', function () { expect(currentURL(), 'currentURL').to.equal('/settings/integrations/unsplash'); }); }); + + describe('custom integrations', function () { + beforeEach(function () { + server.loadFixtures('configurations'); + let config = server.schema.configurations.first(); + config.update({ + enableDeveloperExperiments: true + }); + + let role = server.create('role', {name: 'Administrator'}); + server.create('user', {roles: [role]}); + + return authenticateSession(application); + }); + + it('handles 404', async function () { + await visit('/settings/integrations/1'); + expect(currentPath()).to.equal('error404'); + }); + + it('can add new integration', async function () { + // sanity check + expect( + server.db.integrations.length, + 'number of integrations in db at start' + ).to.equal(0); + expect( + server.db.apiKeys.length, + 'number of apiKeys in db at start' + ).to.equal(0); + + // blank slate + await visit('/settings/integrations'); + + expect( + find('[data-test-blank="custom-integrations"]'), + 'initial blank slate' + ).to.exist; + + // new integration modal opens/closes + await click('[data-test-button="new-integration"]'); + + expect(currentURL(), 'url after clicking new').to.equal('/settings/integrations/new'); + expect(find('[data-test-modal="new-integration"]'), 'modal after clicking new').to.exist; + + await click('[data-test-button="cancel-new-integration"]'); + + expect(find('[data-test-modal="new-integration"]'), 'modal after clicking cancel') + .to.not.exist; + + expect( + find('[data-test-blank="custom-integrations"]'), + 'blank slate after cancelled creation' + ).to.exist; + + // new integration validations + await click('[data-test-button="new-integration"]'); + await click('[data-test-button="create-integration"]'); + + expect( + find('[data-test-error="new-integration-name"]').text(), + 'name error after create with blank field' + ).to.have.string('enter a name'); + + await fillIn('[data-test-input="new-integration-name"]', 'Duplicate'); + await click('[data-test-button="create-integration"]'); + + expect( + find('[data-test-error="new-integration-name"]').text(), + 'name error after create with duplicate name' + ).to.have.string('already been used'); + + // successful creation + await fillIn('[data-test-input="new-integration-name"]', 'Test'); + + expect( + find('[data-test-error="new-integration-name"]').text().trim(), + 'name error after typing in field' + ).to.be.empty; + + await click('[data-test-button="create-integration"]'); + + expect( + find('[data-test-modal="new-integration"]'), + 'modal after successful create' + ).to.not.exist; + + expect( + server.db.integrations.length, + 'number of integrations in db after create' + ).to.equal(1); + // mirage sanity check + expect( + server.db.apiKeys.length, + 'number of api keys in db after create' + ).to.equal(2); + + expect( + currentURL(), + 'url after integration creation' + ).to.equal('/settings/integrations/1'); + + // test navigation back to list then back to new integration + await click('[data-test-link="integrations-back"]'); + + expect( + currentURL(), + 'url after clicking "Back"' + ).to.equal('/settings/integrations'); + + expect( + find('[data-test-blank="custom-integrations"]'), + 'blank slate after creation' + ).to.not.exist; + + expect( + find('[data-test-custom-integration]').length, + 'number of custom integrations after creation' + ).to.equal(1); + + await click(`[data-test-integration="1"]`); + + expect( + currentURL(), + 'url after clicking integration in list' + ).to.equal('/settings/integrations/1'); + }); + + it('can manage an integration', async function () { + server.create('integration'); + + await visit('/settings/integrations/1'); + + expect( + currentURL(), + 'initial URL' + ).to.equal('/settings/integrations/1'); + + expect( + find('[data-test-screen-title]').text(), + 'screen title' + ).to.have.string('Integration 1'); + + // fields have expected values + // TODO: add test for logo + + expect( + find('[data-test-input="name"]').val(), + 'initial name value' + ).to.equal('Integration 1'); + + expect( + find('[data-test-input="description"]').val(), + 'initial description value' + ).to.equal(''); + + expect( + find('[data-test-input="content_key"]').val(), + 'content key input value' + ).to.equal('integration-1_content_key-12345'); + + expect( + find('[data-test-input="admin_key"]').val(), + 'admin key input value' + ).to.equal('integration-1_admin_key-12345'); + + // it can modify integration fields and has validation + + expect( + find('[data-test-error="name"]').text().trim(), + 'initial name error' + ).to.be.empty; + + await fillIn('[data-test-input="name"]', ''); + await triggerEvent('[data-test-input="name"]', 'blur'); + + expect( + find('[data-test-error="name"]').text(), + 'name validation for blank string' + ).to.have.string('enter a name'); + + await click('[data-test-button="save"]'); + + expect( + server.schema.integrations.first().name, + 'db integration name after failed save' + ).to.equal('Integration 1'); + + await fillIn('[data-test-input="name"]', 'Test Integration'); + await triggerEvent('[data-test-input="name"]', 'blur'); + + expect( + find('[data-test-error="name"]').text().trim(), + 'name error after valid entry' + ).to.be.empty; + + await fillIn('[data-test-input="description"]', 'Description for Test Integration'); + await triggerEvent('[data-test-input="description"]', 'blur'); + await click('[data-test-button="save"]'); + + // changes are reflected in the integrations list + + await click('[data-test-link="integrations-back"]'); + + expect( + currentURL(), + 'url after saving and clicking "back"' + ).to.equal('/settings/integrations'); + + expect( + find('[data-test-integration="1"] [data-test-text="name"]').text().trim(), + 'integration name after save' + ).to.equal('Test Integration'); + + expect( + find('[data-test-integration="1"] [data-test-text="description"]').text().trim(), + 'integration description after save' + ).to.equal('Description for Test Integration'); + + await click('[data-test-integration="1"]'); + + // warns of unsaved changes when leaving + + await fillIn('[data-test-input="name"]', 'Unsaved test'); + await click('[data-test-link="integrations-back"]'); + + expect( + find('[data-modal="unsaved-settings"]'), + 'modal shown when navigating with unsaved changes' + ).to.exist; + + await click('[data-test-stay-button]'); + + expect( + find('[data-modal="unsaved-settings"]'), + 'modal is closed after clicking "stay"' + ).to.not.exist; + + expect( + currentURL(), + 'url after clicking "stay"' + ).to.equal('/settings/integrations/1'); + + await click('[data-test-link="integrations-back"]'); + await click('[data-test-leave-button]'); + + expect( + find('[data-modal="unsaved-settings"]'), + 'modal is closed after clicking "leave"' + ).to.not.exist; + + expect( + currentURL(), + 'url after clicking "leave"' + ).to.equal('/settings/integrations'); + + expect( + find('[data-test-integration="1"] [data-test-text="name"]').text().trim(), + 'integration name after leaving unsaved changes' + ).to.equal('Test Integration'); + }); + + // test to ensure the `value=description` passed to `gh-text-input` is `readonly` + it('doesn\'t show unsaved changes modal after placing focus on description field', async function () { + server.create('integration'); + + await visit('/settings/integrations/1'); + await click('[data-test-input="description"]'); + await triggerEvent('[data-test-input="description"]', 'blur'); + await click('[data-test-link="integrations-back"]'); + + expect( + find('[data-modal="unsaved-settings"]'), + 'unsaved changes modal is not shown' + ).to.not.exist; + + expect(currentURL()).to.equal('/settings/integrations'); + }); + }); }); diff --git a/ghost/admin/tests/unit/models/api-key-test.js b/ghost/admin/tests/unit/models/api-key-test.js new file mode 100644 index 0000000000..70f677a4e1 --- /dev/null +++ b/ghost/admin/tests/unit/models/api-key-test.js @@ -0,0 +1,17 @@ +import {describe, it} from 'mocha'; +import {expect} from 'chai'; +import {setupModelTest} from 'ember-mocha'; + +describe('Unit: Model: api-key', function () { + setupModelTest('api-key', { + // Specify the other units that are required for this test. + needs: [] + }); + + // Replace this with your real tests. + it('exists', function () { + let model = this.subject(); + // var store = this.store(); + expect(model).to.be.ok; + }); +}); diff --git a/ghost/admin/tests/unit/models/integration-test.js b/ghost/admin/tests/unit/models/integration-test.js new file mode 100644 index 0000000000..df22826fae --- /dev/null +++ b/ghost/admin/tests/unit/models/integration-test.js @@ -0,0 +1,17 @@ +import {describe, it} from 'mocha'; +import {expect} from 'chai'; +import {setupModelTest} from 'ember-mocha'; + +describe('Unit: Model: integration', function () { + setupModelTest('integration', { + // Specify the other units that are required for this test. + needs: [] + }); + + // Replace this with your real tests. + it('exists', function () { + let model = this.subject(); + // var store = this.store(); + expect(model).to.be.ok; + }); +}); diff --git a/ghost/admin/tests/unit/models/webhook-test.js b/ghost/admin/tests/unit/models/webhook-test.js new file mode 100644 index 0000000000..85b21e8177 --- /dev/null +++ b/ghost/admin/tests/unit/models/webhook-test.js @@ -0,0 +1,17 @@ +import {describe, it} from 'mocha'; +import {expect} from 'chai'; +import {setupModelTest} from 'ember-mocha'; + +describe('Unit: Model: webhook', function () { + setupModelTest('webhook', { + // Specify the other units that are required for this test. + needs: [] + }); + + // Replace this with your real tests. + it('exists', function () { + let model = this.subject(); + // var store = this.store(); + expect(model).to.be.ok; + }); +}); diff --git a/ghost/admin/tests/unit/serializers/api-key-test.js b/ghost/admin/tests/unit/serializers/api-key-test.js new file mode 100644 index 0000000000..700468574b --- /dev/null +++ b/ghost/admin/tests/unit/serializers/api-key-test.js @@ -0,0 +1,23 @@ +import {describe, it} from 'mocha'; +import {expect} from 'chai'; +import {setupModelTest} from 'ember-mocha'; + +describe('Unit: Serializer: api-key', function () { + setupModelTest('api-key', { + // Specify the other units that are required for this test. + needs: [ + 'serializer:api-key', + 'model:integration', + 'transform:moment-utc' + ] + }); + + // Replace this with your real tests. + it('serializes records', function () { + let record = this.subject(); + + let serializedRecord = record.serialize(); + + expect(serializedRecord).to.be.ok; + }); +}); diff --git a/ghost/admin/tests/unit/serializers/integration-test.js b/ghost/admin/tests/unit/serializers/integration-test.js new file mode 100644 index 0000000000..1258720bc0 --- /dev/null +++ b/ghost/admin/tests/unit/serializers/integration-test.js @@ -0,0 +1,24 @@ +import {describe, it} from 'mocha'; +import {expect} from 'chai'; +import {setupModelTest} from 'ember-mocha'; + +describe('Unit: Serializer: integration', function () { + setupModelTest('integration', { + // Specify the other units that are required for this test. + needs: [ + 'serializer:integration', + 'transform:moment-utc', + 'model:api-key', + 'model:webhook' + ] + }); + + // Replace this with your real tests. + it('serializes records', function () { + let record = this.subject(); + + let serializedRecord = record.serialize(); + + expect(serializedRecord).to.be.ok; + }); +}); diff --git a/ghost/admin/tests/unit/serializers/webhook-test.js b/ghost/admin/tests/unit/serializers/webhook-test.js new file mode 100644 index 0000000000..ab68957715 --- /dev/null +++ b/ghost/admin/tests/unit/serializers/webhook-test.js @@ -0,0 +1,23 @@ +import {describe, it} from 'mocha'; +import {expect} from 'chai'; +import {setupModelTest} from 'ember-mocha'; + +describe('Unit: Serializer: webhook', function () { + setupModelTest('webhook', { + // Specify the other units that are required for this test. + needs: [ + 'transform:moment-utc', + 'serializer:webhook', + 'model:integration' + ] + }); + + // Replace this with your real tests. + it('serializes records', function () { + let record = this.subject(); + + let serializedRecord = record.serialize(); + + expect(serializedRecord).to.be.ok; + }); +});