diff options
53 files changed, 133 insertions, 130 deletions
diff --git a/.eslintrc.yml b/.eslintrc.yml index 9f587bd204a..97c24d99871 100644 --- a/.eslintrc.yml +++ b/.eslintrc.yml @@ -26,6 +26,12 @@ rules: - _links import/no-unresolved: - error + - ignore: + # In FOSS, these import paths are rewritten using + # NormalModuleReplacementPlugin, which import/no-unresolved doesn't + # consider. See + # https://gitlab.com/gitlab-org/gitlab/-/merge_requests/89831. + - '^(ee|jh)_component/' # Disabled for now, to make the airbnb-base 12.1.0 -> 13.1.0 update smoother no-else-return: - error @@ -108,8 +114,6 @@ rules: message: 'Migrate to GlSkeletonLoader, or import GlDeprecatedSkeletonLoading.' # See https://gitlab.com/gitlab-org/gitlab/-/issues/360551 vue/multi-word-component-names: off - unicorn/prefer-dom-node-dataset: - - error overrides: - files: - '{,ee/,jh/}spec/frontend*/**/*' 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 af7aac4cf36..fd1a99acf99 100644 --- a/app/assets/javascripts/behaviors/markdown/render_math.js +++ b/app/assets/javascripts/behaviors/markdown/render_math.js @@ -112,7 +112,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, @@ -145,7 +145,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/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 edf3789e6dc..c5f31081625 100644 --- a/app/assets/javascripts/issues/create_merge_request_dropdown.js +++ b/app/assets/javascripts/issues/create_merge_request_dropdown.js @@ -82,7 +82,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 90e039259da..d6ea06d172e 100644 --- a/app/assets/javascripts/issues/show/components/description.vue +++ b/app/assets/javascripts/issues/show/components/description.vue @@ -378,7 +378,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 2dc479db80a..173116062c9 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 @@ -56,7 +56,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/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 81ed04c7ce6..351bb50d941 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 1f851a4376a..571177986d2 100644 --- a/app/assets/javascripts/terraform/index.js +++ b/app/assets/javascripts/terraform/index.js @@ -39,7 +39,7 @@ export default () => { return createElement(TerraformList, { props: { emptyStateImage, - 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); diff --git a/spec/frontend/__helpers__/init_vue_mr_page_helper.js b/spec/frontend/__helpers__/init_vue_mr_page_helper.js index 6b719a32480..ee01e9e6268 100644 --- a/spec/frontend/__helpers__/init_vue_mr_page_helper.js +++ b/spec/frontend/__helpers__/init_vue_mr_page_helper.js @@ -13,16 +13,16 @@ export default function initVueMRPage() { const diffsAppProjectPath = 'testproject'; const mrEl = document.createElement('div'); mrEl.className = 'merge-request fixture-mr'; - mrEl.dataset.mrAction = 'diffs'; + mrEl.setAttribute('data-mr-action', 'diffs'); mrTestEl.appendChild(mrEl); const mrDiscussionsEl = document.createElement('div'); mrDiscussionsEl.id = 'js-vue-mr-discussions'; - mrDiscussionsEl.dataset.currentUserData = JSON.stringify(userDataMock); - mrDiscussionsEl.dataset.noteableData = JSON.stringify(noteableDataMock); - mrDiscussionsEl.dataset.notesData = JSON.stringify(notesDataMock); - mrDiscussionsEl.dataset.noteableType = 'merge-request'; - mrDiscussionsEl.dataset.isLocked = 'false'; + mrDiscussionsEl.setAttribute('data-current-user-data', JSON.stringify(userDataMock)); + mrDiscussionsEl.setAttribute('data-noteable-data', JSON.stringify(noteableDataMock)); + mrDiscussionsEl.setAttribute('data-notes-data', JSON.stringify(notesDataMock)); + mrDiscussionsEl.setAttribute('data-noteable-type', 'merge-request'); + mrDiscussionsEl.setAttribute('data-is-locked', 'false'); mrTestEl.appendChild(mrDiscussionsEl); const discussionCounterEl = document.createElement('div'); @@ -31,9 +31,9 @@ export default function initVueMRPage() { const diffsAppEl = document.createElement('div'); diffsAppEl.id = 'js-diffs-app'; - diffsAppEl.dataset.endpoint = diffsAppEndpoint; - diffsAppEl.dataset.projectPath = diffsAppProjectPath; - diffsAppEl.dataset.currentUserData = JSON.stringify(userDataMock); + diffsAppEl.setAttribute('data-endpoint', diffsAppEndpoint); + diffsAppEl.setAttribute('data-project-path', diffsAppProjectPath); + diffsAppEl.setAttribute('data-current-user-data', JSON.stringify(userDataMock)); mrTestEl.appendChild(diffsAppEl); const mock = new MockAdapter(axios); diff --git a/spec/frontend/__helpers__/matchers/to_have_sprite_icon.js b/spec/frontend/__helpers__/matchers/to_have_sprite_icon.js index 45b9c31c4db..bce9d93bea8 100644 --- a/spec/frontend/__helpers__/matchers/to_have_sprite_icon.js +++ b/spec/frontend/__helpers__/matchers/to_have_sprite_icon.js @@ -9,7 +9,7 @@ export const toHaveSpriteIcon = (element, iconName) => { const iconReferences = [].slice.apply(element.querySelectorAll('svg use')); const matchingIcon = iconReferences.find( - (reference) => reference.parentNode.dataset.testid === `${iconName}-icon`, + (reference) => reference.parentNode.getAttribute('data-testid') === `${iconName}-icon`, ); const pass = Boolean(matchingIcon); diff --git a/spec/frontend/admin/users/index_spec.js b/spec/frontend/admin/users/index_spec.js index 961fa96acdd..06dbadd6d3d 100644 --- a/spec/frontend/admin/users/index_spec.js +++ b/spec/frontend/admin/users/index_spec.js @@ -12,8 +12,8 @@ describe('initAdminUsersApp', () => { beforeEach(() => { el = document.createElement('div'); - el.dataset.users = JSON.stringify(users); - el.dataset.paths = JSON.stringify(paths); + el.setAttribute('data-users', JSON.stringify(users)); + el.setAttribute('data-paths', JSON.stringify(paths)); wrapper = createWrapper(initAdminUsersApp(el)); }); @@ -40,8 +40,8 @@ describe('initAdminUserActions', () => { beforeEach(() => { el = document.createElement('div'); - el.dataset.user = JSON.stringify(user); - el.dataset.paths = JSON.stringify(paths); + el.setAttribute('data-user', JSON.stringify(user)); + el.setAttribute('data-paths', JSON.stringify(paths)); wrapper = createWrapper(initAdminUserActions(el)); }); diff --git a/spec/frontend/authentication/two_factor_auth/index_spec.js b/spec/frontend/authentication/two_factor_auth/index_spec.js index f9a6b2df662..0ff9d60f409 100644 --- a/spec/frontend/authentication/two_factor_auth/index_spec.js +++ b/spec/frontend/authentication/two_factor_auth/index_spec.js @@ -15,8 +15,8 @@ describe('initRecoveryCodes', () => { beforeEach(() => { el = document.createElement('div'); el.setAttribute('class', 'js-2fa-recovery-codes'); - el.dataset.codes = codesJsonString; - el.dataset.profileAccountPath = profileAccountPath; + el.setAttribute('data-codes', codesJsonString); + el.setAttribute('data-profile-account-path', profileAccountPath); document.body.appendChild(el); wrapper = createWrapper(initRecoveryCodes()); diff --git a/spec/frontend/blob/components/table_contents_spec.js b/spec/frontend/blob/components/table_contents_spec.js index 2cbac809a0d..358ac31819c 100644 --- a/spec/frontend/blob/components/table_contents_spec.js +++ b/spec/frontend/blob/components/table_contents_spec.js @@ -11,7 +11,7 @@ function createComponent() { } async function setLoaded(loaded) { - document.querySelector('.blob-viewer').dataset.loaded = loaded; + document.querySelector('.blob-viewer').setAttribute('data-loaded', loaded); await nextTick(); } @@ -53,7 +53,7 @@ describe('Markdown table of contents component', () => { it('does not show dropdown when viewing non-rich content', async () => { createComponent(); - document.querySelector('.blob-viewer').dataset.type = 'simple'; + document.querySelector('.blob-viewer').setAttribute('data-type', 'simple'); await setLoaded(true); diff --git a/spec/frontend/blob/viewer/index_spec.js b/spec/frontend/blob/viewer/index_spec.js index b2559af182b..5f6baf3f63d 100644 --- a/spec/frontend/blob/viewer/index_spec.js +++ b/spec/frontend/blob/viewer/index_spec.js @@ -80,9 +80,9 @@ describe('Blob viewer', () => { return asyncClick() .then(() => asyncClick()) .then(() => { - expect(document.querySelector('.blob-viewer[data-type="simple"]').dataset.loaded).toBe( - 'true', - ); + expect( + document.querySelector('.blob-viewer[data-type="simple"]').getAttribute('data-loaded'), + ).toBe('true'); }); }); diff --git a/spec/frontend/cascading_settings/components/lock_popovers_spec.js b/spec/frontend/cascading_settings/components/lock_popovers_spec.js index 182e3c1c8ff..585e6ac505b 100644 --- a/spec/frontend/cascading_settings/components/lock_popovers_spec.js +++ b/spec/frontend/cascading_settings/components/lock_popovers_spec.js @@ -21,12 +21,12 @@ describe('LockPopovers', () => { }; if (lockedByApplicationSetting) { - popoverMountEl.dataset.popoverData = JSON.stringify(popoverData); + popoverMountEl.setAttribute('data-popover-data', JSON.stringify(popoverData)); } else if (lockedByAncestor) { - popoverMountEl.dataset.popoverData = JSON.stringify({ - ...popoverData, - ancestor_namespace: mockNamespace, - }); + popoverMountEl.setAttribute( + 'data-popover-data', + JSON.stringify({ ...popoverData, ancestor_namespace: mockNamespace }), + ); } document.body.appendChild(popoverMountEl); diff --git a/spec/frontend/code_navigation/store/actions_spec.js b/spec/frontend/code_navigation/store/actions_spec.js index 8eee61d1342..c47a9e697b6 100644 --- a/spec/frontend/code_navigation/store/actions_spec.js +++ b/spec/frontend/code_navigation/store/actions_spec.js @@ -195,8 +195,8 @@ describe('Code navigation actions', () => { it('commits SET_CURRENT_DEFINITION with LSIF data', () => { target.classList.add('js-code-navigation'); - target.dataset.lineIndex = '0'; - target.dataset.charIndex = '0'; + target.setAttribute('data-line-index', '0'); + target.setAttribute('data-char-index', '0'); return testAction( actions.showDefinition, @@ -218,8 +218,8 @@ describe('Code navigation actions', () => { it('adds hll class to target element', () => { target.classList.add('js-code-navigation'); - target.dataset.lineIndex = '0'; - target.dataset.charIndex = '0'; + target.setAttribute('data-line-index', '0'); + target.setAttribute('data-char-index', '0'); return testAction( actions.showDefinition, @@ -243,8 +243,8 @@ describe('Code navigation actions', () => { it('caches current target element', () => { target.classList.add('js-code-navigation'); - target.dataset.lineIndex = '0'; - target.dataset.charIndex = '0'; + target.setAttribute('data-line-index', '0'); + target.setAttribute('data-char-index', '0'); return testAction( actions.showDefinition, diff --git a/spec/frontend/confirm_modal_spec.js b/spec/frontend/confirm_modal_spec.js index 4224fb6be2a..53991349ee5 100644 --- a/spec/frontend/confirm_modal_spec.js +++ b/spec/frontend/confirm_modal_spec.js @@ -31,9 +31,9 @@ describe('ConfirmModal', () => { buttons.forEach((x) => { const button = document.createElement('button'); button.setAttribute('class', 'js-confirm-modal-button'); - button.dataset.path = x.path; - button.dataset.method = x.method; - button.dataset.modalAttributes = JSON.stringify(x.modalAttributes); + button.setAttribute('data-path', x.path); + button.setAttribute('data-method', x.method); + button.setAttribute('data-modal-attributes', JSON.stringify(x.modalAttributes)); button.innerHTML = 'Action'; buttonContainer.appendChild(button); }); diff --git a/spec/frontend/helpers/startup_css_helper_spec.js b/spec/frontend/helpers/startup_css_helper_spec.js index 05161437c22..2236b5aa261 100644 --- a/spec/frontend/helpers/startup_css_helper_spec.js +++ b/spec/frontend/helpers/startup_css_helper_spec.js @@ -59,10 +59,9 @@ describe('waitForCSSLoaded', () => { <link href="two.css" data-startupcss="loading"> `); const events = waitForCSSLoaded(mockedCallback); - document.querySelectorAll('[data-startupcss="loading"]').forEach((elem) => { - // eslint-disable-next-line no-param-reassign - elem.dataset.startupcss = 'loaded'; - }); + document + .querySelectorAll('[data-startupcss="loading"]') + .forEach((elem) => elem.setAttribute('data-startupcss', 'loaded')); document.dispatchEvent(new CustomEvent('CSSStartupLinkLoaded')); await events; diff --git a/spec/frontend/issues/create_merge_request_dropdown_spec.js b/spec/frontend/issues/create_merge_request_dropdown_spec.js index cb7173c56a8..20b26f5abba 100644 --- a/spec/frontend/issues/create_merge_request_dropdown_spec.js +++ b/spec/frontend/issues/create_merge_request_dropdown_spec.js @@ -84,7 +84,7 @@ describe('CreateMergeRequestDropdown', () => { }); it('enables when can create confidential issue', () => { - document.querySelector('.js-create-mr').dataset.isConfidential = 'true'; + document.querySelector('.js-create-mr').setAttribute('data-is-confidential', 'true'); confidentialState.selectedProject = { name: 'test' }; dropdown.enable(); @@ -93,7 +93,7 @@ describe('CreateMergeRequestDropdown', () => { }); it('does not enable when can not create confidential issue', () => { - document.querySelector('.js-create-mr').dataset.isConfidential = 'true'; + document.querySelector('.js-create-mr').setAttribute('data-is-confidential', 'true'); dropdown.enable(); diff --git a/spec/frontend/labels/delete_label_modal_spec.js b/spec/frontend/labels/delete_label_modal_spec.js index 67220821fe0..98049538948 100644 --- a/spec/frontend/labels/delete_label_modal_spec.js +++ b/spec/frontend/labels/delete_label_modal_spec.js @@ -25,11 +25,11 @@ describe('DeleteLabelModal', () => { buttons.forEach((x) => { const button = document.createElement('button'); button.setAttribute('class', 'js-delete-label-modal-button'); - button.dataset.labelName = x.labelName; - button.dataset.destroyPath = x.destroyPath; + button.setAttribute('data-label-name', x.labelName); + button.setAttribute('data-destroy-path', x.destroyPath); if (x.subjectName) { - button.dataset.subjectName = x.subjectName; + button.setAttribute('data-subject-name', x.subjectName); } button.innerHTML = 'Action'; diff --git a/spec/frontend/lazy_loader_spec.js b/spec/frontend/lazy_loader_spec.js index e0b6c7119f9..3d8b0d9c307 100644 --- a/spec/frontend/lazy_loader_spec.js +++ b/spec/frontend/lazy_loader_spec.js @@ -27,7 +27,7 @@ describe('LazyLoader', () => { const createLazyLoadImage = () => { const newImg = document.createElement('img'); newImg.className = 'lazy'; - newImg.dataset.src = TEST_PATH; + newImg.setAttribute('data-src', TEST_PATH); document.body.appendChild(newImg); triggerChildMutation(); @@ -108,7 +108,7 @@ describe('LazyLoader', () => { expect(LazyLoader.loadImage).toHaveBeenCalledWith(img); expect(img.getAttribute('src')).toBe(TEST_PATH); - expect(img.dataset.src).toBeUndefined(); + expect(img.getAttribute('data-src')).toBe(null); expect(img).toHaveClass('js-lazy-loaded'); }); diff --git a/spec/frontend/members/index_spec.js b/spec/frontend/members/index_spec.js index 251a8b0b774..efabe54f238 100644 --- a/spec/frontend/members/index_spec.js +++ b/spec/frontend/members/index_spec.js @@ -24,7 +24,7 @@ describe('initMembersApp', () => { beforeEach(() => { el = document.createElement('div'); - el.dataset.membersData = dataAttribute; + el.setAttribute('data-members-data', dataAttribute); window.gon = { current_user_id: 123 }; }); diff --git a/spec/frontend/members/utils_spec.js b/spec/frontend/members/utils_spec.js index b0c9459ff4f..a157cfa1c1d 100644 --- a/spec/frontend/members/utils_spec.js +++ b/spec/frontend/members/utils_spec.js @@ -256,7 +256,7 @@ describe('Members Utils', () => { beforeEach(() => { el = document.createElement('div'); - el.dataset.membersData = dataAttribute; + el.setAttribute('data-members-data', dataAttribute); }); afterEach(() => { diff --git a/spec/frontend/notebook/cells/markdown_spec.js b/spec/frontend/notebook/cells/markdown_spec.js index de415b5bfe0..7dc6f90d202 100644 --- a/spec/frontend/notebook/cells/markdown_spec.js +++ b/spec/frontend/notebook/cells/markdown_spec.js @@ -78,8 +78,8 @@ describe('Markdown component', () => { }); await nextTick(); - expect(findLink().dataset.remote).toBeUndefined(); - expect(findLink().dataset.type).toBeUndefined(); + expect(findLink().getAttribute('data-remote')).toBe(null); + expect(findLink().getAttribute('data-type')).toBe(null); }); describe('When parsing images', () => { diff --git a/spec/frontend/notes/stores/actions_spec.js b/spec/frontend/notes/stores/actions_spec.js index 38f29ac2559..4ecfbc5de1f 100644 --- a/spec/frontend/notes/stores/actions_spec.js +++ b/spec/frontend/notes/stores/actions_spec.js @@ -404,13 +404,13 @@ describe('Actions Notes Store', () => { beforeEach(() => { axiosMock.onDelete(endpoint).replyOnce(200, {}); - document.body.dataset.page = ''; + document.body.setAttribute('data-page', ''); }); afterEach(() => { axiosMock.restore(); - document.body.dataset.page = ''; + document.body.setAttribute('data-page', ''); }); it('commits DELETE_NOTE and dispatches updateMergeRequestWidget', () => { @@ -440,7 +440,7 @@ describe('Actions Notes Store', () => { it('dispatches removeDiscussionsFromDiff on merge request page', () => { const note = { path: endpoint, id: 1 }; - document.body.dataset.page = 'projects:merge_requests:show'; + document.body.setAttribute('data-page', 'projects:merge_requests:show'); return testAction( actions.removeNote, @@ -473,13 +473,13 @@ describe('Actions Notes Store', () => { beforeEach(() => { axiosMock.onDelete(endpoint).replyOnce(200, {}); - document.body.dataset.page = ''; + document.body.setAttribute('data-page', ''); }); afterEach(() => { axiosMock.restore(); - document.body.dataset.page = ''; + document.body.setAttribute('data-page', ''); }); it('dispatches removeNote', () => { diff --git a/spec/frontend/performance_bar/index_spec.js b/spec/frontend/performance_bar/index_spec.js index 2da176dbfe4..008961bf709 100644 --- a/spec/frontend/performance_bar/index_spec.js +++ b/spec/frontend/performance_bar/index_spec.js @@ -17,11 +17,11 @@ describe('performance bar wrapper', () => { performance.getEntriesByType = jest.fn().mockReturnValue([]); peekWrapper.setAttribute('id', 'js-peek'); - peekWrapper.dataset.env = 'development'; - peekWrapper.dataset.requestId = '123'; - peekWrapper.dataset.peekUrl = '/-/peek/results'; - peekWrapper.dataset.statsUrl = 'https://log.gprd.gitlab.net/app/dashboards#/view/'; - peekWrapper.dataset.profileUrl = '?lineprofiler=true'; + peekWrapper.setAttribute('data-env', 'development'); + peekWrapper.setAttribute('data-request-id', '123'); + peekWrapper.setAttribute('data-peek-url', '/-/peek/results'); + peekWrapper.setAttribute('data-stats-url', 'https://log.gprd.gitlab.net/app/dashboards#/view/'); + peekWrapper.setAttribute('data-profile-url', '?lineprofiler=true'); mock = new MockAdapter(axios); diff --git a/spec/frontend/search_autocomplete_spec.js b/spec/frontend/search_autocomplete_spec.js index 266f047e9dc..4639552b4d3 100644 --- a/spec/frontend/search_autocomplete_spec.js +++ b/spec/frontend/search_autocomplete_spec.js @@ -53,7 +53,7 @@ describe('Search autocomplete dropdown', () => { }; const disableProjectIssues = () => { - document.querySelector('.js-search-project-options').dataset.issuesDisabled = true; + document.querySelector('.js-search-project-options').setAttribute('data-issues-disabled', true); }; // Mock `gl` object in window for dashboard specific page. App code will need it. diff --git a/spec/frontend/user_popovers_spec.js b/spec/frontend/user_popovers_spec.js index 1544fed5240..2c3db36d7e6 100644 --- a/spec/frontend/user_popovers_spec.js +++ b/spec/frontend/user_popovers_spec.js @@ -22,7 +22,7 @@ describe('User Popovers', () => { const link = document.createElement('a'); link.classList.add('js-user-link'); - link.dataset.user = '1'; + link.setAttribute('data-user', '1'); return link; }; diff --git a/spec/frontend/users_select/test_helper.js b/spec/frontend/users_select/test_helper.js index 9231e38ea90..59edde48eab 100644 --- a/spec/frontend/users_select/test_helper.js +++ b/spec/frontend/users_select/test_helper.js @@ -95,10 +95,10 @@ export const setAssignees = (...users) => { const input = document.createElement('input'); input.name = 'merge_request[assignee_ids][]'; input.value = user.id.toString(); - input.dataset.avatarUrl = user.avatar_url; - input.dataset.name = user.name; - input.dataset.username = user.username; - input.dataset.canMerge = user.can_merge; + input.setAttribute('data-avatar-url', user.avatar_url); + input.setAttribute('data-name', user.name); + input.setAttribute('data-username', user.username); + input.setAttribute('data-can-merge', user.can_merge); return input; }), ); diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_merged_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_merged_spec.js index 29ee7e0010f..8efc4d84624 100644 --- a/spec/frontend/vue_mr_widget/components/states/mr_widget_merged_spec.js +++ b/spec/frontend/vue_mr_widget/components/states/mr_widget_merged_spec.js @@ -193,7 +193,9 @@ describe('MRWidgetMerged', () => { it('shows button to copy commit SHA to clipboard', () => { expect(selectors.copyMergeShaButton).not.toBe(null); - expect(selectors.copyMergeShaButton.dataset.clipboardText).toBe(vm.mr.mergeCommitSha); + expect(selectors.copyMergeShaButton.getAttribute('data-clipboard-text')).toBe( + vm.mr.mergeCommitSha, + ); }); it('hides button to copy commit SHA if SHA does not exist', async () => { diff --git a/spec/frontend/vue_mr_widget/mr_widget_options_spec.js b/spec/frontend/vue_mr_widget/mr_widget_options_spec.js index d134877e584..a8c55c2c735 100644 --- a/spec/frontend/vue_mr_widget/mr_widget_options_spec.js +++ b/spec/frontend/vue_mr_widget/mr_widget_options_spec.js @@ -424,7 +424,7 @@ describe('MrWidgetOptions', () => { beforeEach(() => { const favicon = document.createElement('link'); favicon.setAttribute('id', 'favicon'); - favicon.dataset.originalHref = faviconDataUrl; + favicon.setAttribute('data-original-href', faviconDataUrl); document.body.appendChild(favicon); faviconElement = document.getElementById('favicon'); diff --git a/spec/frontend_integration/ide/helpers/ide_helper.js b/spec/frontend_integration/ide/helpers/ide_helper.js index 20a1e5aceb2..5253560c655 100644 --- a/spec/frontend_integration/ide/helpers/ide_helper.js +++ b/spec/frontend_integration/ide/helpers/ide_helper.js @@ -46,14 +46,14 @@ export const findMonacoDiffEditor = () => export const findAndSetEditorValue = async (value) => { const editor = await findMonacoEditor(); - const { uri } = editor.dataset; + const uri = editor.getAttribute('data-uri'); monacoEditor.getModel(uri).setValue(value); }; export const getEditorValue = async () => { const editor = await findMonacoEditor(); - const { uri } = editor.dataset; + const uri = editor.getAttribute('data-uri'); return monacoEditor.getModel(uri).getValue(); }; |