Swapped baseUrl input for region selection for bulk email settings

no issue

- Mailgun makes it really difficult to find your baseUrl from their UI if you've previously sent emails on a domain
- use a dropdown with flag and region name instead to better match what you can see in their UI

ghost/admin/app/components/gh-members-lab-setting.js

@@ -1,12 +1,26 @@
 import Component from '@ember/component';
 import {computed} from '@ember/object';
 import {inject as service} from '@ember/service';
+import {set} from '@ember/object';
+
+const US = {flag: '🇺🇸', name: 'US', baseUrl: 'https://api.mailgun.net/v3'};
+const EU = {flag: '🇪🇺', name: 'EU', baseUrl: 'https://api.eu.mailgun.net/v3'};
 
 export default Component.extend({
     feature: service(),
     config: service(),
     mediaQueries: service(),
 
+    mailgunRegion: computed('settings.bulkEmailSettings.baseUrl', function () {
+        if (!this.settings.get('bulkEmailSettings.baseUrl')) {
+            return US;
+        }
+
+        return [US, EU].find((region) => {
+            return region.baseUrl === this.settings.get('bulkEmailSettings.baseUrl');
+        });
+    }),
+
     blogDomain: computed('config.blogDomain', function () {
         let domain = this.config.blogDomain || '';
         const host = domain.replace('https://', '').replace('http://', '').split('/');
@@ -35,7 +49,7 @@ export default Component.extend({
 
     bulkEmailSettings: computed('settings.bulkEmailSettings', function () {
         let bulkEmailSettings = this.get('settings.bulkEmailSettings') || {};
-        const {apiKey = '', baseUrl = '', domain = ''} = bulkEmailSettings;
+        const {apiKey = '', baseUrl = US.baseUrl, domain = ''} = bulkEmailSettings;
         return {apiKey, baseUrl, domain};
     }),
 
@@ -48,6 +62,11 @@ export default Component.extend({
         return this.get('settings.defaultContentVisibility');
     }),
 
+    init() {
+        this._super(...arguments);
+        this.set('mailgunRegions', [US, EU]);
+    },
+
     actions: {
         setDefaultContentVisibility(value) {
             this.setDefaultContentVisibility(value);
@@ -55,6 +74,14 @@ export default Component.extend({
         setBulkEmailSettings(key, event) {
             let bulkEmailSettings = this.get('settings.bulkEmailSettings') || {};
             bulkEmailSettings[key] = event.target.value;
+            if (!bulkEmailSettings.baseUrl) {
+                set(bulkEmailSettings, 'baseUrl', US.baseUrl);
+            }
+            this.setBulkEmailSettings(bulkEmailSettings);
+        },
+        setBulkEmailRegion(region) {
+            let bulkEmailSettings = this.get('settings.bulkEmailSettings') || {};
+            set(bulkEmailSettings, 'baseUrl', region.baseUrl);
             this.setBulkEmailSettings(bulkEmailSettings);
         },
         setSubscriptionSettings(key, event) {

ghost/admin/app/controllers/settings/labs.js

@@ -53,6 +53,7 @@ export default Controller.extend({
     jsonMimeType: null,
     yamlExtension: null,
     yamlMimeType: null,
+
     init() {
         this._super(...arguments);
         this.importMimeType = IMPORT_MIME_TYPES;

ghost/admin/app/styles/components/power-select.css

@@ -240,3 +240,13 @@
     stroke: var(--blue);
     fill: var(--blue);
 }
+
+/* Inside settings */
+/* TODO: make these general styles? */
+
+.form-group .ember-power-select-trigger {
+    padding: 6px 12px;
+}
+.form-group .ember-power-select-selected-item {
+    margin-left: 0;
+}

ghost/admin/app/templates/components/gh-members-lab-setting.hbs

@@ -185,14 +185,24 @@
             </div>
             <div class="f8 fw4 midgrey mt1">Your members will receive system emails from this address</div>
             {{/gh-form-group}}
+
             {{#unless hasBulkEmailConfig}}
                 {{#gh-form-group}}
-                <label class="fw6 f8">Mailgun base url</label>
-                {{gh-text-input
-                    value=(readonly bulkEmailSettings.baseUrl)
-                    input=(action "setBulkEmailSettings" "baseUrl")
-                    class="mt1"
-                }}
+                    <label class="fw6 f8">Mailgun region</label>
+                    <div class="mt1">
+                        {{#power-select
+                            options=this.mailgunRegions
+                            selected=this.mailgunRegion
+                            onchange=(action "setBulkEmailRegion")
+                            searchEnabled=false
+                            as |region|
+                        }}
+                            {{region.flag}} {{region.name}}
+                        {{/power-select}}
+                    </div>
+                    <a href="https://app.mailgun.com/app/sending/domains" target="_blank" class="mt1 fw4 f8">
+                        Find your Mailgun region next to your domain here &raquo;
+                    </a>
                 {{/gh-form-group}}
                 {{#gh-form-group}}
                     <label class="fw6 f8">Mailgun domain</label>