Add latest changes from gitlab-org/gitlab@master

44 files changed, 159 insertions, 126 deletions

diff --git a/app/assets/javascripts/admin/users/components/modals/delete_user_modal.vue b/app/assets/javascripts/admin/users/components/modals/delete_user_modal.vue
index ed90343777d..e949498c55b 100644
--- a/app/assets/javascripts/admin/users/components/modals/delete_user_modal.vue
+++ b/app/assets/javascripts/admin/users/components/modals/delete_user_modal.vue
@@ -138,7 +138,7 @@ export default {
       />
     </form>
     <template #modal-footer>
-      <gl-button @click="onCancel">{{ s__('Cancel') }}</gl-button>
+      <gl-button @click="onCancel">{{ __('Cancel') }}</gl-button>
       <gl-button
         :disabled="!canSubmit"
         category="secondary"
diff --git a/app/assets/javascripts/analytics/usage_trends/components/usage_counts.vue b/app/assets/javascripts/analytics/usage_trends/components/usage_counts.vue
index 1eb4832a2a3..63ec40d4ec6 100644
--- a/app/assets/javascripts/analytics/usage_trends/components/usage_counts.vue
+++ b/app/assets/javascripts/analytics/usage_trends/components/usage_counts.vue
@@ -3,7 +3,7 @@ import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui';
 import { GlSingleStat } from '@gitlab/ui/dist/charts';
 import createFlash from '~/flash';
 import { number } from '~/lib/utils/unit_format';
-import { s__ } from '~/locale';
+import { __, s__ } from '~/locale';
 import usageTrendsCountQuery from '../graphql/queries/usage_trends_count.query.graphql';
 
 const defaultPrecision = 0;
@@ -52,7 +52,7 @@ export default {
       mergeRequests: s__('UsageTrends|Merge requests'),
       pipelines: s__('UsageTrends|Pipelines'),
     },
-    loadCountsError: s__('Could not load usage counts. Please refresh the page to try again.'),
+    loadCountsError: __('Could not load usage counts. Please refresh the page to try again.'),
   },
 };
 </script>
diff --git a/app/assets/javascripts/badges/components/badge_settings.vue b/app/assets/javascripts/badges/components/badge_settings.vue
index 825807e833e..0303930de5d 100644
--- a/app/assets/javascripts/badges/components/badge_settings.vue
+++ b/app/assets/javascripts/badges/components/badge_settings.vue
@@ -2,7 +2,7 @@
 import { GlSprintf, GlModal } from '@gitlab/ui';
 import { mapState, mapActions } from 'vuex';
 import createFlash from '~/flash';
-import { s__ } from '~/locale';
+import { __, s__ } from '~/locale';
 import Badge from './badge.vue';
 import BadgeForm from './badge_form.vue';
 import BadgeList from './badge_list.vue';
@@ -25,13 +25,13 @@ export default {
     ...mapState(['badgeInModal', 'isEditing']),
     primaryProps() {
       return {
-        text: s__('Delete badge'),
+        text: __('Delete badge'),
         attributes: [{ category: 'primary' }, { variant: 'danger' }],
       };
     },
     cancelProps() {
       return {
-        text: s__('Cancel'),
+        text: __('Cancel'),
       };
     },
   },
diff --git a/app/assets/javascripts/blob/pipeline_tour_success_modal.vue b/app/assets/javascripts/blob/pipeline_tour_success_modal.vue
index a3278f8bde2..e75aa523ed0 100644
--- a/app/assets/javascripts/blob/pipeline_tour_success_modal.vue
+++ b/app/assets/javascripts/blob/pipeline_tour_success_modal.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlModal, GlSprintf, GlLink, GlButton } from '@gitlab/ui';
 import Cookies from 'js-cookie';
-import { s__ } from '~/locale';
+import { __, s__ } from '~/locale';
 import Tracking from '~/tracking';
 
 const trackingMixin = Tracking.mixin();
@@ -69,7 +69,7 @@ export default {
     },
   },
   i18n: {
-    modalTitle: s__("That's it, well done!"),
+    modalTitle: __("That's it, well done!"),
     pipelinesButton: s__('MR widget|See your pipeline in action'),
     mergeRequestButton: s__('MR widget|Back to the Merge request'),
     bodyMessage: s__(
diff --git a/app/assets/javascripts/clusters/components/remove_cluster_confirmation.vue b/app/assets/javascripts/clusters/components/remove_cluster_confirmation.vue
index b0b787ac3f7..98db620e3ab 100644
--- a/app/assets/javascripts/clusters/components/remove_cluster_confirmation.vue
+++ b/app/assets/javascripts/clusters/components/remove_cluster_confirmation.vue
@@ -159,7 +159,7 @@ export default {
         )
       }}</span>
       <template #modal-footer>
-        <gl-button variant="secondary" @click="handleCancel">{{ s__('Cancel') }}</gl-button>
+        <gl-button variant="secondary" @click="handleCancel">{{ __('Cancel') }}</gl-button>
         <template v-if="confirmCleanup">
           <gl-button
             :disabled="!canSubmit"
diff --git a/app/assets/javascripts/clusters_list/constants.js b/app/assets/javascripts/clusters_list/constants.js
index 0bade1fc281..ffa28f516e6 100644
--- a/app/assets/javascripts/clusters_list/constants.js
+++ b/app/assets/javascripts/clusters_list/constants.js
@@ -91,7 +91,7 @@ export const I18N_INSTALL_AGENT_MODAL = {
   ),
 
   basicInstallTitle: s__('ClusterAgents|Recommended installation method'),
