Show CSV groups on user profile

app/assets/javascripts/discourse/components/groups-list.js.es6

@@ -1,12 +0,0 @@
-/**
-  Displays a list of groups that a user belongs to.
-
-  @class Discourse.GroupsListComponent
-  @extends Ember.Component
-  @namespace Discourse
-  @module Discourse
-**/
-export default Em.Component.extend({
-  classNames: ['groups']
-});
-

app/assets/javascripts/discourse/templates/components/groups-list.hbs

@@ -1,6 +0,0 @@
-{{#if groups}}
-  {{i18n groups.title count=groups.length}}:
-  {{#each groups}}
-    {{#link-to 'group' this class="group-link"}}{{name}}{{/link-to}}
-  {{/each}}
-{{/if}}

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

@@ -150,6 +150,14 @@
                 {{/if}}
               </dd>
             {{/if}}
+            {{#if custom_groups}}
+              <dt>{{i18n groups.title count=custom_groups.length}}</dt>
+              <dd class='groups'>
+                {{#each custom_groups}}
+                  <span>{{#link-to 'group' this class="group-link"}}{{name}}{{/link-to}}</span>
+                {{/each}}
+              </dd>
+            {{/if}}
           </dl>
           {{plugin-outlet "user-profile-secondary"}}
         </div>

app/assets/stylesheets/desktop/user.scss

@@ -217,6 +217,15 @@
         color: $primary;
       }
 
+      dd.groups {
+        span:after {
+          content: ','
+        }
+        span:last-of-type:after {
+          content:''
+        }
+      }
+
       dt {
         color: dark-light-diff($secondary, $primary, 50%, -40%);
         margin: 0;