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

app/assets/javascripts/integrations/edit/components/override_dropdown.vue

 <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 }}

app/assets/javascripts/integrations/edit/index.js

 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: {

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();

app/assets/javascripts/integrations/edit/store/state.js

-export default () => ({
+export default ({ overrideAvailable = false }) => ({
   override: false,
-  overrideAvailable: true, // TODO: Should default to false and be passed from the backend
+  overrideAvailable,
 });

app/helpers/services_helper.rb

@@ -109,7 +109,8 @@ module ServicesHelper
       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
 

changelogs/unreleased/218250-project-level-integration-implement-project-level-setting-selector.yml

+---
+title: Add override selector for project-level integrations
+merge_request: 34742
+author:
+type: added

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 ""
 

spec/frontend/integrations/edit/components/dynamic_field_spec.js

 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(),
     });
   };
 

spec/frontend/integrations/edit/components/integration_form_spec.js

 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,

spec/frontend/integrations/edit/components/trigger_fields_spec.js

 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(),
     });
   };