mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-25 09:03:12 +03:00
c33edbac08
refs https://github.com/TryGhost/Ghost/issues/10137 - adjust modal title depending on `webhook.isNew` state - add acceptance tests for modal creation - add missing mirage webhook factory - mock integrations/api-keys/webhooks in test env rather than development
243 lines
12 KiB
Handlebars
243 lines
12 KiB
Handlebars
<section class="gh-canvas">
|
|
<form {{action (perform "save") on="submit"}}>
|
|
<header class="gh-canvas-header">
|
|
<h2 class="gh-canvas-title" data-test-screen-title>
|
|
{{#link-to "settings.integrations" data-test-link="integrations-back"}}Integrations{{/link-to}}
|
|
<span>{{svg-jar "arrow-right"}}</span>
|
|
{{integration.name}}
|
|
</h2>
|
|
<section class="view-actions">
|
|
{{gh-task-button task=save class="gh-btn gh-btn-blue gh-btn-icon" data-test-button="save"}}
|
|
</section>
|
|
</header>
|
|
|
|
<div class="flex">
|
|
<div class="flex flex-column mr8 items-start">
|
|
<label>Icon</label>
|
|
<figure class="relative flex items-center h-100 ma0 br4 hide-child ba b--whitegrey-d2 pa8 mt1" style={{iconImageStyle}}>
|
|
{{#aspect-ratio-box class="flex items-center h-100" ratio="1/1" base="height"}}
|
|
{{#unless integration.iconImage}}
|
|
{{svg-jar "integration" class="w14 h-auto stroke-darkgrey"}}
|
|
{{/unless}}
|
|
{{/aspect-ratio-box}}
|
|
|
|
{{#gh-uploader
|
|
extensions=imageExtensions
|
|
onComplete=(action "setIconImage")
|
|
as |uploader|
|
|
}}
|
|
{{#if uploader.isUploading}}
|
|
<div class="absolute top-0 left-0 w-100 h-100 br4 bg-black-70 flex items-center">
|
|
{{uploader.progressBar}}
|
|
</div>
|
|
{{else}}
|
|
<button
|
|
type="button"
|
|
class="child absolute top-0 left-0 w-100 h-100 br4 b white text-center bg-black-70 f8"
|
|
{{action "triggerIconFileDialog"}}
|
|
>
|
|
Upload
|
|
</button>
|
|
{{/if}}
|
|
<div style="display:none">
|
|
{{gh-file-input
|
|
name="iconImage"
|
|
multiple=false
|
|
action=uploader.setFiles
|
|
accept=imageMimeTypes
|
|
data-test-file-input="icon"}}
|
|
</div>
|
|
{{/gh-uploader}}
|
|
</figure>
|
|
</div>
|
|
<div class="flex-auto">
|
|
{{#gh-validation-status-container
|
|
class="flex flex-column w-100 mr3"
|
|
errors=integration.errors
|
|
hasValidated=integration.hasValidated
|
|
property="name"
|
|
}}
|
|
<label for="integration_name">Name</label>
|
|
{{gh-text-input
|
|
id="integration_name"
|
|
class="gh-input mt1 mb1"
|
|
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" class="ma0"}}
|
|
{{/gh-validation-status-container}}
|
|
|
|
{{#gh-validation-status-container
|
|
class="flex flex-column w-100 mr3"
|
|
errors=integration.errors
|
|
hasValidated=integration.hasValidated
|
|
property="decription"
|
|
}}
|
|
<label for="integration_description" class="mt3">Description</label>
|
|
{{gh-text-input
|
|
id="integration_description"
|
|
class="gh-input mt1"
|
|
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" class="ma0"}}
|
|
{{/gh-validation-status-container}}
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<h4 class="mt15 midgrey f7 fw4 pb2 bb b--whitegrey">API Keys</h4>
|
|
<div class="flex flex-row mt5">
|
|
{{#with integration.contentKey as |contentKey|}}
|
|
{{#gh-validation-status-container class="flex flex-column w-100 mr5"}}
|
|
<div class="flex">
|
|
<label for="content_key" class="flex-grow-1 darkgrey fw7 f8">
|
|
Content API Key
|
|
</label>
|
|
<span class="db f8 midgrey">
|
|
{{#if copyContentKey.isRunning}}
|
|
Copied to clipboard
|
|
{{else}}
|
|
{{contentKey.lastSeenAtUTC}}
|
|
{{/if}}
|
|
</span>
|
|
</div>
|
|
<div class="relative hide-child mt1">
|
|
<input id="content_key"
|
|
class="w-100 pa3 bg-whitegrey-l2 midlightgrey ba b--whitegrey br3"
|
|
type="text"
|
|
value={{contentKey.secret}}
|
|
disabled="true"
|
|
data-test-input="content_key">
|
|
|
|
<div class="absolute top-0 right-1">
|
|
<div class="pt1 pr3 pb1 pl3 bg-black-70 child br3 f8 nudge-top--6 nudge-right--1">
|
|
<button type="button" {{action (perform copyContentKey)}} class="white fw4">Copy</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{/gh-validation-status-container}}
|
|
{{/with}}
|
|
{{#if config.enableDeveloperExperiments}}
|
|
{{#with integration.adminKey as |adminKey|}}
|
|
{{#gh-validation-status-container class="flex flex-column w-100 ml3"}}
|
|
<div class="flex">
|
|
<label for="admin_key" class="flex-grow-1 darkgrey fw7 f8">
|
|
Admin API Key
|
|
</label>
|
|
<span class="db f8 midgrey">
|
|
{{#if copyAdminKey.isRunning}}
|
|
Copied to clipboard
|
|
{{else}}
|
|
{{adminKey.lastSeenAtUTC}}
|
|
{{/if}}
|
|
</span>
|
|
</div>
|
|
<div class="relative hide-child mt1">
|
|
<input id="admin_key"
|
|
class="w-100 pa3 bg-whitegrey-l2 midlightgrey ba b--whitegrey br3"
|
|
type="text"
|
|
value={{adminKey.secret}}
|
|
disabled="true"
|
|
data-test-input="admin_key">
|
|
|
|
<div class="absolute top-0 right-1">
|
|
<div class="pt1 pr3 pb1 pl3 bg-black-70 child br3 f8 nudge-top--6 nudge-right--1">
|
|
<button type="button" {{action (perform copyAdminKey)}} class="white fw4">Copy</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{/gh-validation-status-container}}
|
|
{{/with}}
|
|
{{/if}}
|
|
</div>
|
|
|
|
<h4 class="mt15 midgrey f7 fw4">Webhooks</h4>
|
|
<div class="ba br3 b--lightgrey mt4">
|
|
<table class="ma0 w-100">
|
|
<thead>
|
|
<tr>
|
|
<th class="pa2 pl3 midlightgrey fw4 f8 bg-whitegrey-l2 br3 br--top br--left fw6">Name</th>
|
|
<th class="pa2 pl3 midlightgrey fw4 f8 bg-whitegrey-l2 br3 fw6">Event</th>
|
|
<th class="pa2 pl3 midlightgrey fw4 f8 bg-whitegrey-l2 br3 fw6">URL</th>
|
|
<th class="pa2 pl3 midlightgrey fw4 f8 bg-whitegrey-l2 br3 fw6">Last triggered</th>
|
|
<th class="pa2 pl3 bg-whitegrey-l2 br3 br--top br--right"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{#each filteredWebhooks as |webhook|}}
|
|
<tr class="hide-child bt b--whitegrey f7" data-test-webhook-row="{{webhook.id}}">
|
|
<td class="pa2 pl3" data-test-text="name">{{webhook.name}}</td>
|
|
<td class="pa2 pl3" data-test-text="event">{{event-name webhook.event}}</td>
|
|
<td class="pa2 pl3" data-test-text="targetUrl">{{webhook.targetUrl}}</td>
|
|
<td class="pa2 pl3" data-test-text="last-triggered">{{or webhook.lastTriggeredAtUTC "Not triggered"}}</td>
|
|
<td class="w1 pa2 pl3 nowrap">
|
|
<div class="child flex items-center">
|
|
{{#link-to "settings.integration.webhooks.edit" integration webhook data-test-link="edit-webhook"}}
|
|
{{svg-jar "pen" class="w6 h-auto fill-midgrey pa1 mr1"}}
|
|
{{/link-to}}
|
|
<button {{action "confirmWebhookDeletion" webhook}} data-test-button="delete-webhook">
|
|
{{svg-jar "trash" class="w6 fill-red pa1"}}
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{{else}}
|
|
<tr class="bt b--whitegrey" data-test-webhooks-blank-slate>
|
|
<td colspan="5" class="pa5 pt15 pb15 tc midgrey f7">
|
|
<span class="db">No webhooks configured</span>
|
|
<span class="dib mt1">
|
|
{{#link-to "settings.integration.webhooks.new" integration classNames="flex items-center" data-test-link="add-webhook"}}
|
|
{{svg-jar "add" class="w3 h-auto fill-blue mr1"}} Add webhook
|
|
{{/link-to}}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
{{/each}}
|
|
</tbody>
|
|
{{#if filteredWebhooks}}
|
|
<tfoot class="bt b--lightgrey">
|
|
<tr>
|
|
<td colspan="5" class="pa3 f7">
|
|
{{#link-to "settings.integration.webhooks.new" integration classNames="flex items-center" data-test-link="add-webhook"}}
|
|
{{svg-jar "add" class="w3h-auto fill-blue mr1"}} Add webhook
|
|
{{/link-to}}
|
|
</td>
|
|
</tr>
|
|
</tfoot>
|
|
{{/if}}
|
|
</table>
|
|
</div>
|
|
<button class="gh-btn gh-btn-red gh-btn-icon mb15 mt15" {{action "confirmIntegrationDeletion"}}>
|
|
<span> Delete Integration </span>
|
|
</button>
|
|
</section>
|
|
|
|
{{#if showUnsavedChangesModal}}
|
|
{{gh-fullscreen-modal "leave-settings"
|
|
confirm=(action "leaveScreen")
|
|
close=(action "toggleUnsavedChangesModal")
|
|
modifier="action wide"}}
|
|
{{/if}}
|
|
|
|
{{#if showDeleteIntegrationModal}}
|
|
{{gh-fullscreen-modal "delete-integration"
|
|
confirm=(action "deleteIntegration")
|
|
close=(action "cancelIntegrationDeletion")
|
|
modifier="action wide"}}
|
|
{{/if}}
|
|
|
|
{{#if webhookToDelete}}
|
|
{{gh-fullscreen-modal "delete-webhook"
|
|
confirm=(action "deleteWebhook")
|
|
close=(action "cancelWebhookDeletion")
|
|
modifier="action wide"}}
|
|
{{/if}}
|
|
|
|
{{outlet}} |