From b16a070193978296be52957cb326c61d6238b670 Mon Sep 17 00:00:00 2001
From: Justin Ho <hduong@gitlab.com>
Date: Wed, 17 Jun 2020 21:19:09 +0700
Subject: [PATCH 1/6] Add Vuex state to integration form

Add state for override and overrideAvailable to disable all
form fields
---
 .../javascripts/integrations/edit/index.js      |  2 ++
 .../integrations/edit/store/actions.js          |  6 ++++++
 .../integrations/edit/store/getters.js          |  2 ++
 .../integrations/edit/store/index.js            | 17 +++++++++++++++++
 .../integrations/edit/store/mutation_types.js   |  2 ++
 .../integrations/edit/store/mutations.js        | 11 +++++++++++
 .../integrations/edit/store/state.js            |  4 ++++
 7 files changed, 44 insertions(+)
 create mode 100644 app/assets/javascripts/integrations/edit/store/actions.js
 create mode 100644 app/assets/javascripts/integrations/edit/store/getters.js
 create mode 100644 app/assets/javascripts/integrations/edit/store/index.js
 create mode 100644 app/assets/javascripts/integrations/edit/store/mutation_types.js
 create mode 100644 app/assets/javascripts/integrations/edit/store/mutations.js
 create mode 100644 app/assets/javascripts/integrations/edit/store/state.js

diff --git a/app/assets/javascripts/integrations/edit/index.js b/app/assets/javascripts/integrations/edit/index.js
index d35f11e43b3965..eda0efb558751a 100644
--- a/app/assets/javascripts/integrations/edit/index.js
+++ b/app/assets/javascripts/integrations/edit/index.js
@@ -1,4 +1,5 @@
 import Vue from 'vue';
+import { createStore } from './store';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import IntegrationForm from './components/integration_form.vue';
 
