Add latest changes from gitlab-org/gitlab@13-11-stable-eev13.11.0-rc43

3 files changed, 54 insertions, 57 deletions

diff --git a/doc/development/i18n/externalization.md b/doc/development/i18n/externalization.md
index 90355e1cccb..0f7b8078933 100644
--- a/doc/development/i18n/externalization.md
+++ b/doc/development/i18n/externalization.md
@@ -255,7 +255,45 @@ For example use `%{created_at}` in Ruby but `%{createdAt}` in JavaScript. Make s
 
 - In Vue:
 
-  See the section on [Vue component interpolation](#vue-components-interpolation).
+  Use the [`GlSprintf`](https://gitlab-org.gitlab.io/gitlab-ui/?path=/docs/utilities-sprintf--sentence-with-link) component if:
+
+  - you need to include child components in the translation string.
+  - you need to include HTML in your translation string.
+  - you are using `sprintf` and need to pass `false` as the third argument to
+    prevent it from escaping placeholder values.
+
+  For example:
+
+  ```html
+  <gl-sprintf :message="s__('ClusterIntegration|Learn more about %{linkStart}zones%{linkEnd}')">
+    <template #link="{ content }">
+      <gl-link :href="somePath">{{ content }}</gl-link>
+    </template>
+  </gl-sprintf>
+  ```
+
+  In other cases it may be simpler to use `sprintf`, perhaps in a computed
+  property. For example:
+
+  ```html
+  <script>
+  import { __, sprintf } from '~/locale';
+
+  export default {
+    ...
+    computed: {
+      userWelcome() {
+        sprintf(__('Hello %{username}'), { username: this.user.name });
+      }
+    }
+    ...
+  }
+  </script>
+
+  <template>
+    <span>{{ userWelcome }}</span>
+  </template>
+  ```
 
 - In JavaScript (when Vue cannot be used):
 
@@ -265,12 +303,10 @@ For example use `%{created_at}` in Ruby but `%{createdAt}` in JavaScript. Make s
   sprintf(__('Hello %{username}'), { username: 'Joe' }); // => 'Hello Joe'
   ```
 
-  If you want to use markup within the translation and are using Vue, you
-  **must** use the [`gl-sprintf`](#vue-components-interpolation) component. If
-  for some reason you cannot use Vue, use `sprintf` and stop it from escaping
-  placeholder values by passing `false` as its third argument. You **must**
-  escape any interpolated dynamic values yourself, for instance using
-  `escape` from `lodash`.
+  If you need to use markup within the translation, use `sprintf` and stop it
+  from escaping placeholder values by passing `false` as its third argument.
+  You **must** escape any interpolated dynamic values yourself, for instance
+  using `escape` from `lodash`.
 
   ```javascript
   import { escape } from 'lodash';
@@ -589,7 +625,7 @@ This also applies when using links in between translated sentences, otherwise th
   ```haml
   - zones_link_url = 'https://cloud.google.com/compute/docs/regions-zones/regions-zones'
   - zones_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: zones_link_url }
-  = s_('ClusterIntegration|Learn more about %{zones_link_start}zones%{zones_link_end}').html_safe % { zones_link_start: zones_link_start, zones_link_end: '</a>'.html_safe }
+  = html_escape(s_('ClusterIntegration|Learn more about %{zones_link_start}zones%{zones_link_end}')) % { zones_link_start: zones_link_start, zones_link_end: '</a>'.html_safe }
   ```
 
 - In Vue, instead of:
@@ -632,7 +668,7 @@ This also applies when using links in between translated sentences, otherwise th
   {{
       sprintf(s__("ClusterIntegration|Learn more about %{link}"), {
           link: '<a href="https://cloud.google.com/compute/docs/regions-zones/regions-zones" target="_blank" rel="noopener noreferrer">zones</a>'
-      })
+      }, false)
   }}
   ```
 
@@ -643,7 +679,7 @@ This also applies when using links in between translated sentences, otherwise th
       sprintf(s__("ClusterIntegration|Learn more about %{linkStart}zones%{linkEnd}"), {
           linkStart: '<a href="https://cloud.google.com/compute/docs/regions-zones/regions-zones" target="_blank" rel="noopener noreferrer">',
           linkEnd: '</a>',
-      })
+      }, false)
   }}
   ```
 
