Merge branch 'dm-country-flags' into 'master'

Add emoji flags and counts to countries popup

See merge request gitlab-com/www-gitlab-com!14289

lib/team.rb

@@ -30,13 +30,16 @@ module Gitlab
       end
       def countries
-        @countries ||= Team::Member
-          .all!
-          .flat_map(&:country)
-          .uniq
-          .tap { |a| a.delete('Remote') }
-          .compact
-          .sort
+        @countries ||= begin
+          members_by_country = Team::Member.all!.group_by(&:country)
+
+          members_by_country.delete('Remote')
+          members_by_country.delete(nil)
+
+          members_by_country
+            .map { |name, members| { name: name, count: members.count, info: members.first.country_info } }
+            .sort_by { |c| c[:info]&.name || c[:name] }
+        end
       end
     end
   end

lib/team/member.rb

@@ -5,6 +5,17 @@ module Gitlab
         include Comparable
         attr_reader :assignments
+        def self.normalize_country(country)
+          case country
+          when 'USA'
+            'United States'
+          when 'The Netherlands'
+            'Netherlands'
+          else
+            country
+          end
+        end
+
         def <=>(other)
           sort_ordering = (start_date.nil? ? Date.today : start_date) <=> (other.start_date.nil? ? Date.today : other.start_date)
           return 0 if sort_ordering.nil?
@@ -47,15 +58,11 @@ module Gitlab
         end
         def country_normalized
-          country = if @data['country'] == 'USA'
-                      'United States'
-                    elsif @data['country'] == 'The Netherlands'
-                      'Netherlands'
-                    else
-                      @data['country']
-                    end
-          country
+          self.class.normalize_country(@data['country'])
+        end
+        def country_info
+          @country_info ||= ISO3166::Country.find_country_by_name(country_normalized)
         end
         ##

source/includes/team/countries.html.haml

 - team = Gitlab::Homepage::Team.new
-.country.member{id: 'countries'}
+.countries.member{id: 'countries'}
   .card
     .extra
       .member-header
@@ -10,8 +10,10 @@
           %h5
             We currently have team members in #{team.countries.size} countries and/or regions.
       .bio
-        .row
+        %ul
           - team.countries.each do |country|
-            .col-sm-4
-              = country
+            %li
+              = country[:info]&.emoji_flag
+              = country[:name]
+              (#{country[:count]})
       %a.close-modal.fas.fa-times{ href: "#close-modal" }

source/includes/team/member.html.haml

-- country = ISO3166::Country.find_country_by_name(member.country_normalized)
 .col-xl-2.col-lg-2.col-md-3.col-sm-4.col-xs-12.member{class: ("pet" if is_pet), id: anchor, data: { departments: member.departments }}
   .card
     .front
@@ -15,8 +14,7 @@
         %h5
           = link_to "https://maps.google.com?q=#{location}" do
             = location
-            - if country
-              = country.emoji_flag
+            = member.country_info&.emoji_flag
       %h4.role
         = member.role
       - if member.specialty
@@ -52,4 +50,4 @@
               GitLab
             = partial "includes/logos/logo_sq.svg"
     .extra
-      = partial "includes/team/member_detail", locals: {member: member, is_pet: is_pet || false, country: country}
+      = partial "includes/team/member_detail", locals: {member: member, is_pet: is_pet || false}

source/includes/team/member_detail.html.haml

@@ -24,8 +24,7 @@
         Lives in
         = link_to "https://maps.google.com?q=#{location}" do
           = location
-          - if country
-            = country.emoji_flag
+          = member.country_info&.emoji_flag
     - if member.pronouns
       %h5
         %a{href: 'http://pronoun.is/', target: '_blank'} Pronouns:

source/stylesheets/team.css.scss

@@ -119,6 +119,17 @@ h4 {
       border-color: $blog-color-purple;
     }
   }
+
+  &.countries {
+    .extra {
+      max-width: 700px;
+    }
+
+    ul {
+      text-align: left;
+      column-count: 3;
+    }
+  }
 }
 .role {