FEATURE: Add last updated details to SMTP/IMAP group settings UI (#13396)

Adds the last updated at and by SMTP/IMAP fields to the UI, we were already storing them in the DB. Also makes sure that `imap_mailbox_name` being changed makes the last_updated_at/by field update for IMAP.

app/assets/javascripts/discourse/app/templates/components/group-imap-email-settings.hbs

@@ -24,6 +24,7 @@
         {{#if mailboxes}}
           <label for="imap_mailbox_name">{{i18n "groups.manage.email.mailboxes.synchronized"}}</label>
           {{combo-box name="imap_mailbox_name"
+            id="imap_mailbox"
             value=group.imap_mailbox_name
             valueProperty="value"
             content=mailboxes
@@ -77,4 +78,13 @@
     </label>
     <p>{{i18n "groups.manage.email.settings.allow_unknown_sender_topic_replies_hint"}}</p>
   </div>
+
+  {{#if group.imap_updated_at}}
+    <div class="group-email-last-updated-details for-imap">
+      <small>
+        {{i18n "groups.manage.email.last_updated"}} <strong>{{format-date group.imap_updated_at leaveAgo="true"}}</strong>
+        {{i18n "groups.manage.email.last_updated_by"}} {{#link-to "user" group.imap_updated_by.username}}{{group.imap_updated_by.username}}{{/link-to}}
+      </small>
+    </div>
+  {{/if}}
 </div>

app/assets/javascripts/discourse/app/templates/components/group-smtp-email-settings.hbs

@@ -55,4 +55,13 @@
       </span>
     {{/if}}
   </div>
+
+  {{#if group.smtp_updated_at}}
+    <div class="group-email-last-updated-details for-smtp">
+      <small>
+        {{i18n "groups.manage.email.last_updated"}} <strong>{{format-date group.smtp_updated_at leaveAgo="true"}}</strong>
+        {{i18n "groups.manage.email.last_updated_by"}} {{#link-to "user" group.smtp_updated_by.username}}{{group.smtp_updated_by.username}}{{/link-to}}
+      </small>
+    </div>
+  {{/if}}
 </div>

app/assets/javascripts/discourse/tests/acceptance/group-manage-email-settings-test.js

@@ -1,4 +1,8 @@
-import { acceptance, queryAll } from "discourse/tests/helpers/qunit-helpers";
+import {
+  acceptance,
+  query,
+  queryAll,
+} from "discourse/tests/helpers/qunit-helpers";
 import selectKit from "discourse/tests/helpers/select-kit-helper";
 import { click, currentRouteName, fillIn, visit } from "@ember/test-helpers";
 import I18n from "I18n";
@@ -205,6 +209,130 @@ acceptance(
   }
 );
 
+acceptance(
+  "Managing Group Email Settings - SMTP and IMAP Enabled - Settings Preflled",
+  function (needs) {
+    needs.user();
+    needs.settings({ enable_smtp: true, enable_imap: true });
+
+    needs.pretender((server, helper) => {
+      server.get("/groups/discourse.json", () => {
+        return helper.response(200, {
+          group: {
+            id: 47,
+            automatic: false,
+            name: "discourse",
+            full_name: "Awesome Team",
+            user_count: 8,
+            alias_level: 99,
+            visible: true,
+            public_admission: true,
+            public_exit: false,
+            flair_url: "fa-adjust",
+            is_group_owner: true,
+            mentionable: true,
+            messageable: true,
+            can_see_members: true,
+            has_messages: true,
+            message_count: 2,
+            smtp_server: "smtp.gmail.com",
+            smtp_port: 587,
+            smtp_ssl: true,
+            smtp_enabled: true,
+            smtp_updated_at: "2021-06-16T02:58:12.739Z",
+            smtp_updated_by: {
+              id: 19,
+              username: "eviltrout",
+              name: "Robin Ward",
+              avatar_template:
+                "/letter_avatar/eviltrout/{size}/3_f9720745f5ce6dfc2b5641fca999d934.png",
+            },
+            imap_server: "imap.gmail.com",
+            imap_port: 993,
+            imap_ssl: true,
+            imap_mailbox_name: "INBOX",
+            imap_mailboxes: ["INBOX", "[Gmail]/All Mail", "[Gmail]/Important"],
+            imap_enabled: true,
+            imap_updated_at: "2021-06-16T02:58:12.738Z",
+            imap_updated_by: {
+              id: 19,
+              username: "eviltrout",
+              name: "Robin Ward",
+              avatar_template:
+                "/letter_avatar/eviltrout/{size}/3_f9720745f5ce6dfc2b5641fca999d934.png",
+            },
+            email_username: "test@test.com",
+            email_password: "password",
+          },
+          extras: {
+            visible_group_names: ["discourse"],
+          },
+        });
+      });
+    });
+
+    test("prefills smtp and imap saved settings and shows last updated details", async function (assert) {
+      await visit("/g/discourse/manage/email");
+
+      assert.notOk(exists("#enable_smtp:disabled"), "SMTP is not disabled");
+      assert.notOk(exists("#enable_imap:disabled"), "IMAP is not disabled");
+
+      assert.equal(
+        query("[name='username']").value,
+        "test@test.com",
+        "email username is prefilled"
+      );
+      assert.equal(
+        query("[name='password']").value,
+        "password",
+        "email password is prefilled"
+      );
+      assert.equal(
+        query("[name='smtp_server']").value,
+        "smtp.gmail.com",
+        "smtp server is prefilled"
+      );
+      assert.equal(
+        query("[name='smtp_port']").value,
+        "587",
+        "smtp port is prefilled"
+      );
+
+      assert.equal(
+        query("[name='imap_server']").value,
+        "imap.gmail.com",
+        "imap server is prefilled"
+      );
+      assert.equal(
+        query("[name='imap_port']").value,
+        "993",
+        "imap port is prefilled"
+      );
+      assert.equal(
+        selectKit("#imap_mailbox").header().value(),
+        "INBOX",
+        "imap mailbox is prefilled"
+      );
+
+      const regex = /updated: (.*?) by eviltrout/;
+      assert.ok(exists(".group-email-last-updated-details.for-imap"));
+      assert.ok(
+        regex.test(
+          query(".group-email-last-updated-details.for-imap").innerText.trim()
+        ),
+        "shows last updated imap details"
+      );
+      assert.ok(exists(".group-email-last-updated-details.for-smtp"));
+      assert.ok(
+        regex.test(
+          query(".group-email-last-updated-details.for-smtp").innerText.trim()
+        ),
+        "shows last updated smtp details"
+      );
+    });
+  }
+);
+
 // acceptance(
 //   "Managing Group Email Settings - SMTP and IMAP Enabled - Email Test Invalid",
 //   function (needs) {

app/assets/stylesheets/desktop/group.scss

@@ -46,3 +46,10 @@
   width: 500px;
   max-width: 100%;
 }
+
+.group-smtp-email-settings,
+.group-imap-email-settings {
+  .group-email-last-updated-details {
+    text-align: right;
+  }
+}

app/models/group.rb

@@ -98,6 +98,7 @@ class Group < ActiveRecord::Base
     "imap_server",
     "imap_port",
     "imap_ssl",
+    "imap_mailbox_name",
     "email_username",
     "email_password"
   ]

config/locales/client.en.yml

@@ -704,6 +704,8 @@ en:
           enable_imap: "Enable IMAP"
           test_settings: "Test Settings"
           save_settings: "Save Settings"
+          last_updated: "Last updated:"
+          last_updated_by: "by"
           settings_required: "All settings are required, please fill in all fields before validation."
           smtp_settings_valid: "SMTP settings valid."
           smtp_title: "SMTP"