.gitlab/CODEOWNERS

@@ -19,3 +19,5 @@ db/ @abrandl @NikolayS
 /lib/gitlab/ci/templates/ @nolith @zj
 /lib/gitlab/ci/templates/Auto-DevOps.gitlab-ci.yml @DylanGriffith @mayra-cabrera @tkuah
 /lib/gitlab/ci/templates/Security/ @plafoucriere @gonzoyumo @twoodham
+/ee/app/models/project_alias.rb @patrickbajao
+/ee/lib/api/project_aliases.rb @patrickbajao

.gitlab/ci/docs.gitlab-ci.yml

@@ -12,7 +12,9 @@
 # Trigger a manual docs build in gitlab-docs only on non docs-only branches.
 # Useful to preview the docs changes live.
 review-docs-deploy-manual:
-  <<: *review-docs
+  extends:
+    - .review-docs
+    - .no-docs-and-no-qa
   stage: build
   script:
     - gem install gitlab --no-document
@@ -21,9 +23,6 @@ review-docs-deploy-manual:
   only:
     - branches@gitlab-org/gitlab-ce
     - branches@gitlab-org/gitlab-ee
-  except:
-    - /(^docs[\/-].*|.*-docs$)/
-    - /(^qa[\/-].*|.*-qa$)/
 
 # Always trigger a docs build in gitlab-docs only on docs-only branches.
 # Useful to preview the docs changes live.
@@ -69,7 +68,7 @@ docs lint:
     # Lint Markdown
     # https://github.com/markdownlint/markdownlint/blob/master/docs/RULES.md
     - bundle exec mdl content/$DOCS_GITLAB_REPO_SUFFIX/**/*.md --rules \
-        MD032
+        MD004,MD032
     # Build HTML from Markdown
     - bundle exec nanoc
     # Check the internal links

.gitlab/ci/frontend.gitlab-ci.yml

@@ -70,9 +70,10 @@ gitlab:assets:compile pull-cache:
   cache:
     policy: pull
   except:
-    - master@gitlab-org/gitlab-ce
-    - master@gitlab-org/gitlab-ee
-    - /(^docs[\/-].*|.*-docs$)/
+    refs:
+      - master@gitlab-org/gitlab-ce
+      - master@gitlab-org/gitlab-ee
+      - /(^docs[\/-].*|.*-docs$)/
 
 .compile-assets-metadata:
   extends: .dedicated-runner
@@ -107,9 +108,10 @@ compile-assets pull-cache:
   cache:
     policy: pull
   except:
-    - master@gitlab-org/gitlab-ce
-    - master@gitlab-org/gitlab-ee
-    - /(^docs[\/-].*|.*-docs$)/
+    refs:
+      - master@gitlab-org/gitlab-ce
+      - master@gitlab-org/gitlab-ee
+      - /(^docs[\/-].*|.*-docs$)/
 
 gitlab:ui:visual:
   extends: .dedicated-runner

.gitlab/ci/global.gitlab-ci.yml

@@ -30,7 +30,14 @@
 
 .no-docs:
   except:
-    - /(^docs[\/-].*|.*-docs$)/
+    refs:
+      - /(^docs[\/-].*|.*-docs$)/
+
+.no-docs-and-no-qa:
+  except:
+    refs:
+      - /(^docs[\/-].*|.*-docs$)/
+      - /(^qa[\/-].*|.*-qa$)/
 
 .dedicated-no-docs-pull-cache-job:
   extends:
@@ -38,10 +45,9 @@
     - .no-docs
 
 .dedicated-no-docs-and-no-qa-pull-cache-job:
-  extends: .dedicated-pull-cache-job
-  except:
-    - /(^docs[\/-].*|.*-docs$)/
-    - /(^qa[\/-].*|.*-qa$)/
+  extends:
+    - .dedicated-pull-cache-job
+    - .no-docs-and-no-qa
 
 # Jobs that do not need a DB
 .dedicated-no-docs-no-db-pull-cache-job:

.gitlab/ci/memory.gitlab-ci.yml

