Merge branch '15013-fork-info-vue' into 'master'

Convert fork info into Vue and add illustration

See merge request gitlab-org/gitlab!55259

app/assets/javascripts/pages/projects/forks/new/components/app.vue

+<script>
+import ForkForm from './fork_form.vue';
+
+export default {
+  components: {
+    ForkForm,
+  },
+  props: {
+    forkIllustration: {
+      type: String,
+      required: true,
+    },
+    endpoint: {
+      type: String,
+      required: true,
+    },
+    projectFullPath: {
+      type: String,
+      required: true,
+    },
+    projectId: {
+      type: String,
+      required: true,
+    },
+    projectName: {
+      type: String,
+      required: true,
+    },
+    projectPath: {
+      type: String,
+      required: true,
+    },
+    projectDescription: {
+      type: String,
+      required: true,
+    },
+    projectVisibility: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="row gl-mt-5">
+    <div class="col-lg-3">
+      <img :src="forkIllustration" />
+      <h4 class="">{{ s__('ForkProject|Fork project') }}</h4>
+      <p>
+        {{ s__('ForkProject|A fork is a copy of a project.') }}
+        <br />
+        {{
+          s__(
+            'ForkProject|Forking a repository allows you to make changes without affecting the original project.',
+          )
+        }}
+      </p>
+    </div>
+    <div class="col-lg-9">
+      <fork-form
+        :endpoint="endpoint"
+        :project-full-path="projectFullPath"
+        :project-id="projectId"
+        :project-name="projectName"
+        :project-path="projectPath"
+        :project-description="projectDescription"
+        :project-visibility="projectVisibility"
+      />
+    </div>
+  </div>
+</template>

app/assets/javascripts/pages/projects/forks/new/components/fork_form.vue

@@ -45,23 +45,23 @@ export default {
     GlFormRadioGroup,
     GlFormSelect,
   },
+  inject: {
+    newGroupPath: {
+      default: '',
+    },
+    visibilityHelpPath: {
+      default: '',
+    },
+  },
   props: {
     endpoint: {
       type: String,
       required: true,
     },
-    newGroupPath: {
-      type: String,
-      required: true,
-    },
     projectFullPath: {
       type: String,
       required: true,
     },
-    visibilityHelpPath: {
-      type: String,
-      required: true,
-    },
     projectId: {
       type: String,
       required: true,

app/assets/javascripts/pages/projects/forks/new/index.js

 import Vue from 'vue';
-import ForkForm from './components/fork_form.vue';
+import App from './components/app.vue';
 import ForkGroupsList from './components/fork_groups_list.vue';
 
 const mountElement = document.getElementById('fork-groups-mount-element');
 
 if (gon.features.forkProjectForm) {
   const {
+    forkIllustration,
     endpoint,
     newGroupPath,
     projectFullPath,
@@ -20,9 +21,14 @@ if (gon.features.forkProjectForm) {
   // eslint-disable-next-line no-new
   new Vue({
     el: mountElement,
+    provide: {
+      newGroupPath,
+      visibilityHelpPath,
+    },
     render(h) {
-      return h(ForkForm, {
+      return h(App, {
         props: {
+          forkIllustration,
           endpoint,
           newGroupPath,
           projectFullPath,

app/views/projects/forks/new.html.haml

-- page_title _("Fork project")
+- page_title s_("ForkProject|Fork project")
 
-.row.gl-mt-3
-  .col-lg-3
-    %h4.gl-mt-0
-      = _("Fork project")
-    %p
-      = _("A fork is a copy of a project.")
-      %br
-      = _('Forking a repository allows you to make changes without affecting the original project.')
-  .col-lg-9
-    - if Feature.enabled?(:fork_project_form)
-      #fork-groups-mount-element{ data: { endpoint: new_project_fork_path(@project, format: :json),
+- if Feature.enabled?(:fork_project_form)
+  #fork-groups-mount-element{ data: { fork_illustration: image_path('illustrations/project-create-new-sm.svg'),
+    endpoint: new_project_fork_path(@project, format: :json),
     new_group_path: new_group_path,
     project_full_path: project_path(@project),
     visibility_help_path: help_page_path("public_access/public_access"),
@@ -19,10 +11,19 @@
     project_path: @project.path,
     project_description: @project.description,
     project_visibility: @project.visibility } }
-    - else
+- else
+  .row.gl-mt-3
+    .col-lg-3
+      %h4.gl-mt-0
+        = s_("ForkProject|Fork project")
+      %p
+        = s_("ForkProject|A fork is a copy of a project.")
+        %br
+        = s_('ForkProject|Forking a repository allows you to make changes without affecting the original project.')
+    .col-lg-9
       - if @own_namespace.present?
         .fork-thumbnail-container.js-fork-content
           %h5.gl-mt-0.gl-mb-0.gl-ml-3.gl-mr-3
-            = _("Select a namespace to fork the project")
+            = s_("ForkProject|Select a namespace to fork the project")
           = render 'fork_button', namespace: @own_namespace
       #fork-groups-mount-element{ data: { endpoint: new_project_fork_path(@project, format: :json) } }

locale/gitlab.pot

@@ -1315,9 +1315,6 @@ msgstr ""
 msgid "A file with '%{file_name}' already exists in %{branch} branch"
 msgstr ""
 
-msgid "A fork is a copy of a project."
-msgstr ""
-
 msgid "A group is a collection of several projects"
 msgstr ""
 
@@ -13303,6 +13300,9 @@ msgstr ""
 msgid "Fork project?"
 msgstr ""
 
+msgid "ForkProject|A fork is a copy of a project."
+msgstr ""
+
 msgid "ForkProject|Cancel"
 msgstr ""
 
@@ -13312,6 +13312,9 @@ msgstr ""
 msgid "ForkProject|Fork project"
 msgstr ""
 
+msgid "ForkProject|Forking a repository allows you to make changes without affecting the original project."
+msgstr ""
+
 msgid "ForkProject|Internal"
 msgstr ""
 
@@ -13327,6 +13330,9 @@ msgstr ""
 msgid "ForkProject|Select a namespace"
 msgstr ""
 
+msgid "ForkProject|Select a namespace to fork the project"
+msgstr ""
+
 msgid "ForkProject|The project can be accessed by any logged in user."
 msgstr ""
 
@@ -13345,9 +13351,6 @@ msgstr ""
 msgid "ForkedFromProjectPath|Forked from an inaccessible project"
 msgstr ""
 
-msgid "Forking a repository allows you to make changes without affecting the original project."
-msgstr ""
-
 msgid "Forking in progress"
 msgstr ""
 
@@ -26927,9 +26930,6 @@ msgstr ""
 msgid "Select a label"
 msgstr ""
 
-msgid "Select a namespace to fork the project"
-msgstr ""
-
 msgid "Select a new namespace"
 msgstr ""
 

spec/frontend/pages/projects/forks/new/components/app_spec.js

+import { shallowMount } from '@vue/test-utils';
+import App from '~/pages/projects/forks/new/components/app.vue';
+
+describe('App component', () => {
+  let wrapper;
+
+  const DEFAULT_PROPS = {
+    forkIllustration: 'illustrations/project-create-new-sm.svg',
+    endpoint: '/some/project-full-path/-/forks/new.json',
+    projectFullPath: '/some/project-full-path',
+    projectId: '10',
+    projectName: 'Project Name',
+    projectPath: 'project-name',
+    projectDescription: 'some project description',
+    projectVisibility: 'private',
+  };
+
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(App, {
+      propsData: {
+        ...DEFAULT_PROPS,
+        ...props,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('displays the correct svg illustration', () => {
+    expect(wrapper.find('img').attributes('src')).toBe('illustrations/project-create-new-sm.svg');
+  });
+
+  it('renders ForkForm component with prop', () => {
+    expect(wrapper.props()).toEqual(expect.objectContaining(DEFAULT_PROPS));
+  });
+});

spec/frontend/pages/projects/forks/new/components/fork_form_spec.js

@@ -30,9 +30,7 @@ describe('ForkForm component', () => {
 
   const DEFAULT_PROPS = {
     endpoint: '/some/project-full-path/-/forks/new.json',
-    newGroupPath: 'some/groups/path',
     projectFullPath: '/some/project-full-path',
-    visibilityHelpPath: 'some/visibility/help/path',
     projectId: '10',
     projectName: 'Project Name',
     projectPath: 'project-name',
@@ -46,6 +44,10 @@ describe('ForkForm component', () => {
 
   const createComponent = (props = {}, data = {}) => {
     wrapper = shallowMount(ForkForm, {
+      provide: {
+        newGroupPath: 'some/groups/path',
+        visibilityHelpPath: 'some/visibility/help/path',
+      },
       propsData: {
         ...DEFAULT_PROPS,
         ...props,