FIX: Show flair visibility warning when creating hidden groups with icons or uploaded images (#35517)

**Description**

When creating a group with limited visibility (ie, not everyone), the
warning about group name visibility was missing. This occurred because
the logic involved was in another component that was not rendered in
this form. After refactoring the logic involved the flair is still
visible in both places and in all other previous places.

[Meta issue
link](https://meta.discourse.org/t/warning-that-flair-will-make-group-visible-for-everyone-doesnt-work-for-image-uploads/385552)

Group creation form
**Before**

<img width="1237" height="1005" alt="imagen"
src="https://github.com/user-attachments/assets/ba4af002-1594-4830-8aa0-e4fa33cf7652"
/>

**After**

<img width="1989" height="1090" alt="imagen"
src="https://github.com/user-attachments/assets/71608738-9515-4db5-8fb4-da4a05d54c98"
/>

Manage group page
**After**
`g/test_group/manage/profile`
<img width="1393" height="1317" alt="imagen"
src="https://github.com/user-attachments/assets/7ae9c1a6-33b8-4829-9da4-d10f7010d90c"
/>

`g/test_group/manage/membership`
<img width="1426" height="1228" alt="imagen"
src="https://github.com/user-attachments/assets/ef7edfd4-baa1-4dfa-ba5f-4cf8f7e2a752"
/>

`g/test_group/manage/interaction`
<img width="1441" height="1452" alt="imagen"
src="https://github.com/user-attachments/assets/10aec54b-7a47-432d-9051-400d1b2dc3b6"
/>

frontend/discourse/app/components/group-flair-visibility-warning.gjs

@@ -0,0 +1,44 @@
+import Component from "@glimmer/component";
+import { get } from "@ember/object";
+import { dependentKeyCompat } from "@ember/object/compat";
+import { i18n } from "discourse-i18n";
+
+export default class GroupFlairVisibilityWarning extends Component {
+  @dependentKeyCompat
+  get hasFlair() {
+    const flairIcon = get(this.args.model, "flair_icon");
+    const flairUrl = get(this.args.model, "flair_url");
+    return !!(flairIcon || flairUrl);
+  }
+
+  @dependentKeyCompat
+  get privateGroupNameNotice() {
+    const visibilityLevel = get(this.args.model, "visibility_level");
+    const isPrimaryGroup = get(this.args.model, "primary_group");
+    const groupName = get(this.args.model, "name");
+
+    if (visibilityLevel === 0) {
+      return;
+    }
+
+    if (isPrimaryGroup) {
+      return i18n("admin.groups.manage.alert.primary_group", {
+        group_name: groupName,
+      });
+    } else if (this.hasFlair) {
+      return i18n("admin.groups.manage.alert.flair_group", {
+        group_name: groupName,
+      });
+    }
+  }
+
+  <template>
+    {{#if this.privateGroupNameNotice}}
+      <div class="row">
+        <div class="alert alert-warning alert-private-group-name">
+          {{this.privateGroupNameNotice}}
+        </div>
+      </div>
+    {{/if}}
+  </template>
+}

frontend/discourse/app/components/group-manage-save-button.gjs

@@ -1,10 +1,10 @@
 /* eslint-disable ember/no-classic-components */
 import Component from "@ember/component";
 import { action } from "@ember/object";
-import { or as computedOr } from "@ember/object/computed";
 import { service } from "@ember/service";
 import { or } from "truth-helpers";
 import DButton from "discourse/components/d-button";
+import GroupFlairVisibilityWarning from "discourse/components/group-flair-visibility-warning";
 import GroupDefaultNotificationsModal from "discourse/components/modal/group-default-notifications";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import discourseComputed from "discourse/lib/decorators";
@@ -13,44 +13,26 @@ import { i18n } from "discourse-i18n";
 export default class GroupManageSaveButton extends Component {
   @service modal;
   @service groupAutomaticMembersDialog;
+  @service router;
 
   saving = null;
   disabled = false;
   updateExistingUsers = null;
 
-  @computedOr("model.flair_icon", "model.flair_url") hasFlair;
-
   @discourseComputed("saving")
   savingText(saving) {
     return saving ? i18n("saving") : i18n("save");
   }
 
-  @discourseComputed(
-    "model.visibility_level",
-    "model.primary_group",
-    "hasFlair"
-  )
-  privateGroupNameNotice(visibilityLevel, isPrimaryGroup, hasFlair) {
-    if (visibilityLevel === 0) {
-      return;
-    }
-
-    if (isPrimaryGroup) {
-      return i18n("admin.groups.manage.alert.primary_group", {
-        group_name: this.model.name,
-      });
-    } else if (hasFlair) {
-      return i18n("admin.groups.manage.alert.flair_group", {
-        group_name: this.model.name,
-      });
-    }
-  }
-
   @action
   setUpdateExistingUsers(value) {
     this.updateExistingUsers = value;
   }
 
+  get shouldRenderWarningFlair() {
+    return this.router.currentRouteName !== "group.manage.membership";
+  }
+
   @action
   async save() {
     if (this.beforeSave) {
@@ -110,12 +92,8 @@ export default class GroupManageSaveButton extends Component {
   }
 
   <template>
-    {{#if this.privateGroupNameNotice}}
-      <div class="row">
-        <div class="alert alert-warning alert-private-group-name">
-          {{this.privateGroupNameNotice}}
-        </div>
-      </div>
+    {{#if this.shouldRenderWarningFlair}}
+      <GroupFlairVisibilityWarning @model={{this.model}} />
     {{/if}}
     <div class="control-group buttons group-manage-save-button">
       <DButton

frontend/discourse/app/components/groups-form-membership-fields.gjs

@@ -3,9 +3,10 @@ import Component, { Input } from "@ember/component";
 import { fn, hash } from "@ember/helper";
 import { on } from "@ember/modifier";
 import { action, computed } from "@ember/object";
-import { not, readOnly } from "@ember/object/computed";
+import { not, or as computedOr, readOnly } from "@ember/object/computed";
 import ExpandingTextArea from "discourse/components/expanding-text-area";
 import GroupFlairInputs from "discourse/components/group-flair-inputs";
+import GroupFlairVisibilityWarning from "discourse/components/group-flair-visibility-warning";
 import PluginOutlet from "discourse/components/plugin-outlet";
 import lazyHash from "discourse/helpers/lazy-hash";
 import withEventValue from "discourse/helpers/with-event-value";
@@ -20,6 +21,7 @@ export default class GroupsFormMembershipFields extends Component {
 
   @readOnly("site.can_associate_groups") showAssociatedGroups;
   @not("model.automatic") canEdit;
+  @computedOr("model.flair_icon", "model.flair_url") hasFlair;
 
   trustLevelOptions = [
     {
@@ -63,6 +65,27 @@ export default class GroupsFormMembershipFields extends Component {
     return allowMembershipRequests || visibility_level > 1;
   }
 
+  @discourseComputed(
+    "model.visibility_level",
+    "model.primary_group",
+    "hasFlair"
+  )
+  privateGroupNameNotice(visibilityLevel, isPrimaryGroup, hasFlair) {
+    if (visibilityLevel === 0) {
+      return;
+    }
+
+    if (isPrimaryGroup) {
+      return i18n("admin.groups.manage.alert.primary_group", {
+        group_name: this.model.name,
+      });
+    } else if (hasFlair) {
+      return i18n("admin.groups.manage.alert.flair_group", {
+        group_name: this.model.name,
+      });
+    }
+  }
+
   @computed("model.emailDomains")
   get emailDomains() {
     return this.model.emailDomains.split(this.tokenSeparator).filter(Boolean);
@@ -233,6 +256,7 @@ export default class GroupsFormMembershipFields extends Component {
       <div class="control-group">
         <GroupFlairInputs @model={{this.model}} />
       </div>
+      <GroupFlairVisibilityWarning @model={{this.model}} />
     {{/if}}
   </template>
 }