@@ -17,3 +17,26 @@ memory-static:
       - tmp/memory_*.txt
     reports:
       metrics: tmp/memory_metrics.txt
+
+# Show memory usage caused by invoking require per gem.
+# Unlike `memory-static`, it hits the app with one request to ensure that any last minute require-s have been called.
+# The application is booted in `production` environment.
+# All tests are run without a webserver (directly using Rack::Mock by default).
+memory-on-boot:
+  extends: .rspec-metadata-pg-10
+  variables:
+    NODE_ENV: "production"
+    RAILS_ENV: "production"
+    SETUP_DB: "true"
+    SKIP_STORAGE_VALIDATION: "true"
+    # we override the max_old_space_size to prevent OOM errors
+    NODE_OPTIONS: --max_old_space_size=3584
+  script:
+    # Both bootsnap and derailed monkey-patch Kernel#require, which leads to circular dependency
+    - DISABLE_BOOTSNAP=true PATH_TO_HIT="/users/sign_in" CUT_OFF=0.3 bundle exec derailed exec perf:mem >> 'tmp/memory_on_boot.txt'
+    - scripts/generate-memory-metrics-on-boot tmp/memory_on_boot.txt >> 'tmp/memory_on_boot_metrics.txt'
+  artifacts:
+    paths:
+      - tmp/memory_*.txt
+    reports:
+      metrics: tmp/memory_on_boot_metrics.txt

.gitlab/ci/rails.gitlab-ci.yml

@@ -20,8 +20,9 @@
     - master@gitlab/gitlab-ee
 
 .gitlab-setup: &gitlab-setup
-  extends: .dedicated-no-docs-and-no-qa-pull-cache-job
-  <<: *use-pg
+  extends:
+    - .dedicated-no-docs-and-no-qa-pull-cache-job
+    - .use-pg
   variables:
     SETUP_DB: "false"
   script:
@@ -43,7 +44,9 @@
     - bundle exec rake $CI_JOB_NAME
 
 .rspec-metadata: &rspec-metadata
-  extends: .dedicated-pull-cache-job
+  extends:
+    - .dedicated-pull-cache-job
+    - .no-docs-and-no-qa
   stage: test
   script:
     - JOB_NAME=( $CI_JOB_NAME )
@@ -76,9 +79,6 @@
       - tmp/capybara/
     reports:
       junit: junit_rspec.xml
-  except:
-    - /(^docs[\/-].*|.*-docs$)/
-    - /(^qa[\/-].*|.*-qa$)/
 
 .rspec-metadata-pg: &rspec-metadata-pg
   <<: *rspec-metadata
@@ -122,8 +122,10 @@
     - setup-test-env
 
 setup-test-env:
-  extends: .dedicated-runner-default-cache
-  <<: *use-pg
+  extends:
+    - .dedicated-runner-default-cache
+    - .no-docs
+    - .use-pg
   stage: prepare
   script:
     - bundle exec ruby -Ispec -e 'require "spec_helper" ; TestEnv.init'
@@ -134,8 +136,6 @@ setup-test-env:
       - tmp/tests
       - config/secrets.yml
       - vendor/gitaly-ruby
-  except:
-    - /(^docs[\/-].*|.*-docs$)/
 
 rspec unit pg:
   <<: *rspec-metadata-pg
@@ -200,11 +200,12 @@ static-analysis:
 downtime_check:
   <<: *rake-exec
   except:
-    - master
-    - tags
-    - /^[\d-]+-stable(-ee)?$/
-    - /(^docs[\/-].*|.*-docs$)/
-    - /(^qa[\/-].*|.*-qa$)/
+    refs:
+      - master
+      - tags
+      - /^[\d-]+-stable(-ee)?$/
+      - /(^docs[\/-].*|.*-docs$)/
+      - /(^qa[\/-].*|.*-qa$)/
   dependencies:
     - setup-test-env
 
@@ -212,12 +213,13 @@ ee_compat_check:
   <<: *rake-exec
   dependencies: []
   except:
