bug/69230 Use enhanced Primer::OpenProject::AvatarWithFallback to render initials in a styled SVG when avatar img src is nil/blank (#21343)

Author: akabiru

modules/documents/app/components/documents/show_edit_view/page_header/live_users_component.html.erb

@@ -42,11 +42,11 @@
       concat(
         flex_layout do |flex_container|
           flex_container.with_column do
-            render Primer::Beta::AvatarStack.new(
+            render Primer::OpenProject::AvatarStack.new(
               data: { "documents--live-events-target": "users" }
             ) do |component|
               users.map do |user|
-                component.with_avatar(src: avatar_url(user), alt: user.name)
+                component.with_avatar_with_fallback(**avatar_options_for(user))
               end
             end
           end
@@ -67,14 +67,12 @@
           component.with_body(caret: :top_left) do
             flex_layout do |container|
               users.each do |user|
-                container.with_row do
-                  render Users::AvatarComponent.new(
-                    user: user,
-                    show_name: true,
-                    link: false,
-                    hover_card: { active: false },
-                    size: :mini
-                  )
+                container.with_column do
+                  render Primer::OpenProject::AvatarWithFallback.new(**avatar_options_for(user))
+                end
+
+                container.with_column(ml: 2) do
+                  render(Primer::Beta::Text.new(color: :subtle)) { user.name }
                 end
               end
             end

modules/documents/app/components/documents/show_edit_view/page_header/live_users_component.rb

@@ -49,6 +49,14 @@ def initialize(users: [User.current])
         def active_editors
           I18n.t("documents.active_editors_count", count: users.count).html_safe
         end
+
+        def avatar_options_for(user)
+          {
+            src: avatar_url(user),
+            alt: user.name,
+            unique_id: user.id
+          }
+        end
       end
     end
   end