Merge branch '346194-refactor-non-i18n-ui-components' into 'master'

Fix: refactor some non-i18n components in issue page

See merge request gitlab-org/gitlab!74955

app/assets/javascripts/issuable/components/issuable_by_email.vue

@@ -54,8 +54,7 @@ export default {
   data() {
     return {
       email: this.initialEmail,
-      // eslint-disable-next-line @gitlab/require-i18n-strings
-      issuableName: this.issuableType === 'issue' ? 'issue' : 'merge request',
+      issuableName: this.issuableType === 'issue' ? __('issue') : __('merge request'),
     };
   },
   computed: {

app/assets/javascripts/issue_show/components/header_actions.vue

@@ -7,7 +7,7 @@ import { IssuableType } from '~/issuable_show/constants';
 import { IssuableStatus, IssueStateEvent } from '~/issue_show/constants';
 import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
 import { visitUrl } from '~/lib/utils/url_utility';
-import { __, sprintf } from '~/locale';
+import { s__, __, sprintf } from '~/locale';
 import eventHub from '~/notes/event_hub';
 import promoteToEpicMutation from '../queries/promote_to_epic.mutation.graphql';
 import updateIssueMutation from '../queries/update_issue.mutation.graphql';
@@ -78,10 +78,18 @@ export default {
     isClosed() {
       return this.openState === IssuableStatus.Closed;
     },
+    issueTypeText() {
+      const issueTypeTexts = {
+        [IssuableType.Issue]: s__('HeaderAction|issue'),
+        [IssuableType.Incident]: s__('HeaderAction|incident'),
+      };
+
+      return issueTypeTexts[this.issueType] ?? this.issueType;
+    },
     buttonText() {
       return this.isClosed
-        ? sprintf(__('Reopen %{issueType}'), { issueType: this.issueType })
-        : sprintf(__('Close %{issueType}'), { issueType: this.issueType });
+        ? sprintf(__('Reopen %{issueType}'), { issueType: this.issueTypeText })
+        : sprintf(__('Close %{issueType}'), { issueType: this.issueTypeText });
     },
     qaSelector() {
       return this.isClosed ? 'reopen_issue_button' : 'close_issue_button';

app/assets/javascripts/notes/components/comment_form.vue

@@ -11,7 +11,6 @@ import httpStatusCodes from '~/lib/utils/http_status';
 import {
   capitalizeFirstCharacter,
   convertToCamelCase,
-  splitCamelCase,
   slugifyWithUnderscore,
 } from '~/lib/utils/text_utility';
 import { sprintf } from '~/locale';
@@ -77,7 +76,15 @@ export default {
     ]),
     ...mapState(['isToggleStateButtonLoading']),
     noteableDisplayName() {
-      return splitCamelCase(this.noteableType).toLowerCase();
+      const displayNameMap = {
+        [constants.ISSUE_NOTEABLE_TYPE]: this.$options.i18n.issue,
+        [constants.EPIC_NOTEABLE_TYPE]: this.$options.i18n.epic,
+        [constants.MERGE_REQUEST_NOTEABLE_TYPE]: this.$options.i18n.mergeRequest,
+      };
+
+      const noteableTypeKey =
+        constants.NOTEABLE_TYPE_MAPPING[this.noteableType] || constants.ISSUE_NOTEABLE_TYPE;
+      return displayNameMap[noteableTypeKey];
     },
     isLoggedIn() {
       return this.getUserData.id;
@@ -103,15 +110,13 @@ export default {
       const openOrClose = this.isOpen ? 'close' : 'reopen';
 
       if (this.note.length) {
-        return sprintf(this.$options.i18n.actionButtonWithNote, {
+        return sprintf(this.$options.i18n.actionButton.withNote[openOrClose], {
           actionText: this.commentButtonTitle,
-          openOrClose,
           noteable: this.noteableDisplayName,
         });
       }
 
-      return sprintf(this.$options.i18n.actionButton, {
-        openOrClose: capitalizeFirstCharacter(openOrClose),
+      return sprintf(this.$options.i18n.actionButton.withoutNote[openOrClose], {
         noteable: this.noteableDisplayName,
       });
     },
@@ -151,13 +156,8 @@ export default {
     draftEndpoint() {
       return this.getNotesData.draftsPath;
     },
-    issuableTypeTitle() {
-      return this.noteableType === constants.MERGE_REQUEST_NOTEABLE_TYPE
-        ? this.$options.i18n.mergeRequest
-        : this.$options.i18n.issue;
-    },
     isIssue() {
-      return this.noteableDisplayName === constants.ISSUE_NOTEABLE_TYPE;
+      return constants.NOTEABLE_TYPE_MAPPING[this.noteableType] === constants.ISSUE_NOTEABLE_TYPE;
     },
     trackingLabel() {
       return slugifyWithUnderscore(`${this.commentButtonTitle} button`);
@@ -329,7 +329,7 @@ export default {
 <template>
   <div>
     <note-signed-out-widget v-if="!isLoggedIn" />
-    <discussion-locked-widget v-else-if="!canCreateNote" :issuable-type="issuableTypeTitle" />
+    <discussion-locked-widget v-else-if="!canCreateNote" :issuable-type="noteableDisplayName" />
     <ul v-else-if="canCreateNote" class="notes notes-form timeline">
       <timeline-entry-item class="note-form">
         <gl-alert

app/assets/javascripts/notes/i18n.js

@@ -9,6 +9,7 @@ export const COMMENT_FORM = {
   issue: __('issue'),
   startThread: __('Start thread'),
   mergeRequest: __('merge request'),
+  epic: __('epic'),
   bodyPlaceholder: __('Write a comment or drag your files here…'),
   confidential: s__('Notes|Make this comment confidential'),
   confidentialVisibility: s__('Notes|Confidential comments are only visible to project members'),
@@ -17,7 +18,16 @@ export const COMMENT_FORM = {
   ),
   discussion: __('Discuss a specific suggestion or question.'),
   actionButtonWithNote: __('%{actionText} & %{openOrClose} %{noteable}'),
-  actionButton: __('%{openOrClose} %{noteable}'),
+  actionButton: {
+    withNote: {
+      reopen: __('%{actionText} & reopen %{noteable}'),
+      close: __('%{actionText} & close %{noteable}'),
+    },
+    withoutNote: {
+      reopen: __('Reopen %{noteable}'),
+      close: __('Close %{noteable}'),
+    },
+  },
   submitButton: {
     startThread: __('Start thread'),
     comment: __('Comment'),

app/helpers/form_helper.rb

@@ -35,7 +35,7 @@ module FormHelper
   def assignees_dropdown_options(issuable_type)
     dropdown_data = {
       toggle_class: 'js-user-search js-assignee-search js-multiselect js-save-user-data',
-      title: 'Select assignee',
+      title: _('Select assignee'),
       filter: true,
       dropdown_class: 'dropdown-menu-user dropdown-menu-selectable dropdown-menu-assignee',
       placeholder: _('Search users'),
@@ -45,9 +45,9 @@ module FormHelper
         current_user: true,
         project_id: (@target_project || @project)&.id,
         field_name: "#{issuable_type}[assignee_ids][]",
-        default_label: 'Unassigned',
+        default_label: _('Unassigned'),
         'max-select': 1,
-        'dropdown-header': 'Assignee',
+        'dropdown-header': _('Assignee'),
         multi_select: true,
         'input-meta': 'name',
         'always-show-selectbox': true,
@@ -123,7 +123,7 @@ module FormHelper
   def multiple_assignees_dropdown_options(options)
     new_options = options.dup
 
-    new_options[:title] = 'Select assignee(s)'
+    new_options[:title] = _('Select assignee(s)')
     new_options[:data][:'dropdown-header'] = 'Assignee(s)'
     new_options[:data].delete(:'max-select')
 

app/helpers/issuables_description_templates_helper.rb

@@ -6,7 +6,7 @@ module IssuablesDescriptionTemplatesHelper
 
   def template_dropdown_tag(issuable, &block)
     selected_template = selected_template(issuable)
-    title = selected_template || "Choose a template"
+    title = selected_template || _('Choose a template')
     options = {
       toggle_class: 'js-issuable-selector',
       title: title,

app/helpers/issuables_helper.rb

@@ -80,7 +80,7 @@ module IssuablesHelper
   def users_dropdown_label(selected_users)
     case selected_users.length
     when 0
-      "Unassigned"
+      _('Unassigned')
     when 1
       selected_users[0].name
     else
@@ -133,7 +133,7 @@ module IssuablesHelper
   end
   # rubocop: enable CodeReuse/ActiveRecord
 
-  def milestone_dropdown_label(milestone_title, default_label = "Milestone")
+  def milestone_dropdown_label(milestone_title, default_label = _('Milestone'))
     title =
       case milestone_title
       when Milestone::Upcoming.name then Milestone::Upcoming.title
@@ -188,7 +188,12 @@ module IssuablesHelper
   end
 
   def issuables_state_counter_text(issuable_type, state, display_count)
-    titles = { opened: "Open" }
+    titles = {
+      opened: _("Open"),
+      closed: _("Closed"),
+      merged: _("Merged"),
+      all: _("All")
+    }
     state_title = titles[state] || state.to_s.humanize
     html = content_tag(:span, state_title)
 

app/views/projects/issues/_issue.html.haml

@@ -25,10 +25,10 @@
           #{issuable_reference(issue)}
         %span.issuable-authored.d-none.d-sm-inline-block
           ·
-          created #{time_ago_with_tooltip(issue.created_at, placement: 'bottom')} by
           - if issue.service_desk_reply_to
-            #{issue.service_desk_reply_to} via
-          #{link_to_member(@project, issue.author, avatar: false)}
+            #{_('created %{timeAgoString} by %{email} via %{user}').html_safe % { timeAgoString: time_ago_with_tooltip(issue.created_at, placement: 'bottom'), email: issue.service_desk_reply_to, user: link_to_member(@project, issue.author, avatar: false) }}
+          - else
+            #{s_('IssueList|created %{timeAgoString} by %{user}').html_safe % { timeAgoString: time_ago_with_tooltip(issue.created_at, placement: 'bottom'), user: link_to_member(@project, issue.author, avatar: false) }}
           = render_if_exists 'shared/issuable/gitlab_team_member_badge', author: issue.author
         - if issue.milestone
           %span.issuable-milestone.d-none.d-sm-inline-block

app/views/projects/issues/_new_branch.html.haml

 - if can?(current_user, :push_code, @project)
   - can_create_merge_request = can?(current_user, :create_merge_request_in, @project)
   - data_action = can_create_merge_request ? 'create-mr' : 'create-branch'
-  - value = can_create_merge_request ? 'Create merge request' : 'Create branch'
+  - value = can_create_merge_request ? _('Create merge request') : _('Create branch')
   - value = can_create_confidential_merge_request? ? _('Create confidential merge request') : value
   - create_mr_text = can_create_confidential_merge_request? ? _('Create confidential merge request') : _('Create merge request')
 

app/views/projects/merge_requests/_merge_request.html.haml

@@ -20,8 +20,7 @@
           #{issuable_reference(merge_request)}
         %span.issuable-authored.d-none.d-sm-inline-block
           ·
-          created #{time_ago_with_tooltip(merge_request.created_at, placement: 'bottom')}
-          by #{link_to_member(@project, merge_request.author, avatar: false)}
+          #{s_('IssueList|created %{timeAgoString} by %{user}').html_safe % { timeAgoString: time_ago_with_tooltip(merge_request.created_at, placement: 'bottom'), user: link_to_member(@project, merge_request.author, avatar: false) }}
           = render_if_exists 'shared/issuable/gitlab_team_member_badge', author: merge_request.author
         - if merge_request.milestone
           %span.issuable-milestone.d-none.d-sm-inline-block

app/views/shared/form_elements/_description.html.haml

@@ -7,7 +7,7 @@
 - preview_url = preview_markdown_path(project, target_type: model.class.name)
 
 .form-group.row.detail-page-description
-  = form.label :description, 'Description', class: 'col-form-label col-sm-2'
+  = form.label :description, _('Description'), class: 'col-form-label col-sm-2'
   .col-sm-10
     - if model.is_a?(MergeRequest)
       = hidden_field_tag :merge_request_diff_head_sha, model.diff_head_sha

app/views/shared/issuable/_form.html.haml

@@ -64,7 +64,7 @@
       for this project.
 
   - if issuable.new_record?
-    = form.submit "Create #{issuable.class.model_name.human.downcase}", class: 'gl-button btn btn-confirm gl-mr-2', data: { qa_selector: 'issuable_create_button' }
+    = form.submit "#{_('Create')} #{issuable.class.model_name.human.downcase}", class: 'gl-button btn btn-confirm gl-mr-2', data: { qa_selector: 'issuable_create_button' }
   - else
     = form.submit _('Save changes'), class: 'gl-button btn btn-confirm gl-mr-2'
 

app/views/shared/issuable/_milestone_dropdown.html.haml

@@ -4,20 +4,20 @@
 - selected = local_assigns.fetch(:selected, nil)
 
 - selected_text = selected.try(:title) || params[:milestone_title]
-- dropdown_title = local_assigns.fetch(:dropdown_title, "Filter by milestone")
+- dropdown_title = local_assigns.fetch(:dropdown_title, _('Filter by milestone'))
 - if selected.present? || params[:milestone_title].present?
   = hidden_field_tag(name, name == :milestone_title ? selected_text : selected.id)
 = dropdown_tag(milestone_dropdown_label(selected_text), options: { title: dropdown_title, toggle_class: "qa-issuable-milestone-dropdown js-milestone-select js-filter-submit #{extra_class}", filter: true, dropdown_class: "qa-issuable-dropdown-menu-milestone dropdown-menu-selectable dropdown-menu-milestone",
-  placeholder: "Search milestones", footer_content: project.present?, data: { show_no: true, show_menu_above: show_menu_above, show_any: show_any, show_upcoming: show_upcoming, show_started: show_started, field_name: name, selected: selected_text, project_id: project.try(:id), default_label: "Milestone" } }) do
+  placeholder: _('Search milestones'), footer_content: project.present?, data: { show_no: true, show_menu_above: show_menu_above, show_any: show_any, show_upcoming: show_upcoming, show_started: show_started, field_name: name, selected: selected_text, project_id: project.try(:id), default_label: _('Milestone') } }) do
   - if project
     %ul.dropdown-footer-list
       - if can? current_user, :admin_milestone, project
         %li
-          = link_to new_project_milestone_path(project), title: "New Milestone" do
-            Create new
+          = link_to new_project_milestone_path(project), title: _('New Milestone') do
+            = _('Create new')
       %li
         = link_to project_milestones_path(project) do
           - if can? current_user, :admin_milestone, project
-            Manage milestones
+            = _('Manage milestones')
           - else
-            View milestones
+            = _('View milestones')

app/views/shared/issuable/form/_default_templates.html.haml

 %p.form-text.text-muted
-  Add
-  = link_to 'description templates', help_page_path('user/project/description_templates')
-  to help your contributors communicate effectively!
+  - template_link_url = help_page_path('user/project/description_templates')
+  - template_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: template_link_url }
+  = s_('Promotions|Add %{link_start} description templates %{link_end} to help your contributors to communicate effectively!').html_safe % { link_start: template_link_start, link_end: '</a>'.html_safe }
+

app/views/shared/issuable/form/_metadata.html.haml

@@ -10,7 +10,7 @@
       .form-check
         = form.check_box :confidential, class: 'form-check-input'
         = form.label :confidential, class: 'form-check-label' do
-          This issue is confidential and should only be visible to team members with at least Reporter access.
+          #{_('This issue is confidential and should only be visible to team members with at least Reporter access.')}
 
 - if can?(current_user, :"set_#{issuable.to_ability_name}_metadata", issuable)
   %hr
@@ -27,13 +27,13 @@
 
       - if issuable.supports_milestone?
         .form-group.row.issue-milestone
-          = form.label :milestone_id, "Milestone", class: "col-form-label #{has_due_date ? "col-md-2 col-lg-4" : "col-sm-2"}"
+          = form.label :milestone_id, _('Milestone'), class: "col-form-label #{has_due_date ? "col-md-2 col-lg-4" : "col-sm-2"}"
           .col-sm-10{ class: ("col-md-8" if has_due_date) }
             .issuable-form-select-holder
-              = render "shared/issuable/milestone_dropdown", selected: issuable.milestone, name: "#{issuable.class.model_name.param_key}[milestone_id]", show_any: false, show_upcoming: false, show_started: false, extra_class: "qa-issuable-milestone-dropdown js-issuable-form-dropdown js-dropdown-keep-input", dropdown_title: "Select milestone"
+              = render "shared/issuable/milestone_dropdown", selected: issuable.milestone, name: "#{issuable.class.model_name.param_key}[milestone_id]", show_any: false, show_upcoming: false, show_started: false, extra_class: "qa-issuable-milestone-dropdown js-issuable-form-dropdown js-dropdown-keep-input", dropdown_title: _('Select milestone')
 
       .form-group.row
-        = form.label :label_ids, "Labels", class: "col-form-label #{has_due_date ? "col-md-2 col-lg-4" : "col-sm-2"}"
+        = form.label :label_ids, _('Labels'), class: "col-form-label #{has_due_date ? "col-md-2 col-lg-4" : "col-sm-2"}"
         = form.hidden_field :label_ids, multiple: true, value: ''
         .col-sm-10{ class: "#{"col-md-8" if has_due_date}" }
           .issuable-form-select-holder
@@ -45,7 +45,7 @@
       .col-lg-6
         = render_if_exists "shared/issuable/form/weight", issuable: issuable, form: form
         .form-group.row
-          = form.label :due_date, "Due date", class: "col-form-label col-md-2 col-lg-4"
+          = form.label :due_date, _('Due date'), class: "col-form-label col-md-2 col-lg-4"
           .col-8
             .issuable-form-select-holder
-              = form.text_field :due_date, id: "issuable-due-date", class: "datepicker form-control", placeholder: "Select due date", autocomplete: 'off'
+              = form.text_field :due_date, id: "issuable-due-date", class: "datepicker form-control", placeholder: _('Select due date'), autocomplete: 'off'

app/views/shared/issuable/form/_metadata_issuable_assignee.html.haml

@@ -8,4 +8,4 @@
       = hidden_field_tag "#{issuable.to_ability_name}[assignee_ids][]", 0, id: nil, data: { meta: '' }
 
     = dropdown_tag(users_dropdown_label(issuable.assignees), options: assignees_dropdown_options(issuable.to_ability_name))
-  = link_to 'Assign to me', '#', class: "assign-to-me-link qa-assign-to-me-link #{'hide' if issuable.assignees.include?(current_user)}"
+  = link_to _('Assign to me'), '#', class: "assign-to-me-link qa-assign-to-me-link #{'hide' if issuable.assignees.include?(current_user)}"

app/views/shared/issuable/form/_type_selector.html.haml

 - return unless issuable.supports_issue_type? && can?(current_user, :create_issue, @project)
 
 .form-group.row.gl-mb-0
-  = form.label :type, 'Type', class: 'col-form-label col-sm-2'
+  = form.label :type, _('Type'), class: 'col-form-label col-sm-2'
   .col-sm-10
     .gl-display-flex.gl-align-items-center
       .issuable-form-select-holder.selectbox.form-group.gl-mb-0

ee/app/views/shared/issuable/form/_weight.html.haml

@@ -7,10 +7,10 @@
 
 .form-group.row
   = form.label :label_ids, class: "col-form-label col-md-2 #{"col-lg-4" if has_due_date}" do
-    Weight
+    #{_('Weight')}
   .col-md-10{ class: ("col-lg-8" if has_due_date) }
     .issuable-form-select-holder
       - if issuable.weight
         = form.hidden_field :weight
 
-      = form.text_field :weight, class: "datepicker form-control qa-issuable-weight-input", placeholder: "Enter a number", autocomplete: "off", type: "text"
+      = form.text_field :weight, class: "datepicker form-control qa-issuable-weight-input", placeholder: _('Enter a number'), autocomplete: "off", type: "text"

locale/gitlab.pot

@@ -419,6 +419,12 @@ msgstr[1] ""
 msgid "%{actionText} & %{openOrClose} %{noteable}"
 msgstr ""
 
+msgid "%{actionText} & close %{noteable}"
+msgstr ""
+
+msgid "%{actionText} & reopen %{noteable}"
+msgstr ""
+
 msgid "%{address} is an invalid IP address range"
 msgstr ""
 
@@ -811,9 +817,6 @@ msgstr ""
 msgid "%{oneYearAgo} - %{today}"
 msgstr ""
 
-msgid "%{openOrClose} %{noteable}"
-msgstr ""
-
 msgid "%{openedEpics} open, %{closedEpics} closed"
 msgstr ""
 
@@ -4724,6 +4727,9 @@ msgstr ""
 msgid "Assign to commenting user"
 msgstr ""
 
+msgid "Assign to me"
+msgstr ""
+
 msgid "Assign yourself to these issues"
 msgstr ""
 
@@ -7308,6 +7314,9 @@ msgstr ""
 msgid "Close %{issueType}"
 msgstr ""
 
+msgid "Close %{noteable}"
+msgstr ""
+
 msgid "Close %{tabname}"
 msgstr ""
 
@@ -14898,6 +14907,9 @@ msgstr ""
 msgid "Filter by merge requests that are currently merged."
 msgstr ""
 
+msgid "Filter by milestone"
+msgstr ""
+
 msgid "Filter by milestone name"
 msgstr ""
 
@@ -17109,6 +17121,12 @@ msgstr ""
 msgid "Header message"
 msgstr ""
 
+msgid "HeaderAction|incident"
+msgstr ""
+
+msgid "HeaderAction|issue"
+msgstr ""
+
 msgid "Headers"
 msgstr ""
 
@@ -19431,6 +19449,9 @@ msgstr ""
 msgid "IssueBoards|Switch board"
 msgstr ""
 
+msgid "IssueList|created %{timeAgoString} by %{user}"
+msgstr ""
+
 msgid "IssueTracker|Custom issue tracker"
 msgstr ""
 
@@ -27968,6 +27989,9 @@ msgstr ""
 msgid "Promotion is not supported."
 msgstr ""
 
+msgid "Promotions|Add %{link_start} description templates %{link_end} to help your contributors to communicate effectively!"
+msgstr ""
+
 msgid "Promotions|Add Group Webhooks and GitLab Enterprise Edition."
 msgstr ""
 
@@ -29145,6 +29169,9 @@ msgstr ""
 msgid "Reopen %{issueType}"
 msgstr ""
 
+msgid "Reopen %{noteable}"
+msgstr ""
+
 msgid "Reopen epic"
 msgstr ""
 
@@ -31400,6 +31427,9 @@ msgstr ""
 msgid "Select assignee"
 msgstr ""
 
+msgid "Select assignee(s)"
+msgstr ""
+
 msgid "Select branch"
 msgstr ""
 
@@ -35591,6 +35621,9 @@ msgstr ""
 msgid "This is your current session"
 msgstr ""
 
+msgid "This issue is confidential and should only be visible to team members with at least Reporter access."
+msgstr ""
+
 msgid "This issue is currently blocked by the following issues:"
 msgstr ""
 
@@ -38451,6 +38484,9 @@ msgstr ""
 msgid "View merge request"
 msgstr ""
 
+msgid "View milestones"
+msgstr ""
+
 msgid "View on %{url}"
 msgstr ""