-    - master
-    - tags
-    - /[\d-]+-stable(-ee)?/
-    - /^security-/
-    - branches@gitlab-org/gitlab-ee
-    - branches@gitlab/gitlab-ee
+    refs:
+      - master
+      - tags
+      - /[\d-]+-stable(-ee)?/
+      - /^security-/
+      - branches@gitlab-org/gitlab-ee
+      - branches@gitlab/gitlab-ee
   retry: 0
   artifacts:
     name: "${CI_JOB_NAME}_${CI_COMIT_REF_NAME}_${CI_COMMIT_SHA}"
@@ -244,7 +246,7 @@ migration:path-pg:
   extends: .dedicated-no-docs-and-no-qa-pull-cache-job
   script:
     - bundle exec rake db:migrate VERSION=20170523121229
-    - bundle exec rake db:migrate
+    - bundle exec rake db:migrate SKIP_SCHEMA_VERSION_CHECK=true
   dependencies:
     - setup-test-env
 
@@ -261,7 +263,9 @@ gitlab:setup-pg:
 coverage:
   # Don't include dedicated-no-docs-no-db-pull-cache-job here since we need to
   # download artifacts from all the rspec jobs instead of from setup-test-env only
-  extends: .dedicated-runner-default-cache
+  extends:
+    - .dedicated-runner-default-cache
+    - .no-docs-and-no-qa
   cache:
     policy: pull
   variables:
@@ -276,6 +280,3 @@ coverage:
     paths:
       - coverage/index.html
       - coverage/assets/
-  except:
-    - /(^docs[\/-].*|.*-docs$)/
-    - /(^qa[\/-].*|.*-qa$)/

.gitlab/ci/setup.gitlab-ci.yml

@@ -15,7 +15,9 @@ cache gems:
     - setup-test-env
 
 gitlab_git_test:
-  extends: .dedicated-runner
+  extends:
+    - .dedicated-runner
+    - .no-docs-and-no-qa
   variables:
     SETUP_DB: "false"
   before_script: []
@@ -23,12 +25,11 @@ gitlab_git_test:
   cache: {}
   script:
     - spec/support/prepare-gitlab-git-test-for-commit --check-for-changes
-  except:
-    - /(^docs[\/-].*|.*-docs$)/
-    - /(^qa[\/-].*|.*-qa$)/
 
 no_ee_check:
-  extends: .dedicated-runner
+  extends:
+    - .dedicated-runner
+    - .no-docs-and-no-qa
   variables:
     SETUP_DB: "false"
   before_script: []
@@ -38,6 +39,3 @@ no_ee_check:
     - scripts/no-ee-check
   only:
     - /.+/@gitlab-org/gitlab-ce
-  except:
-    - /(^docs[\/-].*|.*-docs$)/
-    - /(^qa[\/-].*|.*-qa$)/

.gitlab/ci/test-metadata.gitlab-ci.yml

@@ -12,7 +12,9 @@
       - rspec_profiling/
 
 retrieve-tests-metadata:
-  <<: *tests-metadata-state
+  extends:
+    - .tests-metadata-state
+    - .no-docs-and-no-qa
   stage: prepare
   cache:
     key: tests_metadata
@@ -25,9 +27,6 @@ retrieve-tests-metadata:
     - mkdir -p rspec_profiling/
     - wget -O $FLAKY_RSPEC_SUITE_REPORT_PATH http://${TESTS_METADATA_S3_BUCKET}.s3.amazonaws.com/$FLAKY_RSPEC_SUITE_REPORT_PATH || rm $FLAKY_RSPEC_SUITE_REPORT_PATH
     - '[[ -f $FLAKY_RSPEC_SUITE_REPORT_PATH ]] || echo "{}" > ${FLAKY_RSPEC_SUITE_REPORT_PATH}'
-  except:
-    - /(^docs[\/-].*|.*-docs$)/
-    - /(^qa[\/-].*|.*-qa$)/
 
 update-tests-metadata:
   <<: *tests-metadata-state
@@ -69,9 +68,10 @@ flaky-examples-check:
   only:
     - branches
   except:
