diff --git a/app/assets/javascripts/achievements/components/achievements_form.vue b/app/assets/javascripts/achievements/components/achievements_form.vue index 49c162e9ce0..48223460a0a 100644 --- a/app/assets/javascripts/achievements/components/achievements_form.vue +++ b/app/assets/javascripts/achievements/components/achievements_form.vue @@ -265,7 +265,7 @@ export default { type="file" accept="image/*" name="avatar_file" - class="gl-display-none" + class="gl-hidden" @change="selectFile" /> diff --git a/app/assets/javascripts/admin/application_settings/network_outbound.js b/app/assets/javascripts/admin/application_settings/network_outbound.js index ad7ed85131c..ad9a474f229 100644 --- a/app/assets/javascripts/admin/application_settings/network_outbound.js +++ b/app/assets/javascripts/admin/application_settings/network_outbound.js @@ -11,9 +11,9 @@ export default () => { const denyAllRequestsWarning = document.querySelector('.js-deny-all-requests-warning'); if (denyAll) { - denyAllRequestsWarning.classList.remove('gl-display-none'); + denyAllRequestsWarning.classList.remove('gl-hidden'); } else { - denyAllRequestsWarning.classList.add('gl-display-none'); + denyAllRequestsWarning.classList.add('gl-hidden'); } allowLocalRequests.forEach((allowLocalRequest) => { diff --git a/app/assets/javascripts/blob/csv/csv_viewer.vue b/app/assets/javascripts/blob/csv/csv_viewer.vue index 7231d023024..dc98ca429e0 100644 --- a/app/assets/javascripts/blob/csv/csv_viewer.vue +++ b/app/assets/javascripts/blob/csv/csv_viewer.vue @@ -80,7 +80,7 @@ export default { :items="items" :fields="$options.fields" show-empty - thead-class="gl-display-none" + thead-class="gl-hidden" />
{ }); commitButton.on('click', () => { - commitButton.addClass('gl-display-none'); - commitButtonLoading.removeClass('gl-display-none'); + commitButton.addClass('gl-hidden'); + commitButtonLoading.removeClass('gl-hidden'); window.onbeforeunload = null; }); diff --git a/app/assets/javascripts/boards/components/board_list_header.vue b/app/assets/javascripts/boards/components/board_list_header.vue index 7ad31683bd0..a453b4fe966 100644 --- a/app/assets/javascripts/boards/components/board_list_header.vue +++ b/app/assets/javascripts/boards/components/board_list_header.vue @@ -373,7 +373,7 @@ export default {
{{ fileName }} - + diff --git a/app/assets/javascripts/ci/pipeline_schedules/components/pipeline_schedules.vue b/app/assets/javascripts/ci/pipeline_schedules/components/pipeline_schedules.vue index 5bd22c83ead..d2246ef7b15 100644 --- a/app/assets/javascripts/ci/pipeline_schedules/components/pipeline_schedules.vue +++ b/app/assets/javascripts/ci/pipeline_schedules/components/pipeline_schedules.vue @@ -15,11 +15,17 @@ import { s__, sprintf } from '~/locale'; import { limitedCounterWithDelimiter } from '~/lib/utils/text_utility'; import { queryToObject } from '~/lib/utils/url_utility'; import { reportToSentry } from '~/ci/utils'; +import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue'; import deletePipelineScheduleMutation from '../graphql/mutations/delete_pipeline_schedule.mutation.graphql'; import playPipelineScheduleMutation from '../graphql/mutations/play_pipeline_schedule.mutation.graphql'; import takeOwnershipMutation from '../graphql/mutations/take_ownership.mutation.graphql'; import getPipelineSchedulesQuery from '../graphql/queries/get_pipeline_schedules.query.graphql'; -import { ALL_SCOPE, SCHEDULES_PER_PAGE, DEFAULT_SORT_VALUE } from '../constants'; +import { + ALL_SCOPE, + SCHEDULES_PER_PAGE, + DEFAULT_SORT_VALUE, + TABLE_SORT_STORAGE_KEY, +} from '../constants'; import PipelineSchedulesTable from './table/pipeline_schedules_table.vue'; import TakeOwnershipModal from './take_ownership_modal.vue'; import DeletePipelineScheduleModal from './delete_pipeline_schedule_modal.vue'; @@ -54,6 +60,7 @@ export default { ), planLimitReachedBtnText: s__('PipelineSchedules|Explore plan limits'), }, + sortStorageKey: TABLE_SORT_STORAGE_KEY, docsLink: helpPagePath('administration/instance_limits', { anchor: 'number-of-pipeline-schedules', }), @@ -68,6 +75,7 @@ export default { GlTab, GlSprintf, GlLink, + LocalStorageSync, PipelineSchedulesTable, TakeOwnershipModal, PipelineScheduleEmptyState, @@ -207,6 +215,16 @@ export default { shouldDisableNewScheduleBtn() { return (this.hasReachedPlanLimit || this.hasNoAccess) && !this.hasUnlimitedSchedules; }, + sortingState: { + get() { + return { sortValue: this.sortValue, sortBy: this.sortBy, sortDesc: this.sortDesc }; + }, + set(values) { + this.sortValue = values.sortValue; + this.sortBy = values.sortBy; + this.sortDesc = values.sortDesc; + }, + }, }, watch: { // this watcher ensures that the count on the all tab @@ -380,6 +398,8 @@ export default { + +
diff --git a/app/assets/javascripts/ci/runner/group_runners/group_runners_app.vue b/app/assets/javascripts/ci/runner/group_runners/group_runners_app.vue index d81670dd28a..77150f5ef40 100644 --- a/app/assets/javascripts/ci/runner/group_runners/group_runners_app.vue +++ b/app/assets/javascripts/ci/runner/group_runners/group_runners_app.vue @@ -248,7 +248,7 @@ export default { :count-variables="countVariables" :runner-types="$options.TABS_RUNNER_TYPES" class="gl-w-full" - content-class="gl-display-none" + content-class="gl-hidden" nav-class="gl-border-none!" />
diff --git a/app/assets/javascripts/commit/image_file.js b/app/assets/javascripts/commit/image_file.js index 580db871f5f..0294f1aa049 100644 --- a/app/assets/javascripts/commit/image_file.js +++ b/app/assets/javascripts/commit/image_file.js @@ -22,7 +22,7 @@ export default class ImageFile { initViewModes() { const viewMode = viewModes[0]; - $('.view-modes', this.file).removeClass('gl-display-none'); + $('.view-modes', this.file).removeClass('gl-hidden'); $('.view-modes-menu', this.file).on('click', 'li', (event) => { if (!$(event.currentTarget).hasClass('active')) { return this.activateViewMode(event.currentTarget.className); @@ -37,8 +37,8 @@ export default class ImageFile { .filter(`.${viewMode}`) .addClass('active'); - $(`.view:visible:not(.${viewMode})`, this.file).addClass('gl-display-none'); - $(`.view.${viewMode}`, this.file).removeClass('gl-display-none'); + $(`.view:visible:not(.${viewMode})`, this.file).addClass('gl-hidden'); + $(`.view.${viewMode}`, this.file).removeClass('gl-hidden'); return this.initView(viewMode); } @@ -111,7 +111,7 @@ export default class ImageFile { return this.requestImageInfo($('img', wrap), (width, height) => { $('.image-info .meta-width', wrap).text(`${width}px`); $('.image-info .meta-height', wrap).text(`${height}px`); - return $('.image-info', wrap).removeClass('gl-display-none'); + return $('.image-info', wrap).removeClass('gl-hidden'); }); }); }, diff --git a/app/assets/javascripts/confidential_merge_request/components/project_form_group.vue b/app/assets/javascripts/confidential_merge_request/components/project_form_group.vue index 97762ff549b..0289ec6cca1 100644 --- a/app/assets/javascripts/confidential_merge_request/components/project_form_group.vue +++ b/app/assets/javascripts/confidential_merge_request/components/project_form_group.vue @@ -88,7 +88,7 @@ export default { }, showWarning() { if (this.warningText) { - this.warningText.classList.remove('gl-display-none'); + this.warningText.classList.remove('gl-hidden'); } }, }, diff --git a/app/assets/javascripts/content_editor/components/bubble_menus/media_bubble_menu.vue b/app/assets/javascripts/content_editor/components/bubble_menus/media_bubble_menu.vue index dacf1af6bfc..bba5b45a7e1 100644 --- a/app/assets/javascripts/content_editor/components/bubble_menus/media_bubble_menu.vue +++ b/app/assets/javascripts/content_editor/components/bubble_menus/media_bubble_menu.vue @@ -237,7 +237,7 @@ export default { type="file" name="content_editor_image" :accept="$options.acceptedMimes[mediaType]" - class="gl-display-none" + class="gl-hidden" @change="onFileSelect" /> diff --git a/app/assets/javascripts/environments/folder/environments_folder_view.vue b/app/assets/javascripts/environments/folder/environments_folder_view.vue index 5139286b0be..6a558af67b2 100644 --- a/app/assets/javascripts/environments/folder/environments_folder_view.vue +++ b/app/assets/javascripts/environments/folder/environments_folder_view.vue @@ -51,7 +51,7 @@ export default { {{ folderName }} - +
- + +import { GlAvatar, GlPopover, GlSkeletonLoader, GlSprintf } from '@gitlab/ui'; +import { convertToGraphQLId } from '~/graphql_shared/utils'; +import { TYPENAME_NOTE } from '~/graphql_shared/constants'; +import SafeHtml from '~/vue_shared/directives/safe_html'; +import timeagoMixin from '~/vue_shared/mixins/timeago'; +import noteQuery from '../queries/note.query.graphql'; +import { renderGFM } from '../../../behaviors/markdown/render_gfm'; + +export default { + safeHtmlConfig: { ADD_TAGS: ['gl-emoji'] }, + components: { + GlAvatar, + GlPopover, + GlSkeletonLoader, + GlSprintf, + }, + directives: { + SafeHtml, + }, + mixins: [timeagoMixin], + props: { + target: { + type: HTMLAnchorElement, + required: true, + }, + }, + apollo: { + note: { + skip() { + return !this.noteId; + }, + query: noteQuery, + variables() { + return { + id: convertToGraphQLId(TYPENAME_NOTE, this.noteId), + }; + }, + result(result) { + if (result?.errors?.length > 0) { + this.fallback(); + return null; + } + + if (!result?.data?.note) { + this.fallback(); + return null; + } + + return result.data.note; + }, + error() { + this.fallback(); + }, + }, + }, + data() { + return { + note: null, + show: true, + }; + }, + computed: { + loading() { + return this.$apollo.queries.note?.loading; + }, + urlHash() { + return this.target.href.split('#')[1] || ''; + }, + noteId() { + const [, noteId] = this.urlHash.match(/note_([0-9]+)/) || []; + return noteId || ''; + }, + author() { + return this.note?.author; + }, + noteCreatedAt() { + return this.timeFormatted(this.note?.createdAt); + }, + noteText() { + // for empty line (if it's an image or other non-text content) + if (this.note?.bodyFirstLineHtml === '

') { + return ''; + } + return this.note?.bodyFirstLineHtml; + }, + }, + methods: { + renderGFM() { + renderGFM(this.$refs.gfm); + }, + fallback() { + this.show = false; + }, + }, + cssClasses: ['gl-max-w-48', 'gl-overflow-hidden'], +}; + + + diff --git a/app/assets/javascripts/issuable/popover/index.js b/app/assets/javascripts/issuable/popover/index.js index 6c48c30a543..40ac1717fdf 100644 --- a/app/assets/javascripts/issuable/popover/index.js +++ b/app/assets/javascripts/issuable/popover/index.js @@ -4,6 +4,7 @@ import createDefaultClient from '~/lib/graphql'; import IssuePopover from './components/issue_popover.vue'; import MRPopover from './components/mr_popover.vue'; import MilestonePopover from './components/milestone_popover.vue'; +import CommentPopover from './components/comment_popover.vue'; export const componentsByReferenceTypeMap = { issue: IssuePopover, @@ -24,6 +25,24 @@ const handleIssuablePopoverMouseOut = ({ target }) => { const popoverMountedAttr = 'data-popover-mounted'; +function isCommentPopover(target) { + const targetUrl = new URL(target.href); + const noteId = targetUrl.hash; + + return window?.gon?.features?.commentTooltips && noteId && noteId.startsWith('#note_'); +} + +export function handleCommentPopoverMount({ target, apolloProvider }) { + const PopoverComponent = Vue.extend(CommentPopover); + + new PopoverComponent({ + propsData: { + target, + }, + apolloProvider, + }).$mount(); +} + /** * Adds a Popover component for issuables and work items to the body, * hands over as much data as the target element has in data attributes. @@ -45,17 +64,22 @@ export const handleIssuablePopoverMount = ({ target.addEventListener('mouseleave', handleIssuablePopoverMouseOut); renderFn = setTimeout(() => { - const PopoverComponent = Vue.extend(componentsByReferenceType[referenceType]); - new PopoverComponent({ - propsData: { - target, - namespacePath, - iid, - milestoneId: milestone, - cachedTitle: title || innerText, - }, - apolloProvider, - }).$mount(); + if (isCommentPopover(target)) { + handleCommentPopoverMount({ target, apolloProvider }); + } else { + const PopoverComponent = Vue.extend(componentsByReferenceType[referenceType]); + + new PopoverComponent({ + propsData: { + target, + namespacePath, + iid, + milestoneId: milestone, + cachedTitle: title || innerText, + }, + apolloProvider, + }).$mount(); + } target.setAttribute(popoverMountedAttr, true); }, 200); // 200ms delay so not every mouseover triggers Popover + API Call @@ -72,9 +96,10 @@ export default (elements, issuablePopoverMount = handleIssuablePopoverMount) => elements.forEach((el) => { const { projectPath, groupPath, iid, referenceType, milestone, project } = el.dataset; + let { namespacePath } = el.dataset; const title = el.dataset.mrTitle || el.title; const { innerText } = el; - const namespacePath = groupPath || projectPath; + namespacePath = namespacePath || groupPath || projectPath; const isIssuable = Boolean(namespacePath && title && iid); const isMilestone = Boolean(milestone && project); diff --git a/app/assets/javascripts/issuable/popover/queries/note.query.graphql b/app/assets/javascripts/issuable/popover/queries/note.query.graphql new file mode 100644 index 00000000000..be328989ee7 --- /dev/null +++ b/app/assets/javascripts/issuable/popover/queries/note.query.graphql @@ -0,0 +1,13 @@ +#import "~/graphql_shared/fragments/author.fragment.graphql" + +query note($id: NoteID!) { + note(id: $id) { + id + author { + ...Author + } + bodyFirstLineHtml + createdAt + internal + } +} diff --git a/app/assets/javascripts/labels/labels_select.js b/app/assets/javascripts/labels/labels_select.js index ce3f74fbc21..813d94cf7ce 100644 --- a/app/assets/javascripts/labels/labels_select.js +++ b/app/assets/javascripts/labels/labels_select.js @@ -41,7 +41,7 @@ export default class LabelsSelect { const $form = $dropdown.closest('form, .js-issuable-update'); const $sidebarCollapsedValue = $block.find('.sidebar-collapsed-icon span'); const $value = $block.find('.value'); - const $loading = $block.find('.block-loading').addClass('gl-display-none'); + const $loading = $block.find('.block-loading').addClass('gl-hidden'); const fieldName = $dropdown.data('fieldName'); let initialSelected = $selectbox .find(`input[name="${$dropdown.data('fieldName')}"]`) @@ -78,13 +78,13 @@ export default class LabelsSelect { if (!selected.length) { data[abilityName].label_ids = ['']; } - $loading.removeClass('gl-display-none'); + $loading.removeClass('gl-hidden'); $dropdown.trigger('loading.gl.dropdown'); axios .put(issueUpdateURL, data) .then(({ data }) => { let template; - $loading.addClass('gl-display-none'); + $loading.addClass('gl-hidden'); $dropdown.trigger('loaded.gl.dropdown'); $selectbox.hide(); data.issueUpdateURL = issueUpdateURL; diff --git a/app/assets/javascripts/members/constants.js b/app/assets/javascripts/members/constants.js index 722ffef6115..19916eb4c91 100644 --- a/app/assets/javascripts/members/constants.js +++ b/app/assets/javascripts/members/constants.js @@ -227,3 +227,8 @@ export const I18N_USER_BOT = __('Bot'); export const I188N_USER_2FA = __('2FA'); export const I18N_ROLE_SAVE_SUCCESS = s__('Members|Role was successfully updated.'); export const I18N_ROLE_SAVE_ERROR = s__('MemberRole|Could not update role.'); + +export const CONTEXT_TYPE = Object.freeze({ + PROJECT: 'PROJECT', + GROUP: 'GROUP', +}); diff --git a/app/assets/javascripts/members/index.js b/app/assets/javascripts/members/index.js index b80704315f8..80f35ae35d1 100644 --- a/app/assets/javascripts/members/index.js +++ b/app/assets/javascripts/members/index.js @@ -9,7 +9,12 @@ import { TABS } from 'ee_else_ce/members/tabs_metadata'; import MembersTabs from './components/members_tabs.vue'; import membersStore from './store'; -export const initMembersApp = (el, options) => { +/** + * @param {HTMLElement} el + * @param {string} context as defined in CONTEXT_TYPE in ./constants.js + * @param {Object} options + */ +export const initMembersApp = (el, context, options) => { if (!el) { return () => {}; } @@ -27,6 +32,7 @@ export const initMembersApp = (el, options) => { exportCsvPath, groupName, groupPath, + projectPath, manageMemberRolesPath, canApproveAccessRequests, namespaceUserLimit, @@ -69,10 +75,14 @@ export const initMembersApp = (el, options) => { canApproveAccessRequests, namespaceUserLimit, availableRoles, + context, group: { name: groupName, path: groupPath, }, + project: { + path: projectPath, + }, }, render: (createElement) => createElement('members-tabs'), }); diff --git a/app/assets/javascripts/mirrors/ssh_mirror.js b/app/assets/javascripts/mirrors/ssh_mirror.js index 68b18a34ded..e3165e01df8 100644 --- a/app/assets/javascripts/mirrors/ssh_mirror.js +++ b/app/assets/javascripts/mirrors/ssh_mirror.js @@ -77,7 +77,7 @@ export default class SSHMirror { // Disable button while we make request this.$btnDetectHostKeys.disable(); - $btnLoadSpinner.removeClass('gl-display-none'); + $btnLoadSpinner.removeClass('gl-hidden'); // Make backOff polling to get data backOff((next, stop) => { @@ -102,7 +102,7 @@ export default class SSHMirror { .catch(stop); }) .then((res) => { - $btnLoadSpinner.addClass('gl-display-none'); + $btnLoadSpinner.addClass('gl-hidden'); // Once data is received, we show verification info along with Host keys and fingerprints this.$hostKeysInformation .find('.js-fingerprint-verification') diff --git a/app/assets/javascripts/packages_and_registries/shared/components/package_tags.vue b/app/assets/javascripts/packages_and_registries/shared/components/package_tags.vue index 41b7825736f..f2292b96b36 100644 --- a/app/assets/javascripts/packages_and_registries/shared/components/package_tags.vue +++ b/app/assets/javascripts/packages_and_registries/shared/components/package_tags.vue @@ -56,7 +56,7 @@ export default { methods: { tagBadgeClass(index) { return { - 'gl-display-none': true, + 'gl-hidden': true, 'gl-display-flex': this.tagCount === 1, 'md:!gl-flex': this.tagCount > 1, 'gl-mr-2': index !== this.tagsToRender.length - 1, diff --git a/app/assets/javascripts/pages/admin/application_settings/payload_previewer.js b/app/assets/javascripts/pages/admin/application_settings/payload_previewer.js index 41862789185..8c428771290 100644 --- a/app/assets/javascripts/pages/admin/application_settings/payload_previewer.js +++ b/app/assets/javascripts/pages/admin/application_settings/payload_previewer.js @@ -51,13 +51,13 @@ export default class PayloadPreviewer { hidePayload() { this.isVisible = false; - this.getContainer().classList.add('gl-display-none'); + this.getContainer().classList.add('gl-hidden'); this.text.textContent = __('Preview payload'); } showPayload() { this.isVisible = true; - this.getContainer().classList.remove('gl-display-none'); + this.getContainer().classList.remove('gl-hidden'); this.text.textContent = __('Hide payload'); } diff --git a/app/assets/javascripts/pages/groups/group_members/index.js b/app/assets/javascripts/pages/groups/group_members/index.js index d97be04ae31..7a305213315 100644 --- a/app/assets/javascripts/pages/groups/group_members/index.js +++ b/app/assets/javascripts/pages/groups/group_members/index.js @@ -3,7 +3,7 @@ import initInviteGroupTrigger from '~/invite_members/init_invite_group_trigger'; import initInviteGroupsModal from '~/invite_members/init_invite_groups_modal'; import { s__ } from '~/locale'; import { initMembersApp } from '~/members'; -import { GROUPS_APP_OPTIONS, MEMBERS_TAB_TYPES } from 'ee_else_ce/members/constants'; +import { CONTEXT_TYPE, GROUPS_APP_OPTIONS, MEMBERS_TAB_TYPES } from 'ee_else_ce/members/constants'; import { groupLinkRequestFormatter } from '~/members/utils'; const SHARED_FIELDS = ['account', 'maxRole', 'expiration', 'actions']; @@ -59,7 +59,11 @@ const APP_OPTIONS = { ...GROUPS_APP_OPTIONS, }; -initMembersApp(document.querySelector('.js-group-members-list-app'), APP_OPTIONS); +initMembersApp( + document.querySelector('.js-group-members-list-app'), + CONTEXT_TYPE.GROUP, + APP_OPTIONS, +); initInviteGroupsModal(); initInviteGroupTrigger(); diff --git a/app/assets/javascripts/pages/projects/project_members/index.js b/app/assets/javascripts/pages/projects/project_members/index.js index 41aa967fd3a..5d2fe25038c 100644 --- a/app/assets/javascripts/pages/projects/project_members/index.js +++ b/app/assets/javascripts/pages/projects/project_members/index.js @@ -1,4 +1,8 @@ -import { PROJECTS_APP_OPTIONS, MEMBERS_TAB_TYPES } from 'ee_else_ce/members/constants'; +import { + PROJECTS_APP_OPTIONS, + MEMBERS_TAB_TYPES, + CONTEXT_TYPE, +} from 'ee_else_ce/members/constants'; import initImportProjectMembersTrigger from '~/invite_members/init_import_project_members_trigger'; import initImportProjectMembersModal from '~/invite_members/init_import_project_members_modal'; import initInviteGroupTrigger from '~/invite_members/init_invite_group_trigger'; @@ -14,7 +18,7 @@ initInviteGroupTrigger(); initImportProjectMembersTrigger(); const SHARED_FIELDS = ['account', 'maxRole', 'expiration', 'actions']; -initMembersApp(document.querySelector('.js-project-members-list-app'), { +initMembersApp(document.querySelector('.js-project-members-list-app'), CONTEXT_TYPE.PROJECT, { [MEMBERS_TAB_TYPES.user]: { tableFields: SHARED_FIELDS.concat(['source', 'activity']), tableSortableFields: [ diff --git a/app/assets/javascripts/projects/commit_box/info/init_details_button.js b/app/assets/javascripts/projects/commit_box/info/init_details_button.js index 520b20fcb86..cc1ecce5fe0 100644 --- a/app/assets/javascripts/projects/commit_box/info/init_details_button.js +++ b/app/assets/javascripts/projects/commit_box/info/init_details_button.js @@ -11,7 +11,7 @@ export const initDetailsButton = () => { if (contentEl) { contentEl.classList.remove('hide'); - btn.classList.add('gl-display-none'); + btn.classList.add('gl-hidden'); } }); }; diff --git a/app/assets/javascripts/projects/project_new.js b/app/assets/javascripts/projects/project_new.js index 2919a8afa67..3f0771efcdb 100644 --- a/app/assets/javascripts/projects/project_new.js +++ b/app/assets/javascripts/projects/project_new.js @@ -81,11 +81,11 @@ const validateGroupNamespaceDropdown = (e) => { e.preventDefault(); dropdownButton().classList.add(invalidDropdownClass); namespaceButton().classList.add(invalidDropdownClass); - namespaceError().classList.remove('gl-display-none'); + namespaceError().classList.remove('gl-hidden'); } else { dropdownButton().classList.remove(invalidDropdownClass); namespaceButton().classList.remove(invalidDropdownClass); - namespaceError().classList.add('gl-display-none'); + namespaceError().classList.add('gl-hidden'); } }; @@ -96,11 +96,11 @@ const checkProjectName = (projectNameInput) => { if (!projectNameError) return; if (msg) { projectNameError.innerText = msg; - projectNameError.classList.remove('gl-display-none'); - projectNameDescription.classList.add('gl-display-none'); + projectNameError.classList.remove('gl-hidden'); + projectNameDescription.classList.add('gl-hidden'); } else { - projectNameError.classList.add('gl-display-none'); - projectNameDescription.classList.remove('gl-display-none'); + projectNameError.classList.add('gl-hidden'); + projectNameDescription.classList.remove('gl-hidden'); } }; @@ -123,7 +123,7 @@ const setProjectNamePathHandlers = ($projectNameInput, $projectPathInput) => { hasUserDefinedProjectPath = $projectPathInput.value.trim().length > 0; specialRepo.classList.toggle( - 'gl-display-none', + 'gl-hidden', $projectPathInput.value !== $projectPathInput.dataset.username, ); }; diff --git a/app/assets/javascripts/read_more.js b/app/assets/javascripts/read_more.js index 736dc91dc5a..bdeae665d78 100644 --- a/app/assets/javascripts/read_more.js +++ b/app/assets/javascripts/read_more.js @@ -63,7 +63,7 @@ export default function initReadMore(triggerSelector = '.js-read-more-trigger') return; } - triggerEl.classList.remove('gl-display-none'); + triggerEl.classList.remove('gl-hidden'); } triggerEl.addEventListener( diff --git a/app/assets/javascripts/search_settings/constants.js b/app/assets/javascripts/search_settings/constants.js index a49351dc7b0..009a6eb8d51 100644 --- a/app/assets/javascripts/search_settings/constants.js +++ b/app/assets/javascripts/search_settings/constants.js @@ -2,7 +2,7 @@ export const EXCLUDED_NODES = ['OPTION']; // Used to hide the sections that do not match * the search term -export const HIDE_CLASS = 'gl-display-none'; +export const HIDE_CLASS = 'gl-hidden'; // used to highlight the text that matches the * search term export const HIGHLIGHT_CLASS = 'gl-bg-orange-100'; diff --git a/app/assets/javascripts/settings_panels.js b/app/assets/javascripts/settings_panels.js index c3ca6d563c6..49961f39d4a 100644 --- a/app/assets/javascripts/settings_panels.js +++ b/app/assets/javascripts/settings_panels.js @@ -71,11 +71,11 @@ function initGlobalProtectionOptions() { globalProtectionProtectedOption.forEach((option) => { const isProtected = parseBoolean(option.value); option.addEventListener('change', () => { - protectionSettingsSection.classList.toggle('gl-display-none', !isProtected); + protectionSettingsSection.classList.toggle('gl-hidden', !isProtected); }); if (option.checked) { - protectionSettingsSection.classList.toggle('gl-display-none', !isProtected); + protectionSettingsSection.classList.toggle('gl-hidden', !isProtected); } }); } diff --git a/app/assets/javascripts/sidebar/components/reviewers/uncollapsed_reviewer_list.vue b/app/assets/javascripts/sidebar/components/reviewers/uncollapsed_reviewer_list.vue index f9e91f6f452..7f772a1646c 100644 --- a/app/assets/javascripts/sidebar/components/reviewers/uncollapsed_reviewer_list.vue +++ b/app/assets/javascripts/sidebar/components/reviewers/uncollapsed_reviewer_list.vue @@ -29,8 +29,8 @@ const REVIEW_STATE_ICONS = { title: s__('MergeRequest|Awaiting review'), }, REVIEW_STARTED: { - name: 'status_running', - class: 'gl-text-blue-500', + name: 'comment-dots', + class: 'gl-text-gray-500', title: s__('MergeRequest|Reviewer started review'), }, }; diff --git a/app/assets/javascripts/single_file_diff.js b/app/assets/javascripts/single_file_diff.js index a3b10f3a77b..729fc7518e3 100644 --- a/app/assets/javascripts/single_file_diff.js +++ b/app/assets/javascripts/single_file_diff.js @@ -42,11 +42,11 @@ export default class SingleFileDiff { this.loadingContent = $(WRAPPER).addClass('loading').html(LOADING_HTML).hide(); this.content = null; this.collapsedContent.after(this.loadingContent); - this.$chevronRightIcon.removeClass('gl-display-none'); + this.$chevronRightIcon.removeClass('gl-hidden'); } else { this.collapsedContent = $(WRAPPER).html(COLLAPSED_HTML).hide(); this.content.after(this.collapsedContent); - this.$chevronDownIcon.removeClass('gl-display-none'); + this.$chevronDownIcon.removeClass('gl-hidden'); } $('.js-file-title', this.file).on('click', (e) => { @@ -67,17 +67,17 @@ export default class SingleFileDiff { this.isOpen = !this.isOpen; if (!this.isOpen && !this.hasError) { this.content.hide(); - this.$chevronRightIcon.removeClass('gl-display-none'); - this.$chevronDownIcon.addClass('gl-display-none'); + this.$chevronRightIcon.removeClass('gl-hidden'); + this.$chevronDownIcon.addClass('gl-hidden'); this.collapsedContent.show(); } else if (this.content) { this.collapsedContent.hide(); this.content.show(); - this.$chevronDownIcon.removeClass('gl-display-none'); - this.$chevronRightIcon.addClass('gl-display-none'); + this.$chevronDownIcon.removeClass('gl-hidden'); + this.$chevronRightIcon.addClass('gl-hidden'); } else { - this.$chevronDownIcon.removeClass('gl-display-none'); - this.$chevronRightIcon.addClass('gl-display-none'); + this.$chevronDownIcon.removeClass('gl-hidden'); + this.$chevronRightIcon.addClass('gl-hidden'); return this.getContentHTML(cb); // eslint-disable-line consistent-return } } diff --git a/app/assets/javascripts/super_sidebar/components/super_sidebar.vue b/app/assets/javascripts/super_sidebar/components/super_sidebar.vue index 53fca64013d..56120d6f348 100644 --- a/app/assets/javascripts/super_sidebar/components/super_sidebar.vue +++ b/app/assets/javascripts/super_sidebar/components/super_sidebar.vue @@ -284,7 +284,7 @@ export default { :key="shortcutLink.href" :href="shortcutLink.href" :class="shortcutLink.css_class" - class="gl-display-none" + class="gl-hidden" > {{ shortcutLink.title }} diff --git a/app/assets/javascripts/token_access/components/token_access_table.vue b/app/assets/javascripts/token_access/components/token_access_table.vue index 9f619d32deb..a1c4a5eec8e 100644 --- a/app/assets/javascripts/token_access/components/token_access_table.vue +++ b/app/assets/javascripts/token_access/components/token_access_table.vue @@ -52,7 +52,7 @@ export default { :items="items" :fields="$options.fields" :tbody-tr-attr="{ 'data-testid': 'token-access-table-row' }" - thead-class="gl-display-none" + thead-class="gl-hidden" class="gl-mb-0" fixed > diff --git a/app/assets/javascripts/usage_quotas/storage/project/components/project_storage_app.vue b/app/assets/javascripts/usage_quotas/storage/project/components/project_storage_app.vue index 4de5b7f1df9..99017f74cda 100644 --- a/app/assets/javascripts/usage_quotas/storage/project/components/project_storage_app.vue +++ b/app/assets/javascripts/usage_quotas/storage/project/components/project_storage_app.vue @@ -174,7 +174,7 @@ export default { await updateRepositorySize(this.projectPath); this.loadingRecalculateSize = false; - alertEl?.classList.remove('gl-display-none'); + alertEl?.classList.remove('gl-hidden'); }, }, usageQuotasHelpPaths, diff --git a/app/assets/javascripts/work_items/components/widget_wrapper.vue b/app/assets/javascripts/work_items/components/widget_wrapper.vue index 55b0d770ab2..90fa122569a 100644 --- a/app/assets/javascripts/work_items/components/widget_wrapper.vue +++ b/app/assets/javascripts/work_items/components/widget_wrapper.vue @@ -69,7 +69,7 @@ export default { diff --git a/app/assets/javascripts/work_items/components/work_item_attributes_wrapper.vue b/app/assets/javascripts/work_items/components/work_item_attributes_wrapper.vue index e1f6e7991f3..8bd6b1f63cd 100644 --- a/app/assets/javascripts/work_items/components/work_item_attributes_wrapper.vue +++ b/app/assets/javascripts/work_items/components/work_item_attributes_wrapper.vue @@ -137,7 +137,7 @@ export default { return this.workItem?.author; }, workItemDevelopment() { - return this.isWidgetPresent(WIDGET_TYPE_DEVELOPMENT) && this.glFeatures.workItemsAlpha; + return this.isWidgetPresent(WIDGET_TYPE_DEVELOPMENT) && this.glFeatures.workItemsBeta; }, hasParent() { return this.workItemHierarchy?.hasParent; diff --git a/app/assets/javascripts/work_items/components/work_item_development/work_item_development.vue b/app/assets/javascripts/work_items/components/work_item_development/work_item_development.vue index 7e1c8791ef4..4071546d9ab 100644 --- a/app/assets/javascripts/work_items/components/work_item_development/work_item_development.vue +++ b/app/assets/javascripts/work_items/components/work_item_development/work_item_development.vue @@ -1,5 +1,6 @@