FEATURE: Improve group email settings UI (#13083)

FEATURE: Improve group email settings UI (#13083)

This overhauls the user interface for the group email settings management, aiming to make it a lot easier to test the settings entered and confirm they are correct before proceeding. We do this by forcing the user to test the settings before they can be saved to the database. It also includes some quality of life improvements around setting up IMAP and SMTP for our first supported provider, GMail. This PR does not remove the old group email config, that will come in a subsequent PR. This is related to IMAP support for group inboxes - announcements - Discourse Meta so read that if you would like more backstory.

UI

Both site settings of enable_imap and enable_smtp must be true to test this. You must enable SMTP first to enable IMAP.

You can prefill the SMTP settings with GMail configuration. To proceed with saving these settings you must test them, which is handled by the EmailSettingsValidator.

If there is an issue with the configuration or credentials a meaningful error message should be shown.

IMAP settings must also be validated when IMAP is enabled, before saving.

When saving IMAP, we fetch the mailboxes for that account and populate them. This mailbox must be selected and saved for IMAP to work (the feature acts as though it is disabled until the mailbox is selected and saved):

Database & Backend

This adds several columns to the Groups table. The purpose of this change is to make it much more explicit that SMTP/IMAP is enabled for a group, rather than relying on settings not being null. Also included is an UPDATE query to backfill these columns. These columns are automatically filled when updating the group.

For GMail, we now filter the mailboxes returned. This is so users cannot use a mailbox like Sent or Trash for syncing, which would generally be disastrous.

There is a new group endpoint for testing email settings. This may be useful in the future for other places in our UI, at which point it can be extracted to a more generic endpoint or module to be included.

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index a42435a..0e9654e 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -22,6 +22,7 @@
 //= require ./discourse/app/lib/offset-calculator
 //= require ./discourse/app/lib/lock-on
 //= require ./discourse/app/lib/url
+//= require ./discourse/app/lib/email-provider-default-settings
 //= require ./discourse/app/lib/debounce
 //= require ./discourse/app/lib/quote
 //= require ./discourse/app/lib/key-value-store
diff --git a/app/assets/javascripts/discourse/app/components/group-imap-email-settings.js b/app/assets/javascripts/discourse/app/components/group-imap-email-settings.js
new file mode 100644
index 0000000..012c117
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/group-imap-email-settings.js
@@ -0,0 +1,91 @@
+import Component from "@ember/component";
+import emailProviderDefaultSettings from "discourse/lib/email-provider-default-settings";
+import { isEmpty } from "@ember/utils";
+import { popupAjaxError } from "discourse/lib/ajax-error";
+import discourseComputed, { on } from "discourse-common/utils/decorators";
+import EmberObject, { action } from "@ember/object";
+import { ajax } from "discourse/lib/ajax";
+
+export default Component.extend({
+  tagName: "",
+  form: null,
+
+  @discourseComputed(
+    "group.email_username",
+    "group.email_password",
+    "form.imap_server",
+    "form.imap_port"
+  )
+  missingSettings(email_username, email_password, imap_server, imap_port) {
+    return [
+      email_username,
+      email_password,
+      imap_server,
+      imap_port,
+    ].some((value) => isEmpty(value));
+  },
+
+  @discourseComputed("group.imap_mailboxes")
+  mailboxes(imapMailboxes) {
+    if (!imapMailboxes) {
+      return [];
+    }
+    return imapMailboxes.map((mailbox) => ({ name: mailbox, value: mailbox }));
+  },
+
+  @discourseComputed("group.imap_mailbox_name", "mailboxes.length")
+  mailboxSelected(mailboxName, mailboxesSize) {
+    return mailboxesSize === 0 || !isEmpty(mailboxName);
+  },
+
+  @action
+  resetSettingsValid() {
+    this.set("imapSettingsValid", false);
+  },
+
+  @on("init")
+  _fillForm() {
+    this.set(
+      "form",
+      EmberObject.create({
+        imap_server: this.group.imap_server,
+        imap_port: (this.group.imap_port || "").toString(),
+        imap_ssl: this.group.imap_ssl,
+      })
+    );
+  },
+
+  @action
+  prefillSettings(provider) {
+    this.form.setProperties(emailProviderDefaultSettings(provider, "imap"));
+  },
+
+  @action
+  testImapSettings() {
+    const settings = {
+      host: this.form.imap_server,
+      port: this.form.imap_port,
+      ssl: this.form.imap_ssl,
+      username: this.group.email_username,
+      password: this.group.email_password,
+    };
+
+    this.set("testingSettings", true);
+    this.set("imapSettingsValid", false);
+
+    return ajax(`/groups/${this.group.id}/test_email_settings`, {
+      type: "POST",
+      data: Object.assign(settings, { protocol: "imap" }),
+    })
+      .then(() => {
+        this.set("imapSettingsValid", true);
+        this.group.setProperties({
+          imap_server: this.form.imap_server,
+          imap_port: this.form.imap_port,
+          imap_ssl: this.form.imap_ssl,
+        });
+      })
+      .catch(popupAjaxError)
+      .finally(() => this.set("testingSettings", false));
+  },
+});
diff --git a/app/assets/javascripts/discourse/app/components/group-manage-email-settings.js b/app/assets/javascripts/discourse/app/components/group-manage-email-settings.js
new file mode 100644
index 0000000..ffa586b
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/group-manage-email-settings.js
@@ -0,0 +1,116 @@
+import Component from "@ember/component";
+import { isEmpty } from "@ember/utils";
+import discourseComputed, { on } from "discourse-common/utils/decorators";
+import I18n from "I18n";
+import bootbox from "bootbox";
+import { action } from "@ember/object";
+
+export default Component.extend({
+  tagName: "",
+
+  imapSettingsValid: false,
+  smtpSettingsValid: false,
+
+  @on("init")
+  _determineSettingsValid() {
+    this.set(
+      "imapSettingsValid",
+      this.group.imap_enabled && this.group.imap_server
+    );
+    this.set(
+      "smtpSettingsValid",
+      this.group.smtp_enabled && this.group.smtp_server
+    );
+  },
+
+  @discourseComputed(
+    "emailSettingsValid",
+    "group.smtp_enabled",
+    "group.imap_enabled"
+  )
+  enableImapSettings(emailSettingsValid, smtpEnabled, imapEnabled) {
+    return smtpEnabled && (emailSettingsValid || imapEnabled);
+  },
+
+  @discourseComputed(
+    "smtpSettingsValid",
+    "imapSettingsValid",
+    "group.smtp_enabled",
+    "group.imap_enabled"
+  )
+  emailSettingsValid(
+    smtpSettingsValid,
+    imapSettingsValid,
+    smtpEnabled,
+    imapEnabled
+  ) {
+    return (
+      (!smtpEnabled || smtpSettingsValid) && (!imapEnabled || imapSettingsValid)
+    );
+  },
+
+  _anySmtpFieldsFilled() {
+    return [
+      this.group.smtp_server,
+      this.group.smtp_port,
+      this.group.email_username,
+      this.group.email_password,
+    ].some((value) => !isEmpty(value));
+  },
+
+  _anyImapFieldsFilled() {
+    return [this.group.imap_server, this.group.imap_port].some(
+      (value) => !isEmpty(value)
+    );
+  },
+
+  @action
+  smtpEnabledChange(event) {
+    if (
+      !event.target.checked &&
+      this.group.smtp_enabled &&
+      this._anySmtpFieldsFilled()
+    ) {
+      bootbox.confirm(
+        I18n.t("groups.manage.email.smtp_disable_confirm"),
+        (result) => {
+          if (!result) {
+            this.group.set("smtp_enabled", true);
+          } else {
+            this.group.set("imap_enabled", false);
+          }
+        }
+      );
+    }
+
+    this.group.set("smtp_enabled", event.target.checked);
+  },
+
+  @action
+  imapEnabledChange(event) {
+    if (
+      !event.target.checked &&
+      this.group.imap_enabled &&
+      this._anyImapFieldsFilled()
+    ) {
+      bootbox.confirm(
+        I18n.t("groups.manage.email.imap_disable_confirm"),
+        (result) => {
+          if (!result) {
+            this.group.set("imap_enabled", true);
+          }
+        }
+      );
+    }
+
+    this.group.set("imap_enabled", event.target.checked);
+  },
+
+  @action
+  afterSave() {
+    // reload the group to get the updated imap_mailboxes
+    this.store.find("group", this.group.name).then(() => {
+      this._determineSettingsValid();
+    });
+  },
+});
diff --git a/app/assets/javascripts/discourse/app/components/group-manage-save-button.js b/app/assets/javascripts/discourse/app/components/group-manage-save-button.js
index 0a92d4b..82cc182 100644
--- a/app/assets/javascripts/discourse/app/components/group-manage-save-button.js
+++ b/app/assets/javascripts/discourse/app/components/group-manage-save-button.js
@@ -7,6 +7,7 @@ import { popupAutomaticMembershipAlert } from "discourse/controllers/groups-new"
 
 export default Component.extend({
   saving: null,
+  disabled: false,
 
   @discourseComputed("saving")
   savingText(saving) {
@@ -15,6 +16,10 @@ export default Component.extend({
 
   actions: {
     save() {
+      if (this.beforeSave) {
+        this.beforeSave();
+      }
+
       this.set("saving", true);
       const group = this.model;
 
@@ -31,6 +36,10 @@ export default Component.extend({
           }
 
           this.set("saved", true);
+
+          if (this.afterSave) {
+            this.afterSave();
+          }
         })
         .catch(popupAjaxError)
         .finally(() => this.set("saving", false));
diff --git a/app/assets/javascripts/discourse/app/components/group-smtp-email-settings.js b/app/assets/javascripts/discourse/app/components/group-smtp-email-settings.js
new file mode 100644
index 0000000..d9758d2
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/group-smtp-email-settings.js

[... diff too long, it was truncated ...]

GitHub sha: 964da218

This commit appears in #13083 which was approved by udan11. It was merged by martin.