FEATURE: Allow setting avatar flair for automatic groups (#12586)

discourse · Apr 6, 2021 · e8a9917 · e8a9917
1 parent 0052fcf
commit e8a9917
Show file tree

Hide file tree

Showing 20 changed files with 389 additions and 29 deletions.
diff --git a/app/assets/javascripts/discourse/app/components/user-avatar-flair.js b/app/assets/javascripts/discourse/app/components/user-avatar-flair.js
@@ -0,0 +1,38 @@
+import MountWidget from "discourse/components/mount-widget";
+import { observes } from "discourse-common/utils/decorators";
+import autoGroupFlairForUser from "discourse/lib/avatar-flair";
+
+export default MountWidget.extend({
+  widget: "avatar-flair",
+
+  @observes("user")
+  _rerender() {
+    this.queueRerender();
+  },
+
+  buildArgs() {
+    if (!this.user) {
+      return;
+    }
+
+    if (this.user.primary_group_flair_url) {
+      return {
+        primary_group_flair_url: this.user.primary_group_flair_url,
+        primary_group_flair_bg_color: this.user.primary_group_flair_bg_color,
+        primary_group_flair_color: this.user.primary_group_flair_color,
+        primary_group_name: this.user.primary_group_name,
+      };
+    } else {
+      const autoFlairAttrs = autoGroupFlairForUser(this.site, this.user);
+      if (autoFlairAttrs) {
+        return {
+          primary_group_flair_url: autoFlairAttrs.primary_group_flair_url,
+          primary_group_flair_bg_color:
+            autoFlairAttrs.primary_group_flair_bg_color,
+          primary_group_flair_color: autoFlairAttrs.primary_group_flair_color,
+          primary_group_name: autoFlairAttrs.primary_group_name,
+        };
+      }
+    }
+  },
+});
diff --git a/app/assets/javascripts/discourse/app/lib/avatar-flair.js b/app/assets/javascripts/discourse/app/lib/avatar-flair.js
@@ -0,0 +1,66 @@
+let _autoGroupFlair, _noAutoFlair;
+
+export default function autoGroupFlairForUser(site, user) {
+  if (!_autoGroupFlair) {
+    initializeAutoGroupFlair(site);
+  }
+
+  if (_noAutoFlair) {
+    // No automatic groups have flair.
+    return null;
+  }
+
+  if (user.admin && _autoGroupFlair.admins) {
+    return _autoGroupFlair.admins;
+  }
+
+  if (user.moderator && _autoGroupFlair.moderators) {
+    return _autoGroupFlair.moderators;
+  }
+
+  if (_autoGroupFlair.staff && (user.admin || user.moderator)) {
+    return _autoGroupFlair.staff;
+  }
+
+  let trustLevel = user.trust_level || user.trustLevel;
+
+  if (trustLevel) {
+    for (let i = trustLevel; i >= 0; i--) {
+      if (_autoGroupFlair[`trust_level_${i}`]) {
+        return _autoGroupFlair[`trust_level_${i}`];
+      }
+    }
+  }
+}
+
+export function resetFlair() {
+  _autoGroupFlair = null;
+  _noAutoFlair = null;
+}
+
+function initializeAutoGroupFlair(site) {
+  _autoGroupFlair = {};
+  _noAutoFlair = true;
+
+  [
+    "admins",
+    "moderators",
+    "staff",
+    "trust_level_0",
+    "trust_level_1",
+    "trust_level_2",
+    "trust_level_3",
+    "trust_level_4",
+  ].forEach((groupName) => {
+    const group = site.groups.findBy("name", groupName);
+    if (group && group.flair_url) {
+      _noAutoFlair = false;
+      _autoGroupFlair[groupName] = {
+        primary_group_flair_url: group.flair_url,
+        primary_group_flair_bg_color: group.flair_bg_color,
+        primary_group_flair_color: group.flair_color,
+        primary_group_name: group.name.replace(/_/g, " "),
+      };
+    }
+  });
+}
diff --git a/app/assets/javascripts/discourse/app/lib/transform-post.js b/app/assets/javascripts/discourse/app/lib/transform-post.js
@@ -81,6 +81,7 @@ export function transformBasicPost(post) {
     userCustomFields: post.user_custom_fields,
     readCount: post.readers_count,
     canPublishPage: false,
+    trustLevel: post.trust_level,
   };
 
   _additionalAttributes.forEach((a) => (postAtts[a] = post[a]));

diff --git a/app/assets/javascripts/discourse/app/templates/components/groups-form-profile-fields.hbs b/app/assets/javascripts/discourse/app/templates/components/groups-form-profile-fields.hbs
@@ -26,6 +26,12 @@
   {{d-editor value=model.bio_raw class="group-form-bio input-xxlarge"}}
 </div>
 
+{{#if model.automatic}}
+  <div class="control-group">
+    {{group-flair-inputs model=model}}
+  </div>
+{{/if}}
+
 {{#if canEdit}}
   {{yield}}
 

diff --git a/app/assets/javascripts/discourse/app/templates/components/latest-topic-list-item.hbs b/app/assets/javascripts/discourse/app/templates/components/latest-topic-list-item.hbs
@@ -2,6 +2,7 @@
   {{#user-link user=topic.lastPosterUser}}
     {{avatar topic.lastPosterUser imageSize="large"}}
   {{/user-link}}
+  {{user-avatar-flair user=topic.lastPosterUser}}
   {{#if topic.lastPosterGroup}}
     {{avatar-flair
       flairURL=topic.lastPosterGroup.flair_url

diff --git a/app/assets/javascripts/discourse/app/templates/components/user-card-contents.hbs b/app/assets/javascripts/discourse/app/templates/components/user-card-contents.hbs
@@ -27,13 +27,9 @@
           {{else}}
             <a href={{this.user.path}} {{action "showUser" this.user}} class="card-huge-avatar">{{bound-avatar this.user "huge"}}</a>
           {{/if}}
-          {{#if this.user.primary_group_name}}
-            {{avatar-flair
-            flairURL=this.user.primary_group_flair_url
-            flairBgColor=this.user.primary_group_flair_bg_color
-            flairColor=this.user.primary_group_flair_color
-            groupName=this.user.primary_group_name}}
-          {{/if}}
+
+          {{user-avatar-flair user=this.user}}
+
           {{plugin-outlet name="user-card-avatar-flair" args=(hash user=this.user) tagName="div"}}
         </div>
         <div class="names">

diff --git a/app/assets/javascripts/discourse/app/templates/components/user-info.hbs b/app/assets/javascripts/discourse/app/templates/components/user-info.hbs
@@ -1,13 +1,7 @@
 <div class="user-image">
   <div class="user-image-inner">
     <a href={{this.userPath}} data-user-card={{@user.username}}>{{avatar @user imageSize="large"}}</a>
-    {{#if @user.primary_group_name}}
-      {{avatar-flair
-        flairURL=@user.primary_group_flair_url
-        flairBgColor=@user.primary_group_flair_bg_color
-        flairColor=@user.primary_group_flair_color
-        groupName=@user.primary_group_name}}
-    {{/if}}
+    {{user-avatar-flair user=@user}}
   </div>
 </div>
 

diff --git a/app/assets/javascripts/discourse/app/templates/components/user-profile-avatar.hbs b/app/assets/javascripts/discourse/app/templates/components/user-profile-avatar.hbs
@@ -1,11 +1,5 @@
 <div class="user-profile-avatar">
   {{bound-avatar @user "huge"}}
-  {{#if @user.primary_group_name}}
-    {{avatar-flair
-      flairURL=@user.primary_group_flair_url
-      flairBgColor=@user.primary_group_flair_bg_color
-      flairColor=@user.primary_group_flair_color
-      groupName=@user.primary_group_name}}
-  {{/if}}
+  {{user-avatar-flair user=@user}}
   {{plugin-outlet name="user-profile-avatar-flair" args=(hash model=@user) tagName="div"}}
 </div>
diff --git a/app/assets/javascripts/discourse/app/widgets/post.js b/app/assets/javascripts/discourse/app/widgets/post.js
@@ -20,6 +20,7 @@ import { postTransformCallbacks } from "discourse/widgets/post-stream";
 import { prioritizeNameInUx } from "discourse/lib/settings";
 import { relativeAgeMediumSpan } from "discourse/lib/formatter";
 import { transformBasicPost } from "discourse/lib/transform-post";
+import autoGroupFlairForUser from "discourse/lib/avatar-flair";
 
 function transformWithCallbacks(post) {
   let transformed = transformBasicPost(post);
@@ -187,6 +188,11 @@ createWidget("post-avatar", {
 
     if (attrs.primary_group_flair_url || attrs.primary_group_flair_bg_color) {
       result.push(this.attach("avatar-flair", attrs));
+    } else {
+      const autoFlairAttrs = autoGroupFlairForUser(this.site, attrs);
+      if (autoFlairAttrs) {
+        result.push(this.attach("avatar-flair", autoFlairAttrs));
+      }
     }
 
     result.push(h("div.poster-avatar-extra"));

diff --git a/app/assets/javascripts/discourse/app/widgets/topic-map.js b/app/assets/javascripts/discourse/app/widgets/topic-map.js
@@ -4,6 +4,7 @@ import I18n from "I18n";
 import { createWidget } from "discourse/widgets/widget";
 import { h } from "virtual-dom";
 import { replaceEmoji } from "discourse/widgets/emoji";
+import autoGroupFlairForUser from "discourse/lib/avatar-flair";
 
 const LINKS_SHOWN = 5;
 
@@ -61,6 +62,11 @@ createWidget("topic-participant", {
 
     if (attrs.primary_group_flair_url || attrs.primary_group_flair_bg_color) {
       linkContents.push(this.attach("avatar-flair", attrs));
+    } else {
+      const autoFlairAttrs = autoGroupFlairForUser(this.site, attrs);
+      if (autoFlairAttrs) {
+        linkContents.push(this.attach("avatar-flair", autoFlairAttrs));
+      }
     }
 
     return h(