FEATURE: Let users select flair (#13587)

FEATURE: Let users select flair (#13587)

User flair was given by user’s primary group. This PR separates the two, adds a new field to the user model for flair group ID and users can select their flair from user preferences now.

diff --git a/app/assets/javascripts/discourse/app/components/avatar-flair.js b/app/assets/javascripts/discourse/app/components/avatar-flair.js
index 8e6331d..dbc3020 100644
--- a/app/assets/javascripts/discourse/app/components/avatar-flair.js
+++ b/app/assets/javascripts/discourse/app/components/avatar-flair.js
@@ -4,17 +4,17 @@ import { observes } from "discourse-common/utils/decorators";
 export default MountWidget.extend({
   widget: "avatar-flair",
 
-  @observes("flairURL", "flairBgColor", "flairColor")
+  @observes("flairName", "flairUrl", "flairBgColor", "flairColor")
   _rerender() {
     this.queueRerender();
   },
 
   buildArgs() {
     return {
-      primary_group_flair_url: this.flairURL,
-      primary_group_flair_bg_color: this.flairBgColor,
-      primary_group_flair_color: this.flairColor,
-      primary_group_name: this.groupName,
+      flair_name: this.flairName,
+      flair_url: this.flairUrl,
+      flair_bg_color: this.flairBgColor,
+      flair_color: this.flairColor,
     };
   },
 });
diff --git a/app/assets/javascripts/discourse/app/components/group-flair-inputs.js b/app/assets/javascripts/discourse/app/components/group-flair-inputs.js
index 5a53a6f..b6a9cba 100644
--- a/app/assets/javascripts/discourse/app/components/group-flair-inputs.js
+++ b/app/assets/javascripts/discourse/app/components/group-flair-inputs.js
@@ -67,8 +67,8 @@ export default Component.extend({
   },
 
   @discourseComputed("model.flair_url")
-  flairImageUrl(flairURL) {
-    return flairURL && flairURL.match(/\//) ? flairURL : null;
+  flairImageUrl(flairUrl) {
+    return flairUrl && flairUrl.includes("/") ? flairUrl : null;
   },
 
   @discourseComputed(
@@ -78,7 +78,7 @@ export default Component.extend({
     "model.flairHexColor"
   )
   flairPreviewStyle(
-    flairURL,
+    flairUrl,
     flairPreviewImage,
     flairBackgroundHexColor,
     flairHexColor
@@ -86,7 +86,7 @@ export default Component.extend({
     let style = "";
 
     if (flairPreviewImage) {
-      style += `background-image: url(${escapeExpression(flairURL)});`;
+      style += `background-image: url(${escapeExpression(flairUrl)});`;
     }
 
     if (flairBackgroundHexColor) {
diff --git a/app/assets/javascripts/discourse/app/components/user-avatar-flair.js b/app/assets/javascripts/discourse/app/components/user-avatar-flair.js
index 35def72..079de88 100644
--- a/app/assets/javascripts/discourse/app/components/user-avatar-flair.js
+++ b/app/assets/javascripts/discourse/app/components/user-avatar-flair.js
@@ -10,28 +10,23 @@ export default Component.extend({
     if (!user) {
       return;
     }
-    return this.primaryGroupFlair(user) || this.automaticGroupFlair(user);
-  },
 
-  primaryGroupFlair(user) {
-    if (user.primary_group_flair_url || user.primary_group_flair_bg_color) {
+    if (user.flair_url || user.flair_bg_color) {
       return {
-        flairURL: user.primary_group_flair_url,
-        flairBgColor: user.primary_group_flair_bg_color,
-        flairColor: user.primary_group_flair_color,
-        groupName: user.primary_group_name,
+        flairName: user.flair_name,
+        flairUrl: user.flair_url,
+        flairBgColor: user.flair_bg_color,
+        flairColor: user.flair_color,
       };
     }
-  },
 
-  automaticGroupFlair(user) {
     const autoFlairAttrs = autoGroupFlairForUser(this.site, user);
     if (autoFlairAttrs) {
       return {
-        flairURL: autoFlairAttrs.primary_group_flair_url,
-        flairBgColor: autoFlairAttrs.primary_group_flair_bg_color,
-        flairColor: autoFlairAttrs.primary_group_flair_color,
-        groupName: autoFlairAttrs.primary_group_name,
+        flairName: autoFlairAttrs.flair_name,
+        flairUrl: autoFlairAttrs.flair_url,
+        flairBgColor: autoFlairAttrs.flair_bg_color,
+        flairColor: autoFlairAttrs.flair_color,
       };
     }
   },
diff --git a/app/assets/javascripts/discourse/app/controllers/group.js b/app/assets/javascripts/discourse/app/controllers/group.js
index ba0b0ed..416bf58 100644
--- a/app/assets/javascripts/discourse/app/controllers/group.js
+++ b/app/assets/javascripts/discourse/app/controllers/group.js
@@ -101,21 +101,6 @@ export default Controller.extend({
     return (fullName || displayName).capitalize();
   },
 
-  @discourseComputed(
-    "model.name",
-    "model.flair_url",
-    "model.flair_bg_color",
-    "model.flair_color"
-  )
-  avatarFlairAttributes(groupName, flairURL, flairBgColor, flairColor) {
-    return {
-      primary_group_flair_url: flairURL,
-      primary_group_flair_bg_color: flairBgColor,
-      primary_group_flair_color: flairColor,
-      primary_group_name: groupName,
-    };
-  },
-
   @discourseComputed("model.messageable")
   displayGroupMessageButton(messageable) {
     return this.currentUser && messageable;
diff --git a/app/assets/javascripts/discourse/app/controllers/preferences/account.js b/app/assets/javascripts/discourse/app/controllers/preferences/account.js
index d78d084..c474ed1 100644
--- a/app/assets/javascripts/discourse/app/controllers/preferences/account.js
+++ b/app/assets/javascripts/discourse/app/controllers/preferences/account.js
@@ -15,7 +15,12 @@ export default Controller.extend(CanCheckEmails, {
   init() {
     this._super(...arguments);
 
-    this.saveAttrNames = ["name", "title", "primary_group_id"];
+    this.saveAttrNames = [
+      "name",
+      "title",
+      "primary_group_id",
+      "flair_group_id",
+    ];
     this.set("revoking", {});
   },
 
@@ -45,6 +50,7 @@ export default Controller.extend(CanCheckEmails, {
   },
 
   canSelectTitle: gt("model.availableTitles.length", 0),
+  canSelectFlair: gt("model.availableFlairs.length", 0),
 
   @discourseComputed("model.filteredGroups")
   canSelectPrimaryGroup(primaryGroupOptions) {
@@ -132,6 +138,7 @@ export default Controller.extend(CanCheckEmails, {
         name: this.newNameInput,
         title: this.newTitleInput,
         primary_group_id: this.newPrimaryGroupInput,
+        flair_group_id: this.newFlairGroupId,
       });
 
       return this.model
diff --git a/app/assets/javascripts/discourse/app/lib/avatar-flair.js b/app/assets/javascripts/discourse/app/lib/avatar-flair.js
index 3a8bb1f..ead1eaf 100644
--- a/app/assets/javascripts/discourse/app/lib/avatar-flair.js
+++ b/app/assets/javascripts/discourse/app/lib/avatar-flair.js
@@ -56,10 +56,10 @@ function initializeAutoGroupFlair(site) {
     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, " "),
+        flair_name: group.name.replace(/_/g, " "),
+        flair_url: group.flair_url,
+        flair_bg_color: group.flair_bg_color,
+        flair_color: group.flair_color,
       };
     }
   });
diff --git a/app/assets/javascripts/discourse/app/lib/transform-post.js b/app/assets/javascripts/discourse/app/lib/transform-post.js
index b2d5e01..b9695b5 100644
--- a/app/assets/javascripts/discourse/app/lib/transform-post.js
+++ b/app/assets/javascripts/discourse/app/lib/transform-post.js
@@ -21,9 +21,10 @@ export function transformBasicPost(post) {
     deletedByAvatarTemplate: null,
     deletedByUsername: null,
     primary_group_name: post.primary_group_name,
-    primary_group_flair_url: post.primary_group_flair_url,
-    primary_group_flair_bg_color: post.primary_group_flair_bg_color,
-    primary_group_flair_color: post.primary_group_flair_color,
+    flair_name: post.flair_name,
+    flair_url: post.flair_url,
+    flair_bg_color: post.flair_bg_color,
+    flair_color: post.flair_color,
     wiki: post.wiki,
     lastWikiEdit: post.last_wiki_edit,
     firstPost: post.post_number === 1,
diff --git a/app/assets/javascripts/discourse/app/models/user.js b/app/assets/javascripts/discourse/app/models/user.js
index 4d8a9cf..4b2b4e9 100644

[... diff too long, it was truncated ...]

GitHub sha: 87c1e98571631d83e0d9f0846bd95a2c7e9bce87

This commit appears in #13587 which was approved by ZogStriP. It was merged by nbianca.