FIX: Reuse avatar-flair component in group preview (#13961)

Sometimes the group flair preview was different than the real group
flair because different components were used for rendering.

app/assets/javascripts/discourse/app/components/group-flair-inputs.js

@@ -8,9 +8,7 @@ import { action } from "@ember/object";
 import { ajax } from "discourse/lib/ajax";
 import { convertIconClass } from "discourse-common/lib/icon-library";
 import discourseDebounce from "discourse-common/lib/debounce";
-import { escapeExpression } from "discourse/lib/utilities";
 import getURL from "discourse-common/lib/get-url";
-import { htmlSafe } from "@ember/template";
 
 export default Component.extend({
   classNames: ["group-flair-inputs"],
@@ -39,6 +37,10 @@ export default Component.extend({
   },
 
   _loadIcon() {
+    if (!this.model.flair_icon) {
+      return;
+    }
+
     const icon = convertIconClass(this.model.flair_icon),
       c = "#svg-sprites",
       h = "ajax-icon-holder",
@@ -71,42 +73,6 @@ export default Component.extend({
     return flairUrl && flairUrl.includes("/") ? flairUrl : null;
   },
 
-  @discourseComputed(
-    "model.flair_url",
-    "flairPreviewImage",
-    "model.flairBackgroundHexColor",
-    "model.flairHexColor"
-  )
-  flairPreviewStyle(
-    flairUrl,
-    flairPreviewImage,
-    flairBackgroundHexColor,
-    flairHexColor
-  ) {
-    let style = "";
-
-    if (flairPreviewImage) {
-      style += `background-image: url(${escapeExpression(flairUrl)});`;
-    }
-
-    if (flairBackgroundHexColor) {
-      style += `background-color: #${flairBackgroundHexColor};`;
-    }
-
-    if (flairHexColor) {
-      style += `color: #${flairHexColor};`;
-    }
-
-    return htmlSafe(style);
-  },
-
-  @discourseComputed("model.flairBackgroundHexColor")
-  flairPreviewClasses(flairBackgroundHexColor) {
-    if (flairBackgroundHexColor) {
-      return "rounded";
-    }
-  },
-
   @discourseComputed("flairPreviewImage")
   flairPreviewLabel(flairPreviewImage) {
     const key = flairPreviewImage ? "image" : "icon";

app/assets/javascripts/discourse/app/templates/components/group-flair-inputs.hbs

@@ -61,12 +61,13 @@
       <img width="45" height="45" src={{demoAvatarUrl}} class="avatar actor" alt="" role="presentation">
     </div>
 
-    {{#if flairPreviewImage}}
+    {{#if (or model.flair_icon flairImageUrl model.flairBackgroundHexColor)}}
-      <div class="avatar-flair demo {{flairPreviewClasses}}" style={{flairPreviewStyle}}></div>
+      {{avatar-flair
-    {{else if flairPreviewIcon}}
+        flairName=model.name
-      <div class="avatar-flair demo {{flairPreviewClasses}}" style={{flairPreviewStyle}} role="presentation">
+        flairUrl=(if flairPreviewIcon model.flair_icon (if flairPreviewImage flairImageUrl ""))
-        {{d-icon flairPreviewIconUrl}}
+        flairBgColor=model.flairBackgroundHexColor
-      </div>
+        flairColor=model.flairHexColor
+      }}
     {{/if}}
   </div>
 </div>

app/assets/javascripts/discourse/app/templates/group.hbs

@@ -9,16 +9,16 @@
 
   <div class="group-details-container">
     <div class="group-info">
-      {{#if model.flair_url}}
+      <div class="group-avatar-flair">
-        <div class="group-avatar-flair">
+        {{#if (or model.flair_icon model.flair_url model.flair_bg_color)}}
           {{avatar-flair
             flairName=model.name
-            flairUrl=model.flair_url
+            flairUrl=(or model.flair_icon model.flair_url)
             flairBgColor=model.flair_bg_color
             flairColor=model.flair_color
           }}
-        </div>
+        {{/if}}
-      {{/if}}
+      </div>
 
       <div class="group-info-names">
         <span class="group-info-name">{{groupName}}</span>