Remove HTML from frontend translations

Replace usage of HTML in translations with variables so that these
strings can be removed from the todolist. This will allow them to be
translated again.

Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/228846

app/assets/javascripts/badges/components/badge_settings.vue

@@ -6,6 +6,7 @@ import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
 import Badge from './badge.vue';
 import BadgeForm from './badge_form.vue';
 import BadgeList from './badge_list.vue';
+import { GlSprintf } from '@gitlab/ui';
 
 export default {
   name: 'BadgeSettings',
@@ -14,14 +15,15 @@ export default {
     BadgeForm,
     BadgeList,
     GlModal: DeprecatedModal2,
+    GlSprintf,
+  },
+  i18n: {
+    deleteModalText: s__(
+      'Badges|You are going to delete this badge. Deleted badges %{strongStart}cannot%{strongEnd} be restored.',
+    ),
   },
   computed: {
     ...mapState(['badgeInModal', 'isEditing']),
-    deleteModalText() {
-      return s__(
-        'Badges|You are going to delete this badge. Deleted badges <strong>cannot</strong> be restored.',
-      );
-    },
   },
   methods: {
     ...mapActions(['deleteBadge']),
@@ -54,7 +56,13 @@ export default {
           :link-url="badgeInModal ? badgeInModal.renderedLinkUrl : ''"
         />
       </div>
-      <p v-html="deleteModalText"></p>
+      <p>
+        <gl-sprintf :message="$options.i18n.deleteModalText">
+          <template #strong="{ content }">
+            <strong>{{ content }}</strong>
+          </template>
+        </gl-sprintf>
+      </p>
     </gl-modal>
 
     <badge-form v-show="isEditing" :is-editing="true" />

app/assets/javascripts/clusters/components/remove_cluster_confirmation.vue

 <script>
 import { escape } from 'lodash';
-import { GlModal, GlButton, GlDeprecatedButton, GlFormInput } from '@gitlab/ui';
+import { GlModal, GlButton, GlDeprecatedButton, GlFormInput, GlSprintf } from '@gitlab/ui';
 import SplitButton from '~/vue_shared/components/split_button.vue';
 import { s__, sprintf } from '~/locale';
 import csrf from '~/lib/utils/csrf';
@@ -30,6 +30,7 @@ export default {
     GlButton,
     GlDeprecatedButton,
     GlFormInput,
+    GlSprintf,
   },
   props: {
     clusterPath: {
@@ -67,18 +68,6 @@ export default {
           )
         : s__('ClusterIntegration|You are about to remove your cluster integration.');
     },
-    warningToBeRemoved() {
-      return s__(`ClusterIntegration|
-        This will permanently delete the following resources:
-        <ul>
-          <li>All installed applications and related resources</li>
-          <li>The <code>gitlab-managed-apps</code> namespace</li>
-          <li>Any project namespaces</li>
-          <li><code>clusterroles</code></li>
-          <li><code>clusterrolebindings</code></li>
-        </ul>
-      `);
-    },
     confirmationTextLabel() {
       return sprintf(
         this.confirmCleanup
@@ -144,7 +133,27 @@ export default {
     >
       <template>
         <p>{{ warningMessage }}</p>
-        <div v-if="confirmCleanup" v-html="warningToBeRemoved"></div>
+        <div v-if="confirmCleanup">
+          {{ s__('ClusterIntegration|This will permanently delete the following resources:') }}
+          <ul>
+            <li>
+              {{ s__('ClusterIntegration|All installed applications and related resources') }}
+            </li>
+            <li>
+              <gl-sprintf :message="s__('ClusterIntegration|The %{gitlabNamespace} namespace')">
+                <template #gitlabNamespace>
+                  <!-- eslint-disable-next-line @gitlab/vue-require-i18n-strings -->
+                  <code>{{ 'gitlab-managed-apps' }}</code>
+                </template>
+              </gl-sprintf>
+            </li>
+            <li>{{ s__('ClusterIntegration|Any project namespaces') }}</li>
+            <!-- eslint-disable @gitlab/vue-require-i18n-strings -->
+            <li><code>clusterroles</code></li>
+            <li><code>clusterrolebindings</code></li>
+            <!-- eslint-enable @gitlab/vue-require-i18n-strings -->
+          </ul>
+        </div>
         <strong v-html="confirmationTextLabel"></strong>
         <form ref="form" :action="clusterPath" method="post" class="gl-mb-5">
           <input ref="method" type="hidden" name="_method" value="delete" />

app/assets/javascripts/create_cluster/gke_cluster/components/gke_project_id_dropdown.vue

@@ -82,11 +82,13 @@ export default {
 
         return sprintf(
           s__(
-            'This project does not have billing enabled. To create a cluster, <a href=%{linkToBilling} target="_blank" rel="noopener noreferrer">enable billing <i class="fa fa-external-link" aria-hidden="true"></i></a> and try again.',
+            'This project does not have billing enabled. To create a cluster, %{linkToBillingStart}enable billing %{linkIcon}%{linkToBillingEnd} and try again.',
           ),
           {
-            linkToBilling:
-              'https://console.cloud.google.com/freetrial?utm_campaign=2018_cpanel&utm_source=gitlab&utm_medium=referral',
+            linkToBillingStart:
+              '<a href="https://console.cloud.google.com/freetrial?utm_campaign=2018_cpanel&utm_source=gitlab&utm_medium=referral" target="_blank" rel="noopener noreferrer">',
+            linkToBillingEnd: '</a>',
+            linkIcon: '<i class="fa fa-external-link" aria-hidden="true"></i>',
           },
           false,
         );

app/assets/javascripts/ide/stores/modules/terminal/messages.js

@@ -21,7 +21,7 @@ export const EMPTY_RUNNERS = __(
   'Configure GitLab runners to start using the Web Terminal. %{helpStart}Learn more.%{helpEnd}',
 );
 export const ERROR_CONFIG = __(
-  'Configure a <code>.gitlab-webide.yml</code> file in the <code>.gitlab</code> directory to start using the Web Terminal. %{helpStart}Learn more.%{helpEnd}',
+  'Configure a %{codeStart}.gitlab-webide.yml%{codeEnd} file in the %{codeStart}.gitlab%{codeEnd} directory to start using the Web Terminal. %{helpStart}Learn more.%{helpEnd}',
 );
 export const ERROR_PERMISSION = __(
   'You do not have permission to run the Web Terminal. Please contact a project administrator.',
@@ -34,6 +34,8 @@ export const configCheckError = (status, helpUrl) => {
       {
         helpStart: `<a href="${escape(helpUrl)}" target="_blank">`,
         helpEnd: '</a>',
+        codeStart: '<code>',
+        codeEnd: '</code>',
       },
       false,
     );

app/assets/javascripts/onboarding_issues/index.js

 import $ from 'jquery';
 import { parseBoolean, getCookie, setCookie, removeCookie } from '~/lib/utils/common_utils';
-import { __ } from '~/locale';
+import { __, sprintf } from '~/locale';
 import Tracking from '~/tracking';
 
 const COOKIE_NAME = 'onboarding_issues_settings';
@@ -94,8 +94,12 @@ export const showLearnGitLabProjectPopover = () => {
   if (!el) return;
 
   const options = {
-    content: __(
-      'Go to <strong>Issues</strong> > <strong>Boards</strong> to access your personalized learning issue board.',
+    content: sprintf(
+      __(
+        'Go to %{strongStart}Issues%{strongEnd} &gt; %{strongStart}Boards%{strongEnd} to access your personalized learning issue board.',
+      ),
+      { strongStart: '<strong>', strongEnd: '</strong>' },
+      false,
     ),
   };
 
@@ -111,8 +115,12 @@ export const showLearnGitLabIssuesPopover = () => {
   if (!el) return;
 
   const options = {
-    content: __(
-      'Go to <strong>Issues</strong> > <strong>Boards</strong> to access your personalized learning issue board.',
+    content: sprintf(
+      __(
+        'Go to %{strongStart}Issues%{strongEnd} &gt; %{strongStart}Boards%{strongEnd} to access your personalized learning issue board.',
+      ),
+      { strongStart: '<strong>', strongEnd: '</strong>' },
+      false,
     ),
   };
 

app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue

 <script>
-import { escape } from 'lodash';
 import axios from '~/lib/utils/axios_utils';
 import createFlash from '~/flash';
 import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
 import { s__, sprintf } from '~/locale';
 import { visitUrl } from '~/lib/utils/url_utility';
 import eventHub from '../event_hub';
+import { GlSprintf } from '@gitlab/ui';
 
 export default {
   components: {
     GlModal: DeprecatedModal2,
+    GlSprintf,
   },
   props: {
     url: {
@@ -45,20 +46,6 @@ export default {
         },
       );
     },
-    title() {
-      const label = `<span
-          class="label color-label"
-          style="background-color: ${this.labelColor}; color: ${this.labelTextColor};"
-        >${escape(this.labelTitle)}</span>`;
-
-      return sprintf(
-        s__('Labels|<span>Promote label</span> %{labelTitle} <span>to Group Label?</span>'),
-        {
-          labelTitle: label,
-        },
-        false,
-      );
-    },
   },
   methods: {
     onSubmit() {
@@ -90,7 +77,27 @@ export default {
     footer-primary-button-variant="warning"
     @submit="onSubmit"
   >
-    <div slot="title" class="modal-title-with-label" v-html="title"></div>
+    <div slot="title" class="modal-title-with-label">
+      <gl-sprintf
+        :message="
+          s__(
+            'Labels|%{spanStart}Promote label%{spanEnd} %{labelTitle} %{spanStart}to Group Label?%{spanEnd}',
+          )
+        "
+      >
+        <template #labelTitle>
+          <span
+            class="label color-label"
+            :style="`background-color: ${labelColor}; color: ${labelTextColor};`"
+          >
+            {{ labelTitle }}
+          </span>
+        </template>
+        <template #span="{ content }"
+          ><span>{{ content }}</span></template
+        >
+      </gl-sprintf>
+    </div>
 
     {{ text }}
   </gl-modal>

app/assets/javascripts/prometheus_metrics/prometheus_metrics.js

@@ -87,16 +87,15 @@ export default class PrometheusMetrics {
 
     if (totalMonitoredMetrics === 0) {
       const emptyCommonMetricsText = sprintf(
-        s__(
-          'PrometheusService|<p class="text-tertiary">No <a href="%{docsUrl}">common metrics</a> were found</p>',
-        ),
+        s__('PrometheusService|No %{docsUrlStart}common metrics%{docsUrlEnd} were found'),
         {
-          docsUrl: this.helpMetricsPath,
+          docsUrlStart: `<a href="${this.helpMetricsPath}">`,
+          docsUrlEnd: '</a>',
         },
         false,
       );
       this.$monitoredMetricsEmpty.empty();
-      this.$monitoredMetricsEmpty.append(emptyCommonMetricsText);
+      this.$monitoredMetricsEmpty.append(`<p class="text-tertiary">${emptyCommonMetricsText}</p>`);
       this.showMonitoringMetricsPanelState(PANEL_STATE.EMPTY);
     } else {
       const metricsCountText = sprintf(

app/assets/javascripts/sidebar/components/confidential/edit_form.vue

 <script>
 import editFormButtons from './edit_form_buttons.vue';
-import { __, sprintf } from '../../../locale';
+import { __ } from '../../../locale';
+import { GlSprintf } from '@gitlab/ui';
 
 export default {
   components: {
     editFormButtons,
+    GlSprintf,
   },
   props: {
     confidential: {
@@ -22,25 +24,13 @@ export default {
   },
   computed: {
     confidentialityOnWarning() {
-      const accessLevel = __('at least Reporter access');
-
-      return sprintf(
-        __(
-          'You are going to turn on the confidentiality. This means that only team members with %{accessLevel} are able to see and leave comments on the %{issuableType}.',
-        ),
-        { issuableType: this.issuableType, accessLevel: `<strong>${accessLevel}</strong>` },
-        false,
+      return __(
+        'You are going to turn on the confidentiality. This means that only team members with %{strongStart}at least Reporter access%{strongEnd} are able to see and leave comments on the %{issuableType}.',
       );
     },
     confidentialityOffWarning() {
-      const accessLevel = __('everyone');
-
-      return sprintf(
-        __(
-          'You are going to turn off the confidentiality. This means %{accessLevel} will be able to see and leave a comment on this %{issuableType}.',
-        ),
-        { issuableType: this.issuableType, accessLevel: `<strong>${accessLevel}</strong>` },
-        false,
+      return __(
+        'You are going to turn off the confidentiality. This means %{strongStart}everyone%{strongEnd} will be able to see and leave a comment on this %{issuableType}.',
       );
     },
   },
@@ -51,8 +41,22 @@ export default {
   <div class="dropdown show">
     <div class="dropdown-menu sidebar-item-warning-message">
       <div>
-        <p v-if="!confidential" v-html="confidentialityOnWarning"></p>
-        <p v-else v-html="confidentialityOffWarning"></p>
+        <p v-if="!confidential">
+          <gl-sprintf :message="confidentialityOnWarning">
+            <template #strong="{ content }">
+              <strong>{{ content }}</strong>
+            </template>
+            <template #issuableType>{{ issuableType }}</template>
+          </gl-sprintf>
+        </p>
+        <p v-else>
+          <gl-sprintf :message="confidentialityOffWarning">
+            <template #strong="{ content }">
+              <strong>{{ content }}</strong>
+            </template>
+            <template #issuableType>{{ issuableType }}</template>
+          </gl-sprintf>
+        </p>
         <edit-form-buttons :full-path="fullPath" :confidential="confidential" />
       </div>
     </div>

app/assets/javascripts/sidebar/components/lock/edit_form.vue

 <script>
 import editFormButtons from './edit_form_buttons.vue';
-import { __, sprintf } from '../../../locale';
+import { GlSprintf } from '@gitlab/ui';
 
 export default {
   components: {
     editFormButtons,
+    GlSprintf,
   },
   props: {
     isLocked: {
@@ -16,33 +17,41 @@ export default {
       type: String,
     },
   },
-  computed: {
-    lockWarning() {
-      return sprintf(
-        __(
-          'Lock this %{issuableDisplayName}? Only <strong>project members</strong> will be able to comment.',
-        ),
-        { issuableDisplayName: this.issuableDisplayName },
-      );
-    },
-    unlockWarning() {
-      return sprintf(
-        __(
-          'Unlock this %{issuableDisplayName}? <strong>Everyone</strong> will be able to comment.',
-        ),
-        { issuableDisplayName: this.issuableDisplayName },
-      );
-    },
-  },
 };
 </script>
 
 <template>
   <div class="dropdown show">
     <div class="dropdown-menu sidebar-item-warning-message" data-testid="warning-text">
-      <p v-if="isLocked" class="text" v-html="unlockWarning"></p>
+      <p v-if="isLocked" class="text">
+        <gl-sprintf
+          :message="
+            __(
+              'Unlock this %{issuableDisplayName}? %{strongStart}Everyone%{strongEnd} will be able to comment.',
+            )
+          "
+        >
+          <template #issuableDisplayName>{{ issuableDisplayName }}</template>
+          <template #strong="{ content }"
+            ><strong>{{ content }}</strong></template
+          >
+        </gl-sprintf>
+      </p>
 
-      <p v-else class="text" v-html="lockWarning"></p>
+      <p v-else class="text">
+        <gl-sprintf
+          :message="
+            __(
+              'Lock this %{issuableDisplayName}? Only %{strongStart}project members%{strongEnd} will be able to comment.',
+            )
+          "
+        >
+          <template #issuableDisplayName>{{ issuableDisplayName }}</template>
+          <template #strong="{ content }"
+            ><strong>{{ content }}</strong></template
+          >
+        </gl-sprintf>
+      </p>
 
       <edit-form-buttons :is-locked="isLocked" :issuable-display-name="issuableDisplayName" />
     </div>

app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue

 <script>
 import tooltip from '../../vue_shared/directives/tooltip';
 import { __ } from '../../locale';
+import { GlSprintf } from '@gitlab/ui';
 
 export default {
+  i18n: {
+    removesBranchText: __('%{strongStart}Deletes%{strongEnd} source branch'),
+    tooltipTitle: __('A user with write access to the source branch selected this option'),
+  },
+  components: {
+    GlSprintf,
+  },
   directives: {
     tooltip,
   },
-  created() {
-    this.removesBranchText = __('<strong>Deletes</strong> source branch');
-    this.tooltipTitle = __('A user with write access to the source branch selected this option');
-  },
 };
 </script>
 
 <template>
   <p v-once class="mr-info-list mr-links gl-mb-0">
-    <span class="status-text" v-html="removesBranchText"> </span>
-    <i v-tooltip :title="tooltipTitle" :aria-label="tooltipTitle" class="fa fa-question-circle">
+    <span class="status-text">
+      <gl-sprintf :message="$options.i18n.removesBranchText">
+        <template #strong="{ content }">
+          <strong>{{ content }}</strong>
+        </template>
+      </gl-sprintf>
+    </span>
+    <i
+      v-tooltip
+      :title="$options.i18n.tooltipTitle"
+      :aria-label="$options.i18n.tooltipTitle"
+      class="fa fa-question-circle"
+    >
     </i>
   </p>
 </template>

ee/app/assets/javascripts/vue_merge_request_widget/components/blocking_merge_requests/blocking_merge_requests_report.vue

@@ -2,11 +2,12 @@
 import { componentNames } from 'ee/reports/components/issue_body';
 import ReportSection from '~/reports/components/report_section.vue';
 import { status as reportStatus } from '~/reports/constants';
-import { n__ } from '~/locale';
+import { n__, sprintf } from '~/locale';
+import { GlSprintf } from '@gitlab/ui';
 
 export default {
   name: 'BlockingMergeRequestsReport',
-  components: { ReportSection },
+  components: { ReportSection, GlSprintf },
   props: {
     mr: {
       type: Object,
@@ -64,10 +65,13 @@ export default {
     },
     blockedByText() {
       if (this.closedCount > 0 && this.closedCount === this.unmergedCount) {
-        return n__(
-          'Depends on <strong>%d closed</strong> merge request.',
-          'Depends on <strong>%d closed</strong> merge requests.',
+        return sprintf(
+          n__(
+            'Depends on %{strongStart}%{closedCount} closed%{strongEnd} merge request.',
+            'Depends on %{strongStart}%{closedCount} closed%{strongEnd} merge requests.',
             this.closedCount,
+          ),
+          { closedCount: this.closedCount },
         );
       }
 
@@ -114,7 +118,13 @@ export default {
       </span>
     </template>
     <template #error>
-      <span v-html="blockedByText"></span>
+      <span>
+        <gl-sprintf :message="blockedByText">
+          <template #strong="{ content }">
+            <strong>{{ content }}</strong>
+          </template>
+        </gl-sprintf>
+      </span>
     </template>
   </report-section>
 </template>

ee/spec/frontend/vue_mr_widget/components/blocking_merge_requests/blocking_merge_requests_report_spec.js

@@ -103,7 +103,7 @@ describe('BlockingMergeRequestsReport', () => {
       createComponent();
 
       expect(wrapper.vm.blockedByText).toEqual(
-        'Depends on <strong>1 closed</strong> merge request.',
+        'Depends on %{strongStart}1 closed%{strongEnd} merge request.',
       );
     });
   });

lib/gitlab/i18n/html_todo.yml

@@ -76,6 +76,102 @@
     - "< 1 saat"
     - "< 1 Stunde"
     - "< 1시간"
+
+#
+# Strings below are fixed in the source code but the translations are still present in CrowdIn so the
+# locale files will fail the linter. They can be deleted after next CrowdIn sync, likely in:
+# https://gitlab.com/gitlab-org/gitlab/-/issues/226008
+#
+
+"This commit was signed with an <strong>unverified</strong> signature.":
+  plural_id:
+  translations:
+    - "このコミットは<strong>検証されていない</strong> 署名でサインされています。"
+    - "Этот коммит был подписан <strong>непроверенной</strong> подписью."
+    - "此提交使用 <strong>未经验证的</strong> 签名进行签名。"
+    - "Цей коміт підписано <strong>неперевіреним</strong> підписом."
+    - "Esta commit fue firmado con una firma <strong>no verificada</strong>."
+"This commit was signed with a <strong>verified</strong> signature and the committer email is verified to belong to the same user.":
+  plural_id:
+  translations:
+    - "このコミットは <strong>検証済み</strong> の署名でサインされており、このコミッターのメールは同じユーザーのものであることが検証されています。"
+    - "Это коммит был подписан <strong>верифицированной</strong> подписью и коммитер подтвердил, что адрес почты принадлежит ему."
+    - "此提交使用 <strong>已验证</strong> 的签名进行签名，并且已验证提交者的电子邮件属于同一用户。"
+    - "Цей коміт підписано <strong>перевіреним</strong> підписом і адреса електронної пошти комітера гарантовано належить тому самому користувачу."
+    - "Este commit fue firmado con una firma verificada, y <strong>se ha verificado</strong> que la dirección de correo electrónico del committer y la firma pertenecen al mismo usuario."
+"Branch <strong>%{branch_name}</strong> was created. To set up auto deploy, choose a GitLab CI Yaml template and commit your changes. %{link_to_autodeploy_doc}":
+  plural_id:
+  translations:
+    - "分支 <strong>%{branch_name}</strong> 已創建。如需設置自動部署， 請選擇合適的 GitLab CI Yaml 模板併提交更改。%{link_to_autodeploy_doc}"
+    - "O branch <strong>%{branch_name}</strong> foi criado. Para configurar o deploy automático, selecione um modelo de Yaml do GitLab CI e commit suas mudanças. %{link_to_autodeploy_doc}"
+    - "<strong>%{branch_name}</strong> ブランチが作成されました。自動デプロイを設定するには、GitLab CI Yaml テンプレートを選択して、変更をコミットしてください。 %{link_to_autodeploy_doc}"
+    - "La branch <strong>%{branch_name}</strong> è stata creata. Per impostare un rilascio automatico scegli un template CI di Gitlab e committa le tue modifiche %{link_to_autodeploy_doc}"
+    - "O ramo <strong>%{branch_name}</strong> foi criado. Para configurar a implantação automática, seleciona um modelo de Yaml do GitLab CI e envia as tuas alterações. %{link_to_autodeploy_doc}"
+    - "Ветка <strong>%{branch_name}</strong> создана. Для настройки автоматического развертывания выберите YAML-шаблон для GitLab CI и зафиксируйте свои изменения. %{link_to_autodeploy_doc}"
+    - "已创建分支 <strong>%{branch_name}</strong> 。如需设置自动部署， 请选择合适的 GitLab CI Yaml 模板并提交更改。%{link_to_autodeploy_doc}"
+    - "Гілка <strong>%{branch_name}</strong> створена. Для настройки автоматичного розгортання виберіть GitLab CI Yaml-шаблон і закомітьте зміни. %{link_to_autodeploy_doc}"
+    - "Клонът <strong>%{branch_name}</strong> беше създаден. За да настроите автоматичното внедряване, изберете Yaml шаблон за GitLab CI и подайте промените си. %{link_to_autodeploy_doc}"
+    - "Branch <strong>%{branch_name}</strong> wurde erstellt. Um die automatische Bereitstellung einzurichten, wähle eine GitLab CI Yaml Vorlage und committe deine Änderungen. %{link_to_autodeploy_doc}"
+    - "<strong>%{branch_name}</strong> 브랜치가 생성되었습니다. 자동 배포를 설정하려면 GitLab CI Yaml 템플릿을 선택하고 변경 사항을 적용하십시오. %{link_to_autodeploy_doc}"
+    - "La branĉo <strong>%{branch_name}</strong> estis kreita. Por agordi aŭtomatan disponigadon, bonvolu elekti Yaml-ŝablonon por GitLab CI kaj enmeti viajn ŝanĝojn. %{link_to_autodeploy_doc}"
+    - "La branche <strong>%{branch_name}</strong> a été créée. Pour mettre en place le déploiement automatisé, sélectionnez un modèle de fichier YAML pour l’intégration continue (CI) de GitLab, et validez les modifications. %{link_to_autodeploy_doc}"
+    - "La rama <strong>%{branch_name}</strong> fue creada. Para configurar el auto despliegue, escoge una plantilla Yaml para GitLab CI y envía tus cambios. %{link_to_autodeploy_doc}"
+"GitLabPages|GitLab Pages are disabled for this project. You can enable them on your project's %{strong_start}Settings > General > Visibility%{strong_end} page.":
+  plural_id:
+  translations:
+    - "GitLab Pagesはこのプロジェクトでは無効になっています。 プロジェクトの%{strong_start} 設定> 全般> 可視性%{strong_end}ページで有効にできます。"
+    - "GitLab Pages отключены для этого проекта. Вы можете включить в поле %{strong_start}Настройки > Общие > Видимость%{strong_end} вашего проекта."
+    - "此项目禁用GitLab Pages。您可以在您的项目的%{strong_start}设置 > 常规 > 可见性%{strong_end} 页面启用。"
+    - "GitLab Pages вимкнено для цього проєкту. Ви можете їх увімкнути перейшовши на сторінку проєкту %{strong_start}Налаштування > Загальні > Видимість%{strong_end}."
+    - "Las páginas de GitLab están deshabilitadas para este proyecto. Puede habilitarlas en los ajustes %{strong_start} de su proyecto > General > Visibilidad%{strong_end}."
+"You can invite a new member to <strong>%{project_name}</strong> or invite another group.":
+  plural_id:
+  translations:
+    - "新しいメンバーを<strong>%{project_name} </strong>に招待するか、別のグループを招待することができます。"
+    - "Podes convidar um novo para <strong>%{project_name}</strong> ou convidar outro grupo."
+    - "邀请新成员或另一个群组加入<strong>%{project_name}</strong>。"
+    - "Puede invitar a un nuevo miembro a <strong>%{project_name}</strong> o invitar a otro grupo."
+    - "<strong>%{project_name}</strong> projesine yeni bir üye davet edebilir veya başka bir grubu davet edebilirsiniz."
+    - "Вы можете пригласить нового участника в <strong>%{project_name}</strong> или пригласить другую группу."
+    - "Ви можете запросити нового учасника до <strong>%{project_name}</strong> або запросити іншу групу."
+"You can invite a new member to <strong>%{project_name}</strong>.":
+  plural_id:
+  translations:
+    - "新しいメンバーを<strong>%{project_name} </strong>に招待できます。"
+    - "Podes convidar um novo membro para <strong>%{project_name}</strong>."
+    - "邀请新成员加入<strong>%{project_name}</strong>。"
+    - "Puedes invitar a un nuevo miembro a <strong>%{project_name}</strong>."
+    - "<strong>%{project_name}</strong> projesine yeni bir üye davet edebilirsiniz."
+    - "Вы можете пригласить нового участника в <strong>%{project_name}</strong>."
+    - "Ви можете запросити нового учасника до <strong>%{project_name}</strong>."
+"You can invite another group to <strong>%{project_name}</strong>.":
+  plural_id:
+  translations:
+    - "他のグループを<strong>%{project_name} </strong>に招待できます。"
+    - "Podes convidar outro grupo para <strong>%{project_name}</strong>."
+    - "您可以邀请另一个群组加入<strong>%{project_name}</strong>。"
+    - "Ви можете запросити нову групу до <strong>%{project_name}</strong>."
+    - "Puedes invitar a otro grupo a <strong>%{project_name}</strong>."
+"Example: <code>192.168.0.0/24</code>. %{read_more_link}.":
+  plural_id:
+  translations:
+"Note that PostgreSQL %{pg_version_upcoming} will become the minimum required version in GitLab %{gl_version_upcoming} (%{gl_version_upcoming_date}). Please consider upgrading your environment to a supported PostgreSQL version soon, see <a href=\\\"%{pg_version_upcoming_url}\\\">the related epic</a> for details.":
+  plural_id:
+  translations:
+"Authorize <strong>%{user}</strong> to use your account?":
+  plural_id:
+  translations:
+"DeployFreeze|Specify times when deployments are not allowed for an environment. The <code>gitlab-ci.yml</code> file must be updated to make deployment jobs aware of the %{freeze_period_link_start}freeze period%{freeze_period_link_end}.":
+  plural_id:
+  translations:
+"<project name>":
+  translations:
+    - "<название проекта>"
+    - "<project name>"
+    - "<proje adı>"
+    - "<naziv projekta>"
+    - "<ім’я проєкту>"
+    - "<프로젝트 이름>"
 "<strong>Deletes</strong> source branch":
   plural_id:
   translations:
@@ -217,99 +313,3 @@
     - "Vous êtes sur le point de d’activer la confidentialité. Cela signifie que seuls les membres de l’équipe avec <strong>au moins un accès en tant que rapporteur</strong> seront en mesure de voir et de laisser des commentaires sur le ticket."
     - "Va a activar la confidencialidad. Esto significa que solo los miembros del equipo con como mínimo,<strong>acceso como Reporter</strong> podrán ver y dejar comentarios sobre la incidencia."
     - "あなたは非公開設定をオンにしようとしています。これは、最低でも<strong>報告権限</strong>を持ったチームメンバーのみが課題を表示したりコメントを残したりすることができるようになるということです。"
-
-#
-# Strings below are fixed in the source code but the translations are still present in CrowdIn so the
-# locale files will fail the linter. They can be deleted after next CrowdIn sync, likely in:
-# https://gitlab.com/gitlab-org/gitlab/-/issues/226008
-#
-
-"This commit was signed with an <strong>unverified</strong> signature.":
-  plural_id:
-  translations:
-    - "このコミットは<strong>検証されていない</strong> 署名でサインされています。"
-    - "Этот коммит был подписан <strong>непроверенной</strong> подписью."
-    - "此提交使用 <strong>未经验证的</strong> 签名进行签名。"
-    - "Цей коміт підписано <strong>неперевіреним</strong> підписом."
-    - "Esta commit fue firmado con una firma <strong>no verificada</strong>."
-"This commit was signed with a <strong>verified</strong> signature and the committer email is verified to belong to the same user.":
-  plural_id:
-  translations:
-    - "このコミットは <strong>検証済み</strong> の署名でサインされており、このコミッターのメールは同じユーザーのものであることが検証されています。"
-    - "Это коммит был подписан <strong>верифицированной</strong> подписью и коммитер подтвердил, что адрес почты принадлежит ему."
-    - "此提交使用 <strong>已验证</strong> 的签名进行签名，并且已验证提交者的电子邮件属于同一用户。"
-    - "Цей коміт підписано <strong>перевіреним</strong> підписом і адреса електронної пошти комітера гарантовано належить тому самому користувачу."
-    - "Este commit fue firmado con una firma verificada, y <strong>se ha verificado</strong> que la dirección de correo electrónico del committer y la firma pertenecen al mismo usuario."
-"Branch <strong>%{branch_name}</strong> was created. To set up auto deploy, choose a GitLab CI Yaml template and commit your changes. %{link_to_autodeploy_doc}":
-  plural_id:
-  translations:
-    - "分支 <strong>%{branch_name}</strong> 已創建。如需設置自動部署， 請選擇合適的 GitLab CI Yaml 模板併提交更改。%{link_to_autodeploy_doc}"
-    - "O branch <strong>%{branch_name}</strong> foi criado. Para configurar o deploy automático, selecione um modelo de Yaml do GitLab CI e commit suas mudanças. %{link_to_autodeploy_doc}"
-    - "<strong>%{branch_name}</strong> ブランチが作成されました。自動デプロイを設定するには、GitLab CI Yaml テンプレートを選択して、変更をコミットしてください。 %{link_to_autodeploy_doc}"
-    - "La branch <strong>%{branch_name}</strong> è stata creata. Per impostare un rilascio automatico scegli un template CI di Gitlab e committa le tue modifiche %{link_to_autodeploy_doc}"
-    - "O ramo <strong>%{branch_name}</strong> foi criado. Para configurar a implantação automática, seleciona um modelo de Yaml do GitLab CI e envia as tuas alterações. %{link_to_autodeploy_doc}"
-    - "Ветка <strong>%{branch_name}</strong> создана. Для настройки автоматического развертывания выберите YAML-шаблон для GitLab CI и зафиксируйте свои изменения. %{link_to_autodeploy_doc}"
-    - "已创建分支 <strong>%{branch_name}</strong> 。如需设置自动部署， 请选择合适的 GitLab CI Yaml 模板并提交更改。%{link_to_autodeploy_doc}"
-    - "Гілка <strong>%{branch_name}</strong> створена. Для настройки автоматичного розгортання виберіть GitLab CI Yaml-шаблон і закомітьте зміни. %{link_to_autodeploy_doc}"
-    - "Клонът <strong>%{branch_name}</strong> беше създаден. За да настроите автоматичното внедряване, изберете Yaml шаблон за GitLab CI и подайте промените си. %{link_to_autodeploy_doc}"
-    - "Branch <strong>%{branch_name}</strong> wurde erstellt. Um die automatische Bereitstellung einzurichten, wähle eine GitLab CI Yaml Vorlage und committe deine Änderungen. %{link_to_autodeploy_doc}"
-    - "<strong>%{branch_name}</strong> 브랜치가 생성되었습니다. 자동 배포를 설정하려면 GitLab CI Yaml 템플릿을 선택하고 변경 사항을 적용하십시오. %{link_to_autodeploy_doc}"
-    - "La branĉo <strong>%{branch_name}</strong> estis kreita. Por agordi aŭtomatan disponigadon, bonvolu elekti Yaml-ŝablonon por GitLab CI kaj enmeti viajn ŝanĝojn. %{link_to_autodeploy_doc}"
-    - "La branche <strong>%{branch_name}</strong> a été créée. Pour mettre en place le déploiement automatisé, sélectionnez un modèle de fichier YAML pour l’intégration continue (CI) de GitLab, et validez les modifications. %{link_to_autodeploy_doc}"
-    - "La rama <strong>%{branch_name}</strong> fue creada. Para configurar el auto despliegue, escoge una plantilla Yaml para GitLab CI y envía tus cambios. %{link_to_autodeploy_doc}"
-"GitLabPages|GitLab Pages are disabled for this project. You can enable them on your project's %{strong_start}Settings > General > Visibility%{strong_end} page.":
-  plural_id:
-  translations:
-    - "GitLab Pagesはこのプロジェクトでは無効になっています。 プロジェクトの%{strong_start} 設定> 全般> 可視性%{strong_end}ページで有効にできます。"
-    - "GitLab Pages отключены для этого проекта. Вы можете включить в поле %{strong_start}Настройки > Общие > Видимость%{strong_end} вашего проекта."
-    - "此项目禁用GitLab Pages。您可以在您的项目的%{strong_start}设置 > 常规 > 可见性%{strong_end} 页面启用。"
-    - "GitLab Pages вимкнено для цього проєкту. Ви можете їх увімкнути перейшовши на сторінку проєкту %{strong_start}Налаштування > Загальні > Видимість%{strong_end}."
-    - "Las páginas de GitLab están deshabilitadas para este proyecto. Puede habilitarlas en los ajustes %{strong_start} de su proyecto > General > Visibilidad%{strong_end}."
-"You can invite a new member to <strong>%{project_name}</strong> or invite another group.":
-  plural_id:
-  translations:
-    - "新しいメンバーを<strong>%{project_name} </strong>に招待するか、別のグループを招待することができます。"
-    - "Podes convidar um novo para <strong>%{project_name}</strong> ou convidar outro grupo."
-    - "邀请新成员或另一个群组加入<strong>%{project_name}</strong>。"
-    - "Puede invitar a un nuevo miembro a <strong>%{project_name}</strong> o invitar a otro grupo."
-    - "<strong>%{project_name}</strong> projesine yeni bir üye davet edebilir veya başka bir grubu davet edebilirsiniz."
-    - "Вы можете пригласить нового участника в <strong>%{project_name}</strong> или пригласить другую группу."
-    - "Ви можете запросити нового учасника до <strong>%{project_name}</strong> або запросити іншу групу."
-"You can invite a new member to <strong>%{project_name}</strong>.":
-  plural_id:
-  translations:
-    - "新しいメンバーを<strong>%{project_name} </strong>に招待できます。"
-    - "Podes convidar um novo membro para <strong>%{project_name}</strong>."
-    - "邀请新成员加入<strong>%{project_name}</strong>。"
-    - "Puedes invitar a un nuevo miembro a <strong>%{project_name}</strong>."
-    - "<strong>%{project_name}</strong> projesine yeni bir üye davet edebilirsiniz."
-    - "Вы можете пригласить нового участника в <strong>%{project_name}</strong>."
-    - "Ви можете запросити нового учасника до <strong>%{project_name}</strong>."
-"You can invite another group to <strong>%{project_name}</strong>.":
-  plural_id:
-  translations:
-    - "他のグループを<strong>%{project_name} </strong>に招待できます。"
-    - "Podes convidar outro grupo para <strong>%{project_name}</strong>."
-    - "您可以邀请另一个群组加入<strong>%{project_name}</strong>。"
-    - "Ви можете запросити нову групу до <strong>%{project_name}</strong>."
-    - "Puedes invitar a otro grupo a <strong>%{project_name}</strong>."
-"Example: <code>192.168.0.0/24</code>. %{read_more_link}.":
-  plural_id:
-  translations:
-"Note that PostgreSQL %{pg_version_upcoming} will become the minimum required version in GitLab %{gl_version_upcoming} (%{gl_version_upcoming_date}). Please consider upgrading your environment to a supported PostgreSQL version soon, see <a href=\\\"%{pg_version_upcoming_url}\\\">the related epic</a> for details.":
-  plural_id:
-  translations:
-"Authorize <strong>%{user}</strong> to use your account?":
-  plural_id:
-  translations:
-"DeployFreeze|Specify times when deployments are not allowed for an environment. The <code>gitlab-ci.yml</code> file must be updated to make deployment jobs aware of the %{freeze_period_link_start}freeze period%{freeze_period_link_end}.":
-  plural_id:
-  translations:
-"<project name>":
-  translations:
-    - "<название проекта>"
-    - "<project name>"
-    - "<proje adı>"
-    - "<naziv projekta>"
-    - "<ім’я проєкту>"
-    - "<프로젝트 이름>"

locale/gitlab.pot

@@ -694,6 +694,9 @@ msgstr ""
 msgid "%{state} epics"
 msgstr ""
 
+msgid "%{strongStart}Deletes%{strongEnd} source branch"
+msgstr ""
+
 msgid "%{strongStart}Note:%{strongEnd} Once a custom stage has been added you can re-order stages by dragging them into the desired position."
 msgstr ""
 
@@ -1072,9 +1075,6 @@ msgstr ""
 msgid "< 1 hour"
 msgstr ""
 
-msgid "<strong>Deletes</strong> source branch"
-msgstr ""
-
 msgid "A 'Runner' is a process which runs a job. You can set up as many Runners as you need."
 msgstr ""
 
@@ -3755,7 +3755,7 @@ msgstr ""
 msgid "Badges|This project has no badges"
 msgstr ""
 
-msgid "Badges|You are going to delete this badge. Deleted badges <strong>cannot</strong> be restored."
+msgid "Badges|You are going to delete this badge. Deleted badges %{strongStart}cannot%{strongEnd} be restored."
 msgstr ""
 
 msgid "Badges|Your badges"
@@ -5111,9 +5111,6 @@ msgstr ""
 msgid "ClusterAgent|You have insufficient permissions to create a cluster agent for this project"
 msgstr ""
 
-msgid "ClusterIntegration| This will permanently delete the following resources: <ul> <li>All installed applications and related resources</li> <li>The <code>gitlab-managed-apps</code> namespace</li> <li>Any project namespaces</li> <li><code>clusterroles</code></li> <li><code>clusterrolebindings</code></li> </ul>"
-msgstr ""
-
 msgid "ClusterIntegration|%{appList} was successfully installed on your Kubernetes cluster"
 msgstr ""
 
@@ -5168,6 +5165,9 @@ msgstr ""
 msgid "ClusterIntegration|All data will be deleted and cannot be restored."
 msgstr ""
 
+msgid "ClusterIntegration|All installed applications and related resources"
+msgstr ""
+
 msgid "ClusterIntegration|Allow GitLab to manage namespace and service accounts for this cluster."
 msgstr ""
 
@@ -5192,6 +5192,9 @@ msgstr ""
 msgid "ClusterIntegration|An error occurred while trying to fetch zone machine types: %{error}"
 msgstr ""
 
+msgid "ClusterIntegration|Any project namespaces"
+msgstr ""
+
 msgid "ClusterIntegration|Any running pipelines will be canceled."
 msgstr ""
 
@@ -5864,6 +5867,9 @@ msgstr ""
 msgid "ClusterIntegration|Subnets"
 msgstr ""
 
+msgid "ClusterIntegration|The %{gitlabNamespace} namespace"
+msgstr ""
+
 msgid "ClusterIntegration|The Amazon Resource Name (ARN) associated with your role. If you do not have a provision role, first create one on  %{startAwsLink}Amazon Web Services %{externalLinkIcon}%{endLink} using the above account and external IDs. %{startMoreInfoLink}More information%{endLink}"
 msgstr ""
 
@@ -5903,6 +5909,9 @@ msgstr ""
 msgid "ClusterIntegration|This option will allow you to install applications on RBAC clusters."
 msgstr ""
 
+msgid "ClusterIntegration|This will permanently delete the following resources:"
+msgstr ""
+
 msgid "ClusterIntegration|To access your application after deployment, point a wildcard DNS to the Knative Endpoint."
 msgstr ""
 
@@ -6367,7 +6376,7 @@ msgstr ""
 msgid "Configure Tracing"
 msgstr ""
 
-msgid "Configure a <code>.gitlab-webide.yml</code> file in the <code>.gitlab</code> directory to start using the Web Terminal. %{helpStart}Learn more.%{helpEnd}"
+msgid "Configure a %{codeStart}.gitlab-webide.yml%{codeEnd} file in the %{codeStart}.gitlab%{codeEnd} directory to start using the Web Terminal. %{helpStart}Learn more.%{helpEnd}"
 msgstr ""
 
 msgid "Configure automatic git checks and housekeeping on repositories."
@@ -8063,8 +8072,8 @@ msgid_plural "Depends on %d merge requests being merged"
 msgstr[0] ""
 msgstr[1] ""
 
-msgid "Depends on <strong>%d closed</strong> merge request."
-msgid_plural "Depends on <strong>%d closed</strong> merge requests."
+msgid "Depends on %{strongStart}%{closedCount} closed%{strongEnd} merge request."
+msgid_plural "Depends on %{strongStart}%{closedCount} closed%{strongEnd} merge requests."
 msgstr[0] ""
 msgstr[1] ""
 
@@ -11638,7 +11647,7 @@ msgstr ""
 msgid "Go to %{link_to_google_takeout}."
 msgstr ""
 
-msgid "Go to <strong>Issues</strong> > <strong>Boards</strong> to access your personalized learning issue board."
+msgid "Go to %{strongStart}Issues%{strongEnd} &gt; %{strongStart}Boards%{strongEnd} to access your personalized learning issue board."
 msgstr ""
 
 msgid "Go to Webhooks"
@@ -13939,7 +13948,7 @@ msgstr ""
 msgid "Labels can be applied to issues and merge requests."
 msgstr ""
 
-msgid "Labels|<span>Promote label</span> %{labelTitle} <span>to Group Label?</span>"
+msgid "Labels|%{spanStart}Promote label%{spanEnd} %{labelTitle} %{spanStart}to Group Label?%{spanEnd}"
 msgstr ""
 
 msgid "Labels|Promote Label"
@@ -14507,7 +14516,7 @@ msgstr ""
 msgid "Lock the discussion"
 msgstr ""
 
-msgid "Lock this %{issuableDisplayName}? Only <strong>project members</strong> will be able to comment."
+msgid "Lock this %{issuableDisplayName}? Only %{strongStart}project members%{strongEnd} will be able to comment."
 msgstr ""
 
 msgid "Lock to current projects"
@@ -19516,9 +19525,6 @@ msgstr ""
 msgid "PrometheusService|%{exporters} with %{metrics} were found"
 msgstr ""
 
-msgid "PrometheusService|<p class=\"text-tertiary\">No <a href=\"%{docsUrl}\">common metrics</a> were found</p>"
-msgstr ""
-
 msgid "PrometheusService|Active"
 msgstr ""
 
@@ -19576,6 +19582,9 @@ msgstr ""
 msgid "PrometheusService|New metric"
 msgstr ""
 
+msgid "PrometheusService|No %{docsUrlStart}common metrics%{docsUrlEnd} were found"
+msgstr ""
+
 msgid "PrometheusService|No custom metrics have been created. Create one using the button above"
 msgstr ""
 
@@ -25160,7 +25169,7 @@ msgstr ""
 msgid "This project does not have a wiki homepage yet"
 msgstr ""
 
-msgid "This project does not have billing enabled. To create a cluster, <a href=%{linkToBilling} target=\"_blank\" rel=\"noopener noreferrer\">enable billing <i class=\"fa fa-external-link\" aria-hidden=\"true\"></i></a> and try again."
+msgid "This project does not have billing enabled. To create a cluster, %{linkToBillingStart}enable billing %{linkIcon}%{linkToBillingEnd} and try again."
 msgstr ""
 
 msgid "This project has no active access tokens."
@@ -26196,7 +26205,7 @@ msgstr ""
 msgid "Unlock the discussion"
 msgstr ""
 
-msgid "Unlock this %{issuableDisplayName}? <strong>Everyone</strong> will be able to comment."
+msgid "Unlock this %{issuableDisplayName}? %{strongStart}Everyone%{strongEnd} will be able to comment."
 msgstr ""
 
 msgid "Unlocked"
@@ -27816,10 +27825,10 @@ msgstr ""
 msgid "You are going to transfer %{project_full_name} to another owner. Are you ABSOLUTELY sure?"
 msgstr ""
 
-msgid "You are going to turn off the confidentiality. This means %{accessLevel} will be able to see and leave a comment on this %{issuableType}."
+msgid "You are going to turn off the confidentiality. This means %{strongStart}everyone%{strongEnd} will be able to see and leave a comment on this %{issuableType}."
 msgstr ""
 
-msgid "You are going to turn on the confidentiality. This means that only team members with %{accessLevel} are able to see and leave comments on the %{issuableType}."
+msgid "You are going to turn on the confidentiality. This means that only team members with %{strongStart}at least Reporter access%{strongEnd} are able to see and leave comments on the %{issuableType}."
 msgstr ""
 
 msgid "You are not allowed to push into this branch. Create another branch or open a merge request."
@@ -28547,9 +28556,6 @@ msgstr ""
 msgid "assign yourself"
 msgstr ""
 
-msgid "at least Reporter access"
-msgstr ""
-
 msgid "at risk"
 msgstr ""
 
@@ -28940,9 +28946,6 @@ msgstr ""
 msgid "estimateCommand|%{slash_command} will update the estimated time with the latest command."
 msgstr ""
 
-msgid "everyone"
-msgstr ""
-
 msgid "exceeds the limit of %{bytes} bytes"
 msgstr ""
 

spec/frontend/ide/stores/modules/terminal/messages_spec.js

@@ -15,6 +15,8 @@ describe('IDE store terminal messages', () => {
         sprintf(
           messages.ERROR_CONFIG,
           {
+            codeStart: `<code>`,
+            codeEnd: `</code>`,
             helpStart: `<a href="${escape(TEST_HELP_URL)}" target="_blank">`,
             helpEnd: '</a>',
           },

spec/frontend/sidebar/confidential/__snapshots__/edit_form_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Edit Form Dropdown when confidential renders on or off text based on confidentiality 1`] = `
+<div
+  class="dropdown show"
+  toggleform="function () {}"
+  updateconfidentialattribute="function () {}"
+>
+  <div
+    class="dropdown-menu sidebar-item-warning-message"
+  >
+    <div>
+      <p>
+        <gl-sprintf-stub
+          message="You are going to turn off the confidentiality. This means %{strongStart}everyone%{strongEnd} will be able to see and leave a comment on this %{issuableType}."
+        />
+      </p>
+       
+      <edit-form-buttons-stub
+        confidential="true"
+        fullpath=""
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Edit Form Dropdown when not confidential renders "You are going to turn on the confidentiality." in the  1`] = `
+<div
+  class="dropdown show"
+  toggleform="function () {}"
+  updateconfidentialattribute="function () {}"
+>
+  <div
+    class="dropdown-menu sidebar-item-warning-message"
+  >
+    <div>
+      <p>
+        <gl-sprintf-stub
+          message="You are going to turn on the confidentiality. This means that only team members with %{strongStart}at least Reporter access%{strongEnd} are able to see and leave comments on the %{issuableType}."
+        />
+      </p>
+       
+      <edit-form-buttons-stub
+        fullpath=""
+      />
+    </div>
+  </div>
+</div>
+`;

spec/frontend/sidebar/confidential/edit_form_spec.js

@@ -23,14 +23,14 @@ describe('Edit Form Dropdown', () => {
   });
 
   describe('when not confidential', () => {
-    it('renders "You are going to turn off the confidentiality." in the ', () => {
+    it('renders "You are going to turn on the confidentiality." in the ', () => {
       createComponent({
         confidential: false,
         toggleForm,
         updateConfidentialAttribute,
       });
 
-      expect(wrapper.find('p').text()).toContain('You are going to turn on the confidentiality.');
+      expect(wrapper.element).toMatchSnapshot();
     });
   });
 
@@ -42,7 +42,7 @@ describe('Edit Form Dropdown', () => {
         updateConfidentialAttribute,
       });
 
-      expect(wrapper.find('p').text()).toContain('You are going to turn off the confidentiality.');
+      expect(wrapper.element).toMatchSnapshot();
     });
   });
 });

spec/frontend/sidebar/lock/__snapshots__/edit_form_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Edit Form Dropdown In issue page when locked the appropriate warning text is rendered 1`] = `
+<div
+  class="dropdown-menu sidebar-item-warning-message"
+  data-testid="warning-text"
+>
+  <p
+    class="text"
+  >
+    <gl-sprintf-stub
+      message="Unlock this %{issuableDisplayName}? %{strongStart}Everyone%{strongEnd} will be able to comment."
+    />
+  </p>
+   
+  <edit-form-buttons-stub
+    islocked="true"
+    issuabledisplayname="issue"
+  />
+</div>
+`;
+
+exports[`Edit Form Dropdown In issue page when unlocked the appropriate warning text is rendered 1`] = `
+<div
+  class="dropdown-menu sidebar-item-warning-message"
+  data-testid="warning-text"
+>
+  <p
+    class="text"
+  >
+    <gl-sprintf-stub
+      message="Lock this %{issuableDisplayName}? Only %{strongStart}project members%{strongEnd} will be able to comment."
+    />
+  </p>
+   
+  <edit-form-buttons-stub
+    issuabledisplayname="issue"
+  />
+</div>
+`;
+
+exports[`Edit Form Dropdown In merge request page when locked the appropriate warning text is rendered 1`] = `
+<div
+  class="dropdown-menu sidebar-item-warning-message"
+  data-testid="warning-text"
+>
+  <p
+    class="text"
+  >
+    <gl-sprintf-stub
+      message="Unlock this %{issuableDisplayName}? %{strongStart}Everyone%{strongEnd} will be able to comment."
+    />
+  </p>
+   
+  <edit-form-buttons-stub
+    islocked="true"
+    issuabledisplayname="merge request"
+  />
+</div>
+`;
+
+exports[`Edit Form Dropdown In merge request page when unlocked the appropriate warning text is rendered 1`] = `
+<div
+  class="dropdown-menu sidebar-item-warning-message"
+  data-testid="warning-text"
+>
+  <p
+    class="text"
+  >
+    <gl-sprintf-stub
+      message="Lock this %{issuableDisplayName}? Only %{strongStart}project members%{strongEnd} will be able to comment."
+    />
+  </p>
+   
+  <edit-form-buttons-stub
+    issuabledisplayname="merge request"
+  />
+</div>
+`;

spec/frontend/sidebar/lock/edit_form_spec.js

@@ -38,18 +38,16 @@ describe('Edit Form Dropdown', () => {
     });
 
     describe.each`
-      isLocked | lockStatusText | lockAction  | warningText
-      ${false} | ${'unlocked'}  | ${'Lock'}   | ${'Only project members will be able to comment.'}
-      ${true}  | ${'locked'}    | ${'Unlock'} | ${'Everyone will be able to comment.'}
-    `('when $lockStatusText', ({ isLocked, lockAction, warningText }) => {
+      isLocked | lockStatusText
+      ${false} | ${'unlocked'}
+      ${true}  | ${'locked'}
+    `('when $lockStatusText', ({ isLocked }) => {
       beforeEach(() => {
         createComponent({ props: { isLocked } });
       });
 
       it(`the appropriate warning text is rendered`, () => {
-        expect(findWarningText().text()).toContain(
-          `${lockAction} this ${issuableDisplayName}? ${warningText}`,
-        );
+        expect(findWarningText().element).toMatchSnapshot();
       });
     });
   });