Improve i18n of ProjectFormGroup

app/assets/javascripts/confidential_merge_request/components/project_form_group.vue

@@ -96,12 +96,23 @@ export default {
       }
     },
   },
+  i18n: {
+    project: __('Project'),
+    privateForkSelected: __(
+      "To protect this issue's confidentiality, a private fork of this project was selected.",
+    ),
+    noForks: __('No forks are available to you.'),
+    forkTheProject: __(
+      `To protect this issue's confidentiality, %{linkStart}fork this project%{linkEnd} and set the fork's visibility to private.`,
+    ),
+    readMore: __('Read more'),
+  },
 };
 </script>
 
 <template>
   <div class="confidential-merge-request-fork-group form-group">
-    <label>{{ __('Project') }}</label>
+    <label>{{ $options.i18n.project }}</label>
     <div>
       <dropdown
         v-if="projects.length"
@@ -111,25 +122,13 @@ export default {
       />
       <p class="text-muted mt-1 mb-0">
         <template v-if="projects.length">
-          {{
-            __(
-              "To protect this issue's confidentiality, a private fork of this project was selected.",
-            )
-          }}
+          {{ $options.i18n.privateForkSelected }}
         </template>
         <template v-else>
-          {{ __('No forks are available to you.') }}<br />
-          <gl-sprintf
-            :message="
-              __(
-                `To protect this issue's confidentiality, %{forkLink} and set the fork's visibility to private.`,
-              )
-            "
-          >
-            <template #forkLink>
-              <a :href="newForkPath" target="_blank" class="help-link">{{
-                __('fork this project')
-              }}</a>
+          {{ $options.i18n.noForks }}<br />
+          <gl-sprintf :message="$options.i18n.forkTheProject">
+            <template #link="{ content }">
+              <a :href="newForkPath" target="_blank" class="help-link">{{ content }}</a>
             </template>
           </gl-sprintf>
         </template>
@@ -138,7 +137,7 @@ export default {
           class="w-auto p-0 d-inline-block text-primary bg-transparent"
           target="_blank"
         >
-          <span class="sr-only">{{ __('Read more') }}</span>
+          <span class="sr-only">{{ $options.i18n.readMore }}</span>
           <gl-icon name="question-o" />
         </gl-link>
       </p>

locale/gitlab.pot

@@ -35223,7 +35223,7 @@ msgstr ""
 msgid "To preserve performance only %{strong_open}%{display_size} of %{real_size}%{strong_close} files are displayed."
 msgstr ""
 
-msgid "To protect this issue's confidentiality, %{forkLink} and set the fork's visibility to private."
+msgid "To protect this issue's confidentiality, %{linkStart}fork this project%{linkEnd} and set the fork's visibility to private."
 msgstr ""
 
 msgid "To protect this issue's confidentiality, a private fork of this project was selected."
@@ -39836,9 +39836,6 @@ msgstr ""
 msgid "fork"
 msgstr ""
 
-msgid "fork this project"
-msgstr ""
-
 msgid "from"
 msgstr ""
 

spec/frontend/confidential_merge_request/components/__snapshots__/project_form_group_spec.js.snap

@@ -17,11 +17,15 @@ exports[`Confidential merge request project form group component renders empty s
       
         No forks are available to you.
       <br />
-       
-      <gl-sprintf-stub
-        message="To protect this issue's confidentiality, %{forkLink} and set the fork's visibility to private."
-      />
-       
+       To protect this issue's confidentiality, 
+      <a
+        class="help-link"
+        href="https://test.com"
+        target="_blank"
+      >
+        fork this project
+      </a>
+       and set the fork's visibility to private. 
       <gl-link-stub
         class="w-auto p-0 d-inline-block text-primary bg-transparent"
         href="/help"
@@ -52,18 +56,16 @@ exports[`Confidential merge request project form group component renders fork dr
   </label>
    
   <div>
-    <!---->
+    <dropdown-stub
+      projects="[object Object],[object Object]"
+      selectedproject="[object Object]"
+    />
      
     <p
       class="text-muted mt-1 mb-0"
     >
       
-        No forks are available to you.
-      <br />
-       
-      <gl-sprintf-stub
-        message="To protect this issue's confidentiality, %{forkLink} and set the fork's visibility to private."
-      />
+        To protect this issue's confidentiality, a private fork of this project was selected.
        
       <gl-link-stub
         class="w-auto p-0 d-inline-block text-primary bg-transparent"

spec/frontend/confidential_merge_request/components/project_form_group_spec.js

+import { GlSprintf } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import ProjectFormGroup from '~/confidential_merge_request/components/project_form_group.vue';
@@ -21,55 +22,52 @@ const mockData = [
     },
   },
 ];
-let vm;
+let wrapper;
 let mock;
 
 function factory(projects = mockData) {
   mock = new MockAdapter(axios);
   mock.onGet(/api\/(.*)\/projects\/gitlab-org%2Fgitlab-ce\/forks/).reply(200, projects);
 
-  vm = shallowMount(ProjectFormGroup, {
+  wrapper = shallowMount(ProjectFormGroup, {
     propsData: {
       namespacePath: 'gitlab-org',
       projectPath: 'gitlab-org/gitlab-ce',
       newForkPath: 'https://test.com',
       helpPagePath: '/help',
     },
+    stubs: { GlSprintf },
   });
+
+  return axios.waitForAll();
 }
 
 describe('Confidential merge request project form group component', () => {
   afterEach(() => {
     mock.restore();
-    vm.destroy();
+    wrapper.destroy();
   });
 
-  it('renders fork dropdown', () => {
-    factory();
+  it('renders fork dropdown', async () => {
+    await factory();
 
-    return vm.vm.$nextTick(() => {
-      expect(vm.element).toMatchSnapshot();
-    });
+    expect(wrapper.element).toMatchSnapshot();
   });
 
-  it('sets selected project as first fork', () => {
-    factory();
+  it('sets selected project as first fork', async () => {
+    await factory();
 
-    return vm.vm.$nextTick(() => {
-      expect(vm.vm.selectedProject).toEqual({
-        id: 1,
-        name: 'root / gitlab-ce',
-        pathWithNamespace: 'root/gitlab-ce',
-        namespaceFullpath: 'root',
-      });
+    expect(wrapper.vm.selectedProject).toEqual({
+      id: 1,
+      name: 'root / gitlab-ce',
+      pathWithNamespace: 'root/gitlab-ce',
+      namespaceFullpath: 'root',
     });
   });
 
-  it('renders empty state when response is empty', () => {
-    factory([]);
+  it('renders empty state when response is empty', async () => {
+    await factory([]);
 
-    return vm.vm.$nextTick(() => {
-      expect(vm.element).toMatchSnapshot();
-    });
+    expect(wrapper.element).toMatchSnapshot();
   });
 });