@@ -37,6 +38,7 @@ export default el => {
 
   return new Vue({
     el,
+    store: createStore(),
     render(createElement) {
       return createElement(IntegrationForm, {
         props: {
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 00000000000000..0ba69515e0ece9
--- /dev/null
+++ b/app/assets/javascripts/integrations/edit/store/actions.js
@@ -0,0 +1,6 @@
+import * as types from './mutation_types';
+
+export const setOverride = ({ commit }, override) => commit(types.SET_OVERRIDE, override);
+
+export const setOverrideAvailable = ({ commit }, overrideAvailable) =>
+  commit(types.SET_OVERRIDE_AVAILABLE, overrideAvailable);
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 00000000000000..072d219e52813d
--- /dev/null
+++ b/app/assets/javascripts/integrations/edit/store/getters.js
@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export const disableForm = state => state.overrideAvailable && !state.override;
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 00000000000000..b570f2495f6099
--- /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 state from './state';
+
+Vue.use(Vuex);
+
+export const createStore = () =>
+  new Vuex.Store({
+    actions,
+    getters,
+    mutations,
+    state,
+  });
+export default createStore();
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 00000000000000..bb880a394893de
--- /dev/null
+++ b/app/assets/javascripts/integrations/edit/store/mutation_types.js
@@ -0,0 +1,2 @@
+export const SET_OVERRIDE = 'SET_OVERRIDE';
+export const SET_OVERRIDE_AVAILABLE = 'SET_OVERRIDE_AVAILABLE';
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 00000000000000..fa71c60d37ef11
--- /dev/null
+++ b/app/assets/javascripts/integrations/edit/store/mutations.js
@@ -0,0 +1,11 @@
+import * as types from './mutation_types';
+
+export default {
+  [types.SET_OVERRIDE](state, override) {
+    state.override = override;
+  },
+
+  [types.SET_OVERRIDE_AVAILABLE](state, overrideAvailable) {
+    state.overrideAvailable = overrideAvailable;
+  },
+};
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 00000000000000..0c92cd9f4498af
--- /dev/null
+++ b/app/assets/javascripts/integrations/edit/store/state.js
@@ -0,0 +1,4 @@
+export default () => ({
+  override: false,
+  overrideAvailable: true, // TODO: Should default to false and be passed from the backend
+});
-- 
GitLab


From 28d65da6f2698621f6a138ad773700c4340cafaa Mon Sep 17 00:00:00 2001
From: Justin Ho <hduong@gitlab.com>
Date: Wed, 17 Jun 2020 21:21:07 +0700
Subject: [PATCH 2/6] Add OverrideDropdown to toggle state

---
 .../edit/components/integration_form.vue      |  6 ++
 .../edit/components/override_dropdown.vue     | 56 +++++++++++++++++++
 2 files changed, 62 insertions(+)
 create mode 100644 app/assets/javascripts/integrations/edit/components/override_dropdown.vue

diff --git a/app/assets/javascripts/integrations/edit/components/integration_form.vue b/app/assets/javascripts/integrations/edit/components/integration_form.vue
index 12e2ce88b3cef0..88aedc421749e9 100644
--- a/app/assets/javascripts/integrations/edit/components/integration_form.vue
+++ b/app/assets/javascripts/integrations/edit/components/integration_form.vue
@@ -1,5 +1,8 @@
 <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" />
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 00000000000000..063aa5c76ab3ae
--- /dev/null
+++ b/app/assets/javascripts/integrations/edit/components/override_dropdown.vue
@@ -0,0 +1,56 @@
+<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>
-- 
GitLab


From a33369530ab2b6d488fb433a988219faadba7303 Mon Sep 17 00:00:00 2001
From: Justin Ho <hduong@gitlab.com>
Date: Wed, 17 Jun 2020 21:24:18 +0700
Subject: [PATCH 3/6] Disable form fields when not overriding

Apply to all form components
---
 .../edit/components/active_toggle.vue         |  5 +++++
 .../edit/components/dynamic_field.vue         |  3 +++
 .../edit/components/jira_trigger_fields.vue   | 21 ++++++++++++++++---
 .../edit/components/trigger_fields.vue        |  9 +++++++-
 4 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/integrations/edit/components/active_toggle.vue b/app/assets/javascripts/integrations/edit/components/active_toggle.vue
index dc89e139320917..ffb5f7cf2e7516 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(['disableForm']),
+  },
   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="disableForm"
         @change="onToggle"
       />
     </gl-form-group>
diff --git a/app/assets/javascripts/integrations/edit/components/dynamic_field.vue b/app/assets/javascripts/integrations/edit/components/dynamic_field.vue
index 5db80ee2f2e461..9b0207fc1b9698 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(['disableForm']),
     isCheckbox() {
       return this.type === 'checkbox';
     },
@@ -107,6 +109,7 @@ export default {
         id: this.fieldId,
         name: this.fieldName,
         state: this.valid,
+        disabled: this.disableForm,
       };
     },
     valid() {
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 64e5789764f9bc..193afa29d6a014 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(['disableForm']),
     showEnableComments() {
       return this.triggerCommit || this.triggerMergeRequest;
     },
@@ -74,12 +76,20 @@ export default {
       "
     >
       <input name="service[commit_events]" type="hidden" value="false" />
-      <gl-form-checkbox v-model="triggerCommit" name="service[commit_events]">
+      <gl-form-checkbox
+        v-model="triggerCommit"
+        name="service[commit_events]"
+        :disabled="disableForm"
+      >
         {{ __('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]">
+      <gl-form-checkbox
+        v-model="triggerMergeRequest"
+        name="service[merge_requests_events]"
+        :disabled="disableForm"
+      >
         {{ __('Merge request') }}
       </gl-form-checkbox>
     </gl-form-group>
@@ -90,7 +100,11 @@ export default {
       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]">
+      <gl-form-checkbox
+        v-model="enableComments"
+        name="service[comment_on_event_enabled]"
+        :disabled="disableForm"
+      >
         {{ s__('Integrations|Enable comments') }}
       </gl-form-checkbox>
     </gl-form-group>
@@ -106,6 +120,7 @@ export default {
         v-model="commentDetail"
         :value="commentDetailOption.value"
         name="service[comment_detail]"
+        :disabled="disableForm"
       >
         {{ commentDetailOption.label }}
         <template #help>
diff --git a/app/assets/javascripts/integrations/edit/components/trigger_fields.vue b/app/assets/javascripts/integrations/edit/components/trigger_fields.vue
index 531490ae40c9f8..3768d3e633bc3a 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(['disableForm']),
     placeholder() {
       return placeholderForType[this.type];
     },
@@ -58,7 +60,11 @@ 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)">
+        <gl-form-checkbox
+          v-model="event.value"
+          :name="checkboxName(event.name)"
+          :disabled="disableForm"
+        >
           {{ startCase(event.title) }}
         </gl-form-checkbox>
         <gl-form-input
@@ -66,6 +72,7 @@ export default {
           v-model="event.field.value"
           :name="fieldName(event.field.name)"
           :placeholder="placeholder"
+          :disabled="disableForm"
         />
       </gl-form-group>
     </div>
-- 
GitLab


From 801bd579577e711a5285091fc858e401f766e98a Mon Sep 17 00:00:00 2001
From: Justin Ho <hduong@gitlab.com>
Date: Sat, 20 Jun 2020 22:33:11 +0700
Subject: [PATCH 4/6] Pass overrideAvailable from backend to frontend

- Using the value of inherit_from_id to determine
value of overrideAvailable. This approach might change in
the future if we discuss with backend and the way this work
changes.
- Add store to Jest specs
- Update translations file and changelog
---
 .../integrations/edit/components/override_dropdown.vue   | 8 ++++----
 app/assets/javascripts/integrations/edit/index.js        | 8 +++++++-
 app/assets/javascripts/integrations/edit/store/index.js  | 7 ++++---
 app/assets/javascripts/integrations/edit/store/state.js  | 4 ++--
 app/helpers/services_helper.rb                           | 3 ++-
 ...egration-implement-project-level-setting-selector.yml | 5 +++++
 locale/gitlab.pot                                        | 9 +++++++++
 .../integrations/edit/components/dynamic_field_spec.js   | 2 ++
 .../edit/components/integration_form_spec.js             | 2 ++
 .../integrations/edit/components/trigger_fields_spec.js  | 2 ++
 10 files changed, 39 insertions(+), 11 deletions(-)
 create mode 100644 changelogs/unreleased/218250-project-level-integration-implement-project-level-setting-selector.yml

diff --git a/app/assets/javascripts/integrations/edit/components/override_dropdown.vue b/app/assets/javascripts/integrations/edit/components/override_dropdown.vue
index 063aa5c76ab3ae..4922640420a4b0 100644
--- a/app/assets/javascripts/integrations/edit/components/override_dropdown.vue
+++ b/app/assets/javascripts/integrations/edit/components/override_dropdown.vue
@@ -1,16 +1,16 @@
 <script>
-import { __ } from '~/locale';
+import { s__ } from '~/locale';
 import { mapState } from 'vuex';
 import { GlNewDropdown, GlNewDropdownItem } from '@gitlab/ui';
 
 const options = [
   {
     value: 'instance',
-    text: __('Use instance level settings'),
+    text: s__('Integrations|Use instance level settings'),
   },
   {
     value: 'project',
-    text: __('Use custom settings'),
+    text: s__('Integrations|Use custom settings'),
   },
 ];
 
@@ -46,7 +46,7 @@ export default {
   <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>
+    <span>{{ s__('Integrations|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 }}
diff --git a/app/assets/javascripts/integrations/edit/index.js b/app/assets/javascripts/integrations/edit/index.js
index eda0efb558751a..e3cee590e0c0a5 100644
--- a/app/assets/javascripts/integrations/edit/index.js
+++ b/app/assets/javascripts/integrations/edit/index.js
@@ -1,4 +1,5 @@
 import Vue from 'vue';
+import { isEmpty } from 'lodash';
 import { createStore } from './store';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import IntegrationForm from './components/integration_form.vue';
@@ -24,6 +25,7 @@ export default el => {
     editProjectPath,
     triggerEvents,
     fields,
+    inheritFromId,
     ...booleanAttributes
   } = el.dataset;
   const {
@@ -36,9 +38,13 @@ export default el => {
     enableJiraIssues,
   } = parseBooleanInData(booleanAttributes);
 
+  const initialState = {
+    overrideAvailable: !isEmpty(inheritFromId),
+  };
+
   return new Vue({
     el,
-    store: createStore(),
+    store: createStore(initialState),
     render(createElement) {
       return createElement(IntegrationForm, {
         props: {
diff --git a/app/assets/javascripts/integrations/edit/store/index.js b/app/assets/javascripts/integrations/edit/store/index.js
index b570f2495f6099..f28009827dbae5 100644
--- a/app/assets/javascripts/integrations/edit/store/index.js
+++ b/app/assets/javascripts/integrations/edit/store/index.js
@@ -3,15 +3,16 @@ import Vuex from 'vuex';
 import * as actions from './actions';
 import * as getters from './getters';
 import mutations from './mutations';
-import state from './state';
+import createState from './state';
 
 Vue.use(Vuex);
 
-export const createStore = () =>
+export const createStore = (initialState = {}) =>
   new Vuex.Store({
     actions,
     getters,
     mutations,
-    state,
+    state: createState(initialState),
   });
+
 export default createStore();
diff --git a/app/assets/javascripts/integrations/edit/store/state.js b/app/assets/javascripts/integrations/edit/store/state.js
index 0c92cd9f4498af..72e91559a55a1e 100644
--- a/app/assets/javascripts/integrations/edit/store/state.js
+++ b/app/assets/javascripts/integrations/edit/store/state.js
@@ -1,4 +1,4 @@
-export default () => ({
+export default ({ overrideAvailable = false }) => ({
   override: false,
-  overrideAvailable: true, // TODO: Should default to false and be passed from the backend
+  overrideAvailable,
 });
diff --git a/app/helpers/services_helper.rb b/app/helpers/services_helper.rb
index cf9d04735ce7be..4d87c1b5079617 100644
--- a/app/helpers/services_helper.rb
+++ b/app/helpers/services_helper.rb
@@ -109,7 +109,8 @@ def integration_form_data(integration)
       enable_comments: integration.comment_on_event_enabled.to_s,
       comment_detail: integration.comment_detail,
       trigger_events: trigger_events_for_service(integration),
-      fields: fields_for_service(integration)
+      fields: fields_for_service(integration),
+      inherit_from_id: integration.inherit_from_id
     }
   end
 
diff --git a/changelogs/unreleased/218250-project-level-integration-implement-project-level-setting-selector.yml b/changelogs/unreleased/218250-project-level-integration-implement-project-level-setting-selector.yml
new file mode 100644
index 00000000000000..39853524bf525e
--- /dev/null
+++ b/changelogs/unreleased/218250-project-level-integration-implement-project-level-setting-selector.yml
@@ -0,0 +1,5 @@
+---
+title: Add override selector for project-level integrations
+merge_request: 34742
+author:
+type: added
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 10be10af9e571f..73f0c94cdef51d 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -12754,6 +12754,15 @@ msgstr ""
 msgid "Integrations|Standard"
 msgstr ""
 
+msgid "Integrations|This integration has multiple settings available."
+msgstr ""
+
+msgid "Integrations|Use custom settings"
+msgstr ""
+
+msgid "Integrations|Use instance level settings"
+msgstr ""
+
 msgid "Integrations|When a Jira issue is mentioned in a commit or merge request a remote link and comment (if enabled) will be created."
 msgstr ""
 
diff --git a/spec/frontend/integrations/edit/components/dynamic_field_spec.js b/spec/frontend/integrations/edit/components/dynamic_field_spec.js
index 0a771c3b31d845..894375387a608b 100644
--- a/spec/frontend/integrations/edit/components/dynamic_field_spec.js
+++ b/spec/frontend/integrations/edit/components/dynamic_field_spec.js
@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils';
+import { createStore } from '~/integrations/edit/store';
 import DynamicField from '~/integrations/edit/components/dynamic_field.vue';
 import { GlFormGroup, GlFormCheckbox, GlFormInput, GlFormSelect, GlFormTextarea } from '@gitlab/ui';
 
@@ -17,6 +18,7 @@ describe('DynamicField', () => {
   const createComponent = props => {
     wrapper = mount(DynamicField, {
       propsData: { ...defaultProps, ...props },
+      store: createStore(),
     });
   };
 
diff --git a/spec/frontend/integrations/edit/components/integration_form_spec.js b/spec/frontend/integrations/edit/components/integration_form_spec.js
index 3d27b9c3051b9d..393429b7814d1b 100644
--- a/spec/frontend/integrations/edit/components/integration_form_spec.js
+++ b/spec/frontend/integrations/edit/components/integration_form_spec.js
@@ -1,4 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
+import { createStore } from '~/integrations/edit/store';
 import IntegrationForm from '~/integrations/edit/components/integration_form.vue';
 import ActiveToggle from '~/integrations/edit/components/active_toggle.vue';
 import JiraTriggerFields from '~/integrations/edit/components/jira_trigger_fields.vue';
@@ -26,6 +27,7 @@ describe('IntegrationForm', () => {
   const createComponent = (props, featureFlags = {}) => {
     wrapper = shallowMount(IntegrationForm, {
       propsData: { ...defaultProps, ...props },
+      store: createStore(),
       stubs: {
         ActiveToggle,
         JiraTriggerFields,
diff --git a/spec/frontend/integrations/edit/components/trigger_fields_spec.js b/spec/frontend/integrations/edit/components/trigger_fields_spec.js
index 337876c6d1691f..94b987bffae91a 100644
--- a/spec/frontend/integrations/edit/components/trigger_fields_spec.js
+++ b/spec/frontend/integrations/edit/components/trigger_fields_spec.js
@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils';
+import { createStore } from '~/integrations/edit/store';
 import TriggerFields from '~/integrations/edit/components/trigger_fields.vue';
 import { GlFormGroup, GlFormCheckbox, GlFormInput } from '@gitlab/ui';
 
@@ -12,6 +13,7 @@ describe('TriggerFields', () => {
   const createComponent = props => {
     wrapper = mount(TriggerFields, {
       propsData: { ...defaultProps, ...props },
+      store: createStore(),
     });
   };
 
-- 
GitLab


From 9793e093f76530e5a99c6fc88a0be998b5e7e2eb Mon Sep 17 00:00:00 2001
From: Arturo Herrero <arturo.herrero@gmail.com>
Date: Mon, 22 Jun 2020 17:40:52 +0100
Subject: [PATCH 5/6] Properly pass admin integration to the frontend

This sets the admin integration object to used in the view and ensures
that parameters relating to the admin integration sent from the frontend
are handled properly.

Co-authored-by: Lukas Eipert <leipert@gitlab.com>
Co-authored-by: Justin Ho Tuan Duong <hduong@gitlab.com>
---
 app/controllers/concerns/service_params.rb    |  1 +
 .../projects/services_controller.rb           |  2 ++
 app/helpers/services_helper.rb                |  1 +
 app/models/service.rb                         |  4 +++
 .../projects/services_controller_spec.rb      | 17 ++++++++++++
 spec/helpers/services_helper_spec.rb          | 24 +++++++++++++++++
 spec/models/service_spec.rb                   | 27 +++++++++++++++++++
 7 files changed, 76 insertions(+)

diff --git a/app/controllers/concerns/service_params.rb b/app/controllers/concerns/service_params.rb
index cc341f137136fe..a19c43a227a729 100644
--- a/app/controllers/concerns/service_params.rb
+++ b/app/controllers/concerns/service_params.rb
@@ -31,6 +31,7 @@ module ServiceParams
     :external_wiki_url,
     :google_iap_service_account_json,
     :google_iap_audience_client_id,
+    :inherit_from_id,
     # We're using `issues_events` and `merge_requests_events`
     # in the view so we still need to explicitly state them
     # here. `Service#event_names` would only give
diff --git a/app/controllers/projects/services_controller.rb b/app/controllers/projects/services_controller.rb
index ece4147d399dff..6b7e253595c2c4 100644
--- a/app/controllers/projects/services_controller.rb
+++ b/app/controllers/projects/services_controller.rb
@@ -21,10 +21,12 @@ class Projects::ServicesController < Projects::ApplicationController
   layout "project_settings"
 
   def edit
+    @admin_integration = Service.instance_for(service.type)
   end
 
   def update
     @service.attributes = service_params[:service]
+    @service.inherit_from_id = nil if service_params[:service][:inherit_from_id].blank?
 
     saved = @service.save(context: :manual_change)
 
diff --git a/app/helpers/services_helper.rb b/app/helpers/services_helper.rb
index 4d87c1b5079617..1f9cce80bedfeb 100644
--- a/app/helpers/services_helper.rb
+++ b/app/helpers/services_helper.rb
@@ -101,6 +101,7 @@ def integration_form_refactor?
 
   def integration_form_data(integration)
     {
+      id: integration.id,
       show_active: integration.show_active_box?.to_s,
       activated: (integration.active || integration.new_record?).to_s,
       type: integration.to_param,
diff --git a/app/models/service.rb b/app/models/service.rb
index 5bbda1500cfdcc..89bde61bfe1290 100644
--- a/app/models/service.rb
+++ b/app/models/service.rb
@@ -364,6 +364,10 @@ def self.instance_exists_for?(type)
     exists?(instance: true, type: type)
   end
 
+  def self.instance_for(type)
+    find_by(instance: true, type: type)
+  end
+
   # override if needed
   def supports_data_fields?
     false
diff --git a/spec/controllers/projects/services_controller_spec.rb b/spec/controllers/projects/services_controller_spec.rb
index ea844008f643f9..e8a23dcfafb206 100644
--- a/spec/controllers/projects/services_controller_spec.rb
+++ b/spec/controllers/projects/services_controller_spec.rb
@@ -179,6 +179,23 @@ def do_put
 
         it_behaves_like 'service update'
       end
+
+      context 'wehn param `inherit_from_id` is set to empty string' do
+        let(:service_params) { { inherit_from_id: '' } }
+
+        it 'sets inherit_from_id to nil' do
+          expect(service.reload.inherit_from_id).to eq(nil)
+        end
+      end
+
+      context 'wehn param `inherit_from_id` is set to some value' do
+        let(:instance_service) { create(:jira_service, :instance) }
+        let(:service_params) { { inherit_from_id: instance_service.id } }
+
+        it 'sets inherit_from_id to value' do
+          expect(service.reload.inherit_from_id).to eq(instance_service.id)
+        end
+      end
     end
 
     describe 'as JSON' do
diff --git a/spec/helpers/services_helper_spec.rb b/spec/helpers/services_helper_spec.rb
index 37256c1b387d6e..10d6ec7b6a7d0b 100644
--- a/spec/helpers/services_helper_spec.rb
+++ b/spec/helpers/services_helper_spec.rb
@@ -7,4 +7,28 @@
     it { expect(event_action_title('comment')).to eq 'Comment' }
     it { expect(event_action_title('something')).to eq 'Something' }
   end
+
+  describe '#integration_form_data' do
+    subject { helper.integration_form_data(integration) }
+
+    context 'Jira service' do
+      let(:integration) { build(:jira_service) }
+
+      it 'includes Jira specific fields' do
+        is_expected.to include(
+          :id,
+          :show_active,
+          :activated,
+          :type,
+          :merge_request_events,
+          :commit_events,
+          :enable_comments,
+          :comment_detail,
+          :trigger_events,
+          :fields,
+          :inherit_from_id
+        )
+      end
+    end
+  end
 end
diff --git a/spec/models/service_spec.rb b/spec/models/service_spec.rb
index 8c914c6b74c715..75bbb0745267ae 100644
--- a/spec/models/service_spec.rb
+++ b/spec/models/service_spec.rb
@@ -386,6 +386,33 @@
     end
   end
 
+  describe 'instance' do
+    describe '.instance_for' do
+      let_it_be(:jira_service) { create(:jira_service, :instance) }
+      let_it_be(:slack_service) { create(:slack_service, :instance) }
+
+      subject { described_class.instance_for(type) }
+
+      context 'Hipchat serivce' do
+        let(:type) { 'HipchatService' }
+
+        it { is_expected.to eq(nil) }
+      end
+
+      context 'Jira serivce' do
+        let(:type) { 'JiraService' }
+
+        it { is_expected.to eq(jira_service) }
+      end
+
+      context 'Slack serivce' do
+        let(:type) { 'SlackService' }
+
+        it { is_expected.to eq(slack_service) }
+      end
+    end
+  end
+
   describe "{property}_changed?" do
     let(:service) do
       BambooService.create(
-- 
GitLab


From 835d4a5aaa0cb2e3699337bd611e2420ca3e69b3 Mon Sep 17 00:00:00 2001
From: Lukas Eipert <leipert@gitlab.com>
Date: Thu, 16 Jul 2020 14:13:51 +0200
Subject: [PATCH 6/6] Implementation of Override Form in Integrations

This properly exposes the admin settings to the frontend components if
they exist and allows the user to switch between them and custom
settings.

If the user chooses to use the admin settings, all form fields are
populated as disabled or readonly.

Co-authored-by: Justin Ho Tuan Duong <hduong@gitlab.com>
---
 .../edit/components/active_toggle.vue         |  11 +-
 .../edit/components/dynamic_field.vue         |  13 +-
 .../edit/components/integration_form.vue      |  80 ++++---
 .../edit/components/jira_issues_fields.vue    |   4 +-
 .../edit/components/jira_trigger_fields.vue   |  67 +++---
 .../edit/components/override_dropdown.vue     |  37 ++--
 .../edit/components/trigger_fields.vue        |  12 +-
 .../javascripts/integrations/edit/index.js    |  89 ++++----
 .../integrations/edit/store/actions.js        |   4 +-
 .../integrations/edit/store/getters.js        |   8 +-
 .../integrations/edit/store/index.js          |   3 +-
 .../integrations/edit/store/mutation_types.js |   2 +-
 .../integrations/edit/store/mutations.js      |   4 -
 .../integrations/edit/store/state.js          |  13 +-
 .../integrations/integration_settings_form.js |   5 +-
 app/views/shared/_service_settings.html.haml  |   2 +
 .../services/disable_triggers_spec.rb         |   6 +-
 .../edit/components/active_toggle_spec.js     |  18 +-
 .../edit/components/dynamic_field_spec.js     | 196 +++++++++++-------
 .../edit/components/integration_form_spec.js  |  58 ++++--
 .../components/jira_issues_fields_spec.js     |   4 +-
 .../components/jira_trigger_fields_spec.js    |  25 ++-
 .../edit/components/trigger_fields_spec.js    |  53 +++--
 spec/frontend/integrations/edit/mock_data.js  |  18 ++
 .../integrations/edit/store/actions_spec.js   |  19 ++
 .../integrations/edit/store/getters_spec.js   |  71 +++++++
 .../integrations/edit/store/mutations_spec.js |  19 ++
 .../integrations/edit/store/state_spec.js     |  26 +++
 28 files changed, 590 insertions(+), 277 deletions(-)
 create mode 100644 spec/frontend/integrations/edit/mock_data.js
 create mode 100644 spec/frontend/integrations/edit/store/actions_spec.js
 create mode 100644 spec/frontend/integrations/edit/store/getters_spec.js
 create mode 100644 spec/frontend/integrations/edit/store/mutations_spec.js
 create mode 100644 spec/frontend/integrations/edit/store/state_spec.js

diff --git a/app/assets/javascripts/integrations/edit/components/active_toggle.vue b/app/assets/javascripts/integrations/edit/components/active_toggle.vue
index ffb5f7cf2e7516..a3087c8958ef1c 100644
--- a/app/assets/javascripts/integrations/edit/components/active_toggle.vue
+++ b/app/assets/javascripts/integrations/edit/components/active_toggle.vue
@@ -23,7 +23,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['disableForm']),
+    ...mapGetters(['isInheriting']),
   },
   mounted() {
     // Initialize view
@@ -46,7 +46,7 @@ export default {
         v-model="activated"
         name="service[active]"
         class="gl-display-block gl-line-height-0"
-        :disabled="disableForm"
+        :disabled="isInheriting"
         @change="onToggle"
       />
     </gl-form-group>
@@ -55,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 9b0207fc1b9698..6053d11e6daf37 100644
--- a/app/assets/javascripts/integrations/edit/components/dynamic_field.vue
+++ b/app/assets/javascripts/integrations/edit/components/dynamic_field.vue
@@ -60,7 +60,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['disableForm']),
+    ...mapGetters(['isInheriting']),
     isCheckbox() {
       return this.type === 'checkbox';
     },
@@ -109,7 +109,7 @@ export default {
         id: this.fieldId,
         name: this.fieldName,
         state: this.valid,
-        disabled: this.disableForm,
+        readonly: this.isInheriting,
       };
     },
     valid() {
@@ -145,12 +145,15 @@ export default {
     </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"
diff --git a/app/assets/javascripts/integrations/edit/components/integration_form.vue b/app/assets/javascripts/integrations/edit/components/integration_form.vue
index 88aedc421749e9..5088664c3bd141 100644
--- a/app/assets/javascripts/integrations/edit/components/integration_form.vue
+++ b/app/assets/javascripts/integrations/edit/components/integration_form.vue
@@ -1,5 +1,5 @@
 <script>
-import { mapState } from 'vuex';
+import { mapState, mapActions, mapGetters } from 'vuex';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 import OverrideDropdown from './override_dropdown.vue';
@@ -20,57 +20,55 @@ export default {
     DynamicField,
   },
   mixins: [glFeatureFlagsMixin()],
-  props: {
-    activeToggleProps: {
-      type: Object,
-      required: true,
-    },
-    showActive: {
-      type: Boolean,
-      required: true,
-    },
-    triggerFieldsProps: {
-      type: Object,
-      required: true,
-    },
-    jiraIssuesProps: {
-      type: Object,
-      required: true,
-    },
-    triggerEvents: {
-      type: Array,
-      required: false,
-      default: () => [],
-    },
-    fields: {
-      type: Array,
-      required: false,
-      default: () => [],
-    },
-    type: {
-      type: String,
-      required: true,
-    },
-  },
   computed: {
-    ...mapState(['overrideAvailable']),
+    ...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>
-    <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" />
-    <dynamic-field v-for="field in fields" :key="field.name" v-bind="field" />
-    <jira-issues-fields v-if="showJiraIssuesFields" v-bind="jiraIssuesProps" />
+    <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
index 71ce9fe104ada5..5444cd5a7121bd 100644
--- a/app/assets/javascripts/integrations/edit/components/jira_issues_fields.vue
+++ b/app/assets/javascripts/integrations/edit/components/jira_issues_fields.vue
@@ -89,8 +89,8 @@ export default {
           }}
         </p>
         <template v-if="showJiraIssuesIntegration">
-          <input name="service[issues_enabled]" type="hidden" value="false" />
-          <gl-form-checkbox v-model="enableJiraIssues" name="service[issues_enabled]">
+          <input name="service[issues_enabled]" type="hidden" :value="enableJiraIssues || false" />
+          <gl-form-checkbox v-model="enableJiraIssues">
             {{ s__('JiraService|Enable Jira issues') }}
             <template #help>
               {{
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 193afa29d6a014..1d3354c66515b5 100644
--- a/app/assets/javascripts/integrations/edit/components/jira_trigger_fields.vue
+++ b/app/assets/javascripts/integrations/edit/components/jira_trigger_fields.vue
@@ -56,7 +56,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['disableForm']),
+    ...mapGetters(['isInheriting']),
     showEnableComments() {
       return this.triggerCommit || this.triggerMergeRequest;
     },
@@ -75,21 +75,17 @@ export default {
         )
       "
     >
-      <input name="service[commit_events]" type="hidden" value="false" />
-      <gl-form-checkbox
-        v-model="triggerCommit"
-        name="service[commit_events]"
-        :disabled="disableForm"
-      >
+      <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"
+      <input
         name="service[merge_requests_events]"
-        :disabled="disableForm"
-      >
+        type="hidden"
+        :value="triggerMergeRequest || false"
+      />
+      <gl-form-checkbox v-model="triggerMergeRequest" :disabled="isInheriting">
         {{ __('Merge request') }}
       </gl-form-checkbox>
     </gl-form-group>
@@ -99,12 +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"
+      <input
         name="service[comment_on_event_enabled]"
-        :disabled="disableForm"
-      >
+        type="hidden"
+        :value="enableComments || false"
+      />
+      <gl-form-checkbox v-model="enableComments" :disabled="isInheriting">
         {{ s__('Integrations|Enable comments') }}
       </gl-form-checkbox>
     </gl-form-group>
@@ -114,13 +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="disableForm"
+        :disabled="isInheriting"
       >
         {{ commentDetailOption.label }}
         <template #help>
@@ -141,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>
 
@@ -159,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>
 
@@ -168,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
index 4922640420a4b0..0ae2f26743458a 100644
--- a/app/assets/javascripts/integrations/edit/components/override_dropdown.vue
+++ b/app/assets/javascripts/integrations/edit/components/override_dropdown.vue
@@ -1,42 +1,44 @@
 <script>
 import { s__ } from '~/locale';
-import { mapState } from 'vuex';
 import { GlNewDropdown, GlNewDropdownItem } from '@gitlab/ui';
 
-const options = [
+const dropdownOptions = [
   {
-    value: 'instance',
+    value: false,
     text: s__('Integrations|Use instance level settings'),
   },
   {
-    value: 'project',
+    value: true,
     text: s__('Integrations|Use custom settings'),
   },
 ];
 
-const defaultOption = options[0];
-const customOption = options[1];
-
 export default {
+  dropdownOptions,
   name: 'OverrideDropdown',
   components: {
     GlNewDropdown,
     GlNewDropdownItem,
   },
-  props: {},
+  props: {
+    inheritFromId: {
+      type: Number,
+      required: true,
+    },
+    override: {
+      type: Boolean,
+      required: true,
+    },
+  },
   data() {
     return {
-      options,
-      selected: defaultOption,
+      selected: dropdownOptions.find(x => x.value === this.override),
     };
   },
-  computed: {
-    ...mapState(['override']),
-  },
   methods: {
     onClick(option) {
       this.selected = option;
-      this.$store.dispatch('setOverride', option === customOption);
+      this.$emit('change', option.value);
     },
   },
 };
@@ -47,8 +49,13 @@ export default {
     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" :key="option.value" @click="onClick(option)">
+      <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>
diff --git a/app/assets/javascripts/integrations/edit/components/trigger_fields.vue b/app/assets/javascripts/integrations/edit/components/trigger_fields.vue
index 3768d3e633bc3a..bb1e0d9d36021e 100644
--- a/app/assets/javascripts/integrations/edit/components/trigger_fields.vue
+++ b/app/assets/javascripts/integrations/edit/components/trigger_fields.vue
@@ -33,7 +33,7 @@ export default {
     },
   },
   computed: {
-    ...mapGetters(['disableForm']),
+    ...mapGetters(['isInheriting']),
     placeholder() {
       return placeholderForType[this.type];
     },
@@ -59,12 +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)"
-          :disabled="disableForm"
-        >
+        <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
@@ -72,7 +68,7 @@ export default {
           v-model="event.field.value"
           :name="fieldName(event.field.name)"
           :placeholder="placeholder"
-          :disabled="disableForm"
+          :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 e3cee590e0c0a5..ea5463832cef25 100644
--- a/app/assets/javascripts/integrations/edit/index.js
+++ b/app/assets/javascripts/integrations/edit/index.js
@@ -1,23 +1,19 @@
 import Vue from 'vue';
-import { isEmpty } from 'lodash';
 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;
+}
 
+function parseDatasetToProps(data) {
   const {
+    id,
     type,
     commentDetail,
     projectKey,
@@ -27,7 +23,7 @@ export default el => {
     fields,
     inheritFromId,
     ...booleanAttributes
-  } = el.dataset;
+  } = data;
   const {
     showActive,
     activated,
@@ -38,38 +34,53 @@ export default el => {
     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 = {
-    overrideAvailable: !isEmpty(inheritFromId),
+    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,
-          },
-          jiraIssuesProps: {
-            showJiraIssuesIntegration,
-            initialEnableJiraIssues: enableJiraIssues,
-            initialProjectKey: projectKey,
-            upgradePlanPath,
-            editProjectPath,
-          },
-          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
index 0ba69515e0ece9..3decdaab55d953 100644
--- a/app/assets/javascripts/integrations/edit/store/actions.js
+++ b/app/assets/javascripts/integrations/edit/store/actions.js
@@ -1,6 +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);
-
-export const setOverrideAvailable = ({ commit }, overrideAvailable) =>
-  commit(types.SET_OVERRIDE_AVAILABLE, overrideAvailable);
diff --git a/app/assets/javascripts/integrations/edit/store/getters.js b/app/assets/javascripts/integrations/edit/store/getters.js
index 072d219e52813d..b68bd66898046e 100644
--- a/app/assets/javascripts/integrations/edit/store/getters.js
+++ b/app/assets/javascripts/integrations/edit/store/getters.js
@@ -1,2 +1,6 @@
-// eslint-disable-next-line import/prefer-default-export
-export const disableForm = state => state.overrideAvailable && !state.override;
+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
index f28009827dbae5..eea5e48780d611 100644
--- a/app/assets/javascripts/integrations/edit/store/index.js
+++ b/app/assets/javascripts/integrations/edit/store/index.js
@@ -7,6 +7,7 @@ import createState from './state';
 
 Vue.use(Vuex);
 
+// eslint-disable-next-line import/prefer-default-export
 export const createStore = (initialState = {}) =>
   new Vuex.Store({
     actions,
@@ -14,5 +15,3 @@ export const createStore = (initialState = {}) =>
     mutations,
     state: createState(initialState),
   });
-
-export default createStore();
diff --git a/app/assets/javascripts/integrations/edit/store/mutation_types.js b/app/assets/javascripts/integrations/edit/store/mutation_types.js
index bb880a394893de..274afe3fb4902e 100644
--- a/app/assets/javascripts/integrations/edit/store/mutation_types.js
+++ b/app/assets/javascripts/integrations/edit/store/mutation_types.js
@@ -1,2 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
 export const SET_OVERRIDE = 'SET_OVERRIDE';
-export const SET_OVERRIDE_AVAILABLE = 'SET_OVERRIDE_AVAILABLE';
diff --git a/app/assets/javascripts/integrations/edit/store/mutations.js b/app/assets/javascripts/integrations/edit/store/mutations.js
index fa71c60d37ef11..8757d41519777e 100644
--- a/app/assets/javascripts/integrations/edit/store/mutations.js
+++ b/app/assets/javascripts/integrations/edit/store/mutations.js
@@ -4,8 +4,4 @@ export default {
   [types.SET_OVERRIDE](state, override) {
     state.override = override;
   },
-
-  [types.SET_OVERRIDE_AVAILABLE](state, overrideAvailable) {
-    state.overrideAvailable = overrideAvailable;
-  },
 };
diff --git a/app/assets/javascripts/integrations/edit/store/state.js b/app/assets/javascripts/integrations/edit/store/state.js
index 72e91559a55a1e..95c1a2be500027 100644
--- a/app/assets/javascripts/integrations/edit/store/state.js
+++ b/app/assets/javascripts/integrations/edit/store/state.js
@@ -1,4 +1,9 @@
-export default ({ overrideAvailable = false }) => ({
-  override: false,
-  overrideAvailable,
-});
+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 8844cbebe85076..837409a91cae66 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();
diff --git a/app/views/shared/_service_settings.html.haml b/app/views/shared/_service_settings.html.haml
index b144f59d1fc978..7d93dca22f54d4 100644
--- a/app/views/shared/_service_settings.html.haml
+++ b/app/views/shared/_service_settings.html.haml
@@ -8,6 +8,8 @@
       = markdown integration.help
 
 .service-settings
+  - if @admin_integration
+    .js-vue-admin-integration-settings{ data: integration_form_data(@admin_integration) }
   .js-vue-integration-settings{ data: integration_form_data(integration) }
 
   - if show_service_trigger_events?(integration)
diff --git a/spec/features/projects/services/disable_triggers_spec.rb b/spec/features/projects/services/disable_triggers_spec.rb
index 8f87d0e7ff195b..b3a3d7f0622ab2 100644
--- a/spec/features/projects/services/disable_triggers_spec.rb
+++ b/spec/features/projects/services/disable_triggers_spec.rb
@@ -5,7 +5,7 @@
 RSpec.describe 'Disable individual triggers', :js do
   include_context 'project service activation'
 
-  let(:checkbox_selector) { 'input[type=checkbox][name$="_events]"]' }
+  let(:checkbox_selector) { 'input[name$="_events]"]' }
 
   before do
     visit_project_integration(service_name)
@@ -18,7 +18,7 @@
       event_count = HipchatService.supported_events.count
 
       expect(page).to have_content "Trigger"
-      expect(page).to have_css(checkbox_selector, count: event_count)
+      expect(page).to have_css(checkbox_selector, visible: :all, count: event_count)
     end
   end
 
@@ -27,7 +27,7 @@
 
     it "doesn't show unnecessary Trigger checkboxes" do
       expect(page).not_to have_content "Trigger"
-      expect(page).not_to have_css(checkbox_selector)
+      expect(page).not_to have_css(checkbox_selector, visible: :all)
     end
   end
 end
diff --git a/spec/frontend/integrations/edit/components/active_toggle_spec.js b/spec/frontend/integrations/edit/components/active_toggle_spec.js
index 5469b45f708898..228d8f5fc30981 100644
--- a/spec/frontend/integrations/edit/components/active_toggle_spec.js
+++ b/spec/frontend/integrations/edit/components/active_toggle_spec.js
@@ -1,8 +1,10 @@
 import { mount } from '@vue/test-utils';
-import ActiveToggle from '~/integrations/edit/components/active_toggle.vue';
 import { GlToggle } from '@gitlab/ui';
 
+import ActiveToggle from '~/integrations/edit/components/active_toggle.vue';
+
 const GL_TOGGLE_ACTIVE_CLASS = 'is-checked';
+const GL_TOGGLE_DISABLED_CLASS = 'is-disabled';
 
 describe('ActiveToggle', () => {
   let wrapper;
@@ -11,9 +13,12 @@ describe('ActiveToggle', () => {
     initialActivated: true,
   };
 
-  const createComponent = props => {
+  const createComponent = (props = {}, isInheriting = false) => {
     wrapper = mount(ActiveToggle, {
       propsData: { ...defaultProps, ...props },
+      computed: {
+        isInheriting: () => isInheriting,
+      },
     });
   };
 
@@ -29,6 +34,15 @@ describe('ActiveToggle', () => {
   const findInputInToggle = () => findGlToggle().find('input');
 
   describe('template', () => {
+    describe('is inheriting adminSettings', () => {
+      it('renders GlToggle as disabled', () => {
+        createComponent({}, true);
+
+        expect(findGlToggle().exists()).toBe(true);
+        expect(findButtonInToggle().classes()).toContain(GL_TOGGLE_DISABLED_CLASS);
+      });
+    });
+
     describe('initialActivated is false', () => {
       it('renders GlToggle as inactive', () => {
         createComponent({
diff --git a/spec/frontend/integrations/edit/components/dynamic_field_spec.js b/spec/frontend/integrations/edit/components/dynamic_field_spec.js
index 894375387a608b..3a7a0efcab7a86 100644
--- a/spec/frontend/integrations/edit/components/dynamic_field_spec.js
+++ b/spec/frontend/integrations/edit/components/dynamic_field_spec.js
@@ -1,5 +1,4 @@
 import { mount } from '@vue/test-utils';
-import { createStore } from '~/integrations/edit/store';
 import DynamicField from '~/integrations/edit/components/dynamic_field.vue';
 import { GlFormGroup, GlFormCheckbox, GlFormInput, GlFormSelect, GlFormTextarea } from '@gitlab/ui';
 
@@ -15,10 +14,12 @@ describe('DynamicField', () => {
     value: '1',
   };
 
-  const createComponent = props => {
+  const createComponent = (props, isInheriting = false) => {
     wrapper = mount(DynamicField, {
       propsData: { ...defaultProps, ...props },
-      store: createStore(),
+      computed: {
+        isInheriting: () => isInheriting,
+      },
     });
   };
 
@@ -36,108 +37,143 @@ describe('DynamicField', () => {
   const findGlFormTextarea = () => wrapper.find(GlFormTextarea);
 
   describe('template', () => {
-    describe('dynamic field', () => {
-      describe('type is checkbox', () => {
-        beforeEach(() => {
-          createComponent({
-            type: 'checkbox',
+    describe.each([[true, 'disabled', 'readonly'], [false, undefined, undefined]])(
+      'dynamic field, when isInheriting = `%p`',
+      (isInheriting, disabled, readonly) => {
+        describe('type is checkbox', () => {
+          beforeEach(() => {
+            createComponent(
+              {
+                type: 'checkbox',
+              },
+              isInheriting,
+            );
           });
-        });
 
-        it('renders GlFormCheckbox', () => {
-          expect(findGlFormCheckbox().exists()).toBe(true);
-        });
+          it(`renders GlFormCheckbox, which ${isInheriting ? 'is' : 'is not'} disabled`, () => {
+            expect(findGlFormCheckbox().exists()).toBe(true);
+            expect(
+              findGlFormCheckbox()
+                .find('[type=checkbox]')
+                .attributes('disabled'),
+            ).toBe(disabled);
+          });
 
-        it('does not render other types of input', () => {
-          expect(findGlFormSelect().exists()).toBe(false);
-          expect(findGlFormTextarea().exists()).toBe(false);
-          expect(findGlFormInput().exists()).toBe(false);
+          it('does not render other types of input', () => {
+            expect(findGlFormSelect().exists()).toBe(false);
+            expect(findGlFormTextarea().exists()).toBe(false);
+            expect(findGlFormInput().exists()).toBe(false);
+          });
         });
-      });
 
-      describe('type is select', () => {
-        beforeEach(() => {
-          createComponent({
-            type: 'select',
-            choices: [['all', 'All details'], ['standard', 'Standard']],
+        describe('type is select', () => {
+          beforeEach(() => {
+            createComponent(
+              {
+                type: 'select',
+                choices: [['all', 'All details'], ['standard', 'Standard']],
+              },
+              isInheriting,
+            );
           });
-        });
 
-        it('renders findGlFormSelect', () => {
-          expect(findGlFormSelect().exists()).toBe(true);
-          expect(findGlFormSelect().findAll('option')).toHaveLength(2);
-        });
+          it(`renders GlFormSelect, which ${isInheriting ? 'is' : 'is not'} disabled`, () => {
+            expect(findGlFormSelect().exists()).toBe(true);
+            expect(findGlFormSelect().findAll('option')).toHaveLength(2);
+            expect(
+              findGlFormSelect()
+                .find('select')
+                .attributes('disabled'),
+            ).toBe(disabled);
+          });
 
-        it('does not render other types of input', () => {
-          expect(findGlFormCheckbox().exists()).toBe(false);
-          expect(findGlFormTextarea().exists()).toBe(false);
-          expect(findGlFormInput().exists()).toBe(false);
+          it('does not render other types of input', () => {
+            expect(findGlFormCheckbox().exists()).toBe(false);
+            expect(findGlFormTextarea().exists()).toBe(false);
+            expect(findGlFormInput().exists()).toBe(false);
+          });
         });
-      });
 
-      describe('type is textarea', () => {
-        beforeEach(() => {
-          createComponent({
-            type: 'textarea',
+        describe('type is textarea', () => {
+          beforeEach(() => {
+            createComponent(
+              {
+                type: 'textarea',
+              },
+              isInheriting,
+            );
           });
-        });
 
-        it('renders findGlFormTextarea', () => {
-          expect(findGlFormTextarea().exists()).toBe(true);
-        });
+          it(`renders GlFormTextarea, which ${isInheriting ? 'is' : 'is not'} readonly`, () => {
+            expect(findGlFormTextarea().exists()).toBe(true);
+            expect(
+              findGlFormTextarea()
+                .find('textarea')
+                .attributes('readonly'),
+            ).toBe(readonly);
+          });
 
-        it('does not render other types of input', () => {
-          expect(findGlFormCheckbox().exists()).toBe(false);
-          expect(findGlFormSelect().exists()).toBe(false);
-          expect(findGlFormInput().exists()).toBe(false);
+          it('does not render other types of input', () => {
+            expect(findGlFormCheckbox().exists()).toBe(false);
+            expect(findGlFormSelect().exists()).toBe(false);
+            expect(findGlFormInput().exists()).toBe(false);
+          });
         });
-      });
 
-      describe('type is password', () => {
-        beforeEach(() => {
-          createComponent({
-            type: 'password',
+        describe('type is password', () => {
+          beforeEach(() => {
+            createComponent(
+              {
+                type: 'password',
+              },
+              isInheriting,
+            );
           });
-        });
 
-        it('renders GlFormInput', () => {
-          expect(findGlFormInput().exists()).toBe(true);
-          expect(findGlFormInput().attributes('type')).toBe('password');
-        });
+          it(`renders GlFormInput, which ${isInheriting ? 'is' : 'is not'} readonly`, () => {
+            expect(findGlFormInput().exists()).toBe(true);
+            expect(findGlFormInput().attributes('type')).toBe('password');
+            expect(findGlFormInput().attributes('readonly')).toBe(readonly);
+          });
 
-        it('does not render other types of input', () => {
-          expect(findGlFormCheckbox().exists()).toBe(false);
-          expect(findGlFormSelect().exists()).toBe(false);
-          expect(findGlFormTextarea().exists()).toBe(false);
+          it('does not render other types of input', () => {
+            expect(findGlFormCheckbox().exists()).toBe(false);
+            expect(findGlFormSelect().exists()).toBe(false);
+            expect(findGlFormTextarea().exists()).toBe(false);
+          });
         });
-      });
 
-      describe('type is text', () => {
-        beforeEach(() => {
-          createComponent({
-            type: 'text',
-            required: true,
+        describe('type is text', () => {
+          beforeEach(() => {
+            createComponent(
+              {
+                type: 'text',
+                required: true,
+              },
+              isInheriting,
+            );
           });
-        });
 
-        it('renders GlFormInput', () => {
-          expect(findGlFormInput().exists()).toBe(true);
-          expect(findGlFormInput().attributes()).toMatchObject({
-            type: 'text',
-            id: 'service_project_url',
-            name: 'service[project_url]',
-            placeholder: defaultProps.placeholder,
-            required: 'required',
+          it(`renders GlFormInput, which ${isInheriting ? 'is' : 'is not'} readonly`, () => {
+            expect(findGlFormInput().exists()).toBe(true);
+            expect(findGlFormInput().attributes()).toMatchObject({
+              type: 'text',
+              id: 'service_project_url',
+              name: 'service[project_url]',
+              placeholder: defaultProps.placeholder,
+              required: 'required',
+            });
+            expect(findGlFormInput().attributes('readonly')).toBe(readonly);
           });
-        });
 
-        it('does not render other types of input', () => {
-          expect(findGlFormCheckbox().exists()).toBe(false);
-          expect(findGlFormSelect().exists()).toBe(false);
-          expect(findGlFormTextarea().exists()).toBe(false);
+          it('does not render other types of input', () => {
+            expect(findGlFormCheckbox().exists()).toBe(false);
+            expect(findGlFormSelect().exists()).toBe(false);
+            expect(findGlFormTextarea().exists()).toBe(false);
+          });
         });
-      });
-    });
+      },
+    );
 
     describe('help text', () => {
       it('renders description with help text', () => {
diff --git a/spec/frontend/integrations/edit/components/integration_form_spec.js b/spec/frontend/integrations/edit/components/integration_form_spec.js
index 393429b7814d1b..482c6a439f289d 100644
--- a/spec/frontend/integrations/edit/components/integration_form_spec.js
+++ b/spec/frontend/integrations/edit/components/integration_form_spec.js
@@ -1,36 +1,29 @@
 import { shallowMount } from '@vue/test-utils';
 import { createStore } from '~/integrations/edit/store';
 import IntegrationForm from '~/integrations/edit/components/integration_form.vue';
+import OverrideDropdown from '~/integrations/edit/components/override_dropdown.vue';
 import ActiveToggle from '~/integrations/edit/components/active_toggle.vue';
 import JiraTriggerFields from '~/integrations/edit/components/jira_trigger_fields.vue';
 import JiraIssuesFields from '~/integrations/edit/components/jira_issues_fields.vue';
 import TriggerFields from '~/integrations/edit/components/trigger_fields.vue';
 import DynamicField from '~/integrations/edit/components/dynamic_field.vue';
+import { mockIntegrationProps } from 'jest/integrations/edit/mock_data';
 
 describe('IntegrationForm', () => {
   let wrapper;
 
-  const defaultProps = {
-    activeToggleProps: {
-      initialActivated: true,
-    },
-    showActive: true,
-    triggerFieldsProps: {
-      initialTriggerCommit: false,
-      initialTriggerMergeRequest: false,
-      initialEnableComments: false,
-    },
-    jiraIssuesProps: {},
-    type: '',
-  };
-
-  const createComponent = (props, featureFlags = {}) => {
+  const createComponent = (customStateProps = {}, featureFlags = {}, initialState = {}) => {
     wrapper = shallowMount(IntegrationForm, {
-      propsData: { ...defaultProps, ...props },
-      store: createStore(),
+      propsData: {},
+      store: createStore({
+        customState: { ...mockIntegrationProps, ...customStateProps },
+        ...initialState,
+      }),
       stubs: {
+        OverrideDropdown,
         ActiveToggle,
         JiraTriggerFields,
+        TriggerFields,
       },
       provide: {
         glFeatures: featureFlags,
@@ -45,6 +38,7 @@ describe('IntegrationForm', () => {
     }
   });
 
+  const findOverrideDropdown = () => wrapper.find(OverrideDropdown);
   const findActiveToggle = () => wrapper.find(ActiveToggle);
   const findJiraTriggerFields = () => wrapper.find(JiraTriggerFields);
   const findJiraIssuesFields = () => wrapper.find(JiraIssuesFields);
@@ -142,5 +136,35 @@ describe('IntegrationForm', () => {
         });
       });
     });
+
+    describe('adminState state is null', () => {
+      it('does not render OverrideDropdown', () => {
+        createComponent(
+          {},
+          {},
+          {
+            adminState: null,
+          },
+        );
+
+        expect(findOverrideDropdown().exists()).toBe(false);
+      });
+    });
+
+    describe('adminState state is an object', () => {
+      it('renders OverrideDropdown', () => {
+        createComponent(
+          {},
+          {},
+          {
+            adminState: {
+              ...mockIntegrationProps,
+            },
+          },
+        );
+
+        expect(findOverrideDropdown().exists()).toBe(true);
+      });
+    });
   });
 });
diff --git a/spec/frontend/integrations/edit/components/jira_issues_fields_spec.js b/spec/frontend/integrations/edit/components/jira_issues_fields_spec.js
index c89c54bd35dc10..f58825f6297a27 100644
--- a/spec/frontend/integrations/edit/components/jira_issues_fields_spec.js
+++ b/spec/frontend/integrations/edit/components/jira_issues_fields_spec.js
@@ -1,7 +1,9 @@
 import { mount } from '@vue/test-utils';
-import JiraIssuesFields from '~/integrations/edit/components/jira_issues_fields.vue';
+
 import { GlFormCheckbox, GlFormInput } from '@gitlab/ui';
 
+import JiraIssuesFields from '~/integrations/edit/components/jira_issues_fields.vue';
+
 describe('JiraIssuesFields', () => {
   let wrapper;
 
diff --git a/spec/frontend/integrations/edit/components/jira_trigger_fields_spec.js b/spec/frontend/integrations/edit/components/jira_trigger_fields_spec.js
index e4c2a0be6a386c..782930eb6a2ea2 100644
--- a/spec/frontend/integrations/edit/components/jira_trigger_fields_spec.js
+++ b/spec/frontend/integrations/edit/components/jira_trigger_fields_spec.js
@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
-import JiraTriggerFields from '~/integrations/edit/components/jira_trigger_fields.vue';
 import { GlFormCheckbox } from '@gitlab/ui';
+import JiraTriggerFields from '~/integrations/edit/components/jira_trigger_fields.vue';
 
 describe('JiraTriggerFields', () => {
   let wrapper;
@@ -11,9 +11,12 @@ describe('JiraTriggerFields', () => {
     initialEnableComments: false,
   };
 
-  const createComponent = props => {
+  const createComponent = (props, isInheriting = false) => {
     wrapper = mount(JiraTriggerFields, {
       propsData: { ...defaultProps, ...props },
+      computed: {
+        isInheriting: () => isInheriting,
+      },
     });
   };
 
@@ -93,5 +96,23 @@ describe('JiraTriggerFields', () => {
         expect(findCommentDetail().isVisible()).toBe(true);
       });
     });
+
+    it('disables checkboxes and radios if inheriting', () => {
+      createComponent(
+        {
+          initialTriggerCommit: true,
+          initialEnableComments: true,
+        },
+        true,
+      );
+
+      wrapper.findAll('[type=checkbox]').wrappers.forEach(checkbox => {
+        expect(checkbox.attributes('disabled')).toBe('disabled');
+      });
+
+      wrapper.findAll('[type=radio]').wrappers.forEach(radio => {
+        expect(radio.attributes('disabled')).toBe('disabled');
+      });
+    });
   });
 });
diff --git a/spec/frontend/integrations/edit/components/trigger_fields_spec.js b/spec/frontend/integrations/edit/components/trigger_fields_spec.js
index 94b987bffae91a..41bccb8ada006c 100644
--- a/spec/frontend/integrations/edit/components/trigger_fields_spec.js
+++ b/spec/frontend/integrations/edit/components/trigger_fields_spec.js
@@ -1,5 +1,4 @@
 import { mount } from '@vue/test-utils';
-import { createStore } from '~/integrations/edit/store';
 import TriggerFields from '~/integrations/edit/components/trigger_fields.vue';
 import { GlFormGroup, GlFormCheckbox, GlFormInput } from '@gitlab/ui';
 
@@ -10,10 +9,12 @@ describe('TriggerFields', () => {
     type: 'slack',
   };
 
-  const createComponent = props => {
+  const createComponent = (props, isInheriting = false) => {
     wrapper = mount(TriggerFields, {
       propsData: { ...defaultProps, ...props },
-      store: createStore(),
+      computed: {
+        isInheriting: () => isInheriting,
+      },
     });
   };
 
@@ -24,10 +25,11 @@ describe('TriggerFields', () => {
     }
   });
 
+  const findAllGlFormGroups = () => wrapper.find('#trigger-fields').findAll(GlFormGroup);
   const findAllGlFormCheckboxes = () => wrapper.findAll(GlFormCheckbox);
   const findAllGlFormInputs = () => wrapper.findAll(GlFormInput);
 
-  describe('template', () => {
+  describe.each([true, false])('template, isInheriting = `%p`', isInheriting => {
     it('renders a label with text "Trigger"', () => {
       createComponent();
 
@@ -53,9 +55,12 @@ describe('TriggerFields', () => {
       ];
 
       beforeEach(() => {
-        createComponent({
-          events,
-        });
+        createComponent(
+          {
+            events,
+          },
+          isInheriting,
+        );
       });
 
       it('does not render GlFormInput for each event', () => {
@@ -71,8 +76,10 @@ describe('TriggerFields', () => {
         });
       });
 
-      it('renders GlFormCheckbox for each event', () => {
-        const checkboxes = findAllGlFormCheckboxes();
+      it(`renders GlFormCheckbox and corresponding hidden input for each event, which ${
+        isInheriting ? 'is' : 'is not'
+      } disabled`, () => {
+        const checkboxes = findAllGlFormGroups();
         const expectedResults = [
           { labelText: 'Push', inputName: 'service[push_event]' },
           { labelText: 'Merge Request', inputName: 'service[merge_requests_event]' },
@@ -80,14 +87,22 @@ describe('TriggerFields', () => {
         expect(checkboxes).toHaveLength(2);
 
         checkboxes.wrappers.forEach((checkbox, index) => {
+          const checkBox = checkbox.find(GlFormCheckbox);
+
           expect(checkbox.find('label').text()).toBe(expectedResults[index].labelText);
-          expect(checkbox.find('input').attributes('name')).toBe(expectedResults[index].inputName);
-          expect(checkbox.vm.$attrs.checked).toBe(events[index].value);
+          expect(checkbox.find('[type=hidden]').attributes('name')).toBe(
+            expectedResults[index].inputName,
+          );
+          expect(checkbox.find('[type=hidden]').attributes('value')).toBe(
+            events[index].value.toString(),
+          );
+          expect(checkBox.vm.$attrs.disabled).toBe(isInheriting);
+          expect(checkBox.vm.$attrs.checked).toBe(events[index].value);
         });
       });
     });
 
-    describe('events with field property', () => {
+    describe('events with field property, isInheriting = `%p`', () => {
       const events = [
         {
           field: {
@@ -104,16 +119,21 @@ describe('TriggerFields', () => {
       ];
 
       beforeEach(() => {
-        createComponent({
-          events,
-        });
+        createComponent(
+          {
+            events,
+          },
+          isInheriting,
+        );
       });
 
       it('renders GlFormCheckbox for each event', () => {
         expect(findAllGlFormCheckboxes()).toHaveLength(2);
       });
 
-      it('renders GlFormInput for each event', () => {
+      it(`renders GlFormInput for each event, which ${
+        isInheriting ? 'is' : 'is not'
+      } readonly`, () => {
         const fields = findAllGlFormInputs();
         const expectedResults = [
           {
@@ -130,6 +150,7 @@ describe('TriggerFields', () => {
 
         fields.wrappers.forEach((field, index) => {
           expect(field.attributes()).toMatchObject(expectedResults[index]);
+          expect(field.vm.$attrs.readonly).toBe(isInheriting);
           expect(field.vm.$attrs.value).toBe(events[index].field.value);
         });
       });
diff --git a/spec/frontend/integrations/edit/mock_data.js b/spec/frontend/integrations/edit/mock_data.js
new file mode 100644
index 00000000000000..da2758ec15c8ab
--- /dev/null
+++ b/spec/frontend/integrations/edit/mock_data.js
@@ -0,0 +1,18 @@
+// eslint-disable-next-line import/prefer-default-export
+export const mockIntegrationProps = {
+  id: 25,
+  activeToggleProps: {
+    initialActivated: true,
+  },
+  showActive: true,
+  triggerFieldsProps: {
+    initialTriggerCommit: false,
+    initialTriggerMergeRequest: false,
+    initialEnableComments: false,
+  },
+  jiraIssuesProps: {},
+  triggerEvents: [],
+  fields: [],
+  type: '',
+  inheritFromId: 25,
+};
diff --git a/spec/frontend/integrations/edit/store/actions_spec.js b/spec/frontend/integrations/edit/store/actions_spec.js
new file mode 100644
index 00000000000000..c3ce6e51a3d704
--- /dev/null
+++ b/spec/frontend/integrations/edit/store/actions_spec.js
@@ -0,0 +1,19 @@
+import createState from '~/integrations/edit/store/state';
+import { setOverride } from '~/integrations/edit/store/actions';
+import * as types from '~/integrations/edit/store/mutation_types';
+
+import testAction from 'helpers/vuex_action_helper';
+
+describe('Integration form store actions', () => {
+  let state;
+
+  beforeEach(() => {
+    state = createState();
+  });
+
+  describe('setOverride', () => {
+    it('should commit override mutation', () => {
+      return testAction(setOverride, true, state, [{ type: types.SET_OVERRIDE, payload: true }]);
+    });
+  });
+});
diff --git a/spec/frontend/integrations/edit/store/getters_spec.js b/spec/frontend/integrations/edit/store/getters_spec.js
new file mode 100644
index 00000000000000..700d36edaad291
--- /dev/null
+++ b/spec/frontend/integrations/edit/store/getters_spec.js
@@ -0,0 +1,71 @@
+import { currentKey, isInheriting, propsSource } from '~/integrations/edit/store/getters';
+import createState from '~/integrations/edit/store/state';
+import { mockIntegrationProps } from '../mock_data';
+
+describe('Integration form store getters', () => {
+  let state;
+  const customState = { ...mockIntegrationProps, type: 'CustomState' };
+  const adminState = { ...mockIntegrationProps, type: 'AdminState' };
+
+  beforeEach(() => {
+    state = createState({ customState });
+  });
+
+  describe('isInheriting', () => {
+    describe('when adminState is null', () => {
+      it('returns false', () => {
+        expect(isInheriting(state)).toBe(false);
+      });
+    });
+
+    describe('when adminState is an object', () => {
+      beforeEach(() => {
+        state.adminState = adminState;
+      });
+
+      describe('when override is false', () => {
+        beforeEach(() => {
+          state.override = false;
+        });
+
+        it('returns false', () => {
+          expect(isInheriting(state)).toBe(true);
+        });
+      });
+
+      describe('when override is true', () => {
+        beforeEach(() => {
+          state.override = true;
+        });
+
+        it('returns true', () => {
+          expect(isInheriting(state)).toBe(false);
+        });
+      });
+    });
+  });
+
+  describe('propsSource', () => {
+    beforeEach(() => {
+      state.adminState = adminState;
+    });
+
+    it('equals adminState if inheriting', () => {
+      expect(propsSource(state, { isInheriting: true })).toEqual(adminState);
+    });
+
+    it('equals customState if not inheriting', () => {
+      expect(propsSource(state, { isInheriting: false })).toEqual(customState);
+    });
+  });
+
+  describe('currentKey', () => {
+    it('equals `admin` if inheriting', () => {
+      expect(currentKey(state, { isInheriting: true })).toEqual('admin');
+    });
+
+    it('equals `custom` if not inheriting', () => {
+      expect(currentKey(state, { isInheriting: false })).toEqual('custom');
+    });
+  });
+});
diff --git a/spec/frontend/integrations/edit/store/mutations_spec.js b/spec/frontend/integrations/edit/store/mutations_spec.js
new file mode 100644
index 00000000000000..4b733726d44a5d
--- /dev/null
+++ b/spec/frontend/integrations/edit/store/mutations_spec.js
@@ -0,0 +1,19 @@
+import mutations from '~/integrations/edit/store/mutations';
+import createState from '~/integrations/edit/store/state';
+import * as types from '~/integrations/edit/store/mutation_types';
+
+describe('Integration form store mutations', () => {
+  let state;
+
+  beforeEach(() => {
+    state = createState();
+  });
+
+  describe(`${types.SET_OVERRIDE}`, () => {
+    it('sets override', () => {
+      mutations[types.SET_OVERRIDE](state, true);
+
+      expect(state.override).toBe(true);
+    });
+  });
+});
diff --git a/spec/frontend/integrations/edit/store/state_spec.js b/spec/frontend/integrations/edit/store/state_spec.js
new file mode 100644
index 00000000000000..a8b431aa310fdf
--- /dev/null
+++ b/spec/frontend/integrations/edit/store/state_spec.js
@@ -0,0 +1,26 @@
+import createState from '~/integrations/edit/store/state';
+
+describe('Integration form state factory', () => {
+  it('states default to null', () => {
+    expect(createState()).toEqual({
+      adminState: null,
+      customState: {},
+      override: false,
+    });
+  });
+
+  describe('override is initialized correctly', () => {
+    it.each([
+      [{ id: 25 }, { inheritFromId: null }, true],
+      [{ id: 25 }, { inheritFromId: 27 }, true],
+      [{ id: 25 }, { inheritFromId: 25 }, false],
+      [null, { inheritFromId: null }, false],
+      [null, { inheritFromId: 25 }, false],
+    ])(
+      'for adminState: %p, customState: %p: override = `%p`',
+      (adminState, customState, expected) => {
+        expect(createState({ adminState, customState }).override).toEqual(expected);
+      },
+    );
+  });
+});
-- 
GitLab