-  basicInstallBody: s__(
+  basicInstallBody: __(
     `Open a CLI and connect to the cluster you want to install the Agent in. Use this installation method to minimize any manual steps. The token is already included in the command.`,
   ),
 
@@ -100,7 +100,7 @@ export const I18N_INSTALL_AGENT_MODAL = {
     'ClusterAgents|For alternative installation methods %{linkStart}go to the documentation%{linkEnd}.',
   ),
 
-  registrationErrorTitle: s__('Failed to register Agent'),
+  registrationErrorTitle: __('Failed to register Agent'),
   unknownError: s__('ClusterAgents|An unknown error occurred. Please try again.'),
 };
 
diff --git a/app/assets/javascripts/deploy_tokens/components/revoke_button.vue b/app/assets/javascripts/deploy_tokens/components/revoke_button.vue
index e026391ae22..fdf8b7796bf 100644
--- a/app/assets/javascripts/deploy_tokens/components/revoke_button.vue
+++ b/app/assets/javascripts/deploy_tokens/components/revoke_button.vue
@@ -62,7 +62,7 @@ export default {
       </gl-sprintf>
       {{ s__('DeployTokens|This action cannot be undone.') }}
       <template #modal-footer>
-        <gl-button category="secondary" @click="cancelHandler">{{ s__('Cancel') }}</gl-button>
+        <gl-button category="secondary" @click="cancelHandler">{{ __('Cancel') }}</gl-button>
         <gl-button
           category="primary"
           variant="danger"
diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue
index 746646948fe..46726a8fa07 100644
--- a/app/assets/javascripts/diffs/components/diff_file_header.vue
+++ b/app/assets/javascripts/diffs/components/diff_file_header.vue
@@ -50,7 +50,7 @@ export default {
   mixins: [glFeatureFlagsMixin(), IdState({ idProp: (vm) => vm.diffFile.file_hash })],
   i18n: {
     ...DIFF_FILE_HEADER,
-    compareButtonLabel: s__('Compare submodule commit revisions'),
+    compareButtonLabel: __('Compare submodule commit revisions'),
   },
   props: {
     discussionPath: {
@@ -130,7 +130,7 @@ export default {
         const truncatedOldSha = escape(truncateSha(this.diffFile.submodule_compare.old_sha));
         const truncatedNewSha = escape(truncateSha(this.diffFile.submodule_compare.new_sha));
         return sprintf(
-          s__('Compare %{oldCommitId}...%{newCommitId}'),
+          __('Compare %{oldCommitId}...%{newCommitId}'),
           {
             oldCommitId: `<span class="commit-sha">${truncatedOldSha}</span>`,
             newCommitId: `<span class="commit-sha">${truncatedNewSha}</span>`,
diff --git a/app/assets/javascripts/environments/components/delete_environment_modal.vue b/app/assets/javascripts/environments/components/delete_environment_modal.vue
index 2eb2be351b3..26ec882472b 100644
--- a/app/assets/javascripts/environments/components/delete_environment_modal.vue
+++ b/app/assets/javascripts/environments/components/delete_environment_modal.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlTooltipDirective, GlModal } from '@gitlab/ui';
-import { s__, sprintf } from '~/locale';
+import { __, s__, sprintf } from '~/locale';
 import eventHub from '../event_hub';
 
 export default {
@@ -27,7 +27,7 @@ export default {
     },
     cancelProps() {
       return {
-        text: s__('Cancel'),
+        text: __('Cancel'),
       };
     },
     confirmDeleteMessage() {
diff --git a/app/assets/javascripts/environments/mixins/environments_mixin.js b/app/assets/javascripts/environments/mixins/environments_mixin.js
index 85cff73cc3e..0f9741784d6 100644
--- a/app/assets/javascripts/environments/mixins/environments_mixin.js
+++ b/app/assets/javascripts/environments/mixins/environments_mixin.js
@@ -6,7 +6,7 @@ import Visibility from 'visibilityjs';
 import createFlash from '~/flash';
 import Poll from '../../lib/utils/poll';
 import { getParameterByName } from '../../lib/utils/url_utility';
-import { s__ } from '../../locale';
+import { s__, __ } from '../../locale';
 import tabs from '../../vue_shared/components/navigation_tabs.vue';
 import tablePagination from '../../vue_shared/components/pagination/table_pagination.vue';
 import container from '../components/container.vue';
@@ -207,13 +207,13 @@ export default {
     tabs() {
       return [
         {
-          name: s__('Available'),
+          name: __('Available'),
           scope: 'available',
           count: this.state.availableCounter,
           isActive: this.scope === 'available',
         },
         {
-          name: s__('Stopped'),
+          name: __('Stopped'),
           scope: 'stopped',
           count: this.state.stoppedCounter,
           isActive: this.scope === 'stopped',
diff --git a/app/assets/javascripts/ide/components/new_dropdown/modal.vue b/app/assets/javascripts/ide/components/new_dropdown/modal.vue
index e8541d3a4c3..1c5a00568eb 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/modal.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/modal.vue
@@ -2,7 +2,7 @@
 import { GlModal, GlButton } from '@gitlab/ui';
 import { mapActions, mapState, mapGetters } from 'vuex';
 import createFlash from '~/flash';
-import { __, sprintf, s__ } from '~/locale';
+import { __, sprintf } from '~/locale';
 import { modalTypes } from '../../constants';
 import { trimPathComponents, getPathParent } from '../../utils';
 
@@ -58,7 +58,7 @@ export default {
       if (this.modalType === modalTypes.rename) {
         if (this.entries[this.entryName] && !this.entries[this.entryName].deleted) {
           createFlash({
-            message: sprintf(s__('The name "%{name}" is already taken in this directory.'), {
+            message: sprintf(__('The name "%{name}" is already taken in this directory.'), {
               name: this.entryName,
             }),
             fadeTransition: false,
diff --git a/app/assets/javascripts/import_entities/import_groups/components/import_table.vue b/app/assets/javascripts/import_entities/import_groups/components/import_table.vue
index eaa08cb1529..ec6025c84bb 100644
--- a/app/assets/javascripts/import_entities/import_groups/components/import_table.vue
+++ b/app/assets/javascripts/import_entities/import_groups/components/import_table.vue
@@ -517,7 +517,7 @@ export default {
       <gl-empty-state
         v-else-if="!hasGroups"
         :title="s__('BulkImport|You have no groups to import')"
-        :description="s__('Check your source instance permissions.')"
+        :description="__('Check your source instance permissions.')"
       />
       <template v-else>
         <div
diff --git a/app/assets/javascripts/issuable/components/issuable_by_email.vue b/app/assets/javascripts/issuable/components/issuable_by_email.vue
index 6e300831e00..799d2bdc9e2 100644
--- a/app/assets/javascripts/issuable/components/issuable_by_email.vue
+++ b/app/assets/javascripts/issuable/components/issuable_by_email.vue
@@ -166,7 +166,7 @@ export default {
         </gl-sprintf>
       </p>
       <template #modal-footer>
-        <gl-button category="secondary" @click="cancelHandler">{{ s__('Cancel') }}</gl-button>
+        <gl-button category="secondary" @click="cancelHandler">{{ __('Cancel') }}</gl-button>
       </template>
     </gl-modal>
   </div>
diff --git a/app/assets/javascripts/issue_show/components/app.vue b/app/assets/javascripts/issue_show/components/app.vue
index e4173995fc6..d3b58ed3012 100644
--- a/app/assets/javascripts/issue_show/components/app.vue
+++ b/app/assets/javascripts/issue_show/components/app.vue
@@ -4,7 +4,7 @@ import Visibility from 'visibilityjs';
 import createFlash from '~/flash';
 import Poll from '~/lib/utils/poll';
 import { visitUrl } from '~/lib/utils/url_utility';
-import { __, s__, sprintf } from '~/locale';
+import { __, sprintf } from '~/locale';
 import {
   IssuableStatus,
   IssuableStatusText,
@@ -250,7 +250,7 @@ export default {
       return false;
     },
     defaultErrorMessage() {
-      return sprintf(s__('Error updating %{issuableType}'), { issuableType: this.issuableType });
+      return sprintf(__('Error updating %{issuableType}'), { issuableType: this.issuableType });
     },
     isClosed() {
       return this.issuableStatus === IssuableStatus.Closed;
@@ -437,7 +437,7 @@ export default {
         })
         .catch(() => {
           createFlash({
-            message: sprintf(s__('Error deleting %{issuableType}'), {
+            message: sprintf(__('Error deleting %{issuableType}'), {
               issuableType: this.issuableType,
             }),
           });
diff --git a/app/assets/javascripts/issue_show/components/description.vue b/app/assets/javascripts/issue_show/components/description.vue
index d8ca28e33b6..9dc122d426c 100644
--- a/app/assets/javascripts/issue_show/components/description.vue
+++ b/app/assets/javascripts/issue_show/components/description.vue
@@ -2,7 +2,7 @@
 import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
 import $ from 'jquery';
 import createFlash from '~/flash';
-import { s__, sprintf } from '~/locale';
+import { __, sprintf } from '~/locale';
 import TaskList from '../../task_list';
 import animateMixin from '../mixins/animate';
 
@@ -104,7 +104,7 @@ export default {
     taskListUpdateError() {
       createFlash({
         message: sprintf(
-          s__(
+          __(
             'Someone edited this %{issueType} at the same time you did. The description has been updated and you will need to make your changes again.',
           ),
           {
diff --git a/app/assets/javascripts/issues_list/service_desk_helper.js b/app/assets/javascripts/issues_list/service_desk_helper.js
index 5cccf2e6bce..815f338f1a0 100644
--- a/app/assets/javascripts/issues_list/service_desk_helper.js
+++ b/app/assets/javascripts/issues_list/service_desk_helper.js
@@ -1,4 +1,4 @@
-import { s__ } from '~/locale';
+import { __, s__ } from '~/locale';
 
 /**
  * Generates empty state messages for Service Desk issues list.
@@ -25,7 +25,7 @@ export function generateMessages(emptyStateMeta) {
 
   const commonDescription = `
   <span>${serviceDeskSupportedMessage}</span>
-  <a href="${serviceDeskHelpPage}">${s__('Learn more.')}</a>`;
+  <a href="${serviceDeskHelpPage}">${__('Learn more.')}</a>`;
 
   return {
     serviceDeskEnabledAndCanEditProjectSettings: {
@@ -60,7 +60,7 @@ export function generateMessages(emptyStateMeta) {
         'ServiceDesk|To enable Service Desk on this instance, an instance administrator must first set up incoming email.',
       ),
       primaryLink: incomingEmailHelpPage,
-      primaryText: s__('Learn more.'),
+      primaryText: __('Learn more.'),
     },
     serviceDeskIsNotEnabled: {
       title: s__('ServiceDesk|Service Desk is not enabled'),
diff --git a/app/assets/javascripts/jira_connect/subscriptions/components/app.vue b/app/assets/javascripts/jira_connect/subscriptions/components/app.vue
index 825d9625c8d..9b3cd04c4e2 100644
--- a/app/assets/javascripts/jira_connect/subscriptions/components/app.vue
+++ b/app/assets/javascripts/jira_connect/subscriptions/components/app.vue
@@ -1,55 +1,43 @@
 <script>
-import { GlAlert, GlButton, GlLink, GlSprintf } from '@gitlab/ui';
+import { GlAlert, GlLink, GlSprintf } from '@gitlab/ui';
 import { mapState, mapMutations } from 'vuex';
-import { retrieveAlert, getLocation } from '~/jira_connect/subscriptions/utils';
+import { retrieveAlert } from '~/jira_connect/subscriptions/utils';
 import { SET_ALERT } from '../store/mutation_types';
 import SubscriptionsList from './subscriptions_list.vue';
 import AddNamespaceButton from './add_namespace_button.vue';
+import SignInButton from './sign_in_button.vue';
 
 export default {
   name: 'JiraConnectApp',
   components: {
     GlAlert,
-    GlButton,
     GlLink,
     GlSprintf,
     SubscriptionsList,
     AddNamespaceButton,
+    SignInButton,
   },
   inject: {
     usersPath: {
       default: '',
     },
   },
-  data() {
-    return {
-      location: '',
-    };
-  },
   computed: {
     ...mapState(['alert']),
-    usersPathWithReturnTo() {
-      if (this.location) {
-        return `${this.usersPath}?return_to=${this.location}`;
-      }
-
-      return this.usersPath;
-    },
     shouldShowAlert() {
       return Boolean(this.alert?.message);
     },
+    userSignedIn() {
+      return Boolean(!this.usersPath);
+    },
   },
   created() {
     this.setInitialAlert();
-    this.setLocation();
   },
   methods: {
     ...mapMutations({
       setAlert: SET_ALERT,
     }),
-    async setLocation() {
-      this.location = await getLocation();
-    },
     setInitialAlert() {
       const { linkUrl, title, message, variant } = retrieveAlert() || {};
       this.setAlert({ linkUrl, title, message, variant });
@@ -82,15 +70,7 @@ export default {
 
     <div class="jira-connect-app-body gl-my-7 gl-px-5 gl-pb-4">
       <div class="gl-display-flex gl-justify-content-end">
-        <gl-button
-          v-if="usersPath"
-          category="primary"
-          variant="info"
-          class="gl-align-self-center"
-          :href="usersPathWithReturnTo"
-          target="_blank"
-          >{{ s__('Integrations|Sign in to add namespaces') }}</gl-button
-        >
+        <sign-in-button v-if="!userSignedIn" :users-path="usersPath" />
         <add-namespace-button v-else />
       </div>
 
diff --git a/app/assets/javascripts/jira_connect/subscriptions/components/sign_in_button.vue b/app/assets/javascripts/jira_connect/subscriptions/components/sign_in_button.vue
new file mode 100644
index 00000000000..08f15519679
--- /dev/null
+++ b/app/assets/javascripts/jira_connect/subscriptions/components/sign_in_button.vue
@@ -0,0 +1,50 @@
+<script>
+import { GlButton } from '@gitlab/ui';
+import { getLocation } from '~/jira_connect/subscriptions/utils';
+import { objectToQuery } from '~/lib/utils/url_utility';
+
+export default {
+  components: {
+    GlButton,
+  },
+  props: {
+    usersPath: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      location: '',
+    };
+  },
+  computed: {
+    usersPathWithReturnTo() {
+      if (this.location) {
+        const queryParams = {
+          return_to: this.location,
+        };
+
+        return `${this.usersPath}?${objectToQuery(queryParams)}`;
+      }
+
+      return this.usersPath;
+    },
+  },
+  created() {
+    this.setLocation();
+  },
+  methods: {
+    async setLocation() {
+      this.location = await getLocation();
+    },
+  },
+};
+</script>
+<template>
+  <gl-button category="primary" variant="info" :href="usersPathWithReturnTo" target="_blank">
+    <slot>
+      {{ s__('Integrations|Sign in to add namespaces') }}
+    </slot>
+  </gl-button>
+</template>
diff --git a/app/assets/javascripts/jira_connect/subscriptions/index.js b/app/assets/javascripts/jira_connect/subscriptions/index.js
index f1262be0174..46a736c991e 100644
--- a/app/assets/javascripts/jira_connect/subscriptions/index.js
+++ b/app/assets/javascripts/jira_connect/subscriptions/index.js
@@ -11,6 +11,9 @@ import { getLocation, sizeToParent } from './utils';
 
 const store = createStore();
 
+/**
+ * Add `return_to` query param to all HAML-defined GitLab sign in links.
+ */
 const updateSignInLinks = async () => {
   const location = await getLocation();
   Array.from(document.querySelectorAll('.js-jira-connect-sign-in')).forEach((el) => {
diff --git a/app/assets/javascripts/lib/utils/datetime/date_format_utility.js b/app/assets/javascripts/lib/utils/datetime/date_format_utility.js
index 3c446c21865..7bff2bf3e47 100644
--- a/app/assets/javascripts/lib/utils/datetime/date_format_utility.js
+++ b/app/assets/javascripts/lib/utils/datetime/date_format_utility.js
@@ -14,33 +14,33 @@ import { s__, n__, __, sprintf } from '../../../locale';
 export const getMonthNames = (abbreviated) => {
   if (abbreviated) {
     return [
-      s__('Jan'),
-      s__('Feb'),
-      s__('Mar'),
-      s__('Apr'),
-      s__('May'),
-      s__('Jun'),
-      s__('Jul'),
-      s__('Aug'),
-      s__('Sep'),
-      s__('Oct'),
-      s__('Nov'),
-      s__('Dec'),
+      __('Jan'),
+      __('Feb'),
+      __('Mar'),
+      __('Apr'),
+      __('May'),
+      __('Jun'),
+      __('Jul'),
+      __('Aug'),
+      __('Sep'),
+      __('Oct'),
+      __('Nov'),
+      __('Dec'),
     ];
   }
   return [
-    s__('January'),
-    s__('February'),
-    s__('March'),
-    s__('April'),
-    s__('May'),
-    s__('June'),
-    s__('July'),
-    s__('August'),
-    s__('September'),
-    s__('October'),
-    s__('November'),
-    s__('December'),
+    __('January'),
+    __('February'),
+    __('March'),
+    __('April'),
+    __('May'),
+    __('June'),
+    __('July'),
+    __('August'),
+    __('September'),
+    __('October'),
+    __('November'),
+    __('December'),
   ];
 };
 
diff --git a/app/assets/javascripts/logs/components/environment_logs.vue b/app/assets/javascripts/logs/components/environment_logs.vue
index 2a60825a427..c9e7b034950 100644
--- a/app/assets/javascripts/logs/components/environment_logs.vue
+++ b/app/assets/javascripts/logs/components/environment_logs.vue
@@ -130,7 +130,7 @@ export default {
       }}
       <a :href="clusterApplicationsDocumentationPath">
         <strong>
-          {{ s__('View Documentation') }}
+          {{ __('View Documentation') }}
         </strong>
       </a>
     </gl-alert>
diff --git a/app/assets/javascripts/monitoring/components/duplicate_dashboard_form.vue b/app/assets/javascripts/monitoring/components/duplicate_dashboard_form.vue
index 1765a2f3d5d..a63008aa382 100644
--- a/app/assets/javascripts/monitoring/components/duplicate_dashboard_form.vue
+++ b/app/assets/javascripts/monitoring/components/duplicate_dashboard_form.vue
@@ -63,7 +63,7 @@ export default {
       return !(this.form.fileName && !this.form.fileName.endsWith('.yml'));
     },
     fileNameFeedback() {
-      return !this.fileNameState ? s__('The file name should have a .yml extension') : '';
+      return !this.fileNameState ? __('The file name should have a .yml extension') : '';
     },
   },
   mounted() {
diff --git a/app/assets/javascripts/notes/components/discussion_counter.vue b/app/assets/javascripts/notes/components/discussion_counter.vue
index 831e6dd8f92..33819c78c0f 100644
--- a/app/assets/javascripts/notes/components/discussion_counter.vue
+++ b/app/assets/javascripts/notes/components/discussion_counter.vue
@@ -78,8 +78,8 @@ export default {
         v-if="resolveAllDiscussionsIssuePath && !allResolved"
         v-gl-tooltip
         :href="resolveAllDiscussionsIssuePath"
-        :title="s__('Create issue to resolve all threads')"
-        :aria-label="s__('Create issue to resolve all threads')"
+        :title="__('Create issue to resolve all threads')"
+        :aria-label="__('Create issue to resolve all threads')"
         class="new-issue-for-discussion discussion-create-issue-btn"
         icon="issue-new"
       />
diff --git a/app/assets/javascripts/pages/admin/projects/index/components/delete_project_modal.vue b/app/assets/javascripts/pages/admin/projects/index/components/delete_project_modal.vue
index 055d6f40c14..855e06e82ab 100644
--- a/app/assets/javascripts/pages/admin/projects/index/components/delete_project_modal.vue
+++ b/app/assets/javascripts/pages/admin/projects/index/components/delete_project_modal.vue
@@ -70,7 +70,7 @@ export default {
     },
     primaryProps() {
       return {
-        text: s__('Delete project'),
+        text: __('Delete project'),
         attributes: [{ variant: 'danger' }, { category: 'primary' }, { disabled: !this.canSubmit }],
       };
     },
diff --git a/app/assets/javascripts/pages/groups/new/components/app.vue b/app/assets/javascripts/pages/groups/new/components/app.vue
index 9aac364d20e..c3ac074cd7a 100644
--- a/app/assets/javascripts/pages/groups/new/components/app.vue
+++ b/app/assets/javascripts/pages/groups/new/components/app.vue
@@ -47,7 +47,7 @@ export default {
 <template>
   <new-namespace-page
     :jump-to-last-persisted-panel="hasErrors"
-    :initial-breadcrumb="s__('New group')"
+    :initial-breadcrumb="__('New group')"
     :panels="$options.PANELS"
     :title="s__('GroupsNew|Create new group')"
     persistence-key="new_group_last_active_tab"
diff --git a/app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue b/app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue
index e42e89ce021..b41611001ab 100644
--- a/app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue
+++ b/app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue
@@ -3,7 +3,7 @@ import { GlModal } from '@gitlab/ui';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { visitUrl } from '~/lib/utils/url_utility';
-import { s__, sprintf } from '~/locale';
+import { __, s__, sprintf } from '~/locale';
 
 export default {
   components: {
@@ -83,7 +83,7 @@ export default {
     attributes: [{ variant: 'warning' }],
   },
   cancelAction: {
-    text: s__('Cancel'),
+    text: __('Cancel'),
     attributes: [],
   },
 };
diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue
index 0e646e8c505..85443843684 100644
--- a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue
+++ b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue
@@ -72,18 +72,18 @@ export default {
       return [
         {
           value: KEY_EVERY_DAY,
-          text: sprintf(s__(`Every day (at %{time})`), { time: this.formattedTime }),
+          text: sprintf(__(`Every day (at %{time})`), { time: this.formattedTime }),
         },
         {
           value: KEY_EVERY_WEEK,
-          text: sprintf(s__('Every week (%{weekday} at %{time})'), {
+          text: sprintf(__('Every week (%{weekday} at %{time})'), {
             weekday: this.weekday,
             time: this.formattedTime,
           }),
         },
         {
           value: KEY_EVERY_MONTH,
-          text: sprintf(s__('Every month (Day %{day} at %{time})'), {
+          text: sprintf(__('Every month (Day %{day} at %{time})'), {
             day: this.randomDay,
             time: this.formattedTime,
           }),
diff --git a/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue b/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue
index 8deb955842c..384ee1f5034 100644
--- a/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue
+++ b/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue
@@ -2,7 +2,7 @@
 import { GlIcon, GlSprintf, GlLink, GlFormCheckbox, GlToggle } from '@gitlab/ui';
 
 import settingsMixin from 'ee_else_ce/pages/projects/shared/permissions/mixins/settings_pannel_mixin';
-import { s__ } from '~/locale';
+import { __, s__ } from '~/locale';
 import {
   visibilityOptions,
   visibilityLevelDescriptions,
@@ -31,7 +31,7 @@ export default {
     operationsLabel: s__('ProjectSettings|Operations'),
     packagesLabel: s__('ProjectSettings|Packages'),
     pagesLabel: s__('ProjectSettings|Pages'),
-    ciCdLabel: s__('CI/CD'),
+    ciCdLabel: __('CI/CD'),
     repositoryLabel: s__('ProjectSettings|Repository'),
     requirementsLabel: s__('ProjectSettings|Requirements'),
     securityAndComplianceLabel: s__('ProjectSettings|Security & Compliance'),
diff --git a/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue b/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue
index a8ec731e105..2ce1f0366c1 100644
--- a/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue
+++ b/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue
@@ -12,7 +12,7 @@ import {
 import axios from '~/lib/utils/axios_utils';
 import csrf from '~/lib/utils/csrf';
 import { setUrlFragment } from '~/lib/utils/url_utility';
-import { s__, sprintf } from '~/locale';
+import { __, s__, sprintf } from '~/locale';
 import Tracking from '~/tracking';
 import MarkdownField from '~/vue_shared/components/markdown/field.vue';
 import {
@@ -83,7 +83,7 @@ export default {
           ),
         },
       },
-      feedbackTip: s__(
+      feedbackTip: __(
         'Tell us your experiences with the new Markdown editor %{linkStart}in this feedback issue%{linkEnd}.',
       ),
     },
diff --git a/app/assets/javascripts/performance_bar/components/detailed_metric.vue b/app/assets/javascripts/performance_bar/components/detailed_metric.vue
index f163a7c3a8e..1bb82e1d8e6 100644
--- a/app/assets/javascripts/performance_bar/components/detailed_metric.vue
+++ b/app/assets/javascripts/performance_bar/components/detailed_metric.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlButton, GlModal, GlModalDirective, GlSegmentedControl } from '@gitlab/ui';
 
-import { s__ } from '~/locale';
+import { __, s__ } from '~/locale';
 import { sortOrders, sortOrderOptions } from '../constants';
 import RequestWarning from './request_warning.vue';
 
@@ -55,7 +55,7 @@ export default {
       const summary = {};
 
       if (!this.metricDetails.summaryOptions?.hideTotal) {
-        summary[s__('Total')] = this.metricDetails.calls;
+        summary[__('Total')] = this.metricDetails.calls;
       }
 
       if (!this.metricDetails.summaryOptions?.hideDuration) {
diff --git a/app/assets/javascripts/pipeline_editor/components/file_nav/branch_switcher.vue b/app/assets/javascripts/pipeline_editor/components/file_nav/branch_switcher.vue
index c1739f51f6b..f27c2cd9dca 100644
--- a/app/assets/javascripts/pipeline_editor/components/file_nav/branch_switcher.vue
+++ b/app/assets/javascripts/pipeline_editor/components/file_nav/branch_switcher.vue
@@ -12,7 +12,7 @@ import { produce } from 'immer';
 import { fetchPolicies } from '~/lib/graphql';
 import { historyPushState } from '~/lib/utils/common_utils';
 import { setUrlParams } from '~/lib/utils/url_utility';
-import { s__ } from '~/locale';
+import { __ } from '~/locale';
 import {
   BRANCH_PAGINATION_LIMIT,
   BRANCH_SEARCH_DEBOUNCE,
@@ -25,9 +25,9 @@ import getLastCommitBranchQuery from '~/pipeline_editor/graphql/queries/client/l
 
 export default {
   i18n: {
-    dropdownHeader: s__('Switch branch'),
-    title: s__('Branches'),
-    fetchError: s__('Unable to fetch branch list for this project.'),
+    dropdownHeader: __('Switch branch'),
+    title: __('Branches'),
+    fetchError: __('Unable to fetch branch list for this project.'),
   },
   inputDebounce: BRANCH_SEARCH_DEBOUNCE,
   components: {
diff --git a/app/assets/javascripts/profile/account/components/delete_account_modal.vue b/app/assets/javascripts/profile/account/components/delete_account_modal.vue
index 17cbcabeedb..3cb2dce87d3 100644
--- a/app/assets/javascripts/profile/account/components/delete_account_modal.vue
+++ b/app/assets/javascripts/profile/account/components/delete_account_modal.vue
@@ -37,7 +37,7 @@ export default {
     },
     primaryProps() {
       return {
-        text: s__('Delete account'),
+        text: __('Delete account'),
         attributes: [
           { variant: 'danger', 'data-qa-selector': 'confirm_delete_account_button' },
           { category: 'primary' },
@@ -47,7 +47,7 @@ export default {
     },
     cancelProps() {
       return {
-        text: s__('Cancel'),
+        text: __('Cancel'),
       };
     },
     canSubmit() {
diff --git a/app/assets/javascripts/profile/account/components/update_username.vue b/app/assets/javascripts/profile/account/components/update_username.vue
index 7917a9a75e0..45a6130826d 100644
--- a/app/assets/javascripts/profile/account/components/update_username.vue
+++ b/app/assets/javascripts/profile/account/components/update_username.vue
@@ -3,7 +3,7 @@ import { GlSafeHtmlDirective as SafeHtml, GlButton, GlModal, GlModalDirective }
 import { escape } from 'lodash';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
-import { s__, sprintf } from '~/locale';
+import { __, s__, sprintf } from '~/locale';
 
 export default {
   components: {
@@ -58,7 +58,7 @@ Please update your Git repository remotes as soon as possible.`),
     },
     primaryProps() {
       return {
-        text: s__('Update username'),
+        text: __('Update username'),
         attributes: [
           { variant: 'warning' },
           { category: 'primary' },
@@ -68,7 +68,7 @@ Please update your Git repository remotes as soon as possible.`),
     },
     cancelProps() {
       return {
-        text: s__('Cancel'),
+        text: __('Cancel'),
       };
     },
   },
diff --git a/app/assets/javascripts/projects/new/components/app.vue b/app/assets/javascripts/projects/new/components/app.vue
index 6e9efc50be8..476d6466cbb 100644
--- a/app/assets/javascripts/projects/new/components/app.vue
+++ b/app/assets/javascripts/projects/new/components/app.vue
@@ -95,7 +95,7 @@ export default {
 
 <template>
   <new-namespace-page
-    :initial-breadcrumb="s__('New project')"
+    :initial-breadcrumb="__('New project')"
     :panels="availablePanels"
     :jump-to-last-persisted-panel="hasErrors"
     :title="s__('ProjectsNew|Create new project')"
diff --git a/app/assets/javascripts/projects/storage_counter/constants.js b/app/assets/javascripts/projects/storage_counter/constants.js
index 12d56256b9a..df4b1800dff 100644
--- a/app/assets/javascripts/projects/storage_counter/constants.js
+++ b/app/assets/javascripts/projects/storage_counter/constants.js
@@ -51,7 +51,7 @@ export const ERROR_MESSAGE = s__(
   'UsageQuota|Something went wrong while fetching project storage statistics',
 );
 
-export const LEARN_MORE_LABEL = s__('Learn more.');
+export const LEARN_MORE_LABEL = __('Learn more.');
 export const USAGE_QUOTAS_LABEL = s__('UsageQuota|Usage Quotas');
 export const HELP_LINK_ARIA_LABEL = s__('UsageQuota|%{linkTitle} help link');
 export const TOTAL_USAGE_DEFAULT_TEXT = __('N/A');
diff --git a/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue b/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue
index f6f409873c8..a79da00de43 100644
--- a/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue
+++ b/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue
@@ -58,7 +58,7 @@ export default {
       };
       this.isLoading = false;
       createFlash({
-        message: s__('Something went wrong on our end'),
+        message: __('Something went wrong on our end'),
       });
     },
     initPolling() {
diff --git a/app/assets/javascripts/related_merge_requests/components/related_merge_requests.vue b/app/assets/javascripts/related_merge_requests/components/related_merge_requests.vue
index d6187e1b527..50835142d28 100644
--- a/app/assets/javascripts/related_merge_requests/components/related_merge_requests.vue
+++ b/app/assets/javascripts/related_merge_requests/components/related_merge_requests.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlLink, GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import { mapState, mapActions } from 'vuex';
-import { sprintf, n__, s__ } from '~/locale';
+import { sprintf, __, n__ } from '~/locale';
 import RelatedIssuableItem from '~/vue_shared/components/issue/related_issuable_item.vue';
 import { parseIssuableData } from '../../issue_show/utils/parse_data';
 
@@ -40,7 +40,7 @@ export default {
         this.totalCount,
       );
 
-      return sprintf(s__('%{mrText}, this issue will be closed automatically.'), { mrText });
+      return sprintf(__('%{mrText}, this issue will be closed automatically.'), { mrText });
     },
   },
   mounted() {
diff --git a/app/assets/javascripts/related_merge_requests/store/actions.js b/app/assets/javascripts/related_merge_requests/store/actions.js
index 652d03a0fd0..94abb50de89 100644
--- a/app/assets/javascripts/related_merge_requests/store/actions.js
+++ b/app/assets/javascripts/related_merge_requests/store/actions.js
@@ -1,7 +1,7 @@
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { normalizeHeaders } from '~/lib/utils/common_utils';
-import { s__ } from '~/locale';
+import { __ } from '~/locale';
 import * as types from './mutation_types';
 
 const REQUEST_PAGE_COUNT = 100;
@@ -30,7 +30,7 @@ export const fetchMergeRequests = ({ state, dispatch }) => {
     .catch(() => {
       dispatch('receiveDataError');
       createFlash({
-        message: s__('Something went wrong while fetching related merge requests.'),
+        message: __('Something went wrong while fetching related merge requests.'),
       });
     });
 };
diff --git a/app/assets/javascripts/search/sidebar/components/radio_filter.vue b/app/assets/javascripts/search/sidebar/components/radio_filter.vue
index 73911b9d319..aa7c26b8044 100644
--- a/app/assets/javascripts/search/sidebar/components/radio_filter.vue
+++ b/app/assets/javascripts/search/sidebar/components/radio_filter.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlFormRadioGroup, GlFormRadio } from '@gitlab/ui';
 import { mapState, mapActions } from 'vuex';
-import { sprintf, s__ } from '~/locale';
+import { sprintf, __ } from '~/locale';
 
 export default {
   name: 'RadioFilter',
@@ -49,7 +49,7 @@ export default {
     ...mapActions(['setQuery']),
     radioLabel(filter) {
       return filter.value === this.ANY.value
-        ? sprintf(s__('Any %{header}'), { header: this.filterData.header.toLowerCase() })
+        ? sprintf(__('Any %{header}'), { header: this.filterData.header.toLowerCase() })
         : filter.label;
     },
   },
diff --git a/app/assets/javascripts/static_site_editor/pages/success.vue b/app/assets/javascripts/static_site_editor/pages/success.vue
index 70e692a0c86..eb03aa3cca3 100644
--- a/app/assets/javascripts/static_site_editor/pages/success.vue
+++ b/app/assets/javascripts/static_site_editor/pages/success.vue
@@ -30,7 +30,7 @@ export default {
     updatedFileDescription() {
       const { sourcePath } = this.appData;
 
-      return sprintf(s__('Update %{sourcePath} file'), { sourcePath });
+      return sprintf(__('Update %{sourcePath} file'), { sourcePath });
     },
   },
   created() {
diff --git a/app/assets/javascripts/user_lists/components/user_lists_table.vue b/app/assets/javascripts/user_lists/components/user_lists_table.vue
index 765f59228a6..ccc2bfabb56 100644
--- a/app/assets/javascripts/user_lists/components/user_lists_table.vue
+++ b/app/assets/javascripts/user_lists/components/user_lists_table.vue
@@ -23,7 +23,7 @@ export default {
   translations: {
     createdTimeagoLabel: s__('UserList|created %{timeago}'),
     deleteListTitle: s__('UserList|Delete %{name}?'),
-    deleteListMessage: s__('User list %{name} will be removed. Are you sure?'),
+    deleteListMessage: __('User list %{name} will be removed. Are you sure?'),
     editUserListLabel: s__('FeatureFlags|Edit User List'),
   },
   modal: {
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/added_commit_message.vue b/app/assets/javascripts/vue_merge_request_widget/components/added_commit_message.vue
index 533af6a5e51..fc17669a737 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/added_commit_message.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/added_commit_message.vue
@@ -67,8 +67,8 @@ export default {
       <template #targetBranch>
         <span class="label-branch">{{ targetBranchEscaped }}</span>
       </template>
-      <template v-if="glFeatures.restructuredMrWidget" #squashedCommits>
-        <template v-if="isSquashEnabled">
+      <template #squashedCommits>
+        <template v-if="glFeatures.restructuredMrWidget && isSquashEnabled">
           {{ __('(commits will be squashed)') }}</template
         ></template
       >
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue
index 5c67b9c7ab5..9070cb1fe65 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue
@@ -151,7 +151,7 @@ export default {
           right
           data-qa-selector="download_dropdown"
         >
-          <gl-dropdown-section-header>{{ s__('Download as') }}</gl-dropdown-section-header>
+          <gl-dropdown-section-header>{{ __('Download as') }}</gl-dropdown-section-header>
           <gl-dropdown-item
             :href="mr.emailPatchesPath"
             class="js-download-email-patches"
diff --git a/app/assets/javascripts/vue_shared/directives/validation.js b/app/assets/javascripts/vue_shared/directives/validation.js
index 779b04dc2bd..fc0ff78e7b4 100644
--- a/app/assets/javascripts/vue_shared/directives/validation.js
+++ b/app/assets/javascripts/vue_shared/directives/validation.js
@@ -1,4 +1,4 @@
-import { s__ } from '~/locale';
+import { __ } from '~/locale';
 
 /**
  * Validation messages will take priority based on the property order.
@@ -12,11 +12,11 @@ import { s__ } from '~/locale';
 const defaultFeedbackMap = {
   valueMissing: {
     isInvalid: (el) => el.validity?.valueMissing,
-    message: s__('Please fill out this field.'),
+    message: __('Please fill out this field.'),
   },
   urlTypeMismatch: {
     isInvalid: (el) => el.type === 'url' && el.validity?.typeMismatch,
-    message: s__('Please enter a valid URL format, ex: http://www.example.com/home'),
+    message: __('Please enter a valid URL format, ex: http://www.example.com/home'),
   },
 };