-    - master
-    - /(^docs[\/-].*|.*-docs$)/
-    - /(^qa[\/-].*|.*-qa$)/
+    refs:
+      - master
+      - /(^docs[\/-].*|.*-docs$)/
+      - /(^qa[\/-].*|.*-qa$)/
   artifacts:
     expire_in: 30d
     paths:

Gemfile

@@ -11,7 +11,7 @@ gem 'responders', '~> 2.0'
 gem 'sprockets', '~> 3.7.0'
 
 # Default values for AR models
-gem 'gitlab-default_value_for', '~> 3.1.1', require: 'default_value_for'
+gem 'default_value_for', '~> 3.2.0'
 
 # Supported DBs
 gem 'mysql2', '~> 0.4.10', group: :mysql
@@ -211,7 +211,7 @@ gem 'discordrb-webhooks-blackst0ne', '~> 3.3', require: false
 # HipChat integration
 gem 'hipchat', '~> 1.5.0'
 
-# JIRA integration
+# Jira integration
 gem 'jira-ruby', '~> 1.4'
 
 # Flowdock integration
@@ -309,7 +309,7 @@ group :metrics do
   gem 'influxdb', '~> 0.2', require: false
 
   # Prometheus
-  gem 'prometheus-client-mmap', '~> 0.9.4'
+  gem 'prometheus-client-mmap', '~> 0.9.6'
   gem 'raindrops', '~> 0.18'
 end
 

Gemfile.lock

@@ -163,6 +163,8 @@ GEM
       html-pipeline
     declarative (0.0.10)
     declarative-option (0.1.0)
+    default_value_for (3.2.0)
+      activerecord (>= 3.2.0, < 6.0)
     derailed_benchmarks (1.3.5)
       benchmark-ips (~> 2)
       get_process_mem (~> 0)
@@ -304,8 +306,6 @@ GEM
     gitaly-proto (1.32.0)
       grpc (~> 1.0)
     github-markup (1.7.0)
-    gitlab-default_value_for (3.1.1)
-      activerecord (>= 3.2.0, < 6.0)
     gitlab-labkit (0.3.0)
       actionpack (~> 5)
       activesupport (~> 5)
@@ -652,7 +652,7 @@ GEM
       parser
       unparser
     procto (0.0.3)
-    prometheus-client-mmap (0.9.4)
+    prometheus-client-mmap (0.9.6)
     pry (0.11.3)
       coderay (~> 1.1.0)
       method_source (~> 0.9.0)
@@ -1056,6 +1056,7 @@ DEPENDENCIES
   creole (~> 0.5.0)
   database_cleaner (~> 1.7.0)
   deckar01-task_list (= 2.2.0)
+  default_value_for (~> 3.2.0)
   derailed_benchmarks
   device_detector
   devise (~> 4.6)
@@ -1093,7 +1094,6 @@ DEPENDENCIES
   gettext_i18n_rails_js (~> 1.3)
   gitaly-proto (~> 1.32.0)
   github-markup (~> 1.7.0)
-  gitlab-default_value_for (~> 3.1.1)
   gitlab-labkit (~> 0.3.0)
   gitlab-markup (~> 1.7.0)
   gitlab-sidekiq-fetcher (~> 0.4.0)
@@ -1173,7 +1173,7 @@ DEPENDENCIES
   peek-redis (~> 1.2.0)
   pg (~> 1.1)
   premailer-rails (~> 1.9.7)
-  prometheus-client-mmap (~> 0.9.4)
+  prometheus-client-mmap (~> 0.9.6)
   pry-byebug (~> 3.5.1)
   pry-rails (~> 0.3.4)
   puma (~> 3.12)

app/assets/javascripts/boards/components/board.js

+import $ from 'jquery';
 import Sortable from 'sortablejs';
 import Vue from 'vue';
