summaryrefslogtreecommitdiff
path: root/app/assets
diff options
context:
space:
mode:
authorGitLab Bot <gitlab-bot@gitlab.com>2020-04-15 12:09:18 +0000
committerGitLab Bot <gitlab-bot@gitlab.com>2020-04-15 12:09:18 +0000
commitb7c735c8ac11b8182807070fc6f84f2606e15427 (patch)
treee74b4d25abb8bbf23546f001dd94515e2840a3a3 /app/assets
parent221b529789f4090341a825695aeb49b8df6dd11d (diff)
downloadgitlab-ce-b7c735c8ac11b8182807070fc6f84f2606e15427.tar.gz
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets')
-rw-r--r--app/assets/javascripts/integrations/edit/components/active_toggle.vue53
-rw-r--r--app/assets/javascripts/integrations/edit/event_hub.js3
-rw-r--r--app/assets/javascripts/integrations/edit/index.js30
-rw-r--r--app/assets/javascripts/integrations/integration_settings_form.js29
-rw-r--r--app/assets/javascripts/notes/components/note_header.vue17
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"