Convert fork info into Vue and add illustration

Part of issue: https://gitlab.com/gitlab-org/gitlab/-/issues/15013

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,
+    },
+    newGroupPath: {
+      type: String,
+      required: true,
+    },
+    projectFullPath: {
+      type: String,
+      required: true,
+    },
+    visibilityHelpPath: {
+      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"
+        :new-group-path="newGroupPath"
+        :project-full-path="projectFullPath"
+        :visibility-help-path="visibilityHelpPath"
+        :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/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,
@@ -21,8 +22,9 @@ if (gon.features.forkProjectForm) {
   new Vue({
     el: mountElement,
     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 _("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),
-        new_group_path: new_group_path,
-        project_full_path: project_path(@project),
-        visibility_help_path: help_page_path("public_access/public_access"),
-        project_id: @project.id,
-        project_name: @project.name,
-        project_path: @project.path,
-        project_description: @project.description,
-        project_visibility: @project.visibility } }
-    - else
+- 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"),
+    project_id: @project.id,
+    project_name: @project.name,
+    project_path: @project.path,
+    project_description: @project.description,
+    project_visibility: @project.visibility } }
+- else
+  .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 @own_namespace.present?
         .fork-thumbnail-container.js-fork-content
           %h5.gl-mt-0.gl-mb-0.gl-ml-3.gl-mr-3

locale/gitlab.pot

@@ -13276,6 +13276,9 @@ msgstr ""
 msgid "Fork project?"
 msgstr ""
 
+msgid "ForkProject|A fork is a copy of a project."
+msgstr ""
+
 msgid "ForkProject|Cancel"
 msgstr ""
 
@@ -13285,6 +13288,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 ""
 

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';
+
+jest.mock('~/flash');
+
+describe('App component', () => {
+  let wrapper;
+
+  const DEFAULT_PROPS = {
+    forkIllustration: 'illustrations/project-create-new-sm.svg',
+    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',
+    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));
+  });
+});