From 097feeb644ffb33bf6eb79f968b860fb094a6474 Mon Sep 17 00:00:00 2001
From: Justin Ho Tuan Duong <hduong@gitlab.com>
Date: Wed, 23 Apr 2025 14:49:28 +0200
Subject: [PATCH 1/3] Add repository fields to Import by URL

- Add repository URL, username, and password fields.
- Add logic to check the repository connection
by sending API request to backend endpoint.
---
 .../new_v2/components/import_by_url_form.vue  | 85 ++++++++++++++++++-
 .../javascripts/projects/new_v2/index.js      |  2 +
 app/views/projects/new.html.haml              |  3 +-
 3 files changed, 88 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/projects/new_v2/components/import_by_url_form.vue b/app/assets/javascripts/projects/new_v2/components/import_by_url_form.vue
index b0cd6b9e9018b7..e5b145fc80acb3 100644
--- a/app/assets/javascripts/projects/new_v2/components/import_by_url_form.vue
+++ b/app/assets/javascripts/projects/new_v2/components/import_by_url_form.vue
@@ -1,12 +1,51 @@
 <script>
-import { GlButton } from '@gitlab/ui';
+import { GlButton, GlFormGroup, GlFormInput, GlFormInputGroup } from '@gitlab/ui';
+import axios from '~/lib/utils/axios_utils';
+import { s__, sprintf } from '~/locale';
+
 import MultiStepFormTemplate from '~/vue_shared/components/multi_step_form_template.vue';
 
 export default {
   components: {
     GlButton,
+    GlFormGroup,
+    GlFormInput,
+    GlFormInputGroup,
     MultiStepFormTemplate,
   },
+  inject: ['importByUrlValidatePath'],
+  data() {
+    return {
+      repositoryUrl: '',
+      repositoryUsername: '',
+      repositoryPassword: '',
+      isCheckingConnection: false,
+    };
+  },
+  methods: {
+    async checkConnection() {
+      this.isCheckingConnection = true;
+      try {
+        const { data } = await axios.post(this.importByUrlValidatePath, {
+          url: this.repositoryUrl,
+          user: this.repositoryUsername,
+          password: this.repositoryPassword,
+        });
+
+        if (data.success) {
+          this.$toast.show(s__('Integrations|Connection successful.'));
+        } else {
+          this.$toast.show(
+            sprintf(s__('ProjectImport|Connection failed: %{error}'), { error: data.message }),
+          );
+        }
+      } catch (error) {
+        this.$toast.show(sprintf(s__('ProjectImport|Connection failed: %{error}'), { error }));
+      } finally {
+        this.isCheckingConnection = false;
+      }
+    },
+  },
 };
 </script>
 
