Ghost/ghost/admin/app/controllers/settings/integration.js

184 lines
4.6 KiB
JavaScript
Raw Normal View History

import Controller from '@ember/controller';
import DeleteIntegrationModal from '../../components/settings/integrations/delete-integration-modal';
import DeleteWebhookModal from '../../components/settings/integrations/delete-webhook-modal';
import config from 'ghost-admin/config/environment';
import copyTextToClipboard from 'ghost-admin/utils/copy-text-to-clipboard';
import {
IMAGE_EXTENSIONS,
IMAGE_MIME_TYPES
} from 'ghost-admin/components/gh-image-uploader';
import {action} from '@ember/object';
import {htmlSafe} from '@ember/template';
Fixed hosting management screen not loading after sign-in process (#15763) refs https://github.com/TryGhost/Team/issues/2110 - dynamically defined properties on the config service did not have autotracking set up properly if they were accessed in any way before the property was defined, this caused problems in a number of areas because we have both "unauthed" and "authed" sets of config and when not logged in we had parts of the app checking for authed config properties that don't exist until after sign-in and subsequent config re-fetch - renamed `config` service to `configManager` and updated to only contain methods for fetching config data - added a `config` instance initializer that sets up a `TrackedObject` instance with some custom properties/methods and registers it on `config:main` - uses application instance initializer rather than a standard initializer because standard initializers are only called once when setting up the test suite so we'd end up with config leaking across tests - added an `@inject` decorator that when used takes the property name and injects whatever is registered at `${propertyName}:main`, this allows us to use dependency injection for any object rather than just services or controllers - using `application.inject()` in the initializer was initially used but that only works for objects that extend from `EmberObject`, the injections weren't available in native-class glimmer components so this decorator keeps the injection syntax consistent - swapped all `@service config` uses to `@inject config`
2022-11-03 14:14:36 +03:00
import {inject} from 'ghost-admin/decorators/inject';
import {inject as service} from '@ember/service';
import {task, timeout} from 'ember-concurrency';
import {tracked} from '@glimmer/tracking';
export default class IntegrationController extends Controller {
@service ghostPaths;
@service modals;
Fixed hosting management screen not loading after sign-in process (#15763) refs https://github.com/TryGhost/Team/issues/2110 - dynamically defined properties on the config service did not have autotracking set up properly if they were accessed in any way before the property was defined, this caused problems in a number of areas because we have both "unauthed" and "authed" sets of config and when not logged in we had parts of the app checking for authed config properties that don't exist until after sign-in and subsequent config re-fetch - renamed `config` service to `configManager` and updated to only contain methods for fetching config data - added a `config` instance initializer that sets up a `TrackedObject` instance with some custom properties/methods and registers it on `config:main` - uses application instance initializer rather than a standard initializer because standard initializers are only called once when setting up the test suite so we'd end up with config leaking across tests - added an `@inject` decorator that when used takes the property name and injects whatever is registered at `${propertyName}:main`, this allows us to use dependency injection for any object rather than just services or controllers - using `application.inject()` in the initializer was initially used but that only works for objects that extend from `EmberObject`, the injections weren't available in native-class glimmer components so this decorator keeps the injection syntax consistent - swapped all `@service config` uses to `@inject config`
2022-11-03 14:14:36 +03:00
@inject config;
imageExtensions = IMAGE_EXTENSIONS;
imageMimeTypes = IMAGE_MIME_TYPES;
@tracked showRegenerateKeyModal = false;
@tracked selectedApiKey = null;
@tracked isApiKeyRegenerated = false;
constructor() {
super(...arguments);
if (this.isTesting === undefined) {
this.isTesting = config.environment === 'test';
}
}
get integration() {
return this.model;
}
get apiUrl() {
let origin = window.location.origin;
let subdir = this.ghostPaths.subdir;
let url = this.ghostPaths.url.join(origin, subdir);
return url.replace(/\/$/, '');
}
get regeneratedKeyType() {
if (this.isApiKeyRegenerated) {
return this.selectedApiKey.type;
}
return null;
}
get allWebhooks() {
return this.store.peekAll('webhook');
}
get filteredWebhooks() {
return this.allWebhooks.filter((webhook) => {
let matchesIntegration = webhook.belongsTo('integration').id() === this.integration.id;
return matchesIntegration
&& !webhook.isNew
&& !webhook.isDeleted;
});
}
get iconImageStyle() {
let url = this.integration.iconImage;
if (url) {
let styles = [
`background-image: url(${url})`,
'background-size: 50%',
'background-position: 50%',
'background-repeat: no-repeat'
];
return htmlSafe(styles.join('; '));
}
return htmlSafe('');
}
@action
triggerIconFileDialog(event) {
event.preventDefault();
let input = document.querySelector('input[type="file"][name="iconImage"]');
input.click();
}
@action
updateProperty(property, event) {
this.integration.set(property, event.target.value);
}
@action
validateProperty(property) {
this.integration.validate({property});
}
@action
setIconImage([image]) {
this.integration.set('iconImage', image.url);
}
@action
save() {
return this.saveTask.perform();
}
@action
confirmIntegrationDeletion(event) {
event?.preventDefault();
return this.modals.open(DeleteIntegrationModal, {
integration: this.integration
});
}
@action
confirmRegenerateKeyModal(apiKey, event) {
event?.preventDefault();
this.showRegenerateKeyModal = true;
this.isApiKeyRegenerated = false;
this.selectedApiKey = apiKey;
}
@action
cancelRegenerateKeyModal(event) {
event?.preventDefault();
this.showRegenerateKeyModal = false;
}
@action
regenerateKey(event) {
event?.preventDefault();
this.isApiKeyRegenerated = true;
}
@action
confirmWebhookDeletion(webhook, event) {
event?.preventDefault();
return this.modals.open(DeleteWebhookModal, {webhook});
}
@action
deleteWebhook(event) {
event?.preventDefault();
return this.webhookToDelete.destroyRecord();
}
@task
*saveTask() {
try {
return yield this.integration.save();
} catch (e) {
if (e === undefined) {
// validation error
return false;
}
throw e;
}
}
@task
*copyContentKey() {
copyTextToClipboard(this.integration.contentKey.secret);
yield timeout(this.isTesting ? 50 : 3000);
}
@task
*copyAdminKey() {
copyTextToClipboard(this.integration.adminKey.secret);
yield timeout(this.isTesting ? 50 : 3000);
}
@task
*copyApiUrl() {
copyTextToClipboard(this.apiUrl);
yield timeout(this.isTesting ? 50 : 3000);
}
}