Ghost-Admin/app/components/modal-new-integration.hbs

<header class="modal-header" data-test-modal="new-integration">
    <h1>New custom integration</h1>
</header>
{{!-- disable mouseDown so it doesn't trigger focus-out validations --}}
<button class="close" href title="Close" {{action "closeModal"}} {{action (optional this.noop) on="mouseDown"}}>
    {{svg-jar "close"}}
</button>

<div class="modal-body">
    <fieldset>
        <GhFormGroup @errors={{this.integration.errors}} @hasValidated={{this.integration.hasValidated}} @property="name">
            <label for="new-integration-name" class="fw6">Name</label>
            <input type="text"
                value={{this.integration.name}}
                oninput={{action "updateName" value="target.value"}}
                id="new-integration-name"
                class="gh-input mt1"
                placeholder="Integration name..."
                name="integration-name"
                autofocus="autofocus"
                autocapitalize="off"
                autocorrect="off"
                data-test-input="new-integration-name">
            <GhErrorMessage @errors={{this.integration.errors}} @property="name" data-test-error="new-integration-name" />
        </GhFormGroup>
    </fieldset>
</div>

<div class="modal-footer">
    <button
        class="gh-btn"
        {{action "closeModal"}}
        {{!-- disable mouseDown so it doesn't trigger focus-out validations --}}
        {{action (optional this.noop) on="mouseDown"}}
        data-test-button="cancel-new-integration"
    >
        <span>Cancel</span>
    </button>
    <GhTaskButton @buttonText="Create"
        @successText="Created"
        @task={{this.createIntegration}}
        @class="gh-btn gh-btn-green gh-btn-icon"
        data-test-button="create-integration" />
</div>