-import { n__ } from '~/locale';
+import { n__, s__ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 import Tooltip from '~/vue_shared/directives/tooltip';
 import AccessorUtilities from '../../lib/utils/accessor';
@@ -53,12 +54,19 @@ export default Vue.extend({
       const { issuesSize } = this.list;
       return `${n__('%d issue', '%d issues', issuesSize)}`;
     },
+    caretTooltip() {
+      return this.list.isExpanded ? s__('Boards|Collapse') : s__('Boards|Expand');
+    },
     isNewIssueShown() {
       return (
         this.list.type === 'backlog' ||
         (!this.disabled && this.list.type !== 'closed' && this.list.type !== 'blank')
       );
     },
+    uniqueKey() {
+      // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
+      return `boards.${this.boardId}.${this.list.type}.${this.list.id}`;
+    },
   },
   watch: {
     filter: {
@@ -72,31 +80,34 @@ export default Vue.extend({
     },
   },
   mounted() {
-    this.sortableOptions = getBoardSortableDefaultOptions({
+    const instance = this;
+
+    const sortableOptions = getBoardSortableDefaultOptions({
       disabled: this.disabled,
       group: 'boards',
       draggable: '.is-draggable',
       handle: '.js-board-handle',
-      onEnd: e => {
+      onEnd(e) {
         sortableEnd();
 
+        const sortable = this;
+
         if (e.newIndex !== undefined && e.oldIndex !== e.newIndex) {
-          const order = this.sortable.toArray();
+          const order = sortable.toArray();
           const list = boardsStore.findList('id', parseInt(e.item.dataset.id, 10));
 
-          this.$nextTick(() => {
+          instance.$nextTick(() => {
             boardsStore.moveList(list, order);
           });
         }
       },
     });
 
-    this.sortable = Sortable.create(this.$el.parentNode, this.sortableOptions);
+    Sortable.create(this.$el.parentNode, sortableOptions);
   },
   created() {
     if (this.list.isExpandable && AccessorUtilities.isLocalStorageAccessSafe()) {
-      const isCollapsed =
-        localStorage.getItem(`boards.${this.boardId}.${this.list.type}.expanded`) === 'false';
+      const isCollapsed = localStorage.getItem(`${this.uniqueKey}.expanded`) === 'false';
 
       this.list.isExpanded = !isCollapsed;
     }
@@ -105,16 +116,17 @@ export default Vue.extend({
     showNewIssueForm() {
       this.$refs['board-list'].showIssueForm = !this.$refs['board-list'].showIssueForm;
     },
-    toggleExpanded(e) {
-      if (this.list.isExpandable && !e.target.classList.contains('js-no-trigger-collapse')) {
+    toggleExpanded() {
+      if (this.list.isExpandable) {
         this.list.isExpanded = !this.list.isExpanded;
 
         if (AccessorUtilities.isLocalStorageAccessSafe()) {
-          localStorage.setItem(
-            `boards.${this.boardId}.${this.list.type}.expanded`,
-            this.list.isExpanded,
-          );
+          localStorage.setItem(`${this.uniqueKey}.expanded`, this.list.isExpanded);
         }
+
+        // When expanding/collapsing, the tooltip on the caret button sometimes stays open.
+        // Close all tooltips manually to prevent dangling tooltips.
+        $('.tooltip').tooltip('hide');
       }
     },
   },

app/assets/javascripts/boards/components/board_blank_state.vue

 <script>
+import { __ } from '~/locale';
 /* global ListLabel */
 import Cookies from 'js-cookie';
 import boardsStore from '../stores/boards_store';
@@ -7,8 +8,8 @@ export default {
   data() {
     return {
       predefinedLabels: [
-        new ListLabel({ title: 'To Do', color: '#F0AD4E' }),
-        new ListLabel({ title: 'Doing', color: '#5CB85C' }),
+        new ListLabel({ title: __('To Do'), color: '#F0AD4E' }),
+        new ListLabel({ title: __('Doing'), color: '#5CB85C' }),
       ],
     };
   },
@@ -58,7 +59,11 @@ export default {
 
 <template>
   <div class="board-blank-state p-3">
-    <p>Add the following default lists to your Issue Board with one click:</p>
+    <p>
+      {{
+        __('BoardBlankState|Add the following default lists to your Issue Board with one click:')
+      }}
+    </p>
     <ul class="list-unstyled board-blank-state-list">
       <li v-for="(label, index) in predefinedLabels" :key="index">
         <span
@@ -70,18 +75,21 @@ export default {
       </li>
     </ul>
     <p>
-      Starting out with the default set of lists will get you right on the way to making the most of
-      your board.
+      {{
+        __(
+          'BoardBlankState|Starting out with the default set of lists will get you right on the way to making the most of your board.',
+        )
+      }}
     </p>
     <button
       class="btn btn-success btn-inverted btn-block"
       type="button"
       @click.stop="addDefaultLists"
     >
-      Add default lists
+      {{ __('BoardBlankState|Add default lists') }}
     </button>
     <button class="btn btn-default btn-block" type="button" @click.stop="clearBlankState">
-      Nevermind, I'll use my own
+      {{ __("BoardBlankState|Nevermind, I'll use my own") }}
     </button>
   </div>
 </template>

app/assets/javascripts/boards/components/board_list.vue

@@ -227,7 +227,7 @@ export default {
     :class="{ 'd-none': !list.isExpanded, 'd-flex flex-column': list.isExpanded }"
     class="board-list-component position-relative h-100"
   >
-    <div v-if="loading" class="board-list-loading text-center" aria-label="Loading issues">
+    <div v-if="loading" class="board-list-loading text-center" :aria-label="__('Loading issues')">
       <gl-loading-icon />
     </div>
     <board-new-issue
@@ -257,7 +257,7 @@ export default {
       />
       <li v-if="showCount" class="board-list-count text-center" data-issue-id="-1">
         <gl-loading-icon v-show="list.loadingMore" label="Loading more issues" />
-        <span v-if="list.issues.length === list.issuesSize"> Showing all issues </span>
+        <span v-if="list.issues.length === list.issuesSize">{{ __('Showing all issues') }}</span>
         <span v-else> Showing {{ list.issues.length }} of {{ list.issuesSize }} issues </span>
       </li>
     </ul>

app/assets/javascripts/boards/components/board_new_issue.vue

@@ -102,9 +102,9 @@ export default {
     <div class="board-card position-relative p-3 rounded">
       <form @submit="submit($event)">
         <div v-if="error" class="flash-container">
-          <div class="flash-alert">An error occurred. Please try again.</div>
+          <div class="flash-alert">{{ __('An error occurred. Please try again.') }}</div>
         </div>
-        <label :for="list.id + '-title'" class="label-bold"> Title </label>
+        <label :for="list.id + '-title'" class="label-bold">{{ __('Title') }}</label>
         <input
           :id="list.id + '-title'"
           ref="input"
@@ -122,12 +122,11 @@ export default {
             class="float-left"
             variant="success"
             type="submit"
+            >{{ __('Submit issue') }}</gl-button
           >
-            Submit issue
-          </gl-button>
-          <gl-button class="float-right" type="button" variant="default" @click="cancel">
-            Cancel
-          </gl-button>
+          <gl-button class="float-right" type="button" variant="default" @click="cancel">{{
+            __('Cancel')
+          }}</gl-button>
         </div>
       </form>
     </div>

app/assets/javascripts/boards/components/issue_card_inner.vue

@@ -124,7 +124,7 @@ export default {
       return `${this.rootPath}${assignee.username}`;
     },
     avatarUrlTitle(assignee) {
-      return `Avatar for ${assignee.name}`;
+      return sprintf(__(`Avatar for %{assigneeName}`), { assigneeName: assignee.name });
     },
     showLabel(label) {
       if (!label.id) return false;
@@ -160,9 +160,10 @@ export default {
           :title="__('Confidential')"
           class="confidential-icon append-right-4"
           :aria-label="__('Confidential')"
-        /><a :href="issue.path" :title="issue.title" class="js-no-trigger" @mousemove.stop>{{
-          issue.title
-        }}</a>
+        />
+        <a :href="issue.path" :title="issue.title" class="js-no-trigger" @mousemove.stop>
+          {{ issue.title }}
+        </a>
       </h4>
     </div>
     <div v-if="showLabelFooter" class="board-card-labels prepend-top-4 d-flex flex-wrap">
@@ -204,13 +205,13 @@ export default {
             placement="bottom"
             class="board-issue-path block-truncated bold"
             >{{ issueReferencePath }}</tooltip-on-truncate
-          >#{{ issue.iid }}
+          >
+          #{{ issue.iid }}
         </span>
         <span class="board-info-items prepend-top-8 d-inline-block">
-          <issue-due-date v-if="issue.dueDate" :date="issue.dueDate" /><issue-time-estimate
-            v-if="issue.timeEstimate"
-            :estimate="issue.timeEstimate"
-          /><issue-card-weight
+          <issue-due-date v-if="issue.dueDate" :date="issue.dueDate" />
+          <issue-time-estimate v-if="issue.timeEstimate" :estimate="issue.timeEstimate" />
+          <issue-card-weight
             v-if="issue.weight"
             :weight="issue.weight"
             @click="filterByWeight(issue.weight)"
@@ -230,7 +231,8 @@ export default {
           tooltip-placement="bottom"
         >
           <span class="js-assignee-tooltip">
-            <span class="bold d-block">Assignee</span> {{ assignee.name }}
+            <span class="bold d-block">{{ __('Assignee') }}</span>
+            {{ assignee.name }}
             <span class="text-white-50">@{{ assignee.username }}</span>
           </span>
         </user-avatar-link>
@@ -240,9 +242,8 @@ export default {
           :title="assigneeCounterTooltip"
           class="avatar-counter"
           data-placement="bottom"
+          >{{ assigneeCounterLabel }}</span
         >
-          {{ assigneeCounterLabel }}
-        </span>
       </div>
     </div>
   </div>

app/assets/javascripts/boards/components/modal/empty_state.vue

 <script>
+import { __, sprintf } from '~/locale';
 import ModalStore from '../../stores/modal_store';
 import modalMixin from '../../mixins/modal_mixins';
 
@@ -20,19 +21,20 @@ export default {
   computed: {
     contents() {
       const obj = {
-        title: "You haven't added any issues to your project yet",
-        content: `
-          An issue can be a bug, a todo or a feature request that needs to be
-          discussed in a project. Besides, issues are searchable and filterable.
-        `,
+        title: __("You haven't added any issues to your project yet"),
+        content: __(
+          'An issue can be a bug, a todo or a feature request that needs to be discussed in a project. Besides, issues are searchable and filterable.',
+        ),
       };
 
       if (this.activeTab === 'selected') {
-        obj.title = "You haven't selected any issues yet";
-        obj.content = `
-          Go back to <strong>Open issues</strong> and select some issues
-          to add to your board.
-        `;
+        obj.title = __("You haven't selected any issues yet");
+        obj.content = sprintf(
+          __(
+            'Go back to %{startTag}Open issues%{endTag} and select some issues to add to your board.',
+          ),
+          { startTag: '<strong>', endTag: '</strong>' },
+        );
       }
 
       return obj;
@@ -51,16 +53,16 @@ export default {
         <div class="text-content">
           <h4>{{ contents.title }}</h4>
           <p v-html="contents.content"></p>
-          <a v-if="activeTab === 'all'" :href="newIssuePath" class="btn btn-success btn-inverted">
-            New issue
-          </a>
+          <a v-if="activeTab === 'all'" :href="newIssuePath" class="btn btn-success btn-inverted">{{
+            __('New issue')
+          }}</a>
           <button
             v-if="activeTab === 'selected'"
             class="btn btn-default"
             type="button"
             @click="changeTab('all')"
           >
-            Open issues
+            {{ __('Open issues') }}
           </button>
         </div>
       </div>

app/assets/javascripts/boards/components/modal/footer.vue

 <script>
 import Flash from '../../../flash';
-import { __ } from '../../../locale';
+import { __, n__ } from '../../../locale';
 import ListsDropdown from './lists_dropdown.vue';
-import { pluralize } from '../../../lib/utils/text_utility';
 import ModalStore from '../../stores/modal_store';
 import modalMixin from '../../mixins/modal_mixins';
 import boardsStore from '../../stores/boards_store';
@@ -24,8 +23,8 @@ export default {
     },
     submitText() {
       const count = ModalStore.selectedCount();
-
-      return `Add ${count > 0 ? count : ''} ${pluralize('issue', count)}`;
+      if (!count) return __('Add issues');
+      return n__(`Add %d issue`, `Add %d issues`, count);
     },
   },
   methods: {
@@ -68,11 +67,11 @@ export default {
       <button :disabled="submitDisabled" class="btn btn-success" type="button" @click="addIssues">
         {{ submitText }}
       </button>
-      <span class="inline add-issues-footer-to-list"> to list </span>
+      <span class="inline add-issues-footer-to-list">{{ __('to list') }}</span>
       <lists-dropdown />
     </div>
     <button class="btn btn-default float-right" type="button" @click="toggleModal(false)">
-      Cancel
+      {{ __('Cancel') }}
     </button>
   </footer>
 </template>

app/assets/javascripts/boards/components/modal/header.vue

 <script>
+import { __ } from '~/locale';
 import ModalFilters from './filters';
 import ModalTabs from './tabs.vue';
 import ModalStore from '../../stores/modal_store';
@@ -30,10 +31,10 @@ export default {
   computed: {
     selectAllText() {
       if (ModalStore.selectedCount() !== this.issues.length || this.issues.length === 0) {
-        return 'Select all';
+        return __('Select all');
       }
 
-      return 'Deselect all';
+      return __('Deselect all');
     },
     showSearch() {
       return this.activeTab === 'all' && !this.loading && this.issuesCount > 0;
@@ -57,7 +58,7 @@ export default {
           type="button"
           class="close"
           data-dismiss="modal"
-          aria-label="Close"
+          :aria-label="__('Close')"
           @click="toggleModal(false)"
         >
           <span aria-hidden="true">×</span>

app/assets/javascripts/boards/components/modal/list.vue

@@ -123,7 +123,9 @@ export default {
       class="empty-state add-issues-empty-state-filter text-center"
     >
       <div class="svg-content"><img :src="emptyStateSvg" /></div>
-      <div class="text-content"><h4>There are no issues to show.</h4></div>
+      <div class="text-content">
+        <h4>{{ __('There are no issues to show.') }}</h4>
+      </div>
     </div>
     <div v-for="(group, index) in groupedIssues" :key="index" class="add-issues-list-column">
       <div v-for="issue in group" v-if="showIssue(issue)" :key="issue.id" class="board-card-parent">

app/assets/javascripts/boards/components/project_select.vue

 <script>
+import { __ } from '~/locale';
 import $ from 'jquery';
 import _ from 'underscore';
 import Icon from '~/vue_shared/components/icon.vue';
@@ -27,7 +28,7 @@ export default {
   },
   computed: {
     selectedProjectName() {
-      return this.selectedProject.name || 'Select a project';
+      return this.selectedProject.name || __('Select a project');
     },
   },
   mounted() {
@@ -81,7 +82,7 @@ export default {
 
 <template>
   <div>
-    <label class="label-bold prepend-top-10"> Project </label>
+    <label class="label-bold prepend-top-10">{{ __('Project') }}</label>
     <div ref="projectsDropdown" class="dropdown dropdown-projects">
       <button
         class="dropdown-menu-toggle wide"
@@ -92,9 +93,9 @@ export default {
         {{ selectedProjectName }} <icon name="chevron-down" />
       </button>
       <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-full-width">
-        <div class="dropdown-title">Projects</div>
+        <div class="dropdown-title">{{ __('Projects') }}</div>
         <div class="dropdown-input">
-          <input class="dropdown-input-field" type="search" placeholder="Search projects" />
+          <input class="dropdown-input-field" type="search" :placeholder="__('Search projects')" />
           <icon name="search" class="dropdown-input-search" data-hidden="true" />
         </div>
         <div class="dropdown-content"></div>