Showing the user with id and access type on the details screen (#2274)

Also making sure the dividing line does not overflow the page width

Utilized same table as the storage information. I made a few adjustments
to make the css for the storage table simpler and work for both tables.
<img width="978" height="1110" alt="Screenshot 2025-12-04 at 9 29 52 AM"
src="https://github.com/user-attachments/assets/bfb78821-bd68-448a-89bc-387bc6c71ba6"
/>

Author: carolyncole

app/assets/stylesheets/_project.scss

@@ -272,25 +272,24 @@ blockquote {
   margin-bottom: 2rem;
   .detail-row {
     display: flex;
-    padding: 1rem 1rem 2rem 1rem;
+    padding: 0 1rem 1rem 1rem;
     justify-content: space-between;
-    align-items: flex-start;
+    align-items: center;
     border-bottom: 1px solid $gray-10;
   }
   .detail-row-last {
     border-bottom: none;
     display: flex;
-    padding: 1rem;
+    padding: 0 1rem 0 1rem;
     justify-content: space-between;
-    align-items: flex-start;
+    align-items: center;
   }
   .detail-subheading {
-    line-height: 0 !important;
     margin: 0 !important;
+    width: max-content;
   }
 
   .detail-value {
-    line-height: 0 !important;
     margin: 0 !important;
   }
 }

app/assets/stylesheets/_projects.scss

@@ -71,6 +71,7 @@
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
+    line-clamp: 2;
   }
 
   a#show-more-less-link {

app/assets/stylesheets/application.scss

@@ -187,3 +187,9 @@ h6 {
   color: $white;
   background-color: $black-hover;
 }
+
+.info {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}

app/presenters/project_show_presenter.rb

@@ -54,25 +54,27 @@ def updated
   end
 
   def data_sponsor
-    User.find_by(uid: @project_mf[:data_sponsor])
+    @data_sponsor ||= User.find_by(uid: @project_mf[:data_sponsor])
   end
 
   def data_manager
-    User.find_by(uid: @project_mf[:data_manager])
+    @data_manager ||= User.find_by(uid: @project_mf[:data_manager])
   end
 
   def data_read_only_users
-    (@project_mf[:ro_users] || []).map { |uid| ReadOnlyUser.find_by(uid:) }.compact
+    (@project_mf[:ro_users] || []).map { |uid| UserPresenter.new(User.find_by(uid:)) }.compact
   end
 
   def data_read_write_users
-    (@project_mf[:rw_users] || []).map { |uid| User.find_by(uid:) }.compact
+    (@project_mf[:rw_users] || []).map { |uid| UserReadWritePresenter.new(User.find_by(uid:)) }.compact
   end
 
   def data_users
-    unsorted_data_users = data_read_only_users + data_read_write_users
-    sorted_data_users = unsorted_data_users.sort_by { |u| u.family_name || u.uid }
-    sorted_data_users.uniq { |u| u.uid }
+    @data_users ||= begin
+                      unsorted_data_users = data_read_only_users + data_read_write_users
+                      sorted_data_users = unsorted_data_users.sort_by { |u| u.family_name || u.uid }
+                      sorted_data_users.uniq { |u| u.uid }
+                    end
   end
 
   def data_user_names

app/presenters/user_presenter.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+class UserPresenter
+  attr_reader :user
+
+  delegate :uid, :family_name, to: :user
+
+  def initialize(user)
+    @user = user
+  end
+
+  def display_name
+    user.display_name_only_safe
+  end
+
+  def access_type
+    "Data User - Read Only"
+  end
+end

app/presenters/user_read_write_presenter.rb

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+class UserReadWritePresenter < UserPresenter
+  def access_type
+    "Data User - Read Write"
+  end
+end

app/views/new_project_wizard/_form_user_roles_input.html.erb

@@ -46,7 +46,7 @@
                <lux-input-multiselect
                 label=""
                 selected-items-label=""
-                none-selected-label="No pages selected"
+                none-selected-label="No users selected"
                 placeholder="Enter name or netid to search for a user"
                 :async-load-items-function="searchUsers"
                 >

app/views/projects/details.html.erb

@@ -4,7 +4,7 @@
    <button id="project-content" class="tab-nav"> Content Preview </button>
    <button id="project-details" class="tab-nav"> Details </button>
 </div>
