Commit 7dbc53af authored by Enrique Alcántara's avatar Enrique Alcántara

Merge branch '353547-increase-debounce-rate-for-pipeline-editor-validation-to-500ms' into 'master'

Increase debounce rate for Pipeline Editor validation to 500ms

See merge request gitlab-org/gitlab!81534
parents f1ec7d36 c6de5d89
......@@ -3,6 +3,7 @@ import { EDITOR_READY_EVENT } from '~/editor/constants';
import { CiSchemaExtension } from '~/editor/extensions/source_editor_ci_schema_ext';
import SourceEditor from '~/vue_shared/components/source_editor.vue';
import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
import { SOURCE_EDITOR_DEBOUNCE } from '../../constants';
export default {
editorOptions: {
......@@ -10,6 +11,7 @@ export default {
// autocomplete for keywords
quickSuggestions: true,
},
debounceValue: SOURCE_EDITOR_DEBOUNCE,
components: {
SourceEditor,
},
......@@ -34,6 +36,7 @@ export default {
<div class="gl-border-solid gl-border-gray-100 gl-border-1 gl-border-t-none!">
<source-editor
ref="editor"
:debounce-value="$options.debounceValue"
:editor-options="$options.editorOptions"
:file-name="ciConfigPath"
v-bind="$attrs"
......
......@@ -47,6 +47,7 @@ export const DRAWER_EXPANDED_KEY = 'pipeline_editor_drawer_expanded';
export const BRANCH_PAGINATION_LIMIT = 20;
export const BRANCH_SEARCH_DEBOUNCE = '500';
export const SOURCE_EDITOR_DEBOUNCE = 500;
export const STARTER_TEMPLATE_NAME = 'Getting-Started';
......
......@@ -46,6 +46,11 @@ export default {
required: false,
default: () => ({}),
},
debounceValue: {
type: Number,
required: false,
default: CONTENT_UPDATE_DEBOUNCE,
},
},
data() {
return {
......@@ -73,9 +78,7 @@ export default {
...this.editorOptions,
});
this.editor.onDidChangeModelContent(
debounce(this.onFileChange.bind(this), CONTENT_UPDATE_DEBOUNCE),
);
this.editor.onDidChangeModelContent(debounce(this.onFileChange.bind(this), this.debounceValue));
},
beforeDestroy() {
this.editor.dispose();
......
import { shallowMount } from '@vue/test-utils';
import { EDITOR_READY_EVENT } from '~/editor/constants';
import { SOURCE_EDITOR_DEBOUNCE } from '~/pipeline_editor/constants';
import TextEditor from '~/pipeline_editor/components/editor/text_editor.vue';
import {
mockCiConfigPath,
......@@ -22,7 +23,7 @@ describe('Pipeline Editor | Text editor component', () => {
const MockSourceEditor = {
template: '<div/>',
props: ['value', 'fileName'],
props: ['value', 'fileName', 'editorOptions', 'debounceValue'],
};
const createComponent = (glFeatures = {}, mountFn = shallowMount) => {
......@@ -90,6 +91,14 @@ describe('Pipeline Editor | Text editor component', () => {
expect(findEditor().props('fileName')).toBe(mockCiConfigPath);
});
it('passes down editor configs options', () => {
expect(findEditor().props('editorOptions')).toEqual({ quickSuggestions: true });
});
it('passes down editor debounce value', () => {
expect(findEditor().props('debounceValue')).toBe(SOURCE_EDITOR_DEBOUNCE);
});
it('bubbles up events', () => {
findEditor().vm.$emit(EDITOR_READY_EVENT, editorInstanceDetail);
......
......@@ -14,6 +14,7 @@ exports[`Snippet Blob Edit component with loaded blob matches snapshot 1`] = `
/>
<source-editor-stub
debouncevalue="250"
editoroptions="[object Object]"
fileglobalid="blob_local_7"
filename="foo/bar/test.md"
......
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