UX: inform staff users that new users will be auto-approved on invite (#11062)

When `must_approve_users` is enabled then staff users assume that all
users will have to be approved manually. But in case of invite we
auto-approve users if they are invited by users. This commit adds an
info on the bottom of invite modal informing staff users that new users
will be auto-approved as soon as they accept invite.

app/assets/javascripts/discourse/app/components/invite-link-panel.js

@@ -1,7 +1,7 @@
 import I18n from "I18n";
 import Component from "@ember/component";
 import Group from "discourse/models/group";
-import { alias, readOnly } from "@ember/object/computed";
+import { and, readOnly } from "@ember/object/computed";
 import { action } from "@ember/object";
 import discourseComputed from "discourse-common/utils/decorators";
 import Invite from "discourse/models/invite";
@@ -10,13 +10,12 @@ export default Component.extend({
   inviteModel: readOnly("panel.model.inviteModel"),
   userInvitedShow: readOnly("panel.model.userInvitedShow"),
   isStaff: readOnly("currentUser.staff"),
+  isAdmin: readOnly("currentUser.admin"),
   maxRedemptionAllowed: 5,
   inviteExpiresAt: moment().add(1, "month").format("YYYY-MM-DD"),
   groupIds: null,
   allGroups: null,
 
-  isAdmin: alias("currentUser.admin"),
-
   init() {
     this._super(...arguments);
     this.setDefaultSelectedGroups();
@@ -52,6 +51,8 @@ export default Component.extend({
     );
   },
 
+  showApprovalMessage: and("isStaff", "siteSettings.must_approve_users"),
+
   reset() {
     this.setProperties({
       maxRedemptionAllowed: 5,

app/assets/javascripts/discourse/app/components/invite-panel.js

@@ -2,7 +2,7 @@ import I18n from "I18n";
 import discourseComputed from "discourse-common/utils/decorators";
 import { isEmpty } from "@ember/utils";
 import EmberObject, { action } from "@ember/object";
-import { alias, and, equal } from "@ember/object/computed";
+import { alias, and, equal, readOnly } from "@ember/object/computed";
 import Component from "@ember/component";
 import { emailValid } from "discourse/lib/utilities";
 import Group from "discourse/models/group";
@@ -17,6 +17,8 @@ export default Component.extend({
 
   inviteModel: alias("panel.model.inviteModel"),
   userInvitedShow: alias("panel.model.userInvitedShow"),
+  isStaff: readOnly("currentUser.staff"),
+  isAdmin: readOnly("currentUser.admin"),
 
   // If this isn't defined, it will proxy to the user topic on the preferences
   // page which is wrong.
@@ -26,8 +28,6 @@ export default Component.extend({
   inviteIcon: "envelope",
   invitingExistingUserToTopic: false,
 
-  isAdmin: alias("currentUser.admin"),
-
   init() {
     this._super(...arguments);
     this.setDefaultSelectedGroups();
@@ -288,6 +288,8 @@ export default Component.extend({
       : "topic.invite_reply.username_placeholder";
   },
 
+  showApprovalMessage: and("isStaff", "siteSettings.must_approve_users"),
+
   customMessagePlaceholder: i18n("invite.custom_message_placeholder"),
 
   // Reset the modal to allow a new user to be invited.

app/assets/javascripts/discourse/app/templates/components/invite-link-panel.hbs

@@ -41,6 +41,11 @@
       }}
     </div>
 
+    {{#if showApprovalMessage}}
+      <label class="instructions approval-notice">
+        {{i18n "invite.approval_not_required"}}
+      </label>
+    {{/if}}
   {{/if}}
 </div>
 

app/assets/javascripts/discourse/app/templates/components/invite-panel.hbs

@@ -76,6 +76,12 @@
       </div>
     {{/if}}
   {{/if}}
+
+  {{#if showApprovalMessage}}
+    <label class="instructions approval-notice">
+      {{i18n "invite.approval_not_required"}}
+    </label>
+  {{/if}}
 </div>
 
 <div class="footer">

app/assets/stylesheets/common/components/share-and-invite-modal.scss

@@ -94,6 +94,10 @@
       margin-bottom: 8px;
     }
 
+    .instructions.approval-notice {
+      color: var(--secondary-medium);
+    }
+
     .email-or-username-input {
       width: 100%;
     }

config/locales/client.en.yml

@@ -3484,6 +3484,7 @@ en:
     invite:
       custom_message: "Make your invite a little bit more personal by writing a <a href>custom message</a>."
       custom_message_placeholder: "Enter your custom message"
+      approval_not_required: "User will be auto-approved as soon as they will accept this invite."
       custom_message_template_forum: "Hey, you should join this forum!"
       custom_message_template_topic: "Hey, I thought you might enjoy this topic!"