Merge branch '332280-integration-settings-template-refactor-vue-app' into 'master'

Use provide instead of props for IntegrationForm

See merge request gitlab-org/gitlab!81811

app/assets/javascripts/integrations/constants.js

 import { s__, __ } from '~/locale';
 
 export const integrationLevels = {
+  PROJECT: 'project',
   GROUP: 'group',
   INSTANCE: 'instance',
 };

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

@@ -3,6 +3,7 @@ import { GlButton, GlModalDirective, GlSafeHtmlDirective as SafeHtml, GlForm } f
 import axios from 'axios';
 import * as Sentry from '@sentry/browser';
 import { mapState, mapActions, mapGetters } from 'vuex';
+
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import {
   I18N_FETCH_TEST_SETTINGS_DEFAULT_ERROR_MESSAGE,
@@ -41,10 +42,8 @@ export default {
     SafeHtml,
   },
   mixins: [glFeatureFlagsMixin()],
-  props: {
+  inject: {
     helpHtml: {
-      type: String,
-      required: false,
       default: '',
     },
   },
@@ -81,28 +80,28 @@ export default {
     disableButtons() {
       return Boolean(this.isSaving || this.isResetting || this.isTesting);
     },
-    form() {
-      return this.$refs.integrationForm.$el;
-    },
   },
   methods: {
     ...mapActions(['setOverride', 'requestJiraIssueTypes']),
+    form() {
+      return this.$refs.integrationForm.$el;
+    },
     setIsValidated() {
       this.isValidated = true;
     },
     onSaveClick() {
       this.isSaving = true;
 
-      if (this.integrationActive && !this.form.checkValidity()) {
+      if (this.integrationActive && !this.form().checkValidity()) {
         this.isSaving = false;
         this.setIsValidated();
         return;
       }
 
-      this.form.submit();
+      this.form().submit();
     },
     onTestClick() {
-      if (!this.form.checkValidity()) {
+      if (!this.form().checkValidity()) {
         this.setIsValidated();
         return;
       }
@@ -147,7 +146,7 @@ export default {
       this.requestJiraIssueTypes(this.getFormData());
     },
     getFormData() {
-      return new FormData(this.form);
+      return new FormData(this.form());
     },
     onToggleIntegrationState(integrationActive) {
       this.integrationActive = integrationActive;

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

@@ -116,13 +116,13 @@ export default function initIntegrationSettingsForm() {
 
   return new Vue({
     el: customSettingsEl,
+    name: 'IntegrationEditRoot',
     store: createStore(initialState),
-    render(createElement) {
-      return createElement(IntegrationForm, {
-        props: {
+    provide: {
       helpHtml,
     },
-      });
+    render(createElement) {
+      return createElement(IntegrationForm);
     },
   });
 }

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

+import { integrationLevels } from '~/integrations/constants';
+
 export const isInheriting = (state) => (state.defaultState === null ? false : !state.override);
 
+export const isProjectLevel = (state) =>
+  state.customState.integrationLevel === integrationLevels.PROJECT;
+
 export const propsSource = (state, getters) =>
   getters.isInheriting ? state.defaultState : state.customState;
 

ee/app/assets/javascripts/integrations/edit/components/jira_issue_creation_vulnerabilities.vue

@@ -113,7 +113,7 @@ export default {
       return '';
     },
   },
-  created() {
+  mounted() {
     if (this.initialIsEnabled) {
       this.requestJiraIssueTypes();
     }

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

@@ -37,7 +37,7 @@ describe('IntegrationForm', () => {
   const createComponent = ({
     customStateProps = {},
     initialState = {},
-    props = {},
+    provide = {},
     mountFn = shallowMountExtended,
   } = {}) => {
     const store = createStore({
@@ -47,7 +47,7 @@ describe('IntegrationForm', () => {
     dispatch = jest.spyOn(store, 'dispatch').mockImplementation();
 
     wrapper = mountFn(IntegrationForm, {
-      propsData: { ...props },
+      provide,
       store,
       stubs: {
         OverrideDropdown,
@@ -300,7 +300,7 @@ describe('IntegrationForm', () => {
       });
     });
 
-    describe('with `helpHtml` prop', () => {
+    describe('with `helpHtml` provided', () => {
       const mockTestId = 'jest-help-html-test';
 
       setHTMLFixture(`
@@ -316,7 +316,7 @@ describe('IntegrationForm', () => {
         const mockHelpHtml = document.querySelector(`[data-testid="${mockTestId}"]`);
 
         createComponent({
-          props: {
+          provide: {
             helpHtml: mockHelpHtml.outerHTML,
           },
         });

spec/frontend/integrations/edit/mock_data.js

@@ -13,6 +13,7 @@ export const mockIntegrationProps = {
   fields: [],
   type: '',
   inheritFromId: 25,
+  integrationLevel: 'project',
 };
 
 export const mockJiraIssueTypes = [

spec/frontend/integrations/edit/store/getters_spec.js

-import { currentKey, isInheriting, propsSource } from '~/integrations/edit/store/getters';
+import {
+  currentKey,
+  isInheriting,
+  isProjectLevel,
+  propsSource,
+} from '~/integrations/edit/store/getters';
+
 import createState from '~/integrations/edit/store/state';
+import { integrationLevels } from '~/integrations/constants';
 import { mockIntegrationProps } from '../mock_data';
 
 describe('Integration form store getters', () => {
@@ -45,6 +52,18 @@ describe('Integration form store getters', () => {
     });
   });
 
+  describe('isProjectLevel', () => {
+    it.each`
+      integrationLevel              | expected
+      ${integrationLevels.PROJECT}  | ${true}
+      ${integrationLevels.GROUP}    | ${false}
+      ${integrationLevels.INSTANCE} | ${false}
+    `('when integrationLevel is `$integrationLevel`', ({ integrationLevel, expected }) => {
+      state.customState.integrationLevel = integrationLevel;
+      expect(isProjectLevel(state)).toBe(expected);
+    });
+  });
+
   describe('propsSource', () => {
     beforeEach(() => {
       state.defaultState = defaultState;