@@ -15,6 +54,50 @@ export default {
     :title="s__('ProjectImport|Import repository by URL')"
     :current-step="3"
   >
+    <template #form>
+      <gl-form-group
+        :label="s__('ProjectImport|Git repository URL')"
+        label-for="repository-url"
+        :label-description="
+          s__('ProjectImport|The repository must be accessible over http://, https:// or git://')
+        "
+      >
+        <gl-form-input-group>
+          <gl-form-input
+            id="repository-url"
+            v-model="repositoryUrl"
+            :placeholder="s__('ProjectImport|https://gitlab.company.com/group/project.git')"
+          />
+          <template #append>
+            <gl-button :loading="isCheckingConnection" @click="checkConnection">
+              {{ __('Check connection') }}
+            </gl-button>
+          </template>
+        </gl-form-input-group>
+      </gl-form-group>
+
+      <div class="gl-grid gl-grid-cols-2 gl-gap-5">
+        <gl-form-group
+          :label="s__('ProjectImport|Username (optional)')"
+          label-for="repository-username"
+        >
+          <gl-form-input id="repository-username" v-model="repositoryUsername" autocomplete="off" />
+        </gl-form-group>
+
+        <gl-form-group
+          :label="s__('ProjectImport|Password (optional)')"
+          label-for="repository-password"
+        >
+          <gl-form-input
+            id="repository-password"
+            v-model="repositoryPassword"
+            type="password"
+            autocomplete="off"
+          />
+        </gl-form-group>
+      </div>
+    </template>
+
     <template #next>
       <gl-button
         category="primary"
diff --git a/app/assets/javascripts/projects/new_v2/index.js b/app/assets/javascripts/projects/new_v2/index.js
index 93dc4398371d65..6b7bbb2ae53ee2 100644
--- a/app/assets/javascripts/projects/new_v2/index.js
+++ b/app/assets/javascripts/projects/new_v2/index.js
@@ -48,6 +48,7 @@ export function initNewProjectForm() {
     importGitEnabled,
     importManifestEnabled,
     importManifestImportPath,
+    importByUrlValidatePath,
   } = el.dataset;
 
   const provide = {
@@ -87,6 +88,7 @@ export function initNewProjectForm() {
     importGitEnabled: parseBoolean(importGitEnabled),
     importManifestEnabled: parseBoolean(importManifestEnabled),
     importManifestImportPath,
+    importByUrlValidatePath,
   };
 
   return new Vue({
diff --git a/app/views/projects/new.html.haml b/app/views/projects/new.html.haml
index c28f5c1b84260d..4d2bb6b519d776 100644
--- a/app/views/projects/new.html.haml
+++ b/app/views/projects/new.html.haml
@@ -42,7 +42,8 @@
     import_gitea_import_path: new_import_gitea_path(namespace_id: @namespace&.id),
     import_git_enabled: git_import_enabled?.to_s,
     import_manifest_enabled: manifest_import_enabled?.to_s,
-    import_manifest_import_path: new_import_manifest_path(namespace_id: @namespace&.id) } }
+    import_manifest_import_path: new_import_manifest_path(namespace_id: @namespace&.id),
+    import_by_url_validate_path: import_url_validate_path } }
 - else
   .project-edit-container
     .project-edit-errors
-- 
GitLab


From 170596c10d5041ae912001372dd47ea6ecb8c802 Mon Sep 17 00:00:00 2001
From: Justin Ho Tuan Duong <hduong@gitlab.com>
Date: Wed, 23 Apr 2025 15:32:57 +0200
Subject: [PATCH 2/3] Add specs for new code

---
 .../new_v2/components/import_by_url_form.vue  |  15 ++-
 .../components/import_by_url_form_spec.js     | 103 +++++++++++++++++-
 2 files changed, 113 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/projects/new_v2/components/import_by_url_form.vue b/app/assets/javascripts/projects/new_v2/components/import_by_url_form.vue
