UX: Move share topic warning to modal flash alert (#15012)

app/assets/javascripts/discourse/app/controllers/share-topic.js

@@ -22,15 +22,7 @@ export default Controller.extend(
       this.set("showNotifyUsers", false);
 
       if (this.model && this.model.read_restricted) {
-        Category.reloadBySlugPath(this.model.slug).then((result) => {
+        this.restrictedGroupWarning();
-          this.setProperties({
-            restrictedGroups: result.category.group_permissions.map(
-              (g) => g.group_name
-            ),
-          });
-        });
-      } else {
-        this.setProperties({ restrictedGroups: null });
       }
     },
 
@@ -55,21 +47,6 @@ export default Controller.extend(
       );
     },
 
-    @discourseComputed("restrictedGroups")
-    hasRestrictedGroups(groups) {
-      return !!groups;
-    },
-
-    @discourseComputed("restrictedGroups")
-    restrictedGroupsCount(groups) {
-      return groups.length;
-    },
-
-    @discourseComputed("restrictedGroups")
-    restrictedGroupsDisplayText(groups) {
-      return groups.join(", ");
-    },
-
     @action
     onChangeUsers(usernames) {
       this.set("users", usernames.uniq());
@@ -134,5 +111,24 @@ export default Controller.extend(
         topicTitle: this.topic.title,
       });
     },
+
+    restrictedGroupWarning() {
+      this.appEvents.on("modal:body-shown", () => {
+        let restrictedGroups;
+        Category.reloadBySlugPath(this.model.slug).then((result) => {
+          restrictedGroups = result.category.group_permissions.map(
+            (g) => g.group_name
+          );
+
+          if (restrictedGroups) {
+            const message = I18n.t("topic.share.restricted_groups", {
+              count: restrictedGroups.length,
+              groupNames: restrictedGroups.join(", "),
+            });
+            this.flash(message, "warning");
+          }
+        });
+      });
+    },
   }
 );

app/assets/javascripts/discourse/app/templates/modal/share-topic.hbs

@@ -13,12 +13,6 @@
       </div>
     </div>
 
-    {{#if hasRestrictedGroups}}
-      <div class="link-share-restricted-groups">
-        {{i18n "topic.share.restricted_groups" count=restrictedGroupsCount}}
-        {{restrictedGroupsDisplayText}}
-      </div>
-    {{/if}}
     <div class="link-share-actions">
       <div class="sources">
         {{#each sources as |s|}}

app/assets/javascripts/discourse/tests/acceptance/share-topic-test.js

@@ -61,7 +61,7 @@ acceptance("Share and Invite modal", function (needs) {
 
     assert.ok(exists(".share-topic-modal"), "it shows the modal");
     assert.ok(
-      exists(".link-share-restricted-groups"),
+      exists("#modal-alert.alert-warning"),
       "it shows restricted warning"
     );
   });

app/assets/stylesheets/common/base/share_link.scss

@@ -13,11 +13,6 @@
   }
 }
 
-.link-share-restricted-groups {
-  margin-top: 0.5em;
-  color: var(--danger-medium);
-}
-
 .link-share-actions {
   display: flex;
   flex-wrap: wrap;

config/locales/client.en.yml

@@ -2832,8 +2832,8 @@ en:
         instructions: "Share a link to this topic:"
         copied: "Topic link copied."
         restricted_groups:
-          one: "Only visible to members of group:"
+          one: "Only visible to members of group: %{groupNames}"
-          other: "Only visible to members of groups:"
+          other: "Only visible to members of groups: %{groupNames}"
         notify_users:
           title: "Notify"
           instructions: "Notify the following users about this topic:"