Update compliance pipeline input to use debounce

This updates the compliance pipeline configuration input to
debounce its validation network request.

ee/app/assets/javascripts/groups/settings/compliance_frameworks/components/shared_form.vue

 <script>
 import { GlButton, GlForm, GlFormGroup, GlFormInput, GlLink, GlSprintf } from '@gitlab/ui';
+import { debounce } from 'lodash';
 
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { validateHexColor } from '~/lib/utils/color_utils';
 import { __, s__ } from '~/locale';
 import ColorPicker from '~/vue_shared/components/color_picker/color_picker.vue';
+import { DEBOUNCE_DELAY } from '../constants';
 import { fetchPipelineConfigurationFileExists, validatePipelineConfirmationFormat } from '../utils';
 
 export default {
@@ -106,20 +108,23 @@ export default {
   },
   async created() {
     if (this.pipelineConfigurationFullPath) {
-      this.pipelineConfigurationFileExists = await fetchPipelineConfigurationFileExists(
-        this.pipelineConfigurationFullPath,
-      );
+      this.validatePipelineConfigurationPath(this.pipelineConfigurationFullPath);
     }
   },
   methods: {
     onSubmit() {
       this.$emit('submit');
     },
-    async updatePipelineConfiguration(path) {
+    onPipelineInput(path) {
       this.$emit('update:pipelineConfigurationFullPath', path);
-
+      this.validatePipelineInput(path);
+    },
+    async validatePipelineConfigurationPath(path) {
       this.pipelineConfigurationFileExists = await fetchPipelineConfigurationFileExists(path);
     },
+    validatePipelineInput: debounce(function debounceValidation(path) {
+      this.validatePipelineConfigurationPath(path);
+    }, DEBOUNCE_DELAY),
   },
   i18n: {
     titleInputLabel: __('Title'),
@@ -206,7 +211,7 @@ export default {
         :value="pipelineConfigurationFullPath"
         :state="isValidPipelineConfiguration"
         data-testid="pipeline-configuration-input"
-        @input="updatePipelineConfiguration"
+        @input="onPipelineInput"
       />
     </gl-form-group>
 

ee/app/assets/javascripts/groups/settings/compliance_frameworks/constants.js

@@ -17,3 +17,5 @@ export const EDIT_PATH_ID_FORMAT = /\/id\//;
 
 // Check that it matches the format [FILE].y(a)ml@[GROUP]/[PROJECT]
 export const PIPELINE_CONFIGURATION_PATH_FORMAT = /^([^@]*\.ya?ml)@([^/]*)\/(.*)$/;
+
+export const DEBOUNCE_DELAY = 250;

ee/spec/frontend/groups/settings/compliance_frameworks/components/shared_form_spec.js

@@ -226,7 +226,7 @@ describe('SharedForm', () => {
   });
 
   describe('On pipeline configuration path input', () => {
-    it('updates the pipelineConfigurationFullPath value', async () => {
+    it('updates the pipelineConfigurationFullPath value and validates the path', async () => {
       jest.spyOn(Utils, 'fetchPipelineConfigurationFileExists').mockResolvedValue(true);
 
       wrapper = createComponent();
@@ -236,6 +236,12 @@ describe('SharedForm', () => {
       expect(wrapper.emitted('update:pipelineConfigurationFullPath')[0][0]).toBe(
         'foo.yaml@bar/baz',
       );
+      /* TODO: Test that debounce is called. Right now this isn't possible
+       * because the lodash debounce function is mocked. We need to update the
+       * mock to enable us to assert that a method is debounced.
+       * https://gitlab.com/gitlab-org/gitlab/-/merge_requests/56013#note_524874122
+       */
+      expect(Utils.fetchPipelineConfigurationFileExists).toHaveBeenCalledWith('foo.yaml@bar/baz');
     });
   });
 });