Add latest changes from gitlab-org/gitlab@master

32 files changed, 80 insertions, 67 deletions

diff --git a/app/assets/javascripts/behaviors/markdown/render_kroki.js b/app/assets/javascripts/behaviors/markdown/render_kroki.js
index 241585c30f1..abe71694d73 100644
--- a/app/assets/javascripts/behaviors/markdown/render_kroki.js
+++ b/app/assets/javascripts/behaviors/markdown/render_kroki.js
@@ -55,8 +55,8 @@ export function renderKroki(krokiImages) {
 
     // A single Kroki image is processed multiple times for some reason,
     // so this condition ensures we only create one alert per Kroki image
-    if (!Object.hasOwn(parent.dataset, 'krokiProcessed')) {
-      parent.dataset.krokiProcessed = 'true';
+    if (!parent.hasAttribute('data-kroki-processed')) {
+      parent.setAttribute('data-kroki-processed', 'true');
       parent.after(createAlert(krokiImage));
     }
   });
diff --git a/app/assets/javascripts/behaviors/markdown/render_math.js b/app/assets/javascripts/behaviors/markdown/render_math.js
index 7e1bf83f8a1..12f47255bdf 100644
--- a/app/assets/javascripts/behaviors/markdown/render_math.js
+++ b/app/assets/javascripts/behaviors/markdown/render_math.js
@@ -110,7 +110,7 @@ class SafeMathRenderer {
 
       try {
         displayContainer.innerHTML = this.katex.renderToString(text, {
-          displayMode: el.dataset.mathStyle === 'display',
+          displayMode: el.getAttribute('data-math-style') === 'display',
           throwOnError: true,
           maxSize: 20,
           maxExpand: 20,
@@ -143,7 +143,7 @@ class SafeMathRenderer {
     this.elements.forEach((el) => {
       const placeholder = document.createElement('span');
       placeholder.style.display = 'none';
-      placeholder.dataset.mathStyle = el.dataset.mathStyle;
+      placeholder.setAttribute('data-math-style', el.getAttribute('data-math-style'));
       placeholder.textContent = el.textContent;
       el.parentNode.replaceChild(placeholder, el);
       this.queue.push(placeholder);
diff --git a/app/assets/javascripts/blob/blob_line_permalink_updater.js b/app/assets/javascripts/blob/blob_line_permalink_updater.js
index 0a5bcf326a1..a3dd241604d 100644
--- a/app/assets/javascripts/blob/blob_line_permalink_updater.js
+++ b/app/assets/javascripts/blob/blob_line_permalink_updater.js
@@ -9,11 +9,10 @@ const updateLineNumbersOnBlobPermalinks = (linksToUpdate) => {
 
     [].concat(Array.prototype.slice.call(linksToUpdate)).forEach((permalinkButton) => {
       const baseHref =
-        permalinkButton.dataset.originalHref ||
+        permalinkButton.getAttribute('data-original-href') ||
         (() => {
           const href = permalinkButton.getAttribute('href');
-          // eslint-disable-next-line no-param-reassign
-          permalinkButton.dataset.originalHref = href;
+          permalinkButton.setAttribute('data-original-href', href);
           return href;
         })();
       permalinkButton.setAttribute('href', `${baseHref}${hashUrlString}`);
diff --git a/app/assets/javascripts/blob/pipeline_tour_success_modal.vue b/app/assets/javascripts/blob/pipeline_tour_success_modal.vue
index b4ca29114cb..f3c542c467a 100644
--- a/app/assets/javascripts/blob/pipeline_tour_success_modal.vue
+++ b/app/assets/javascripts/blob/pipeline_tour_success_modal.vue
@@ -132,7 +132,7 @@ export default {
       <gl-button
         ref="goToPipelines"
         :href="goToPipelinesPath"
-        variant="success"
+        variant="confirm"
         :data-track-property="humanAccess"
         :data-track-value="$options.goToTrackValuePipelines"
         :data-track-action="$options.trackEvent"
diff --git a/app/assets/javascripts/blob/viewer/index.js b/app/assets/javascripts/blob/viewer/index.js
index a0d4f7ef4f2..a6eed4ecae3 100644
--- a/app/assets/javascripts/blob/viewer/index.js
+++ b/app/assets/javascripts/blob/viewer/index.js
@@ -36,19 +36,19 @@ const loadRichBlobViewer = (type) => {
 
 const loadViewer = (viewerParam) => {
   const viewer = viewerParam;
-  const { url } = viewer.dataset;
+  const url = viewer.getAttribute('data-url');
 
-  if (!url || viewer.dataset.loaded || viewer.dataset.loading) {
+  if (!url || viewer.getAttribute('data-loaded') || viewer.getAttribute('data-loading')) {
     return Promise.resolve(viewer);
   }
 
-  viewer.dataset.loading = 'true';
+  viewer.setAttribute('data-loading', 'true');
 
   return axios.get(url).then(({ data }) => {
     viewer.innerHTML = data.html;
 
     window.requestIdleCallback(() => {
-      delete viewer.dataset.loading;
+      viewer.removeAttribute('data-loading');
     });
 
     return viewer;
@@ -108,7 +108,7 @@ export class BlobViewer {
 
   switchToInitialViewer() {
     const initialViewer = this.$fileHolder[0].querySelector('.blob-viewer:not(.hidden)');
-    let initialViewerName = initialViewer.dataset.type;
+    let initialViewerName = initialViewer.getAttribute('data-type');
 
     if (this.switcher && window.location.hash.indexOf('#L') === 0) {
       initialViewerName = 'simple';
@@ -138,12 +138,12 @@ export class BlobViewer {
 
     e.preventDefault();
 
-    this.switchToViewer(target.dataset.viewer);
+    this.switchToViewer(target.getAttribute('data-viewer'));
   }
 
   toggleCopyButtonState() {
     if (!this.copySourceBtn) return;
-    if (this.simpleViewer.dataset.loaded) {
+    if (this.simpleViewer.getAttribute('data-loaded')) {
       this.copySourceBtnTooltip.setAttribute('title', __('Copy file contents'));
       this.copySourceBtn.classList.remove('disabled');
     } else if (this.activeViewer === this.simpleViewer) {
@@ -199,8 +199,7 @@ export class BlobViewer {
           this.$fileHolder.trigger('highlight:line');
           handleLocationHash();
 
-          // eslint-disable-next-line no-param-reassign
-          viewer.dataset.loaded = 'true';
+          viewer.setAttribute('data-loaded', 'true');
           this.toggleCopyButtonState();
           eventHub.$emit('showBlobInteractionZones', viewer.dataset.path);
         });
diff --git a/app/assets/javascripts/breadcrumb.js b/app/assets/javascripts/breadcrumb.js
index 113840dbc52..b9d3742974c 100644
--- a/app/assets/javascripts/breadcrumb.js
+++ b/app/assets/javascripts/breadcrumb.js
@@ -5,7 +5,7 @@ export const addTooltipToEl = (el) => {
 
   if (textEl && textEl.scrollWidth > textEl.offsetWidth) {
     el.setAttribute('title', el.textContent);
-    el.dataset.container = 'body';
+    el.setAttribute('data-container', 'body');
     el.classList.add('has-tooltip');
   }
 };
diff --git a/app/assets/javascripts/code_navigation/utils/index.js b/app/assets/javascripts/code_navigation/utils/index.js
index 46038df2f86..0d72153d8fe 100644
--- a/app/assets/javascripts/code_navigation/utils/index.js
+++ b/app/assets/javascripts/code_navigation/utils/index.js
@@ -32,8 +32,8 @@ export const addInteractionClass = ({ path, d, wrapTextNodes }) => {
     });
 
     if (el && !isTextNode(el)) {
-      el.dataset.charIndex = d.start_char;
-      el.dataset.lineIndex = d.start_line;
+      el.setAttribute('data-char-index', d.start_char);
+      el.setAttribute('data-line-index', d.start_line);
       el.classList.add('cursor-pointer', 'code-navigation', 'js-code-navigation');
       el.closest('.line').classList.add('code-navigation-line');
     }
diff --git a/app/assets/javascripts/deprecated_jquery_dropdown/render.js b/app/assets/javascripts/deprecated_jquery_dropdown/render.js
index f10c2d82b61..37287b9d981 100644
--- a/app/assets/javascripts/deprecated_jquery_dropdown/render.js
+++ b/app/assets/javascripts/deprecated_jquery_dropdown/render.js
@@ -107,10 +107,10 @@ function createLink(data, selected, options, index) {
   }
 
   if (options.trackSuggestionClickedLabel) {
-    link.dataset.trackAction = 'click_text';
-    link.dataset.trackLabel = options.trackSuggestionClickedLabel;
-    link.dataset.trackValue = index;
-    link.dataset.trackProperty = slugify(data.category || 'no-category');
+    link.setAttribute('data-track-action', 'click_text');
+    link.setAttribute('data-track-label', options.trackSuggestionClickedLabel);
+    link.setAttribute('data-track-value', index);
+    link.setAttribute('data-track-property', slugify(data.category || 'no-category'));
   }
 
   link.classList.toggle('is-active', selected);
diff --git a/app/assets/javascripts/diff.js b/app/assets/javascripts/diff.js
index 47de7a76899..a12829f8420 100644
--- a/app/assets/javascripts/diff.js
+++ b/app/assets/javascripts/diff.js
@@ -26,7 +26,7 @@ export default class Diff {
       FilesCommentButton.init($diffFile);
 
     const firstFile = $('.files').first().get(0);
-    const canCreateNote = firstFile && Object.hasOwn(firstFile.dataset, 'canCreateNote');
+    const canCreateNote = firstFile && firstFile.hasAttribute('data-can-create-note');
     $diffFile.each((index, file) => initImageDiffHelper.initImageDiff(file, canCreateNote));
 
     if (!isBound) {
diff --git a/app/assets/javascripts/filtered_search/available_dropdown_mappings.js b/app/assets/javascripts/filtered_search/available_dropdown_mappings.js
index 3913e4e8d81..b57db73a86e 100644
--- a/app/assets/javascripts/filtered_search/available_dropdown_mappings.js
+++ b/app/assets/javascripts/filtered_search/available_dropdown_mappings.js
@@ -197,10 +197,10 @@ export default class AvailableDropdownMappings {
   }
 
   getGroupId() {
-    return this.filteredSearchInput.dataset.groupId || '';
+    return this.filteredSearchInput.getAttribute('data-group-id') || '';
   }
 
   getProjectId() {
-    return this.filteredSearchInput.dataset.projectId || '';
+    return this.filteredSearchInput.getAttribute('data-project-id') || '';
   }
 }
diff --git a/app/assets/javascripts/filtered_search/dropdown_hint.js b/app/assets/javascripts/filtered_search/dropdown_hint.js
index 93897b4ed6c..9d29782c9a7 100644
--- a/app/assets/javascripts/filtered_search/dropdown_hint.js
+++ b/app/assets/javascripts/filtered_search/dropdown_hint.js
@@ -25,9 +25,9 @@ export default class DropdownHint extends FilteredSearchDropdown {
     const { selected } = e.detail;
 
     if (selected.tagName === 'LI') {
-      if (Object.hasOwn(selected.dataset, 'value')) {
+      if (selected.hasAttribute('data-value')) {
         this.dismissDropdown();
-      } else if (selected.dataset.action === 'submit') {
+      } else if (selected.getAttribute('data-action') === 'submit') {
         this.dismissDropdown();
         this.dispatchFormSubmitEvent();
       } else {
diff --git a/app/assets/javascripts/filtered_search/dropdown_operator.js b/app/assets/javascripts/filtered_search/dropdown_operator.js
index cd0f541b4fb..fb9f25a8c45 100644
--- a/app/assets/javascripts/filtered_search/dropdown_operator.js
+++ b/app/assets/javascripts/filtered_search/dropdown_operator.js
@@ -23,7 +23,7 @@ export default class DropdownOperator extends FilteredSearchDropdown {
     const { selected } = e.detail;
 
     if (selected.tagName === 'LI') {
-      if (Object.hasOwn(selected.dataset, 'value')) {
+      if (selected.hasAttribute('data-value')) {
         const name = FilteredSearchVisualTokens.getLastTokenPartial();
         const operator = selected.dataset.value;
 
diff --git a/app/assets/javascripts/filtered_search/dropdown_user.js b/app/assets/javascripts/filtered_search/dropdown_user.js
index 26507a85fa8..9a23ff25eac 100644
--- a/app/assets/javascripts/filtered_search/dropdown_user.js
+++ b/app/assets/javascripts/filtered_search/dropdown_user.js
@@ -31,11 +31,11 @@ export default class DropdownUser extends DropdownAjaxFilter {
   }
 
   getGroupId() {
-    return this.input.dataset.groupId;
+    return this.input.getAttribute('data-group-id');
   }
 
   getProjectId() {
-    return this.input.dataset.projectId;
+    return this.input.getAttribute('data-project-id');
   }
 
   projectOrGroupId() {
diff --git a/app/assets/javascripts/filtered_search/dropdown_utils.js b/app/assets/javascripts/filtered_search/dropdown_utils.js
index 22e1604871a..c98d1f8e064 100644
--- a/app/assets/javascripts/filtered_search/dropdown_utils.js
+++ b/app/assets/javascripts/filtered_search/dropdown_utils.js
@@ -87,7 +87,6 @@ export default class DropdownUtils {
   }
 
   static setDataValueIfSelected(filter, operator, selected) {
-    // eslint-disable-next-line unicorn/prefer-dom-node-dataset
     const dataValue = selected.getAttribute('data-value');
 
     if (dataValue) {
@@ -97,7 +96,6 @@ export default class DropdownUtils {
         tokenValue: dataValue,
         clicked: true,
         options: {
-          // eslint-disable-next-line unicorn/prefer-dom-node-dataset
           capitalizeTokenValue: selected.hasAttribute('data-capitalize'),
         },
       });
diff --git a/app/assets/javascripts/filtered_search/droplab/drop_down.js b/app/assets/javascripts/filtered_search/droplab/drop_down.js
index 398a7b26677..05b741af191 100644
--- a/app/assets/javascripts/filtered_search/droplab/drop_down.js
+++ b/app/assets/javascripts/filtered_search/droplab/drop_down.js
@@ -165,8 +165,8 @@ class DropDown {
     images.forEach((image) => {
       const img = image;
 
-      img.src = img.dataset.src;
-      delete img.dataset.src;
+      img.src = img.getAttribute('data-src');
+      img.removeAttribute('data-src');
     });
   }
 }
diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js b/app/assets/javascripts/filtered_search/filtered_search_manager.js
index ac2cf27e873..07f2c75f00a 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_manager.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js
@@ -814,7 +814,7 @@ export default class FilteredSearchManager {
   getUsernameParams() {
     const usernamesById = {};
     try {
-      const attribute = this.filteredSearchInput.dataset.usernameParams;
+      const attribute = this.filteredSearchInput.getAttribute('data-username-params');
       JSON.parse(attribute).forEach((user) => {
         usernamesById[user.id] = user.username;
       });
diff --git a/app/assets/javascripts/image_diff/helpers/dom_helper.js b/app/assets/javascripts/image_diff/helpers/dom_helper.js
index 180e927a3e7..3468a629f5a 100644
--- a/app/assets/javascripts/image_diff/helpers/dom_helper.js
+++ b/app/assets/javascripts/image_diff/helpers/dom_helper.js
@@ -6,7 +6,7 @@ export function setPositionDataAttribute(el, options) {
 
   const positionObject = { ...JSON.parse(position), x, y, width, height };
 
-  el.dataset.position = JSON.stringify(positionObject);
+  el.setAttribute('data-position', JSON.stringify(positionObject));
 }
 
 export function updateDiscussionAvatarBadgeNumber(discussionEl, newBadgeNumber) {
diff --git a/app/assets/javascripts/issues/create_merge_request_dropdown.js b/app/assets/javascripts/issues/create_merge_request_dropdown.js
index 7c611dbf39e..3ea70c07058 100644
--- a/app/assets/javascripts/issues/create_merge_request_dropdown.js
+++ b/app/assets/javascripts/issues/create_merge_request_dropdown.js
@@ -81,7 +81,10 @@ export default class CreateMergeRequestDropdown {
     this.init();
 
     if (isConfidentialIssue()) {
-      this.createMergeRequestButton.dataset.dropdownTrigger = '#create-merge-request-dropdown';
+      this.createMergeRequestButton.setAttribute(
+        'data-dropdown-trigger',
+        '#create-merge-request-dropdown',
+      );
       initConfidentialMergeRequest();
     }
   }
diff --git a/app/assets/javascripts/issues/show/components/description.vue b/app/assets/javascripts/issues/show/components/description.vue
index 7594676489f..831cef66836 100644
--- a/app/assets/javascripts/issues/show/components/description.vue
+++ b/app/assets/javascripts/issues/show/components/description.vue
@@ -270,7 +270,7 @@ export default {
     },
     setActiveTask(el) {
       const { parentElement } = el;
-      const lineNumbers = parentElement.dataset.sourcepos.match(/\b\d+(?=:)/g);
+      const lineNumbers = parentElement.getAttribute('data-sourcepos').match(/\b\d+(?=:)/g);
       this.activeTask = {
         title: parentElement.innerText,
         lineNumberStart: lineNumbers[0],
diff --git a/app/assets/javascripts/lazy_loader.js b/app/assets/javascripts/lazy_loader.js
index ba801082377..2b4dd205cf1 100644
--- a/app/assets/javascripts/lazy_loader.js
+++ b/app/assets/javascripts/lazy_loader.js
@@ -127,7 +127,7 @@ export default class LazyLoader {
 
     // Loading Images which are in the current viewport or close to them
     this.lazyImages = this.lazyImages.filter((selectedImage) => {
-      if (selectedImage.dataset.src) {
+      if (selectedImage.getAttribute('data-src')) {
         const imgBoundRect = selectedImage.getBoundingClientRect();
         const imgTop = scrollTop + imgBoundRect.top;
         const imgBound = imgTop + imgBoundRect.height;
@@ -156,17 +156,16 @@ export default class LazyLoader {
   }
 
   static loadImage(img) {
-    if (img.dataset.src) {
+    if (img.getAttribute('data-src')) {
       img.setAttribute('loading', 'lazy');
-      let imgUrl = img.dataset.src;
+      let imgUrl = img.getAttribute('data-src');
       // Only adding width + height for avatars for now
       if (imgUrl.indexOf('/avatar/') > -1 && imgUrl.indexOf('?') === -1) {
         const targetWidth = img.getAttribute('width') || img.width;
         imgUrl += `?width=${targetWidth}`;
       }
       img.setAttribute('src', imgUrl);
-      // eslint-disable-next-line no-param-reassign
-      delete img.dataset.src;
+      img.removeAttribute('data-src');
       img.classList.remove('lazy');
       img.classList.add('js-lazy-loaded');
       img.classList.add('qa-js-lazy-loaded');
diff --git a/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal.js b/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal.js
index a0e730e9722..1adb6f9c26f 100644
--- a/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal.js
+++ b/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal.js
@@ -52,7 +52,7 @@ export function confirmAction(
 export function confirmViaGlModal(message, element) {
   const primaryBtnConfig = {};
 
-  const { confirmBtnVariant } = element.dataset;
+  const confirmBtnVariant = element.getAttribute('data-confirm-btn-variant');
 
   if (confirmBtnVariant) {
     primaryBtnConfig.primaryBtnVariant = confirmBtnVariant;
diff --git a/app/assets/javascripts/members/components/table/role_dropdown.vue b/app/assets/javascripts/members/components/table/role_dropdown.vue
index 6cd8bf57313..fa895cf24c4 100644
--- a/app/assets/javascripts/members/components/table/role_dropdown.vue
+++ b/app/assets/javascripts/members/components/table/role_dropdown.vue
@@ -41,7 +41,7 @@ export default {
     const dropdownToggle = this.$refs.glDropdown.$el.querySelector('.dropdown-toggle');
 
     if (dropdownToggle) {
-      dropdownToggle.dataset.qaSelector = 'access_level_dropdown';
+      dropdownToggle.setAttribute('data-qa-selector', 'access_level_dropdown');
     }
   },
   methods: {
diff --git a/app/assets/javascripts/pages/shared/nav/sidebar_tracking.js b/app/assets/javascripts/pages/shared/nav/sidebar_tracking.js
index 47aae36ecbb..79ce1a37d21 100644
--- a/app/assets/javascripts/pages/shared/nav/sidebar_tracking.js
+++ b/app/assets/javascripts/pages/shared/nav/sidebar_tracking.js
@@ -1,6 +1,6 @@
 function onSidebarLinkClick() {
   const setDataTrackAction = (element, action) => {
-    element.dataset.trackAction = action;
+    element.setAttribute('data-track-action', action);
   };
 
   const setDataTrackExtra = (element, value) => {
@@ -12,10 +12,10 @@ function onSidebarLinkClick() {
       ? SIDEBAR_COLLAPSED
       : SIDEBAR_EXPANDED;
 
-    element.dataset.trackExtra = JSON.stringify({
-      sidebar_display: sidebarCollapsed,
-      menu_display: value,
-    });
+    element.setAttribute(
+      'data-track-extra',
+      JSON.stringify({ sidebar_display: sidebarCollapsed, menu_display: value }),
+    );
   };
 
   const EXPANDED = 'Expanded';
diff --git a/app/assets/javascripts/pages/users/activity_calendar.js b/app/assets/javascripts/pages/users/activity_calendar.js
index 94506d33b33..996e12bc105 100644
--- a/app/assets/javascripts/pages/users/activity_calendar.js
+++ b/app/assets/javascripts/pages/users/activity_calendar.js
@@ -298,7 +298,7 @@ export default class ActivityCalendar {
             .querySelector(this.activitiesContainer)
             .querySelectorAll('.js-localtime')
             .forEach((el) => {
-              el.setAttribute('title', formatDate(el.dataset.datetime));
+              el.setAttribute('title', formatDate(el.getAttribute('data-datetime')));
             });
         })
         .catch(() =>
diff --git a/app/assets/javascripts/pipeline_editor/components/file_tree/container.vue b/app/assets/javascripts/pipeline_editor/components/file_tree/container.vue
index 8bffb281211..280cd729a43 100644
--- a/app/assets/javascripts/pipeline_editor/components/file_tree/container.vue
+++ b/app/assets/javascripts/pipeline_editor/components/file_tree/container.vue
@@ -24,7 +24,7 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
-  inject: ['ciConfigPath'],
+  inject: ['ciConfigPath', 'includesHelpPagePath'],
   props: {
     includes: {
       type: Array,
@@ -61,7 +61,14 @@ export default {
         <span data-testid="current-config-filename">{{ ciConfigPath }}</span>
       </span>
     </div>
-    <gl-alert v-if="showTip" variant="tip" :title="$options.i18n.tipTitle" @dismiss="dismissTip">
+    <gl-alert
+      v-if="showTip"
+      variant="tip"
+      :title="$options.i18n.tipTitle"
+      :secondary-button-text="$options.i18n.tipBtn"
+      :secondary-button-link="includesHelpPagePath"
+      @dismiss="dismissTip"
+    >
       {{ $options.i18n.tipDescription }}
     </gl-alert>
     <div class="gl-overflow-y-auto">
diff --git a/app/assets/javascripts/pipeline_editor/components/popovers/file_tree_popover.vue b/app/assets/javascripts/pipeline_editor/components/popovers/file_tree_popover.vue
index 029fe2ec909..6270429535d 100644
--- a/app/assets/javascripts/pipeline_editor/components/popovers/file_tree_popover.vue
+++ b/app/assets/javascripts/pipeline_editor/components/popovers/file_tree_popover.vue
@@ -1,6 +1,6 @@
 <script>
-import { GlPopover, GlOutsideDirective as Outside } from '@gitlab/ui';
-import { s__, __ } from '~/locale';
+import { GlLink, GlPopover, GlOutsideDirective as Outside, GlSprintf } from '@gitlab/ui';
+import { s__ } from '~/locale';
 import { FILE_TREE_POPOVER_DISMISSED_KEY } from '../../constants';
 
 export default {
@@ -8,13 +8,15 @@ export default {
   directives: { Outside },
   i18n: {
     description: s__(
-      'pipelineEditorWalkthrough|You can use the file tree to view your pipeline configuration files.',
+      'pipelineEditorWalkthrough|You can use the file tree to view your pipeline configuration files. %{linkStart}Learn more%{linkEnd}',
     ),
-    learnMore: __('Learn more'),
   },
   components: {
+    GlLink,
     GlPopover,
+    GlSprintf,
   },
+  inject: ['includesHelpPagePath'],
   data() {
     return {
       showPopover: false,
@@ -46,8 +48,12 @@ export default {
     data-qa-selector="file_tree_popover"
     @close-button-clicked="dismissPermanently"
   >
-    <div v-outside="closePopover" class="gl-display-flex gl-flex-direction-column">
-      <p class="gl-font-base">{{ $options.i18n.description }}</p>
+    <div v-outside="closePopover" class="gl-font-base gl-mb-3">
+      <gl-sprintf :message="$options.i18n.description">
+        <template #link="{ content }">
+          <gl-link :href="includesHelpPagePath" target="_blank">{{ content }}</gl-link>
+        </template>
+      </gl-sprintf>
     </div>
   </gl-popover>
 </template>
diff --git a/app/assets/javascripts/pipeline_editor/index.js b/app/assets/javascripts/pipeline_editor/index.js
index 732fc665c9e..7bfdddbc08a 100644
--- a/app/assets/javascripts/pipeline_editor/index.js
+++ b/app/assets/javascripts/pipeline_editor/index.js
@@ -30,6 +30,7 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => {
     defaultBranch,
     emptyStateIllustrationPath,
     helpPaths,
+    includesHelpPagePath,
     lintHelpPagePath,
     lintUnavailableHelpPagePath,
     needsHelpPagePath,
@@ -118,6 +119,7 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => {
       defaultBranch,
       emptyStateIllustrationPath,
       helpPaths,
+      includesHelpPagePath,
       lintHelpPagePath,
       lintUnavailableHelpPagePath,
       needsHelpPagePath,
diff --git a/app/assets/javascripts/projects/commits/components/author_select.vue b/app/assets/javascripts/projects/commits/components/author_select.vue
index 884ef732144..c8a0a3417f3 100644
--- a/app/assets/javascripts/projects/commits/components/author_select.vue
+++ b/app/assets/javascripts/projects/commits/components/author_select.vue
@@ -57,7 +57,7 @@ export default {
 
     if (authorParam) {
       commitsSearchInput.setAttribute('disabled', true);
-      commitsSearchInput.dataset.toggle = 'tooltip';
+      commitsSearchInput.setAttribute('data-toggle', 'tooltip');
       commitsSearchInput.setAttribute('title', tooltipMessage);
       this.currentAuthor = authorParam;
     }
diff --git a/app/assets/javascripts/sidebar/mount_sidebar.js b/app/assets/javascripts/sidebar/mount_sidebar.js
index 5e57d4c3d6e..2a7d967cb61 100644
--- a/app/assets/javascripts/sidebar/mount_sidebar.js
+++ b/app/assets/javascripts/sidebar/mount_sidebar.js
@@ -119,7 +119,7 @@ function mountAssigneesComponentDeprecated(mediator) {
           issuableIid: String(iid),
           projectPath: fullPath,
           field: el.dataset.field,
-          signedIn: Object.hasOwn(el.dataset, 'signedIn'),
+          signedIn: el.hasAttribute('data-signed-in'),
           issuableType:
             isInIssuePage() || isInIncidentPage() || isInDesignPage()
               ? IssuableType.Issue
@@ -149,7 +149,7 @@ function mountAssigneesComponent() {
     },
     provide: {
       canUpdate: editable,
-      directlyInviteMembers: Object.hasOwn(el.dataset, 'directlyInviteMembers'),
+      directlyInviteMembers: el.hasAttribute('data-directly-invite-members'),
     },
     render: (createElement) =>
       createElement('sidebar-assignees-widget', {
diff --git a/app/assets/javascripts/terraform/index.js b/app/assets/javascripts/terraform/index.js
index 64e90f9227c..34261f3c4db 100644
--- a/app/assets/javascripts/terraform/index.js
+++ b/app/assets/javascripts/terraform/index.js
@@ -39,7 +39,7 @@ export default () => {
         props: {
           emptyStateImage,
           projectPath,
-          terraformAdmin: Object.hasOwn(el.dataset, 'terraformAdmin'),
+          terraformAdmin: el.hasAttribute('data-terraform-admin'),
         },
       });
     },
diff --git a/app/assets/javascripts/whats_new/components/app.vue b/app/assets/javascripts/whats_new/components/app.vue
index 0c55cc2f8a6..b74dba686ad 100644
--- a/app/assets/javascripts/whats_new/components/app.vue
+++ b/app/assets/javascripts/whats_new/components/app.vue
@@ -33,7 +33,7 @@ export default {
     this.fetchFreshItems();
 
     const body = document.querySelector('body');
-    const { namespaceId } = body.dataset;
+    const namespaceId = body.getAttribute('data-namespace-id');
 
     this.track('click_whats_new_drawer', { label: 'namespace_id', value: namespaceId });
   },
diff --git a/app/assets/javascripts/whats_new/utils/notification.js b/app/assets/javascripts/whats_new/utils/notification.js
index 41aff202f48..66ee3b1a971 100644
--- a/app/assets/javascripts/whats_new/utils/notification.js
+++ b/app/assets/javascripts/whats_new/utils/notification.js
@@ -1,6 +1,6 @@
 export const STORAGE_KEY = 'display-whats-new-notification';
 
-export const getVersionDigest = (appEl) => appEl.dataset.versionDigest;
+export const getVersionDigest = (appEl) => appEl.getAttribute('data-version-digest');
 
 export const setNotification = (appEl) => {
   const versionDigest = getVersionDigest(appEl);