js: webhooks module refactoring

app/assets/javascripts/main.js

@@ -27,6 +27,7 @@ import './modules/dashboard';
 import './modules/repositories';
 import './modules/namespaces';
 import './modules/teams';
+import './modules/webhooks';
 
 import { setTimeOutAlertDelay, refreshFloatAlertPosition } from './utils/effects';
 

app/assets/javascripts/modules/webhooks/components/edit-webhook-form.js

@@ -0,0 +1,22 @@
+import BaseComponent from '~/base/component';
+
+const WEBHOOK_FORM_FIELDS = 'input.form-control, textarea';
+
+// EditWebhookForm component refers to the webhook form
+class EditWebhookForm extends BaseComponent {
+  elements() {
+    this.$fields = this.$el.find(WEBHOOK_FORM_FIELDS);
+  }
+
+  toggle() {
+    this.$el.toggle();
+
+    const visible = this.$el.is(':visible');
+
+    if (visible) {
+      this.$fields.first().focus();
+    }
+  }
+}
+
+export default EditWebhookForm;

app/assets/javascripts/modules/webhooks/components/new-webhook-form.js

@@ -0,0 +1,25 @@
+import BaseComponent from '~/base/component';
+
+const WEBHOOK_FORM_FIELDS = 'input.form-control, textarea';
+
+// NewWebhookForm component refers to the new webhook form
+class NewWebhookForm extends BaseComponent {
+  elements() {
+    this.$fields = this.$el.find(WEBHOOK_FORM_FIELDS);
+  }
+
+  toggle() {
+    this.$el.toggle(400, 'swing', () => {
+      const visible = this.$el.is(':visible');
+
+      if (visible) {
+        this.$fields.first().focus();
+      }
+
+      this.$fields.val('');
+      layout_resizer();
+    });
+  }
+}
+
+export default NewWebhookForm;

app/assets/javascripts/modules/webhooks/components/webhook-details.js

@@ -0,0 +1,34 @@
+import BaseComponent from '~/base/component';
+
+import EditWebhookForm from './edit-webhook-form';
+
+const TOGGLE_LINK = '.edit-webhook-link';
+const EDIT_WEBHOOK_FORM = '.edit-webhook-form';
+const WEBHOOK_INFORMATION = '.webhook_information';
+
+// WebhooksDetails component handles details panel
+// and edit webhook form
+class WebhooksDetails extends BaseComponent {
+  elements() {
+    this.$toggle = this.$el.find(TOGGLE_LINK);
+    this.$form = this.$el.find(EDIT_WEBHOOK_FORM);
+    this.$webhookInformation = this.$el.find(WEBHOOK_INFORMATION);
+  }
+
+  events() {
+    this.$toggle.on('click', () => this.onEditClick());
+  }
+
+  mount() {
+    this.form = new EditWebhookForm(this.$form);
+  }
+
+  onEditClick() {
+    this.$webhookInformation.toggle();
+    this.form.toggle();
+
+    layout_resizer();
+  }
+}
+
+export default WebhooksDetails;

app/assets/javascripts/modules/webhooks/components/webhooks-panel.js

@@ -0,0 +1,35 @@
+import BaseComponent from '~/base/component';
+
+import NewWebhookForm from './new-webhook-form';
+
+const TOGGLE_LINK = '#add_webhook_btn';
+const TOGGLE_LINK_ICON = `${TOGGLE_LINK} i`;
+const NEW_WEBHOOK_FORM = '#add_webhook_form';
+
+// WebhooksPanel component that lists normal webhook
+// and contains new webhook form.
+class WebhooksPanel extends BaseComponent {
+  elements() {
+    this.$toggle = this.$el.find(TOGGLE_LINK);
+    this.$toggleIcon = this.$el.find(TOGGLE_LINK_ICON);
+    this.$form = this.$el.find(NEW_WEBHOOK_FORM);
+  }
+
+  events() {
+    this.$el.on('click', TOGGLE_LINK, e => this.onToggleLinkClick(e));
+  }
+
+  mount() {
+    this.newForm = new NewWebhookForm(this.$form);
+  }
+
+  onToggleLinkClick() {
+    const wasVisible = this.$form.is(':visible');
+
+    this.newForm.toggle();
+    this.$toggleIcon.toggleClass('fa-minus-circle', !wasVisible);
+    this.$toggleIcon.toggleClass('fa-plus-circle', wasVisible);
+  }
+}
+
+export default WebhooksPanel;

app/assets/javascripts/modules/webhooks/index.js

@@ -0,0 +1,20 @@
+import WebhookShowPage from './pages/show';
+import WebhooksIndexPage from './pages/index';
+
+const WEBHOOK_SHOW_ROUTE = 'webhooks/show';
+const WEBHOOK_INDEX_ROUTE = 'webhooks/index';
+
+$(() => {
+  const $body = $('body');
+  const route = $body.data('route');
+
+  if (route === WEBHOOK_SHOW_ROUTE) {
+    // eslint-disable-next-line
+    new WebhookShowPage($body);
+  }
+
+  if (route === WEBHOOK_INDEX_ROUTE) {
+     // eslint-disable-next-line
+      new WebhooksIndexPage($body);
+  }
+});

app/assets/javascripts/modules/webhooks/pages/index.js

