Increase pipeline editor debounce to 500ms

Instead of a debounce of 250ms on input, we want
to set it to 500ms to reduce the number of queries
we send to the API while writing a CI config.

Changelog: changed

app/assets/javascripts/pipeline_editor/components/editor/text_editor.vue

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

app/assets/javascripts/pipeline_editor/constants.js

@@ -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';
 

app/assets/javascripts/vue_shared/components/source_editor.vue

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

spec/frontend/pipeline_editor/components/editor/text_editor_spec.js

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

spec/frontend/snippets/components/__snapshots__/snippet_blob_edit_spec.js.snap

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