Commit 28d65da6 authored by Justin Ho's avatar Justin Ho Committed by Lukas Eipert

Add OverrideDropdown to toggle state

parent b16a0701
<script>
import { mapState } from 'vuex';
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
import OverrideDropdown from './override_dropdown.vue';
import ActiveToggle from './active_toggle.vue';
import JiraTriggerFields from './jira_trigger_fields.vue';
import JiraIssuesFields from './jira_issues_fields.vue';
......@@ -9,6 +12,7 @@ import DynamicField from './dynamic_field.vue';
export default {
name: 'IntegrationForm',
components: {
OverrideDropdown,
ActiveToggle,
JiraTriggerFields,
JiraIssuesFields,
......@@ -49,6 +53,7 @@ export default {
},
},
computed: {
...mapState(['overrideAvailable']),
isJira() {
return this.type === 'jira';
},
......@@ -61,6 +66,7 @@ export default {
<template>
<div>
<override-dropdown v-if="overrideAvailable" />
<active-toggle v-if="showActive" v-bind="activeToggleProps" />
<jira-trigger-fields v-if="isJira" v-bind="triggerFieldsProps" />
<trigger-fields v-else-if="triggerEvents.length" :events="triggerEvents" :type="type" />
......
<script>
import { __ } from '~/locale';
import { mapState } from 'vuex';
import { GlNewDropdown, GlNewDropdownItem } from '@gitlab/ui';
const options = [
{
value: 'instance',
text: __('Use instance level settings'),
},
{
value: 'project',
text: __('Use custom settings'),
},
];
const defaultOption = options[0];
const customOption = options[1];
export default {
name: 'OverrideDropdown',
components: {
GlNewDropdown,
GlNewDropdownItem,
},
props: {},
data() {
return {
options,
selected: defaultOption,
};
},
computed: {
...mapState(['override']),
},
methods: {
onClick(option) {
this.selected = option;
this.$store.dispatch('setOverride', option === customOption);
},
},
};
</script>
<template>
<div
class="gl-display-flex gl-justify-content-space-between gl-align-items-baseline gl-py-4 gl-mt-5 gl-mb-6 gl-border-t-1 gl-border-t-solid gl-border-b-1 gl-border-b-solid gl-border-gray-100"
>
<span>{{ __('This integration has multiple settings available.') }}</span>
<gl-new-dropdown :text="selected.text">
<gl-new-dropdown-item v-for="option in options" :key="option.value" @click="onClick(option)">
{{ option.text }}
</gl-new-dropdown-item>
</gl-new-dropdown>
</div>
</template>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment