Merge pull request #14178 from saraycp/avatar_component

Define AvatarComponent

src/api/app/components/avatar_component.html.haml

@@ -0,0 +1 @@
+= helpers.image_tag(gravatar_icon, size: size, title: title, alt: alt, class: css)

src/api/app/components/avatar_component.rb

@@ -0,0 +1,39 @@
+# View Component to display a group or user avatar. Circle shape is optional. Size and CSS classes can be customized.
+class AvatarComponent < ApplicationComponent
+  attr_reader :name, :email, :size, :shape, :custom_css
+
+  def initialize(name:, email:, size: 23, shape: nil, custom_css: '')
+    super
+
+    @name = name
+    @email = email
+    @size = size
+    @shape = shape
+    @custom_css = custom_css
+  end
+
+  private
+
+  def title
+    name
+  end
+
+  def alt
+    "#{name}'s avatar"
+  end
+
+  def gravatar_icon
+    if ::Configuration.gravatar && email
+      "https://www.gravatar.com/avatar/#{Digest::MD5.hexdigest(email.downcase)}?s=#{size}&d=robohash"
+    else
+      'default_face.png'
+    end
+  end
+
+  def css
+    css_classes = ['img-fluid']
+    css_classes << 'rounded-circle bg-light border border-gray-400' if shape == :circle
+    css_classes << custom_css
+    css_classes.join(' ')
+  end
+end

src/api/app/helpers/webui/webui_helper.rb

@@ -233,13 +233,15 @@ def tab_link(label, paths, active = false, html_class = 'nav-link text-nowrap')
     link_to(label, paths.first, class: html_class)
   end
 
+  # TODO: remove once all the calls to image_tag_for are replaced by AvatarComponent
   def image_tag_for(object, size: 500, custom_class: 'img-fluid')
     return unless object
 
     alt = "#{object.name}'s avatar"
     image_tag(gravatar_icon(object.email, size), alt: alt, size: size, title: object.name, class: custom_class)
   end
 
+  # TODO: remove once all the calls to image_tag_for are replaced by AvatarComponent
   def gravatar_icon(email, size)
     if ::Configuration.gravatar && email
       "https://www.gravatar.com/avatar/#{Digest::MD5.hexdigest(email.downcase)}?s=#{size}&d=robohash"

src/api/spec/components/avatar_component_spec.rb

@@ -0,0 +1,34 @@
+require 'rails_helper'
+
+RSpec.describe AvatarComponent, type: :component do
+  let(:user) { create(:user, login: 'King') }
+  let(:group) { create(:group) }
+
+  context 'for user' do
+    before do
+      render_inline(described_class.new(name: user.name, email: user.email))
+    end
+
+    it 'displays avatar with user name in the title' do
+      expect(rendered_content).to have_selector("img[title='#{user.name}']", count: 1)
+    end
+
+    it 'displays avatar without circle' do
+      expect(rendered_content).not_to have_selector('img.rounded-circle', count: 1)
+    end
+  end
+
+  context 'for group' do
+    before do
+      render_inline(described_class.new(name: group.name, email: group.email, shape: :circle))
+    end
+
+    it 'displays avatar with group name in the title' do
+      expect(rendered_content).to have_selector("img[title='#{group.name}']", count: 1)
+    end
+
+    it 'displays avatar inside a circle' do
+      expect(rendered_content).to have_selector('img.rounded-circle', count: 1)
+    end
+  end
+end

src/api/spec/components/previews/avatar_component_preview.rb

@@ -0,0 +1,27 @@
+class AvatarComponentPreview < ViewComponent::Preview
+  # Preview at http://HOST:PORT/rails/view_components/avatar_component/default_user_avatar
+  # No shape, standard size
+  def default_user_avatar
+    render(AvatarComponent.new(name: user.name, email: user.email))
+  end
+
+  # Preview at http://HOST:PORT/rails/view_components/avatar_component/circle_user_avatar
+  def circle_user_avatar
+    render(AvatarComponent.new(name: user.name, email: user.email, shape: :circle))
+  end
+
+  # Preview at http://HOST:PORT/rails/view_components/avatar_component/big_circle_group_avatar
+  def big_circle_group_avatar
+    render(AvatarComponent.new(name: group.name, email: group.email, size: 80, shape: :circle))
+  end
+
+  private
+
+  def user
+    User.new(login: 'Iggy', realname: 'Iggy Doe', email: 'id@example.com')
+  end
+
+  def group
+    Group.new(title: 'group_1', email: 'group_1@example.com')
+  end
+end