Commit 31f2788f authored by Paul Slaughter's avatar Paul Slaughter

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
parents b52d73ca 425890c6
import { s__, __ } from '~/locale';
export const integrationLevels = {
PROJECT: 'project',
GROUP: 'group',
INSTANCE: 'instance',
};
......
......@@ -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;
......
......@@ -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);
},
});
}
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;
......
......@@ -113,7 +113,7 @@ export default {
return '';
},
},
created() {
mounted() {
if (this.initialIsEnabled) {
this.requestJiraIssueTypes();
}
......
......@@ -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,
},
});
......
......@@ -13,6 +13,7 @@ export const mockIntegrationProps = {
fields: [],
type: '',
inheritFromId: 25,
integrationLevel: 'project',
};
export const mockJiraIssueTypes = [
......
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;
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment