Merge branch 'fix/325232-create-global-debounce-time-variable-of-250' into 'master'

Fix 325232 create a global debounce time variable of 250

See merge request gitlab-org/gitlab!64671

app/assets/javascripts/editor/constants.js

+import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
 import { __ } from '~/locale';
 
 export const SOURCE_EDITOR_INSTANCE_ERROR_NO_EL = __(
@@ -5,7 +6,7 @@ export const SOURCE_EDITOR_INSTANCE_ERROR_NO_EL = __(
 );
 
 export const URI_PREFIX = 'gitlab';
-export const CONTENT_UPDATE_DEBOUNCE = 250;
+export const CONTENT_UPDATE_DEBOUNCE = DEFAULT_DEBOUNCE_AND_THROTTLE_MS;
 
 export const ERROR_INSTANCE_REQUIRED_FOR_EXTENSION = __(
   'Source Editor instance is required to set up an extension.',

app/assets/javascripts/ide/lib/diff/controller.js

 import { throttle } from 'lodash';
 import { Range } from 'monaco-editor';
+import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
 import Disposable from '../common/disposable';
 import DirtyDiffWorker from './diff_worker';
 
@@ -31,7 +32,7 @@ export default class DirtyDiffController {
     this.modelManager = modelManager;
     this.decorationsController = decorationsController;
     this.dirtyDiffWorker = new DirtyDiffWorker();
-    this.throttledComputeDiff = throttle(this.computeDiff, 250);
+    this.throttledComputeDiff = throttle(this.computeDiff, DEFAULT_DEBOUNCE_AND_THROTTLE_MS);
     this.decorate = this.decorate.bind(this);
 
     this.dirtyDiffWorker.addEventListener('message', this.decorate);

app/assets/javascripts/lib/utils/constants.js

 export const BYTES_IN_KIB = 1024;
+export const DEFAULT_DEBOUNCE_AND_THROTTLE_MS = 250;
 export const HIDDEN_CLASS = 'hidden';
 export const TRUNCATE_WIDTH_DEFAULT_WIDTH = 80;
 export const TRUNCATE_WIDTH_DEFAULT_FONT_SIZE = 12;

app/assets/javascripts/pages/admin/broadcast_messages/broadcast_message.js

@@ -3,6 +3,7 @@ import { debounce } from 'lodash';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { textColorForBackground } from '~/lib/utils/color_utils';
+import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
 import { __ } from '~/locale';
 
 export default () => {
@@ -65,7 +66,7 @@ export default () => {
     'input',
     debounce(() => {
       reloadPreview();
-    }, 250),
+    }, DEFAULT_DEBOUNCE_AND_THROTTLE_MS),
   );
 
   const updateColorPreview = () => {

app/assets/javascripts/pipeline_new/constants.js

+import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
+
 export const VARIABLE_TYPE = 'env_var';
 export const FILE_TYPE = 'file';
-export const DEBOUNCE_REFS_SEARCH_MS = 250;
+export const DEBOUNCE_REFS_SEARCH_MS = DEFAULT_DEBOUNCE_AND_THROTTLE_MS;
 export const CONFIG_VARIABLES_TIMEOUT = 5000;
 export const BRANCH_REF_TYPE = 'branch';
 export const TAG_REF_TYPE = 'tag';

app/assets/javascripts/ref/constants.js

+import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
 import { __ } from '~/locale';
 
 export const REF_TYPE_BRANCHES = 'REF_TYPE_BRANCHES';
@@ -7,7 +8,7 @@ export const ALL_REF_TYPES = Object.freeze([REF_TYPE_BRANCHES, REF_TYPE_TAGS, RE
 
 export const X_TOTAL_HEADER = 'x-total';
 
-export const SEARCH_DEBOUNCE_MS = 250;
+export const SEARCH_DEBOUNCE_MS = DEFAULT_DEBOUNCE_AND_THROTTLE_MS;
 
 export const DEFAULT_I18N = Object.freeze({
   dropdownHeader: __('Select Git revision'),

app/assets/javascripts/search_autocomplete.js

@@ -4,6 +4,7 @@ import $ from 'jquery';
 import { escape, throttle } from 'lodash';
 import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 import { getIdenticonBackgroundClass, getIdenticonTitle } from '~/helpers/avatar_helper';
+import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
 import { s__, __, sprintf } from '~/locale';
 import Tracking from '~/tracking';
 import axios from './lib/utils/axios_utils';
@@ -343,7 +344,10 @@ export class SearchAutocomplete {
     this.searchInput.on('focus', this.onSearchInputFocus);
     this.searchInput.on('blur', this.onSearchInputBlur);
     this.clearInput.on('click', this.onClearInputClick);
-    this.dropdownContent.on('scroll', throttle(this.setScrollFade, 250));
+    this.dropdownContent.on(
+      'scroll',
+      throttle(this.setScrollFade, DEFAULT_DEBOUNCE_AND_THROTTLE_MS),
+    );
 
     this.searchInput.on('click', (e) => {
       e.stopPropagation();

app/assets/javascripts/sidebar/constants.js

 import { IssuableType } from '~/issue_show/constants';
+import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
 import epicConfidentialQuery from '~/sidebar/queries/epic_confidential.query.graphql';
 import epicDueDateQuery from '~/sidebar/queries/epic_due_date.query.graphql';
 import epicParticipantsQuery from '~/sidebar/queries/epic_participants.query.graphql';
@@ -38,7 +39,7 @@ import projectIssueMilestoneMutation from './queries/project_issue_milestone.mut
 import projectIssueMilestoneQuery from './queries/project_issue_milestone.query.graphql';
 import projectMilestonesQuery from './queries/project_milestones.query.graphql';
 
-export const ASSIGNEES_DEBOUNCE_DELAY = 250;
+export const ASSIGNEES_DEBOUNCE_DELAY = DEFAULT_DEBOUNCE_AND_THROTTLE_MS;
 
 export const defaultEpicSort = 'TITLE_ASC';
 

ee/app/assets/javascripts/analytics/shared/constants.js

 import { masks } from 'dateformat';
+import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
 
 const { isoDate, mediumDate } = masks;
 
@@ -24,4 +25,4 @@ export const OFFSET_DATE_BY_ONE = 1;
 
 export const NO_DRAG_CLASS = 'no-drag';
 
-export const DATA_REFETCH_DELAY = 250;
+export const DATA_REFETCH_DELAY = DEFAULT_DEBOUNCE_AND_THROTTLE_MS;

ee/app/assets/javascripts/billings/seat_usage/constants.js

+import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
 import { thWidthClass } from '~/lib/utils/table_utility';
 import { __, s__ } from '~/locale';
 
@@ -45,4 +46,4 @@ If you continue, the user will be removed from the %{namespace}
 group and all its subgroups and projects. This action can't be undone.`,
 );
 export const AVATAR_SIZE = 32;
-export const SEARCH_DEBOUNCE_MS = 250;
+export const SEARCH_DEBOUNCE_MS = DEFAULT_DEBOUNCE_AND_THROTTLE_MS;

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

+import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
 import { s__ } from '~/locale';
 
 export const DANGER = 'danger';
@@ -18,4 +19,4 @@ 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;
+export const DEBOUNCE_DELAY = DEFAULT_DEBOUNCE_AND_THROTTLE_MS;

ee/app/assets/javascripts/threat_monitoring/components/alerts/constants.js

+import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
 import { s__, __ } from '~/locale';
 
 export const MESSAGES = {
@@ -67,7 +68,7 @@ export const DEFAULT_FILTERS = { statuses: ['TRIGGERED', 'ACKNOWLEDGED'] };
 
 export const DOMAIN = 'threat_monitoring';
 
-export const DEBOUNCE = 250;
+export const DEBOUNCE = DEFAULT_DEBOUNCE_AND_THROTTLE_MS;
 
 export const ALL = { key: 'ALL', value: __('All') };
 

spec/frontend/projects/commit/components/branches_dropdown_spec.js

@@ -3,6 +3,7 @@ import { shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
 import Vuex from 'vuex';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
 import BranchesDropdown from '~/projects/commit/components/branches_dropdown.vue';
 
 Vue.use(Vuex);
@@ -82,7 +83,7 @@ describe('BranchesDropdown', () => {
       expect(findSearchBoxByType().exists()).toBe(true);
       expect(findSearchBoxByType().vm.$attrs).toMatchObject({
         placeholder: 'Search branches',
-        debounce: 250,
+        debounce: DEFAULT_DEBOUNCE_AND_THROTTLE_MS,
       });
     });
   });