-<div class="basic-details-container">
+<div class="basic-details-container lux">
    <div class="basic-details-navigation">
       <ul>
          <li><a id="basic-details-link" href="#basic-details-section">Basic Details</a></li>
@@ -66,7 +66,7 @@
                <% end %>
             </p>
          </div>
-         <svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1" viewBox="0 0 1200 1" fill="none">
+         <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="1" viewBox="0 0 1200 1" fill="none">
             <path d="M6.36558e-08 0.5L1200 0.500105" stroke="#EEEEEE"/>
          </svg>
       </ul>
@@ -79,23 +79,30 @@
          </div>
          <div class="detail-pair">
             <li class="detail-subheading">Data Sponsor</li>
-            <p class="detail-value"><%= @presenter.data_sponsor.display_name_safe %></p>
+            <p class="detail-value"><%= render partial: 'shared/user_display', locals: {user_name: @presenter.data_sponsor.display_name_only_safe, user_id: @presenter.data_sponsor.uid }%></p>
          </div>
          <div class="detail-pair">
             <li class="detail-subheading">Data Manager</li>
-            <p class="detail-value"><%= @presenter.data_manager.display_name_safe %></p>
+            <p class="detail-value"><%= render partial: 'shared/user_display', locals: {user_name: @presenter.data_manager.display_name_only_safe, user_id: @presenter.data_manager.uid }%></p>
          </div>
          <div class="detail-pair">
             <li class="detail-subheading">Data User(s)</li>
             <p class="detail-value">
-               <% if @presenter.data_user_names == 0 %>
-               <strong class="px-0">&mdash;</strong>
+               <% if @presenter.data_users.count == 0 %>
+                 <strong class="px-0">&mdash;</strong>
                <% else %>
-               <%= @presenter.data_user_names %>
+                 <div class="detail-table">
+                    <% @presenter.data_users.each do |user| %>
+                        <div class="detail-row<%= "-last" if user == @presenter.data_users.last %>">
+                           <div class="detail-subheading"><%= render partial: 'shared/user_display', locals: {user_name: user.display_name, user_id: user.uid }%></div>
+                           <div class="detail-value"><%= user.access_type %></div>
+                        </div>
+                    <% end %>
+                 </div>
                <% end %>
             </p>
          </div>
-         <svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1" viewBox="0 0 1200 1" fill="none">
+         <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="1" viewBox="0 0 1200 1" fill="none">
             <path d="M6.36558e-08 0.5L1200 0.500105" stroke="#EEEEEE"/>
          </svg>
       </ul>
@@ -152,7 +159,7 @@
             <% end %>
 
          </ul>
-         <svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1" viewBox="0 0 1200 1" fill="none">
+         <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="1" viewBox="0 0 1200 1" fill="none">
             <path d="M6.36558e-08 0.5L1200 0.500105" stroke="#EEEEEE"/>
          </svg>
 
@@ -185,7 +192,7 @@
                <div class="provenance-value"> <%= @presenter.approved_on.keys.first %> <%= @presenter.approved_on.values.first %></div>
             </div>
          </ul>
-         <svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1" viewBox="0 0 1200 1" fill="none">
+         <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="1" viewBox="0 0 1200 1" fill="none">
             <path d="M6.36558e-08 0.5L1200 0.500105" stroke="#EEEEEE"/>
          </svg>
       </ul>

app/views/shared/_user_display.html.erb

@@ -0,0 +1,6 @@
+<div class="info">
+  <div class="item-text"><%= user_name %></div>
+  <lux-badge color="gray" class="badge">
+    <div class="badge-text"><%= user_id %></div>
+  </lux-badge>
+</div>

spec/system/project_details_spec.rb

@@ -39,8 +39,8 @@
             expect(page).to have_content(project_in_mediaflux.project_directory)
 
             # Make sure both data manager and sponsor are rendered
-            expect(page).to have_content("#{data_manager.display_name} (#{data_manager.uid})")
-            expect(page).to have_content("#{sponsor_user.display_name} (#{sponsor_user.uid})")
+            expect(page).to have_content("Data Manager\n#{data_manager.display_name}\n#{data_manager.uid}")
+            expect(page).to have_content("Data Sponsor\n#{sponsor_user.display_name}\n#{sponsor_user.uid}")
 
             # Per ticket #1114 sponsor users no longer have edit access
             expect(page).not_to have_selector(:link_or_button, "Edit") # button next to role and description heading