diff options
Diffstat (limited to 'app/assets/javascripts/integrations')
15 files changed, 456 insertions, 86 deletions
diff --git a/app/assets/javascripts/integrations/edit/components/active_toggle.vue b/app/assets/javascripts/integrations/edit/components/active_toggle.vue index dc89e139320..a3087c8958e 100644 --- a/app/assets/javascripts/integrations/edit/components/active_toggle.vue +++ b/app/assets/javascripts/integrations/edit/components/active_toggle.vue @@ -1,4 +1,5 @@ <script> +import { mapGetters } from 'vuex'; import eventHub from '../event_hub'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { GlFormGroup, GlToggle } from '@gitlab/ui'; @@ -21,6 +22,9 @@ export default { activated: this.initialActivated, }; }, + computed: { + ...mapGetters(['isInheriting']), + }, mounted() { // Initialize view this.$nextTick(() => { @@ -42,6 +46,7 @@ export default { v-model="activated" name="service[active]" class="gl-display-block gl-line-height-0" + :disabled="isInheriting" @change="onToggle" /> </gl-form-group> @@ -50,7 +55,12 @@ export default { <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" name="service[active]" @change="onToggle" /> + <gl-toggle + v-model="activated" + name="service[active]" + :disabled="isInheriting" + @change="onToggle" + /> </div> </div> </div> diff --git a/app/assets/javascripts/integrations/edit/components/dynamic_field.vue b/app/assets/javascripts/integrations/edit/components/dynamic_field.vue index 29318d6aaa8..6053d11e6da 100644 --- a/app/assets/javascripts/integrations/edit/components/dynamic_field.vue +++ b/app/assets/javascripts/integrations/edit/components/dynamic_field.vue @@ -1,4 +1,5 @@ <script> +import { mapGetters } from 'vuex'; import eventHub from '../event_hub'; import { capitalize, lowerCase, isEmpty } from 'lodash'; import { __, sprintf } from '~/locale'; @@ -59,6 +60,7 @@ export default { }; }, computed: { + ...mapGetters(['isInheriting']), isCheckbox() { return this.type === 'checkbox'; }, @@ -106,10 +108,12 @@ export default { return { id: this.fieldId, name: this.fieldName, + state: this.valid, + readonly: this.isInheriting, }; }, valid() { - return !this.required || !isEmpty(this.model) || !this.validated; + return !this.required || !isEmpty(this.model) || this.isNonEmptyPassword || !this.validated; }, }, created() { @@ -135,15 +139,21 @@ export default { :label-for="fieldId" :invalid-feedback="__('This field is required.')" :state="valid" - :description="help" > + <template #description> + <span v-html="help"></span> + </template> + <template v-if="isCheckbox"> - <input :name="fieldName" type="hidden" value="false" /> - <gl-form-checkbox v-model="model" v-bind="sharedProps"> + <input :name="fieldName" type="hidden" :value="model || false" /> + <gl-form-checkbox :id="fieldId" v-model="model" :disabled="isInheriting"> {{ humanizedTitle }} </gl-form-checkbox> </template> - <gl-form-select v-else-if="isSelect" v-model="model" v-bind="sharedProps" :options="options" /> + <template v-else-if="isSelect"> + <input type="hidden" :name="fieldName" :value="model" /> + <gl-form-select :id="fieldId" v-model="model" :options="options" :disabled="isInheriting" /> + </template> <gl-form-textarea v-else-if="isTextarea" v-model="model" @@ -159,6 +169,7 @@ export default { autocomplete="new-password" :placeholder="placeholder" :required="passwordRequired" + :data-qa-selector="`${fieldId}_field`" /> <gl-form-input v-else @@ -167,6 +178,7 @@ export default { :type="type" :placeholder="placeholder" :required="required" + :data-qa-selector="`${fieldId}_field`" /> </gl-form-group> </template> diff --git a/app/assets/javascripts/integrations/edit/components/integration_form.vue b/app/assets/javascripts/integrations/edit/components/integration_form.vue index ef7a4d44b20..5088664c3bd 100644 --- a/app/assets/javascripts/integrations/edit/components/integration_form.vue +++ b/app/assets/javascripts/integrations/edit/components/integration_form.vue @@ -1,58 +1,74 @@ <script> +import { mapState, mapActions, mapGetters } 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'; import TriggerFields from './trigger_fields.vue'; import DynamicField from './dynamic_field.vue'; export default { name: 'IntegrationForm', components: { + OverrideDropdown, ActiveToggle, JiraTriggerFields, + JiraIssuesFields, TriggerFields, DynamicField, }, - props: { - activeToggleProps: { - type: Object, - required: true, - }, - showActive: { - type: Boolean, - required: true, - }, - triggerFieldsProps: { - type: Object, - required: true, - }, - triggerEvents: { - type: Array, - required: false, - default: () => [], - }, - fields: { - type: Array, - required: false, - default: () => [], - }, - type: { - type: String, - required: true, - }, - }, + mixins: [glFeatureFlagsMixin()], computed: { + ...mapGetters(['currentKey', 'propsSource']), + ...mapState(['adminState', 'override']), isJira() { - return this.type === 'jira'; + return this.propsSource.type === 'jira'; }, + showJiraIssuesFields() { + return this.isJira && this.glFeatures.jiraIssuesIntegration; + }, + }, + methods: { + ...mapActions(['setOverride']), }, }; </script> <template> <div> - <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" /> - <dynamic-field v-for="field in fields" :key="field.name" v-bind="field" /> + <override-dropdown + v-if="adminState !== null" + :inherit-from-id="adminState.id" + :override="override" + @change="setOverride" + /> + <active-toggle + v-if="propsSource.showActive" + :key="`${currentKey}-active-toggle`" + v-bind="propsSource.activeToggleProps" + /> + <jira-trigger-fields + v-if="isJira" + :key="`${currentKey}-jira-trigger-fields`" + v-bind="propsSource.triggerFieldsProps" + /> + <trigger-fields + v-else-if="propsSource.triggerEvents.length" + :key="`${currentKey}-trigger-fields`" + :events="propsSource.triggerEvents" + :type="propsSource.type" + /> + <dynamic-field + v-for="field in propsSource.fields" + :key="`${currentKey}-${field.name}`" + v-bind="field" + /> + <jira-issues-fields + v-if="showJiraIssuesFields" + :key="`${currentKey}-jira-issues-fields`" + v-bind="propsSource.jiraIssuesProps" + /> </div> </template> diff --git a/app/assets/javascripts/integrations/edit/components/jira_issues_fields.vue b/app/assets/javascripts/integrations/edit/components/jira_issues_fields.vue new file mode 100644 index 00000000000..5444cd5a712 --- /dev/null +++ b/app/assets/javascripts/integrations/edit/components/jira_issues_fields.vue @@ -0,0 +1,151 @@ +<script> +import eventHub from '../event_hub'; +import { + GlFormGroup, + GlFormCheckbox, + GlFormInput, + GlSprintf, + GlLink, + GlButton, + GlCard, +} from '@gitlab/ui'; + +export default { + name: 'JiraIssuesFields', + components: { + GlFormGroup, + GlFormCheckbox, + GlFormInput, + GlSprintf, + GlLink, + GlButton, + GlCard, + }, + props: { + showJiraIssuesIntegration: { + type: Boolean, + required: false, + default: false, + }, + initialEnableJiraIssues: { + type: Boolean, + required: false, + default: null, + }, + initialProjectKey: { + type: String, + required: false, + default: null, + }, + upgradePlanPath: { + type: String, + required: false, + default: null, + }, + editProjectPath: { + type: String, + required: false, + default: null, + }, + }, + data() { + return { + enableJiraIssues: this.initialEnableJiraIssues, + projectKey: this.initialProjectKey, + validated: false, + }; + }, + computed: { + validProjectKey() { + return !this.enableJiraIssues || Boolean(this.projectKey) || !this.validated; + }, + }, + created() { + eventHub.$on('validateForm', this.validateForm); + }, + beforeDestroy() { + eventHub.$off('validateForm', this.validateForm); + }, + methods: { + validateForm() { + this.validated = true; + }, + }, +}; +</script> + +<template> + <div> + <gl-form-group + :label="s__('JiraService|View Jira issues in GitLab')" + label-for="jira-issue-settings" + > + <div id="jira-issue-settings"> + <p> + {{ + s__( + 'JiraService|Work on Jira issues without leaving GitLab. Adds a Jira menu to access your list of Jira issues and view any issue as read-only.', + ) + }} + </p> + <template v-if="showJiraIssuesIntegration"> + <input name="service[issues_enabled]" type="hidden" :value="enableJiraIssues || false" /> + <gl-form-checkbox v-model="enableJiraIssues"> + {{ s__('JiraService|Enable Jira issues') }} + <template #help> + {{ + s__( + 'JiraService|Warning: All GitLab users that have access to this GitLab project will be able to view all issues from the Jira project specified below.', + ) + }} + </template> + </gl-form-checkbox> + </template> + <gl-card v-else class="gl-mt-7"> + <strong>{{ __('This is a Premium feature') }}</strong> + <p>{{ __('Upgrade your plan to enable this feature of the Jira Integration.') }}</p> + <gl-button + v-if="upgradePlanPath" + category="primary" + variant="info" + :href="upgradePlanPath" + target="_blank" + > + {{ __('Upgrade your plan') }} + </gl-button> + </gl-card> + </div> + </gl-form-group> + <template v-if="showJiraIssuesIntegration"> + <gl-form-group + :label="s__('JiraService|Jira project key')" + label-for="service_project_key" + :invalid-feedback="__('This field is required.')" + :state="validProjectKey" + > + <gl-form-input + id="service_project_key" + v-model="projectKey" + name="service[project_key]" + :placeholder="s__('JiraService|e.g. AB')" + :required="enableJiraIssues" + :state="validProjectKey" + :disabled="!enableJiraIssues" + /> + </gl-form-group> + <p> + <gl-sprintf + :message=" + s__( + 'JiraService|Displaying Jira issues while leaving the GitLab issue functionality enabled might be confusing. Consider %{linkStart}disabling GitLab issues%{linkEnd} if they won’t otherwise be used.', + ) + " + > + <template #link="{ content }"> + <gl-link :href="editProjectPath" target="_blank">{{ content }}</gl-link> + </template> + </gl-sprintf> + </p> + </template> + </div> +</template> diff --git a/app/assets/javascripts/integrations/edit/components/jira_trigger_fields.vue b/app/assets/javascripts/integrations/edit/components/jira_trigger_fields.vue index 64e5789764f..1d3354c6651 100644 --- a/app/assets/javascripts/integrations/edit/components/jira_trigger_fields.vue +++ b/app/assets/javascripts/integrations/edit/components/jira_trigger_fields.vue @@ -1,5 +1,6 @@ <script> import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; +import { mapGetters } from 'vuex'; import { s__ } from '~/locale'; import { GlFormGroup, GlFormCheckbox, GlFormRadio } from '@gitlab/ui'; @@ -55,6 +56,7 @@ export default { }; }, computed: { + ...mapGetters(['isInheriting']), showEnableComments() { return this.triggerCommit || this.triggerMergeRequest; }, @@ -73,13 +75,17 @@ export default { ) " > - <input name="service[commit_events]" type="hidden" value="false" /> - <gl-form-checkbox v-model="triggerCommit" name="service[commit_events]"> + <input name="service[commit_events]" type="hidden" :value="triggerCommit || false" /> + <gl-form-checkbox v-model="triggerCommit" :disabled="isInheriting"> {{ __('Commit') }} </gl-form-checkbox> - <input name="service[merge_requests_events]" type="hidden" value="false" /> - <gl-form-checkbox v-model="triggerMergeRequest" name="service[merge_requests_events]"> + <input + name="service[merge_requests_events]" + type="hidden" + :value="triggerMergeRequest || false" + /> + <gl-form-checkbox v-model="triggerMergeRequest" :disabled="isInheriting"> {{ __('Merge request') }} </gl-form-checkbox> </gl-form-group> @@ -89,8 +95,12 @@ export default { :label="s__('Integrations|Comment settings:')" data-testid="comment-settings" > - <input name="service[comment_on_event_enabled]" type="hidden" value="false" /> - <gl-form-checkbox v-model="enableComments" name="service[comment_on_event_enabled]"> + <input + name="service[comment_on_event_enabled]" + type="hidden" + :value="enableComments || false" + /> + <gl-form-checkbox v-model="enableComments" :disabled="isInheriting"> {{ s__('Integrations|Enable comments') }} </gl-form-checkbox> </gl-form-group> @@ -100,12 +110,18 @@ export default { :label="s__('Integrations|Comment detail:')" data-testid="comment-detail" > + <input + v-if="isInheriting" + name="service[comment_detail]" + type="hidden" + :value="commentDetail" + /> <gl-form-radio v-for="commentDetailOption in commentDetailOptions" :key="commentDetailOption.value" v-model="commentDetail" :value="commentDetailOption.value" - name="service[comment_detail]" + :disabled="isInheriting" > {{ commentDetailOption.label }} <template #help> @@ -126,13 +142,17 @@ export default { }} </label> - <input name="service[commit_events]" type="hidden" value="false" /> - <gl-form-checkbox v-model="triggerCommit" name="service[commit_events]"> + <input name="service[commit_events]" type="hidden" :value="triggerCommit || false" /> + <gl-form-checkbox v-model="triggerCommit" :disabled="isInheriting"> {{ __('Commit') }} </gl-form-checkbox> - <input name="service[merge_requests_events]" type="hidden" value="false" /> - <gl-form-checkbox v-model="triggerMergeRequest" name="service[merge_requests_events]"> + <input + name="service[merge_requests_events]" + type="hidden" + :value="triggerMergeRequest || false" + /> + <gl-form-checkbox v-model="triggerMergeRequest" :disabled="isInheriting"> {{ __('Merge request') }} </gl-form-checkbox> @@ -144,8 +164,12 @@ export default { <label> {{ s__('Integrations|Comment settings:') }} </label> - <input name="service[comment_on_event_enabled]" type="hidden" value="false" /> - <gl-form-checkbox v-model="enableComments" name="service[comment_on_event_enabled]"> + <input + name="service[comment_on_event_enabled]" + type="hidden" + :value="enableComments || false" + /> + <gl-form-checkbox v-model="enableComments" :disabled="isInheriting"> {{ s__('Integrations|Enable comments') }} </gl-form-checkbox> @@ -153,12 +177,18 @@ export default { <label> {{ s__('Integrations|Comment detail:') }} </label> + <input + v-if="isInheriting" + name="service[comment_detail]" + type="hidden" + :value="commentDetail" + /> <gl-form-radio v-for="commentDetailOption in commentDetailOptions" :key="commentDetailOption.value" v-model="commentDetail" :value="commentDetailOption.value" - name="service[comment_detail]" + :disabled="isInheriting" > {{ commentDetailOption.label }} <template #help> diff --git a/app/assets/javascripts/integrations/edit/components/override_dropdown.vue b/app/assets/javascripts/integrations/edit/components/override_dropdown.vue new file mode 100644 index 00000000000..0ae2f267434 --- /dev/null +++ b/app/assets/javascripts/integrations/edit/components/override_dropdown.vue @@ -0,0 +1,63 @@ +<script> +import { s__ } from '~/locale'; +import { GlNewDropdown, GlNewDropdownItem } from '@gitlab/ui'; + +const dropdownOptions = [ + { + value: false, + text: s__('Integrations|Use instance level settings'), + }, + { + value: true, + text: s__('Integrations|Use custom settings'), + }, +]; + +export default { + dropdownOptions, + name: 'OverrideDropdown', + components: { + GlNewDropdown, + GlNewDropdownItem, + }, + props: { + inheritFromId: { + type: Number, + required: true, + }, + override: { + type: Boolean, + required: true, + }, + }, + data() { + return { + selected: dropdownOptions.find(x => x.value === this.override), + }; + }, + methods: { + onClick(option) { + this.selected = option; + this.$emit('change', option.value); + }, + }, +}; +</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>{{ s__('Integrations|This integration has multiple settings available.') }}</span> + <input name="service[inherit_from_id]" :value="override ? '' : inheritFromId" type="hidden" /> + <gl-new-dropdown :text="selected.text"> + <gl-new-dropdown-item + v-for="option in $options.dropdownOptions" + :key="option.value" + @click="onClick(option)" + > + {{ option.text }} + </gl-new-dropdown-item> + </gl-new-dropdown> + </div> +</template> diff --git a/app/assets/javascripts/integrations/edit/components/trigger_fields.vue b/app/assets/javascripts/integrations/edit/components/trigger_fields.vue index 531490ae40c..bb1e0d9d360 100644 --- a/app/assets/javascripts/integrations/edit/components/trigger_fields.vue +++ b/app/assets/javascripts/integrations/edit/components/trigger_fields.vue @@ -1,4 +1,5 @@ <script> +import { mapGetters } from 'vuex'; import { startCase } from 'lodash'; import { __ } from '~/locale'; import { GlFormGroup, GlFormCheckbox, GlFormInput } from '@gitlab/ui'; @@ -32,6 +33,7 @@ export default { }, }, computed: { + ...mapGetters(['isInheriting']), placeholder() { return placeholderForType[this.type]; }, @@ -57,8 +59,8 @@ export default { > <div id="trigger-fields" class="gl-pt-3"> <gl-form-group v-for="event in events" :key="event.title" :description="event.description"> - <input :name="checkboxName(event.name)" type="hidden" value="false" /> - <gl-form-checkbox v-model="event.value" :name="checkboxName(event.name)"> + <input :name="checkboxName(event.name)" type="hidden" :value="event.value || false" /> + <gl-form-checkbox v-model="event.value" :disabled="isInheriting"> {{ startCase(event.title) }} </gl-form-checkbox> <gl-form-input @@ -66,6 +68,7 @@ export default { v-model="event.field.value" :name="fieldName(event.field.name)" :placeholder="placeholder" + :readonly="isInheriting" /> </gl-form-group> </div> diff --git a/app/assets/javascripts/integrations/edit/index.js b/app/assets/javascripts/integrations/edit/index.js index 21b5ca17951..ea5463832ce 100644 --- a/app/assets/javascripts/integrations/edit/index.js +++ b/app/assets/javascripts/integrations/edit/index.js @@ -1,49 +1,86 @@ import Vue from 'vue'; +import { createStore } from './store'; import { parseBoolean } from '~/lib/utils/common_utils'; import IntegrationForm from './components/integration_form.vue'; -export default el => { - if (!el) { - return null; - } - - function parseBooleanInData(data) { - const result = {}; - Object.entries(data).forEach(([key, value]) => { - result[key] = parseBoolean(value); - }); - return result; - } +function parseBooleanInData(data) { + const result = {}; + Object.entries(data).forEach(([key, value]) => { + result[key] = parseBoolean(value); + }); + return result; +} - const { type, commentDetail, triggerEvents, fields, ...booleanAttributes } = el.dataset; +function parseDatasetToProps(data) { + const { + id, + type, + commentDetail, + projectKey, + upgradePlanPath, + editProjectPath, + triggerEvents, + fields, + inheritFromId, + ...booleanAttributes + } = data; const { showActive, activated, commitEvents, mergeRequestEvents, enableComments, + showJiraIssuesIntegration, + enableJiraIssues, } = parseBooleanInData(booleanAttributes); + return { + activeToggleProps: { + initialActivated: activated, + }, + showActive, + type, + triggerFieldsProps: { + initialTriggerCommit: commitEvents, + initialTriggerMergeRequest: mergeRequestEvents, + initialEnableComments: enableComments, + initialCommentDetail: commentDetail, + }, + jiraIssuesProps: { + showJiraIssuesIntegration, + initialEnableJiraIssues: enableJiraIssues, + initialProjectKey: projectKey, + upgradePlanPath, + editProjectPath, + }, + triggerEvents: JSON.parse(triggerEvents), + fields: JSON.parse(fields), + inheritFromId: parseInt(inheritFromId, 10), + id: parseInt(id, 10), + }; +} + +export default (el, adminEl) => { + if (!el) { + return null; + } + + const props = parseDatasetToProps(el.dataset); + + const initialState = { + adminState: null, + customState: props, + }; + + if (adminEl) { + initialState.adminState = Object.freeze(parseDatasetToProps(adminEl.dataset)); + } + return new Vue({ el, + store: createStore(initialState), render(createElement) { - return createElement(IntegrationForm, { - props: { - activeToggleProps: { - initialActivated: activated, - }, - showActive, - type, - triggerFieldsProps: { - initialTriggerCommit: commitEvents, - initialTriggerMergeRequest: mergeRequestEvents, - initialEnableComments: enableComments, - initialCommentDetail: commentDetail, - }, - triggerEvents: JSON.parse(triggerEvents), - fields: JSON.parse(fields), - }, - }); + return createElement(IntegrationForm); }, }); }; diff --git a/app/assets/javascripts/integrations/edit/store/actions.js b/app/assets/javascripts/integrations/edit/store/actions.js new file mode 100644 index 00000000000..3decdaab55d --- /dev/null +++ b/app/assets/javascripts/integrations/edit/store/actions.js @@ -0,0 +1,4 @@ +import * as types from './mutation_types'; + +// eslint-disable-next-line import/prefer-default-export +export const setOverride = ({ commit }, override) => commit(types.SET_OVERRIDE, override); diff --git a/app/assets/javascripts/integrations/edit/store/getters.js b/app/assets/javascripts/integrations/edit/store/getters.js new file mode 100644 index 00000000000..b68bd668980 --- /dev/null +++ b/app/assets/javascripts/integrations/edit/store/getters.js @@ -0,0 +1,6 @@ +export const isInheriting = state => (state.adminState === null ? false : !state.override); + +export const propsSource = (state, getters) => + getters.isInheriting ? state.adminState : state.customState; + +export const currentKey = (state, getters) => (getters.isInheriting ? 'admin' : 'custom'); diff --git a/app/assets/javascripts/integrations/edit/store/index.js b/app/assets/javascripts/integrations/edit/store/index.js new file mode 100644 index 00000000000..eea5e48780d --- /dev/null +++ b/app/assets/javascripts/integrations/edit/store/index.js @@ -0,0 +1,17 @@ +import Vue from 'vue'; +import Vuex from 'vuex'; +import * as actions from './actions'; +import * as getters from './getters'; +import mutations from './mutations'; +import createState from './state'; + +Vue.use(Vuex); + +// eslint-disable-next-line import/prefer-default-export +export const createStore = (initialState = {}) => + new Vuex.Store({ + actions, + getters, + mutations, + state: createState(initialState), + }); diff --git a/app/assets/javascripts/integrations/edit/store/mutation_types.js b/app/assets/javascripts/integrations/edit/store/mutation_types.js new file mode 100644 index 00000000000..274afe3fb49 --- /dev/null +++ b/app/assets/javascripts/integrations/edit/store/mutation_types.js @@ -0,0 +1,2 @@ +// eslint-disable-next-line import/prefer-default-export +export const SET_OVERRIDE = 'SET_OVERRIDE'; diff --git a/app/assets/javascripts/integrations/edit/store/mutations.js b/app/assets/javascripts/integrations/edit/store/mutations.js new file mode 100644 index 00000000000..8757d415197 --- /dev/null +++ b/app/assets/javascripts/integrations/edit/store/mutations.js @@ -0,0 +1,7 @@ +import * as types from './mutation_types'; + +export default { + [types.SET_OVERRIDE](state, override) { + state.override = override; + }, +}; diff --git a/app/assets/javascripts/integrations/edit/store/state.js b/app/assets/javascripts/integrations/edit/store/state.js new file mode 100644 index 00000000000..95c1a2be500 --- /dev/null +++ b/app/assets/javascripts/integrations/edit/store/state.js @@ -0,0 +1,9 @@ +export default ({ adminState = null, customState = {} } = {}) => { + const override = adminState !== null ? adminState.id !== customState.inheritFromId : false; + + return { + override, + adminState, + customState, + }; +}; diff --git a/app/assets/javascripts/integrations/integration_settings_form.js b/app/assets/javascripts/integrations/integration_settings_form.js index 8844cbebe85..837409a91ca 100644 --- a/app/assets/javascripts/integrations/integration_settings_form.js +++ b/app/assets/javascripts/integrations/integration_settings_form.js @@ -22,7 +22,10 @@ export default class IntegrationSettingsForm { init() { // Init Vue component - initForm(document.querySelector('.js-vue-integration-settings')); + initForm( + document.querySelector('.js-vue-integration-settings'), + document.querySelector('.js-vue-admin-integration-settings'), + ); eventHub.$on('toggle', active => { this.formActive = active; this.handleServiceToggle(); |