index e5b145fc80acb3..235f70bc31f09d 100644
--- a/app/assets/javascripts/projects/new_v2/components/import_by_url_form.vue
+++ b/app/assets/javascripts/projects/new_v2/components/import_by_url_form.vue
@@ -66,10 +66,15 @@ export default {
           <gl-form-input
             id="repository-url"
             v-model="repositoryUrl"
+            data-testid="repository-url"
             :placeholder="s__('ProjectImport|https://gitlab.company.com/group/project.git')"
           />
           <template #append>
-            <gl-button :loading="isCheckingConnection" @click="checkConnection">
+            <gl-button
+              :loading="isCheckingConnection"
+              data-testid="check-connection"
+              @click="checkConnection"
+            >
               {{ __('Check connection') }}
             </gl-button>
           </template>
@@ -81,7 +86,12 @@ export default {
           :label="s__('ProjectImport|Username (optional)')"
           label-for="repository-username"
         >
-          <gl-form-input id="repository-username" v-model="repositoryUsername" autocomplete="off" />
+          <gl-form-input
+            id="repository-username"
+            v-model="repositoryUsername"
+            data-testid="repository-username"
+            autocomplete="off"
+          />
         </gl-form-group>
 
         <gl-form-group
@@ -91,6 +101,7 @@ export default {
           <gl-form-input
             id="repository-password"
             v-model="repositoryPassword"
+            data-testid="repository-password"
             type="password"
             autocomplete="off"
           />
diff --git a/spec/frontend/projects/new_v2/components/import_by_url_form_spec.js b/spec/frontend/projects/new_v2/components/import_by_url_form_spec.js
index 4de369d07c1424..7ed24dda9716d0 100644
--- a/spec/frontend/projects/new_v2/components/import_by_url_form_spec.js
+++ b/spec/frontend/projects/new_v2/components/import_by_url_form_spec.js
@@ -1,26 +1,123 @@
-import { mountExtended } from 'helpers/vue_test_utils_helper';
+import { GlFormInputGroup } from '@gitlab/ui';
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
+import { HTTP_STATUS_OK, HTTP_STATUS_INTERNAL_SERVER_ERROR } from '~/lib/utils/http_status';
+import waitForPromises from 'helpers/wait_for_promises';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import ImportByUrlForm from '~/projects/new_v2/components/import_by_url_form.vue';
 
+const $toast = {
+  show: jest.fn(),
+};
+
 describe('Import Project by URL Form', () => {
   let wrapper;
+  let mockAxios;
+
+  const mockImportByUrlValidatePath = '/import/url/validate';
 
   const createComponent = () => {
-    wrapper = mountExtended(ImportByUrlForm);
+    wrapper = shallowMountExtended(ImportByUrlForm, {
+      provide: {
+        importByUrlValidatePath: mockImportByUrlValidatePath,
+      },
+      mocks: {
+        $toast,
+      },
+      stubs: {
+        GlFormInputGroup,
+      },
+    });
   };
 
   beforeEach(() => {
+    mockAxios = new MockAdapter(axios);
     createComponent();
   });
 
+  afterEach(() => {
+    mockAxios.restore();
+  });
+
   const findNextButton = () => wrapper.findByTestId('import-project-by-url-next-button');
   const findBackButton = () => wrapper.findByTestId('import-project-by-url-back-button');
+  const findUrlInput = () => wrapper.findByTestId('repository-url');
+  const findUsernameInput = () => wrapper.findByTestId('repository-username');
+  const findPasswordInput = () => wrapper.findByTestId('repository-password');
+  const findCheckConnectionButton = () => wrapper.findByTestId('check-connection');
+
+  it('renders URL, username, password fields', () => {
+    expect(findUrlInput().exists()).toBe(true);
+    expect(findUsernameInput().exists()).toBe(true);
+    expect(findPasswordInput().exists()).toBe(true);
+  });
+
+  describe('"Check connection" functionality', () => {
+    const mockUrl = 'https://example.com/repo.git';
+    const mockUsername = 'mockuser';
+    const mockPassword = 'mockpass';
+
+    beforeEach(() => {
+      findUrlInput().vm.$emit('input', mockUrl);
+      findUsernameInput().vm.$emit('input', mockUsername);
+      findPasswordInput().vm.$emit('input', mockPassword);
+    });
+
+    describe('when connection is successful', () => {
+      beforeEach(async () => {
+        mockAxios.onPost(mockImportByUrlValidatePath).reply(HTTP_STATUS_OK, { success: true });
+
+        findCheckConnectionButton().vm.$emit('click');
+        await waitForPromises();
+      });
+
+      it('sends correct request', () => {
+        expect(mockAxios.history.post[0].data).toBe(
+          JSON.stringify({
+            url: mockUrl,
+            user: mockUsername,
+            password: mockPassword,
+          }),
+        );
+      });
+
+      it('shows success message when connection is successful', () => {
+        expect($toast.show).toHaveBeenCalledWith('Connection successful.');
+      });
+    });
+
+    describe('when connection fails', () => {
+      it('shows error message', async () => {
+        const errorMessage = 'Invalid credentials';
+        mockAxios
+          .onPost(mockImportByUrlValidatePath)
+          .reply(HTTP_STATUS_OK, { success: false, message: errorMessage });
+        findCheckConnectionButton().vm.$emit('click');
+
+        await waitForPromises();
+
+        expect($toast.show).toHaveBeenCalledWith(`Connection failed: ${errorMessage}`);
+      });
+    });
+
+    describe('when request fails', () => {
+      it('shows error message', async () => {
+        mockAxios.onPost(mockImportByUrlValidatePath).reply(HTTP_STATUS_INTERNAL_SERVER_ERROR);
+        findCheckConnectionButton().vm.$emit('click');
+
+        await waitForPromises();
+
+        expect($toast.show).toHaveBeenCalledWith(expect.stringContaining('Connection failed'));
+      });
+    });
+  });
 
   it('renders the option to move to Next Step', () => {
     expect(findNextButton().text()).toBe('Next step');
   });
 
   it(`emits the "back" event when the back button is clicked`, () => {
-    findBackButton().trigger('click');
+    findBackButton().vm.$emit('click');
     expect(wrapper.emitted('back')).toHaveLength(1);
   });
 });
-- 
GitLab


From b389eee898d706a371f6568ae0118065e41914c5 Mon Sep 17 00:00:00 2001
From: Justin Ho Tuan Duong <hduong@gitlab.com>
Date: Wed, 23 Apr 2025 15:53:30 +0200
Subject: [PATCH 3/3] Update some strings

---
 .../new_v2/components/import_by_url_form.vue    | 17 ++++++-----------
 locale/gitlab.pot                               |  9 +++++++++
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/app/assets/javascripts/projects/new_v2/components/import_by_url_form.vue b/app/assets/javascripts/projects/new_v2/components/import_by_url_form.vue
index 235f70bc31f09d..6d69093fa84e43 100644
--- a/app/assets/javascripts/projects/new_v2/components/import_by_url_form.vue
+++ b/app/assets/javascripts/projects/new_v2/components/import_by_url_form.vue
@@ -46,6 +46,7 @@ export default {
       }
     },
   },
+  repositoryUrlPlaceholder: 'https://gitlab.company.com/group/project.git',
 };
 </script>
 
