Externalize strings for translation on dashboard

https://gitlab.com/gitlab-org/gitlab/-/merge_requests/77432

Changelog: changed

app/assets/javascripts/project_select_combo_button.js

 import $ from 'jquery';
+import { sprintf, __ } from '~/locale';
 import AccessorUtilities from './lib/utils/accessor';
 import { loadCSSFile } from './lib/utils/css_utils';
 
 export default class ProjectSelectComboButton {
   constructor(select) {
     this.projectSelectInput = $(select);
-    this.newItemBtn = $('.new-project-item-link');
+    this.newItemBtn = $('.js-new-project-item-link');
     this.resourceType = this.newItemBtn.data('type');
     this.resourceLabel = this.newItemBtn.data('label');
     this.formattedText = this.deriveTextVariants();
@@ -80,9 +81,18 @@ export default class ProjectSelectComboButton {
   setNewItemBtnAttributes(project) {
     if (project) {
       this.newItemBtn.attr('href', project.url);
-      this.newItemBtn.text(`${this.formattedText.defaultTextPrefix} in ${project.name}`);
+      this.newItemBtn.text(
+        sprintf(__('New %{type} in %{project}'), {
+          type: this.resourceLabel,
+          project: project.name,
+        }),
+      );
     } else {
-      this.newItemBtn.text(`Select project to create ${this.formattedText.presetTextSuffix}`);
+      this.newItemBtn.text(
+        sprintf(__('Select project to create %{type}'), {
+          type: this.formattedText.presetTextSuffix,
+        }),
+      );
     }
   }
 
@@ -99,15 +109,12 @@ export default class ProjectSelectComboButton {
   }
 
   deriveTextVariants() {
-    const defaultTextPrefix = this.resourceLabel;
-
     // the trailing slice call depluralizes each of these strings (e.g. new-issues -> new-issue)
     const localStorageItemType = `new-${this.resourceType.split('_').join('-').slice(0, -1)}`;
     const presetTextSuffix = this.resourceType.split('_').join(' ').slice(0, -1);
 
     return {
       localStorageItemType, // new-issue / new-merge-request
-      defaultTextPrefix, // New issue / New merge request
       presetTextSuffix, // issue / merge request
     };
   }

app/views/dashboard/issues.html.haml

@@ -11,7 +11,7 @@
 
   - if current_user
     .page-title-controls
-      = render 'shared/new_project_item_select', path: 'issues/new', label: "New issue", with_feature_enabled: 'issues', type: :issues
+      = render 'shared/new_project_item_select', path: 'issues/new', label: _("issue"), with_feature_enabled: 'issues', type: :issues
 
 .top-area
   = render 'shared/issuable/nav', type: :issues, display_count: !@no_filters_set

app/views/dashboard/merge_requests.html.haml

@@ -9,7 +9,7 @@
 
   - if current_user
     .page-title-controls.ml-0.mb-3.ml-sm-auto.mb-sm-0
-      = render 'shared/new_project_item_select', path: 'merge_requests/new', label: "New merge request", with_feature_enabled: 'merge_requests', type: :merge_requests
+      = render 'shared/new_project_item_select', path: 'merge_requests/new', label: _("merge request"), with_feature_enabled: 'merge_requests', type: :merge_requests
 
 .top-area
   = render 'shared/issuable/nav', type: :merge_requests, display_count: !@no_filters_set

app/views/groups/issues.html.haml

@@ -18,7 +18,7 @@
       - if @can_bulk_update
         = render_if_exists 'shared/issuable/bulk_update_button', type: :issues
 
-      = render 'shared/new_project_item_select', path: 'issues/new', label: "New issue", type: :issues, with_feature_enabled: 'issues', with_shared: false, include_projects_in_subgroups: true
+      = render 'shared/new_project_item_select', path: 'issues/new', label: _("issue"), type: :issues, with_feature_enabled: 'issues', with_shared: false, include_projects_in_subgroups: true
 
   = render 'shared/issuable/search_bar', type: :issues
 

app/views/groups/merge_requests.html.haml

@@ -12,7 +12,7 @@
         - if @can_bulk_update
           = render_if_exists 'shared/issuable/bulk_update_button', type: :merge_requests
 
-        = render 'shared/new_project_item_select', path: 'merge_requests/new', label: "New merge request", type: :merge_requests, with_feature_enabled: 'merge_requests', with_shared: false, include_projects_in_subgroups: true
+        = render 'shared/new_project_item_select', path: 'merge_requests/new', label: _("merge request"), type: :merge_requests, with_feature_enabled: 'merge_requests', with_shared: false, include_projects_in_subgroups: true
 
   = render 'shared/issuable/search_bar', type: :merge_requests
 

app/views/shared/_new_project_item_select.html.haml

 - if any_projects?(@projects)
   .project-item-select-holder.btn-group.gl-ml-auto.gl-mr-auto.gl-relative.gl-overflow-hidden{ class: 'gl-display-flex!' }
-    %a.btn.gl-button.btn-confirm.new-project-item-link.block-truncated.qa-new-project-item-link{ href: '', data: { label: local_assigns[:label], type: local_assigns[:type] }, class: "gl-m-0!" }
+    %a.btn.gl-button.btn-confirm.js-new-project-item-link.block-truncated.qa-new-project-item-link{ href: '', data: { label: local_assigns[:label], type: local_assigns[:type] }, class: "gl-m-0!" }
       = loading_icon(color: 'light')
     = project_select_tag :project_path, class: "project-item-select gl-absolute! gl-visibility-hidden", data: { include_groups: local_assigns[:include_groups], order_by: 'last_activity_at', relative_path: local_assigns[:path], with_shared: local_assigns[:with_shared], include_projects_in_subgroups: local_assigns[:include_projects_in_subgroups] }, with_feature_enabled: local_assigns[:with_feature_enabled]
     %button.btn.dropdown-toggle.btn-confirm.btn-md.gl-button.gl-dropdown-toggle.dropdown-toggle-split.new-project-item-select-button.qa-new-project-item-select-button.gl-p-0.gl-w-100{ class: "gl-m-0!", 'aria-label': _('Toggle project select') }

app/views/shared/empty_states/_issues.html.haml

@@ -42,7 +42,7 @@
         - if has_button
           .text-center
             - if project_select_button
-              = render 'shared/new_project_item_select', path: 'issues/new', label: _('New issue'), type: :issues, with_feature_enabled: 'issues'
+              = render 'shared/new_project_item_select', path: 'issues/new', label: _('issue'), type: :issues, with_feature_enabled: 'issues'
             - elsif show_new_issue_link?(@project)
               = link_to _('New issue'), button_path, class: 'gl-button btn btn-confirm', id: 'new_issue_link'
 

app/views/shared/empty_states/_merge_requests.html.haml

@@ -40,6 +40,6 @@
         - if has_button
           .text-center
             - if project_select_button
-              = render 'shared/new_project_item_select', path: 'merge_requests/new', label: _('New merge request'), type: :merge_requests, with_feature_enabled: 'merge_requests'
+              = render 'shared/new_project_item_select', path: 'merge_requests/new', label: _('merge request'), type: :merge_requests, with_feature_enabled: 'merge_requests'
             - else
               = link_to _('New merge request'), button_path, class: 'gl-button btn btn-confirm', title: _('New merge request'), id: 'new_merge_request_link'

locale/gitlab.pot

@@ -23484,6 +23484,9 @@ msgstr ""
 msgid "New %{issueType}"
 msgstr ""
 
+msgid "New %{type} in %{project}"
+msgstr ""
+
 msgid "New Application"
 msgstr ""
 
@@ -31987,6 +31990,9 @@ msgstr ""
 msgid "Select project to choose zone"
 msgstr ""
 
+msgid "Select project to create %{type}"
+msgstr ""
+
 msgid "Select project to create issue"
 msgstr ""
 

spec/features/dashboard/issues_spec.rb

@@ -71,7 +71,7 @@ RSpec.describe 'Dashboard Issues' do
       find('#select2-drop-mask', visible: false)
       execute_script("$('#select2-drop-mask').remove();")
 
-      find('.new-project-item-link').click
+      find('.js-new-project-item-link').click
 
       expect(page).to have_current_path("#{project_path}/-/issues/new")
 

spec/features/dashboard/milestones_spec.rb

@@ -41,7 +41,7 @@ RSpec.describe 'Dashboard > Milestones' do
           first('.select2-result-label').click
         end
 
-        find('.new-project-item-link').click
+        find('.js-new-project-item-link').click
 
         expect(current_path).to eq(new_group_milestone_path(group))
       end

spec/features/groups/merge_requests_spec.rb

@@ -67,7 +67,7 @@ RSpec.describe 'Group merge requests page' do
     end
 
     it 'shows projects only with merge requests feature enabled', :js do
-      find('.new-project-item-link').click
+      find('.js-new-project-item-link').click
 
       page.within('.select2-results') do
         expect(page).to have_content(project.name_with_namespace)

spec/frontend/fixtures/static/project_select_combo_button.html

 <div class="project-item-select-holder">
   <input class="project-item-select" data-group-id="12345" data-relative-path="issues/new" />
-  <a class="new-project-item-link" data-label="New issue" data-type="issues" href="">
+  <a class="js-new-project-item-link" data-label="issue" data-type="issues" href="">
     <span class="gl-spinner"></span>
   </a>
   <a class="new-project-item-select-button">

spec/frontend/project_select_combo_button_spec.js

@@ -28,7 +28,7 @@ describe('Project Select Combo Button', () => {
 
     loadFixtures(fixturePath);
 
-    testContext.newItemBtn = document.querySelector('.new-project-item-link');
+    testContext.newItemBtn = document.querySelector('.js-new-project-item-link');
     testContext.projectSelectInput = document.querySelector('.project-item-select');
   });
 
@@ -120,7 +120,6 @@ describe('Project Select Combo Button', () => {
       const returnedVariants = testContext.method();
 
       expect(returnedVariants.localStorageItemType).toBe('new-merge-request');
-      expect(returnedVariants.defaultTextPrefix).toBe('New merge request');
       expect(returnedVariants.presetTextSuffix).toBe('merge request');
     });
 
@@ -131,7 +130,6 @@ describe('Project Select Combo Button', () => {
       const returnedVariants = testContext.method();
 
       expect(returnedVariants.localStorageItemType).toBe('new-issue');
-      expect(returnedVariants.defaultTextPrefix).toBe('New issue');
       expect(returnedVariants.presetTextSuffix).toBe('issue');
     });
   });