[#58144] Show email on the UI for users with permission

app/components/members/row_component.rb

@@ -50,8 +50,7 @@ def name
     end
 
     def mail
-      return unless user?
-      return if principal.pref.hide_mail
+      return unless user? && user_is_allowed_to_see_email
 
       link = mail_to(principal.mail)
 
@@ -288,5 +287,9 @@ def principal_show_path
     def user?
       principal.is_a?(User)
     end
+
+    def user_is_allowed_to_see_email
+      (principal == User.current) || User.current.allowed_globally?(:view_user_email)
+    end
   end
 end

app/components/users/profile/attributes_component.html.erb

@@ -4,7 +4,7 @@
 
     component_wrapper do
       flex_layout do |details_container|
-        if @user.pref.can_expose_mail?
+        if user_is_allowed_to_see_email
           details_container.with_row(font_weight: :bold) do
             User.human_attribute_name(:mail)
           end

app/components/users/profile/attributes_component.rb

@@ -40,7 +40,7 @@ def initialize(user:)
       end
 
       def render?
-        @user.pref.can_expose_mail? || @user.visible_custom_field_values.any? { _1.value.present? }
+        user_is_allowed_to_see_email || @user.visible_custom_field_values.any? { _1.value.present? }
       end
 
       def visible_custom_fields
@@ -51,6 +51,10 @@ def visible_custom_fields
           .keys
           .sort_by(&:name)
       end
+
+      def user_is_allowed_to_see_email
+        User.current == @user || User.current.allowed_globally?(:view_user_email)
+      end
     end
   end
 end

app/models/permitted_params.rb

@@ -263,7 +263,7 @@ def wiki_page
   end
 
   def pref
-    params.fetch(:pref, {}).permit(:hide_mail, :time_zone, :theme,
+    params.fetch(:pref, {}).permit(:time_zone, :theme,
                                    :comments_sorting, :warn_on_leaving_unsaved,
                                    :auto_hide_popups)
   end

app/models/queries/filters/shared/any_user_name_attribute_filter.rb

@@ -44,7 +44,7 @@ def available_operators
     end
 
     def email_field_allowed?
-      true
+      User.current.allowed_globally?(:view_user_email)
     end
 
     private

app/models/queries/principals/filters/typeahead_filter.rb

@@ -35,10 +35,6 @@ def type
     :search
   end
 
-  def email_field_allowed?
-    User.current.allowed_globally?(:view_user_email)
-  end
-
   def human_name
     I18n.t("label_search")
   end

app/models/user_preference.rb

@@ -90,14 +90,6 @@ def diff_type
     settings.fetch(:diff_type, "inline")
   end
 
-  def hide_mail
-    settings.fetch(:hide_mail, true)
-  end
-
-  def can_expose_mail?
-    !hide_mail
-  end
-
   def auto_hide_popups=(value)
     settings[:auto_hide_popups] = to_boolean(value)
   end

app/services/user_preferences/set_attributes_service.rb

@@ -29,8 +29,6 @@
 module UserPreferences
   class SetAttributesService < ::BaseServices::SetAttributes
     def set_attributes(params)
-      set_boolean_value(:hide_mail, params.delete(:hide_mail)) if params.key?(:hide_mail)
-
       params.each do |k, v|
         model[k] = v if model.supported_settings_method?(k)
       end

app/views/common/feed.atom.builder

@@ -61,7 +61,9 @@ xml.feed "xmlns" => "http://www.w3.org/2005/Atom" do
       if author
         xml.author do
           xml.name(author)
-          xml.email(author.mail) if author.is_a?(User) && author.mail.present? && author.pref.can_expose_mail?
+          if author.is_a?(User) && author.mail.present? && User.current.allowed_globally?(:view_user_email)
+            xml.email(author.mail)
+          end
         end
       end
       xml.content "type" => "html" do

app/views/journals/index.atom.builder

@@ -44,7 +44,9 @@ xml.feed "xmlns" => "http://www.w3.org/2005/Atom" do
       xml.updated change.created_at.xmlschema
       xml.author do
         xml.name change.user.name
-        xml.email(change.user.mail) if change.user.is_a?(User) && change.user.mail.present? && change.user.pref.can_expose_mail?
+        if change.user.is_a?(User) && change.user.mail.present? && User.current.allowed_globally?(:view_user_email)
+          xml.email(change.user.mail)
+        end
       end
       xml.content "type" => "html" do
         xml.text! "<ul>"

app/views/my/account.html.erb

@@ -79,10 +79,6 @@ See COPYRIGHT and LICENSE files for more details.
       <% end %>
     </div>
 
-    <%= fields_for :pref, @user.pref, builder: TabularFormBuilder, lang: current_language do |pref_fields| %>
-      <div class="form--field"><%= pref_fields.check_box :hide_mail %></div>
-    <% end %>
-
     <%= call_hook(:view_my_account, user: @user, form: f) %>
 
     <%= render partial: "customizable/form",

config/locales/en.yml

@@ -867,7 +867,6 @@ en:
         consented_at: "Consented at"
       user_preference:
         comments_sorting: "Display comments"
-        hide_mail: "Hide my email address"
         impaired: "Accessibility mode"
         time_zone: "Time zone"
         auto_hide_popups: "Auto-hide success notifications"

config/schemas/user_preferences.schema.json

@@ -6,9 +6,6 @@
             "type": "object",
             "additionalProperties": false,
             "properties": {
-                "hide_mail": {
-                    "type": "boolean"
-                },
                 "time_zone": {
                     "type": ["string", "null"]
                 },

db/migrate/20241002151949_remove_hide_mail_from_user_preferences.rb

@@ -0,0 +1,8 @@
+class RemoveHideMailFromUserPreferences < ActiveRecord::Migration[7.1]
+  def up
+    execute <<~SQL.squish
+      UPDATE user_preferences
+      SET settings =  settings - 'hide_mail'
+    SQL
+  end
+end

docs/api/apiv3/components/schemas/user_preferences_model.yml

@@ -13,7 +13,6 @@ example:
       method: "patch"
   _type: UserPreferences
   commentSortDescending: true
-  hideMail: false
   timeZone: "Europe/Berlin"
   warnOnLeavingUnsaved: true
   notifications:

docs/api/apiv3/paths/my_preferences.yml

@@ -19,7 +19,6 @@ get:
                     method: "patch"
                 _type: "UserPreferences"
                 commentSortDescending: true
-                hideMail: false
                 timeZone: "Europe/Berlin"
                 warnOnLeavingUnsaved: true
                 notifications:
@@ -83,7 +82,6 @@ patch:
                     method: "patch"
                 _type: UserPreferences
                 commentSortDescending: true
-                hideMail: false
                 timeZone: Europe/Berlin
                 warnOnLeavingUnsaved: true
                 notifications:

docs/api/apiv3/tags/userpreferences.yml

@@ -12,7 +12,6 @@ description: |-
   | Property               | Description                                                                     | Type                | Constraints | Supported operations |
   |:----------------------:| -----------------------------------------------------------                     | ----------          | ----------- | -------------------- |
   | autoHidePopups         | Whether to hide popups (e.g. success messages) after 5 seconds                  | Boolean             |             | READ / WRITE         |
-  | hideMail               | Hide mail address from other users                                              | Boolean             |             | READ / WRITE         |
   | notifications          | The settings for the notifications to be received by the user                   | NotificationSetting |             | READ / WRITE         |
   | timeZone               | Current selected time zone                                                      | String              |             | READ / WRITE         |
   | commentSortDescending  | Sort comments in descending order                                               | Boolean             |             | READ / WRITE         |

frontend/src/app/features/invite-user-modal/principal/principal-search.component.html

@@ -21,13 +21,16 @@
       class="ng-option-label"
     >
       <!--Selectable option-->
-      <div [ngOptionHighlight]="search">{{ item.principal.name }}</div>
+      <span [ngOptionHighlight]="search">{{ item.principal.name }}</span>
+      <span
+        class="op-autocompleter__option-principal-email"
+        *ngIf="item.principal.email"
+        [ngOptionHighlight]="search">{{ item.principal.email }}</span>
 
       <!-- Already a member of the project -->
       <div
         *ngIf="item.disabled"
-        class="ellipsis"
-      >{{ text.alreadyAMember() }}</div>
+        class="ellipsis">{{ text.alreadyAMember() }}</div>
     </div>
   </ng-template>
 

frontend/src/app/features/invite-user-modal/principal/principal-search.component.sass

@@ -0,0 +1,13 @@
+@import '../../global_styles/openproject/variables'
+
+.op-autocompleter
+  &__option-principal-email
+    color: var(--fgColor-muted)
+    font-size: var(--font-size-small)
+    margin-left: var(--stack-gap-condensed)
+
+  @media screen and (max-width: $breakpoint-sm)
+    &__option-principal-email
+      display: block
+      margin-left: 0
+      margin-top: var(--control-xsmall-gap)

frontend/src/app/features/invite-user-modal/principal/principal-search.component.ts

@@ -1,4 +1,5 @@
 import {
+  ChangeDetectionStrategy,
   Component,
   Input,
   EventEmitter,
@@ -39,7 +40,9 @@ interface NgSelectPrincipalOption {
 
 @Component({
   selector: 'op-ium-principal-search',
+  styleUrls: ['./principal-search.component.sass'],
   templateUrl: './principal-search.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PrincipalSearchComponent extends UntilDestroyedMixin implements OnInit {
   @Input() spotFormBinding:UntypedFormControl;

frontend/src/app/features/user-preferences/state/user-preferences.model.ts

@@ -16,7 +16,6 @@ export interface ImmediateRemindersSettings {
 export interface IUserPreference {
   autoHidePopups:boolean;
   commentSortDescending:boolean;
-  hideMail:boolean;
   timeZone:string|null;
   warnOnLeavingUnsaved:boolean;
   workdays:number[];

frontend/src/app/features/user-preferences/state/user-preferences.store.ts

@@ -36,7 +36,6 @@ function createInitialState():IUserPreference {
   return {
     autoHidePopups: true,
     commentSortDescending: false,
-    hideMail: true,
     timeZone: null,
     warnOnLeavingUnsaved: true,
     notifications: [],

frontend/src/app/shared/components/autocompleter/op-autocompleter/op-autocompleter.component.html

@@ -180,21 +180,27 @@
   </ng-container>
 
   <ng-container *ngSwitchCase="resource ==='users' || resource ==='assignee' || resource === 'principals'">
-    <div class="op-autocompleter--option-principal-wrapper">
-      <op-principal
-        *ngIf="item && item.href"
-        [principal]="item"
-        [hideName]="true"
-        class="op-autocompleter--option-principal-avatar"
-        size="mini"
-      ></op-principal>
-      <span [ngOptionHighlight]="search" class="ellipsis">{{ item.name }}</span>
-    </div>
+    <op-principal
+      *ngIf="item && item.href"
+      [principal]="item"
+      [hideName]="true"
+      class="op-autocompleter--option-principal-avatar"
+      size="mini"
+    ></op-principal>
+    <span [ngOptionHighlight]="search">{{ item.name }}</span>
+    <span
+      class="op-autocompleter__option-principal-email"
+      *ngIf="item.email"
+      [ngOptionHighlight]="search">{{ item.email }}</span>
   </ng-container>
 
   <ng-container
     *ngSwitchCase="resource ==='subproject' || resource ==='version' || resource ==='status' || resource ==='default' || !resource">
     <span [ngOptionHighlight]="search">{{ item.name }}</span>
+    <span
+      class="op-autocompleter__option-principal-email"
+      *ngIf="item.email"
+      [ngOptionHighlight]="search">{{ item.email }}</span>
   </ng-container>
 </ng-template>
 

frontend/src/app/shared/components/autocompleter/op-autocompleter/op-autocompleter.component.sass

@@ -1,3 +1,5 @@
+@import '../../global_styles/openproject/variables'
+
 .op-autocompleter
   &--option-wrapper
     padding: 5px 5px
@@ -47,7 +49,15 @@
     white-space: nowrap
     text-overflow: ellipsis
 
-  &--option-principal
-    &-wrapper
-      display: flex
-      overflow: hidden
+  &__option-principal-email
+    color: var(--fgColor-muted)
+    font-size: var(--font-size-small)
+    margin-left: var(--stack-gap-condensed)
+
+  @media screen and (max-width: $breakpoint-sm)
+    &__option-principal-email
+      display: block
+      margin-left: 0
+      margin-top: var(--control-xsmall-gap)
+    &--option-principal-avatar + span + &__option-principal-email
+      margin-left: var(--control-small-size)

frontend/src/app/shared/components/autocompleter/user-autocompleter/user-autocompleter-template.component.html

@@ -13,6 +13,11 @@
         class="op-user-autocompleter--name">
       {{ item.name }}
     </span>
+  <span
+    class="op-autocompleter__option-principal-email"
+    *ngIf="item.email"
+    [opSearchHighlight]="search"
+  >{{ item.email }}</span>
 </ng-template>
 <ng-template #footerTemplate *ngIf="inviteUserToProject">
   <op-invite-user-button

frontend/src/app/shared/components/autocompleter/user-autocompleter/user-autocompleter-template.component.sass

@@ -0,0 +1,13 @@
+@import '../../global_styles/openproject/variables'
+
+.op-autocompleter
+  &__option-principal-email
+    color: var(--fgColor-muted)
+    font-size: var(--font-size-small)
+    margin-left: var(--stack-gap-condensed)
+
+  @media screen and (max-width: $breakpoint-sm)
+    &__option-principal-email
+      display: block
+      margin-left: var(--control-small-size)
+      margin-top: var(--control-xsmall-gap)

frontend/src/app/shared/components/autocompleter/user-autocompleter/user-autocompleter-template.component.ts

@@ -37,6 +37,7 @@ import { IAutocompleterTemplateComponent } from 'core-app/shared/components/auto
 
 @Component({
   templateUrl: './user-autocompleter-template.component.html',
+  styleUrls: ['./user-autocompleter-template.component.sass'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class UserAutocompleterTemplateComponent implements IAutocompleterTemplateComponent {