Git migration UX (#12619)

* Initial work

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Implementation

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Fix gitlab and token cloning

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Imports and JS

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Fix test

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Linting

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Generate swagger

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Move mirror toggle and rename options

Signed-off-by: jolheiser <john.olheiser@gmail.com>

Co-authored-by: Lauris BH <lauris@nix.lv>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>

3 files changed, 59 insertions, 27 deletions

diff --git a/web_src/js/features/migration.js b/web_src/js/features/migration.js
new file mode 100644
index 0000000000..e4c306307f
--- /dev/null
+++ b/web_src/js/features/migration.js
@@ -0,0 +1,53 @@
+const $service = $('#service_type');
+const $user = $('#auth_username');
+const $pass = $('#auth_password');
+const $token = $('#auth_token');
+const $items = $('#migrate_items').find('.field');
+
+export default function initMigration() {
+  checkAuth();
+
+  $service.on('change', checkAuth);
+  $user.on('keyup', () => {checkItems(false)});
+  $pass.on('keyup', () => {checkItems(false)});
+  $token.on('keyup', () => {checkItems(true)});
+
+  const $cloneAddr = $('#clone_addr');
+  $cloneAddr.on('change', () => {
+    const $repoName = $('#repo_name');
+    if ($cloneAddr.val().length > 0 && $repoName.val().length === 0) { // Only modify if repo_name input is blank
+      $repoName.val($cloneAddr.val().match(/^(.*\/)?((.+?)(\.git)?)$/)[3]);
+    }
+  });
+}
+
+function checkAuth() {
+  const serviceType = $service.val();
+  const tokenAuth = $(`#service-${serviceType}`).data('token');
+
+  if (tokenAuth) {
+    $user.parent().addClass('disabled');
+    $pass.parent().addClass('disabled');
+    $token.parent().removeClass('disabled');
+  } else {
+    $user.parent().removeClass('disabled');
+    $pass.parent().removeClass('disabled');
+    $token.parent().addClass('disabled');
+  }
+
+  checkItems(tokenAuth);
+}
+
+function checkItems(tokenAuth) {
+  let enableItems;
+  if (tokenAuth) {
+    enableItems = $token.val() !== '';
+  } else {
+    enableItems = $user.val() !== '' || $pass.val() !== '';
+  }
+  if (enableItems && $service.val() > 1) {
+    $items.removeClass('disabled');
+  } else {
+    $items.addClass('disabled');
+  }
+}
diff --git a/web_src/js/index.js b/web_src/js/index.js
index a1b5035764..810493a7d6 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -8,6 +8,7 @@ import {htmlEscape} from 'escape-goat';
 import 'jquery.are-you-sure';
 import './vendor/semanticdropdown.js';
 
+import initMigration from './features/migration.js';
 import initContextPopups from './features/contextpopup.js';
 import initGitGraph from './features/gitgraph.js';
 import initClipboard from './features/clipboard.js';
@@ -1155,25 +1156,6 @@ async function initRepository() {
   }
 }
 
-function initMigration() {
-  const toggleMigrations = function () {
-    const authUserName = $('#auth_username').val();
-    const cloneAddr = $('#clone_addr').val();
-    if (!$('#mirror').is(':checked') && (authUserName && authUserName.length > 0) &&
-        (cloneAddr !== undefined && (cloneAddr.startsWith('https://github.com') || cloneAddr.startsWith('http://github.com') || cloneAddr.startsWith('http://gitlab.com') || cloneAddr.startsWith('https://gitlab.com')))) {
-      $('#migrate_items').show();
-    } else {
-      $('#migrate_items').hide();
-    }
-  };
-
-  toggleMigrations();
-
-  $('#clone_addr').on('input', toggleMigrations);
-  $('#auth_username').on('input', toggleMigrations);
-  $('#mirror').on('change', toggleMigrations);
-}
-
 function initPullRequestReview() {
   $('.show-outdated').on('click', function (e) {
     e.preventDefault();
@@ -2477,14 +2459,6 @@ $(document).ready(async () => {
     }
   }
 
-  const $cloneAddr = $('#clone_addr');
-  $cloneAddr.on('change', () => {
-    const $repoName = $('#repo_name');
-    if ($cloneAddr.val().length > 0 && $repoName.val().length === 0) { // Only modify if repo_name input is blank
-      $repoName.val($cloneAddr.val().match(/^(.*\/)?((.+?)(\.git)?)$/)[3]);
-    }
-  });
-
   // parallel init of async loaded features
   await Promise.all([
     attachTribute(document.querySelectorAll('#content, .emoji-input')),
diff --git a/web_src/less/_form.less b/web_src/less/_form.less
index 07c7cdfc8b..f8123b8f9b 100644
--- a/web_src/less/_form.less
+++ b/web_src/less/_form.less
@@ -180,6 +180,11 @@
         text-align: center;
       }
 
+      .selection.dropdown {
+        vertical-align: middle;
+        width: 50% !important;
+      }
+
       @media only screen and (max-width: 768px) {
         label,
         input,