@@ -652,45 +688,6 @@ The reasoning behind this is that in some languages words change depending on co
 When in doubt, try to follow the best practices described in this [Mozilla
 Developer documentation](https://developer.mozilla.org/en-US/docs/Mozilla/Localization/Localization_content_best_practices#Splitting).
 
-##### Vue components interpolation
-
-When translating UI text in Vue components, you might want to include child components inside
-the translation string.
-You could not use a JavaScript-only solution to render the translation,
-because Vue would not be aware of the child components and would render them as plain text.
-
-For this use case, you should use the `gl-sprintf` component which is maintained
-in **GitLab UI**.
-
-The `gl-sprintf` component accepts a `message` property, which is the translatable string,
-and it exposes a named slot for every placeholder in the string, which lets you include Vue
-components easily.
-
-Assume you want to print the translatable string
-`Pipeline %{pipelineId} triggered %{timeago} by %{author}`. To replace the `%{timeago}` and
-`%{author}` placeholders with Vue components, here's how you would do that with `gl-sprintf`:
-
-```html
-<template>
-  <div>
-    <gl-sprintf :message="__('Pipeline %{pipelineId} triggered %{timeago} by %{author}')">
-      <template #pipelineId>{{ pipeline.id }}</template>
-      <template #timeago>
-        <timeago :time="pipeline.triggerTime" />
-      </template>
-      <template #author>
-        <gl-avatar-labeled
-          :src="pipeline.triggeredBy.avatarPath"
-          :label="pipeline.triggeredBy.name"
-        />
-      </template>
-    </gl-sprintf>
-  </div>
-</template>
-```
-
-For more information, see the [`gl-sprintf`](https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-sprintf--default) documentation.
-
 ## Updating the PO files with the new content
 
 Now that the new content is marked for translation, we need to update
@@ -702,7 +699,7 @@ bin/rake gettext:regenerate
 
 This command updates `locale/gitlab.pot` file with the newly externalized
 strings and remove any strings that aren't used anymore. You should check this
-file in. Once the changes are on master, they are picked up by
+file in. Once the changes are on the default branch, they are picked up by
 [CrowdIn](https://translate.gitlab.com) and be presented for
 translation.
 
diff --git a/doc/development/i18n/merging_translations.md b/doc/development/i18n/merging_translations.md
index e7d25942143..553820733e7 100644
--- a/doc/development/i18n/merging_translations.md
+++ b/doc/development/i18n/merging_translations.md
@@ -42,10 +42,11 @@ page](https://translate.gitlab.com/project/gitlab-ee/settings#integration).
 
 ## Merging translations
 
-When all translations are found good and pipelines pass the
-translations can be merged into the master branch. When merging the translations,
-make sure to check the **Remove source branch** checkbox, so CrowdIn recreates the
-`master-i18n` from master after the new translation was merged.
+After all translations are determined to be appropriate and the pipelines pass,
+you can merge the translations into the default branch. When merging translations,
+be sure to select the **Remove source branch** check box, which causes CrowdIn
+to recreate the `master-i18n` from the default branch after merging the new
+translation.
 
 We are discussing [automating this entire process](https://gitlab.com/gitlab-org/gitlab/-/issues/19896).
 
@@ -59,7 +60,7 @@ and delete the
 [`master-18n`](https://gitlab.com/gitlab-org/gitlab/-/branches/all?utf8=✓&search=master-i18n).
 
 This might be needed when the merge request contains failures that
-have been fixed on master.
+have been fixed on the default branch.
 
 ## Recreate the GitLab integration in CrowdIn
 
diff --git a/doc/development/i18n/translation.md b/doc/development/i18n/translation.md
index 7fb49521106..f3d02e180e7 100644
--- a/doc/development/i18n/translation.md
+++ b/doc/development/i18n/translation.md
@@ -29,7 +29,6 @@ GitLab is being translated into many languages.
    - If the language you are looking for is not available,
       [open an issue](https://gitlab.com/gitlab-org/gitlab/-/issues?scope=all&utf8=✓&state=all&label_name[]=Category%3AInternationalization). Notify our Crowdin
       administrators by including `@gitlab-org/manage/import` in your issue.
-      in the issue.
    - After the issue/Merge Request is complete, restart this procedure.
 1. Next, you can view list of files and folders.
    Select `gitlab.pot` to open the translation editor.
@@ -109,6 +108,6 @@ To propose additions to the glossary please
 
 <!-- vale gitlab.Spelling = NO -->
 In French, the "écriture inclusive" is now over (see on [Legifrance](https://www.legifrance.gouv.fr/jorf/id/JORFTEXT000036068906/)).
-So, to include both genders, write “Utilisateurs et utilisatrices” instead of “Utilisateur·rice·s”.
+So, to include both genders, write "Utilisateurs et utilisatrices" instead of "Utilisateur·rice·s".
 When space is missing, the male gender should be used alone.
 <!-- vale gitlab.Spelling = YES -->