port

2 files changed, 76 insertions, 1 deletions

diff --git a/app/assets/javascripts/pages/projects/settings/repository/show/index.js b/app/assets/javascripts/pages/projects/settings/repository/show/index.js
index ffc84dc106b..923cd9efe87 100644
--- a/app/assets/javascripts/pages/projects/settings/repository/show/index.js
+++ b/app/assets/javascripts/pages/projects/settings/repository/show/index.js
@@ -1,3 +1,9 @@
 import initForm from '../form';
+import PushPull from './push_pull';
 
-document.addEventListener('DOMContentLoaded', initForm);
+document.addEventListener('DOMContentLoaded', () => {
+  initForm();
+
+  const pushPullContainer = document.querySelector('.js-mirror-settings');
+  if (pushPullContainer) new PushPull(pushPullContainer).init();
+});
diff --git a/app/assets/javascripts/pages/projects/settings/repository/show/push_pull.js b/app/assets/javascripts/pages/projects/settings/repository/show/push_pull.js
new file mode 100644
index 00000000000..7ccba4a39b5
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/settings/repository/show/push_pull.js
@@ -0,0 +1,69 @@
+import $ from 'jquery';
+import _ from 'underscore';
+import { __ } from '~/locale';
+import Flash from '~/flash';
+import axios from '~/lib/utils/axios_utils';
+
+export default class PushPull {
+  constructor(container) {
+    this.$container = $(container);
+    this.$form = $('.js-mirror-form', this.$container);
+    this.$urlInput = $('.js-mirror-url', this.$form);
+    this.$protectedBranchesInput = $('.js-mirror-protected', this.$form);
+    this.mirrorEndpoint = this.$form.data('projectMirrorEndpoint');
+    this.$table = $('.js-mirrors-table-body', this.$container);
+  }
+
+  init() {
+    this.registerUpdateListeners();
+
+    this.$table.on('click', '.js-delete-mirror', this.deleteMirror.bind(this));
+  }
+
+  updateUrl() {
+    $('.js-mirror-url-hidden', this.$form).val(this.$urlInput.val());
+  }
+
+  updateProtectedBranches() {
+    const val = this.$protectedBranchesInput.get(0).checked
+      ? this.$protectedBranchesInput.val()
+      : '0';
+    $('.js-mirror-protected-hidden', this.$form).val(val);
+  }
+
+  registerUpdateListeners() {
+    this.$urlInput.on('change', () => this.updateUrl());
+    this.$protectedBranchesInput.on('change', () => this.updateProtectedBranches());
+  }
+
+  deleteMirror(event, existingPayload) {
+    const $target = $(event.currentTarget);
+    let payload = existingPayload;
+
+    debugger;
+
+    if (!payload) {
+      payload = {
+        project: {
+          remote_mirrors_attributes: {
+            id: $target.data('mirrorId'),
+            enabled: 0,
+          },
+        },
+      };
+    }
+
+    return axios
+      .put(this.mirrorEndpoint, payload)
+      .then(() => this.removeRow($target))
+      .catch(() => Flash(__('Failed to remove mirror.')));
+  }
+
+  /* eslint-disable class-methods-use-this */
+  removeRow($target) {
+    const row = $target.closest('tr');
+    $('.js-delete-mirror', row).tooltip('hide');
+    row.remove();
+  }
+  /* eslint-enable class-methods-use-this */
+}