@@ -0,0 +1,20 @@
+import BaseComponent from '~/base/component';
+
+import WebhooksPanel from '../components/webhooks-panel';
+
+const WEBHOOKS_PANEL = '.webhooks-wrapper';
+
+// WebhooksIndexPage component responsible to instantiate
+// the namespace's webhooks index page components and
+// handle interactions.
+class WebhooksIndexPage extends BaseComponent {
+  elements() {
+    this.$webhooksPanel = this.$el.find(WEBHOOKS_PANEL);
+  }
+
+  mount() {
+    this.webhooksPanel = new WebhooksPanel(this.$webhooksPanel);
+  }
+}
+
+export default WebhooksIndexPage;

app/assets/javascripts/modules/webhooks/pages/show.js

@@ -0,0 +1,19 @@
+import BaseComponent from '~/base/component';
+
+import WebhookDetails from '../components/webhook-details';
+
+const WEBHOOK_DETAILS = '.webhook-details';
+
+// WebhookShowPage component responsible to instantiate
+// the user's edit page components and handle interactions.
+class WebhookShowPage extends BaseComponent {
+  elements() {
+    this.$details = this.$el.find(WEBHOOK_DETAILS);
+  }
+
+  mount() {
+    this.details = new WebhookDetails(this.$details);
+  }
+}
+
+export default WebhookShowPage;

app/assets/javascripts/teams.js

@@ -37,33 +37,6 @@ jQuery(function ($) {
     }
   });
 
-  $('#add_webhook_btn').unbind('click').on('click', function () {
-    $('#webhook_url').val('');
-    $('#webhook_username').val('');
-    $('#webhook_password').val('');
-
-    $('#add_webhook_form').toggle(400, 'swing', function () {
-      if ($('#add_webhook_form').is(':visible')) {
-        $('#add_webhook_btn i').addClass('fa-minus-circle');
-        $('#add_webhook_btn i').removeClass('fa-plus-circle');
-        $('#webhook_url').focus();
-      } else {
-        $('#add_webhook_btn i').removeClass('fa-minus-circle');
-        $('#add_webhook_btn i').addClass('fa-plus-circle');
-      }
-      layout_resizer();
-    });
-  });
-
-  $('body').on('click', '.btn-edit-webhook', function (event) {
-    if ($(this).hasClass('button_edit_webhook')) {
-      $('.webhook_information').toggle();
-      $('#update_webhook_' + event.currentTarget.value).toggle();
-      $('#webhook_url').focus();
-      layout_resizer();
-    }
-  });
-
   $('#add_webhook_header_btn').unbind('click').on('click', function () {
     $('#webhook_header_name').val('');
     $('#webhook_header_value').val('');

app/views/webhooks/_webhook.html.slim

@@ -4,11 +4,12 @@ tr id="webhook_#{webhook.id}"
   td= webhook.content_type
   td
     - if can_manage_namespace?(@namespace)
-      a.btn.btn-default[data-remote="true"
+      a.btn.btn-default.toggle[
+        data-remote="true"
         data-method="put"
         rel="nofollow"
         href=url_for(toggle_enabled_namespace_webhook_path(namespace, webhook))
-        ]
+      ]
         - if webhook.enabled?
           i.fa.fa-lg class="fa-toggle-on"
         - else
@@ -20,7 +21,7 @@ tr id="webhook_#{webhook.id}"
         i.fa.fa-lg class="fa-toggle-off"
   - if can_manage_namespace?(@namespace)
     td
-      a[class="btn btn-default"
+      a[class="btn btn-default delete-webhook-btn"
         data-placement="left"
         data-toggle="popover"
         data-title="Please confirm"

app/views/webhooks/create.js.erb

@@ -1,9 +1,9 @@
 <% if @webhook.errors.any? %>
-  $('#alert p').html("<%= escape_javascript(@webhook.errors.full_messages.join('<br/>')) %>");
-  $('#alert').fadeIn();
+  $('#float-alert p').html("<%= escape_javascript(@webhook.errors.full_messages.join('<br/>')) %>");
+  $('#float-alert').fadeIn(setTimeOutAlertDelay());
 <% else %>
-  $('#alert p').html("Webhook '<%= @webhook.host %>' has been created successfully");
-  $('#alert').fadeIn();
+  $('#float-alert p').html("Webhook '<%= @webhook.host %>' has been created successfully");
+  $('#float-alert').fadeIn(setTimeOutAlertDelay());
 
   $('#add_webhook_form').fadeOut();
   $('#add_webhook_btn i').addClass("fa-plus-circle")

app/views/webhooks/destroy.js.erb

@@ -1,8 +1,8 @@
 <% if @webhook.errors.any? %>
-  $('#alert p').html("<%= escape_javascript(@webhook.errors.full_messages.join('<br/>')) %>");
-  $('#alert').fadeIn();
+  $('#float-alert p').html("<%= escape_javascript(@webhook.errors.full_messages.join('<br/>')) %>");
+  $('#float-alert').fadeIn(setTimeOutAlertDelay());
 <% else %>
   $("#webhook_<%= @webhook.id %>").remove();
-  $('#alert p').html("Webhook '<%= @webhook.host %>' has been removed successfully");
-  $('#alert').fadeIn();
+  $('#float-alert p').html("Webhook '<%= @webhook.host %>' has been removed successfully");
+  $('#float-alert').fadeIn(setTimeOutAlertDelay());
 <% end %>