From 9955f1774d45eedbffcc64b8ea0e260ea5130187 Mon Sep 17 00:00:00 2001
From: jbrw <jamie@goatforce5.org>
Date: Thu, 18 Nov 2021 19:24:15 -0500
Subject: [PATCH] UX: Move share topic warning to modal flash alert (#15012)

---
 .../discourse/app/controllers/share-topic.js  | 44 +++++++++----------
 .../app/templates/modal/share-topic.hbs       |  6 ---
 .../tests/acceptance/share-topic-test.js      |  2 +-
 .../stylesheets/common/base/share_link.scss   |  5 ---
 config/locales/client.en.yml                  |  4 +-
 5 files changed, 23 insertions(+), 38 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/controllers/share-topic.js b/app/assets/javascripts/discourse/app/controllers/share-topic.js
index e3cf0ed5c92..3c54976d9b5 100644
--- a/app/assets/javascripts/discourse/app/controllers/share-topic.js
+++ b/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.setProperties({
-            restrictedGroups: result.category.group_permissions.map(
-              (g) => g.group_name
-            ),
-          });
-        });
-      } else {
-        this.setProperties({ restrictedGroups: null });
+        this.restrictedGroupWarning();
       }
     },
 
@@ -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");
+          }
+        });
+      });
+    },
   }
 );
diff --git a/app/assets/javascripts/discourse/app/templates/modal/share-topic.hbs b/app/assets/javascripts/discourse/app/templates/modal/share-topic.hbs
index ff2de507144..330637850b8 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/share-topic.hbs
+++ b/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|}}
diff --git a/app/assets/javascripts/discourse/tests/acceptance/share-topic-test.js b/app/assets/javascripts/discourse/tests/acceptance/share-topic-test.js
index 3446b53f2ab..21f6373f5bd 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/share-topic-test.js
+++ b/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"
     );
   });
diff --git a/app/assets/stylesheets/common/base/share_link.scss b/app/assets/stylesheets/common/base/share_link.scss
index 396d2c8a1c4..9a830ea371b 100644
--- a/app/assets/stylesheets/common/base/share_link.scss
+++ b/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;
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 7fe17831b6d..3b275eab944 100644
--- a/config/locales/client.en.yml
+++ b/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:"
-          other: "Only visible to members of groups:"
+          one: "Only visible to members of group: %{groupNames}"
+          other: "Only visible to members of groups: %{groupNames}"
         notify_users:
           title: "Notify"
           instructions: "Notify the following users about this topic:"