Add latest changes from gitlab-org/gitlab@master

41 files changed, 165 insertions, 26 deletions

diff --git a/app/assets/javascripts/autosave.js b/app/assets/javascripts/autosave.js
index 5f50fcc112e..0a05e0d44ce 100644
--- a/app/assets/javascripts/autosave.js
+++ b/app/assets/javascripts/autosave.js
@@ -74,6 +74,7 @@ export default class Autosave {
   }
 
   dispose() {
+    // eslint-disable-next-line @gitlab/no-global-event-off
     this.field.off('input');
   }
 }
diff --git a/app/assets/javascripts/awards_handler.js b/app/assets/javascripts/awards_handler.js
index 17e6255700a..d937060536a 100644
--- a/app/assets/javascripts/awards_handler.js
+++ b/app/assets/javascripts/awards_handler.js
@@ -596,6 +596,7 @@ export class AwardsHandler {
   hideMenuElement($emojiMenu) {
     $emojiMenu.on(transitionEndEventString, e => {
       if (e.currentTarget === e.target) {
+        // eslint-disable-next-line @gitlab/no-global-event-off
         $emojiMenu.removeClass(IS_RENDERED).off(transitionEndEventString);
       }
     });
diff --git a/app/assets/javascripts/behaviors/shortcuts/shortcuts.js b/app/assets/javascripts/behaviors/shortcuts/shortcuts.js
index a53150f8d61..c0f67923191 100644
--- a/app/assets/javascripts/behaviors/shortcuts/shortcuts.js
+++ b/app/assets/javascripts/behaviors/shortcuts/shortcuts.js
@@ -97,6 +97,7 @@ export default class Shortcuts {
       e.preventDefault();
     });
 
+    // eslint-disable-next-line @gitlab/no-global-event-off
     $('.js-shortcuts-modal-trigger')
       .off('click')
       .on('click', this.onToggleHelp);
diff --git a/app/assets/javascripts/boards/components/new_list_dropdown.js b/app/assets/javascripts/boards/components/new_list_dropdown.js
index 47eee5306da..d1011c24977 100644
--- a/app/assets/javascripts/boards/components/new_list_dropdown.js
+++ b/app/assets/javascripts/boards/components/new_list_dropdown.js
@@ -15,6 +15,7 @@ function shouldCreateListGraphQL(label) {
   return store.getters.shouldUseGraphQL && !store.getters.getListByLabelId(fullLabelId(label));
 }
 
+// eslint-disable-next-line @gitlab/no-global-event-off
 $(document)
   .off('created.label')
   .on('created.label', (e, label, addNewList) => {
diff --git a/app/assets/javascripts/clusters/clusters_bundle.js b/app/assets/javascripts/clusters/clusters_bundle.js
index ba005e98d53..a533a1a78e8 100644
--- a/app/assets/javascripts/clusters/clusters_bundle.js
+++ b/app/assets/javascripts/clusters/clusters_bundle.js
@@ -265,13 +265,21 @@ export default class Clusters {
   removeListeners() {
     eventHub.$off('installApplication', this.installApplication);
     eventHub.$off('updateApplication', this.updateApplication);
+    // eslint-disable-next-line @gitlab/no-global-event-off
     eventHub.$off('saveKnativeDomain');
+    // eslint-disable-next-line @gitlab/no-global-event-off
     eventHub.$off('setKnativeDomain');
+    // eslint-disable-next-line @gitlab/no-global-event-off
     eventHub.$off('setCrossplaneProviderStack');
+    // eslint-disable-next-line @gitlab/no-global-event-off
     eventHub.$off('uninstallApplication');
+    // eslint-disable-next-line @gitlab/no-global-event-off
     eventHub.$off('setIngressModSecurityEnabled');
+    // eslint-disable-next-line @gitlab/no-global-event-off
     eventHub.$off('setIngressModSecurityMode');
+    // eslint-disable-next-line @gitlab/no-global-event-off
     eventHub.$off('resetIngressModSecurityChanges');
+    // eslint-disable-next-line @gitlab/no-global-event-off
     eventHub.$off('setFluentdSettings');
   }
 
diff --git a/app/assets/javascripts/commit/image_file.js b/app/assets/javascripts/commit/image_file.js
index 28abe558f53..b70f8d6e736 100644
--- a/app/assets/javascripts/commit/image_file.js
+++ b/app/assets/javascripts/commit/image_file.js
@@ -72,12 +72,14 @@ export default class ImageFile {
       callback(e, left);
     };
 
+    // eslint-disable-next-line @gitlab/no-global-event-off
     $el
       .off('mousedown')
       .off('touchstart')
       .on('mousedown', dragStart)
       .on('touchstart', dragStart);
 
+    // eslint-disable-next-line @gitlab/no-global-event-off
     $body
       .off('mouseup')
       .off('mousemove')
diff --git a/app/assets/javascripts/confirm_danger_modal.js b/app/assets/javascripts/confirm_danger_modal.js
index 7321e4d18cc..4f7bc829b0c 100644
--- a/app/assets/javascripts/confirm_danger_modal.js
+++ b/app/assets/javascripts/confirm_danger_modal.js
@@ -14,6 +14,7 @@ function openConfirmDangerModal($form, $modal, text) {
   $submit.disable();
   $input.focus();
 
+  // eslint-disable-next-line @gitlab/no-global-event-off
   $input.off('input').on('input', function handleInput() {
     const confirmText = rstrip($(this).val());
     if (confirmText === confirmTextMatch) {
@@ -23,6 +24,7 @@ function openConfirmDangerModal($form, $modal, text) {
     }
   });
 
+  // eslint-disable-next-line @gitlab/no-global-event-off
   $('.js-confirm-danger-submit', $modal)
     .off('click')
     .on('click', () => {
diff --git a/app/assets/javascripts/create_cluster/components/cluster_form_dropdown.vue b/app/assets/javascripts/create_cluster/components/cluster_form_dropdown.vue
index e9d484bdd94..1e3a19b9da1 100644
--- a/app/assets/javascripts/create_cluster/components/cluster_form_dropdown.vue
+++ b/app/assets/javascripts/create_cluster/components/cluster_form_dropdown.vue
@@ -154,6 +154,7 @@ export default {
       });
   },
   beforeDestroy() {
+    // eslint-disable-next-line @gitlab/no-global-event-off
     $(this.$refs.dropdown).off();
   },
   methods: {
diff --git a/app/assets/javascripts/create_label.js b/app/assets/javascripts/create_label.js
index 9c0ed7f79d4..0d53efe8689 100644
--- a/app/assets/javascripts/create_label.js
+++ b/app/assets/javascripts/create_label.js
@@ -29,11 +29,17 @@ export default class CreateLabelDropdown {
   }
 
   cleanBinding() {
+    // eslint-disable-next-line @gitlab/no-global-event-off
     this.$colorSuggestions.off('click');
+    // eslint-disable-next-line @gitlab/no-global-event-off
     this.$newLabelField.off('keyup change');
+    // eslint-disable-next-line @gitlab/no-global-event-off
     this.$newColorField.off('keyup change');
+    // eslint-disable-next-line @gitlab/no-global-event-off
     this.$dropdownBack.off('click');
+    // eslint-disable-next-line @gitlab/no-global-event-off
     this.$cancelButton.off('click');
+    // eslint-disable-next-line @gitlab/no-global-event-off
     this.$newLabelCreateButton.off('click');
   }
 
diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
index 4cccabca28b..70ebe91a3b2 100644
--- a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
+++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
@@ -74,6 +74,7 @@ export default () => {
         const $dropdown = $('.js-ca-dropdown');
         const $label = $dropdown.find('.dropdown-label');
 
+        // eslint-disable-next-line @gitlab/no-global-event-off
         $dropdown
           .find('li a')
           .off('click')
diff --git a/app/assets/javascripts/deprecated_jquery_dropdown/gl_dropdown.js b/app/assets/javascripts/deprecated_jquery_dropdown/gl_dropdown.js
index c17f2d2efe4..fe57dd2dc8f 100644
--- a/app/assets/javascripts/deprecated_jquery_dropdown/gl_dropdown.js
+++ b/app/assets/javascripts/deprecated_jquery_dropdown/gl_dropdown.js
@@ -622,6 +622,7 @@ export class GitLabDropdown {
 
   // eslint-disable-next-line class-methods-use-this
   removeArrowKeyEvent() {
+    // eslint-disable-next-line @gitlab/no-global-event-off
     return $('body').off('keydown');
   }
 
diff --git a/app/assets/javascripts/environments/components/environments_app.vue b/app/assets/javascripts/environments/components/environments_app.vue
index c1b9ba755a6..ce84caeb28f 100644
--- a/app/assets/javascripts/environments/components/environments_app.vue
+++ b/app/assets/javascripts/environments/components/environments_app.vue
@@ -93,7 +93,9 @@ export default {
   },
 
   beforeDestroy() {
+    // eslint-disable-next-line @gitlab/no-global-event-off
     eventHub.$off('toggleFolder');
+    // eslint-disable-next-line @gitlab/no-global-event-off
     eventHub.$off('toggleDeployBoard');
   },
 
diff --git a/app/assets/javascripts/gfm_auto_complete.js b/app/assets/javascripts/gfm_auto_complete.js
index 14538ad7237..dcb27434a07 100644
--- a/app/assets/javascripts/gfm_auto_complete.js
+++ b/app/assets/javascripts/gfm_auto_complete.js
@@ -78,6 +78,7 @@ class GfmAutoComplete {
     this.input.each((i, input) => {
       const $input = $(input);
       if (!$input.hasClass('js-gfm-input-initialized')) {
+        // eslint-disable-next-line @gitlab/no-global-event-off
         $input.off('focus.setupAtWho').on('focus.setupAtWho', this.setupAtWho.bind(this, $input));
         $input.on('change.atwho', () => input.dispatchEvent(new Event('input')));
         // This triggers at.js again
diff --git a/app/assets/javascripts/gl_field_error.js b/app/assets/javascripts/gl_field_error.js
index ac4c8d28ee4..60f1b7f5aa4 100644
--- a/app/assets/javascripts/gl_field_error.js
+++ b/app/assets/javascripts/gl_field_error.js
@@ -80,6 +80,7 @@ export default class GlFieldError {
 
     // hidden when injected into DOM
     errorAnchor.after(this.fieldErrorElement);
+    // eslint-disable-next-line @gitlab/no-global-event-off
     this.inputElement.off('invalid').on('invalid', this.handleInvalidSubmit.bind(this));
     this.scopedSiblings = this.safelySelectSiblings();
   }
@@ -117,6 +118,7 @@ export default class GlFieldError {
     this.form.focusInvalid.apply(this.form);
 
     // For UX, wait til after first invalid submission to check each keyup
+    // eslint-disable-next-line @gitlab/no-global-event-off
     this.inputElement
       .off('keyup.fieldValidator')
       .on('keyup.fieldValidator', this.updateValidity.bind(this));
diff --git a/app/assets/javascripts/gl_form.js b/app/assets/javascripts/gl_form.js
index 6958cf4c173..4a3755f39cc 100644
--- a/app/assets/javascripts/gl_form.js
+++ b/app/assets/javascripts/gl_form.js
@@ -70,8 +70,10 @@ export default class GLForm {
   }
 
   setupAutosize() {
+    // eslint-disable-next-line @gitlab/no-global-event-off
     this.textarea.off('autosize:resized').on('autosize:resized', this.setHeightData.bind(this));
 
+    // eslint-disable-next-line @gitlab/no-global-event-off
     this.textarea.off('mouseup.autosize').on('mouseup.autosize', this.destroyAutosize.bind(this));
 
     setTimeout(() => {
@@ -97,7 +99,9 @@ export default class GLForm {
   }
 
   clearEventListeners() {
+    // eslint-disable-next-line @gitlab/no-global-event-off
     this.textarea.off('focus');
+    // eslint-disable-next-line @gitlab/no-global-event-off
     this.textarea.off('blur');
     removeMarkdownListeners(this.form);
   }
diff --git a/app/assets/javascripts/ide/components/nav_dropdown.vue b/app/assets/javascripts/ide/components/nav_dropdown.vue
index a2338c6dec5..8cea8655461 100644
--- a/app/assets/javascripts/ide/components/nav_dropdown.vue
+++ b/app/assets/javascripts/ide/components/nav_dropdown.vue
@@ -30,6 +30,7 @@ export default {
         .on('hide.bs.dropdown', () => this.hideDropdown());
     },
     removeDropdownListeners() {
+      // eslint-disable-next-line @gitlab/no-global-event-off
       $(this.$refs.dropdown)
         .off('show.bs.dropdown')
         .off('hide.bs.dropdown');
diff --git a/app/assets/javascripts/issuable_bulk_update_actions.js b/app/assets/javascripts/issuable_bulk_update_actions.js
index c7806fc17fc..6ba21cd7869 100644
--- a/app/assets/javascripts/issuable_bulk_update_actions.js
+++ b/app/assets/javascripts/issuable_bulk_update_actions.js
@@ -15,6 +15,7 @@ export default {
   },
 
   bindEvents() {
+    // eslint-disable-next-line @gitlab/no-global-event-off
     return this.form.off('submit').on('submit', this.onFormSubmit.bind(this));
   },
 
diff --git a/app/assets/javascripts/issue_show/components/app.vue b/app/assets/javascripts/issue_show/components/app.vue
index 8acda4ada16..61e5db0970a 100644
--- a/app/assets/javascripts/issue_show/components/app.vue
+++ b/app/assets/javascripts/issue_show/components/app.vue
@@ -3,7 +3,6 @@ import { GlIcon, GlIntersectionObserver } from '@gitlab/ui';
 import Visibility from 'visibilityjs';
 import { __, s__, sprintf } from '~/locale';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
-import { sanitize } from '~/lib/dompurify';
 import { visitUrl } from '~/lib/utils/url_utility';
 import Poll from '~/lib/utils/poll';
 import eventHub from '../event_hub';
@@ -179,7 +178,7 @@ export default {
     const store = new Store({
       titleHtml: this.initialTitleHtml,
       titleText: this.initialTitleText,
-      descriptionHtml: sanitize(this.initialDescriptionHtml),
+      descriptionHtml: this.initialDescriptionHtml,
       descriptionText: this.initialDescriptionText,
       updatedAt: this.updatedAt,
       updatedByName: this.updatedByName,
diff --git a/app/assets/javascripts/issue_show/utils/parse_data.js b/app/assets/javascripts/issue_show/utils/parse_data.js
index aacbb6a9c6f..12f38005366 100644
--- a/app/assets/javascripts/issue_show/utils/parse_data.js
+++ b/app/assets/javascripts/issue_show/utils/parse_data.js
@@ -4,13 +4,11 @@ import { sanitize } from '~/lib/dompurify';
 // We currently load + parse the data from the issue app and related merge request
 let cachedParsedData;
 
-export const parseIssuableData = () => {
+export const parseIssuableData = el => {
   try {
     if (cachedParsedData) return cachedParsedData;
 
-    const initialDataEl = document.getElementById('js-issuable-app');
-
-    const parsedData = JSON.parse(initialDataEl.dataset.initial);
+    const parsedData = JSON.parse(el.dataset.initial);
     parsedData.initialTitleHtml = sanitize(parsedData.initialTitleHtml);
     parsedData.initialDescriptionHtml = sanitize(parsedData.initialDescriptionHtml);
 
diff --git a/app/assets/javascripts/issues_list/components/issuables_list_app.vue b/app/assets/javascripts/issues_list/components/issuables_list_app.vue
index 0d4f5bce965..0ce2bcc1cce 100644
--- a/app/assets/javascripts/issues_list/components/issuables_list_app.vue
+++ b/app/assets/javascripts/issues_list/components/issuables_list_app.vue
@@ -215,6 +215,7 @@ export default {
     this.fetchIssuables();
   },
   beforeDestroy() {
+    // eslint-disable-next-line @gitlab/no-global-event-off
     issueableEventHub.$off('issuables:toggleBulkEdit');
   },
   methods: {
diff --git a/app/assets/javascripts/lib/utils/text_markdown.js b/app/assets/javascripts/lib/utils/text_markdown.js
index dfb86787788..c711c0bd163 100644
--- a/app/assets/javascripts/lib/utils/text_markdown.js
+++ b/app/assets/javascripts/lib/utils/text_markdown.js
@@ -339,6 +339,7 @@ export function addMarkdownListeners(form) {
       Shortcuts.initMarkdownEditorShortcuts($(this), updateTextForToolbarBtn);
     });
 
+  // eslint-disable-next-line @gitlab/no-global-event-off
   const $allToolbarBtns = $('.js-md', form)
     .off('click')
     .on('click', function() {
@@ -351,6 +352,7 @@ export function addMarkdownListeners(form) {
 }
 
 export function addEditorMarkdownListeners(editor) {
+  // eslint-disable-next-line @gitlab/no-global-event-off
   $('.js-md')
     .off('click')
     .on('click', e => {
@@ -376,5 +378,6 @@ export function removeMarkdownListeners(form) {
       Shortcuts.removeMarkdownEditorShortcuts($(this));
     });
 
+  // eslint-disable-next-line @gitlab/no-global-event-off
   return $('.js-md', form).off('click');
 }
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index f5ba933d012..de7648c31b1 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -77,6 +77,7 @@ if (process.env.NODE_ENV !== 'production' && gon?.test_env) {
 
 document.addEventListener('beforeunload', () => {
   // Unbind scroll events
+  // eslint-disable-next-line @gitlab/no-global-event-off
   $(document).off('scroll');
   // Close any open tooltips
   tooltips.dispose(document.querySelectorAll('.has-tooltip, [data-toggle="tooltip"]'));
diff --git a/app/assets/javascripts/members.js b/app/assets/javascripts/members.js
index 6dd4018f87a..5bd228496da 100644
--- a/app/assets/javascripts/members.js
+++ b/app/assets/javascripts/members.js
@@ -11,9 +11,11 @@ export default class Members {
   }
 
   addListeners() {
+    // eslint-disable-next-line @gitlab/no-global-event-off
     $('.js-member-update-control')
       .off('change')
       .on('change', this.formSubmit.bind(this));
+    // eslint-disable-next-line @gitlab/no-global-event-off
     $('.js-edit-member-form')
       .off('ajax:success')
       .on('ajax:success', this.formSuccess.bind(this));
diff --git a/app/assets/javascripts/mirrors/mirror_repos.js b/app/assets/javascripts/mirrors/mirror_repos.js
index 818ca8aa847..18ea27e9a34 100644
--- a/app/assets/javascripts/mirrors/mirror_repos.js
+++ b/app/assets/javascripts/mirrors/mirror_repos.js
@@ -39,6 +39,7 @@ export default class MirrorRepos {
 
   initMirrorSSH() {
     if (this.$password) {
+      // eslint-disable-next-line @gitlab/no-global-event-off
       this.$password.off('input.updateUrl');
     }
     this.$password = undefined;
diff --git a/app/assets/javascripts/mirrors/ssh_mirror.js b/app/assets/javascripts/mirrors/ssh_mirror.js
index eecfaa76168..c6486350f3b 100644
--- a/app/assets/javascripts/mirrors/ssh_mirror.js
+++ b/app/assets/javascripts/mirrors/ssh_mirror.js
@@ -185,10 +185,15 @@ export default class SSHMirror {
   }
 
   destroy() {
+    // eslint-disable-next-line @gitlab/no-global-event-off
     this.$repositoryUrl.off('keyup');
+    // eslint-disable-next-line @gitlab/no-global-event-off
     this.$form.find('.js-known-hosts').off('keyup');
+    // eslint-disable-next-line @gitlab/no-global-event-off
     this.$dropdownAuthType.off('change');
+    // eslint-disable-next-line @gitlab/no-global-event-off
     this.$btnDetectHostKeys.off('click');
+    // eslint-disable-next-line @gitlab/no-global-event-off
     this.$btnSSHHostsShowAdvanced.off('click');
   }
 }
diff --git a/app/assets/javascripts/monitoring/components/charts/time_series.vue b/app/assets/javascripts/monitoring/components/charts/time_series.vue
index bda2adeb62a..170c5ff7695 100644
--- a/app/assets/javascripts/monitoring/components/charts/time_series.vue
+++ b/app/assets/javascripts/monitoring/components/charts/time_series.vue
@@ -367,6 +367,7 @@ export default {
         },
       );
 
+      // eslint-disable-next-line @gitlab/no-global-event-off
       eChart.off('datazoom');
       eChart.on('datazoom', this.throttledDatazoom);
     },
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index 37bb79defd1..9a887021e5d 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -187,6 +187,7 @@ export default class Notes {
     this.$wrapperEl.off('click', '.js-discussion-reply-button');
     this.$wrapperEl.off('click', '.js-add-diff-note-button');
     this.$wrapperEl.off('click', '.js-add-image-diff-note-button');
+    // eslint-disable-next-line @gitlab/no-global-event-off
     this.$wrapperEl.off('visibilitychange');
     this.$wrapperEl.off('keyup input', '.js-note-text');
     this.$wrapperEl.off('click', '.js-note-target-reopen');
diff --git a/app/assets/javascripts/pager.js b/app/assets/javascripts/pager.js
index 2aa37842707..f9a91ec322b 100644
--- a/app/assets/javascripts/pager.js
+++ b/app/assets/javascripts/pager.js
@@ -72,6 +72,7 @@ export default {
   },
 
   initLoadMore() {
+    // eslint-disable-next-line @gitlab/no-global-event-off
     $(document).off('scroll');
     $(document).endlessScroll({
       bottomPixels: ENDLESS_SCROLL_BOTTOM_PX,
diff --git a/app/assets/javascripts/pages/projects/issues/show.js b/app/assets/javascripts/pages/projects/issues/show.js
index 4b15e435f60..614f8262e5b 100644
--- a/app/assets/javascripts/pages/projects/issues/show.js
+++ b/app/assets/javascripts/pages/projects/issues/show.js
@@ -17,7 +17,8 @@ import initInviteMemberModal from '~/invite_member/init_invite_member_modal';
 import { IssuableType } from '~/issuable_show/constants';
 
 export default function() {
-  const { issueType, ...issuableData } = parseIssuableData();
+  const initialDataEl = document.getElementById('js-issuable-app');
+  const { issueType, ...issuableData } = parseIssuableData(initialDataEl);
 
   switch (issueType) {
     case IssuableType.Incident:
diff --git a/app/assets/javascripts/pipeline_editor/graphql/queries/ci_config.graphql b/app/assets/javascripts/pipeline_editor/graphql/queries/ci_config.graphql
new file mode 100644
index 00000000000..149cb256ced
--- /dev/null
+++ b/app/assets/javascripts/pipeline_editor/graphql/queries/ci_config.graphql
@@ -0,0 +1,11 @@
+#import "~/pipelines/graphql/queries/pipeline_stages.fragment.graphql"
+
+query getCiConfigData($content: String!) {
+  ciConfig(content: $content) {
+    errors
+    status
+    stages {
+      ...PipelineStagesData
+    }
+  }
+}
diff --git a/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue b/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue
index a4bdc27d1a0..b1c52ffa920 100644
--- a/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue
+++ b/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlAlert, GlLoadingIcon, GlTab, GlTabs } from '@gitlab/ui';
 import { __, s__, sprintf } from '~/locale';
-import { redirectTo, mergeUrlParams, refreshCurrentPage } from '~/lib/utils/url_utility';
+import { mergeUrlParams, redirectTo, refreshCurrentPage } from '~/lib/utils/url_utility';
 
 import PipelineGraph from '~/pipelines/components/pipeline_graph/pipeline_graph.vue';
 import CommitForm from './components/commit/commit_form.vue';
@@ -9,24 +9,25 @@ import TextEditor from './components/text_editor.vue';
 
 import commitCiFileMutation from './graphql/mutations/commit_ci_file.mutation.graphql';
 import getBlobContent from './graphql/queries/blob_content.graphql';
+import getCiConfigData from './graphql/queries/ci_config.graphql';
 
 const MR_SOURCE_BRANCH = 'merge_request[source_branch]';
 const MR_TARGET_BRANCH = 'merge_request[target_branch]';
 
-const LOAD_FAILURE_NO_REF = 'LOAD_FAILURE_NO_REF';
-const LOAD_FAILURE_NO_FILE = 'LOAD_FAILURE_NO_FILE';
-const LOAD_FAILURE_UNKNOWN = 'LOAD_FAILURE_UNKNOWN';
 const COMMIT_FAILURE = 'COMMIT_FAILURE';
 const DEFAULT_FAILURE = 'DEFAULT_FAILURE';
+const LOAD_FAILURE_NO_FILE = 'LOAD_FAILURE_NO_FILE';
+const LOAD_FAILURE_NO_REF = 'LOAD_FAILURE_NO_REF';
+const LOAD_FAILURE_UNKNOWN = 'LOAD_FAILURE_UNKNOWN';
 
 export default {
   components: {
+    CommitForm,
     GlAlert,
     GlLoadingIcon,
     GlTab,
     GlTabs,
     PipelineGraph,
-    CommitForm,
     TextEditor,
   },
   props: {
@@ -55,14 +56,15 @@ export default {
   },
   data() {
     return {
-      showFailureAlert: false,
+      ciConfigData: {},
+      content: '',
+      contentModel: '',
+      currentTabIndex: 0,
+      editorIsReady: false,
       failureType: null,
       failureReasons: [],
-
       isSaving: false,
-      editorIsReady: false,
-      content: '',
-      contentModel: '',
+      showFailureAlert: false,
     };
   },
   apollo: {
@@ -85,18 +87,35 @@ export default {
         this.handleBlobContentError(error);
       },
     },
+    ciConfigData: {
+      query: getCiConfigData,
+      // If content is not loaded, we can't lint the data
+      skip: ({ contentModel }) => {
+        return !contentModel;
+      },
+      variables() {
+        return {
+          content: this.contentModel,
+        };
+      },
+      update(data) {
+        return data?.ciConfig ?? {};
+      },
+      error() {
+        this.reportFailure(LOAD_FAILURE_UNKNOWN);
+      },
+    },
   },
   computed: {
-    isLoading() {
+    isBlobContentLoading() {
       return this.$apollo.queries.content.loading;
     },
+    isVisualizeTabActive() {
+      return this.currentTabIndex === 1;
+    },
     defaultCommitMessage() {
       return sprintf(this.$options.i18n.defaultCommitMessage, { sourcePath: this.ciConfigPath });
     },
-    pipelineData() {
-      // Note data will loaded as part of https://gitlab.com/gitlab-org/gitlab/-/issues/263141
-      return {};
-    },
     failure() {
       switch (this.failureType) {
         case LOAD_FAILURE_NO_REF:
@@ -233,17 +252,17 @@ export default {
       </ul>
     </gl-alert>
     <div class="gl-mt-4">
-      <gl-loading-icon v-if="isLoading" size="lg" class="gl-m-3" />
+      <gl-loading-icon v-if="isBlobContentLoading" size="lg" class="gl-m-3" />
       <div v-else class="file-editor gl-mb-3">
-        <gl-tabs>
+        <gl-tabs v-model="currentTabIndex">
           <!-- editor should be mounted when its tab is visible, so the container has a size -->
           <gl-tab :title="$options.i18n.tabEdit" :lazy="!editorIsReady">
             <!-- editor should be mounted only once, when the tab is displayed -->
             <text-editor v-model="contentModel" @editor-ready="editorIsReady = true" />
           </gl-tab>
 
-          <gl-tab :title="$options.i18n.tabGraph">
-            <pipeline-graph :pipeline-data="pipelineData" />
+          <gl-tab :title="$options.i18n.tabGraph" :lazy="!isVisualizeTabActive">
+            <pipeline-graph :pipeline-data="ciConfigData" />
           </gl-tab>
         </gl-tabs>
       </div>
diff --git a/app/assets/javascripts/pipelines/graphql/queries/pipeline_stages.fragment.graphql b/app/assets/javascripts/pipelines/graphql/queries/pipeline_stages.fragment.graphql
new file mode 100644
index 00000000000..0aef2fdfd7f
--- /dev/null
+++ b/app/assets/javascripts/pipelines/graphql/queries/pipeline_stages.fragment.graphql
@@ -0,0 +1,12 @@
+fragment PipelineStagesData on CiConfigStage {
+  name
+  groups {
+    name
+    jobs {
+      name
+      needs {
+        name
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/project_find_file.js b/app/assets/javascripts/project_find_file.js
index 2f35c4485f9..0e12c219e45 100644
--- a/app/assets/javascripts/project_find_file.js
+++ b/app/assets/javascripts/project_find_file.js
@@ -55,6 +55,7 @@ export default class ProjectFindFile {
   }
 
   initEvent() {
+    // eslint-disable-next-line @gitlab/no-global-event-off
     this.inputElement.off('keyup');
     this.inputElement.on('keyup', event => {
       const target = $(event.target);
diff --git a/app/assets/javascripts/projects/project_new.js b/app/assets/javascripts/projects/project_new.js
index d74a2d06786..e0f8740e5b7 100644
--- a/app/assets/javascripts/projects/project_new.js
+++ b/app/assets/javascripts/projects/project_new.js
@@ -26,12 +26,14 @@ const onProjectPathChange = ($projectNameInput, $projectPathInput, hasExistingPr
 };
 
 const setProjectNamePathHandlers = ($projectNameInput, $projectPathInput) => {
+  // eslint-disable-next-line @gitlab/no-global-event-off
   $projectNameInput.off('keyup change').on('keyup change', () => {
     onProjectNameChange($projectNameInput, $projectPathInput);
     hasUserDefinedProjectName = $projectNameInput.val().trim().length > 0;
     hasUserDefinedProjectPath = $projectPathInput.val().trim().length > 0;
   });
 
+  // eslint-disable-next-line @gitlab/no-global-event-off
   $projectPathInput.off('keyup change').on('keyup change', () => {
     onProjectPathChange($projectNameInput, $projectPathInput, hasUserDefinedProjectName);
     hasUserDefinedProjectPath = $projectPathInput.val().trim().length > 0;
@@ -137,6 +139,7 @@ const bindEvents = () => {
         target.focus();
       })
       .on('hide.bs.popover', () => {
+        // eslint-disable-next-line @gitlab/no-global-event-off
         $(document).off('click.popover touchstart.popover');
       });
   }
diff --git a/app/assets/javascripts/related_issues/components/related_issuable_input.vue b/app/assets/javascripts/related_issues/components/related_issuable_input.vue
index 9809b228308..b05a873e939 100644
--- a/app/assets/javascripts/related_issues/components/related_issuable_input.vue
+++ b/app/assets/javascripts/related_issues/components/related_issuable_input.vue
@@ -97,7 +97,9 @@ export default {
   },
   beforeDestroy() {
     const $input = $(this.$refs.input);
+    // eslint-disable-next-line @gitlab/no-global-event-off
     $input.off('shown-issues.atwho');
+    // eslint-disable-next-line @gitlab/no-global-event-off
     $input.off('hidden-issues.atwho');
     $input.off('inserted-issues.atwho', this.onInput);
   },
diff --git a/app/assets/javascripts/right_sidebar.js b/app/assets/javascripts/right_sidebar.js
index 87c8aa541d8..6f43f837374 100644
--- a/app/assets/javascripts/right_sidebar.js
+++ b/app/assets/javascripts/right_sidebar.js
@@ -23,8 +23,11 @@ Sidebar.initialize = function() {
 
 Sidebar.prototype.removeListeners = function() {
   this.sidebar.off('click', '.sidebar-collapsed-icon');
+  // eslint-disable-next-line @gitlab/no-global-event-off
   this.sidebar.off('hidden.gl.dropdown');
+  // eslint-disable-next-line @gitlab/no-global-event-off
   $('.dropdown').off('loading.gl.dropdown');
+  // eslint-disable-next-line @gitlab/no-global-event-off
   $('.dropdown').off('loaded.gl.dropdown');
   $(document).off('click', '.js-sidebar-toggle');
 };
diff --git a/app/assets/javascripts/settings_panels.js b/app/assets/javascripts/settings_panels.js
index d22aca35e09..18160421136 100644
--- a/app/assets/javascripts/settings_panels.js
+++ b/app/assets/javascripts/settings_panels.js
@@ -3,6 +3,7 @@ import { __ } from './locale';
 
 function expandSection($section) {
   $section.find('.js-settings-toggle:not(.js-settings-toggle-trigger-only)').text(__('Collapse'));
+  // eslint-disable-next-line @gitlab/no-global-event-off
   $section
     .find('.settings-content')
     .off('scroll.expandSection')
diff --git a/app/assets/javascripts/smart_interval.js b/app/assets/javascripts/smart_interval.js
index 0e52d2d8010..c4655d35cf0 100644
--- a/app/assets/javascripts/smart_interval.js
+++ b/app/assets/javascripts/smart_interval.js
@@ -95,6 +95,7 @@ export default class SmartInterval {
     window.removeEventListener('blur', this.onWindowVisibilityChange);
     window.removeEventListener('focus', this.onWindowVisibilityChange);
     this.cancel();
+    // eslint-disable-next-line @gitlab/no-global-event-off
     $(document)
       .off('visibilitychange')
       .off('beforeunload');
diff --git a/app/assets/javascripts/terminal/terminal.js b/app/assets/javascripts/terminal/terminal.js
index cf9064aba57..bae320cb705 100644
--- a/app/assets/javascripts/terminal/terminal.js
+++ b/app/assets/javascripts/terminal/terminal.js
@@ -25,6 +25,7 @@ export default class GLTerminal {
     this.setSocketUrl();
     this.createTerminal();
 
+    // eslint-disable-next-line @gitlab/no-global-event-off
     $(window)
       .off('resize.terminal')
       .on('resize.terminal', () => {
@@ -104,6 +105,7 @@ export default class GLTerminal {
   }
 
   dispose() {
+    // eslint-disable-next-line @gitlab/no-global-event-off
     this.terminal.off('data');
     this.terminal.dispose();
     this.socket.close();
diff --git a/app/assets/javascripts/version_check_image.js b/app/assets/javascripts/version_check_image.js
index ec515e892c6..4e00e0f11f7 100644
--- a/app/assets/javascripts/version_check_image.js
+++ b/app/assets/javascripts/version_check_image.js
@@ -1,5 +1,6 @@
 export default class VersionCheckImage {
   static bindErrorEvent(imageElement) {
+    // eslint-disable-next-line @gitlab/no-global-event-off
     imageElement.off('error').on('error', () => imageElement.hide());
   }
 }
diff --git a/app/models/concerns/enums/data_visualization_palette.rb b/app/models/concerns/enums/data_visualization_palette.rb
new file mode 100644
index 00000000000..25002e64ba6
--- /dev/null
+++ b/app/models/concerns/enums/data_visualization_palette.rb
@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module Enums
+  # These color palettes are part of the Pajamas Design System.
+  # See https://design.gitlab.com/data-visualization/color/#categorical-data
+  module DataVisualizationPalette
+    def self.colors
+      {
+        blue: 0,
+        orange: 1,
+        aqua: 2,
+        green: 3,
+        magenta: 4
+      }
+    end
+
+    def self.weights
+      {
+        '50'  =>  0,
+        '100' =>  1,
+        '200' =>  2,
+        '300' =>  3,
+        '400' =>  4,
+        '500' =>  5,
+        '600' =>  6,
+        '700' =>  7,
+        '800' =>  8,
+        '900' =>  9,
+        '950' =>  10
+      }
+    end
+  end
+end