@@ -56,7 +57,7 @@ export default {
   >
     <template #form>
       <gl-form-group
-        :label="s__('ProjectImport|Git repository URL')"
+        :label="__('Git repository URL')"
         label-for="repository-url"
         :label-description="
           s__('ProjectImport|The repository must be accessible over http://, https:// or git://')
@@ -67,7 +68,7 @@ export default {
             id="repository-url"
             v-model="repositoryUrl"
             data-testid="repository-url"
-            :placeholder="s__('ProjectImport|https://gitlab.company.com/group/project.git')"
+            :placeholder="$options.repositoryUrlPlaceholder"
           />
           <template #append>
             <gl-button
@@ -75,17 +76,14 @@ export default {
               data-testid="check-connection"
               @click="checkConnection"
             >
-              {{ __('Check connection') }}
+              {{ s__('ProjectImport|Check connection') }}
             </gl-button>
           </template>
         </gl-form-input-group>
       </gl-form-group>
 
       <div class="gl-grid gl-grid-cols-2 gl-gap-5">
-        <gl-form-group
-          :label="s__('ProjectImport|Username (optional)')"
-          label-for="repository-username"
-        >
+        <gl-form-group :label="__('Username (optional)')" label-for="repository-username">
           <gl-form-input
             id="repository-username"
             v-model="repositoryUsername"
@@ -94,10 +92,7 @@ export default {
           />
         </gl-form-group>
 
-        <gl-form-group
-          :label="s__('ProjectImport|Password (optional)')"
-          label-for="repository-password"
-        >
+        <gl-form-group :label="__('Password (optional)')" label-for="repository-password">
           <gl-form-input
             id="repository-password"
             v-model="repositoryPassword"
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index b9921e640a4ca3..67b20f7dd82dd5 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -47125,6 +47125,12 @@ msgstr ""
 msgid "ProjectImport|Bitbucket Server"
 msgstr ""
 
+msgid "ProjectImport|Check connection"
+msgstr ""
+
+msgid "ProjectImport|Connection failed: %{error}"
+msgstr ""
+
 msgid "ProjectImport|FogBugz"
 msgstr ""
 
@@ -47146,6 +47152,9 @@ msgstr ""
 msgid "ProjectImport|Project URL"
 msgstr ""
 
+msgid "ProjectImport|The repository must be accessible over http://, https:// or git://"
+msgstr ""
+
 msgid "ProjectMaintenance|Afterwards, run housekeeping manually to remove old versions of the file from Git history."
 msgstr ""
 
-- 
GitLab