Add latest changes from gitlab-org/gitlab@master

5 files changed, 117 insertions, 15 deletions

diff --git a/app/assets/javascripts/integrations/edit/components/active_toggle.vue b/app/assets/javascripts/integrations/edit/components/active_toggle.vue
new file mode 100644
index 00000000000..2b0aa2586e4
--- /dev/null
+++ b/app/assets/javascripts/integrations/edit/components/active_toggle.vue
@@ -0,0 +1,53 @@
+<script>
+import eventHub from '../event_hub';
+import { GlToggle } from '@gitlab/ui';
+
+export default {
+  name: 'ActiveToggle',
+  components: {
+    GlToggle,
+  },
+  props: {
+    initialActivated: {
+      type: Boolean,
+      required: true,
+    },
+    disabled: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      activated: this.initialActivated,
+    };
+  },
+  mounted() {
+    // Initialize view
+    this.$nextTick(() => {
+      this.onToggle(this.activated);
+    });
+  },
+  methods: {
+    onToggle(e) {
+      eventHub.$emit('toggle', e);
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="form-group row" role="group">
+      <label for="service[active]" class="col-form-label col-sm-2">{{ __('Active') }}</label>
+      <div class="col-sm-10 pt-1">
+        <gl-toggle
+          v-model="activated"
+          :disabled="disabled"
+          name="service[active]"
+          @change="onToggle"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/integrations/edit/event_hub.js b/app/assets/javascripts/integrations/edit/event_hub.js
new file mode 100644
index 00000000000..0948c2e5352
--- /dev/null
+++ b/app/assets/javascripts/integrations/edit/event_hub.js
@@ -0,0 +1,3 @@
+import Vue from 'vue';
+
+export default new Vue();
diff --git a/app/assets/javascripts/integrations/edit/index.js b/app/assets/javascripts/integrations/edit/index.js
new file mode 100644
index 00000000000..a2ba581d429
--- /dev/null
+++ b/app/assets/javascripts/integrations/edit/index.js
@@ -0,0 +1,30 @@
+import Vue from 'vue';
+import { parseBoolean } from '~/lib/utils/common_utils';
+import ActiveToggle from './components/active_toggle.vue';
+
+export default el => {
+  if (!el) {
+    return null;
+  }
+
+  const { showActive: showActiveStr, activated: activatedStr, disabled: disabledStr } = el.dataset;
+  const showActive = parseBoolean(showActiveStr);
+  const activated = parseBoolean(activatedStr);
+  const disabled = parseBoolean(disabledStr);
+
+  if (!showActive) {
+    return null;
+  }
+
+  return new Vue({
+    el,
+    render(createElement) {
+      return createElement(ActiveToggle, {
+        props: {
+          initialActivated: activated,
+          disabled,
+        },
+      });
+    },
+  });
+};
diff --git a/app/assets/javascripts/integrations/integration_settings_form.js b/app/assets/javascripts/integrations/integration_settings_form.js
index 1c9b94ade8a..3067f4090b1 100644
--- a/app/assets/javascripts/integrations/integration_settings_form.js
+++ b/app/assets/javascripts/integrations/integration_settings_form.js
@@ -2,28 +2,33 @@ import $ from 'jquery';
 import axios from '../lib/utils/axios_utils';
 import flash from '../flash';
 import { __ } from '~/locale';
+import initForm from './edit';
+import eventHub from './edit/event_hub';
 
 export default class IntegrationSettingsForm {
   constructor(formSelector) {
     this.$form = $(formSelector);
+    this.formActive = false;
 
     // Form Metadata
     this.canTestService = this.$form.data('canTest');
     this.testEndPoint = this.$form.data('testUrl');
 
     // Form Child Elements
-    this.$serviceToggle = this.$form.find('#service_active');
     this.$submitBtn = this.$form.find('button[type="submit"]');
     this.$submitBtnLoader = this.$submitBtn.find('.js-btn-spinner');
     this.$submitBtnLabel = this.$submitBtn.find('.js-btn-label');
   }
 
   init() {
-    // Initialize View
-    this.toggleServiceState(this.$serviceToggle.is(':checked'));
+    // Init Vue component
+    initForm(document.querySelector('.js-vue-integration-settings'));
+    eventHub.$on('toggle', active => {
+      this.formActive = active;
+      this.handleServiceToggle();
+    });
 
     // Bind Event Listeners
-    this.$serviceToggle.on('change', e => this.handleServiceToggle(e));
     this.$submitBtn.on('click', e => this.handleSettingsSave(e));
   }
 
@@ -31,7 +36,7 @@ export default class IntegrationSettingsForm {
     // Check if Service is marked active, as if not marked active,
     // We can skip testing it and directly go ahead to allow form to
     // be submitted
-    if (!this.$serviceToggle.is(':checked')) {
+    if (!this.formActive) {
       return;
     }
 
@@ -47,16 +52,16 @@ export default class IntegrationSettingsForm {
     }
   }
 
-  handleServiceToggle(e) {
-    this.toggleServiceState($(e.currentTarget).is(':checked'));
+  handleServiceToggle() {
+    this.toggleServiceState();
   }
 
   /**
    * Change Form's validation enforcement based on service status (active/inactive)
    */
-  toggleServiceState(serviceActive) {
-    this.toggleSubmitBtnLabel(serviceActive);
-    if (serviceActive) {
+  toggleServiceState() {
+    this.toggleSubmitBtnLabel();
+    if (this.formActive) {
       this.$form.removeAttr('novalidate');
     } else if (!this.$form.attr('novalidate')) {
       this.$form.attr('novalidate', 'novalidate');
@@ -66,10 +71,10 @@ export default class IntegrationSettingsForm {
   /**
    * Toggle Submit button label based on Integration status and ability to test service
    */
-  toggleSubmitBtnLabel(serviceActive) {
+  toggleSubmitBtnLabel() {
     let btnLabel = __('Save changes');
 
-    if (serviceActive && this.canTestService) {
+    if (this.formActive && this.canTestService) {
       btnLabel = __('Test settings and save changes');
     }
 
diff --git a/app/assets/javascripts/notes/components/note_header.vue b/app/assets/javascripts/notes/components/note_header.vue
index 9cb592ceedb..f82b3554cac 100644
--- a/app/assets/javascripts/notes/components/note_header.vue
+++ b/app/assets/javascripts/notes/components/note_header.vue
@@ -39,13 +39,18 @@ export default {
       required: false,
       default: true,
     },
+    showSpinner: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   computed: {
     toggleChevronClass() {
       return this.expanded ? 'fa-chevron-up' : 'fa-chevron-down';
     },
     noteTimestampLink() {
-      return `#note_${this.noteId}`;
+      return this.noteId ? `#note_${this.noteId}` : undefined;
     },
     hasAuthor() {
       return this.author && Object.keys(this.author).length;
@@ -60,7 +65,9 @@ export default {
       this.$emit('toggleHandler');
     },
     updateTargetNoteHash() {
-      this.setTargetNoteHash(this.noteTimestampLink);
+      if (this.$store) {
+        this.setTargetNoteHash(this.noteTimestampLink);
+      }
     },
   },
 };
@@ -101,16 +108,20 @@ export default {
           <template v-if="actionText">{{ actionText }}</template>
         </span>
         <a
-          ref="noteTimestamp"
+          v-if="noteTimestampLink"
+          ref="noteTimestampLink"
           :href="noteTimestampLink"
           class="note-timestamp system-note-separator"
           @click="updateTargetNoteHash"
         >
           <time-ago-tooltip :time="createdAt" tooltip-placement="bottom" />
         </a>
+        <time-ago-tooltip v-else ref="noteTimestamp" :time="createdAt" tooltip-placement="bottom" />
       </template>
       <slot name="extra-controls"></slot>
       <i
+        v-if="showSpinner"
+        ref="spinner"
         class="fa fa-spinner fa-spin editing-spinner"
         :aria-label="__('Comment is being updated')"
         aria-hidden="true"