diff options
Diffstat (limited to 'app/assets/javascripts')
376 files changed, 5506 insertions, 2870 deletions
diff --git a/app/assets/javascripts/admin/users/components/user_actions.vue b/app/assets/javascripts/admin/users/components/user_actions.vue index 567d7151847..f5d21ece138 100644 --- a/app/assets/javascripts/admin/users/components/user_actions.vue +++ b/app/assets/javascripts/admin/users/components/user_actions.vue @@ -109,12 +109,13 @@ export default { <div v-if="hasDropdownActions" class="gl-p-2"> <gl-dropdown data-testid="dropdown-toggle" - right :text="$options.i18n.userAdministration" :text-sr-only="!showButtonLabels" icon="ellipsis_h" data-qa-selector="user_actions_dropdown_toggle" :data-qa-username="user.username" + no-caret + right > <gl-dropdown-section-header>{{ $options.i18n.userAdministration diff --git a/app/assets/javascripts/analytics/shared/components/projects_dropdown_filter.vue b/app/assets/javascripts/analytics/shared/components/projects_dropdown_filter.vue index 0bdb45d35c9..b3ae671d611 100644 --- a/app/assets/javascripts/analytics/shared/components/projects_dropdown_filter.vue +++ b/app/assets/javascripts/analytics/shared/components/projects_dropdown_filter.vue @@ -31,7 +31,8 @@ export default { props: { groupId: { type: Number, - required: true, + required: false, + default: null, }, groupNamespace: { type: String, @@ -57,6 +58,11 @@ export default { required: false, default: () => [], }, + loadingDefaultProjects: { + type: Boolean, + required: false, + default: false, + }, }, data() { return { @@ -111,6 +117,9 @@ export default { searchTerm() { this.search(); }, + defaultProjects(projects) { + this.selectedProjects = [...projects]; + }, }, mounted() { this.search(); @@ -202,6 +211,7 @@ export default { ref="projectsDropdown" class="dropdown dropdown-projects" toggle-class="gl-shadow-none" + :loading="loadingDefaultProjects" :show-clear-all="hasSelectedProjects" show-highlighted-items-title highlighted-items-title-class="gl-p-3" @@ -209,6 +219,7 @@ export default { @hide="onHide" > <template #button-content> + <gl-loading-icon v-if="loadingDefaultProjects" class="gl-mr-2" /> <div class="gl-display-flex gl-flex-grow-1"> <gl-avatar v-if="isOnlyOneProjectSelected" diff --git a/app/assets/javascripts/api/packages_api.js b/app/assets/javascripts/api/packages_api.js index 47f51c7e80e..138843a910a 100644 --- a/app/assets/javascripts/api/packages_api.js +++ b/app/assets/javascripts/api/packages_api.js @@ -19,13 +19,7 @@ export function publishPackage( status: 'default', }; - const formData = new FormData(); - formData.append('file', files[0]); - - return axios.put(url, formData, { - headers: { - 'Content-Type': 'multipart/form-data', - }, + return axios.put(url, files[0], { params: Object.assign(defaults, options), ...axiosOptions, }); diff --git a/app/assets/javascripts/behaviors/copy_code.js b/app/assets/javascripts/behaviors/copy_code.js index a6e203ea5a2..6d2a4c245cc 100644 --- a/app/assets/javascripts/behaviors/copy_code.js +++ b/app/assets/javascripts/behaviors/copy_code.js @@ -29,7 +29,8 @@ class CopyCodeButton extends HTMLElement { } function addCodeButton() { - [...document.querySelectorAll('pre.code.js-syntax-highlight')] + [...document.querySelectorAll('pre.code.js-syntax-highlight:not(.content-editor-code-block)')] + .filter((el) => el.getAttribute('lang') !== 'mermaid') .filter((el) => !el.closest('.js-markdown-code')) .forEach((el) => { const copyCodeEl = document.createElement('copy-code'); diff --git a/app/assets/javascripts/behaviors/copy_to_clipboard.js b/app/assets/javascripts/behaviors/copy_to_clipboard.js index de248340738..c3c28aeafc0 100644 --- a/app/assets/javascripts/behaviors/copy_to_clipboard.js +++ b/app/assets/javascripts/behaviors/copy_to_clipboard.js @@ -1,7 +1,13 @@ -import Clipboard from 'clipboard'; +import ClipboardJS from 'clipboard'; import $ from 'jquery'; -import { sprintf, __ } from '~/locale'; -import { fixTitle, add, show, once } from '~/tooltips'; + +import { parseBoolean } from '~/lib/utils/common_utils'; +import { __ } from '~/locale'; +import { fixTitle, add, show, hide, once } from '~/tooltips'; + +const CLIPBOARD_SUCCESS_EVENT = 'clipboard-success'; +const CLIPBOARD_ERROR_EVENT = 'clipboard-error'; +const I18N_ERROR_MESSAGE = __('Copy failed. Please manually copy the value.'); function showTooltip(target, title) { const { title: originalTitle } = target.dataset; @@ -9,20 +15,31 @@ function showTooltip(target, title) { once('hidden', (tooltip) => { if (tooltip.target === target) { target.setAttribute('title', originalTitle); + target.setAttribute('aria-label', originalTitle); fixTitle(target); } }); target.setAttribute('title', title); + target.setAttribute('aria-label', title); fixTitle(target); show(target); - setTimeout(() => target.blur(), 1000); + setTimeout(() => { + hide(target); + }, 1000); } function genericSuccess(e) { - // Clear the selection and blur the trigger so it loses its border + // Clear the selection e.clearSelection(); - showTooltip(e.trigger, __('Copied')); + e.trigger.focus(); + e.trigger.dispatchEvent(new Event(CLIPBOARD_SUCCESS_EVENT)); + + const { clipboardHandleTooltip = true } = e.trigger.dataset; + if (parseBoolean(clipboardHandleTooltip)) { + // Update tooltip + showTooltip(e.trigger, __('Copied')); + } } /** @@ -30,17 +47,16 @@ function genericSuccess(e) { * See http://clipboardjs.com/#browser-support */ function genericError(e) { - let key; - if (/Mac/i.test(navigator.userAgent)) { - key = '⌘'; // Command - } else { - key = 'Ctrl'; + e.trigger.dispatchEvent(new Event(CLIPBOARD_ERROR_EVENT)); + + const { clipboardHandleTooltip = true } = e.trigger.dataset; + if (parseBoolean(clipboardHandleTooltip)) { + showTooltip(e.trigger, I18N_ERROR_MESSAGE); } - showTooltip(e.trigger, sprintf(__(`Press %{key}-C to copy`), { key })); } export default function initCopyToClipboard() { - const clipboard = new Clipboard('[data-clipboard-target], [data-clipboard-text]'); + const clipboard = new ClipboardJS('[data-clipboard-target], [data-clipboard-text]'); clipboard.on('success', genericSuccess); clipboard.on('error', genericError); @@ -74,6 +90,8 @@ export default function initCopyToClipboard() { clipboardData.setData('text/plain', json.text); clipboardData.setData('text/x-gfm', json.gfm); }); + + return clipboard; } /** @@ -89,3 +107,5 @@ export function clickCopyToClipboardButton(btnElement) { btnElement.click(); } + +export { CLIPBOARD_SUCCESS_EVENT, CLIPBOARD_ERROR_EVENT, I18N_ERROR_MESSAGE }; diff --git a/app/assets/javascripts/behaviors/markdown/render_gfm.js b/app/assets/javascripts/behaviors/markdown/render_gfm.js index 4698fcd4d42..c4e09efe263 100644 --- a/app/assets/javascripts/behaviors/markdown/render_gfm.js +++ b/app/assets/javascripts/behaviors/markdown/render_gfm.js @@ -4,6 +4,7 @@ import initUserPopovers from '../../user_popovers'; import highlightCurrentUser from './highlight_current_user'; import renderMath from './render_math'; import renderMermaid from './render_mermaid'; +import renderSandboxedMermaid from './render_sandboxed_mermaid'; import renderMetrics from './render_metrics'; // Render GitLab flavoured Markdown @@ -13,7 +14,11 @@ import renderMetrics from './render_metrics'; $.fn.renderGFM = function renderGFM() { syntaxHighlight(this.find('.js-syntax-highlight').get()); renderMath(this.find('.js-render-math')); - renderMermaid(this.find('.js-render-mermaid')); + if (gon.features?.sandboxedMermaid) { + renderSandboxedMermaid(this.find('.js-render-mermaid')); + } else { + renderMermaid(this.find('.js-render-mermaid')); + } highlightCurrentUser(this.find('.gfm-project_member').get()); initUserPopovers(this.find('.js-user-link').get()); diff --git a/app/assets/javascripts/behaviors/markdown/render_sandboxed_mermaid.js b/app/assets/javascripts/behaviors/markdown/render_sandboxed_mermaid.js new file mode 100644 index 00000000000..1d54a1b0c04 --- /dev/null +++ b/app/assets/javascripts/behaviors/markdown/render_sandboxed_mermaid.js @@ -0,0 +1,234 @@ +import $ from 'jquery'; +import { once, countBy } from 'lodash'; +import { __ } from '~/locale'; +import { + getBaseURL, + relativePathToAbsolute, + setUrlParams, + joinPaths, +} from '~/lib/utils/url_utility'; +import { darkModeEnabled } from '~/lib/utils/color_utils'; +import { setAttributes } from '~/lib/utils/dom_utils'; + +// Renders diagrams and flowcharts from text using Mermaid in any element with the +// `js-render-mermaid` class. +// +// Example markup: +// +// <pre class="js-render-mermaid"> +// graph TD; +// A-- > B; +// A-- > C; +// B-- > D; +// C-- > D; +// </pre> +// + +const SANDBOX_FRAME_PATH = '/-/sandbox/mermaid'; +// This is an arbitrary number; Can be iterated upon when suitable. +const MAX_CHAR_LIMIT = 2000; +// Max # of mermaid blocks that can be rendered in a page. +const MAX_MERMAID_BLOCK_LIMIT = 50; +// Max # of `&` allowed in Chaining of links syntax +const MAX_CHAINING_OF_LINKS_LIMIT = 30; +const BUFFER_IFRAME_HEIGHT = 10; +// Keep a map of mermaid blocks we've already rendered. +const elsProcessingMap = new WeakMap(); +let renderedMermaidBlocks = 0; + +// Pages without any restrictions on mermaid rendering +const PAGES_WITHOUT_RESTRICTIONS = [ + // Group wiki + 'groups:wikis:show', + 'groups:wikis:edit', + 'groups:wikis:create', + + // Project wiki + 'projects:wikis:show', + 'projects:wikis:edit', + 'projects:wikis:create', + + // Project files + 'projects:show', + 'projects:blob:show', +]; + +function shouldLazyLoadMermaidBlock(source) { + /** + * If source contains `&`, which means that it might + * contain Chaining of links a new syntax in Mermaid. + */ + if (countBy(source)['&'] > MAX_CHAINING_OF_LINKS_LIMIT) { + return true; + } + + return false; +} + +function fixElementSource(el) { + // Mermaid doesn't like `<br />` tags, so collapse all like tags into `<br>`, which is parsed correctly. + const source = el.textContent?.replace(/<br\s*\/>/g, '<br>'); + + // Remove any extra spans added by the backend syntax highlighting. + Object.assign(el, { textContent: source }); + + return { source }; +} + +function getSandboxFrameSrc() { + const path = joinPaths(gon.relative_url_root || '', SANDBOX_FRAME_PATH); + if (!darkModeEnabled()) { + return path; + } + const absoluteUrl = relativePathToAbsolute(path, getBaseURL()); + return setUrlParams({ darkMode: darkModeEnabled() }, absoluteUrl); +} + +function renderMermaidEl(el, source) { + const iframeEl = document.createElement('iframe'); + setAttributes(iframeEl, { + src: getSandboxFrameSrc(), + sandbox: 'allow-scripts', + frameBorder: 0, + scrolling: 'no', + width: '100%', + }); + + // Add the original source into the DOM + // to allow Copy-as-GFM to access it. + const sourceEl = document.createElement('text'); + sourceEl.textContent = source; + sourceEl.classList.add('gl-display-none'); + + const wrapper = document.createElement('div'); + wrapper.appendChild(iframeEl); + wrapper.appendChild(sourceEl); + + el.closest('pre').replaceWith(wrapper); + + // Event Listeners + iframeEl.addEventListener('load', () => { + // Potential risk associated with '*' discussed in below thread + // https://gitlab.com/gitlab-org/gitlab/-/merge_requests/74414#note_735183398 + iframeEl.contentWindow.postMessage(source, '*'); + }); + + window.addEventListener( + 'message', + (event) => { + if (event.origin !== 'null' || event.source !== iframeEl.contentWindow) { + return; + } + const { h } = event.data; + iframeEl.height = `${h + BUFFER_IFRAME_HEIGHT}px`; + }, + false, + ); +} + +function renderMermaids($els) { + if (!$els.length) return; + + const pageName = document.querySelector('body').dataset.page; + + // A diagram may have been truncated in search results which will cause errors, so abort the render. + if (pageName === 'search:show') return; + + let renderedChars = 0; + + $els.each((i, el) => { + // Skipping all the elements which we've already queued in requestIdleCallback + if (elsProcessingMap.has(el)) { + return; + } + + const { source } = fixElementSource(el); + /** + * Restrict the rendering to a certain amount of character + * and mermaid blocks to prevent mermaidjs from hanging + * up the entire thread and causing a DoS. + */ + if ( + !PAGES_WITHOUT_RESTRICTIONS.includes(pageName) && + ((source && source.length > MAX_CHAR_LIMIT) || + renderedChars > MAX_CHAR_LIMIT || + renderedMermaidBlocks >= MAX_MERMAID_BLOCK_LIMIT || + shouldLazyLoadMermaidBlock(source)) + ) { + const html = ` + <div class="alert gl-alert gl-alert-warning alert-dismissible lazy-render-mermaid-container js-lazy-render-mermaid-container fade show" role="alert"> + <div> + <div> + <div class="js-warning-text"></div> + <div class="gl-alert-actions"> + <button type="button" class="js-lazy-render-mermaid btn gl-alert-action btn-warning btn-md gl-button">Display</button> + </div> + </div> + <button type="button" class="close" data-dismiss="alert" aria-label="Close"> + <span aria-hidden="true">×</span> + </button> + </div> + </div> + `; + + const $parent = $(el).parent(); + + if (!$parent.hasClass('lazy-alert-shown')) { + $parent.after(html); + $parent + .siblings() + .find('.js-warning-text') + .text( + __('Warning: Displaying this diagram might cause performance issues on this page.'), + ); + $parent.addClass('lazy-alert-shown'); + } + + return; + } + + renderedChars += source.length; + renderedMermaidBlocks += 1; + + const requestId = window.requestIdleCallback(() => { + renderMermaidEl(el, source); + }); + + elsProcessingMap.set(el, requestId); + }); +} + +const hookLazyRenderMermaidEvent = once(() => { + $(document.body).on('click', '.js-lazy-render-mermaid', function eventHandler() { + const parent = $(this).closest('.js-lazy-render-mermaid-container'); + const pre = parent.prev(); + + const el = pre.find('.js-render-mermaid'); + + parent.remove(); + + // sandbox update + const element = el.get(0); + const { source } = fixElementSource(element); + + renderMermaidEl(element, source); + }); +}); + +export default function renderMermaid($els) { + if (!$els.length) return; + + const visibleMermaids = $els.filter(function filter() { + return $(this).closest('details').length === 0 && $(this).is(':visible'); + }); + + renderMermaids(visibleMermaids); + + $els.closest('details').one('toggle', function toggle() { + if (this.open) { + renderMermaids($(this).find('.js-render-mermaid')); + } + }); + + hookLazyRenderMermaidEvent(); +} diff --git a/app/assets/javascripts/behaviors/preview_markdown.js b/app/assets/javascripts/behaviors/preview_markdown.js index a548b283142..679940d1317 100644 --- a/app/assets/javascripts/behaviors/preview_markdown.js +++ b/app/assets/javascripts/behaviors/preview_markdown.js @@ -124,13 +124,6 @@ const writeButtonSelector = '.js-md-write-button'; lastTextareaPreviewed = null; const markdownToolbar = $('.md-header-toolbar'); -$.fn.setupMarkdownPreview = function () { - const $form = $(this); - $form.find('textarea.markdown-area').on('input', () => { - markdownPreview.hideReferencedUsers($form); - }); -}; - $(document).on('markdown-preview:show', (e, $form) => { if (!$form) { return; diff --git a/app/assets/javascripts/blob/blob_line_permalink_updater.js b/app/assets/javascripts/blob/blob_line_permalink_updater.js index 11089b299c5..a3dd241604d 100644 --- a/app/assets/javascripts/blob/blob_line_permalink_updater.js +++ b/app/assets/javascripts/blob/blob_line_permalink_updater.js @@ -1,6 +1,6 @@ import { getLocationHash } from '../lib/utils/url_utility'; -const lineNumberRe = /^L[0-9]+/; +const lineNumberRe = /^(L|LC)[0-9]+/; const updateLineNumbersOnBlobPermalinks = (linksToUpdate) => { const hash = getLocationHash(); diff --git a/app/assets/javascripts/blob/components/blob_header.vue b/app/assets/javascripts/blob/components/blob_header.vue index 933ad448c77..1645469a218 100644 --- a/app/assets/javascripts/blob/components/blob_header.vue +++ b/app/assets/javascripts/blob/components/blob_header.vue @@ -81,7 +81,7 @@ export default { </blob-filepath> </div> - <div class="gl-display-none gl-sm-display-flex"> + <div class="gl-sm-display-flex file-actions"> <viewer-switcher v-if="showViewerSwitcher" v-model="viewer" /> <slot name="actions"></slot> diff --git a/app/assets/javascripts/blob/components/blob_header_filepath.vue b/app/assets/javascripts/blob/components/blob_header_filepath.vue index cb441a7e491..90d01358451 100644 --- a/app/assets/javascripts/blob/components/blob_header_filepath.vue +++ b/app/assets/javascripts/blob/components/blob_header_filepath.vue @@ -1,4 +1,5 @@ <script> +import { GlBadge } from '@gitlab/ui'; import { numberToHumanSize } from '~/lib/utils/number_utils'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; import FileIcon from '~/vue_shared/components/file_icon.vue'; @@ -7,6 +8,7 @@ export default { components: { FileIcon, ClipboardButton, + GlBadge, }, props: { blob: { @@ -21,6 +23,9 @@ export default { gfmCopyText() { return `\`${this.blob.path}\``; }, + showLfsBadge() { + return this.blob.storedExternally && this.blob.externalStorage === 'lfs'; + }, }, }; </script> @@ -37,8 +42,6 @@ export default { > </template> - <small class="mr-2">{{ blobSize }}</small> - <clipboard-button :text="blob.path" :gfm="gfmCopyText" @@ -46,5 +49,9 @@ export default { category="tertiary" css-class="btn-clipboard btn-transparent lh-100 position-static" /> + + <small class="mr-2">{{ blobSize }}</small> + + <gl-badge v-if="showLfsBadge">{{ __('LFS') }}</gl-badge> </div> </template> diff --git a/app/assets/javascripts/blob/components/blob_header_viewer_switcher.vue b/app/assets/javascripts/blob/components/blob_header_viewer_switcher.vue index a5b594fbd88..b2546d47694 100644 --- a/app/assets/javascripts/blob/components/blob_header_viewer_switcher.vue +++ b/app/assets/javascripts/blob/components/blob_header_viewer_switcher.vue @@ -53,6 +53,8 @@ export default { icon="code" category="primary" variant="default" + class="js-blob-viewer-switch-btn" + data-viewer="simple" @click="switchToViewer($options.SIMPLE_BLOB_VIEWER)" /> <gl-button @@ -63,6 +65,8 @@ export default { icon="document" category="primary" variant="default" + class="js-blob-viewer-switch-btn" + data-viewer="rich" @click="switchToViewer($options.RICH_BLOB_VIEWER)" /> </gl-button-group> diff --git a/app/assets/javascripts/line_highlighter.js b/app/assets/javascripts/blob/line_highlighter.js index a1f59aa1b54..a1f59aa1b54 100644 --- a/app/assets/javascripts/line_highlighter.js +++ b/app/assets/javascripts/blob/line_highlighter.js diff --git a/app/assets/javascripts/boards/components/board_card.vue b/app/assets/javascripts/boards/components/board_card.vue index 563bed6a6b8..dc821cb9f58 100644 --- a/app/assets/javascripts/boards/components/board_card.vue +++ b/app/assets/javascripts/boards/components/board_card.vue @@ -72,7 +72,7 @@ export default { data-qa-selector="board_card" :class="{ 'multi-select': multiSelectVisible, - 'user-can-drag': isDraggable, + 'gl-cursor-grab': isDraggable, 'is-disabled': isDisabled, 'is-active': isActive, 'gl-cursor-not-allowed gl-bg-gray-10': item.isLoading, diff --git a/app/assets/javascripts/boards/components/board_content_sidebar.vue b/app/assets/javascripts/boards/components/board_content_sidebar.vue index f89f8e5feb8..156029b62b0 100644 --- a/app/assets/javascripts/boards/components/board_content_sidebar.vue +++ b/app/assets/javascripts/boards/components/board_content_sidebar.vue @@ -6,11 +6,12 @@ import SidebarDropdownWidget from 'ee_else_ce/sidebar/components/sidebar_dropdow import { __, sprintf } from '~/locale'; import BoardSidebarTimeTracker from '~/boards/components/sidebar/board_sidebar_time_tracker.vue'; import BoardSidebarTitle from '~/boards/components/sidebar/board_sidebar_title.vue'; -import { ISSUABLE } from '~/boards/constants'; +import { ISSUABLE, INCIDENT } from '~/boards/constants'; import { getIdFromGraphQLId } from '~/graphql_shared/utils'; import SidebarAssigneesWidget from '~/sidebar/components/assignees/sidebar_assignees_widget.vue'; import SidebarConfidentialityWidget from '~/sidebar/components/confidential/sidebar_confidentiality_widget.vue'; import SidebarDateWidget from '~/sidebar/components/date/sidebar_date_widget.vue'; +import SidebarSeverity from '~/sidebar/components/severity/sidebar_severity.vue'; import SidebarSubscriptionsWidget from '~/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue'; import SidebarTodoWidget from '~/sidebar/components/todo_toggle/sidebar_todo_widget.vue'; import SidebarLabelsWidget from '~/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue'; @@ -29,6 +30,7 @@ export default { SidebarSubscriptionsWidget, SidebarDropdownWidget, SidebarTodoWidget, + SidebarSeverity, MountingPortal, SidebarWeightWidget: () => import('ee_component/sidebar/components/weight/sidebar_weight_widget.vue'), @@ -69,9 +71,15 @@ export default { isIssuableSidebar() { return this.sidebarType === ISSUABLE; }, + isIncidentSidebar() { + return this.activeBoardItem.type === INCIDENT; + }, showSidebar() { return this.isIssuableSidebar && this.isSidebarOpen; }, + sidebarTitle() { + return this.isIncidentSidebar ? __('Incident details') : __('Issue details'); + }, fullPath() { return this.activeBoardItem?.referencePath?.split('#')[0] || ''; }, @@ -138,7 +146,7 @@ export default { @close="handleClose" > <template #title> - <h2 class="gl-my-0 gl-font-size-h2 gl-line-height-24">{{ __('Issue details') }}</h2> + <h2 class="gl-my-0 gl-font-size-h2 gl-line-height-24">{{ sidebarTitle }}</h2> </template> <template #header> <sidebar-todo-widget @@ -159,7 +167,7 @@ export default { @assignees-updated="setAssignees" /> <sidebar-dropdown-widget - v-if="epicFeatureAvailable" + v-if="epicFeatureAvailable && !isIncidentSidebar" :iid="activeBoardItem.iid" issuable-attribute="epic" :workspace-path="projectPathForActiveIssue" @@ -178,7 +186,7 @@ export default { /> <template v-if="!glFeatures.iterationCadences"> <sidebar-dropdown-widget - v-if="iterationFeatureAvailable" + v-if="iterationFeatureAvailable && !isIncidentSidebar" :iid="activeBoardItem.iid" issuable-attribute="iteration" :workspace-path="projectPathForActiveIssue" @@ -190,7 +198,7 @@ export default { </template> <template v-else> <iteration-sidebar-dropdown-widget - v-if="iterationFeatureAvailable" + v-if="iterationFeatureAvailable && !isIncidentSidebar" :iid="activeBoardItem.iid" :workspace-path="projectPathForActiveIssue" :attr-workspace-path="groupPathForActiveIssue" @@ -200,7 +208,7 @@ export default { /> </template> </div> - <board-sidebar-time-tracker class="swimlanes-sidebar-time-tracker" /> + <board-sidebar-time-tracker /> <sidebar-date-widget :iid="activeBoardItem.iid" :full-path="fullPath" @@ -209,7 +217,6 @@ export default { /> <sidebar-labels-widget class="block labels" - data-testid="sidebar-labels" :iid="activeBoardItem.iid" :full-path="projectPathForActiveIssue" :allow-label-remove="allowLabelEdit" @@ -227,8 +234,14 @@ export default { > {{ __('None') }} </sidebar-labels-widget> + <sidebar-severity + v-if="isIncidentSidebar" + :iid="activeBoardItem.iid" + :project-path="fullPath" + :initial-severity="activeBoardItem.severity" + /> <sidebar-weight-widget - v-if="weightFeatureAvailable" + v-if="weightFeatureAvailable && !isIncidentSidebar" :iid="activeBoardItem.iid" :full-path="fullPath" :issuable-type="issuableType" diff --git a/app/assets/javascripts/boards/components/board_filtered_search.vue b/app/assets/javascripts/boards/components/board_filtered_search.vue index 09ec385bbba..2599d1c80b8 100644 --- a/app/assets/javascripts/boards/components/board_filtered_search.vue +++ b/app/assets/javascripts/boards/components/board_filtered_search.vue @@ -6,6 +6,7 @@ import { updateHistory, setUrlParams } from '~/lib/utils/url_utility'; import { __ } from '~/locale'; import { FILTERED_SEARCH_TERM } from '~/vue_shared/components/filtered_search_bar/constants'; import FilteredSearch from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue'; +import { AssigneeFilterType } from '~/boards/constants'; export default { i18n: { @@ -37,6 +38,7 @@ export default { authorUsername, labelName, assigneeUsername, + assigneeId, search, milestoneTitle, iterationId, @@ -63,6 +65,13 @@ export default { }); } + if (assigneeId) { + filteredSearchValue.push({ + type: 'assignee', + value: { data: assigneeId, operator: '=' }, + }); + } + if (types) { filteredSearchValue.push({ type: 'type', @@ -211,6 +220,7 @@ export default { authorUsername, labelName, assigneeUsername, + assigneeId, search, milestoneTitle, types, @@ -246,6 +256,7 @@ export default { author_username: authorUsername, 'label_name[]': labelName, assignee_username: assigneeUsername, + assignee_id: assigneeId, milestone_title: milestoneTitle, iteration_id: iterationId, search, @@ -295,7 +306,11 @@ export default { filterParams.authorUsername = filter.value.data; break; case 'assignee': - filterParams.assigneeUsername = filter.value.data; + if (Object.values(AssigneeFilterType).includes(filter.value.data)) { + filterParams.assigneeId = filter.value.data; + } else { + filterParams.assigneeUsername = filter.value.data; + } break; case 'type': filterParams.types = filter.value.data; diff --git a/app/assets/javascripts/boards/components/board_list_header.vue b/app/assets/javascripts/boards/components/board_list_header.vue index 19004518edf..6835d83a66c 100644 --- a/app/assets/javascripts/boards/components/board_list_header.vue +++ b/app/assets/javascripts/boards/components/board_list_header.vue @@ -263,7 +263,7 @@ export default { > <h3 :class="{ - 'user-can-drag': userCanDrag, + 'gl-cursor-grab': userCanDrag, 'gl-py-3 gl-h-full': list.collapsed && !isSwimlanesHeader, 'gl-border-b-0': list.collapsed || isSwimlanesHeader, 'gl-py-2': list.collapsed && isSwimlanesHeader, diff --git a/app/assets/javascripts/boards/components/sidebar/board_sidebar_title.vue b/app/assets/javascripts/boards/components/sidebar/board_sidebar_title.vue index e77aadfa50e..9d19fe57e7a 100644 --- a/app/assets/javascripts/boards/components/sidebar/board_sidebar_title.vue +++ b/app/assets/javascripts/boards/components/sidebar/board_sidebar_title.vue @@ -150,7 +150,7 @@ export default { <div class="gl-display-flex gl-w-full gl-justify-content-space-between gl-mt-5"> <gl-button - variant="success" + variant="confirm" size="small" data-testid="submit-button" :disabled="!title" diff --git a/app/assets/javascripts/boards/constants.js b/app/assets/javascripts/boards/constants.js index 851b5eca40d..0f290f566ba 100644 --- a/app/assets/javascripts/boards/constants.js +++ b/app/assets/javascripts/boards/constants.js @@ -50,10 +50,13 @@ export const toggleFormEventPrefix = { issue: 'toggle-issue-form-', }; +export const active = 'active'; + export const inactiveId = 0; export const ISSUABLE = 'issuable'; export const LIST = 'list'; +export const INCIDENT = 'INCIDENT'; export const flashAnimationDuration = 2000; @@ -119,6 +122,7 @@ export const FilterFields = { /* eslint-disable @gitlab/require-i18n-strings */ export const AssigneeFilterType = { any: 'Any', + none: 'None', }; export const MilestoneFilterType = { diff --git a/app/assets/javascripts/boards/graphql/group_board_milestones.query.graphql b/app/assets/javascripts/boards/graphql/group_board_milestones.query.graphql index 0963b3fbfaa..6fe8bb799d6 100644 --- a/app/assets/javascripts/boards/graphql/group_board_milestones.query.graphql +++ b/app/assets/javascripts/boards/graphql/group_board_milestones.query.graphql @@ -1,7 +1,7 @@ -query GroupBoardMilestones($fullPath: ID!, $searchTerm: String) { +query GroupBoardMilestones($fullPath: ID!, $searchTerm: String, $state: MilestoneStateEnum) { group(fullPath: $fullPath) { id - milestones(includeAncestors: true, searchTitle: $searchTerm) { + milestones(includeAncestors: true, searchTitle: $searchTerm, state: $state) { nodes { id title diff --git a/app/assets/javascripts/boards/graphql/issue.fragment.graphql b/app/assets/javascripts/boards/graphql/issue.fragment.graphql index 314faae89f8..53fe6fdc59e 100644 --- a/app/assets/javascripts/boards/graphql/issue.fragment.graphql +++ b/app/assets/javascripts/boards/graphql/issue.fragment.graphql @@ -1,35 +1,6 @@ -#import "~/graphql_shared/fragments/milestone.fragment.graphql" -#import "~/graphql_shared/fragments/user.fragment.graphql" +#import "~/graphql_shared/fragments/issue.fragment.graphql" -fragment IssueNode on Issue { +fragment Issue on Issue { id - iid - title - referencePath: reference(full: true) - dueDate - timeEstimate - totalTimeSpent - humanTimeEstimate - humanTotalTimeSpent - emailsDisabled - confidential - hidden - webUrl - relativePosition - milestone { - ...MilestoneFragment - } - assignees { - nodes { - ...User - } - } - labels { - nodes { - id - title - color - description - } - } + ...IssueNode } diff --git a/app/assets/javascripts/boards/graphql/issue_create.mutation.graphql b/app/assets/javascripts/boards/graphql/issue_create.mutation.graphql index c1a2361a4e8..643d5dcfe4c 100644 --- a/app/assets/javascripts/boards/graphql/issue_create.mutation.graphql +++ b/app/assets/javascripts/boards/graphql/issue_create.mutation.graphql @@ -3,7 +3,7 @@ mutation CreateIssue($input: CreateIssueInput!) { createIssue(input: $input) { issue { - ...IssueNode + ...Issue } errors } diff --git a/app/assets/javascripts/boards/graphql/issue_move_list.mutation.graphql b/app/assets/javascripts/boards/graphql/issue_move_list.mutation.graphql index 570731ecac6..1658cf09085 100644 --- a/app/assets/javascripts/boards/graphql/issue_move_list.mutation.graphql +++ b/app/assets/javascripts/boards/graphql/issue_move_list.mutation.graphql @@ -21,7 +21,7 @@ mutation issueMoveList( } ) { issue { - ...IssueNode + ...Issue } errors } diff --git a/app/assets/javascripts/boards/graphql/lists_issues.query.graphql b/app/assets/javascripts/boards/graphql/lists_issues.query.graphql index 105f2931caa..994ea894be3 100644 --- a/app/assets/javascripts/boards/graphql/lists_issues.query.graphql +++ b/app/assets/javascripts/boards/graphql/lists_issues.query.graphql @@ -22,7 +22,7 @@ query BoardListsEE( issues(first: $first, filters: $filters, after: $after) { edges { node { - ...IssueNode + ...Issue } } pageInfo { @@ -46,7 +46,7 @@ query BoardListsEE( issues(first: $first, filters: $filters, after: $after) { edges { node { - ...IssueNode + ...Issue } } pageInfo { diff --git a/app/assets/javascripts/boards/graphql/project_board_milestones.query.graphql b/app/assets/javascripts/boards/graphql/project_board_milestones.query.graphql index e456823d78a..d917c7e809d 100644 --- a/app/assets/javascripts/boards/graphql/project_board_milestones.query.graphql +++ b/app/assets/javascripts/boards/graphql/project_board_milestones.query.graphql @@ -1,7 +1,7 @@ -query ProjectBoardMilestones($fullPath: ID!, $searchTerm: String) { +query ProjectBoardMilestones($fullPath: ID!, $searchTerm: String, $state: MilestoneStateEnum) { project(fullPath: $fullPath) { id - milestones(searchTitle: $searchTerm, includeAncestors: true) { + milestones(searchTitle: $searchTerm, includeAncestors: true, state: $state) { nodes { id title diff --git a/app/assets/javascripts/boards/stores/actions.js b/app/assets/javascripts/boards/stores/actions.js index 1ebfcfc331b..48ca3239cfd 100644 --- a/app/assets/javascripts/boards/stores/actions.js +++ b/app/assets/javascripts/boards/stores/actions.js @@ -15,6 +15,7 @@ import { FilterFields, ListTypeTitles, DraggableItemTypes, + active, } from 'ee_else_ce/boards/constants'; import { formatIssueInput, @@ -209,6 +210,7 @@ export default { const variables = { fullPath, searchTerm, + state: active, }; let query; diff --git a/app/assets/javascripts/branches/branches_delete_modal.js b/app/assets/javascripts/branches/branches_delete_modal.js deleted file mode 100644 index f4c3fa185d8..00000000000 --- a/app/assets/javascripts/branches/branches_delete_modal.js +++ /dev/null @@ -1,53 +0,0 @@ -import $ from 'jquery'; - -const MODAL_SELECTOR = '#modal-delete-branch'; - -class DeleteModal { - constructor() { - this.$modal = $(MODAL_SELECTOR); - this.$toggleBtns = $(`[data-target="${MODAL_SELECTOR}"]`); - this.$branchName = $('.js-branch-name', this.$modal); - this.$confirmInput = $('.js-delete-branch-input', this.$modal); - this.$deleteBtn = $('.js-delete-branch', this.$modal); - this.$notMerged = $('.js-not-merged', this.$modal); - this.bindEvents(); - } - - bindEvents() { - this.$toggleBtns.on('click', this.setModalData.bind(this)); - this.$confirmInput.on('input', this.setDeleteDisabled.bind(this)); - this.$deleteBtn.on('click', this.setDisableDeleteButton.bind(this)); - } - - setModalData(e) { - const branchData = e.currentTarget.dataset; - this.branchName = branchData.branchName || ''; - this.deletePath = branchData.deletePath || ''; - this.isMerged = Boolean(branchData.isMerged); - this.updateModal(); - } - - setDeleteDisabled(e) { - this.$deleteBtn.attr('disabled', e.currentTarget.value !== this.branchName); - } - - setDisableDeleteButton(e) { - if (this.$deleteBtn.is('[disabled]')) { - e.preventDefault(); - e.stopPropagation(); - return false; - } - - return true; - } - - updateModal() { - this.$branchName.text(this.branchName); - this.$confirmInput.val(''); - this.$deleteBtn.attr('href', this.deletePath); - this.$deleteBtn.attr('disabled', true); - this.$notMerged.toggleClass('hidden', this.isMerged); - } -} - -export default DeleteModal; diff --git a/app/assets/javascripts/clusters/agents/components/show.vue b/app/assets/javascripts/clusters/agents/components/show.vue index 9109c010500..a53bba6992d 100644 --- a/app/assets/javascripts/clusters/agents/components/show.vue +++ b/app/assets/javascripts/clusters/agents/components/show.vue @@ -51,16 +51,7 @@ export default { TokenTable, ActivityEvents, }, - props: { - agentName: { - required: true, - type: String, - }, - projectPath: { - required: true, - type: String, - }, - }, + inject: ['agentName', 'projectPath'], data() { return { cursor: { @@ -135,7 +126,7 @@ export default { <activity-events :agent-name="agentName" :project-path="projectPath" /> </gl-tab> - <slot name="ee-security-tab"></slot> + <slot name="ee-security-tab" :cluster-agent-id="clusterAgent.id"></slot> <gl-tab query-param-value="tokens"> <template #title> diff --git a/app/assets/javascripts/clusters/agents/graphql/provider.js b/app/assets/javascripts/clusters/agents/graphql/provider.js new file mode 100644 index 00000000000..8b068fa1eee --- /dev/null +++ b/app/assets/javascripts/clusters/agents/graphql/provider.js @@ -0,0 +1,26 @@ +import { IntrospectionFragmentMatcher } from 'apollo-cache-inmemory'; +import Vue from 'vue'; +import VueApollo from 'vue-apollo'; +import createDefaultClient from '~/lib/graphql'; +import { vulnerabilityLocationTypes } from '~/graphql_shared/fragment_types/vulnerability_location_types'; + +Vue.use(VueApollo); + +// We create a fragment matcher so that we can create a fragment from an interface +// Without this, Apollo throws a heuristic fragment matcher warning +const fragmentMatcher = new IntrospectionFragmentMatcher({ + introspectionQueryResultData: vulnerabilityLocationTypes, +}); + +const defaultClient = createDefaultClient( + {}, + { + cacheConfig: { + fragmentMatcher, + }, + }, +); + +export default new VueApollo({ + defaultClient, +}); diff --git a/app/assets/javascripts/clusters/agents/index.js b/app/assets/javascripts/clusters/agents/index.js index 5796c9e308d..6c7fae274f8 100644 --- a/app/assets/javascripts/clusters/agents/index.js +++ b/app/assets/javascripts/clusters/agents/index.js @@ -1,9 +1,6 @@ import Vue from 'vue'; -import VueApollo from 'vue-apollo'; -import createDefaultClient from '~/lib/graphql'; import AgentShowPage from 'ee_else_ce/clusters/agents/components/show.vue'; - -Vue.use(VueApollo); +import apolloProvider from './graphql/provider'; export default () => { const el = document.querySelector('#js-cluster-agent-details'); @@ -12,20 +9,19 @@ export default () => { return null; } - const defaultClient = createDefaultClient(); - const { agentName, projectPath, activityEmptyStateImage } = el.dataset; + const { activityEmptyStateImage, agentName, emptyStateSvgPath, projectPath } = el.dataset; return new Vue({ el, - apolloProvider: new VueApollo({ defaultClient }), - provide: { agentName, projectPath, activityEmptyStateImage }, + apolloProvider, + provide: { + activityEmptyStateImage, + agentName, + emptyStateSvgPath, + projectPath, + }, render(createElement) { - return createElement(AgentShowPage, { - props: { - agentName, - projectPath, - }, - }); + return createElement(AgentShowPage); }, }); }; diff --git a/app/assets/javascripts/clusters_list/components/agent_options.vue b/app/assets/javascripts/clusters_list/components/agent_options.vue new file mode 100644 index 00000000000..a364122ba56 --- /dev/null +++ b/app/assets/javascripts/clusters_list/components/agent_options.vue @@ -0,0 +1,200 @@ +<script> +import { + GlDropdown, + GlDropdownItem, + GlModal, + GlModalDirective, + GlSprintf, + GlFormGroup, + GlFormInput, +} from '@gitlab/ui'; +import { s__, __, sprintf } from '~/locale'; +import { DELETE_AGENT_MODAL_ID } from '../constants'; +import deleteAgent from '../graphql/mutations/delete_agent.mutation.graphql'; +import getAgentsQuery from '../graphql/queries/get_agents.query.graphql'; +import { removeAgentFromStore } from '../graphql/cache_update'; + +export default { + i18n: { + dropdownText: __('More options'), + deleteButton: s__('ClusterAgents|Delete agent'), + modalTitle: __('Are you sure?'), + modalBody: s__( + 'ClusterAgents|Are you sure you want to delete this agent? You cannot undo this.', + ), + modalInputLabel: s__('ClusterAgents|To delete the agent, type %{name} to confirm:'), + modalAction: s__('ClusterAgents|Delete'), + modalCancel: __('Cancel'), + successMessage: s__('ClusterAgents|%{name} successfully deleted'), + defaultError: __('An error occurred. Please try again.'), + }, + components: { + GlDropdown, + GlDropdownItem, + GlModal, + GlSprintf, + GlFormGroup, + GlFormInput, + }, + directives: { + GlModalDirective, + }, + inject: ['projectPath'], + props: { + agent: { + required: true, + type: Object, + validator: (value) => ['id', 'name'].every((prop) => value[prop]), + }, + defaultBranchName: { + default: '.noBranch', + required: false, + type: String, + }, + maxAgents: { + default: null, + required: false, + type: Number, + }, + }, + data() { + return { + loading: false, + error: null, + deleteConfirmText: null, + agentName: this.agent.name, + }; + }, + computed: { + getAgentsQueryVariables() { + return { + defaultBranchName: this.defaultBranchName, + first: this.maxAgents, + last: null, + projectPath: this.projectPath, + }; + }, + modalId() { + return sprintf(DELETE_AGENT_MODAL_ID, { + agentName: this.agent.name, + }); + }, + primaryModalProps() { + return { + text: this.$options.i18n.modalAction, + attributes: [ + { disabled: this.loading || this.disableModalSubmit, loading: this.loading }, + { variant: 'danger' }, + ], + }; + }, + cancelModalProps() { + return { + text: this.$options.i18n.modalCancel, + attributes: [], + }; + }, + disableModalSubmit() { + return this.deleteConfirmText !== this.agent.name; + }, + }, + methods: { + async deleteAgent() { + if (this.disableModalSubmit || this.loading) { + return; + } + + this.loading = true; + this.error = null; + + try { + const { errors } = await this.deleteAgentMutation(); + + if (errors.length) { + throw new Error(errors[0]); + } + } catch (error) { + this.error = error?.message || this.$options.i18n.defaultError; + } finally { + this.loading = false; + const successMessage = sprintf(this.$options.i18n.successMessage, { name: this.agentName }); + + this.$toast.show(this.error || successMessage); + + this.$refs.modal.hide(); + } + }, + deleteAgentMutation() { + return this.$apollo + .mutate({ + mutation: deleteAgent, + variables: { + input: { + id: this.agent.id, + }, + }, + update: (store) => { + const deleteClusterAgent = this.agent; + removeAgentFromStore( + store, + deleteClusterAgent, + getAgentsQuery, + this.getAgentsQueryVariables, + ); + }, + }) + + .then(({ data: { clusterAgentDelete } }) => { + return clusterAgentDelete; + }); + }, + hideModal() { + this.loading = false; + this.error = null; + this.deleteConfirmText = null; + }, + }, +}; +</script> + +<template> + <div> + <gl-dropdown + icon="ellipsis_v" + right + :disabled="loading" + :text="$options.i18n.dropdownText" + text-sr-only + category="tertiary" + no-caret + > + <gl-dropdown-item v-gl-modal-directive="modalId"> + {{ $options.i18n.deleteButton }} + </gl-dropdown-item> + </gl-dropdown> + + <gl-modal + ref="modal" + :modal-id="modalId" + :title="$options.i18n.modalTitle" + :action-primary="primaryModalProps" + :action-cancel="cancelModalProps" + size="sm" + @primary="deleteAgent" + @hide="hideModal" + > + <p>{{ $options.i18n.modalBody }}</p> + + <gl-form-group> + <template #label> + <gl-sprintf :message="$options.i18n.modalInputLabel"> + <template #name> + <code>{{ agent.name }}</code> + </template> + </gl-sprintf> + </template> + <gl-form-input v-model="deleteConfirmText" @keydown.enter="deleteAgent" /> + </gl-form-group> + </gl-modal> + </div> +</template> diff --git a/app/assets/javascripts/clusters_list/components/agent_table.vue b/app/assets/javascripts/clusters_list/components/agent_table.vue index 000730ac1ba..695e16b7b4b 100644 --- a/app/assets/javascripts/clusters_list/components/agent_table.vue +++ b/app/assets/javascripts/clusters_list/components/agent_table.vue @@ -1,21 +1,23 @@ <script> -import { - GlLink, - GlModalDirective, - GlTable, - GlIcon, - GlSprintf, - GlTooltip, - GlPopover, -} from '@gitlab/ui'; -import { s__ } from '~/locale'; +import { GlLink, GlTable, GlIcon, GlSprintf, GlTooltip, GlPopover } from '@gitlab/ui'; +import { s__, __ } from '~/locale'; import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; import timeagoMixin from '~/vue_shared/mixins/timeago'; import { helpPagePath } from '~/helpers/help_page_helper'; -import { INSTALL_AGENT_MODAL_ID, AGENT_STATUSES } from '../constants'; +import { AGENT_STATUSES } from '../constants'; import { getAgentConfigPath } from '../clusters_util'; +import AgentOptions from './agent_options.vue'; export default { + i18n: { + nameLabel: s__('ClusterAgents|Name'), + statusLabel: s__('ClusterAgents|Connection status'), + lastContactLabel: s__('ClusterAgents|Last contact'), + configurationLabel: s__('ClusterAgents|Configuration'), + optionsLabel: __('Options'), + troubleshootingText: s__('ClusterAgents|Learn how to troubleshoot'), + neverConnectedText: s__('ClusterAgents|Never'), + }, components: { GlLink, GlTable, @@ -24,14 +26,10 @@ export default { GlTooltip, GlPopover, TimeAgoTooltip, - }, - directives: { - GlModalDirective, + AgentOptions, }, mixins: [timeagoMixin], - INSTALL_AGENT_MODAL_ID, AGENT_STATUSES, - troubleshooting_link: helpPagePath('user/clusters/agent/index', { anchor: 'troubleshooting', }), @@ -40,6 +38,16 @@ export default { required: true, type: Array, }, + defaultBranchName: { + default: '.noBranch', + required: false, + type: String, + }, + maxAgents: { + default: null, + required: false, + type: Number, + }, }, computed: { fields() { @@ -47,22 +55,27 @@ export default { return [ { key: 'name', - label: s__('ClusterAgents|Name'), + label: this.$options.i18n.nameLabel, tdClass, }, { key: 'status', - label: s__('ClusterAgents|Connection status'), + label: this.$options.i18n.statusLabel, tdClass, }, { key: 'lastContact', - label: s__('ClusterAgents|Last contact'), + label: this.$options.i18n.lastContactLabel, tdClass, }, { key: 'configuration', - label: s__('ClusterAgents|Configuration'), + label: this.$options.i18n.configurationLabel, + tdClass, + }, + { + key: 'options', + label: this.$options.i18n.optionsLabel, tdClass, }, ]; @@ -118,7 +131,7 @@ export default { </p> <p class="gl-mb-0"> <gl-link :href="$options.troubleshooting_link" target="_blank" class="gl-font-sm"> - {{ s__('ClusterAgents|Learn how to troubleshoot') }}</gl-link + {{ $options.i18n.troubleshootingText }}</gl-link > </p> </gl-popover> @@ -127,7 +140,7 @@ export default { <template #cell(lastContact)="{ item }"> <span data-testid="cluster-agent-last-contact"> <time-ago-tooltip v-if="item.lastContact" :time="item.lastContact" /> - <span v-else>{{ s__('ClusterAgents|Never') }}</span> + <span v-else>{{ $options.i18n.neverConnectedText }}</span> </span> </template> @@ -140,5 +153,13 @@ export default { <span v-else>{{ getAgentConfigPath(item.name) }}</span> </span> </template> + + <template #cell(options)="{ item }"> + <agent-options + :agent="item" + :default-branch-name="defaultBranchName" + :max-agents="maxAgents" + /> + </template> </gl-table> </template> diff --git a/app/assets/javascripts/clusters_list/components/agents.vue b/app/assets/javascripts/clusters_list/components/agents.vue index 45108a28e37..4fc421e7c31 100644 --- a/app/assets/javascripts/clusters_list/components/agents.vue +++ b/app/assets/javascripts/clusters_list/components/agents.vue @@ -151,7 +151,11 @@ export default { <section v-else-if="agentList"> <div v-if="agentList.length"> - <agent-table :agents="agentList" /> + <agent-table + :agents="agentList" + :default-branch-name="defaultBranchName" + :max-agents="cursor.first" + /> <div v-if="showPagination" class="gl-display-flex gl-justify-content-center gl-mt-5"> <gl-keyset-pagination v-bind="agentPageInfo" @prev="prevPage" @next="nextPage" /> diff --git a/app/assets/javascripts/clusters_list/constants.js b/app/assets/javascripts/clusters_list/constants.js index 9b52df74fc5..380a5d0aada 100644 --- a/app/assets/javascripts/clusters_list/constants.js +++ b/app/assets/javascripts/clusters_list/constants.js @@ -106,7 +106,7 @@ export const I18N_AGENT_MODAL = { empty_state: { modalTitle: s__('ClusterAgents|Connect your cluster through the Agent'), modalBody: s__( - "ClusterAgents|To install a new agent, first add the agent's configuration file to this repository. %{linkStart}What's the agent's configuration file?%{linkEnd}", + "ClusterAgents|To install a new agent, first add the agent's configuration file to this repository. %{linkStart}Learn more about installing GitLab Agent.%{linkEnd}", ), enableKasText: s__( "ClusterAgents|Your instance doesn't have the %{linkStart}GitLab Agent Server (KAS)%{linkEnd} set up. Ask a GitLab Administrator to install it.", @@ -242,3 +242,5 @@ export const EVENT_ACTIONS_CHANGE = 'change_tab'; export const MODAL_TYPE_EMPTY = 'empty_state'; export const MODAL_TYPE_REGISTER = 'agent_registration'; + +export const DELETE_AGENT_MODAL_ID = 'delete-agent-modal-%{agentName}'; diff --git a/app/assets/javascripts/clusters_list/graphql/cache_update.js b/app/assets/javascripts/clusters_list/graphql/cache_update.js index 4d12bc8151c..6476b7a6c2f 100644 --- a/app/assets/javascripts/clusters_list/graphql/cache_update.js +++ b/app/assets/javascripts/clusters_list/graphql/cache_update.js @@ -63,3 +63,25 @@ export function addAgentConfigToStore( }); } } + +export function removeAgentFromStore(store, deleteClusterAgent, query, variables) { + if (!hasErrors(deleteClusterAgent)) { + const sourceData = store.readQuery({ + query, + variables, + }); + + const data = produce(sourceData, (draftData) => { + draftData.project.clusterAgents.nodes = draftData.project.clusterAgents.nodes.filter( + ({ id }) => id !== deleteClusterAgent.id, + ); + draftData.project.clusterAgents.count -= 1; + }); + + store.writeQuery({ + query, + variables, + data, + }); + } +} diff --git a/app/assets/javascripts/clusters_list/graphql/mutations/delete_agent.mutation.graphql b/app/assets/javascripts/clusters_list/graphql/mutations/delete_agent.mutation.graphql new file mode 100644 index 00000000000..28387b2a36c --- /dev/null +++ b/app/assets/javascripts/clusters_list/graphql/mutations/delete_agent.mutation.graphql @@ -0,0 +1,5 @@ +mutation deleteClusterAgent($input: ClusterAgentDeleteInput!) { + clusterAgentDelete(input: $input) { + errors + } +} diff --git a/app/assets/javascripts/clusters_list/index.js b/app/assets/javascripts/clusters_list/index.js index 7f1ef37814b..6148483dcb0 100644 --- a/app/assets/javascripts/clusters_list/index.js +++ b/app/assets/javascripts/clusters_list/index.js @@ -1,8 +1,10 @@ +import { GlToast } from '@gitlab/ui'; import Vue from 'vue'; import VueApollo from 'vue-apollo'; import loadClusters from './load_clusters'; import loadMainView from './load_main_view'; +Vue.use(GlToast); Vue.use(VueApollo); export default () => { diff --git a/app/assets/javascripts/confirm_danger_modal.js b/app/assets/javascripts/confirm_danger_modal.js deleted file mode 100644 index ad70d9be16f..00000000000 --- a/app/assets/javascripts/confirm_danger_modal.js +++ /dev/null @@ -1,64 +0,0 @@ -import $ from 'jquery'; -import { Rails } from '~/lib/utils/rails_ujs'; -import { rstrip } from './lib/utils/common_utils'; - -function openConfirmDangerModal($form, $modal, text) { - const $input = $('.js-legacy-confirm-danger-input', $modal); - $input.val(''); - - $('.js-confirm-text', $modal).text(text || ''); - $modal.modal('show'); - - const confirmTextMatch = $('.js-legacy-confirm-danger-match', $modal).text(); - const $submit = $('.js-legacy-confirm-danger-submit', $modal); - $submit.disable(); - $input.focus(); - - // eslint-disable-next-line @gitlab/no-global-event-off - $input.off('input').on('input', function handleInput() { - const confirmText = rstrip($(this).val()); - if (confirmText === confirmTextMatch) { - $submit.enable(); - } else { - $submit.disable(); - } - }); - - // eslint-disable-next-line @gitlab/no-global-event-off - $('.js-legacy-confirm-danger-submit', $modal) - .off('click') - .on('click', () => { - if ($form.data('remote')) { - Rails.fire($form[0], 'submit'); - } else { - $form.submit(); - } - }); -} - -function getModal($btn) { - const $modal = $btn.prev('.modal'); - - if ($modal.length) { - return $modal; - } - - return $('#modal-confirm-danger'); -} - -export default function initConfirmDangerModal() { - $(document).on('click', '.js-legacy-confirm-danger', (e) => { - const $btn = $(e.target); - const checkFieldName = $btn.data('checkFieldName'); - const checkFieldCompareValue = $btn.data('checkCompareValue'); - const checkFieldVal = parseInt($(`[name="${checkFieldName}"]`).val(), 10); - - if (!checkFieldName || checkFieldVal < checkFieldCompareValue) { - e.preventDefault(); - const $form = $btn.closest('form'); - const $modal = getModal($btn); - const text = $btn.data('confirmDangerMessage'); - openConfirmDangerModal($form, $modal, text); - } - }); -} diff --git a/app/assets/javascripts/content_editor/components/wrappers/frontmatter.vue b/app/assets/javascripts/content_editor/components/wrappers/frontmatter.vue index 97b69afd12e..e8829d00986 100644 --- a/app/assets/javascripts/content_editor/components/wrappers/frontmatter.vue +++ b/app/assets/javascripts/content_editor/components/wrappers/frontmatter.vue @@ -20,7 +20,7 @@ export default { }; </script> <template> - <node-view-wrapper class="gl-relative code highlight" as="pre"> + <node-view-wrapper class="content-editor-code-block gl-relative code highlight" as="pre"> <span data-testid="frontmatter-label" class="gl-absolute gl-top-0 gl-right-3" diff --git a/app/assets/javascripts/content_editor/constants.js b/app/assets/javascripts/content_editor/constants.js index 4af9dc8e405..5e56078df01 100644 --- a/app/assets/javascripts/content_editor/constants.js +++ b/app/assets/javascripts/content_editor/constants.js @@ -49,3 +49,10 @@ export const LOADING_ERROR_EVENT = 'loadingError'; export const PARSE_HTML_PRIORITY_LOWEST = 1; export const PARSE_HTML_PRIORITY_DEFAULT = 50; export const PARSE_HTML_PRIORITY_HIGHEST = 100; + +export const EXTENSION_PRIORITY_LOWER = 75; +/** + * 100 is the default priority in Tiptap + * https://tiptap.dev/guide/custom-extensions/#priority + */ +export const EXTENSION_PRIORITY_DEFAULT = 100; diff --git a/app/assets/javascripts/content_editor/extensions/code.js b/app/assets/javascripts/content_editor/extensions/code.js index f93c22ad10e..53f6d9b995c 100644 --- a/app/assets/javascripts/content_editor/extensions/code.js +++ b/app/assets/javascripts/content_editor/extensions/code.js @@ -1 +1,12 @@ -export { Code as default } from '@tiptap/extension-code'; +import Code from '@tiptap/extension-code'; +import { EXTENSION_PRIORITY_LOWER } from '../constants'; + +export default Code.extend({ + excludes: null, + /** + * Reduce the rendering priority of the code mark to + * ensure the bold, italic, and strikethrough marks + * are rendered first. + */ + priority: EXTENSION_PRIORITY_LOWER, +}); diff --git a/app/assets/javascripts/content_editor/extensions/code_block_highlight.js b/app/assets/javascripts/content_editor/extensions/code_block_highlight.js index ea51bee3ba9..9dc17fcd570 100644 --- a/app/assets/javascripts/content_editor/extensions/code_block_highlight.js +++ b/app/assets/javascripts/content_editor/extensions/code_block_highlight.js @@ -19,7 +19,14 @@ export default CodeBlockLowlight.extend({ }; }, renderHTML({ HTMLAttributes }) { - return ['div', ['pre', HTMLAttributes, ['code', {}, 0]]]; + return [ + 'pre', + { + ...HTMLAttributes, + class: `content-editor-code-block ${HTMLAttributes.class}`, + }, + ['code', {}, 0], + ]; }, }).configure({ lowlight, diff --git a/app/assets/javascripts/content_editor/extensions/frontmatter.js b/app/assets/javascripts/content_editor/extensions/frontmatter.js index c09c10bc524..9842027e192 100644 --- a/app/assets/javascripts/content_editor/extensions/frontmatter.js +++ b/app/assets/javascripts/content_editor/extensions/frontmatter.js @@ -14,9 +14,20 @@ export default CodeBlockHighlight.extend({ }, ]; }, + addCommands() { + return { + setFrontmatter: (attributes) => ({ commands }) => { + return commands.setNode(this.name, attributes); + }, + toggleFrontmatter: (attributes) => ({ commands }) => { + return commands.toggleNode(this.name, 'paragraph', attributes); + }, + }; + }, addNodeView() { return new VueNodeViewRenderer(FrontmatterWrapper); }, + addInputRules() { return []; }, diff --git a/app/assets/javascripts/content_editor/extensions/image.js b/app/assets/javascripts/content_editor/extensions/image.js index d7fb617f7ee..519f7f168ce 100644 --- a/app/assets/javascripts/content_editor/extensions/image.js +++ b/app/assets/javascripts/content_editor/extensions/image.js @@ -66,6 +66,17 @@ export default Image.extend({ }, ]; }, + renderHTML({ HTMLAttributes }) { + return [ + 'img', + { + src: HTMLAttributes.src, + alt: HTMLAttributes.alt, + title: HTMLAttributes.title, + 'data-canonical-src': HTMLAttributes.canonicalSrc, + }, + ]; + }, addNodeView() { return VueNodeViewRenderer(ImageWrapper); }, diff --git a/app/assets/javascripts/content_editor/services/markdown_serializer.js b/app/assets/javascripts/content_editor/services/markdown_serializer.js index 278ef326c7a..d54fb7cded2 100644 --- a/app/assets/javascripts/content_editor/services/markdown_serializer.js +++ b/app/assets/javascripts/content_editor/services/markdown_serializer.js @@ -65,8 +65,8 @@ import { const defaultSerializerConfig = { marks: { [Bold.name]: defaultMarkdownSerializer.marks.strong, - [Code.name]: defaultMarkdownSerializer.marks.code, [Italic.name]: { open: '_', close: '_', mixable: true, expelEnclosingWhitespace: true }, + [Code.name]: defaultMarkdownSerializer.marks.code, [Subscript.name]: { open: '<sub>', close: '</sub>', mixable: true }, [Superscript.name]: { open: '<sup>', close: '</sup>', mixable: true }, [InlineDiff.name]: { diff --git a/app/assets/javascripts/content_editor/services/serialization_helpers.js b/app/assets/javascripts/content_editor/services/serialization_helpers.js index ed5910fca18..4d5a54c0347 100644 --- a/app/assets/javascripts/content_editor/services/serialization_helpers.js +++ b/app/assets/javascripts/content_editor/services/serialization_helpers.js @@ -1,4 +1,4 @@ -import { uniq } from 'lodash'; +import { uniq, isString } from 'lodash'; const defaultAttrs = { td: { colspan: 1, rowspan: 1, colwidth: null }, @@ -325,9 +325,12 @@ export function renderHardBreak(state, node, parent, index) { export function renderImage(state, node) { const { alt, canonicalSrc, src, title } = node.attrs; - const quotedTitle = title ? ` ${state.quote(title)}` : ''; - state.write(`}${quotedTitle})`); + if (isString(src) || isString(canonicalSrc)) { + const quotedTitle = title ? ` ${state.quote(title)}` : ''; + + state.write(`}${quotedTitle})`); + } } export function renderPlayable(state, node) { diff --git a/app/assets/javascripts/content_editor/services/track_input_rules_and_shortcuts.js b/app/assets/javascripts/content_editor/services/track_input_rules_and_shortcuts.js index 9b1cb76f845..eb1e4885ba6 100644 --- a/app/assets/javascripts/content_editor/services/track_input_rules_and_shortcuts.js +++ b/app/assets/javascripts/content_editor/services/track_input_rules_and_shortcuts.js @@ -35,31 +35,33 @@ const trackInputRule = (contentType, inputRule) => { }; const trackInputRulesAndShortcuts = (tiptapExtension) => { - return tiptapExtension.extend({ - addKeyboardShortcuts() { - const shortcuts = this.parent?.() || {}; - const { name } = this; - /** - * We don’t want to track keyboard shortcuts - * that are not deliberately executed to create - * new types of content - */ - const dotNotTrackKeys = [ENTER_KEY, BACKSPACE_KEY]; - const decorated = mapValues(shortcuts, (commandFn, shortcut) => - dotNotTrackKeys.includes(shortcut) - ? commandFn - : trackKeyboardShortcut(name, commandFn, shortcut), - ); + return tiptapExtension + .extend({ + addKeyboardShortcuts() { + const shortcuts = this.parent?.() || {}; + const { name } = this; + /** + * We don’t want to track keyboard shortcuts + * that are not deliberately executed to create + * new types of content + */ + const dotNotTrackKeys = [ENTER_KEY, BACKSPACE_KEY]; + const decorated = mapValues(shortcuts, (commandFn, shortcut) => + dotNotTrackKeys.includes(shortcut) + ? commandFn + : trackKeyboardShortcut(name, commandFn, shortcut), + ); - return decorated; - }, - addInputRules() { - const inputRules = this.parent?.() || []; - const { name } = this; + return decorated; + }, + addInputRules() { + const inputRules = this.parent?.() || []; + const { name } = this; - return inputRules.map((inputRule) => trackInputRule(name, inputRule)); - }, - }); + return inputRules.map((inputRule) => trackInputRule(name, inputRule)); + }, + }) + .configure(tiptapExtension.options); }; export default trackInputRulesAndShortcuts; diff --git a/app/assets/javascripts/crm/components/form.vue b/app/assets/javascripts/crm/components/form.vue new file mode 100644 index 00000000000..b24de1e95e8 --- /dev/null +++ b/app/assets/javascripts/crm/components/form.vue @@ -0,0 +1,232 @@ +<script> +import { GlAlert, GlButton, GlDrawer, GlFormGroup, GlFormInput } from '@gitlab/ui'; +import { get as getPropValueByPath, isEmpty } from 'lodash'; +import { produce } from 'immer'; +import { MountingPortal } from 'portal-vue'; +import { __ } from '~/locale'; +import { logError } from '~/lib/logger'; +import { getFirstPropertyValue } from '~/lib/utils/common_utils'; +import { INDEX_ROUTE_NAME } from '../constants'; + +const MSG_SAVE_CHANGES = __('Save changes'); +const MSG_ERROR = __('Something went wrong. Please try again.'); +const MSG_OPTIONAL = __('(optional)'); +const MSG_CANCEL = __('Cancel'); + +/** + * This component is a first iteration towards a general reusable Create/Update component + * + * There's some opportunity to improve cohesion of this module which we are planning + * to address after solidifying the abstraction's requirements. + * + * Please see https://gitlab.com/gitlab-org/gitlab/-/issues/349441 + */ +export default { + components: { + GlAlert, + GlButton, + GlDrawer, + GlFormGroup, + GlFormInput, + MountingPortal, + }, + props: { + drawerOpen: { + type: Boolean, + required: true, + }, + fields: { + type: Array, + required: true, + }, + title: { + type: String, + required: true, + }, + successMessage: { + type: String, + required: true, + }, + mutation: { + type: Object, + required: true, + }, + getQuery: { + type: Object, + required: false, + default: null, + }, + getQueryNodePath: { + type: String, + required: false, + default: null, + }, + existingModel: { + type: Object, + required: false, + default: () => ({}), + }, + additionalCreateParams: { + type: Object, + required: false, + default: () => ({}), + }, + buttonLabel: { + type: String, + required: false, + default: () => MSG_SAVE_CHANGES, + }, + }, + data() { + const initialModel = this.fields.reduce( + (map, field) => + Object.assign(map, { + [field.name]: this.existingModel ? this.existingModel[field.name] : null, + }), + {}, + ); + + return { + model: initialModel, + submitting: false, + errorMessages: [], + }; + }, + computed: { + isEditMode() { + return this.existingModel?.id; + }, + isInvalid() { + const { fields, model } = this; + + return fields.some((field) => { + return field.required && isEmpty(model[field.name]); + }); + }, + variables() { + const { additionalCreateParams, fields, isEditMode, model } = this; + + const variables = fields.reduce( + (map, field) => + Object.assign(map, { + [field.name]: this.formatValue(model, field), + }), + {}, + ); + + if (isEditMode) { + return { input: { id: this.existingModel.id, ...variables } }; + } + + return { input: { ...additionalCreateParams, ...variables } }; + }, + }, + methods: { + formatValue(model, field) { + if (!isEmpty(model[field.name]) && field.input?.type === 'number') { + return parseFloat(model[field.name]); + } + + return model[field.name]; + }, + save() { + const { mutation, variables, close } = this; + + this.submitting = true; + + return this.$apollo + .mutate({ + mutation, + variables, + update: (store, { data }) => { + const { errors, ...result } = getFirstPropertyValue(data); + + if (errors?.length) { + this.errorMessages = errors; + } else { + this.updateCache(store, result); + close(true); + } + }, + }) + .catch((e) => { + logError(e); + this.errorMessages = [MSG_ERROR]; + }) + .finally(() => { + this.submitting = false; + }); + }, + close(success) { + if (success) { + // This is needed so toast perists when route is changed + this.$root.$toast.show(this.successMessage); + } + + this.$router.replace({ name: this.$options.INDEX_ROUTE_NAME }); + }, + updateCache(store, result) { + const { getQuery, isEditMode, getQueryNodePath } = this; + + if (isEditMode || !getQuery) return; + + const sourceData = store.readQuery(getQuery); + + const newData = produce(sourceData, (draftState) => { + getPropValueByPath(draftState, getQueryNodePath).nodes.push(getFirstPropertyValue(result)); + }); + + store.writeQuery({ + ...getQuery, + data: newData, + }); + }, + getFieldLabel(field) { + const optionalSuffix = field.required ? '' : ` ${MSG_OPTIONAL}`; + return field.label + optionalSuffix; + }, + }, + MSG_CANCEL, + INDEX_ROUTE_NAME, +}; +</script> + +<template> + <mounting-portal mount-to="#js-crm-form-portal" append> + <gl-drawer class="gl-drawer-responsive gl-absolute" :open="drawerOpen" @close="close(false)"> + <template #title> + <h3>{{ title }}</h3> + </template> + <gl-alert v-if="errorMessages.length" variant="danger" @dismiss="errorMessages = []"> + <ul class="gl-mb-0! gl-ml-5"> + <li v-for="error in errorMessages" :key="error"> + {{ error }} + </li> + </ul> + </gl-alert> + <form @submit.prevent="save"> + <gl-form-group + v-for="field in fields" + :key="field.name" + :label="getFieldLabel(field)" + :label-for="field.name" + > + <gl-form-input :id="field.name" v-bind="field.input" v-model="model[field.name]" /> + </gl-form-group> + <span class="gl-float-right"> + <gl-button data-testid="cancel-button" @click="close(false)"> + {{ $options.MSG_CANCEL }} + </gl-button> + <gl-button + variant="confirm" + :disabled="isInvalid" + :loading="submitting" + data-testid="save-button" + type="submit" + >{{ buttonLabel }}</gl-button + > + </span> + </form> + </gl-drawer> + </mounting-portal> +</template> diff --git a/app/assets/javascripts/cycle_analytics/components/base.vue b/app/assets/javascripts/cycle_analytics/components/base.vue index 36430e51dd2..bdfabb8e846 100644 --- a/app/assets/javascripts/cycle_analytics/components/base.vue +++ b/app/assets/javascripts/cycle_analytics/components/base.vue @@ -153,7 +153,7 @@ export default { }; </script> <template> - <div class="cycle-analytics"> + <div> <h3>{{ $options.i18n.pageTitle }}</h3> <div class="gl-display-flex gl-flex-direction-column gl-md-flex-direction-row"> <path-navigation diff --git a/app/assets/javascripts/cycle_analytics/components/path_navigation.vue b/app/assets/javascripts/cycle_analytics/components/path_navigation.vue index f8f89772fd6..af7334ecf2e 100644 --- a/app/assets/javascripts/cycle_analytics/components/path_navigation.vue +++ b/app/assets/javascripts/cycle_analytics/components/path_navigation.vue @@ -57,7 +57,7 @@ export default { }; </script> <template> - <gl-skeleton-loading v-if="loading" :lines="2" class="h-auto pt-2 pb-1" /> + <gl-skeleton-loading v-if="loading" :lines="2" /> <gl-path v-else :key="selectedStage.id" :items="stages" @selected="onSelectStage"> <template #default="{ pathItem, pathId }"> <gl-popover diff --git a/app/assets/javascripts/cycle_analytics/components/stage_table.vue b/app/assets/javascripts/cycle_analytics/components/stage_table.vue index fc4dfafb809..8f7a3f99bab 100644 --- a/app/assets/javascripts/cycle_analytics/components/stage_table.vue +++ b/app/assets/javascripts/cycle_analytics/components/stage_table.vue @@ -32,6 +32,9 @@ const WORKFLOW_COLUMN_TITLES = { mergeRequests: { ...DEFAULT_WORKFLOW_TITLE_PROPERTIES, label: __('Merge requests') }, }; +const fullProjectPath = ({ namespaceFullPath = '', projectPath }) => + namespaceFullPath.split('/').length > 1 ? `${namespaceFullPath}/${projectPath}` : projectPath; + export default { name: 'StageTable', components: { @@ -89,6 +92,11 @@ export default { required: false, default: true, }, + includeProjectName: { + type: Boolean, + required: false, + default: false, + }, }, data() { if (this.pagination) { @@ -144,8 +152,15 @@ export default { isMrLink(url = '') { return url.includes('/merge_request'); }, - itemId({ url, iid }) { - return this.isMrLink(url) ? `!${iid}` : `#${iid}`; + itemId({ iid, projectPath, namespaceFullPath = '' }, separator = '#') { + const prefix = this.includeProjectName + ? fullProjectPath({ namespaceFullPath, projectPath }) + : ''; + return `${prefix}${separator}${iid}`; + }, + itemDisplayName(item) { + const separator = this.isMrLink(item.url) ? '!' : '#'; + return this.itemId(item, separator); }, itemTitle(item) { return item.title || item.name; @@ -201,8 +216,11 @@ export default { <div data-testid="vsa-stage-event"> <div v-if="item.id" data-testid="vsa-stage-content"> <p class="gl-m-0"> - <gl-link class="gl-text-black-normal pipeline-id" :href="item.url" - >#{{ item.id }}</gl-link + <gl-link + data-testid="vsa-stage-event-link" + class="gl-text-black-normal" + :href="item.url" + >{{ itemId(item.id, '#') }}</gl-link > <gl-icon :size="16" name="fork" /> <gl-link @@ -240,7 +258,12 @@ export default { <gl-link class="gl-text-black-normal" :href="item.url">{{ itemTitle(item) }}</gl-link> </h5> <p class="gl-m-0"> - <gl-link class="gl-text-black-normal" :href="item.url">{{ itemId(item) }}</gl-link> + <gl-link + data-testid="vsa-stage-event-link" + class="gl-text-black-normal" + :href="item.url" + >{{ itemDisplayName(item) }}</gl-link + > <span class="gl-font-lg">·</span> <span data-testid="vsa-stage-event-date"> {{ s__('OpenedNDaysAgo|Opened') }} diff --git a/app/assets/javascripts/cycle_analytics/components/value_stream_filters.vue b/app/assets/javascripts/cycle_analytics/components/value_stream_filters.vue index 8610dfc2b03..64461797c46 100644 --- a/app/assets/javascripts/cycle_analytics/components/value_stream_filters.vue +++ b/app/assets/javascripts/cycle_analytics/components/value_stream_filters.vue @@ -59,7 +59,9 @@ export default { }; </script> <template> - <div class="gl-mt-3 gl-py-2 gl-px-3 bg-gray-light border-top border-bottom"> + <div + class="gl-mt-3 gl-py-2 gl-px-3 gl-bg-gray-10 gl-border-b-1 gl-border-b-solid gl-border-t-1 gl-border-t-solid gl-border-gray-100" + > <filter-bar data-testid="vsa-filter-bar" class="filtered-search-box gl-display-flex gl-mb-2 gl-mr-3 gl-border-none" diff --git a/app/assets/javascripts/design_management/components/design_notes/design_discussion.vue b/app/assets/javascripts/design_management/components/design_notes/design_discussion.vue index 10976202d06..7fefbab977d 100644 --- a/app/assets/javascripts/design_management/components/design_notes/design_discussion.vue +++ b/app/assets/javascripts/design_management/components/design_notes/design_discussion.vue @@ -7,6 +7,7 @@ import ReplyPlaceholder from '~/notes/components/discussion_reply_placeholder.vu import { updateGlobalTodoCount } from '~/vue_shared/components/sidebar/todo_toggle/utils'; import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; import DesignNotePin from '~/vue_shared/components/design_management/design_note_pin.vue'; +import { isLoggedIn } from '~/lib/utils/common_utils'; import { ACTIVE_DISCUSSION_SOURCE_TYPES } from '../../constants'; import createNoteMutation from '../../graphql/mutations/create_note.mutation.graphql'; import toggleResolveDiscussionMutation from '../../graphql/mutations/toggle_resolve_discussion.mutation.graphql'; @@ -17,6 +18,7 @@ import { hasErrors } from '../../utils/cache_update'; import { extractDesign } from '../../utils/design_management_utils'; import { ADD_DISCUSSION_COMMENT_ERROR } from '../../utils/error_messages'; import DesignNote from './design_note.vue'; +import DesignNoteSignedOut from './design_note_signed_out.vue'; import DesignReplyForm from './design_reply_form.vue'; import ToggleRepliesWidget from './toggle_replies_widget.vue'; @@ -24,6 +26,7 @@ export default { components: { ApolloMutation, DesignNote, + DesignNoteSignedOut, ReplyPlaceholder, DesignReplyForm, GlIcon, @@ -55,6 +58,14 @@ export default { required: false, default: '', }, + registerPath: { + type: String, + required: true, + }, + signInPath: { + type: String, + required: true, + }, resolvedDiscussionsExpanded: { type: Boolean, required: true, @@ -93,6 +104,7 @@ export default { isResolving: false, shouldChangeResolvedStatus: false, areRepliesCollapsed: this.discussion.resolved, + isLoggedIn: isLoggedIn(), }; }, computed: { @@ -226,7 +238,7 @@ export default { :class="{ 'gl-bg-blue-50': isDiscussionActive }" @error="$emit('update-note-error', $event)" > - <template v-if="discussion.resolvable" #resolve-discussion> + <template v-if="isLoggedIn && discussion.resolvable" #resolve-discussion> <button v-gl-tooltip :class="{ 'is-active': discussion.resolved }" @@ -269,38 +281,47 @@ export default { :class="{ 'gl-bg-blue-50': isDiscussionActive }" @error="$emit('update-note-error', $event)" /> - <li v-show="isReplyPlaceholderVisible" class="reply-wrapper discussion-reply-holder"> - <reply-placeholder - v-if="!isFormVisible" - class="qa-discussion-reply" - :placeholder-text="__('Reply…')" - @focus="showForm" - /> - <apollo-mutation - v-else - #default="{ mutate, loading }" - :mutation="$options.createNoteMutation" - :variables="{ - input: mutationPayload, - }" - @done="onDone" - @error="onCreateNoteError" - > - <design-reply-form - v-model="discussionComment" - :is-saving="loading" - :markdown-preview-path="markdownPreviewPath" - @submit-form="mutate" - @cancel-form="hideForm" + <li + v-show="isReplyPlaceholderVisible" + class="reply-wrapper discussion-reply-holder" + :class="{ 'gl-bg-gray-10': !isLoggedIn }" + > + <template v-if="!isLoggedIn"> + <design-note-signed-out :register-path="registerPath" :sign-in-path="signInPath" /> + </template> + <template v-else> + <reply-placeholder + v-if="!isFormVisible" + class="qa-discussion-reply" + :placeholder-text="__('Reply…')" + @focus="showForm" + /> + <apollo-mutation + v-else + #default="{ mutate, loading }" + :mutation="$options.createNoteMutation" + :variables="{ + input: mutationPayload, + }" + @done="onDone" + @error="onCreateNoteError" > - <template v-if="discussion.resolvable" #resolve-checkbox> - <label data-testid="resolve-checkbox"> - <input v-model="shouldChangeResolvedStatus" type="checkbox" /> - {{ resolveCheckboxText }} - </label> - </template> - </design-reply-form> - </apollo-mutation> + <design-reply-form + v-model="discussionComment" + :is-saving="loading" + :markdown-preview-path="markdownPreviewPath" + @submit-form="mutate" + @cancel-form="hideForm" + > + <template v-if="discussion.resolvable" #resolve-checkbox> + <label data-testid="resolve-checkbox"> + <input v-model="shouldChangeResolvedStatus" type="checkbox" /> + {{ resolveCheckboxText }} + </label> + </template> + </design-reply-form> + </apollo-mutation> + </template> </li> </ul> </div> diff --git a/app/assets/javascripts/design_management/components/design_notes/design_note_signed_out.vue b/app/assets/javascripts/design_management/components/design_notes/design_note_signed_out.vue new file mode 100644 index 00000000000..f0812e62bba --- /dev/null +++ b/app/assets/javascripts/design_management/components/design_notes/design_note_signed_out.vue @@ -0,0 +1,50 @@ +<script> +import { GlSprintf, GlLink } from '@gitlab/ui'; +import { __ } from '~/locale'; + +export default { + components: { + GlSprintf, + GlLink, + }, + props: { + registerPath: { + type: String, + required: true, + }, + signInPath: { + type: String, + required: true, + }, + isAddDiscussion: { + type: Boolean, + required: false, + default: false, + }, + }, + computed: { + signedOutText() { + return this.isAddDiscussion + ? __( + 'Please %{registerLinkStart}register%{registerLinkEnd} or %{signInLinkStart}sign in%{signInLinkEnd} to start a new discussion.', + ) + : __( + 'Please %{registerLinkStart}register%{registerLinkEnd} or %{signInLinkStart}sign in%{signInLinkEnd} to reply.', + ); + }, + }, +}; +</script> + +<template> + <div class="disabled-comment text-center"> + <gl-sprintf :message="signedOutText"> + <template #registerLink="{ content }"> + <gl-link :href="registerPath">{{ content }}</gl-link> + </template> + <template #signInLink="{ content }"> + <gl-link :href="signInPath">{{ content }}</gl-link> + </template> + </gl-sprintf> + </div> +</template> diff --git a/app/assets/javascripts/design_management/components/design_presentation.vue b/app/assets/javascripts/design_management/components/design_presentation.vue index 11d2f3b2e37..5116bacefa5 100644 --- a/app/assets/javascripts/design_management/components/design_presentation.vue +++ b/app/assets/javascripts/design_management/components/design_presentation.vue @@ -1,5 +1,6 @@ <script> import { throttle } from 'lodash'; +import { isLoggedIn } from '~/lib/utils/common_utils'; import DesignOverlay from './design_overlay.vue'; import DesignImage from './image.vue'; @@ -54,6 +55,7 @@ export default { initialLoad: true, lastDragPosition: null, isDraggingDesign: false, + isLoggedIn: isLoggedIn(), }; }, computed: { @@ -311,7 +313,7 @@ export default { :position="overlayPosition" :notes="discussionStartingNotes" :current-comment-form="currentCommentForm" - :disable-commenting="isDraggingDesign" + :disable-commenting="!isLoggedIn || isDraggingDesign" :resolved-discussions-expanded="resolvedDiscussionsExpanded" @openCommentForm="openCommentForm" @closeCommentForm="closeCommentForm" diff --git a/app/assets/javascripts/design_management/components/design_sidebar.vue b/app/assets/javascripts/design_management/components/design_sidebar.vue index ced76eb4843..6d0ed3b08a3 100644 --- a/app/assets/javascripts/design_management/components/design_sidebar.vue +++ b/app/assets/javascripts/design_management/components/design_sidebar.vue @@ -1,7 +1,7 @@ <script> import { GlCollapse, GlButton, GlPopover } from '@gitlab/ui'; import Cookies from 'js-cookie'; -import { parseBoolean } from '~/lib/utils/common_utils'; +import { parseBoolean, isLoggedIn } from '~/lib/utils/common_utils'; import { s__ } from '~/locale'; import Participants from '~/sidebar/components/participants/participants.vue'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; @@ -9,11 +9,13 @@ import { ACTIVE_DISCUSSION_SOURCE_TYPES } from '../constants'; import updateActiveDiscussionMutation from '../graphql/mutations/update_active_discussion.mutation.graphql'; import { extractDiscussions, extractParticipants } from '../utils/design_management_utils'; import DesignDiscussion from './design_notes/design_discussion.vue'; +import DesignNoteSignedOut from './design_notes/design_note_signed_out.vue'; import DesignTodoButton from './design_todo_button.vue'; export default { components: { DesignDiscussion, + DesignNoteSignedOut, Participants, GlCollapse, GlButton, @@ -28,6 +30,12 @@ export default { issueIid: { default: '', }, + registerPath: { + default: '', + }, + signInPath: { + default: '', + }, }, props: { design: { @@ -47,6 +55,7 @@ export default { return { isResolvedCommentsPopoverHidden: parseBoolean(Cookies.get(this.$options.cookieKey)), discussionWithOpenForm: '', + isLoggedIn: isLoggedIn(), }; }, computed: { @@ -134,12 +143,19 @@ export default { class="gl-mb-4" /> <h2 - v-if="unresolvedDiscussions.length === 0" + v-if="isLoggedIn && unresolvedDiscussions.length === 0" class="new-discussion-disclaimer gl-font-base gl-m-0 gl-mb-4" data-testid="new-discussion-disclaimer" > {{ s__("DesignManagement|Click the image where you'd like to start a new discussion") }} </h2> + <design-note-signed-out + v-if="!isLoggedIn" + class="gl-mb-4" + :register-path="registerPath" + :sign-in-path="signInPath" + :is-add-discussion="true" + /> <design-discussion v-for="discussion in unresolvedDiscussions" :key="discussion.id" @@ -147,6 +163,8 @@ export default { :design-id="$route.params.id" :noteable-id="design.id" :markdown-preview-path="markdownPreviewPath" + :register-path="registerPath" + :sign-in-path="signInPath" :resolved-discussions-expanded="resolvedDiscussionsExpanded" :discussion-with-open-form="discussionWithOpenForm" data-testid="unresolved-discussion" @@ -197,6 +215,8 @@ export default { :design-id="$route.params.id" :noteable-id="design.id" :markdown-preview-path="markdownPreviewPath" + :register-path="registerPath" + :sign-in-path="signInPath" :resolved-discussions-expanded="resolvedDiscussionsExpanded" :discussion-with-open-form="discussionWithOpenForm" data-testid="resolved-discussion" diff --git a/app/assets/javascripts/design_management/index.js b/app/assets/javascripts/design_management/index.js index 11666587265..4ae76050aa5 100644 --- a/app/assets/javascripts/design_management/index.js +++ b/app/assets/javascripts/design_management/index.js @@ -8,7 +8,7 @@ import createRouter from './router'; export default () => { const el = document.querySelector('.js-design-management'); - const { issueIid, projectPath, issuePath } = el.dataset; + const { issueIid, projectPath, issuePath, registerPath, signInPath } = el.dataset; const router = createRouter(issuePath); apolloProvider.clients.defaultClient.cache.writeQuery({ @@ -29,6 +29,8 @@ export default () => { provide: { projectPath, issueIid, + registerPath, + signInPath, }, mounted() { performanceMarkAndMeasure({ diff --git a/app/assets/javascripts/diffs/components/compare_versions.vue b/app/assets/javascripts/diffs/components/compare_versions.vue index da918947cc5..442807587d5 100644 --- a/app/assets/javascripts/diffs/components/compare_versions.vue +++ b/app/assets/javascripts/diffs/components/compare_versions.vue @@ -182,7 +182,7 @@ export default { class="gl-mr-3" @click="expandAllFiles" > - {{ __('Expand all') }} + {{ __('Expand all files') }} </gl-button> <settings-dropdown /> </div> diff --git a/app/assets/javascripts/diffs/components/image_diff_overlay.vue b/app/assets/javascripts/diffs/components/image_diff_overlay.vue index 5572338908f..eede8e52292 100644 --- a/app/assets/javascripts/diffs/components/image_diff_overlay.vue +++ b/app/assets/javascripts/diffs/components/image_diff_overlay.vue @@ -4,8 +4,8 @@ import { isArray } from 'lodash'; import { mapActions, mapGetters } from 'vuex'; import imageDiffMixin from 'ee_else_ce/diffs/mixins/image_diff'; -function calcPercent(pos, size, renderedSize) { - return (((pos / size) * 100) / ((renderedSize / size) * 100)) * 100; +function calcPercent(pos, renderedSize) { + return (100 * pos) / renderedSize; } export default { @@ -65,8 +65,8 @@ export default { ...mapActions('diffs', ['openDiffFileCommentForm']), getImageDimensions() { return { - width: this.$parent.width, - height: this.$parent.height, + width: Math.round(this.$parent.width), + height: Math.round(this.$parent.height), }; }, getPositionForObject(meta) { @@ -87,15 +87,15 @@ export default { }, clickedImage(x, y) { const { width, height } = this.getImageDimensions(); - const xPercent = calcPercent(x, width, this.renderedWidth); - const yPercent = calcPercent(y, height, this.renderedHeight); + const xPercent = calcPercent(x, this.renderedWidth); + const yPercent = calcPercent(y, this.renderedHeight); this.openDiffFileCommentForm({ fileHash: this.fileHash, width, height, - x: width * (xPercent / 100), - y: height * (yPercent / 100), + x: Math.round(width * (xPercent / 100)), + y: Math.round(height * (yPercent / 100)), xPercent, yPercent, }); diff --git a/app/assets/javascripts/dropzone_input.js b/app/assets/javascripts/dropzone_input.js index 7c7127dfa44..491c2ced358 100644 --- a/app/assets/javascripts/dropzone_input.js +++ b/app/assets/javascripts/dropzone_input.js @@ -51,7 +51,6 @@ export default function dropzoneInput(form, config = { parallelUploads: 2 }) { // Add dropzone area to the form. const $mdArea = formTextarea.closest('.md-area'); - form.setupMarkdownPreview(); const $formDropzone = form.find('.div-dropzone'); $formDropzone.parent().addClass('div-dropzone-wrapper'); $formDropzone.append(divHover); diff --git a/app/assets/javascripts/editor/source_editor.js b/app/assets/javascripts/editor/source_editor.js index 57e2b0da565..fa749112ab5 100644 --- a/app/assets/javascripts/editor/source_editor.js +++ b/app/assets/javascripts/editor/source_editor.js @@ -149,7 +149,7 @@ export default class SourceEditor { }); this.instances.push(instance); - el.dispatchEvent(new CustomEvent(EDITOR_READY_EVENT, { instance })); + el.dispatchEvent(new CustomEvent(EDITOR_READY_EVENT, { detail: { instance } })); return instance; } diff --git a/app/assets/javascripts/emoji/components/picker.vue b/app/assets/javascripts/emoji/components/picker.vue index dc3eac0cd0c..686b5ffff9e 100644 --- a/app/assets/javascripts/emoji/components/picker.vue +++ b/app/assets/javascripts/emoji/components/picker.vue @@ -28,6 +28,16 @@ export default { required: false, default: () => [], }, + right: { + type: Boolean, + required: false, + default: true, + }, + boundary: { + type: String, + required: false, + default: '', + }, }, data() { return { @@ -62,7 +72,7 @@ export default { addToFrequentlyUsed(name); }, getBoundaryElement() { - return document.querySelector('.content-wrapper') || 'scrollParent'; + return this.boundary || document.querySelector('.content-wrapper') || 'scrollParent'; }, onSearchInput() { this.$refs.virtualScoller.setScrollTop(0); @@ -87,7 +97,7 @@ export default { menu-class="dropdown-extended-height" category="secondary" no-flip - right + :right="right" lazy @shown="$emit('shown')" @hidden="$emit('hidden')" @@ -115,7 +125,7 @@ export default { :aria-label="category.name" @click="scrollToCategory(category.name)" > - <gl-icon :name="category.icon" :size="12" /> + <gl-icon :name="category.icon" /> </button> </div> <emoji-list :search-value="searchValue"> diff --git a/app/assets/javascripts/environments/components/confirm_rollback_modal.vue b/app/assets/javascripts/environments/components/confirm_rollback_modal.vue index 0e556f093e2..ce919f73858 100644 --- a/app/assets/javascripts/environments/components/confirm_rollback_modal.vue +++ b/app/assets/javascripts/environments/components/confirm_rollback_modal.vue @@ -99,8 +99,7 @@ export default { }; }, isLastDeployment() { - // eslint-disable-next-line @gitlab/require-i18n-strings - return this.environment?.isLastDeployment || this.environment?.lastDeployment?.['last?']; + return this.environment?.isLastDeployment || this.environment?.lastDeployment?.isLast; }, }, methods: { diff --git a/app/assets/javascripts/environments/components/deployment.vue b/app/assets/javascripts/environments/components/deployment.vue new file mode 100644 index 00000000000..ef43ca6bc33 --- /dev/null +++ b/app/assets/javascripts/environments/components/deployment.vue @@ -0,0 +1,25 @@ +<script> +import DeploymentStatusBadge from './deployment_status_badge.vue'; + +export default { + components: { + DeploymentStatusBadge, + }, + props: { + deployment: { + type: Object, + required: true, + }, + }, + computed: { + status() { + return this.deployment?.status; + }, + }, +}; +</script> +<template> + <div> + <deployment-status-badge v-if="status" :status="status" /> + </div> +</template> diff --git a/app/assets/javascripts/environments/components/deployment_status_badge.vue b/app/assets/javascripts/environments/components/deployment_status_badge.vue new file mode 100644 index 00000000000..5a026911766 --- /dev/null +++ b/app/assets/javascripts/environments/components/deployment_status_badge.vue @@ -0,0 +1,60 @@ +<script> +import { GlBadge } from '@gitlab/ui'; +import { s__ } from '~/locale'; + +const STATUS_TEXT = { + created: s__('Deployment|Created'), + running: s__('Deployment|Running'), + success: s__('Deployment|Success'), + failed: s__('Deployment|Failed'), + canceled: s__('Deployment|Cancelled'), + skipped: s__('Deployment|Skipped'), + blocked: s__('Deployment|Waiting'), +}; + +const STATUS_VARIANT = { + success: 'success', + running: 'info', + failed: 'danger', + created: 'neutral', + canceled: 'neutral', + skipped: 'neutral', + blocked: 'neutral', +}; + +const STATUS_ICON = { + success: 'status_success', + running: 'status_running', + failed: 'status_failed', + created: 'status_created', + canceled: 'status_canceled', + skipped: 'status_skipped', + blocked: 'status_manual', +}; + +export default { + components: { + GlBadge, + }, + props: { + status: { + type: String, + required: true, + }, + }, + computed: { + icon() { + return STATUS_ICON[this.status]; + }, + text() { + return STATUS_TEXT[this.status]; + }, + variant() { + return STATUS_VARIANT[this.status]; + }, + }, +}; +</script> +<template> + <gl-badge v-if="status" :icon="icon" :variant="variant">{{ text }}</gl-badge> +</template> diff --git a/app/assets/javascripts/environments/components/environment_actions.vue b/app/assets/javascripts/environments/components/environment_actions.vue index 2d98f00433a..98c95507168 100644 --- a/app/assets/javascripts/environments/components/environment_actions.vue +++ b/app/assets/javascripts/environments/components/environment_actions.vue @@ -1,8 +1,9 @@ <script> -import { GlDropdown, GlDropdownItem, GlIcon, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui'; +import { GlDropdown, GlDropdownItem, GlIcon, GlTooltipDirective } from '@gitlab/ui'; import { formatTime } from '~/lib/utils/datetime_utility'; import { __, s__, sprintf } from '~/locale'; import eventHub from '../event_hub'; +import actionMutation from '../graphql/mutations/action.mutation.graphql'; export default { directives: { @@ -12,7 +13,6 @@ export default { GlDropdown, GlDropdownItem, GlIcon, - GlLoadingIcon, }, props: { actions: { @@ -20,6 +20,11 @@ export default { required: false, default: () => [], }, + graphql: { + type: Boolean, + required: false, + default: false, + }, }, data() { return { @@ -49,7 +54,11 @@ export default { this.isLoading = true; - eventHub.$emit('postAction', { endpoint: action.playPath }); + if (this.graphql) { + this.$apollo.mutate({ mutation: actionMutation, variables: { action } }); + } else { + eventHub.$emit('postAction', { endpoint: action.playPath }); + } }, isActionDisabled(action) { @@ -70,18 +79,16 @@ export default { <template> <gl-dropdown v-gl-tooltip + :text="title" :title="title" + :loading="isLoading" :aria-label="title" - :disabled="isLoading" + icon="play" + text-sr-only right data-container="body" data-testid="environment-actions-button" > - <template #button-content> - <gl-icon name="play" /> - <gl-icon name="chevron-down" /> - <gl-loading-icon v-if="isLoading" size="sm" /> - </template> <gl-dropdown-item v-for="(action, i) in actions" :key="i" diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue index be9bfb50de5..cfe35d26b94 100644 --- a/app/assets/javascripts/environments/components/environment_item.vue +++ b/app/assets/javascripts/environments/components/environment_item.vue @@ -1,5 +1,5 @@ <script> -import { GlDropdown, GlTooltipDirective, GlIcon, GlLink, GlSprintf } from '@gitlab/ui'; +import { GlDropdown, GlTooltipDirective, GlIcon, GlLink, GlSprintf, GlBadge } from '@gitlab/ui'; import { isEmpty } from 'lodash'; import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; import { __, s__, sprintf } from '~/locale'; @@ -30,6 +30,7 @@ export default { CommitComponent, ExternalUrlComponent, GlDropdown, + GlBadge, GlIcon, GlLink, GlSprintf, @@ -621,9 +622,9 @@ export default { <span v-if="model.size === 1">{{ model.name }}</span> <span v-else>{{ model.name_without_type }}</span> </a> - <span v-if="isProtected" class="badge badge-success"> - {{ s__('Environments|protected') }} - </span> + <gl-badge v-if="isProtected" variant="success">{{ + s__('Environments|protected') + }}</gl-badge> </span> <span v-else @@ -639,7 +640,7 @@ export default { <span> {{ model.folderName }} </span> - <span class="badge badge-pill"> {{ model.size }} </span> + <gl-badge>{{ model.size }}</gl-badge> </span> </div> diff --git a/app/assets/javascripts/environments/components/environment_stop.vue b/app/assets/javascripts/environments/components/environment_stop.vue index 0d4a1e76eb8..17a70fd0c34 100644 --- a/app/assets/javascripts/environments/components/environment_stop.vue +++ b/app/assets/javascripts/environments/components/environment_stop.vue @@ -8,6 +8,8 @@ import { GlTooltipDirective, GlButton, GlModalDirective } from '@gitlab/ui'; import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants'; import { s__ } from '~/locale'; import eventHub from '../event_hub'; +import setEnvironmentToStopMutation from '../graphql/mutations/set_environment_to_stop.mutation.graphql'; +import isEnvironmentStoppingQuery from '../graphql/queries/is_environment_stopping.query.graphql'; export default { components: { @@ -22,6 +24,19 @@ export default { type: Object, required: true, }, + graphql: { + type: Boolean, + required: false, + default: false, + }, + }, + apollo: { + isEnvironmentStopping: { + query: isEnvironmentStoppingQuery, + variables() { + return { environment: this.environment }; + }, + }, }, i18n: { title: s__('Environments|Stop environment'), @@ -30,6 +45,7 @@ export default { data() { return { isLoading: false, + isEnvironmentStopping: false, }; }, mounted() { @@ -41,7 +57,14 @@ export default { methods: { onClick() { this.$root.$emit(BV_HIDE_TOOLTIP, this.$options.stopEnvironmentTooltipId); - eventHub.$emit('requestStopEnvironment', this.environment); + if (this.graphql) { + this.$apollo.mutate({ + mutation: setEnvironmentToStopMutation, + variables: { environment: this.environment }, + }); + } else { + eventHub.$emit('requestStopEnvironment', this.environment); + } }, onStopEnvironment(environment) { if (this.environment.id === environment.id) { @@ -56,7 +79,7 @@ export default { <gl-button v-gl-tooltip="{ id: $options.stopEnvironmentTooltipId }" v-gl-modal-directive="'stop-environment-modal'" - :loading="isLoading" + :loading="isLoading || isEnvironmentStopping" :title="$options.i18n.title" :aria-label="$options.i18n.title" icon="stop" diff --git a/app/assets/javascripts/environments/components/new_environment_folder.vue b/app/assets/javascripts/environments/components/new_environment_folder.vue index fe3d6f1e8ca..0d3867a4d74 100644 --- a/app/assets/javascripts/environments/components/new_environment_folder.vue +++ b/app/assets/javascripts/environments/components/new_environment_folder.vue @@ -2,9 +2,11 @@ import { GlButton, GlCollapse, GlIcon, GlBadge, GlLink } from '@gitlab/ui'; import { __, s__ } from '~/locale'; import folderQuery from '../graphql/queries/folder.query.graphql'; +import EnvironmentItem from './new_environment_item.vue'; export default { components: { + EnvironmentItem, GlButton, GlCollapse, GlIcon, @@ -51,17 +53,26 @@ export default { folderPath() { return this.nestedEnvironment.latest.folderPath; }, + environments() { + return this.folder?.environments; + }, }, methods: { toggleCollapse() { this.visible = !this.visible; }, + isFirstEnvironment(index) { + return index === 0; + }, }, }; </script> <template> - <div class="gl-border-b-solid gl-border-gray-100 gl-border-1 gl-px-3 gl-pt-3 gl-pb-5"> - <div class="gl-w-full gl-display-flex gl-align-items-center"> + <div + :class="{ 'gl-pb-5': !visible }" + class="gl-border-b-solid gl-border-gray-100 gl-border-1 gl-pt-3" + > + <div class="gl-w-full gl-display-flex gl-align-items-center gl-px-3"> <gl-button class="gl-mr-4 gl-fill-current-color gl-text-gray-500" :aria-label="label" @@ -77,6 +88,15 @@ export default { <gl-badge size="sm" class="gl-mr-auto">{{ count }}</gl-badge> <gl-link v-if="visible" :href="folderPath">{{ $options.i18n.link }}</gl-link> </div> - <gl-collapse :visible="visible" /> + <gl-collapse :visible="visible"> + <environment-item + v-for="(environment, index) in environments" + :key="environment.name" + :environment="environment" + :class="{ 'gl-mt-5': isFirstEnvironment(index) }" + class="gl-border-gray-100 gl-border-t-solid gl-border-1 gl-pt-3" + in-folder + /> + </gl-collapse> </div> </template> diff --git a/app/assets/javascripts/environments/components/new_environment_item.vue b/app/assets/javascripts/environments/components/new_environment_item.vue new file mode 100644 index 00000000000..d3624103c13 --- /dev/null +++ b/app/assets/javascripts/environments/components/new_environment_item.vue @@ -0,0 +1,265 @@ +<script> +import { + GlCollapse, + GlDropdown, + GlButton, + GlLink, + GlTooltipDirective as GlTooltip, +} from '@gitlab/ui'; +import { __ } from '~/locale'; +import { truncate } from '~/lib/utils/text_utility'; +import isLastDeployment from '../graphql/queries/is_last_deployment.query.graphql'; +import ExternalUrl from './environment_external_url.vue'; +import Actions from './environment_actions.vue'; +import StopComponent from './environment_stop.vue'; +import Rollback from './environment_rollback.vue'; +import Pin from './environment_pin.vue'; +import Monitoring from './environment_monitoring.vue'; +import Terminal from './environment_terminal_button.vue'; +import Delete from './environment_delete.vue'; +import Deployment from './deployment.vue'; + +export default { + components: { + GlCollapse, + GlDropdown, + GlButton, + GlLink, + Actions, + Deployment, + ExternalUrl, + StopComponent, + Rollback, + Monitoring, + Pin, + Terminal, + Delete, + }, + directives: { + GlTooltip, + }, + props: { + environment: { + required: true, + type: Object, + }, + inFolder: { + required: false, + default: false, + type: Boolean, + }, + }, + apollo: { + isLastDeployment: { + query: isLastDeployment, + variables() { + return { environment: this.environment }; + }, + }, + }, + i18n: { + collapse: __('Collapse'), + expand: __('Expand'), + }, + data() { + return { visible: false }; + }, + computed: { + icon() { + return this.visible ? 'angle-down' : 'angle-right'; + }, + externalUrl() { + return this.environment.externalUrl; + }, + name() { + return this.inFolder ? this.environment.nameWithoutType : this.environment.name; + }, + label() { + return this.visible ? this.$options.i18n.collapse : this.$options.i18n.expand; + }, + lastDeployment() { + return this.environment?.lastDeployment; + }, + upcomingDeployment() { + return this.environment?.upcomingDeployment; + }, + actions() { + if (!this.lastDeployment) { + return []; + } + const { manualActions = [], scheduledActions = [] } = this.lastDeployment; + const combinedActions = [...manualActions, ...scheduledActions]; + return combinedActions.map((action) => ({ + ...action, + })); + }, + canStop() { + return this.environment?.canStop; + }, + retryPath() { + return this.lastDeployment?.deployable?.retryPath; + }, + hasExtraActions() { + return Boolean( + this.retryPath || + this.canShowAutoStopDate || + this.metricsPath || + this.terminalPath || + this.canDeleteEnvironment, + ); + }, + canShowAutoStopDate() { + if (!this.environment?.autoStopAt) { + return false; + } + + const autoStopDate = new Date(this.environment?.autoStopAt); + const now = new Date(); + + return now < autoStopDate; + }, + autoStopPath() { + return this.environment?.cancelAutoStopPath ?? ''; + }, + metricsPath() { + return this.environment?.metricsPath ?? ''; + }, + terminalPath() { + return this.environment?.terminalPath ?? ''; + }, + canDeleteEnvironment() { + return Boolean(this.environment?.canDelete && this.environment?.deletePath); + }, + displayName() { + return truncate(this.name, 80); + }, + }, + methods: { + toggleCollapse() { + this.visible = !this.visible; + }, + }, + deploymentClasses: [ + 'gl-border-gray-100', + 'gl-border-t-solid', + 'gl-border-1', + 'gl-py-5', + 'gl-pl-7', + 'gl-bg-gray-10', + ], +}; +</script> +<template> + <div> + <div + class="gl-px-3 gl-pt-3 gl-pb-5 gl-display-flex gl-justify-content-space-between gl-align-items-center" + > + <div + :class="{ 'gl-ml-7': inFolder }" + class="gl-min-w-0 gl-mr-4 gl-display-flex gl-align-items-center" + > + <gl-button + class="gl-mr-4 gl-min-w-fit-content" + :icon="icon" + :aria-label="label" + size="small" + category="tertiary" + @click="toggleCollapse" + /> + <gl-link + v-gl-tooltip + :href="environment.environmentPath" + class="gl-text-blue-500 gl-text-truncate" + :class="{ 'gl-font-weight-bold': visible }" + :title="name" + > + {{ displayName }} + </gl-link> + </div> + <div> + <div class="btn-group table-action-buttons" role="group"> + <external-url + v-if="externalUrl" + :external-url="externalUrl" + data-track-action="click_button" + data-track-label="environment_url" + /> + + <actions + v-if="actions.length > 0" + :actions="actions" + data-track-action="click_dropdown" + data-track-label="environment_actions" + graphql + /> + + <stop-component + v-if="canStop" + :environment="environment" + class="gl-z-index-2" + data-track-action="click_button" + data-track-label="environment_stop" + graphql + /> + + <gl-dropdown + v-if="hasExtraActions" + icon="ellipsis_v" + text-sr-only + :text="__('More actions')" + category="secondary" + no-caret + right + > + <rollback + v-if="retryPath" + :environment="environment" + :is-last-deployment="isLastDeployment" + :retry-url="retryPath" + graphql + data-track-action="click_button" + data-track-label="environment_rollback" + /> + + <pin + v-if="canShowAutoStopDate" + :auto-stop-url="autoStopPath" + data-track-action="click_button" + data-track-label="environment_pin" + /> + + <monitoring + v-if="metricsPath" + :monitoring-url="metricsPath" + data-track-action="click_button" + data-track-label="environment_monitoring" + /> + + <terminal + v-if="terminalPath" + :terminal-path="terminalPath" + data-track-action="click_button" + data-track-label="environment_terminal" + /> + + <delete + v-if="canDeleteEnvironment" + :environment="environment" + data-track-action="click_button" + data-track-label="environment_delete" + graphql + /> + </gl-dropdown> + </div> + </div> + </div> + <gl-collapse :visible="visible"> + <div v-if="lastDeployment" :class="$options.deploymentClasses"> + <deployment :deployment="lastDeployment" :class="{ 'gl-ml-7': inFolder }" /> + </div> + <div v-if="upcomingDeployment" :class="$options.deploymentClasses"> + <deployment :deployment="upcomingDeployment" :class="{ 'gl-ml-7': inFolder }" /> + </div> + </gl-collapse> + </div> +</template> diff --git a/app/assets/javascripts/environments/components/new_environments_app.vue b/app/assets/javascripts/environments/components/new_environments_app.vue index 8d94e7021ca..cb36e226d0e 100644 --- a/app/assets/javascripts/environments/components/new_environments_app.vue +++ b/app/assets/javascripts/environments/components/new_environments_app.vue @@ -5,13 +5,24 @@ import { updateHistory, setUrlParams, queryToObject } from '~/lib/utils/url_util import environmentAppQuery from '../graphql/queries/environment_app.query.graphql'; import pollIntervalQuery from '../graphql/queries/poll_interval.query.graphql'; import pageInfoQuery from '../graphql/queries/page_info.query.graphql'; +import environmentToDeleteQuery from '../graphql/queries/environment_to_delete.query.graphql'; +import environmentToRollbackQuery from '../graphql/queries/environment_to_rollback.query.graphql'; +import environmentToStopQuery from '../graphql/queries/environment_to_stop.query.graphql'; import EnvironmentFolder from './new_environment_folder.vue'; import EnableReviewAppModal from './enable_review_app_modal.vue'; +import StopEnvironmentModal from './stop_environment_modal.vue'; +import EnvironmentItem from './new_environment_item.vue'; +import ConfirmRollbackModal from './confirm_rollback_modal.vue'; +import DeleteEnvironmentModal from './delete_environment_modal.vue'; export default { components: { + DeleteEnvironmentModal, + ConfirmRollbackModal, EnvironmentFolder, EnableReviewAppModal, + EnvironmentItem, + StopEnvironmentModal, GlBadge, GlPagination, GlTab, @@ -36,6 +47,15 @@ export default { pageInfo: { query: pageInfoQuery, }, + environmentToDelete: { + query: environmentToDeleteQuery, + }, + environmentToRollback: { + query: environmentToRollbackQuery, + }, + environmentToStop: { + query: environmentToStopQuery, + }, }, inject: ['newEnvironmentPath', 'canCreateEnvironment'], i18n: { @@ -57,6 +77,9 @@ export default { isReviewAppModalVisible: false, page: parseInt(page, 10), scope, + environmentToDelete: {}, + environmentToRollback: {}, + environmentToStop: {}, }; }, computed: { @@ -64,7 +87,10 @@ export default { return this.environmentApp?.reviewApp?.canSetupReviewApp; }, folders() { - return this.environmentApp?.environments.filter((e) => e.size > 1) ?? []; + return this.environmentApp?.environments?.filter((e) => e.size > 1) ?? []; + }, + environments() { + return this.environmentApp?.environments?.filter((e) => e.size === 1) ?? []; }, availableCount() { return this.environmentApp?.availableCount; @@ -119,7 +145,7 @@ export default { }, setScope(scope) { this.scope = scope; - this.resetPolling(); + this.moveToPage(1); }, movePage(direction) { this.moveToPage(this.pageInfo[`${direction}Page`]); @@ -157,6 +183,9 @@ export default { :modal-id="$options.modalId" data-testid="enable-review-app-modal" /> + <delete-environment-modal :environment="environmentToDelete" graphql /> + <stop-environment-modal :environment="environmentToStop" graphql /> + <confirm-rollback-modal :environment="environmentToRollback" graphql /> <gl-tabs :action-secondary="addEnvironment" :action-primary="openReviewAppModal" @@ -187,6 +216,12 @@ export default { class="gl-mb-3" :nested-environment="folder" /> + <environment-item + v-for="environment in environments" + :key="environment.name" + class="gl-mb-3 gl-border-gray-100 gl-border-1 gl-border-b-solid" + :environment="environment.latest" + /> <gl-pagination align="center" :total-items="totalItems" diff --git a/app/assets/javascripts/environments/components/stop_environment_modal.vue b/app/assets/javascripts/environments/components/stop_environment_modal.vue index 7a9233048a9..162ad598c8c 100644 --- a/app/assets/javascripts/environments/components/stop_environment_modal.vue +++ b/app/assets/javascripts/environments/components/stop_environment_modal.vue @@ -2,6 +2,7 @@ import { GlSprintf, GlTooltipDirective, GlModal } from '@gitlab/ui'; import { __, s__ } from '~/locale'; import eventHub from '../event_hub'; +import stopEnvironmentMutation from '../graphql/mutations/stop_environment.mutation.graphql'; export default { id: 'stop-environment-modal', @@ -21,6 +22,11 @@ export default { type: Object, required: true, }, + graphql: { + type: Boolean, + required: false, + default: false, + }, }, computed: { @@ -39,7 +45,14 @@ export default { methods: { onSubmit() { - eventHub.$emit('stopEnvironment', this.environment); + if (this.graphql) { + this.$apollo.mutate({ + mutation: stopEnvironmentMutation, + variables: { environment: this.environment }, + }); + } else { + eventHub.$emit('stopEnvironment', this.environment); + } }, }, }; diff --git a/app/assets/javascripts/environments/graphql/mutations/action.mutation.graphql b/app/assets/javascripts/environments/graphql/mutations/action.mutation.graphql new file mode 100644 index 00000000000..bc2c9b33367 --- /dev/null +++ b/app/assets/javascripts/environments/graphql/mutations/action.mutation.graphql @@ -0,0 +1,5 @@ +mutation action($action: LocalAction) { + action(action: $action) @client { + errors + } +} diff --git a/app/assets/javascripts/environments/graphql/mutations/set_environment_to_stop.mutation.graphql b/app/assets/javascripts/environments/graphql/mutations/set_environment_to_stop.mutation.graphql new file mode 100644 index 00000000000..2891f4c5101 --- /dev/null +++ b/app/assets/javascripts/environments/graphql/mutations/set_environment_to_stop.mutation.graphql @@ -0,0 +1,3 @@ +mutation SetEnvironmentToStop($environment: LocalEnvironmentInput) { + setEnvironmentToStop(environment: $environment) @client +} diff --git a/app/assets/javascripts/environments/graphql/queries/environment_to_stop.query.graphql b/app/assets/javascripts/environments/graphql/queries/environment_to_stop.query.graphql new file mode 100644 index 00000000000..128846145e8 --- /dev/null +++ b/app/assets/javascripts/environments/graphql/queries/environment_to_stop.query.graphql @@ -0,0 +1,3 @@ +query environmentToStop { + environmentToStop @client +} diff --git a/app/assets/javascripts/environments/graphql/queries/is_environment_stopping.query.graphql b/app/assets/javascripts/environments/graphql/queries/is_environment_stopping.query.graphql new file mode 100644 index 00000000000..ad05e252e6f --- /dev/null +++ b/app/assets/javascripts/environments/graphql/queries/is_environment_stopping.query.graphql @@ -0,0 +1,3 @@ +query isEnvironmentStopping($environment: LocalEnvironment) { + isEnvironmentStopping(environment: $environment) @client +} diff --git a/app/assets/javascripts/environments/graphql/queries/is_last_deployment.query.graphql b/app/assets/javascripts/environments/graphql/queries/is_last_deployment.query.graphql new file mode 100644 index 00000000000..5eda2f18567 --- /dev/null +++ b/app/assets/javascripts/environments/graphql/queries/is_last_deployment.query.graphql @@ -0,0 +1,3 @@ +query isLastDeployment($environment: LocalEnvironment) { + isLastDeployment(environment: $environment) @client +} diff --git a/app/assets/javascripts/environments/graphql/resolvers.js b/app/assets/javascripts/environments/graphql/resolvers.js index 9ebbc0ad1f8..812fa0c81f0 100644 --- a/app/assets/javascripts/environments/graphql/resolvers.js +++ b/app/assets/javascripts/environments/graphql/resolvers.js @@ -8,6 +8,7 @@ import { import pollIntervalQuery from './queries/poll_interval.query.graphql'; import environmentToRollbackQuery from './queries/environment_to_rollback.query.graphql'; +import environmentToStopQuery from './queries/environment_to_stop.query.graphql'; import environmentToDeleteQuery from './queries/environment_to_delete.query.graphql'; import pageInfoQuery from './queries/page_info.query.graphql'; @@ -65,8 +66,7 @@ export const resolvers = (endpoint) => ({ })); }, isLastDeployment(_, { environment }) { - // eslint-disable-next-line @gitlab/require-i18n-strings - return environment?.lastDeployment?.['last?']; + return environment?.lastDeployment?.isLast; }, }, Mutation: { @@ -108,6 +108,20 @@ export const resolvers = (endpoint) => ({ ]); }); }, + setEnvironmentToStop(_, { environment }, { client }) { + client.writeQuery({ + query: environmentToStopQuery, + data: { environmentToStop: environment }, + }); + }, + action(_, { action: { playPath } }) { + return axios + .post(playPath) + .then(() => buildErrors()) + .catch(() => + buildErrors([s__('Environments|An error occurred while making the request.')]), + ); + }, setEnvironmentToDelete(_, { environment }, { client }) { client.writeQuery({ query: environmentToDeleteQuery, diff --git a/app/assets/javascripts/environments/graphql/typedefs.graphql b/app/assets/javascripts/environments/graphql/typedefs.graphql index 4a3abb0e89f..c02f6b2838a 100644 --- a/app/assets/javascripts/environments/graphql/typedefs.graphql +++ b/app/assets/javascripts/environments/graphql/typedefs.graphql @@ -68,7 +68,9 @@ extend type Query { environmentToDelete: LocalEnvironment pageInfo: LocalPageInfo environmentToRollback: LocalEnvironment - isLastDeployment: Boolean + environmentToStop: LocalEnvironment + isEnvironmentStopping(environment: LocalEnvironmentInput): Boolean + isLastDeployment(environment: LocalEnvironmentInput): Boolean } extend type Mutation { @@ -78,4 +80,6 @@ extend type Mutation { cancelAutoStop(environment: LocalEnvironmentInput): LocalErrors setEnvironmentToDelete(environment: LocalEnvironmentInput): LocalErrors setEnvironmentToRollback(environment: LocalEnvironmentInput): LocalErrors + setEnvironmentToStop(environment: LocalEnvironmentInput): LocalErrors + action(environment: LocalEnvironmentInput): LocalErrors } diff --git a/app/assets/javascripts/experimental_flags.js b/app/assets/javascripts/experimental_flags.js deleted file mode 100644 index 1d60847147b..00000000000 --- a/app/assets/javascripts/experimental_flags.js +++ /dev/null @@ -1,15 +0,0 @@ -import $ from 'jquery'; -import Cookies from 'js-cookie'; - -export default () => { - $('.js-experiment-feature-toggle').on('change', (e) => { - const el = e.target; - - Cookies.set(el.name, el.value, { - expires: 365 * 10, - }); - - document.body.scrollTop = 0; - window.location.reload(); - }); -}; diff --git a/app/assets/javascripts/flash.js b/app/assets/javascripts/flash.js index f0ef55f73eb..d9c2e55cffe 100644 --- a/app/assets/javascripts/flash.js +++ b/app/assets/javascripts/flash.js @@ -1,5 +1,8 @@ import * as Sentry from '@sentry/browser'; import { escape } from 'lodash'; +import Vue from 'vue'; +import { GlAlert } from '@gitlab/ui'; +import { __ } from '~/locale'; import { spriteIcon } from './lib/utils/common_utils'; const FLASH_TYPES = { @@ -9,6 +12,12 @@ const FLASH_TYPES = { WARNING: 'warning', }; +const VARIANT_SUCCESS = 'success'; +const VARIANT_WARNING = 'warning'; +const VARIANT_DANGER = 'danger'; +const VARIANT_INFO = 'info'; +const VARIANT_TIP = 'tip'; + const FLASH_CLOSED_EVENT = 'flashClosed'; const getCloseEl = (flashEl) => { @@ -68,6 +77,126 @@ const addDismissFlashClickListener = (flashEl, fadeTransition) => { getCloseEl(flashEl)?.addEventListener('click', () => hideFlash(flashEl, fadeTransition)); }; +/** + * Render an alert at the top of the page, or, optionally an + * arbitrary existing container. + * + * This alert is always dismissible. + * + * Usage: + * + * 1. Render a new alert + * + * import { createAlert, ALERT_VARIANTS } from '~/flash'; + * + * createAlert({ message: 'My error message' }); + * createAlert({ message: 'My warning message', variant: ALERT_VARIANTS.WARNING }); + * + * 2. Dismiss this alert programmatically + * + * const alert = createAlert({ message: 'Message' }); + * + * // ... + * + * alert.dismiss(); + * + * 3. Respond to the alert being dismissed + * + * createAlert({ message: 'Message', onDismiss: () => { ... }}); + * + * @param {Object} options Options to control the flash message + * @param {String} options.message Alert message text + * @param {String?} options.variant Which GlAlert variant to use, should be VARIANT_SUCCESS, VARIANT_WARNING, VARIANT_DANGER, VARIANT_INFO or VARIANT_TIP. Defaults to VARIANT_DANGER. + * @param {Object?} options.parent Reference to parent element under which alert needs to appear. Defaults to `document`. + * @param {Function?} options.onDismiss Handler to call when this alert is dismissed. + * @param {Object?} options.containerSelector Selector for the container of the alert + * @param {Object?} options.primaryButton Object describing primary button of alert + * @param {String?} link Href of primary button + * @param {String?} text Text of primary button + * @param {Function?} clickHandler Handler to call when primary button is clicked on. The click event is sent as an argument. + * @param {Object?} options.secondaryButton Object describing secondary button of alert + * @param {String?} link Href of secondary button + * @param {String?} text Text of secondary button + * @param {Function?} clickHandler Handler to call when secondary button is clicked on. The click event is sent as an argument. + * @param {Boolean?} options.captureError Whether to send error to Sentry + * @param {Object} options.error Error to be captured in Sentry + * @returns + */ +const createAlert = function createAlert({ + message, + variant = VARIANT_DANGER, + parent = document, + containerSelector = '.flash-container', + primaryButton = null, + secondaryButton = null, + onDismiss = null, + captureError = false, + error = null, +}) { + if (captureError && error) Sentry.captureException(error); + + const alertContainer = parent.querySelector(containerSelector); + if (!alertContainer) return null; + + const el = document.createElement('div'); + alertContainer.appendChild(el); + + return new Vue({ + el, + components: { + GlAlert, + }, + methods: { + /** + * Public method to dismiss this alert and removes + * this Vue instance. + */ + dismiss() { + if (onDismiss) { + onDismiss(); + } + this.$destroy(); + this.$el.parentNode.removeChild(this.$el); + }, + }, + render(h) { + const on = {}; + + on.dismiss = () => { + this.dismiss(); + }; + + if (primaryButton?.clickHandler) { + on.primaryAction = (e) => { + primaryButton.clickHandler(e); + }; + } + if (secondaryButton?.clickHandler) { + on.secondaryAction = (e) => { + secondaryButton.clickHandler(e); + }; + } + + return h( + GlAlert, + { + props: { + dismissible: true, + dismissLabel: __('Dismiss'), + variant, + primaryButtonLink: primaryButton?.link, + primaryButtonText: primaryButton?.text, + secondaryButtonLink: secondaryButton?.link, + secondaryButtonText: secondaryButton?.text, + }, + on, + }, + message, + ); + }, + }); +}; + /* * Flash banner supports different types of Flash configurations * along with ability to provide actionConfig which can be used to show @@ -82,8 +211,8 @@ const addDismissFlashClickListener = (flashEl, fadeTransition) => { * @param {String} title Title of action * @param {Function} clickHandler Method to call when action is clicked on * @param {Boolean} options.fadeTransition Boolean to determine whether to fade the alert out - * @param {Boolean} options.captureError Boolean to determine whether to send error to sentry - * @param {Object} options.error Error to be captured in sentry + * @param {Boolean} options.captureError Boolean to determine whether to send error to Sentry + * @param {Object} options.error Error to be captured in Sentry */ const createFlash = function createFlash({ message, @@ -134,4 +263,10 @@ export { addDismissFlashClickListener, FLASH_TYPES, FLASH_CLOSED_EVENT, + createAlert, + VARIANT_SUCCESS, + VARIANT_WARNING, + VARIANT_DANGER, + VARIANT_INFO, + VARIANT_TIP, }; diff --git a/app/assets/javascripts/gitlab_version_check.js b/app/assets/javascripts/gitlab_version_check.js new file mode 100644 index 00000000000..2892aded7c5 --- /dev/null +++ b/app/assets/javascripts/gitlab_version_check.js @@ -0,0 +1,20 @@ +import Vue from 'vue'; +import GitlabVersionCheck from '~/vue_shared/components/gitlab_version_check.vue'; + +const mountGitlabVersionCheck = (el) => { + const { size } = el.dataset; + + return new Vue({ + el, + render(createElement) { + return createElement(GitlabVersionCheck, { + props: { + size, + }, + }); + }, + }); +}; + +export default () => + [...document.querySelectorAll('.js-gitlab-version-check')].map(mountGitlabVersionCheck); diff --git a/app/assets/javascripts/google_cloud/components/deployments_service_table.vue b/app/assets/javascripts/google_cloud/components/deployments_service_table.vue new file mode 100644 index 00000000000..7d27d7cf6b2 --- /dev/null +++ b/app/assets/javascripts/google_cloud/components/deployments_service_table.vue @@ -0,0 +1,61 @@ +<script> +import { GlButton, GlTable } from '@gitlab/ui'; +import { __ } from '~/locale'; + +const i18n = { + cloudRun: __('Cloud Run'), + cloudRunDescription: __('Deploy container based web apps on Google managed clusters'), + cloudStorage: __('Cloud Storage'), + cloudStorageDescription: __('Deploy static assets and resources to Google managed CDN'), + deployments: __('Deployments'), + deploymentsDescription: __( + 'Configure pipelines to deploy web apps, backend services, APIs and static resources to Google Cloud', + ), + configureViaMergeRequest: __('Configure via Merge Request'), + service: __('Service'), + description: __('Description'), +}; + +export default { + components: { GlButton, GlTable }, + props: { + cloudRunUrl: { + type: String, + required: true, + }, + cloudStorageUrl: { + type: String, + required: true, + }, + }, + fields: [ + { key: 'title', label: i18n.service }, + { key: 'description', label: i18n.description }, + { key: 'action', label: '' }, + ], + items: [ + { + title: i18n.cloudRun, + description: i18n.cloudRunDescription, + action: { title: i18n.configureViaMergeRequest, disabled: true }, + }, + { + title: i18n.cloudStorage, + description: i18n.cloudStorageDescription, + action: { title: i18n.configureViaMergeRequest, disabled: true }, + }, + ], + i18n, +}; +</script> +<template> + <div class="gl-mx-3"> + <h2 class="gl-font-size-h2">{{ $options.i18n.deployments }}</h2> + <p>{{ $options.i18n.deploymentsDescription }}</p> + <gl-table :fields="$options.fields" :items="$options.items"> + <template #cell(action)="{ value }"> + <gl-button :disabled="value.disabled">{{ value.title }}</gl-button> + </template> + </gl-table> + </div> +</template> diff --git a/app/assets/javascripts/google_cloud/components/home.vue b/app/assets/javascripts/google_cloud/components/home.vue index 05f39de66ee..8ef110dcf22 100644 --- a/app/assets/javascripts/google_cloud/components/home.vue +++ b/app/assets/javascripts/google_cloud/components/home.vue @@ -1,11 +1,13 @@ <script> import { GlTabs, GlTab } from '@gitlab/ui'; +import DeploymentsServiceTable from './deployments_service_table.vue'; import ServiceAccountsList from './service_accounts_list.vue'; export default { components: { GlTabs, GlTab, + DeploymentsServiceTable, ServiceAccountsList, }, props: { @@ -21,6 +23,14 @@ export default { type: String, required: true, }, + deploymentsCloudRunUrl: { + type: String, + required: true, + }, + deploymentsCloudStorageUrl: { + type: String, + required: true, + }, }, }; </script> @@ -35,7 +45,12 @@ export default { :empty-illustration-url="emptyIllustrationUrl" /> </gl-tab> - <gl-tab :title="__('Deployments')" disabled /> + <gl-tab :title="__('Deployments')"> + <deployments-service-table + :cloud-run-url="deploymentsCloudRunUrl" + :cloud-storage-url="deploymentsCloudStorageUrl" + /> + </gl-tab> <gl-tab :title="__('Services')" disabled /> </gl-tabs> </template> diff --git a/app/assets/javascripts/google_tag_manager/index.js b/app/assets/javascripts/google_tag_manager/index.js new file mode 100644 index 00000000000..ab80e15c2ec --- /dev/null +++ b/app/assets/javascripts/google_tag_manager/index.js @@ -0,0 +1,122 @@ +import { logError } from '~/lib/logger'; + +const isSupported = () => Boolean(window.dataLayer) && gon.features?.gitlabGtmDatalayer; + +const pushEvent = (event, args = {}) => { + if (!window.dataLayer) { + return; + } + + try { + window.dataLayer.push({ + event, + ...args, + }); + } catch (e) { + logError('Unexpected error while pushing to dataLayer', e); + } +}; + +const pushAccountSubmit = (accountType, accountMethod) => + pushEvent('accountSubmit', { accountType, accountMethod }); + +const trackFormSubmission = (accountType) => { + const form = document.getElementById('new_new_user'); + form.addEventListener('submit', () => { + pushAccountSubmit(accountType, 'form'); + }); +}; + +const trackOmniAuthSubmission = (accountType) => { + const links = document.querySelectorAll('.js-oauth-login'); + links.forEach((link) => { + const { provider } = link.dataset; + link.addEventListener('click', () => { + pushAccountSubmit(accountType, provider); + }); + }); +}; + +export const trackFreeTrialAccountSubmissions = () => { + if (!isSupported()) { + return; + } + + trackFormSubmission('freeThirtyDayTrial'); + trackOmniAuthSubmission('freeThirtyDayTrial'); +}; + +export const trackNewRegistrations = () => { + if (!isSupported()) { + return; + } + + trackFormSubmission('standardSignUp'); + trackOmniAuthSubmission('standardSignUp'); +}; + +export const trackSaasTrialSubmit = () => { + if (!isSupported()) { + return; + } + + pushEvent('saasTrialSubmit'); +}; + +export const trackSaasTrialSkip = () => { + if (!isSupported()) { + return; + } + + const skipLink = document.querySelector('.js-skip-trial'); + skipLink.addEventListener('click', () => { + pushEvent('saasTrialSkip'); + }); +}; + +export const trackSaasTrialGroup = () => { + if (!isSupported()) { + return; + } + + const form = document.querySelector('.js-saas-trial-group'); + form.addEventListener('submit', () => { + pushEvent('saasTrialGroup'); + }); +}; + +export const trackSaasTrialProject = () => { + if (!isSupported()) { + return; + } + + const form = document.getElementById('new_project'); + form.addEventListener('submit', () => { + pushEvent('saasTrialProject'); + }); +}; + +export const trackSaasTrialProjectImport = () => { + if (!isSupported()) { + return; + } + + const importButtons = document.querySelectorAll('.js-import-project-btn'); + importButtons.forEach((button) => { + button.addEventListener('click', () => { + const { platform } = button.dataset; + pushEvent('saasTrialProjectImport', { saasProjectImport: platform }); + }); + }); +}; + +export const trackSaasTrialGetStarted = () => { + if (!isSupported()) { + return; + } + + const getStartedButton = document.querySelector('.js-get-started-btn'); + getStartedButton.addEventListener('click', () => { + pushEvent('saasTrialGetStarted'); + }); +}; diff --git a/app/assets/javascripts/graphql_shared/fragment_types/vulnerability_location_types.js b/app/assets/javascripts/graphql_shared/fragment_types/vulnerability_location_types.js new file mode 100644 index 00000000000..30888e20a46 --- /dev/null +++ b/app/assets/javascripts/graphql_shared/fragment_types/vulnerability_location_types.js @@ -0,0 +1,17 @@ +export const vulnerabilityLocationTypes = { + __schema: { + types: [ + { + kind: 'UNION', + name: 'VulnerabilityLocation', + possibleTypes: [ + { name: 'VulnerabilityLocationContainerScanning' }, + { name: 'VulnerabilityLocationDast' }, + { name: 'VulnerabilityLocationDependencyScanning' }, + { name: 'VulnerabilityLocationSast' }, + { name: 'VulnerabilityLocationSecretDetection' }, + ], + }, + ], + }, +}; diff --git a/app/assets/javascripts/graphql_shared/fragments/issue.fragment.graphql b/app/assets/javascripts/graphql_shared/fragments/issue.fragment.graphql new file mode 100644 index 00000000000..85a28fe1f71 --- /dev/null +++ b/app/assets/javascripts/graphql_shared/fragments/issue.fragment.graphql @@ -0,0 +1,37 @@ +#import "~/graphql_shared/fragments/milestone.fragment.graphql" +#import "~/graphql_shared/fragments/user.fragment.graphql" + +fragment IssueNode on Issue { + id + iid + title + referencePath: reference(full: true) + dueDate + timeEstimate + totalTimeSpent + humanTimeEstimate + humanTotalTimeSpent + emailsDisabled + confidential + hidden + webUrl + relativePosition + type + severity + milestone { + ...MilestoneFragment + } + assignees { + nodes { + ...User + } + } + labels { + nodes { + id + title + color + description + } + } +} diff --git a/app/assets/javascripts/group.js b/app/assets/javascripts/group.js index f255f8a084c..b6a6720e7a1 100644 --- a/app/assets/javascripts/group.js +++ b/app/assets/javascripts/group.js @@ -13,11 +13,8 @@ export default class Group { this.updateGroupPathSlugHandler = this.updateGroupPathSlug.bind(this); this.groupNames.forEach((groupName) => { - if (groupName.value === '') { - groupName.addEventListener('keyup', this.updateHandler); - - groupName.addEventListener('keyup', this.updateGroupPathSlugHandler); - } + groupName.addEventListener('keyup', this.updateHandler); + groupName.addEventListener('keyup', this.updateGroupPathSlugHandler); }); this.groupPaths.forEach((groupPath) => { diff --git a/app/assets/javascripts/groups/components/item_stats.vue b/app/assets/javascripts/groups/components/item_stats.vue index 46e9d2bec99..c24eeed9f03 100644 --- a/app/assets/javascripts/groups/components/item_stats.vue +++ b/app/assets/javascripts/groups/components/item_stats.vue @@ -83,7 +83,7 @@ export default { <gl-badge variant="warning">{{ __('pending deletion') }}</gl-badge> </div> <div v-if="isProject" class="last-updated"> - <time-ago-tooltip :time="item.updatedAt" tooltip-placement="bottom" /> + <time-ago-tooltip :time="item.lastActivityAt" tooltip-placement="bottom" /> </div> </div> </template> diff --git a/app/assets/javascripts/groups_list.js b/app/assets/javascripts/groups/groups_list.js index 56a8cbf6d03..866dd7a61ff 100644 --- a/app/assets/javascripts/groups_list.js +++ b/app/assets/javascripts/groups/groups_list.js @@ -1,4 +1,4 @@ -import FilterableList from './filterable_list'; +import FilterableList from '~/filterable_list'; /** * Makes search request for groups when user types a value in the search input. diff --git a/app/assets/javascripts/landing.js b/app/assets/javascripts/groups/landing.js index bfb4d9ce67b..bfb4d9ce67b 100644 --- a/app/assets/javascripts/landing.js +++ b/app/assets/javascripts/groups/landing.js diff --git a/app/assets/javascripts/groups/store/groups_store.js b/app/assets/javascripts/groups/store/groups_store.js index 93fbd8be47d..d3600bd223a 100644 --- a/app/assets/javascripts/groups/store/groups_store.js +++ b/app/assets/javascripts/groups/store/groups_store.js @@ -98,6 +98,9 @@ export default class GroupsStore { updatedAt: rawGroupItem.updated_at, pendingRemoval: rawGroupItem.marked_for_deletion, microdata: this.showSchemaMarkup ? getGroupItemMicrodata(rawGroupItem) : {}, + lastActivityAt: rawGroupItem.last_activity_at + ? rawGroupItem.last_activity_at + : rawGroupItem.updated_at, }; if (!isEmpty(rawGroupItem.compliance_management_framework)) { diff --git a/app/assets/javascripts/transfer_edit.js b/app/assets/javascripts/groups/transfer_edit.js index bb15e11fd4c..bb15e11fd4c 100644 --- a/app/assets/javascripts/transfer_edit.js +++ b/app/assets/javascripts/groups/transfer_edit.js diff --git a/app/assets/javascripts/header_search/components/app.vue b/app/assets/javascripts/header_search/components/app.vue index edc6573a489..36fc48a2ba8 100644 --- a/app/assets/javascripts/header_search/components/app.vue +++ b/app/assets/javascripts/header_search/components/app.vue @@ -19,8 +19,7 @@ import HeaderSearchScopedItems from './header_search_scoped_items.vue'; export default { name: 'HeaderSearchApp', i18n: { - searchPlaceholder: s__('GlobalSearch|Search or jump to...'), - searchAria: s__('GlobalSearch|Search GitLab'), + searchGitlab: s__('GlobalSearch|Search GitLab'), searchInputDescribeByNoDropdown: s__( 'GlobalSearch|Type and press the enter key to submit search.', ), @@ -136,7 +135,7 @@ export default { <form v-outside="closeDropdown" role="search" - :aria-label="$options.i18n.searchAria" + :aria-label="$options.i18n.searchGitlab" class="header-search gl-relative" > <gl-search-box-by-type @@ -145,7 +144,7 @@ export default { role="searchbox" class="gl-z-index-1" autocomplete="off" - :placeholder="$options.i18n.searchPlaceholder" + :placeholder="$options.i18n.searchGitlab" :aria-activedescendant="currentFocusedId" :aria-describedby="$options.SEARCH_INPUT_DESCRIPTION" @focus="openDropdown" diff --git a/app/assets/javascripts/helpers/event_hub_factory.js b/app/assets/javascripts/helpers/event_hub_factory.js index 62af67d3ef3..ddfae7e9de3 100644 --- a/app/assets/javascripts/helpers/event_hub_factory.js +++ b/app/assets/javascripts/helpers/event_hub_factory.js @@ -1,16 +1,12 @@ /** * An event hub with a Vue instance like API * - * NOTE: There's an [issue open][4] to eventually remove this when some - * coupling in our codebase has been fixed. - * * NOTE: This is a derivative work from [mitt][1] v1.2.0 which is licensed by * [MIT License][2] © [Jason Miller][3] * * [1]: https://github.com/developit/mitt * [2]: https://opensource.org/licenses/MIT * [3]: https://jasonformat.com/ - * [4]: https://gitlab.com/gitlab-org/gitlab/-/issues/223864 */ class EventHub { constructor() { @@ -91,9 +87,6 @@ class EventHub { * - $once * - $emit * - * Please note, this was once implemented with `mitt`, but since then has been reverted - * because of some API issues. https://gitlab.com/gitlab-org/gitlab/-/merge_requests/35074 - * * We'd like to shy away from using a full fledged Vue instance from this in the future. */ export default () => { diff --git a/app/assets/javascripts/ide/components/jobs/stage.vue b/app/assets/javascripts/ide/components/jobs/stage.vue index 938385f0b81..796ca1349c5 100644 --- a/app/assets/javascripts/ide/components/jobs/stage.vue +++ b/app/assets/javascripts/ide/components/jobs/stage.vue @@ -1,5 +1,5 @@ <script> -import { GlLoadingIcon, GlIcon, GlTooltipDirective } from '@gitlab/ui'; +import { GlLoadingIcon, GlIcon, GlTooltipDirective, GlBadge } from '@gitlab/ui'; import CiIcon from '../../../vue_shared/components/ci_icon.vue'; import Item from './item.vue'; @@ -9,6 +9,7 @@ export default { }, components: { GlIcon, + GlBadge, CiIcon, Item, GlLoadingIcon, @@ -74,7 +75,7 @@ export default { {{ stage.name }} </strong> <div v-if="!stage.isLoading || stage.jobs.length" class="gl-mr-3 gl-ml-2"> - <span class="badge badge-pill"> {{ jobsCount }} </span> + <gl-badge>{{ jobsCount }}</gl-badge> </div> <gl-icon :name="collapseIcon" class="ide-stage-collapse-icon" /> </div> diff --git a/app/assets/javascripts/ide/stores/modules/pipelines/actions.js b/app/assets/javascripts/ide/stores/modules/pipelines/actions.js index 9cf8d5a360e..51872993f16 100644 --- a/app/assets/javascripts/ide/stores/modules/pipelines/actions.js +++ b/app/assets/javascripts/ide/stores/modules/pipelines/actions.js @@ -53,9 +53,15 @@ export const receiveLatestPipelineSuccess = ({ rootGetters, commit }, { pipeline commit(types.RECEIVE_LASTEST_PIPELINE_SUCCESS, lastCommitPipeline); }; -export const fetchLatestPipeline = ({ dispatch, rootGetters }) => { +export const fetchLatestPipeline = ({ commit, dispatch, rootGetters }) => { if (eTagPoll) return; + if (!rootGetters.lastCommit) { + commit(types.RECEIVE_LASTEST_PIPELINE_SUCCESS, null); + dispatch('stopPipelinePolling'); + return; + } + dispatch('requestLatestPipeline'); eTagPoll = new Poll({ diff --git a/app/assets/javascripts/init_confirm_danger.js b/app/assets/javascripts/init_confirm_danger.js index a8833a17467..98bfa48740c 100644 --- a/app/assets/javascripts/init_confirm_danger.js +++ b/app/assets/javascripts/init_confirm_danger.js @@ -1,4 +1,5 @@ import Vue from 'vue'; +import { pickBy } from 'lodash'; import { parseBoolean } from './lib/utils/common_utils'; import ConfirmDanger from './vue_shared/components/confirm_danger/confirm_danger.vue'; @@ -12,21 +13,32 @@ export default () => { buttonText, buttonClass = '', buttonTestid = null, + buttonVariant = null, confirmDangerMessage, + confirmButtonText = null, disabled = false, + additionalInformation, + htmlConfirmationMessage, } = el.dataset; return new Vue({ el, - provide: { - confirmDangerMessage, - }, + provide: pickBy( + { + htmlConfirmationMessage, + confirmDangerMessage, + additionalInformation, + confirmButtonText, + }, + (v) => Boolean(v), + ), render: (createElement) => createElement(ConfirmDanger, { props: { phrase, buttonText, buttonClass, + buttonVariant, buttonTestid, disabled: parseBoolean(disabled), }, diff --git a/app/assets/javascripts/integrations/constants.js b/app/assets/javascripts/integrations/constants.js index 84656bd41bb..b90658fb13c 100644 --- a/app/assets/javascripts/integrations/constants.js +++ b/app/assets/javascripts/integrations/constants.js @@ -23,3 +23,8 @@ export const I18N_FETCH_TEST_SETTINGS_DEFAULT_ERROR_MESSAGE = s__( ); export const I18N_DEFAULT_ERROR_MESSAGE = __('Something went wrong on our end.'); export const I18N_SUCCESSFUL_CONNECTION_MESSAGE = s__('Integrations|Connection successful.'); + +export const settingsTabTitle = __('Settings'); +export const overridesTabTitle = s__('Integrations|Projects using custom settings'); + +export const INTEGRATION_FORM_SELECTOR = '.js-integration-settings-form'; diff --git a/app/assets/javascripts/integrations/edit/components/dynamic_field.vue b/app/assets/javascripts/integrations/edit/components/dynamic_field.vue index 258cd1bf365..4b0579a5beb 100644 --- a/app/assets/javascripts/integrations/edit/components/dynamic_field.vue +++ b/app/assets/javascripts/integrations/edit/components/dynamic_field.vue @@ -153,7 +153,7 @@ export default { :invalid-feedback="__('This field is required.')" :state="valid" > - <template #description> + <template v-if="!isCheckbox" #description> <span v-safe-html:[$options.helpHtmlConfig]="help"></span> </template> @@ -161,6 +161,9 @@ export default { <input :name="fieldName" type="hidden" :value="model || false" /> <gl-form-checkbox :id="fieldId" v-model="model" :disabled="isInheriting"> {{ checkboxLabel || humanizedTitle }} + <template #help> + <span v-safe-html:[$options.helpHtmlConfig]="help"></span> + </template> </gl-form-checkbox> </template> <template v-else-if="isSelect"> diff --git a/app/assets/javascripts/integrations/edit/components/integration_form.vue b/app/assets/javascripts/integrations/edit/components/integration_form.vue index e570a468944..c3cc35adfa5 100644 --- a/app/assets/javascripts/integrations/edit/components/integration_form.vue +++ b/app/assets/javascripts/integrations/edit/components/integration_form.vue @@ -1,5 +1,6 @@ <script> -import { GlButton, GlModalDirective, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui'; +import { GlButton, GlModalDirective, GlSafeHtmlDirective as SafeHtml, GlForm } from '@gitlab/ui'; +import axios from 'axios'; import * as Sentry from '@sentry/browser'; import { mapState, mapActions, mapGetters } from 'vuex'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; @@ -8,8 +9,11 @@ import { I18N_FETCH_TEST_SETTINGS_DEFAULT_ERROR_MESSAGE, I18N_DEFAULT_ERROR_MESSAGE, I18N_SUCCESSFUL_CONNECTION_MESSAGE, + INTEGRATION_FORM_SELECTOR, integrationLevels, } from '~/integrations/constants'; +import { refreshCurrentPage } from '~/lib/utils/url_utility'; +import csrf from '~/lib/utils/csrf'; import eventHub from '../event_hub'; import { testIntegrationSettings } from '../api'; import ActiveCheckbox from './active_checkbox.vue'; @@ -33,6 +37,7 @@ export default { ConfirmationModal, ResetConfirmationModal, GlButton, + GlForm, }, directives: { GlModal: GlModalDirective, @@ -40,10 +45,6 @@ export default { }, mixins: [glFeatureFlagsMixin()], props: { - formSelector: { - type: String, - required: true, - }, helpHtml: { type: String, required: false, @@ -55,11 +56,12 @@ export default { integrationActive: false, isTesting: false, isSaving: false, + isResetting: false, }; }, computed: { ...mapGetters(['currentKey', 'propsSource']), - ...mapState(['defaultState', 'customState', 'override', 'isResetting']), + ...mapState(['defaultState', 'customState', 'override']), isEditable() { return this.propsSource.editable; }, @@ -81,10 +83,28 @@ export default { disableButtons() { return Boolean(this.isSaving || this.isResetting || this.isTesting); }, + useVueForm() { + return this.glFeatures?.vueIntegrationForm; + }, + formContainerProps() { + return this.useVueForm + ? { + ref: 'integrationForm', + method: 'post', + class: 'gl-mb-3 gl-show-field-errors integration-settings-form', + action: this.propsSource.formPath, + novalidate: !this.integrationActive, + } + : {}; + }, + formContainer() { + return this.useVueForm ? GlForm : 'div'; + }, }, mounted() { - // this form element is defined in Haml - this.form = document.querySelector(this.formSelector); + this.form = this.useVueForm + ? this.$refs.integrationForm.$el + : document.querySelector(INTEGRATION_FORM_SELECTOR); }, methods: { ...mapActions(['setOverride', 'fetchResetIntegration', 'requestJiraIssueTypes']), @@ -126,7 +146,20 @@ export default { }); }, onResetClick() { - this.fetchResetIntegration(); + this.isResetting = true; + + return axios + .post(this.propsSource.resetPath) + .then(() => { + refreshCurrentPage(); + }) + .catch((error) => { + this.$toast.show(I18N_DEFAULT_ERROR_MESSAGE); + Sentry.captureException(error); + }) + .finally(() => { + this.isResetting = false; + }); }, onRequestJiraIssueTypes() { this.requestJiraIssueTypes(this.getFormData()); @@ -136,7 +169,7 @@ export default { }, onToggleIntegrationState(integrationActive) { this.integrationActive = integrationActive; - if (!this.form) { + if (!this.form || this.useVueForm) { return; } @@ -153,11 +186,23 @@ export default { ADD_TAGS: ['use'], // to support icon SVGs FORBID_ATTR: [], // This is trusted input so we can override the default config to allow data-* attributes }, + csrf, }; </script> <template> - <div class="gl-mb-3"> + <component :is="formContainer" v-bind="formContainerProps"> + <template v-if="useVueForm"> + <input type="hidden" name="_method" value="put" /> + <input type="hidden" name="authenticity_token" :value="$options.csrf.token" /> + <input + type="hidden" + name="redirect_to" + :value="propsSource.redirectTo" + data-testid="redirect-to-field" + /> + </template> + <override-dropdown v-if="defaultState !== null" :inherit-from-id="defaultState.id" @@ -200,63 +245,71 @@ export default { v-bind="propsSource.jiraIssuesProps" @request-jira-issue-types="onRequestJiraIssueTypes" /> - <div v-if="isEditable" class="footer-block row-content-block"> - <template v-if="isInstanceOrGroupLevel"> + + <div + v-if="isEditable" + class="footer-block row-content-block gl-display-flex gl-justify-content-space-between" + > + <div> + <template v-if="isInstanceOrGroupLevel"> + <gl-button + v-gl-modal.confirmSaveIntegration + category="primary" + variant="confirm" + :loading="isSaving" + :disabled="disableButtons" + data-testid="save-button-instance-group" + data-qa-selector="save_changes_button" + > + {{ __('Save changes') }} + </gl-button> + <confirmation-modal @submit="onSaveClick" /> + </template> <gl-button - v-gl-modal.confirmSaveIntegration + v-else category="primary" variant="confirm" + type="submit" :loading="isSaving" :disabled="disableButtons" + data-testid="save-button" data-qa-selector="save_changes_button" + @click.prevent="onSaveClick" > {{ __('Save changes') }} </gl-button> - <confirmation-modal @submit="onSaveClick" /> - </template> - <gl-button - v-else - category="primary" - variant="confirm" - type="submit" - :loading="isSaving" - :disabled="disableButtons" - data-testid="save-button" - data-qa-selector="save_changes_button" - @click.prevent="onSaveClick" - > - {{ __('Save changes') }} - </gl-button> - <gl-button - v-if="showTestButton" - category="secondary" - variant="confirm" - :loading="isTesting" - :disabled="disableButtons" - data-testid="test-button" - @click.prevent="onTestClick" - > - {{ __('Test settings') }} - </gl-button> + <gl-button + v-if="showTestButton" + category="secondary" + variant="confirm" + :loading="isTesting" + :disabled="disableButtons" + data-testid="test-button" + @click.prevent="onTestClick" + > + {{ __('Test settings') }} + </gl-button> + + <gl-button :href="propsSource.cancelPath">{{ __('Cancel') }}</gl-button> + </div> <template v-if="showResetButton"> <gl-button v-gl-modal.confirmResetIntegration - category="secondary" - variant="confirm" + category="tertiary" + variant="danger" :loading="isResetting" :disabled="disableButtons" data-testid="reset-button" > {{ __('Reset') }} </gl-button> + <reset-confirmation-modal @reset="onResetClick" /> </template> - - <gl-button :href="propsSource.cancelPath">{{ __('Cancel') }}</gl-button> </div> </div> </div> - </div> + </component> </template> diff --git a/app/assets/javascripts/integrations/edit/components/reset_confirmation_modal.vue b/app/assets/javascripts/integrations/edit/components/reset_confirmation_modal.vue index 5a445235219..403bad3db11 100644 --- a/app/assets/javascripts/integrations/edit/components/reset_confirmation_modal.vue +++ b/app/assets/javascripts/integrations/edit/components/reset_confirmation_modal.vue @@ -11,7 +11,7 @@ export default { primaryProps() { return { text: __('Reset'), - attributes: [{ variant: 'warning' }, { category: 'primary' }], + attributes: [{ variant: 'danger' }, { category: 'primary' }], }; }, cancelProps() { diff --git a/app/assets/javascripts/integrations/edit/index.js b/app/assets/javascripts/integrations/edit/index.js index 9c9e3edbeb8..fbda8c1e3d0 100644 --- a/app/assets/javascripts/integrations/edit/index.js +++ b/app/assets/javascripts/integrations/edit/index.js @@ -28,9 +28,11 @@ function parseDatasetToProps(data) { cancelPath, testPath, resetPath, + formPath, vulnerabilitiesIssuetype, jiraIssueTransitionAutomatic, jiraIssueTransitionId, + redirectTo, ...booleanAttributes } = data; const { @@ -57,6 +59,7 @@ function parseDatasetToProps(data) { canTest, testPath, resetPath, + formPath, triggerFieldsProps: { initialTriggerCommit: commitEvents, initialTriggerMergeRequest: mergeRequestEvents, @@ -82,10 +85,11 @@ function parseDatasetToProps(data) { inheritFromId: parseInt(inheritFromId, 10), integrationLevel, id: parseInt(id, 10), + redirectTo, }; } -export default function initIntegrationSettingsForm(formSelector) { +export default function initIntegrationSettingsForm() { const customSettingsEl = document.querySelector('.js-vue-integration-settings'); const defaultSettingsEl = document.querySelector('.js-vue-default-integration-settings'); @@ -115,7 +119,6 @@ export default function initIntegrationSettingsForm(formSelector) { return createElement(IntegrationForm, { props: { helpHtml, - formSelector, }, }); }, diff --git a/app/assets/javascripts/integrations/edit/store/actions.js b/app/assets/javascripts/integrations/edit/store/actions.js index 97565a3a69c..1398b710d1d 100644 --- a/app/assets/javascripts/integrations/edit/store/actions.js +++ b/app/assets/javascripts/integrations/edit/store/actions.js @@ -1,5 +1,3 @@ -import axios from 'axios'; -import { refreshCurrentPage } from '~/lib/utils/url_utility'; import { VALIDATE_INTEGRATION_FORM_EVENT, I18N_FETCH_TEST_SETTINGS_DEFAULT_ERROR_MESSAGE, @@ -10,27 +8,6 @@ import eventHub from '../event_hub'; import * as types from './mutation_types'; export const setOverride = ({ commit }, override) => commit(types.SET_OVERRIDE, override); -export const setIsResetting = ({ commit }, isResetting) => - commit(types.SET_IS_RESETTING, isResetting); - -export const requestResetIntegration = ({ commit }) => { - commit(types.REQUEST_RESET_INTEGRATION); -}; -export const receiveResetIntegrationSuccess = () => { - refreshCurrentPage(); -}; -export const receiveResetIntegrationError = ({ commit }) => { - commit(types.RECEIVE_RESET_INTEGRATION_ERROR); -}; - -export const fetchResetIntegration = ({ dispatch, getters }) => { - dispatch('requestResetIntegration'); - - return axios - .post(getters.propsSource.resetPath, { params: { format: 'json' } }) - .then(() => dispatch('receiveResetIntegrationSuccess')) - .catch(() => dispatch('receiveResetIntegrationError')); -}; export const requestJiraIssueTypes = ({ commit, dispatch, getters }, formData) => { commit(types.SET_JIRA_ISSUE_TYPES_ERROR_MESSAGE, ''); diff --git a/app/assets/javascripts/integrations/edit/store/mutations.js b/app/assets/javascripts/integrations/edit/store/mutations.js index e7e312ce650..6ca644f8821 100644 --- a/app/assets/javascripts/integrations/edit/store/mutations.js +++ b/app/assets/javascripts/integrations/edit/store/mutations.js @@ -4,15 +4,6 @@ export default { [types.SET_OVERRIDE](state, override) { state.override = override; }, - [types.SET_IS_RESETTING](state, isResetting) { - state.isResetting = isResetting; - }, - [types.REQUEST_RESET_INTEGRATION](state) { - state.isResetting = true; - }, - [types.RECEIVE_RESET_INTEGRATION_ERROR](state) { - state.isResetting = false; - }, [types.SET_JIRA_ISSUE_TYPES](state, jiraIssueTypes) { state.jiraIssueTypes = jiraIssueTypes; }, diff --git a/app/assets/javascripts/integrations/edit/store/state.js b/app/assets/javascripts/integrations/edit/store/state.js index 3d40d1b90d5..088476b2b37 100644 --- a/app/assets/javascripts/integrations/edit/store/state.js +++ b/app/assets/javascripts/integrations/edit/store/state.js @@ -5,8 +5,6 @@ export default ({ defaultState = null, customState = {} } = {}) => { override, defaultState, customState, - isSaving: false, - isResetting: false, isLoadingJiraIssueTypes: false, loadingJiraIssueTypesErrorMessage: '', jiraIssueTypes: [], diff --git a/app/assets/javascripts/integrations/overrides/components/integration_overrides.vue b/app/assets/javascripts/integrations/overrides/components/integration_overrides.vue index 3fc554c5371..f2d3e6489ee 100644 --- a/app/assets/javascripts/integrations/overrides/components/integration_overrides.vue +++ b/app/assets/javascripts/integrations/overrides/components/integration_overrides.vue @@ -11,6 +11,8 @@ import { __, s__ } from '~/locale'; import ProjectAvatar from '~/vue_shared/components/project_avatar.vue'; import UrlSync from '~/vue_shared/components/url_sync.vue'; +import IntegrationTabs from './integration_tabs.vue'; + const DEFAULT_PAGE = 1; export default { @@ -23,6 +25,7 @@ export default { GlAlert, ProjectAvatar, UrlSync, + IntegrationTabs, }, props: { overridesPath: { @@ -46,6 +49,9 @@ export default { }; }, computed: { + overridesCount() { + return this.isLoading ? null : this.totalItems; + }, showPagination() { return this.totalItems > this.$options.DEFAULT_PER_PAGE && this.overrides.length > 0; }, @@ -100,6 +106,7 @@ export default { <template> <div> + <integration-tabs :project-overrides-count="overridesCount" /> <gl-alert v-if="errorMessage" variant="danger" :dismissible="false"> {{ errorMessage }} </gl-alert> diff --git a/app/assets/javascripts/integrations/overrides/components/integration_tabs.vue b/app/assets/javascripts/integrations/overrides/components/integration_tabs.vue new file mode 100644 index 00000000000..3f67c987231 --- /dev/null +++ b/app/assets/javascripts/integrations/overrides/components/integration_tabs.vue @@ -0,0 +1,52 @@ +<script> +import { GlBadge, GlNavItem, GlTabs, GlTab } from '@gitlab/ui'; +import { settingsTabTitle, overridesTabTitle } from '~/integrations/constants'; + +export default { + components: { + GlBadge, + GlNavItem, + GlTabs, + GlTab, + }, + inject: { + editPath: { + default: '', + }, + }, + props: { + projectOverridesCount: { + type: [Number, String], + required: false, + default: null, + }, + }, + i18n: { + settingsTabTitle, + overridesTabTitle, + }, +}; +</script> + +<template> + <gl-tabs> + <template #tabs-start> + <gl-nav-item role="presentation" link-classes="gl-tab-nav-item" :href="editPath">{{ + $options.i18n.settingsTabTitle + }}</gl-nav-item> + </template> + + <gl-tab active> + <template #title> + {{ $options.i18n.overridesTabTitle }} + <gl-badge + v-if="projectOverridesCount !== null" + variant="muted" + size="sm" + class="gl-tab-counter-badge" + >{{ projectOverridesCount }}</gl-badge + > + </template> + </gl-tab> + </gl-tabs> +</template> diff --git a/app/assets/javascripts/integrations/overrides/index.js b/app/assets/javascripts/integrations/overrides/index.js index 0f03b23ba21..f289a2d3d1a 100644 --- a/app/assets/javascripts/integrations/overrides/index.js +++ b/app/assets/javascripts/integrations/overrides/index.js @@ -8,10 +8,13 @@ export default () => { return null; } - const { overridesPath } = el.dataset; + const { editPath, overridesPath } = el.dataset; return new Vue({ el, + provide: { + editPath, + }, render(createElement) { return createElement(IntegrationOverrides, { props: { diff --git a/app/assets/javascripts/issuable/bulk_update_sidebar/index.js b/app/assets/javascripts/issuable/bulk_update_sidebar/index.js new file mode 100644 index 00000000000..dca606556d0 --- /dev/null +++ b/app/assets/javascripts/issuable/bulk_update_sidebar/index.js @@ -0,0 +1,28 @@ +import Vue from 'vue'; +import StatusSelect from './components/status_select.vue'; +import issuableBulkUpdateActions from './issuable_bulk_update_actions'; +import IssuableBulkUpdateSidebar from './issuable_bulk_update_sidebar'; + +export function initBulkUpdateSidebar(prefixId) { + const el = document.querySelector('.issues-bulk-update'); + + if (!el) { + return; + } + + issuableBulkUpdateActions.init({ prefixId }); + new IssuableBulkUpdateSidebar(); // eslint-disable-line no-new +} + +export function initIssueStatusSelect() { + const el = document.querySelector('.js-issue-status'); + + if (!el) { + return null; + } + + return new Vue({ + el, + render: (createElement) => createElement(StatusSelect), + }); +} diff --git a/app/assets/javascripts/issuable/bulk_update_sidebar/init_issue_status_select.js b/app/assets/javascripts/issuable/bulk_update_sidebar/init_issue_status_select.js deleted file mode 100644 index 43179a86d70..00000000000 --- a/app/assets/javascripts/issuable/bulk_update_sidebar/init_issue_status_select.js +++ /dev/null @@ -1,17 +0,0 @@ -import Vue from 'vue'; -import StatusSelect from './components/status_select.vue'; - -export default function initIssueStatusSelect() { - const el = document.querySelector('.js-issue-status'); - - if (!el) { - return null; - } - - return new Vue({ - el, - render(h) { - return h(StatusSelect); - }, - }); -} diff --git a/app/assets/javascripts/issuable/bulk_update_sidebar/issuable_bulk_update_sidebar.js b/app/assets/javascripts/issuable/bulk_update_sidebar/issuable_bulk_update_sidebar.js index 1eb3ffc9808..d46354e240a 100644 --- a/app/assets/javascripts/issuable/bulk_update_sidebar/issuable_bulk_update_sidebar.js +++ b/app/assets/javascripts/issuable/bulk_update_sidebar/issuable_bulk_update_sidebar.js @@ -1,12 +1,9 @@ /* eslint-disable class-methods-use-this, no-new */ import $ from 'jquery'; -import { property } from 'lodash'; - -import issuableEventHub from '~/issues_list/eventhub'; +import issuableEventHub from '~/issues/list/eventhub'; import LabelsSelect from '~/labels/labels_select'; import MilestoneSelect from '~/milestones/milestone_select'; -import initIssueStatusSelect from './init_issue_status_select'; import IssuableBulkUpdateActions from './issuable_bulk_update_actions'; import subscriptionSelect from './subscription_select'; @@ -17,8 +14,6 @@ const SIDEBAR_COLLAPSED_CLASS = 'right-sidebar-collapsed issuable-bulk-update-si export default class IssuableBulkUpdateSidebar { constructor() { - this.vueIssuablesListFeature = property(['gon', 'features', 'vueIssuablesList'])(window); - this.initDomElements(); this.bindEvents(); this.initDropdowns(); @@ -57,7 +52,6 @@ export default class IssuableBulkUpdateSidebar { initDropdowns() { new LabelsSelect(); new MilestoneSelect(); - initIssueStatusSelect(); subscriptionSelect(); if (IS_EE) { @@ -145,7 +139,7 @@ export default class IssuableBulkUpdateSidebar { } toggleCheckboxDisplay(show) { - this.$checkAllContainer.toggleClass(HIDDEN_CLASS, !show || this.vueIssuablesListFeature); + this.$checkAllContainer.toggleClass(HIDDEN_CLASS, !show); this.$issueChecks.toggleClass(HIDDEN_CLASS, !show); } diff --git a/app/assets/javascripts/issuable/bulk_update_sidebar/issuable_init_bulk_update_sidebar.js b/app/assets/javascripts/issuable/bulk_update_sidebar/issuable_init_bulk_update_sidebar.js deleted file mode 100644 index 179c2b83c6c..00000000000 --- a/app/assets/javascripts/issuable/bulk_update_sidebar/issuable_init_bulk_update_sidebar.js +++ /dev/null @@ -1,19 +0,0 @@ -import issuableBulkUpdateActions from './issuable_bulk_update_actions'; -import IssuableBulkUpdateSidebar from './issuable_bulk_update_sidebar'; - -export default { - bulkUpdateSidebar: null, - - init(prefixId) { - const bulkUpdateEl = document.querySelector('.issues-bulk-update'); - const alreadyInitialized = Boolean(this.bulkUpdateSidebar); - - if (bulkUpdateEl && !alreadyInitialized) { - issuableBulkUpdateActions.init({ prefixId }); - - this.bulkUpdateSidebar = new IssuableBulkUpdateSidebar(); - } - - return this.bulkUpdateSidebar; - }, -}; diff --git a/app/assets/javascripts/issuable/components/csv_import_modal.vue b/app/assets/javascripts/issuable/components/csv_import_modal.vue index b72abe14ee1..7e2cbf03801 100644 --- a/app/assets/javascripts/issuable/components/csv_import_modal.vue +++ b/app/assets/javascripts/issuable/components/csv_import_modal.vue @@ -60,7 +60,11 @@ export default { <form ref="form" :action="importCsvIssuesPath" enctype="multipart/form-data" method="post"> <input :value="$options.csrf.token" type="hidden" name="authenticity_token" /> <p>{{ $options.i18n.mainText }}</p> - <gl-form-group :label="$options.i18n.uploadCsvFileText" label-for="file"> + <gl-form-group + :label="$options.i18n.uploadCsvFileText" + class="gl-text-truncate" + label-for="file" + > <input id="file" type="file" name="file" accept=".csv,text/csv" /> </gl-form-group> <p class="text-secondary"> diff --git a/app/assets/javascripts/issuable/index.js b/app/assets/javascripts/issuable/index.js index 072422944f5..57bad5182e7 100644 --- a/app/assets/javascripts/issuable/index.js +++ b/app/assets/javascripts/issuable/index.js @@ -11,7 +11,9 @@ import IssuableHeaderWarnings from './components/issuable_header_warnings.vue'; export function initCsvImportExportButtons() { const el = document.querySelector('.js-csv-import-export-buttons'); - if (!el) return null; + if (!el) { + return null; + } const { showExportButton, @@ -42,23 +44,24 @@ export function initCsvImportExportButtons() { maxAttachmentSize, showLabel, }, - render(h) { - return h(CsvImportExportButtons, { + render: (createElement) => + createElement(CsvImportExportButtons, { props: { exportCsvPath, issuableCount: parseInt(issuableCount, 10), }, - }); - }, + }), }); } export function initIssuableByEmail() { - Vue.use(GlToast); - const el = document.querySelector('.js-issuable-by-email'); - if (!el) return null; + if (!el) { + return null; + } + + Vue.use(GlToast); const { initialEmail, @@ -79,9 +82,7 @@ export function initIssuableByEmail() { markdownHelpPath, resetPath, }, - render(h) { - return h(IssuableByEmail); - }, + render: (createElement) => createElement(IssuableByEmail), }); } @@ -89,7 +90,7 @@ export function initIssuableHeaderWarnings(store) { const el = document.getElementById('js-issuable-header-warnings'); if (!el) { - return false; + return null; } const { hidden } = el.dataset; @@ -98,18 +99,18 @@ export function initIssuableHeaderWarnings(store) { el, store, provide: { hidden: parseBoolean(hidden) }, - render(createElement) { - return createElement(IssuableHeaderWarnings); - }, + render: (createElement) => createElement(IssuableHeaderWarnings), }); } export function initIssuableSidebar() { - const sidebarOptEl = document.querySelector('.js-sidebar-options'); + const el = document.querySelector('.js-sidebar-options'); - if (!sidebarOptEl) return; + if (!el) { + return; + } - const sidebarOptions = getSidebarOptions(sidebarOptEl); + const sidebarOptions = getSidebarOptions(el); new IssuableContext(sidebarOptions.currentUser); // eslint-disable-line no-new Sidebar.initialize(); diff --git a/app/assets/javascripts/issues/constants.js b/app/assets/javascripts/issues/constants.js index b7b123dfd5f..4b9a42da178 100644 --- a/app/assets/javascripts/issues/constants.js +++ b/app/assets/javascripts/issues/constants.js @@ -19,6 +19,12 @@ export const IssuableType = { Alert: 'alert', }; +export const IssueType = { + Issue: 'issue', + Incident: 'incident', + TestCase: 'test_case', +}; + export const WorkspaceType = { project: 'project', group: 'group', diff --git a/app/assets/javascripts/create_merge_request_dropdown.js b/app/assets/javascripts/issues/create_merge_request_dropdown.js index ae6e6bf02e4..5d36396bc6e 100644 --- a/app/assets/javascripts/create_merge_request_dropdown.js +++ b/app/assets/javascripts/issues/create_merge_request_dropdown.js @@ -3,13 +3,13 @@ import { init as initConfidentialMergeRequest, isConfidentialIssue, canCreateConfidentialMergeRequest, -} from './confidential_merge_request'; -import confidentialMergeRequestState from './confidential_merge_request/state'; -import DropLab from './filtered_search/droplab/drop_lab_deprecated'; -import ISetter from './filtered_search/droplab/plugins/input_setter'; -import createFlash from './flash'; -import axios from './lib/utils/axios_utils'; -import { __, sprintf } from './locale'; +} from '~/confidential_merge_request'; +import confidentialMergeRequestState from '~/confidential_merge_request/state'; +import DropLab from '~/filtered_search/droplab/drop_lab_deprecated'; +import ISetter from '~/filtered_search/droplab/plugins/input_setter'; +import createFlash from '~/flash'; +import axios from '~/lib/utils/axios_utils'; +import { __, sprintf } from '~/locale'; // Todo: Remove this when fixing issue in input_setter plugin const InputSetter = { ...ISetter }; diff --git a/app/assets/javascripts/issues/form.js b/app/assets/javascripts/issues/form.js deleted file mode 100644 index 33371d065f9..00000000000 --- a/app/assets/javascripts/issues/form.js +++ /dev/null @@ -1,24 +0,0 @@ -/* eslint-disable no-new */ - -import $ from 'jquery'; -import IssuableForm from 'ee_else_ce/issuable/issuable_form'; -import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation'; -import GLForm from '~/gl_form'; -import { initTitleSuggestions, initTypePopover } from '~/issues/new'; -import LabelsSelect from '~/labels/labels_select'; -import MilestoneSelect from '~/milestones/milestone_select'; -import IssuableTemplateSelectors from '~/issuable/issuable_template_selectors'; - -export default () => { - new ShortcutsNavigation(); - new GLForm($('.issue-form')); - new IssuableForm($('.issue-form')); - new LabelsSelect(); - new MilestoneSelect(); - new IssuableTemplateSelectors({ - warnTemplateOverride: true, - }); - - initTitleSuggestions(); - initTypePopover(); -}; diff --git a/app/assets/javascripts/issues/index.js b/app/assets/javascripts/issues/index.js new file mode 100644 index 00000000000..2ee9ac2a682 --- /dev/null +++ b/app/assets/javascripts/issues/index.js @@ -0,0 +1,88 @@ +import $ from 'jquery'; +import IssuableForm from 'ee_else_ce/issuable/issuable_form'; +import loadAwardsHandler from '~/awards_handler'; +import ShortcutsIssuable from '~/behaviors/shortcuts/shortcuts_issuable'; +import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation'; +import GLForm from '~/gl_form'; +import { initIssuableHeaderWarnings, initIssuableSidebar } from '~/issuable'; +import IssuableTemplateSelectors from '~/issuable/issuable_template_selectors'; +import { IssueType } from '~/issues/constants'; +import Issue from '~/issues/issue'; +import { initTitleSuggestions, initTypePopover } from '~/issues/new'; +import { initRelatedMergeRequests } from '~/issues/related_merge_requests'; +import { + initHeaderActions, + initIncidentApp, + initIssueApp, + initSentryErrorStackTrace, +} from '~/issues/show'; +import { parseIssuableData } from '~/issues/show/utils/parse_data'; +import LabelsSelect from '~/labels/labels_select'; +import MilestoneSelect from '~/milestones/milestone_select'; +import initNotesApp from '~/notes'; +import { store } from '~/notes/stores'; +import ZenMode from '~/zen_mode'; +import FilteredSearchServiceDesk from './filtered_search_service_desk'; + +export function initFilteredSearchServiceDesk() { + if (document.querySelector('.filtered-search')) { + const supportBotData = JSON.parse( + document.querySelector('.js-service-desk-issues').dataset.supportBot, + ); + const filteredSearchManager = new FilteredSearchServiceDesk(supportBotData); + filteredSearchManager.setup(); + } +} + +export function initForm() { + new GLForm($('.issue-form')); // eslint-disable-line no-new + new IssuableForm($('.issue-form')); // eslint-disable-line no-new + new IssuableTemplateSelectors({ warnTemplateOverride: true }); // eslint-disable-line no-new + new LabelsSelect(); // eslint-disable-line no-new + new MilestoneSelect(); // eslint-disable-line no-new + new ShortcutsNavigation(); // eslint-disable-line no-new + + initTitleSuggestions(); + initTypePopover(); +} + +export function initShow() { + const el = document.getElementById('js-issuable-app'); + + if (!el) { + return; + } + + const { issueType, ...issuableData } = parseIssuableData(el); + + if (issueType === IssueType.Incident) { + initIncidentApp(issuableData); + initHeaderActions(store, IssueType.Incident); + } else { + initIssueApp(issuableData, store); + initHeaderActions(store); + } + + new Issue(); // eslint-disable-line no-new + new ShortcutsIssuable(); // eslint-disable-line no-new + new ZenMode(); // eslint-disable-line no-new + initIssuableHeaderWarnings(store); + initIssuableSidebar(); + initNotesApp(); + initRelatedMergeRequests(); + initSentryErrorStackTrace(); + + const awardEmojiEl = document.getElementById('js-vue-awards-block'); + + if (awardEmojiEl) { + import('~/emoji/awards_app') + .then((m) => m.default(awardEmojiEl)) + .catch(() => {}); + } else { + loadAwardsHandler(); + } + + import(/* webpackChunkName: 'design_management' */ '~/design_management') + .then((module) => module.default()) + .catch(() => {}); +} diff --git a/app/assets/javascripts/issues/init_filtered_search_service_desk.js b/app/assets/javascripts/issues/init_filtered_search_service_desk.js deleted file mode 100644 index 1901802c11c..00000000000 --- a/app/assets/javascripts/issues/init_filtered_search_service_desk.js +++ /dev/null @@ -1,11 +0,0 @@ -import FilteredSearchServiceDesk from './filtered_search_service_desk'; - -export function initFilteredSearchServiceDesk() { - if (document.querySelector('.filtered-search')) { - const supportBotData = JSON.parse( - document.querySelector('.js-service-desk-issues').dataset.supportBot, - ); - const filteredSearchManager = new FilteredSearchServiceDesk(supportBotData); - filteredSearchManager.setup(); - } -} diff --git a/app/assets/javascripts/issues/issue.js b/app/assets/javascripts/issues/issue.js index c471875654b..8e27f547b5c 100644 --- a/app/assets/javascripts/issues/issue.js +++ b/app/assets/javascripts/issues/issue.js @@ -1,11 +1,11 @@ import $ from 'jquery'; import { joinPaths } from '~/lib/utils/url_utility'; -import CreateMergeRequestDropdown from '~/create_merge_request_dropdown'; import createFlash from '~/flash'; import { EVENT_ISSUABLE_VUE_APP_CHANGE } from '~/issuable/constants'; import axios from '~/lib/utils/axios_utils'; import { addDelimiter } from '~/lib/utils/text_utility'; import { __ } from '~/locale'; +import CreateMergeRequestDropdown from './create_merge_request_dropdown'; export default class Issue { constructor() { diff --git a/app/assets/javascripts/issues_list/components/issue_card_time_info.vue b/app/assets/javascripts/issues/list/components/issue_card_time_info.vue index aece7372182..aece7372182 100644 --- a/app/assets/javascripts/issues_list/components/issue_card_time_info.vue +++ b/app/assets/javascripts/issues/list/components/issue_card_time_info.vue diff --git a/app/assets/javascripts/issues_list/components/issues_list_app.vue b/app/assets/javascripts/issues/list/components/issues_list_app.vue index 6ced1080b71..8b15e801f02 100644 --- a/app/assets/javascripts/issues_list/components/issues_list_app.vue +++ b/app/assets/javascripts/issues/list/components/issues_list_app.vue @@ -11,9 +11,9 @@ import { import * as Sentry from '@sentry/browser'; import fuzzaldrinPlus from 'fuzzaldrin-plus'; import { orderBy } from 'lodash'; -import getIssuesQuery from 'ee_else_ce/issues_list/queries/get_issues.query.graphql'; -import getIssuesCountsQuery from 'ee_else_ce/issues_list/queries/get_issues_counts.query.graphql'; -import IssueCardTimeInfo from 'ee_else_ce/issues_list/components/issue_card_time_info.vue'; +import getIssuesQuery from 'ee_else_ce/issues/list/queries/get_issues.query.graphql'; +import getIssuesCountsQuery from 'ee_else_ce/issues/list/queries/get_issues_counts.query.graphql'; +import IssueCardTimeInfo from 'ee_else_ce/issues/list/components/issue_card_time_info.vue'; import createFlash, { FLASH_TYPES } from '~/flash'; import { TYPE_USER } from '~/graphql_shared/constants'; import { convertToGraphQLId, getIdFromGraphQLId } from '~/graphql_shared/utils'; @@ -41,7 +41,7 @@ import { TOKEN_TYPE_TYPE, UPDATED_DESC, urlSortParams, -} from '~/issues_list/constants'; +} from '~/issues/list/constants'; import { convertToApiParams, convertToSearchQuery, @@ -51,7 +51,7 @@ import { getInitialPageParams, getSortKey, getSortOptions, -} from '~/issues_list/utils'; +} from '~/issues/list/utils'; import axios from '~/lib/utils/axios_utils'; import { scrollUp } from '~/lib/utils/scroll_utils'; import { getParameterByName, joinPaths } from '~/lib/utils/url_utility'; @@ -517,10 +517,9 @@ export default { }, async handleBulkUpdateClick() { if (!this.hasInitBulkEdit) { - const initBulkUpdateSidebar = await import( - '~/issuable/bulk_update_sidebar/issuable_init_bulk_update_sidebar' - ); - initBulkUpdateSidebar.default.init('issuable_'); + const bulkUpdateSidebar = await import('~/issuable/bulk_update_sidebar'); + bulkUpdateSidebar.initBulkUpdateSidebar('issuable_'); + bulkUpdateSidebar.initIssueStatusSelect(); const usersSelect = await import('~/users_select'); const UsersSelect = usersSelect.default; diff --git a/app/assets/javascripts/issues_list/components/jira_issues_import_status_app.vue b/app/assets/javascripts/issues/list/components/jira_issues_import_status_app.vue index fb1dbef666c..fb1dbef666c 100644 --- a/app/assets/javascripts/issues_list/components/jira_issues_import_status_app.vue +++ b/app/assets/javascripts/issues/list/components/jira_issues_import_status_app.vue diff --git a/app/assets/javascripts/issues_list/components/new_issue_dropdown.vue b/app/assets/javascripts/issues/list/components/new_issue_dropdown.vue index e749579af80..71f84050ba8 100644 --- a/app/assets/javascripts/issues_list/components/new_issue_dropdown.vue +++ b/app/assets/javascripts/issues/list/components/new_issue_dropdown.vue @@ -7,7 +7,7 @@ import { GlSearchBoxByType, } from '@gitlab/ui'; import createFlash from '~/flash'; -import searchProjectsQuery from '~/issues_list/queries/search_projects.query.graphql'; +import searchProjectsQuery from '~/issues/list/queries/search_projects.query.graphql'; import { DASH_SCOPE, joinPaths } from '~/lib/utils/url_utility'; import { __, sprintf } from '~/locale'; import { DEBOUNCE_DELAY } from '~/vue_shared/components/filtered_search_bar/constants'; diff --git a/app/assets/javascripts/issues_list/constants.js b/app/assets/javascripts/issues/list/constants.js index c9eaf0b9908..4a380848b4f 100644 --- a/app/assets/javascripts/issues_list/constants.js +++ b/app/assets/javascripts/issues/list/constants.js @@ -9,62 +9,6 @@ import { OPERATOR_IS_NOT, } from '~/vue_shared/components/filtered_search_bar/constants'; -// Maps sort order as it appears in the URL query to API `order_by` and `sort` params. -const PRIORITY = 'priority'; -const ASC = 'asc'; -const DESC = 'desc'; -const CREATED_AT = 'created_at'; -const UPDATED_AT = 'updated_at'; -const DUE_DATE = 'due_date'; -const MILESTONE_DUE = 'milestone_due'; -const POPULARITY = 'popularity'; -const WEIGHT = 'weight'; -const LABEL_PRIORITY = 'label_priority'; -const TITLE = 'title'; -export const RELATIVE_POSITION = 'relative_position'; -export const LOADING_LIST_ITEMS_LENGTH = 8; -export const PAGE_SIZE = 20; -export const PAGE_SIZE_MANUAL = 100; - -export const sortOrderMap = { - priority: { order_by: PRIORITY, sort: ASC }, // asc and desc are flipped for some reason - created_date: { order_by: CREATED_AT, sort: DESC }, - created_asc: { order_by: CREATED_AT, sort: ASC }, - updated_desc: { order_by: UPDATED_AT, sort: DESC }, - updated_asc: { order_by: UPDATED_AT, sort: ASC }, - milestone_due_desc: { order_by: MILESTONE_DUE, sort: DESC }, - milestone: { order_by: MILESTONE_DUE, sort: ASC }, - due_date_desc: { order_by: DUE_DATE, sort: DESC }, - due_date: { order_by: DUE_DATE, sort: ASC }, - popularity: { order_by: POPULARITY, sort: DESC }, - popularity_asc: { order_by: POPULARITY, sort: ASC }, - label_priority: { order_by: LABEL_PRIORITY, sort: ASC }, // asc and desc are flipped - relative_position: { order_by: RELATIVE_POSITION, sort: ASC }, - weight_desc: { order_by: WEIGHT, sort: DESC }, - weight: { order_by: WEIGHT, sort: ASC }, - title: { order_by: TITLE, sort: ASC }, - title_desc: { order_by: TITLE, sort: DESC }, -}; - -export const availableSortOptionsJira = [ - { - id: 1, - title: __('Created date'), - sortDirection: { - descending: 'created_desc', - ascending: 'created_asc', - }, - }, - { - id: 2, - title: __('Last updated'), - sortDirection: { - descending: 'updated_desc', - ascending: 'updated_asc', - }, - }, -]; - export const i18n = { anonymousSearchingMessage: __('You must sign in to search for specific terms.'), calendarLabel: __('Subscribe to calendar'), @@ -108,11 +52,13 @@ export const i18n = { upvotes: __('Upvotes'), }; -export const JIRA_IMPORT_SUCCESS_ALERT_HIDE_MAP_KEY = 'jira-import-success-alert-hide-map'; - +export const MAX_LIST_SIZE = 10; +export const PAGE_SIZE = 20; +export const PAGE_SIZE_MANUAL = 100; export const PARAM_DUE_DATE = 'due_date'; export const PARAM_SORT = 'sort'; export const PARAM_STATE = 'state'; +export const RELATIVE_POSITION = 'relative_position'; export const defaultPageSizeParams = { firstPageSize: PAGE_SIZE, @@ -183,8 +129,6 @@ export const urlSortParams = { [TITLE_DESC]: 'title_desc', }; -export const MAX_LIST_SIZE = 10; - export const API_PARAM = 'apiParam'; export const URL_PARAM = 'urlParam'; export const NORMAL_FILTER = 'normalFilter'; diff --git a/app/assets/javascripts/issues_list/eventhub.js b/app/assets/javascripts/issues/list/eventhub.js index e31806ad199..e31806ad199 100644 --- a/app/assets/javascripts/issues_list/eventhub.js +++ b/app/assets/javascripts/issues/list/eventhub.js diff --git a/app/assets/javascripts/issues_list/index.js b/app/assets/javascripts/issues/list/index.js index 9d2ec8b32d2..01cc82ed8fd 100644 --- a/app/assets/javascripts/issues_list/index.js +++ b/app/assets/javascripts/issues/list/index.js @@ -1,11 +1,10 @@ import produce from 'immer'; import Vue from 'vue'; import VueApollo from 'vue-apollo'; -import getIssuesQuery from 'ee_else_ce/issues_list/queries/get_issues.query.graphql'; -import IssuesListApp from 'ee_else_ce/issues_list/components/issues_list_app.vue'; +import getIssuesQuery from 'ee_else_ce/issues/list/queries/get_issues.query.graphql'; +import IssuesListApp from 'ee_else_ce/issues/list/components/issues_list_app.vue'; import createDefaultClient from '~/lib/graphql'; -import { convertObjectPropsToCamelCase, parseBoolean } from '~/lib/utils/common_utils'; -import IssuablesListApp from './components/issuables_list_app.vue'; +import { parseBoolean } from '~/lib/utils/common_utils'; import JiraIssuesImportStatusRoot from './components/jira_issues_import_status_app.vue'; export function mountJiraIssuesListApp() { @@ -45,35 +44,6 @@ export function mountJiraIssuesListApp() { }); } -export function mountIssuablesListApp() { - if (!gon.features?.vueIssuablesList) { - return; - } - - document.querySelectorAll('.js-issuables-list').forEach((el) => { - const { canBulkEdit, emptyStateMeta = {}, scopedLabelsAvailable, ...data } = el.dataset; - - return new Vue({ - el, - provide: { - scopedLabelsAvailable: parseBoolean(scopedLabelsAvailable), - }, - render(createElement) { - return createElement(IssuablesListApp, { - props: { - ...data, - emptyStateMeta: - Object.keys(emptyStateMeta).length !== 0 - ? convertObjectPropsToCamelCase(JSON.parse(emptyStateMeta)) - : {}, - canBulkEdit: Boolean(canBulkEdit), - }, - }); - }, - }); - }); -} - export function mountIssuesListApp() { const el = document.querySelector('.js-issues-list'); diff --git a/app/assets/javascripts/issues_list/queries/get_issues.query.graphql b/app/assets/javascripts/issues/list/queries/get_issues.query.graphql index be8deb3fe97..be8deb3fe97 100644 --- a/app/assets/javascripts/issues_list/queries/get_issues.query.graphql +++ b/app/assets/javascripts/issues/list/queries/get_issues.query.graphql diff --git a/app/assets/javascripts/issues_list/queries/get_issues_counts.query.graphql b/app/assets/javascripts/issues/list/queries/get_issues_counts.query.graphql index 1a345fd2877..1a345fd2877 100644 --- a/app/assets/javascripts/issues_list/queries/get_issues_counts.query.graphql +++ b/app/assets/javascripts/issues/list/queries/get_issues_counts.query.graphql diff --git a/app/assets/javascripts/issues_list/queries/get_issues_list_details.query.graphql b/app/assets/javascripts/issues/list/queries/get_issues_list_details.query.graphql index a53dba8c7c8..a53dba8c7c8 100644 --- a/app/assets/javascripts/issues_list/queries/get_issues_list_details.query.graphql +++ b/app/assets/javascripts/issues/list/queries/get_issues_list_details.query.graphql diff --git a/app/assets/javascripts/issues_list/queries/issue.fragment.graphql b/app/assets/javascripts/issues/list/queries/issue.fragment.graphql index 07dae3fd756..07dae3fd756 100644 --- a/app/assets/javascripts/issues_list/queries/issue.fragment.graphql +++ b/app/assets/javascripts/issues/list/queries/issue.fragment.graphql diff --git a/app/assets/javascripts/issues_list/queries/label.fragment.graphql b/app/assets/javascripts/issues/list/queries/label.fragment.graphql index bb1d8f1ac9b..bb1d8f1ac9b 100644 --- a/app/assets/javascripts/issues_list/queries/label.fragment.graphql +++ b/app/assets/javascripts/issues/list/queries/label.fragment.graphql diff --git a/app/assets/javascripts/issues_list/queries/milestone.fragment.graphql b/app/assets/javascripts/issues/list/queries/milestone.fragment.graphql index 3cdf69bf585..3cdf69bf585 100644 --- a/app/assets/javascripts/issues_list/queries/milestone.fragment.graphql +++ b/app/assets/javascripts/issues/list/queries/milestone.fragment.graphql diff --git a/app/assets/javascripts/issues_list/queries/reorder_issues.mutation.graphql b/app/assets/javascripts/issues/list/queries/reorder_issues.mutation.graphql index 160026a4742..160026a4742 100644 --- a/app/assets/javascripts/issues_list/queries/reorder_issues.mutation.graphql +++ b/app/assets/javascripts/issues/list/queries/reorder_issues.mutation.graphql diff --git a/app/assets/javascripts/issues_list/queries/search_labels.query.graphql b/app/assets/javascripts/issues/list/queries/search_labels.query.graphql index 44b57317161..44b57317161 100644 --- a/app/assets/javascripts/issues_list/queries/search_labels.query.graphql +++ b/app/assets/javascripts/issues/list/queries/search_labels.query.graphql diff --git a/app/assets/javascripts/issues_list/queries/search_milestones.query.graphql b/app/assets/javascripts/issues/list/queries/search_milestones.query.graphql index e7eb08104a6..e7eb08104a6 100644 --- a/app/assets/javascripts/issues_list/queries/search_milestones.query.graphql +++ b/app/assets/javascripts/issues/list/queries/search_milestones.query.graphql diff --git a/app/assets/javascripts/issues_list/queries/search_projects.query.graphql b/app/assets/javascripts/issues/list/queries/search_projects.query.graphql index bd2f9bc2340..bd2f9bc2340 100644 --- a/app/assets/javascripts/issues_list/queries/search_projects.query.graphql +++ b/app/assets/javascripts/issues/list/queries/search_projects.query.graphql diff --git a/app/assets/javascripts/issues_list/queries/search_users.query.graphql b/app/assets/javascripts/issues/list/queries/search_users.query.graphql index 92517ad35d0..92517ad35d0 100644 --- a/app/assets/javascripts/issues_list/queries/search_users.query.graphql +++ b/app/assets/javascripts/issues/list/queries/search_users.query.graphql diff --git a/app/assets/javascripts/issues_list/queries/user.fragment.graphql b/app/assets/javascripts/issues/list/queries/user.fragment.graphql index 3e5bc0f7b93..3e5bc0f7b93 100644 --- a/app/assets/javascripts/issues_list/queries/user.fragment.graphql +++ b/app/assets/javascripts/issues/list/queries/user.fragment.graphql diff --git a/app/assets/javascripts/issues_list/utils.js b/app/assets/javascripts/issues/list/utils.js index 99946e4e851..2919bbbfef8 100644 --- a/app/assets/javascripts/issues_list/utils.js +++ b/app/assets/javascripts/issues/list/utils.js @@ -36,7 +36,7 @@ import { urlSortParams, WEIGHT_ASC, WEIGHT_DESC, -} from '~/issues_list/constants'; +} from '~/issues/list/constants'; import { isPositiveInteger } from '~/lib/utils/number_utils'; import { __ } from '~/locale'; import { @@ -72,7 +72,7 @@ export const getSortOptions = (hasIssueWeightsFeature, hasBlockedIssuesFeature) }, { id: 3, - title: __('Last updated'), + title: __('Updated date'), sortDirection: { ascending: UPDATED_ASC, descending: UPDATED_DESC, diff --git a/app/assets/javascripts/issues/manual_ordering.js b/app/assets/javascripts/issues/manual_ordering.js index 9613246d6a6..c78505d0610 100644 --- a/app/assets/javascripts/issues/manual_ordering.js +++ b/app/assets/javascripts/issues/manual_ordering.js @@ -20,7 +20,7 @@ const updateIssue = (url, issueList, { move_before_id, move_after_id }) => }); }); -const initManualOrdering = (draggableSelector = 'li.issue') => { +const initManualOrdering = () => { const issueList = document.querySelector('.manual-ordering'); if (!issueList || !(gon.current_user_id > 0)) { @@ -37,14 +37,14 @@ const initManualOrdering = (draggableSelector = 'li.issue') => { group: { name: 'issues', }, - draggable: draggableSelector, + draggable: 'li.issue', onStart: () => { sortableStart(); }, onUpdate: (event) => { const el = event.item; - const url = el.getAttribute('url') || el.dataset.url; + const url = el.getAttribute('url'); const prev = el.previousElementSibling; const next = el.nextElementSibling; diff --git a/app/assets/javascripts/issues/new/index.js b/app/assets/javascripts/issues/new/index.js index 59a7cbec627..f96cacf2595 100644 --- a/app/assets/javascripts/issues/new/index.js +++ b/app/assets/javascripts/issues/new/index.js @@ -5,8 +5,6 @@ import TitleSuggestions from './components/title_suggestions.vue'; import TypePopover from './components/type_popover.vue'; export function initTitleSuggestions() { - Vue.use(VueApollo); - const el = document.getElementById('js-suggestions'); const issueTitle = document.getElementById('issue_title'); @@ -14,6 +12,8 @@ export function initTitleSuggestions() { return undefined; } + Vue.use(VueApollo); + const apolloProvider = new VueApollo({ defaultClient: createDefaultClient(), }); diff --git a/app/assets/javascripts/issues/related_merge_requests/index.js b/app/assets/javascripts/issues/related_merge_requests/index.js index ce33cf7df1d..5045f7e1a2a 100644 --- a/app/assets/javascripts/issues/related_merge_requests/index.js +++ b/app/assets/javascripts/issues/related_merge_requests/index.js @@ -2,23 +2,21 @@ import Vue from 'vue'; import RelatedMergeRequests from './components/related_merge_requests.vue'; import createStore from './store'; -export default function initRelatedMergeRequests() { - const relatedMergeRequestsElement = document.querySelector('#js-related-merge-requests'); +export function initRelatedMergeRequests() { + const el = document.querySelector('#js-related-merge-requests'); - if (relatedMergeRequestsElement) { - const { endpoint, projectPath, projectNamespace } = relatedMergeRequestsElement.dataset; - - // eslint-disable-next-line no-new - new Vue({ - el: relatedMergeRequestsElement, - components: { - RelatedMergeRequests, - }, - store: createStore(), - render: (createElement) => - createElement('related-merge-requests', { - props: { endpoint, projectNamespace, projectPath }, - }), - }); + if (!el) { + return undefined; } + + const { endpoint, projectPath, projectNamespace } = el.dataset; + + return new Vue({ + el, + store: createStore(), + render: (createElement) => + createElement(RelatedMergeRequests, { + props: { endpoint, projectNamespace, projectPath }, + }), + }); } diff --git a/app/assets/javascripts/issues/sentry_error_stack_trace/index.js b/app/assets/javascripts/issues/sentry_error_stack_trace/index.js deleted file mode 100644 index 8e9ee25e7a8..00000000000 --- a/app/assets/javascripts/issues/sentry_error_stack_trace/index.js +++ /dev/null @@ -1,22 +0,0 @@ -import Vue from 'vue'; -import store from '~/error_tracking/store'; -import SentryErrorStackTrace from './components/sentry_error_stack_trace.vue'; - -export default function initSentryErrorStacktrace() { - const sentryErrorStackTraceEl = document.querySelector('#js-sentry-error-stack-trace'); - if (sentryErrorStackTraceEl) { - const { issueStackTracePath } = sentryErrorStackTraceEl.dataset; - // eslint-disable-next-line no-new - new Vue({ - el: sentryErrorStackTraceEl, - components: { - SentryErrorStackTrace, - }, - store, - render: (createElement) => - createElement('sentry-error-stack-trace', { - props: { issueStackTracePath }, - }), - }); - } -} diff --git a/app/assets/javascripts/issues/show.js b/app/assets/javascripts/issues/show.js deleted file mode 100644 index e43e56d7b4e..00000000000 --- a/app/assets/javascripts/issues/show.js +++ /dev/null @@ -1,59 +0,0 @@ -import loadAwardsHandler from '~/awards_handler'; -import ShortcutsIssuable from '~/behaviors/shortcuts/shortcuts_issuable'; -import { initIssuableHeaderWarnings, initIssuableSidebar } from '~/issuable'; -import { IssuableType } from '~/vue_shared/issuable/show/constants'; -import Issue from '~/issues/issue'; -import { initIncidentApp, initIncidentHeaderActions } from '~/issues/show/incident'; -import { initIssuableApp, initIssueHeaderActions } from '~/issues/show/issue'; -import { parseIssuableData } from '~/issues/show/utils/parse_data'; -import initNotesApp from '~/notes'; -import { store } from '~/notes/stores'; -import initRelatedMergeRequestsApp from '~/issues/related_merge_requests'; -import initSentryErrorStackTraceApp from '~/issues/sentry_error_stack_trace'; -import ZenMode from '~/zen_mode'; - -export default function initShowIssue() { - initNotesApp(); - - const initialDataEl = document.getElementById('js-issuable-app'); - const { issueType, ...issuableData } = parseIssuableData(initialDataEl); - - switch (issueType) { - case IssuableType.Incident: - initIncidentApp(issuableData); - initIncidentHeaderActions(store); - break; - case IssuableType.Issue: - initIssuableApp(issuableData, store); - initIssueHeaderActions(store); - break; - default: - initIssueHeaderActions(store); - break; - } - - initIssuableHeaderWarnings(store); - initSentryErrorStackTraceApp(); - initRelatedMergeRequestsApp(); - - import(/* webpackChunkName: 'design_management' */ '~/design_management') - .then((module) => module.default()) - .catch(() => {}); - - new ZenMode(); // eslint-disable-line no-new - - if (issueType !== IssuableType.TestCase) { - const awardEmojiEl = document.getElementById('js-vue-awards-block'); - - new Issue(); // eslint-disable-line no-new - new ShortcutsIssuable(); // eslint-disable-line no-new - initIssuableSidebar(); - if (awardEmojiEl) { - import('~/emoji/awards_app') - .then((m) => m.default(awardEmojiEl)) - .catch(() => {}); - } else { - loadAwardsHandler(); - } - } -} diff --git a/app/assets/javascripts/issues/show/components/app.vue b/app/assets/javascripts/issues/show/components/app.vue index eeaf865a35f..0490728c6bc 100644 --- a/app/assets/javascripts/issues/show/components/app.vue +++ b/app/assets/javascripts/issues/show/components/app.vue @@ -6,7 +6,7 @@ import { IssuableStatus, IssuableStatusText, IssuableType } from '~/issues/const import Poll from '~/lib/utils/poll'; import { visitUrl } from '~/lib/utils/url_utility'; import { __, sprintf } from '~/locale'; -import { IssueTypePath, IncidentTypePath, IncidentType, POLLING_DELAY } from '../constants'; +import { ISSUE_TYPE_PATH, INCIDENT_TYPE_PATH, INCIDENT_TYPE, POLLING_DELAY } from '../constants'; import eventHub from '../event_hub'; import getIssueStateQuery from '../queries/get_issue_state.query.graphql'; import Service from '../services/index'; @@ -378,15 +378,15 @@ export default { .then((data) => { if ( !window.location.pathname.includes(data.web_url) && - issueState.issueType !== IncidentType + issueState.issueType !== INCIDENT_TYPE ) { visitUrl(data.web_url); } if (issueState.isDirty) { const URI = - issueState.issueType === IncidentType - ? data.web_url.replace(IssueTypePath, IncidentTypePath) + issueState.issueType === INCIDENT_TYPE + ? data.web_url.replace(ISSUE_TYPE_PATH, INCIDENT_TYPE_PATH) : data.web_url; visitUrl(URI); } diff --git a/app/assets/javascripts/issues/show/components/fields/type.vue b/app/assets/javascripts/issues/show/components/fields/type.vue index 9110a6924b4..75d0b9e5e76 100644 --- a/app/assets/javascripts/issues/show/components/fields/type.vue +++ b/app/assets/javascripts/issues/show/components/fields/type.vue @@ -2,7 +2,7 @@ import { GlFormGroup, GlDropdown, GlDropdownItem, GlIcon } from '@gitlab/ui'; import { capitalize } from 'lodash'; import { __ } from '~/locale'; -import { IssuableTypes, IncidentType } from '../../constants'; +import { issuableTypes, INCIDENT_TYPE } from '../../constants'; import getIssueStateQuery from '../../queries/get_issue_state.query.graphql'; import updateIssueStateMutation from '../../queries/update_issue_state.mutation.graphql'; @@ -12,7 +12,7 @@ export const i18n = { export default { i18n, - IssuableTypes, + issuableTypes, components: { GlFormGroup, GlIcon, @@ -45,7 +45,7 @@ export default { return capitalize(issueType); }, shouldShowIncident() { - return this.issueType === IncidentType || this.canCreateIncident; + return this.issueType === INCIDENT_TYPE || this.canCreateIncident; }, }, methods: { @@ -59,7 +59,7 @@ export default { }); }, isShown(type) { - return type.value !== IncidentType || this.shouldShowIncident; + return type.value !== INCIDENT_TYPE || this.shouldShowIncident; }, }, }; @@ -81,7 +81,7 @@ export default { toggle-class="dropdown-menu-toggle" > <gl-dropdown-item - v-for="type in $options.IssuableTypes" + v-for="type in $options.issuableTypes" v-show="isShown(type)" :key="type.value" :is-checked="issueState.issueType === type.value" diff --git a/app/assets/javascripts/issues/show/components/header_actions.vue b/app/assets/javascripts/issues/show/components/header_actions.vue index 700ef92a0f3..8ba08472ea0 100644 --- a/app/assets/javascripts/issues/show/components/header_actions.vue +++ b/app/assets/javascripts/issues/show/components/header_actions.vue @@ -11,9 +11,8 @@ import { import { mapActions, mapGetters, mapState } from 'vuex'; import createFlash, { FLASH_TYPES } from '~/flash'; import { EVENT_ISSUABLE_VUE_APP_CHANGE } from '~/issuable/constants'; -import { IssuableType } from '~/vue_shared/issuable/show/constants'; -import { IssuableStatus } from '~/issues/constants'; -import { IssueStateEvent } from '~/issues/show/constants'; +import { IssuableStatus, IssueType } from '~/issues/constants'; +import { ISSUE_STATE_EVENT_CLOSE, ISSUE_STATE_EVENT_REOPEN } from '~/issues/show/constants'; import { capitalizeFirstCharacter } from '~/lib/utils/text_utility'; import { visitUrl } from '~/lib/utils/url_utility'; import { s__, __, sprintf } from '~/locale'; @@ -83,7 +82,7 @@ export default { default: '', }, issueType: { - default: IssuableType.Issue, + default: IssueType.Issue, }, newIssuePath: { default: '', @@ -106,8 +105,8 @@ export default { }, issueTypeText() { const issueTypeTexts = { - [IssuableType.Issue]: s__('HeaderAction|issue'), - [IssuableType.Incident]: s__('HeaderAction|incident'), + [IssueType.Issue]: s__('HeaderAction|issue'), + [IssueType.Incident]: s__('HeaderAction|incident'), }; return issueTypeTexts[this.issueType] ?? this.issueType; @@ -163,7 +162,7 @@ export default { input: { iid: this.iid.toString(), projectPath: this.projectPath, - stateEvent: this.isClosed ? IssueStateEvent.Reopen : IssueStateEvent.Close, + stateEvent: this.isClosed ? ISSUE_STATE_EVENT_REOPEN : ISSUE_STATE_EVENT_CLOSE, }, }, }) diff --git a/app/assets/javascripts/issues/sentry_error_stack_trace/components/sentry_error_stack_trace.vue b/app/assets/javascripts/issues/show/components/sentry_error_stack_trace.vue index 1530e9a15b5..1530e9a15b5 100644 --- a/app/assets/javascripts/issues/sentry_error_stack_trace/components/sentry_error_stack_trace.vue +++ b/app/assets/javascripts/issues/show/components/sentry_error_stack_trace.vue diff --git a/app/assets/javascripts/issues/show/constants.js b/app/assets/javascripts/issues/show/constants.js index 35f3bcdad70..a100aaf88ad 100644 --- a/app/assets/javascripts/issues/show/constants.js +++ b/app/assets/javascripts/issues/show/constants.js @@ -1,22 +1,20 @@ import { __ } from '~/locale'; -export const IssueStateEvent = { - Close: 'CLOSE', - Reopen: 'REOPEN', -}; - -export const STATUS_PAGE_PUBLISHED = __('Published on status page'); +export const INCIDENT_TYPE = 'incident'; +export const INCIDENT_TYPE_PATH = 'issues/incident'; +export const ISSUE_STATE_EVENT_CLOSE = 'CLOSE'; +export const ISSUE_STATE_EVENT_REOPEN = 'REOPEN'; +export const ISSUE_TYPE_PATH = 'issues'; export const JOIN_ZOOM_MEETING = __('Join Zoom meeting'); +export const POLLING_DELAY = 2000; +export const STATUS_PAGE_PUBLISHED = __('Published on status page'); -export const IssuableTypes = [ +export const issuableTypes = [ { value: 'issue', text: __('Issue'), icon: 'issue-type-issue' }, { value: 'incident', text: __('Incident'), icon: 'issue-type-incident' }, ]; -export const IssueTypePath = 'issues'; -export const IncidentTypePath = 'issues/incident'; -export const IncidentType = 'incident'; - -export const issueState = { issueType: undefined, isDirty: false }; - -export const POLLING_DELAY = 2000; +export const issueState = { + issueType: undefined, + isDirty: false, +}; diff --git a/app/assets/javascripts/issues/show/incident.js b/app/assets/javascripts/issues/show/index.js index a260c31e1da..7f5a0e32f72 100644 --- a/app/assets/javascripts/issues/show/incident.js +++ b/app/assets/javascripts/issues/show/index.js @@ -1,11 +1,15 @@ import Vue from 'vue'; +import { mapGetters } from 'vuex'; +import errorTrackingStore from '~/error_tracking/store'; import { parseBoolean } from '~/lib/utils/common_utils'; -import issuableApp from './components/app.vue'; -import incidentTabs from './components/incidents/incident_tabs.vue'; -import { issueState, IncidentType } from './constants'; +import { scrollToTargetOnResize } from '~/lib/utils/resize_observer'; +import IssueApp from './components/app.vue'; +import HeaderActions from './components/header_actions.vue'; +import IncidentTabs from './components/incidents/incident_tabs.vue'; +import SentryErrorStackTrace from './components/sentry_error_stack_trace.vue'; +import { INCIDENT_TYPE, issueState } from './constants'; import apolloProvider from './graphql'; import getIssueStateQuery from './queries/get_issue_state.query.graphql'; -import HeaderActions from './components/header_actions.vue'; const bootstrapApollo = (state = {}) => { return apolloProvider.clients.defaultClient.cache.writeQuery({ @@ -16,7 +20,7 @@ const bootstrapApollo = (state = {}) => { }); }; -export function initIncidentApp(issuableData = {}) { +export function initIncidentApp(issueData = {}) { const el = document.getElementById('js-issuable-app'); if (!el) { @@ -34,18 +38,15 @@ export function initIncidentApp(issuableData = {}) { projectId, slaFeatureAvailable, uploadMetricsFeatureAvailable, - } = issuableData; + } = issueData; const fullPath = `${projectNamespace}/${projectPath}`; return new Vue({ el, apolloProvider, - components: { - issuableApp, - }, provide: { - issueType: IncidentType, + issueType: INCIDENT_TYPE, canCreateIncident, canUpdate, fullPath, @@ -55,10 +56,10 @@ export function initIncidentApp(issuableData = {}) { uploadMetricsFeatureAvailable: parseBoolean(uploadMetricsFeatureAvailable), }, render(createElement) { - return createElement('issuable-app', { + return createElement(IssueApp, { props: { - ...issuableData, - descriptionComponent: incidentTabs, + ...issueData, + descriptionComponent: IncidentTabs, showTitleBorder: false, }, }); @@ -66,7 +67,46 @@ export function initIncidentApp(issuableData = {}) { }); } -export function initIncidentHeaderActions(store) { +export function initIssueApp(issueData, store) { + const el = document.getElementById('js-issuable-app'); + + if (!el) { + return undefined; + } + + if (gon?.features?.fixCommentScroll) { + scrollToTargetOnResize(); + } + + bootstrapApollo({ ...issueState, issueType: el.dataset.issueType }); + + const { canCreateIncident, ...issueProps } = issueData; + + return new Vue({ + el, + apolloProvider, + store, + provide: { + canCreateIncident, + }, + computed: { + ...mapGetters(['getNoteableData']), + }, + render(createElement) { + return createElement(IssueApp, { + props: { + ...issueProps, + isConfidential: this.getNoteableData?.confidential, + isLocked: this.getNoteableData?.discussion_locked, + issuableStatus: this.getNoteableData?.state, + id: this.getNoteableData?.id, + }, + }); + }, + }); +} + +export function initHeaderActions(store, type = '') { const el = document.querySelector('.js-issue-header-actions'); if (!el) { @@ -75,12 +115,15 @@ export function initIncidentHeaderActions(store) { bootstrapApollo({ ...issueState, issueType: el.dataset.issueType }); + const canCreate = + type === INCIDENT_TYPE ? el.dataset.canCreateIncident : el.dataset.canCreateIssue; + return new Vue({ el, apolloProvider, store, provide: { - canCreateIssue: parseBoolean(el.dataset.canCreateIncident), + canCreateIssue: parseBoolean(canCreate), canDestroyIssue: parseBoolean(el.dataset.canDestroyIssue), canPromoteToEpic: parseBoolean(el.dataset.canPromoteToEpic), canReopenIssue: parseBoolean(el.dataset.canReopenIssue), @@ -99,3 +142,20 @@ export function initIncidentHeaderActions(store) { render: (createElement) => createElement(HeaderActions), }); } + +export function initSentryErrorStackTrace() { + const el = document.querySelector('#js-sentry-error-stack-trace'); + + if (!el) { + return undefined; + } + + const { issueStackTracePath } = el.dataset; + + return new Vue({ + el, + store: errorTrackingStore, + render: (createElement) => + createElement(SentryErrorStackTrace, { props: { issueStackTracePath } }), + }); +} diff --git a/app/assets/javascripts/issues/show/issue.js b/app/assets/javascripts/issues/show/issue.js deleted file mode 100644 index 60e90934af8..00000000000 --- a/app/assets/javascripts/issues/show/issue.js +++ /dev/null @@ -1,86 +0,0 @@ -import Vue from 'vue'; -import { mapGetters } from 'vuex'; -import { parseBoolean } from '~/lib/utils/common_utils'; -import IssuableApp from './components/app.vue'; -import HeaderActions from './components/header_actions.vue'; -import { issueState } from './constants'; -import apolloProvider from './graphql'; -import getIssueStateQuery from './queries/get_issue_state.query.graphql'; - -const bootstrapApollo = (state = {}) => { - return apolloProvider.clients.defaultClient.cache.writeQuery({ - query: getIssueStateQuery, - data: { - issueState: state, - }, - }); -}; - -export function initIssuableApp(issuableData, store) { - const el = document.getElementById('js-issuable-app'); - - if (!el) { - return undefined; - } - - bootstrapApollo({ ...issueState, issueType: el.dataset.issueType }); - - const { canCreateIncident, ...issuableProps } = issuableData; - - return new Vue({ - el, - apolloProvider, - store, - provide: { - canCreateIncident, - }, - computed: { - ...mapGetters(['getNoteableData']), - }, - render(createElement) { - return createElement(IssuableApp, { - props: { - ...issuableProps, - isConfidential: this.getNoteableData?.confidential, - isLocked: this.getNoteableData?.discussion_locked, - issuableStatus: this.getNoteableData?.state, - id: this.getNoteableData?.id, - }, - }); - }, - }); -} - -export function initIssueHeaderActions(store) { - const el = document.querySelector('.js-issue-header-actions'); - - if (!el) { - return undefined; - } - - bootstrapApollo({ ...issueState, issueType: el.dataset.issueType }); - - return new Vue({ - el, - apolloProvider, - store, - provide: { - canCreateIssue: parseBoolean(el.dataset.canCreateIssue), - canDestroyIssue: parseBoolean(el.dataset.canDestroyIssue), - canPromoteToEpic: parseBoolean(el.dataset.canPromoteToEpic), - canReopenIssue: parseBoolean(el.dataset.canReopenIssue), - canReportSpam: parseBoolean(el.dataset.canReportSpam), - canUpdateIssue: parseBoolean(el.dataset.canUpdateIssue), - iid: el.dataset.iid, - isIssueAuthor: parseBoolean(el.dataset.isIssueAuthor), - issuePath: el.dataset.issuePath, - issueType: el.dataset.issueType, - newIssuePath: el.dataset.newIssuePath, - projectPath: el.dataset.projectPath, - projectId: el.dataset.projectId, - reportAbusePath: el.dataset.reportAbusePath, - submitAsSpamPath: el.dataset.submitAsSpamPath, - }, - render: (createElement) => createElement(HeaderActions), - }); -} diff --git a/app/assets/javascripts/issues_list/components/issuable.vue b/app/assets/javascripts/issues_list/components/issuable.vue deleted file mode 100644 index 6476d5be38c..00000000000 --- a/app/assets/javascripts/issues_list/components/issuable.vue +++ /dev/null @@ -1,441 +0,0 @@ -<script> -/* - * This is tightly coupled to projects/issues/_issue.html.haml, - * any changes done to the haml need to be reflected here. - */ - -// TODO: need to move this component to graphql - https://gitlab.com/gitlab-org/gitlab/-/issues/221246 -import jiraLogo from '@gitlab/svgs/dist/illustrations/logos/jira.svg'; -import { - GlLink, - GlTooltipDirective as GlTooltip, - GlSprintf, - GlLabel, - GlIcon, - GlSafeHtmlDirective as SafeHtml, -} from '@gitlab/ui'; -import { escape, isNumber } from 'lodash'; -import { isScopedLabel } from '~/lib/utils/common_utils'; -import { - dateInWords, - formatDate, - getDayDifference, - getTimeago, - timeFor, - newDateAsLocaleTime, -} from '~/lib/utils/datetime_utility'; -import { convertToCamelCase } from '~/lib/utils/text_utility'; -import { mergeUrlParams, setUrlFragment, isExternal } from '~/lib/utils/url_utility'; -import { sprintf, __ } from '~/locale'; -import initUserPopovers from '~/user_popovers'; -import IssueAssignees from '~/issuable/components/issue_assignees.vue'; - -export default { - i18n: { - openedAgo: __('created %{timeAgoString} by %{user}'), - openedAgoJira: __('created %{timeAgoString} by %{user} in Jira'), - openedAgoServiceDesk: __('created %{timeAgoString} by %{email} via %{user}'), - }, - components: { - IssueAssignees, - GlLink, - GlLabel, - GlIcon, - GlSprintf, - IssueHealthStatus: () => - import('ee_component/related_items_tree/components/issue_health_status.vue'), - }, - directives: { - GlTooltip, - SafeHtml, - }, - inject: ['scopedLabelsAvailable'], - props: { - issuable: { - type: Object, - required: true, - }, - isBulkEditing: { - type: Boolean, - required: false, - default: false, - }, - selected: { - type: Boolean, - required: false, - default: false, - }, - baseUrl: { - type: String, - required: false, - default() { - return window.location.href; - }, - }, - }, - data() { - return { - jiraLogo, - }; - }, - computed: { - milestoneLink() { - const { title } = this.issuable.milestone; - - return this.issuableLink({ milestone_title: title }); - }, - hasWeight() { - return isNumber(this.issuable.weight); - }, - dueDate() { - return this.issuable.due_date ? newDateAsLocaleTime(this.issuable.due_date) : undefined; - }, - dueDateWords() { - return this.dueDate ? dateInWords(this.dueDate, true) : undefined; - }, - isOverdue() { - return this.dueDate ? this.dueDate < new Date() : false; - }, - isClosed() { - return this.issuable.state === 'closed'; - }, - isJiraIssue() { - return this.issuable.external_tracker === 'jira'; - }, - webUrl() { - return this.issuable.gitlab_web_url || this.issuable.web_url; - }, - isIssuableUrlExternal() { - return isExternal(this.webUrl); - }, - linkTarget() { - return this.isIssuableUrlExternal ? '_blank' : null; - }, - issueCreatedToday() { - return getDayDifference(new Date(this.issuable.created_at), new Date()) < 1; - }, - labelIdsString() { - return JSON.stringify(this.issuable.labels.map((l) => l.id)); - }, - milestoneDueDate() { - const { due_date: dueDate } = this.issuable.milestone || {}; - - return dueDate ? newDateAsLocaleTime(dueDate) : undefined; - }, - milestoneTooltipText() { - if (this.milestoneDueDate) { - return sprintf(__('%{primary} (%{secondary})'), { - primary: formatDate(this.milestoneDueDate, 'mmm d, yyyy'), - secondary: timeFor(this.milestoneDueDate), - }); - } - return __('Milestone'); - }, - issuableAuthor() { - return this.issuable.author; - }, - issuableCreatedAt() { - return getTimeago().format(this.issuable.created_at); - }, - popoverDataAttrs() { - const { id, username, name, avatar_url } = this.issuableAuthor; - - return { - 'data-user-id': id, - 'data-username': username, - 'data-name': name, - 'data-avatar-url': avatar_url, - }; - }, - referencePath() { - return this.issuable.references.relative; - }, - updatedDateString() { - return formatDate(new Date(this.issuable.updated_at), 'mmm d, yyyy h:MMtt'); - }, - updatedDateAgo() { - // snake_case because it's the same i18n string as the HAML view - return sprintf(__('updated %{time_ago}'), { - time_ago: escape(getTimeago().format(this.issuable.updated_at)), - }); - }, - issuableMeta() { - return [ - { - key: 'merge-requests', - visible: this.issuable.merge_requests_count > 0, - value: this.issuable.merge_requests_count, - title: __('Related merge requests'), - dataTestId: 'merge-requests', - class: 'js-merge-requests', - icon: 'merge-request', - }, - { - key: 'upvotes', - visible: this.issuable.upvotes > 0, - value: this.issuable.upvotes, - title: __('Upvotes'), - dataTestId: 'upvotes', - class: 'js-upvotes issuable-upvotes', - icon: 'thumb-up', - }, - { - key: 'downvotes', - visible: this.issuable.downvotes > 0, - value: this.issuable.downvotes, - title: __('Downvotes'), - dataTestId: 'downvotes', - class: 'js-downvotes issuable-downvotes', - icon: 'thumb-down', - }, - { - key: 'blocking-issues', - visible: this.issuable.blocking_issues_count > 0, - value: this.issuable.blocking_issues_count, - title: __('Blocking issues'), - dataTestId: 'blocking-issues', - href: setUrlFragment(this.webUrl, 'related-issues'), - icon: 'issue-block', - }, - { - key: 'comments-count', - visible: !this.isJiraIssue, - value: this.issuable.user_notes_count, - title: __('Comments'), - dataTestId: 'notes-count', - href: setUrlFragment(this.webUrl, 'notes'), - class: { 'no-comments': !this.issuable.user_notes_count, 'issuable-comments': true }, - icon: 'comments', - }, - ]; - }, - healthStatus() { - return convertToCamelCase(this.issuable.health_status); - }, - openedMessage() { - if (this.isJiraIssue) return this.$options.i18n.openedAgoJira; - if (this.issuable.service_desk_reply_to) return this.$options.i18n.openedAgoServiceDesk; - return this.$options.i18n.openedAgo; - }, - }, - mounted() { - // TODO: Refactor user popover to use its own component instead of - // spawning event listeners on Vue-rendered elements. - initUserPopovers([this.$refs.openedAgoByContainer.$el]); - }, - methods: { - issuableLink(params) { - return mergeUrlParams(params, this.baseUrl); - }, - isScoped({ name }) { - return isScopedLabel({ title: name }) && this.scopedLabelsAvailable; - }, - labelHref({ name }) { - if (this.isJiraIssue) { - return this.issuableLink({ 'labels[]': name }); - } - - return this.issuableLink({ 'label_name[]': name }); - }, - onSelect(ev) { - this.$emit('select', { - issuable: this.issuable, - selected: ev.target.checked, - }); - }, - issuableMetaComponent(href) { - return href ? 'gl-link' : 'span'; - }, - }, - - confidentialTooltipText: __('Confidential'), -}; -</script> -<template> - <li - :id="`issue_${issuable.id}`" - class="issue" - :class="{ today: issueCreatedToday, closed: isClosed }" - :data-id="issuable.id" - :data-labels="labelIdsString" - :data-url="webUrl" - data-qa-selector="issue_container" - :data-qa-issue-title="issuable.title" - > - <div class="gl-display-flex"> - <!-- Bulk edit checkbox --> - <div v-if="isBulkEditing" class="gl-mr-3"> - <input - :id="`selected_issue_${issuable.id}`" - :checked="selected" - class="selected-issuable" - type="checkbox" - :data-id="issuable.id" - @input="onSelect" - /> - </div> - - <!-- Issuable info container --> - <!-- Issuable main info --> - <div class="gl-flex-grow-1"> - <div class="title"> - <span class="issue-title-text"> - <gl-icon - v-if="issuable.confidential" - v-gl-tooltip - name="eye-slash" - class="gl-vertical-align-text-bottom" - :size="16" - :title="$options.confidentialTooltipText" - :aria-label="$options.confidentialTooltipText" - /> - <gl-link - :href="webUrl" - :target="linkTarget" - data-testid="issuable-title" - data-qa-selector="issue_link" - > - {{ issuable.title }} - <gl-icon - v-if="isIssuableUrlExternal" - name="external-link" - class="gl-vertical-align-text-bottom gl-ml-2" - /> - </gl-link> - </span> - <span - v-if="issuable.has_tasks" - class="gl-ml-2 task-status gl-display-none d-sm-inline-block" - >{{ issuable.task_status }}</span - > - </div> - - <div class="issuable-info"> - <span class="js-ref-path gl-mr-4 mr-sm-0"> - <span - v-if="isJiraIssue" - v-safe-html="jiraLogo" - class="svg-container logo-container" - data-testid="jira-logo" - ></span> - {{ referencePath }} - </span> - - <span data-testid="openedByMessage" class="gl-display-none d-sm-inline-block gl-mr-4"> - · - <gl-sprintf :message="openedMessage"> - <template #timeAgoString> - <span>{{ issuableCreatedAt }}</span> - </template> - <template #user> - <gl-link - ref="openedAgoByContainer" - v-bind="popoverDataAttrs" - :href="issuableAuthor.web_url" - :target="linkTarget" - >{{ issuableAuthor.name }}</gl-link - > - </template> - <template #email> - <span>{{ issuable.service_desk_reply_to }}</span> - </template> - </gl-sprintf> - </span> - - <gl-link - v-if="issuable.milestone" - v-gl-tooltip - class="gl-display-none d-sm-inline-block gl-mr-4 js-milestone milestone" - :href="milestoneLink" - :title="milestoneTooltipText" - > - <gl-icon name="clock" class="s16 gl-vertical-align-text-bottom" /> - {{ issuable.milestone.title }} - </gl-link> - - <span - v-if="dueDate" - v-gl-tooltip - class="gl-display-none d-sm-inline-block gl-mr-4 js-due-date" - :class="{ cred: isOverdue }" - :title="__('Due date')" - > - <gl-icon name="calendar" /> - {{ dueDateWords }} - </span> - - <span - v-if="hasWeight" - v-gl-tooltip - :title="__('Weight')" - class="gl-display-none d-sm-inline-block gl-mr-4" - data-testid="weight" - data-qa-selector="issuable_weight_content" - > - <gl-icon name="weight" class="align-text-bottom" /> - {{ issuable.weight }} - </span> - - <issue-health-status - v-if="issuable.health_status" - :health-status="healthStatus" - class="gl-mr-4 issuable-tag-valign" - /> - - <gl-label - v-for="label in issuable.labels" - :key="label.id" - data-qa-selector="issuable-label" - :target="labelHref(label)" - :background-color="label.color" - :description="label.description" - :color="label.text_color" - :title="label.name" - :scoped="isScoped(label)" - size="sm" - class="gl-mr-2 issuable-tag-valign" - >{{ label.name }}</gl-label - > - </div> - </div> - - <!-- Issuable meta --> - <div - class="gl-flex-shrink-0 gl-display-flex gl-flex-direction-column align-items-end gl-justify-content-center" - > - <div class="controls gl-display-flex"> - <span v-if="isJiraIssue" data-testid="issuable-status">{{ issuable.status }}</span> - <span v-else-if="isClosed" class="issuable-status">{{ __('CLOSED') }}</span> - - <issue-assignees - :assignees="issuable.assignees" - class="gl-align-items-center gl-display-flex gl-ml-3" - :icon-size="16" - img-css-classes="gl-mr-2!" - :max-visible="4" - /> - - <template v-for="meta in issuableMeta"> - <span - v-if="meta.visible" - :key="meta.key" - v-gl-tooltip - class="gl-display-none gl-sm-display-flex gl-align-items-center gl-ml-3" - :class="meta.class" - :data-testid="meta.dataTestId" - :title="meta.title" - > - <component :is="issuableMetaComponent(meta.href)" :href="meta.href"> - <gl-icon v-if="meta.icon" :name="meta.icon" /> - {{ meta.value }} - </component> - </span> - </template> - </div> - <div v-gl-tooltip class="issuable-updated-at" :title="updatedDateString"> - {{ updatedDateAgo }} - </div> - </div> - </div> - </li> -</template> diff --git a/app/assets/javascripts/issues_list/components/issuables_list_app.vue b/app/assets/javascripts/issues_list/components/issuables_list_app.vue deleted file mode 100644 index 71136bf0159..00000000000 --- a/app/assets/javascripts/issues_list/components/issuables_list_app.vue +++ /dev/null @@ -1,426 +0,0 @@ -<script> -import { - GlEmptyState, - GlPagination, - GlDeprecatedSkeletonLoading as GlSkeletonLoading, - GlSafeHtmlDirective as SafeHtml, -} from '@gitlab/ui'; -import { toNumber, omit } from 'lodash'; -import createFlash from '~/flash'; -import axios from '~/lib/utils/axios_utils'; -import { scrollToElement, historyPushState } from '~/lib/utils/common_utils'; -import { setUrlParams, queryToObject, getParameterByName } from '~/lib/utils/url_utility'; -import { __ } from '~/locale'; -import initManualOrdering from '~/issues/manual_ordering'; -import FilteredSearchBar from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue'; -import { - sortOrderMap, - availableSortOptionsJira, - RELATIVE_POSITION, - PAGE_SIZE, - PAGE_SIZE_MANUAL, - LOADING_LIST_ITEMS_LENGTH, -} from '../constants'; -import issuableEventHub from '../eventhub'; -import { emptyStateHelper } from '../service_desk_helper'; -import Issuable from './issuable.vue'; - -/** - * @deprecated Use app/assets/javascripts/vue_shared/issuable/list/components/issuable_list_root.vue instead - */ -export default { - LOADING_LIST_ITEMS_LENGTH, - directives: { - SafeHtml, - }, - components: { - GlEmptyState, - GlPagination, - GlSkeletonLoading, - Issuable, - FilteredSearchBar, - }, - props: { - canBulkEdit: { - type: Boolean, - required: false, - default: false, - }, - emptyStateMeta: { - type: Object, - required: true, - }, - endpoint: { - type: String, - required: true, - }, - projectPath: { - type: String, - required: false, - default: '', - }, - sortKey: { - type: String, - required: false, - default: '', - }, - type: { - type: String, - required: false, - default: '', - }, - }, - data() { - return { - availableSortOptionsJira, - filters: {}, - isBulkEditing: false, - issuables: [], - loading: false, - page: getParameterByName('page') !== null ? toNumber(getParameterByName('page')) : 1, - selection: {}, - totalItems: 0, - }; - }, - computed: { - allIssuablesSelected() { - // WARNING: Because we are only keeping track of selected values - // this works, we will need to rethink this if we start tracking - // [id]: false for not selected values. - return this.issuables.length === Object.keys(this.selection).length; - }, - emptyState() { - if (this.issuables.length) { - return {}; // Empty state shouldn't be shown here - } - - if (this.isServiceDesk) { - return emptyStateHelper(this.emptyStateMeta); - } - - if (this.hasFilters) { - return { - title: __('Sorry, your filter produced no results'), - svgPath: this.emptyStateMeta.svgPath, - description: __('To widen your search, change or remove filters above'), - primaryLink: this.emptyStateMeta.createIssuePath, - primaryText: __('New issue'), - }; - } - - if (this.filters.state === 'opened') { - return { - title: __('There are no open issues'), - svgPath: this.emptyStateMeta.svgPath, - description: __('To keep this project going, create a new issue'), - primaryLink: this.emptyStateMeta.createIssuePath, - primaryText: __('New issue'), - }; - } else if (this.filters.state === 'closed') { - return { - title: __('There are no closed issues'), - svgPath: this.emptyStateMeta.svgPath, - }; - } - - return { - title: __('There are no issues to show'), - svgPath: this.emptyStateMeta.svgPath, - description: __( - 'The Issue Tracker is the place to add things that need to be improved or solved in a project. You can register or sign in to create issues for this project.', - ), - }; - }, - hasFilters() { - const ignored = ['utf8', 'state', 'scope', 'order_by', 'sort']; - return Object.keys(omit(this.filters, ignored)).length > 0; - }, - isManualOrdering() { - return this.sortKey === RELATIVE_POSITION; - }, - itemsPerPage() { - return this.isManualOrdering ? PAGE_SIZE_MANUAL : PAGE_SIZE; - }, - baseUrl() { - return window.location.href.replace(/(\?.*)?(#.*)?$/, ''); - }, - paginationNext() { - return this.page + 1; - }, - paginationPrev() { - return this.page - 1; - }, - paginationProps() { - const paginationProps = { value: this.page }; - - if (this.totalItems) { - return { - ...paginationProps, - perPage: this.itemsPerPage, - totalItems: this.totalItems, - }; - } - - return { - ...paginationProps, - prevPage: this.paginationPrev, - nextPage: this.paginationNext, - }; - }, - isServiceDesk() { - return this.type === 'service_desk'; - }, - isJira() { - return this.type === 'jira'; - }, - initialFilterValue() { - const value = []; - const { search } = this.getQueryObject(); - - if (search) { - value.push(search); - } - return value; - }, - initialSortBy() { - const { sort } = this.getQueryObject(); - return sort || 'created_desc'; - }, - }, - watch: { - selection() { - // We need to call nextTick here to wait for all of the boxes to be checked and rendered - // before we query the dom in issuable_bulk_update_actions.js. - this.$nextTick(() => { - issuableEventHub.$emit('issuables:updateBulkEdit'); - }); - }, - issuables() { - this.$nextTick(() => { - initManualOrdering(); - }); - }, - }, - mounted() { - if (this.canBulkEdit) { - this.unsubscribeToggleBulkEdit = issuableEventHub.$on('issuables:toggleBulkEdit', (val) => { - this.isBulkEditing = val; - }); - } - this.fetchIssuables(); - }, - beforeDestroy() { - // eslint-disable-next-line @gitlab/no-global-event-off - issuableEventHub.$off('issuables:toggleBulkEdit'); - }, - methods: { - isSelected(issuableId) { - return Boolean(this.selection[issuableId]); - }, - setSelection(ids) { - ids.forEach((id) => { - this.select(id, true); - }); - }, - clearSelection() { - this.selection = {}; - }, - select(id, isSelect = true) { - if (isSelect) { - this.$set(this.selection, id, true); - } else { - this.$delete(this.selection, id); - } - }, - fetchIssuables(pageToFetch) { - this.loading = true; - - this.clearSelection(); - - this.setFilters(); - - return axios - .get(this.endpoint, { - params: { - ...this.filters, - - with_labels_details: true, - page: pageToFetch || this.page, - per_page: this.itemsPerPage, - }, - }) - .then((response) => { - this.loading = false; - this.issuables = response.data; - this.totalItems = Number(response.headers['x-total']); - this.page = Number(response.headers['x-page']); - }) - .catch(() => { - this.loading = false; - return createFlash({ - message: __('An error occurred while loading issues'), - }); - }); - }, - getQueryObject() { - return queryToObject(window.location.search, { gatherArrays: true }); - }, - onPaginate(newPage) { - if (newPage === this.page) return; - - scrollToElement('#content-body'); - - // NOTE: This allows for the params to be updated on pagination - historyPushState( - setUrlParams({ ...this.filters, page: newPage }, window.location.href, true), - ); - - this.fetchIssuables(newPage); - }, - onSelectAll() { - if (this.allIssuablesSelected) { - this.selection = {}; - } else { - this.setSelection(this.issuables.map(({ id }) => id)); - } - }, - onSelectIssuable({ issuable, selected }) { - if (!this.canBulkEdit) return; - - this.select(issuable.id, selected); - }, - setFilters() { - const { - label_name: labels, - milestone_title: milestoneTitle, - 'not[label_name]': excludedLabels, - 'not[milestone_title]': excludedMilestone, - ...filters - } = this.getQueryObject(); - - // TODO: https://gitlab.com/gitlab-org/gitlab/-/issues/227880 - - if (milestoneTitle) { - filters.milestone = milestoneTitle; - } - if (Array.isArray(labels)) { - filters.labels = labels.join(','); - } - if (!filters.state) { - filters.state = 'opened'; - } - - if (excludedLabels) { - filters['not[labels]'] = excludedLabels; - } - - if (excludedMilestone) { - filters['not[milestone]'] = excludedMilestone; - } - - Object.assign(filters, sortOrderMap[this.sortKey]); - - this.filters = filters; - }, - refetchIssuables() { - const ignored = ['utf8']; - const params = omit(this.filters, ignored); - - historyPushState(setUrlParams(params, window.location.href, true, true)); - this.fetchIssuables(); - }, - handleFilter(filters) { - const searchTokens = []; - - filters.forEach((filter) => { - if (filter.type === 'filtered-search-term') { - if (filter.value.data) { - searchTokens.push(filter.value.data); - } - } - }); - - if (searchTokens.length) { - this.filters.search = searchTokens.join(' '); - } - this.page = 1; - - this.refetchIssuables(); - }, - handleSort(sort) { - this.filters.sort = sort; - this.page = 1; - - this.refetchIssuables(); - }, - }, -}; -</script> - -<template> - <div> - <filtered-search-bar - v-if="isJira" - :namespace="projectPath" - :search-input-placeholder="__('Search Jira issues')" - :tokens="[]" - :sort-options="availableSortOptionsJira" - :initial-filter-value="initialFilterValue" - :initial-sort-by="initialSortBy" - class="row-content-block" - @onFilter="handleFilter" - @onSort="handleSort" - /> - <ul v-if="loading" class="content-list"> - <li v-for="n in $options.LOADING_LIST_ITEMS_LENGTH" :key="n" class="issue gl-px-5! gl-py-5!"> - <gl-skeleton-loading /> - </li> - </ul> - <div v-else-if="issuables.length"> - <div v-if="isBulkEditing" class="issue px-3 py-3 border-bottom border-light"> - <input - id="check-all-issues" - type="checkbox" - :checked="allIssuablesSelected" - class="mr-2" - @click="onSelectAll" - /> - <strong>{{ __('Select all') }}</strong> - </div> - <ul - class="content-list issuable-list issues-list" - :class="{ 'manual-ordering': isManualOrdering }" - > - <issuable - v-for="issuable in issuables" - :key="issuable.id" - class="pr-3" - :class="{ 'user-can-drag': isManualOrdering }" - :issuable="issuable" - :is-bulk-editing="isBulkEditing" - :selected="isSelected(issuable.id)" - :base-url="baseUrl" - @select="onSelectIssuable" - /> - </ul> - <div class="mt-3"> - <gl-pagination - v-bind="paginationProps" - class="gl-justify-content-center" - @input="onPaginate" - /> - </div> - </div> - <gl-empty-state - v-else - :title="emptyState.title" - :svg-path="emptyState.svgPath" - :primary-button-link="emptyState.primaryLink" - :primary-button-text="emptyState.primaryText" - > - <template #description> - <div v-safe-html="emptyState.description"></div> - </template> - </gl-empty-state> - </div> -</template> diff --git a/app/assets/javascripts/issues_list/service_desk_helper.js b/app/assets/javascripts/issues_list/service_desk_helper.js deleted file mode 100644 index 815f338f1a0..00000000000 --- a/app/assets/javascripts/issues_list/service_desk_helper.js +++ /dev/null @@ -1,111 +0,0 @@ -import { __, s__ } from '~/locale'; - -/** - * Generates empty state messages for Service Desk issues list. - * - * @param {emptyStateMeta} emptyStateMeta - Meta data used to generate empty state messages - * @returns {Object} Object containing empty state messages generated using the meta data. - */ -export function generateMessages(emptyStateMeta) { - const { - svgPath, - serviceDeskHelpPage, - serviceDeskAddress, - editProjectPage, - incomingEmailHelpPage, - } = emptyStateMeta; - - const serviceDeskSupportedTitle = s__( - 'ServiceDesk|Use Service Desk to connect with your users and offer customer support through email right inside GitLab', - ); - - const serviceDeskSupportedMessage = s__( - 'ServiceDesk|Issues created from Service Desk emails will appear here. Each comment becomes part of the email conversation.', - ); - - const commonDescription = ` - <span>${serviceDeskSupportedMessage}</span> - <a href="${serviceDeskHelpPage}">${__('Learn more.')}</a>`; - - return { - serviceDeskEnabledAndCanEditProjectSettings: { - title: serviceDeskSupportedTitle, - svgPath, - description: `<p>${s__('ServiceDesk|Your users can send emails to this address:')} - <code>${serviceDeskAddress}</code> - </p> - ${commonDescription}`, - }, - serviceDeskEnabledAndCannotEditProjectSettings: { - title: serviceDeskSupportedTitle, - svgPath, - description: commonDescription, - }, - serviceDeskDisabledAndCanEditProjectSettings: { - title: serviceDeskSupportedTitle, - svgPath, - description: commonDescription, - primaryLink: editProjectPage, - primaryText: s__('ServiceDesk|Enable Service Desk'), - }, - serviceDeskDisabledAndCannotEditProjectSettings: { - title: serviceDeskSupportedTitle, - svgPath, - description: commonDescription, - }, - serviceDeskIsNotSupported: { - title: s__('ServiceDesk|Service Desk is not supported'), - svgPath, - description: s__( - 'ServiceDesk|To enable Service Desk on this instance, an instance administrator must first set up incoming email.', - ), - primaryLink: incomingEmailHelpPage, - primaryText: __('Learn more.'), - }, - serviceDeskIsNotEnabled: { - title: s__('ServiceDesk|Service Desk is not enabled'), - svgPath, - description: s__( - 'ServiceDesk|For help setting up the Service Desk for your instance, please contact an administrator.', - ), - }, - }; -} - -/** - * Returns the attributes used for gl-empty-state in the Service Desk issues list. - * - * @param {Object} emptyStateMeta - Meta data used to generate empty state messages - * @returns {Object} - */ -export function emptyStateHelper(emptyStateMeta) { - const messages = generateMessages(emptyStateMeta); - - const { isServiceDeskSupported, canEditProjectSettings, isServiceDeskEnabled } = emptyStateMeta; - - if (isServiceDeskSupported) { - if (isServiceDeskEnabled && canEditProjectSettings) { - return messages.serviceDeskEnabledAndCanEditProjectSettings; - } - - if (isServiceDeskEnabled && !canEditProjectSettings) { - return messages.serviceDeskEnabledAndCannotEditProjectSettings; - } - - // !isServiceDeskEnabled && canEditProjectSettings - if (canEditProjectSettings) { - return messages.serviceDeskDisabledAndCanEditProjectSettings; - } - - // !isServiceDeskEnabled && !canEditProjectSettings - return messages.serviceDeskDisabledAndCannotEditProjectSettings; - } - - // !serviceDeskSupported && canEditProjectSettings - if (canEditProjectSettings) { - return messages.serviceDeskIsNotSupported; - } - - // !serviceDeskSupported && !canEditProjectSettings - return messages.serviceDeskIsNotEnabled; -} diff --git a/app/assets/javascripts/jira_import/utils/constants.js b/app/assets/javascripts/jira_import/utils/constants.js index 178159be009..4230f85e443 100644 --- a/app/assets/javascripts/jira_import/utils/constants.js +++ b/app/assets/javascripts/jira_import/utils/constants.js @@ -1,5 +1,7 @@ import { __ } from '~/locale'; +export const JIRA_IMPORT_SUCCESS_ALERT_HIDE_MAP_KEY = 'jira-import-success-alert-hide-map'; + export const debounceWait = 500; export const dropdownLabel = __( diff --git a/app/assets/javascripts/jira_import/utils/jira_import_utils.js b/app/assets/javascripts/jira_import/utils/jira_import_utils.js index 4e3b5b2fbde..bd83dd4d219 100644 --- a/app/assets/javascripts/jira_import/utils/jira_import_utils.js +++ b/app/assets/javascripts/jira_import/utils/jira_import_utils.js @@ -1,5 +1,5 @@ import { last } from 'lodash'; -import { JIRA_IMPORT_SUCCESS_ALERT_HIDE_MAP_KEY } from '~/issues_list/constants'; +import { JIRA_IMPORT_SUCCESS_ALERT_HIDE_MAP_KEY } from './constants'; export const IMPORT_STATE = { FAILED: 'failed', diff --git a/app/assets/javascripts/jobs/bridge/app.vue b/app/assets/javascripts/jobs/bridge/app.vue index 67c22712776..c639e49083b 100644 --- a/app/assets/javascripts/jobs/bridge/app.vue +++ b/app/assets/javascripts/jobs/bridge/app.vue @@ -1,20 +1,118 @@ <script> +import { GlLoadingIcon } from '@gitlab/ui'; +import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils'; +import { getIdFromGraphQLId } from '~/graphql_shared/utils'; +import { __, sprintf } from '~/locale'; +import CiHeader from '~/vue_shared/components/header_ci_component.vue'; +import getPipelineQuery from './graphql/queries/pipeline.query.graphql'; import BridgeEmptyState from './components/empty_state.vue'; import BridgeSidebar from './components/sidebar.vue'; +import { SIDEBAR_COLLAPSE_BREAKPOINTS } from './components/constants'; export default { name: 'BridgePageApp', components: { BridgeEmptyState, BridgeSidebar, + CiHeader, + GlLoadingIcon, + }, + inject: ['buildId', 'projectFullPath', 'pipelineIid'], + apollo: { + pipeline: { + query: getPipelineQuery, + variables() { + return { + fullPath: this.projectFullPath, + iid: this.pipelineIid, + }; + }, + update(data) { + if (!data?.project?.pipeline) { + return null; + } + + const { pipeline } = data.project; + const stages = pipeline?.stages.edges.map((edge) => edge.node) || []; + const jobs = stages.map((stage) => stage.jobs.nodes).flat(); + + return { + ...pipeline, + commit: { + ...pipeline.commit, + commit_path: pipeline.commit.webPath, + short_id: pipeline.commit.shortId, + }, + id: getIdFromGraphQLId(pipeline.id), + jobs, + stages, + }; + }, + }, + }, + data() { + return { + isSidebarExpanded: true, + pipeline: {}, + }; + }, + computed: { + bridgeJob() { + return ( + this.pipeline.jobs?.filter( + (job) => getIdFromGraphQLId(job.id) === Number(this.buildId), + )[0] || {} + ); + }, + bridgeName() { + return sprintf(__('Job %{jobName}'), { jobName: this.bridgeJob.name }); + }, + isPipelineLoading() { + return this.$apollo.queries.pipeline.loading; + }, + }, + created() { + window.addEventListener('resize', this.onResize); + }, + mounted() { + this.onResize(); + }, + methods: { + toggleSidebar() { + this.isSidebarExpanded = !this.isSidebarExpanded; + }, + onResize() { + const breakpoint = bp.getBreakpointSize(); + if (SIDEBAR_COLLAPSE_BREAKPOINTS.includes(breakpoint)) { + this.isSidebarExpanded = false; + } else if (!this.isSidebarExpanded) { + this.isSidebarExpanded = true; + } + }, }, }; </script> <template> <div> - <!-- TODO: get job details and show CI header --> - <!-- TODO: add downstream pipeline path --> - <bridge-empty-state downstream-pipeline-path="#" /> - <bridge-sidebar /> + <gl-loading-icon v-if="isPipelineLoading" size="lg" class="gl-mt-4" /> + <div v-else> + <ci-header + class="gl-border-b-1 gl-border-b-solid gl-border-b-gray-100" + :status="bridgeJob.detailedStatus" + :time="bridgeJob.createdAt" + :user="pipeline.user" + :has-sidebar-button="true" + :item-name="bridgeName" + @clickedSidebarButton="toggleSidebar" + /> + <bridge-empty-state :downstream-pipeline-path="bridgeJob.downstreamPipeline.path" /> + <bridge-sidebar + v-if="isSidebarExpanded" + :bridge-job="bridgeJob" + :commit="pipeline.commit" + :is-sidebar-expanded="isSidebarExpanded" + @toggleSidebar="toggleSidebar" + /> + </div> </div> </template> diff --git a/app/assets/javascripts/jobs/bridge/components/sidebar.vue b/app/assets/javascripts/jobs/bridge/components/sidebar.vue index 68b767408f0..3ba07cf55d1 100644 --- a/app/assets/javascripts/jobs/bridge/components/sidebar.vue +++ b/app/assets/javascripts/jobs/bridge/components/sidebar.vue @@ -1,14 +1,13 @@ <script> import { GlButton, GlDropdown, GlDropdownItem } from '@gitlab/ui'; -import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils'; import { __ } from '~/locale'; +import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue'; import { JOB_SIDEBAR } from '../../constants'; -import { SIDEBAR_COLLAPSE_BREAKPOINTS } from './constants'; +import CommitBlock from '../../components/commit_block.vue'; export default { styles: { - top: '75px', width: '290px', }, name: 'BridgeSidebar', @@ -18,40 +17,47 @@ export default { retryTriggerJob: __('Retry the trigger job'), retryDownstreamPipeline: __('Retry the downstream pipeline'), }, - borderTopClass: ['gl-border-t-solid', 'gl-border-t-1', 'gl-border-t-gray-100'], + sectionClass: ['gl-border-t-solid', 'gl-border-t-1', 'gl-border-t-gray-100', 'gl-py-5'], components: { + CommitBlock, GlButton, GlDropdown, GlDropdownItem, TooltipOnTruncate, }, - inject: { - buildName: { - type: String, - default: '', + mixins: [glFeatureFlagsMixin()], + props: { + bridgeJob: { + type: Object, + required: true, + }, + commit: { + type: Object, + required: true, }, }, data() { return { - isSidebarExpanded: true, + topPosition: 0, }; }, - created() { - window.addEventListener('resize', this.onResize); + computed: { + rootStyle() { + return { ...this.$options.styles, top: `${this.topPosition}px` }; + }, }, mounted() { - this.onResize(); + this.setTopPosition(); }, methods: { - toggleSidebar() { - this.isSidebarExpanded = !this.isSidebarExpanded; + onSidebarButtonClick() { + this.$emit('toggleSidebar'); }, - onResize() { - const breakpoint = bp.getBreakpointSize(); - if (SIDEBAR_COLLAPSE_BREAKPOINTS.includes(breakpoint)) { - this.isSidebarExpanded = false; - } else if (!this.isSidebarExpanded) { - this.isSidebarExpanded = true; + setTopPosition() { + const navbarEl = document.querySelector('.js-navbar'); + + if (navbarEl) { + this.topPosition = navbarEl.getBoundingClientRect().bottom; } }, }, @@ -60,19 +66,19 @@ export default { <template> <aside class="gl-fixed gl-right-0 gl-px-5 gl-bg-gray-10 gl-h-full gl-border-l-solid gl-border-1 gl-border-gray-100 gl-z-index-200 gl-overflow-hidden" - :style="this.$options.styles" - :class="{ - 'gl-display-none': !isSidebarExpanded, - }" + :style="rootStyle" > <div class="gl-py-5 gl-display-flex gl-align-items-center"> - <tooltip-on-truncate :title="buildName" truncate-target="child" + <tooltip-on-truncate :title="bridgeJob.name" truncate-target="child" ><h4 class="gl-mb-0 gl-mr-2 gl-text-truncate"> - {{ buildName }} + {{ bridgeJob.name }} </h4> </tooltip-on-truncate> <!-- TODO: implement retry actions --> - <div class="gl-flex-grow-1 gl-flex-shrink-0 gl-text-right"> + <div + v-if="glFeatures.triggerJobRetryAction" + class="gl-flex-grow-1 gl-flex-shrink-0 gl-text-right" + > <gl-dropdown :text="$options.i18n.retryButton" category="primary" @@ -90,9 +96,10 @@ export default { category="tertiary" class="gl-md-display-none gl-ml-2" icon="chevron-double-lg-right" - @click="toggleSidebar" + @click="onSidebarButtonClick" /> </div> - <!-- TODO: get job details and show commit block, stage dropdown, jobs list --> + <commit-block :commit="commit" :class="$options.sectionClass" /> + <!-- TODO: show stage dropdown, jobs list --> </aside> </template> diff --git a/app/assets/javascripts/jobs/bridge/graphql/queries/pipeline.query.graphql b/app/assets/javascripts/jobs/bridge/graphql/queries/pipeline.query.graphql new file mode 100644 index 00000000000..338ca9f16c7 --- /dev/null +++ b/app/assets/javascripts/jobs/bridge/graphql/queries/pipeline.query.graphql @@ -0,0 +1,70 @@ +query getPipelineData($fullPath: ID!, $iid: ID!) { + project(fullPath: $fullPath) { + id + pipeline(iid: $iid) { + id + iid + path + sha + ref + refPath + commit { + id + shortId + title + webPath + } + detailedStatus { + id + icon + group + } + stages { + edges { + node { + id + name + jobs { + nodes { + id + createdAt + name + scheduledAt + startedAt + status + triggered + detailedStatus { + id + detailsPath + icon + group + text + tooltip + } + downstreamPipeline { + id + path + } + stage { + id + name + } + } + } + } + } + } + user { + id + avatarUrl + name + username + webPath + webUrl + status { + message + } + } + } + } +} diff --git a/app/assets/javascripts/jobs/components/job_log_controllers.vue b/app/assets/javascripts/jobs/components/job_log_controllers.vue index 97141a27a5e..8e35fd91481 100644 --- a/app/assets/javascripts/jobs/components/job_log_controllers.vue +++ b/app/assets/javascripts/jobs/components/job_log_controllers.vue @@ -107,6 +107,7 @@ export default { :data-confirm="__('Are you sure you want to erase this build?')" class="gl-ml-3" data-testid="job-log-erase-link" + data-confirm-btn-variant="danger" data-method="post" icon="remove" /> diff --git a/app/assets/javascripts/jobs/components/sidebar_job_details_container.vue b/app/assets/javascripts/jobs/components/sidebar_job_details_container.vue index 5451cd21c14..5428f657252 100644 --- a/app/assets/javascripts/jobs/components/sidebar_job_details_container.vue +++ b/app/assets/javascripts/jobs/components/sidebar_job_details_container.vue @@ -1,5 +1,6 @@ <script> import { mapState } from 'vuex'; +import { GlBadge } from '@gitlab/ui'; import { helpPagePath } from '~/helpers/help_page_helper'; import { timeIntervalInWords } from '~/lib/utils/datetime_utility'; import { __, sprintf } from '~/locale'; @@ -10,6 +11,7 @@ export default { name: 'JobSidebarDetailsContainer', components: { DetailRow, + GlBadge, }, mixins: [timeagoMixin], computed: { @@ -100,12 +102,7 @@ export default { <p v-if="hasTags" class="build-detail-row" data-testid="job-tags"> <span class="font-weight-bold">{{ __('Tags:') }}</span> - <span - v-for="(tag, i) in job.tags" - :key="i" - class="badge badge-pill badge-primary gl-badge sm" - >{{ tag }}</span - > + <gl-badge v-for="(tag, i) in job.tags" :key="i" variant="info">{{ tag }}</gl-badge> </p> </div> </template> diff --git a/app/assets/javascripts/jobs/index.js b/app/assets/javascripts/jobs/index.js index e078a6c2319..6e958ea1842 100644 --- a/app/assets/javascripts/jobs/index.js +++ b/app/assets/javascripts/jobs/index.js @@ -54,7 +54,13 @@ const initializeJobPage = (element) => { }; const initializeBridgePage = (el) => { - const { buildName, emptyStateIllustrationPath } = el.dataset; + const { + buildId, + downstreamPipelinePath, + emptyStateIllustrationPath, + pipelineIid, + projectFullPath, + } = el.dataset; Vue.use(VueApollo); const apolloProvider = new VueApollo({ @@ -65,8 +71,11 @@ const initializeBridgePage = (el) => { el, apolloProvider, provide: { - buildName, + buildId, + downstreamPipelinePath, emptyStateIllustrationPath, + pipelineIid, + projectFullPath, }, render(h) { return h(BridgeApp); diff --git a/app/assets/javascripts/labels/components/delete_label_modal.vue b/app/assets/javascripts/labels/components/delete_label_modal.vue index 1ff0938d086..2be404de1e1 100644 --- a/app/assets/javascripts/labels/components/delete_label_modal.vue +++ b/app/assets/javascripts/labels/components/delete_label_modal.vue @@ -56,6 +56,7 @@ export default { </gl-sprintf> </template> <gl-sprintf + v-if="subjectName" :message=" __( `%{strongStart}${labelName}%{strongEnd} will be permanently deleted from ${subjectName}. This cannot be undone.`, @@ -66,6 +67,18 @@ export default { <strong>{{ content }}</strong> </template> </gl-sprintf> + <gl-sprintf + v-else + :message=" + __( + `%{strongStart}${labelName}%{strongEnd} will be permanently deleted. This cannot be undone.`, + ) + " + > + <template #strong="{ content }"> + <strong>{{ content }}</strong> + </template> + </gl-sprintf> <template #modal-footer> <gl-button category="secondary" @click="closeModal">{{ __('Cancel') }}</gl-button> <gl-button diff --git a/app/assets/javascripts/labels/create_label_dropdown.js b/app/assets/javascripts/labels/create_label_dropdown.js index 8c166158a44..033ca9dd3ea 100644 --- a/app/assets/javascripts/labels/create_label_dropdown.js +++ b/app/assets/javascripts/labels/create_label_dropdown.js @@ -16,6 +16,7 @@ export default class CreateLabelDropdown { this.$colorPreview = $('.js-dropdown-label-color-preview', this.$el); this.$addList = $('.js-add-list', this.$el); this.$newLabelError = $('.js-label-error', this.$el); + this.$newLabelErrorContent = $('.gl-alert-content', this.$newLabelError); this.$newLabelCreateButton = $('.js-new-label-btn', this.$el); this.$colorSuggestions = $('.suggest-colors-dropdown a', this.$el); @@ -119,7 +120,8 @@ export default class CreateLabelDropdown { .join('<br/>'); } - this.$newLabelError.html(errors).show(); + this.$newLabelErrorContent.html(errors); + this.$newLabelError.show(); } else { const addNewList = this.$addList.is(':checked'); this.$dropdownBack.trigger('click'); diff --git a/app/assets/javascripts/labels/index.js b/app/assets/javascripts/labels/index.js index 22a9c0a89c0..e87ad8d9a06 100644 --- a/app/assets/javascripts/labels/index.js +++ b/app/assets/javascripts/labels/index.js @@ -26,7 +26,7 @@ export function initLabels() { if ($('.prioritized-labels').length) { new LabelManager(); // eslint-disable-line no-new } - $('.label-subscription').each((i, el) => { + $('.js-label-subscription').each((i, el) => { const $el = $(el); if ($el.find('.dropdown-group-label').length) { diff --git a/app/assets/javascripts/lib/mermaid.js b/app/assets/javascripts/lib/mermaid.js new file mode 100644 index 00000000000..d621c9ddf9e --- /dev/null +++ b/app/assets/javascripts/lib/mermaid.js @@ -0,0 +1,61 @@ +import mermaid from 'mermaid'; +import { getParameterByName } from '~/lib/utils/url_utility'; + +const setIframeRenderedSize = (h, w) => { + const { origin } = window.location; + window.parent.postMessage({ h, w }, origin); +}; + +const drawDiagram = (source) => { + const element = document.getElementById('app'); + const insertSvg = (svgCode) => { + element.innerHTML = svgCode; + + const height = parseInt(element.firstElementChild.getAttribute('height'), 10); + const width = parseInt(element.firstElementChild.style.maxWidth, 10); + setIframeRenderedSize(height, width); + }; + mermaid.mermaidAPI.render('mermaid', source, insertSvg); +}; + +const darkModeEnabled = () => getParameterByName('darkMode') === 'true'; + +const initMermaid = () => { + let theme = 'neutral'; + + if (darkModeEnabled()) { + theme = 'dark'; + } + + mermaid.initialize({ + // mermaid core options + mermaid: { + startOnLoad: false, + }, + // mermaidAPI options + theme, + flowchart: { + useMaxWidth: true, + htmlLabels: true, + }, + secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize', 'htmlLabels'], + securityLevel: 'strict', + }); +}; + +const addListener = () => { + window.addEventListener( + 'message', + (event) => { + if (event.origin !== window.location.origin) { + return; + } + drawDiagram(event.data); + }, + false, + ); +}; + +addListener(); +initMermaid(); +export default {}; diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js index 7235b38848c..eff00dff7a7 100644 --- a/app/assets/javascripts/lib/utils/common_utils.js +++ b/app/assets/javascripts/lib/utils/common_utils.js @@ -181,6 +181,7 @@ export const contentTop = () => { }, () => getOuterHeight('.merge-request-tabs'), () => getOuterHeight('.js-diff-files-changed'), + () => getOuterHeight('.issue-sticky-header.gl-fixed'), ({ desktop }) => { const diffsTabIsActive = window.mrTabs?.currentAction === 'diffs'; let size; @@ -746,3 +747,12 @@ export const isLoggedIn = () => Boolean(window.gon?.current_user_id); */ export const convertArrayOfObjectsToCamelCase = (array) => array.map((o) => convertObjectPropsToCamelCase(o)); + +export const getFirstPropertyValue = (data) => { + if (!data) return null; + + const [key] = Object.keys(data); + if (!key) return null; + + return data[key]; +}; diff --git a/app/assets/javascripts/lib/utils/constants.js b/app/assets/javascripts/lib/utils/constants.js index a108b02bcbf..36c6545164e 100644 --- a/app/assets/javascripts/lib/utils/constants.js +++ b/app/assets/javascripts/lib/utils/constants.js @@ -17,7 +17,6 @@ export const BV_HIDE_MODAL = 'bv::hide::modal'; export const BV_HIDE_TOOLTIP = 'bv::hide::tooltip'; export const BV_DROPDOWN_SHOW = 'bv::dropdown::show'; export const BV_DROPDOWN_HIDE = 'bv::dropdown::hide'; -export const BV_COLLAPSE_STATE = 'bv::collapse::state'; export const DEFAULT_TH_CLASSES = 'gl-bg-transparent! gl-border-b-solid! gl-border-b-gray-100! gl-p-5! gl-border-b-1!'; diff --git a/app/assets/javascripts/lib/utils/resize_observer.js b/app/assets/javascripts/lib/utils/resize_observer.js new file mode 100644 index 00000000000..e72c6fe1679 --- /dev/null +++ b/app/assets/javascripts/lib/utils/resize_observer.js @@ -0,0 +1,58 @@ +import { contentTop } from './common_utils'; + +const interactionEvents = ['mousedown', 'touchstart', 'keydown', 'wheel']; + +export function createResizeObserver() { + return new ResizeObserver((entries) => { + entries.forEach((entry) => { + entry.target.dispatchEvent(new CustomEvent(`ResizeUpdate`, { detail: { entry } })); + }); + }); +} + +// watches for change in size of a container element (e.g. for lazy-loaded images) +// and scroll the target element to the top of the content area +// stop watching after any user input. So if user opens sidebar or manually +// scrolls the page we don't hijack their scroll position +export function scrollToTargetOnResize({ + target = window.location.hash, + container = '#content-body', +} = {}) { + if (!target) return null; + + const ro = createResizeObserver(); + const containerEl = document.querySelector(container); + let interactionListenersAdded = false; + + function keepTargetAtTop() { + const anchorEl = document.querySelector(target); + + if (!anchorEl) return; + + const anchorTop = anchorEl.getBoundingClientRect().top + window.scrollY; + const top = anchorTop - contentTop(); + document.documentElement.scrollTo({ + top, + }); + + if (!interactionListenersAdded) { + interactionEvents.forEach((event) => + // eslint-disable-next-line no-use-before-define + document.addEventListener(event, removeListeners), + ); + interactionListenersAdded = true; + } + } + + function removeListeners() { + interactionEvents.forEach((event) => document.removeEventListener(event, removeListeners)); + + ro.unobserve(containerEl); + containerEl.removeEventListener('ResizeUpdate', keepTargetAtTop); + } + + containerEl.addEventListener('ResizeUpdate', keepTargetAtTop); + + ro.observe(containerEl); + return ro; +} diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js index e221a54d9c6..376134afef0 100644 --- a/app/assets/javascripts/main.js +++ b/app/assets/javascripts/main.js @@ -101,6 +101,21 @@ function deferredInitialisation() { initFeatureHighlight(); initCopyCodeButton(); + const helpToggle = document.querySelector('.header-help-dropdown-toggle'); + if (helpToggle) { + helpToggle.addEventListener( + 'click', + () => { + import(/* webpackChunkName: 'versionCheck' */ './gitlab_version_check') + .then(({ default: initGitlabVersionCheck }) => { + initGitlabVersionCheck(); + }) + .catch(() => {}); + }, + { once: true }, + ); + } + const search = document.querySelector('#search'); if (search) { search.addEventListener( diff --git a/app/assets/javascripts/members/components/table/members_table.vue b/app/assets/javascripts/members/components/table/members_table.vue index de733ae75df..e09d16cf680 100644 --- a/app/assets/javascripts/members/components/table/members_table.vue +++ b/app/assets/javascripts/members/components/table/members_table.vue @@ -6,6 +6,7 @@ import { canOverride, canRemove, canResend, canUpdate } from 'ee_else_ce/members import { mergeUrlParams } from '~/lib/utils/url_utility'; import initUserPopovers from '~/user_popovers'; import { + FIELD_KEY_ACTIONS, FIELDS, ACTIVE_TAB_QUERY_PARAM_NAME, TAB_QUERY_PARAM_VALUES, @@ -63,17 +64,10 @@ export default { return state[this.namespace].pagination; }, }), - filteredFields() { + filteredAndModifiedFields() { return FIELDS.filter( (field) => this.tableFields.includes(field.key) && this.showField(field), - ).map((field) => { - const tdClassFunction = this[field.tdClassFunction]; - - return { - ...field, - ...(tdClassFunction && { tdClass: tdClassFunction }), - }; - }); + ).map(this.modifyFieldDefinition); }, userIsLoggedIn() { return this.currentUserId !== null; @@ -100,20 +94,29 @@ export default { ); }, showField(field) { - if (!Object.prototype.hasOwnProperty.call(field, 'showFunction')) { - return true; - } + switch (field.key) { + case FIELD_KEY_ACTIONS: + if (!this.userIsLoggedIn) { + return false; + } - return this[field.showFunction](); + return this.members.some((member) => this.hasActionButtons(member)); + default: + return true; + } }, - showActionsField() { - if (!this.userIsLoggedIn) { - return false; + modifyFieldDefinition(field) { + switch (field.key) { + case FIELD_KEY_ACTIONS: + return { + ...field, + tdClass: this.actionsFieldTdClass, + }; + default: + return field; } - - return this.members.some((member) => this.hasActionButtons(member)); }, - tdClassActions(value, key, member) { + actionsFieldTdClass(value, key, member) { if (this.hasActionButtons(member)) { return 'col-actions'; } @@ -219,7 +222,7 @@ export default { data-testid="members-table" head-variant="white" stacked="lg" - :fields="filteredFields" + :fields="filteredAndModifiedFields" :items="members" primary-key="id" thead-class="border-bottom" diff --git a/app/assets/javascripts/members/constants.js b/app/assets/javascripts/members/constants.js index f5ca881ab0d..62241eaed04 100644 --- a/app/assets/javascripts/members/constants.js +++ b/app/assets/javascripts/members/constants.js @@ -1,8 +1,18 @@ import { __ } from '~/locale'; +export const FIELD_KEY_ACCOUNT = 'account'; +export const FIELD_KEY_SOURCE = 'source'; +export const FIELD_KEY_GRANTED = 'granted'; +export const FIELD_KEY_INVITED = 'invited'; +export const FIELD_KEY_REQUESTED = 'requested'; +export const FIELD_KEY_MAX_ROLE = 'maxRole'; +export const FIELD_KEY_EXPIRATION = 'expiration'; +export const FIELD_KEY_LAST_SIGN_IN = 'lastSignIn'; +export const FIELD_KEY_ACTIONS = 'actions'; + export const FIELDS = [ { - key: 'account', + key: FIELD_KEY_ACCOUNT, label: __('Account'), sort: { asc: 'name_asc', @@ -10,13 +20,13 @@ export const FIELDS = [ }, }, { - key: 'source', + key: FIELD_KEY_SOURCE, label: __('Source'), thClass: 'col-meta', tdClass: 'col-meta', }, { - key: 'granted', + key: FIELD_KEY_GRANTED, label: __('Access granted'), thClass: 'col-meta', tdClass: 'col-meta', @@ -26,19 +36,19 @@ export const FIELDS = [ }, }, { - key: 'invited', + key: FIELD_KEY_INVITED, label: __('Invited'), thClass: 'col-meta', tdClass: 'col-meta', }, { - key: 'requested', + key: FIELD_KEY_REQUESTED, label: __('Requested'), thClass: 'col-meta', tdClass: 'col-meta', }, { - key: 'maxRole', + key: FIELD_KEY_MAX_ROLE, label: __('Max role'), thClass: 'col-max-role', tdClass: 'col-max-role', @@ -48,13 +58,13 @@ export const FIELDS = [ }, }, { - key: 'expiration', + key: FIELD_KEY_EXPIRATION, label: __('Expiration'), thClass: 'col-expiration', tdClass: 'col-expiration', }, { - key: 'lastSignIn', + key: FIELD_KEY_LAST_SIGN_IN, label: __('Last sign-in'), sort: { asc: 'recent_sign_in', @@ -62,10 +72,8 @@ export const FIELDS = [ }, }, { - key: 'actions', + key: FIELD_KEY_ACTIONS, thClass: 'col-actions', - showFunction: 'showActionsField', - tdClassFunction: 'tdClassActions', }, ]; diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/details_header.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/details_header.vue index d988ad8d8ca..29c181f04fb 100644 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/details_header.vue +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/details_header.vue @@ -143,6 +143,7 @@ export default { </template> <template #right-actions> <gl-dropdown + v-if="!deleteButtonDisabled" icon="ellipsis_v" text="More actions" :text-sr-only="true" @@ -150,11 +151,7 @@ export default { no-caret right > - <gl-dropdown-item - variant="danger" - :disabled="deleteButtonDisabled" - @click="$emit('delete')" - > + <gl-dropdown-item variant="danger" @click="$emit('delete')"> {{ __('Delete image repository') }} </gl-dropdown-item> </gl-dropdown> diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/empty_state.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/empty_state.vue deleted file mode 100644 index a16d95a6b30..00000000000 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/empty_state.vue +++ /dev/null @@ -1,44 +0,0 @@ -<script> -import { GlEmptyState } from '@gitlab/ui'; -import { - NO_TAGS_TITLE, - NO_TAGS_MESSAGE, - MISSING_OR_DELETED_IMAGE_TITLE, - MISSING_OR_DELETED_IMAGE_MESSAGE, -} from '../../constants/index'; - -export default { - components: { - GlEmptyState, - }, - props: { - noContainersImage: { - type: String, - required: false, - default: '', - }, - isEmptyImage: { - type: Boolean, - default: false, - required: false, - }, - }, - computed: { - title() { - return this.isEmptyImage ? MISSING_OR_DELETED_IMAGE_TITLE : NO_TAGS_TITLE; - }, - description() { - return this.isEmptyImage ? MISSING_OR_DELETED_IMAGE_MESSAGE : NO_TAGS_MESSAGE; - }, - }, -}; -</script> - -<template> - <gl-empty-state - :title="title" - :svg-path="noContainersImage" - :description="description" - class="gl-mx-auto gl-my-0" - /> -</template> diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list.vue index 2d32295b537..4fda4058711 100644 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list.vue +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list.vue @@ -1,28 +1,38 @@ <script> +import { GlEmptyState } from '@gitlab/ui'; import createFlash from '~/flash'; import { n__ } from '~/locale'; import { joinPaths } from '~/lib/utils/url_utility'; import RegistryList from '~/packages_and_registries/shared/components/registry_list.vue'; + +import PersistedSearch from '~/packages_and_registries/shared/components/persisted_search.vue'; +import { FILTERED_SEARCH_TERM } from '~/packages_and_registries/shared/constants'; import { REMOVE_TAGS_BUTTON_TITLE, TAGS_LIST_TITLE, GRAPHQL_PAGE_SIZE, FETCH_IMAGES_LIST_ERROR_MESSAGE, + NAME_SORT_FIELD, + NO_TAGS_TITLE, + NO_TAGS_MESSAGE, + NO_TAGS_MATCHING_FILTERS_TITLE, + NO_TAGS_MATCHING_FILTERS_DESCRIPTION, } from '../../constants/index'; import getContainerRepositoryTagsQuery from '../../graphql/queries/get_container_repository_tags.query.graphql'; -import EmptyState from './empty_state.vue'; import TagsListRow from './tags_list_row.vue'; import TagsLoader from './tags_loader.vue'; export default { name: 'TagsList', components: { + GlEmptyState, TagsListRow, - EmptyState, TagsLoader, RegistryList, + PersistedSearch, }, inject: ['config'], + props: { id: { type: [Number, String], @@ -44,6 +54,7 @@ export default { required: false, }, }, + searchConfig: { NAME_SORT_FIELD }, i18n: { REMOVE_TAGS_BUTTON_TITLE, TAGS_LIST_TITLE, @@ -51,6 +62,9 @@ export default { apollo: { containerRepository: { query: getContainerRepositoryTagsQuery, + skip() { + return !this.sort; + }, variables() { return this.queryVariables; }, @@ -62,6 +76,8 @@ export default { data() { return { containerRepository: {}, + filters: {}, + sort: null, }; }, computed: { @@ -78,6 +94,8 @@ export default { return { id: joinPaths(this.config.gidPrefix, `${this.id}`), first: GRAPHQL_PAGE_SIZE, + name: this.filters?.name, + sort: this.sort, }; }, showMultiDeleteButton() { @@ -87,7 +105,16 @@ export default { return this.tags.length === 0; }, isLoading() { - return this.isImageLoading || this.$apollo.queries.containerRepository.loading; + return this.isImageLoading || this.$apollo.queries.containerRepository.loading || !this.sort; + }, + hasFilters() { + return this.filters?.name; + }, + emptyStateTitle() { + return this.hasFilters ? NO_TAGS_MATCHING_FILTERS_TITLE : NO_TAGS_TITLE; + }, + emptyStateDescription() { + return this.hasFilters ? NO_TAGS_MATCHING_FILTERS_DESCRIPTION : NO_TAGS_MESSAGE; }, }, methods: { @@ -114,15 +141,47 @@ export default { }, }); }, + handleSearchUpdate({ sort, filters }) { + this.sort = sort; + + const parsed = { + name: '', + }; + + // This takes in account the fact that we will be adding more filters types + // this is why is an object and not an array or a simple string + this.filters = filters.reduce((acc, filter) => { + if (filter.type === FILTERED_SEARCH_TERM) { + return { + ...acc, + name: `${acc.name} ${filter.value.data}`.trim(), + }; + } + return acc; + }, parsed); + }, }, }; </script> <template> <div> + <persisted-search + class="gl-mb-5" + :sortable-fields="[$options.searchConfig.NAME_SORT_FIELD]" + :default-order="$options.searchConfig.NAME_SORT_FIELD.orderBy" + default-sort="asc" + @update="handleSearchUpdate" + /> <tags-loader v-if="isLoading" /> <template v-else> - <empty-state v-if="hasNoTags" :no-containers-image="config.noContainersImage" /> + <gl-empty-state + v-if="hasNoTags" + :title="emptyStateTitle" + :svg-path="config.noContainersImage" + :description="emptyStateDescription" + class="gl-mx-auto gl-my-0" + /> <template v-else> <registry-list :title="listTitle" diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list_row.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list_row.vue index 0556fd298aa..15d92ab0ef7 100644 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list_row.vue +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list_row.vue @@ -107,11 +107,8 @@ export default { isInvalidTag() { return !this.tag.digest; }, - isCheckboxDisabled() { - return this.isInvalidTag || this.disabled; - }, isDeleteDisabled() { - return this.isInvalidTag || this.disabled || !this.tag.canDelete; + return this.disabled || !this.tag.canDelete; }, }, }; @@ -122,7 +119,7 @@ export default { <template #left-action> <gl-form-checkbox v-if="tag.canDelete" - :disabled="isCheckboxDisabled" + :disabled="disabled" class="gl-m-0" :checked="selected" @change="$emit('select')" diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/common.js b/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/common.js index f7beec2c935..17adaec7a7d 100644 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/common.js +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/common.js @@ -2,3 +2,5 @@ import { s__, __ } from '~/locale'; export const ROOT_IMAGE_TEXT = s__('ContainerRegistry|Root image'); export const MORE_ACTIONS_TEXT = __('More actions'); + +export const NAME_SORT_FIELD = { orderBy: 'NAME', label: __('Name') }; diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/details.js b/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/details.js index 19e1a75fb2f..8b8769a884d 100644 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/details.js +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/details.js @@ -116,6 +116,13 @@ export const ROOT_IMAGE_TOOLTIP = s__( 'ContainerRegistry|Image repository with no name located at the project URL.', ); +export const NO_TAGS_MATCHING_FILTERS_TITLE = s__( + 'ContainerRegistry|The filter returned no results', +); +export const NO_TAGS_MATCHING_FILTERS_DESCRIPTION = s__( + 'ContainerRegistry|Please try different search criteria', +); + // Parameters export const DEFAULT_PAGE = 1; diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/list.js b/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/list.js index d21a154d1b8..7fa950ccfd0 100644 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/list.js +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/list.js @@ -1,4 +1,5 @@ import { s__, __ } from '~/locale'; +import { NAME_SORT_FIELD } from './common'; // Translations strings @@ -49,5 +50,5 @@ export const GRAPHQL_PAGE_SIZE = 10; export const SORT_FIELDS = [ { orderBy: 'UPDATED', label: __('Updated') }, { orderBy: 'CREATED', label: __('Created') }, - { orderBy: 'NAME', label: __('Name') }, + NAME_SORT_FIELD, ]; diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/graphql/queries/get_container_repository_tags.query.graphql b/app/assets/javascripts/packages_and_registries/container_registry/explorer/graphql/queries/get_container_repository_tags.query.graphql index 502382010f9..d753d33a02c 100644 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/graphql/queries/get_container_repository_tags.query.graphql +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/graphql/queries/get_container_repository_tags.query.graphql @@ -6,11 +6,13 @@ query getContainerRepositoryTags( $last: Int $after: String $before: String + $name: String + $sort: ContainerRepositoryTagSort ) { containerRepository(id: $id) { id tagsCount - tags(after: $after, before: $before, first: $first, last: $last) { + tags(after: $after, before: $before, first: $first, last: $last, name: $name, sort: $sort) { nodes { digest location diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/index.js b/app/assets/javascripts/packages_and_registries/container_registry/explorer/index.js index 246a6768593..ca5bd8d6964 100644 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/index.js +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/index.js @@ -3,7 +3,8 @@ import Vue from 'vue'; import { parseBoolean } from '~/lib/utils/common_utils'; import PerformancePlugin from '~/performance/vue_performance_plugin'; import Translate from '~/vue_shared/translate'; -import RegistryBreadcrumb from './components/registry_breadcrumb.vue'; +import RegistryBreadcrumb from '~/packages_and_registries/shared/components/registry_breadcrumb.vue'; +import { renderBreadcrumb } from '~/packages_and_registries/shared/utils'; import { apolloProvider } from './graphql/index'; import RegistryExplorer from './pages/index.vue'; import createRouter from './router'; @@ -84,38 +85,8 @@ export default () => { }, }); - const attachBreadcrumb = () => { - const breadCrumbEls = document.querySelectorAll('nav .js-breadcrumbs-list li'); - const breadCrumbEl = breadCrumbEls[breadCrumbEls.length - 1]; - const crumbs = [breadCrumbEl.querySelector('h2')]; - const nestedBreadcrumbEl = document.createElement('div'); - breadCrumbEl.replaceChild(nestedBreadcrumbEl, breadCrumbEl.querySelector('h2')); - return new Vue({ - el: nestedBreadcrumbEl, - router, - apolloProvider, - components: { - RegistryBreadcrumb, - }, - render(createElement) { - // FIXME(@tnir): this is a workaround until the MR gets merged: - // https://gitlab.com/gitlab-org/gitlab/-/merge_requests/48115 - const parentEl = breadCrumbEl.parentElement.parentElement; - if (parentEl) { - parentEl.classList.remove('breadcrumbs-container'); - parentEl.classList.add('gl-display-flex'); - parentEl.classList.add('w-100'); - } - // End of FIXME(@tnir) - return createElement('registry-breadcrumb', { - class: breadCrumbEl.className, - props: { - crumbs, - }, - }); - }, - }); + return { + attachBreadcrumb: renderBreadcrumb(router, apolloProvider, RegistryBreadcrumb), + attachMainComponent, }; - - return { attachBreadcrumb, attachMainComponent }; }; diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/details.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/details.vue index bc6e3091f0e..bb687ffdb89 100644 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/details.vue +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/details.vue @@ -1,5 +1,5 @@ <script> -import { GlResizeObserverDirective } from '@gitlab/ui'; +import { GlResizeObserverDirective, GlEmptyState } from '@gitlab/ui'; import { GlBreakpointInstance } from '@gitlab/ui/dist/utils'; import createFlash from '~/flash'; import axios from '~/lib/utils/axios_utils'; @@ -9,7 +9,6 @@ import DeleteImage from '../components/delete_image.vue'; import DeleteAlert from '../components/details_page/delete_alert.vue'; import DeleteModal from '../components/details_page/delete_modal.vue'; import DetailsHeader from '../components/details_page/details_header.vue'; -import EmptyState from '../components/details_page/empty_state.vue'; import PartialCleanupAlert from '../components/details_page/partial_cleanup_alert.vue'; import StatusAlert from '../components/details_page/status_alert.vue'; import TagsList from '../components/details_page/tags_list.vue'; @@ -26,6 +25,8 @@ import { MISSING_OR_DELETED_IMAGE_BREADCRUMB, ROOT_IMAGE_TEXT, GRAPHQL_PAGE_SIZE, + MISSING_OR_DELETED_IMAGE_TITLE, + MISSING_OR_DELETED_IMAGE_MESSAGE, } from '../constants/index'; import deleteContainerRepositoryTagsMutation from '../graphql/mutations/delete_container_repository_tags.mutation.graphql'; import getContainerRepositoryDetailsQuery from '../graphql/queries/get_container_repository_details.query.graphql'; @@ -34,13 +35,13 @@ import getContainerRepositoryTagsQuery from '../graphql/queries/get_container_re export default { name: 'RegistryDetailsPage', components: { + GlEmptyState, DeleteAlert, PartialCleanupAlert, DetailsHeader, DeleteModal, TagsList, TagsLoader, - EmptyState, StatusAlert, DeleteImage, }, @@ -49,6 +50,10 @@ export default { }, mixins: [Tracking.mixin()], inject: ['breadCrumbState', 'config'], + i18n: { + MISSING_OR_DELETED_IMAGE_TITLE, + MISSING_OR_DELETED_IMAGE_MESSAGE, + }, apollo: { containerRepository: { query: getContainerRepositoryDetailsQuery, @@ -230,6 +235,12 @@ export default { @cancel="track('cancel_delete')" /> </template> - <empty-state v-else is-empty-image :no-containers-image="config.noContainersImage" /> + <gl-empty-state + v-else + :title="$options.i18n.MISSING_OR_DELETED_IMAGE_TITLE" + :description="$options.i18n.MISSING_OR_DELETED_IMAGE_MESSAGE" + :svg-path="config.noContainersImage" + class="gl-mx-auto gl-my-0" + /> </div> </template> diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/composer_installation.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/composer_installation.vue index cc629ae394c..a482c29bf50 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/composer_installation.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/composer_installation.vue @@ -6,6 +6,7 @@ import { TRACKING_ACTION_COPY_COMPOSER_REGISTRY_INCLUDE_COMMAND, TRACKING_ACTION_COPY_COMPOSER_PACKAGE_INCLUDE_COMMAND, TRACKING_LABEL_CODE_INSTRUCTION, + COMPOSER_HELP_PATH, } from '~/packages_and_registries/package_registry/constants'; import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue'; @@ -17,7 +18,7 @@ export default { GlLink, GlSprintf, }, - inject: ['composerHelpPath', 'composerConfigRepositoryName', 'composerPath', 'groupListUrl'], + inject: ['groupListUrl'], props: { packageEntity: { type: Object, @@ -27,7 +28,7 @@ export default { computed: { composerRegistryInclude() { // eslint-disable-next-line @gitlab/require-i18n-strings - return `composer config repositories.${this.composerConfigRepositoryName} '{"type": "composer", "url": "${this.composerPath}"}'`; + return `composer config repositories.${this.packageEntity.composerConfigRepositoryUrl} '{"type": "composer", "url": "${this.packageEntity.composerUrl}"}'`; }, composerPackageInclude() { // eslint-disable-next-line @gitlab/require-i18n-strings @@ -51,6 +52,9 @@ export default { TRACKING_ACTION_COPY_COMPOSER_PACKAGE_INCLUDE_COMMAND, TRACKING_LABEL_CODE_INSTRUCTION, }, + links: { + COMPOSER_HELP_PATH, + }, installOptions: [{ value: 'composer', label: s__('PackageRegistry|Show Composer commands') }], }; </script> @@ -79,7 +83,7 @@ export default { <span data-testid="help-text"> <gl-sprintf :message="$options.i18n.infoLine"> <template #link="{ content }"> - <gl-link :href="composerHelpPath" target="_blank">{{ content }}</gl-link> + <gl-link :href="$options.links.COMPOSER_HELP_PATH" target="_blank">{{ content }}</gl-link> </template> </gl-sprintf> </span> diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/conan_installation.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/conan_installation.vue index 99e27c9d44a..ba0a3fcf5a1 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/conan_installation.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/conan_installation.vue @@ -6,6 +6,7 @@ import { TRACKING_ACTION_COPY_CONAN_COMMAND, TRACKING_ACTION_COPY_CONAN_SETUP_COMMAND, TRACKING_LABEL_CODE_INSTRUCTION, + CONAN_HELP_PATH, } from '~/packages_and_registries/package_registry/constants'; import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue'; @@ -17,7 +18,6 @@ export default { GlLink, GlSprintf, }, - inject: ['conanHelpPath', 'conanPath'], props: { packageEntity: { type: Object, @@ -31,7 +31,7 @@ export default { }, conanSetupCommand() { // eslint-disable-next-line @gitlab/require-i18n-strings - return `conan remote add gitlab ${this.conanPath}`; + return `conan remote add gitlab ${this.packageEntity.conanUrl}`; }, }, i18n: { @@ -44,7 +44,7 @@ export default { TRACKING_ACTION_COPY_CONAN_SETUP_COMMAND, TRACKING_LABEL_CODE_INSTRUCTION, }, - + links: { CONAN_HELP_PATH }, installOptions: [{ value: 'conan', label: s__('PackageRegistry|Show Conan commands') }], }; </script> @@ -72,7 +72,7 @@ export default { /> <gl-sprintf :message="$options.i18n.helpText"> <template #link="{ content }"> - <gl-link :href="conanHelpPath" target="_blank">{{ content }}</gl-link> + <gl-link :href="$options.links.CONAN_HELP_PATH" target="_blank">{{ content }}</gl-link> </template> </gl-sprintf> </div> diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/maven_installation.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/maven_installation.vue index 2070f0bbca0..4510c7a7322 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/maven_installation.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/maven_installation.vue @@ -12,6 +12,7 @@ import { TRACKING_ACTION_COPY_KOTLIN_ADD_TO_SOURCE_COMMAND, TRACKING_LABEL_CODE_INSTRUCTION, TRACKING_LABEL_MAVEN_INSTALLATION, + MAVEN_HELP_PATH, } from '~/packages_and_registries/package_registry/constants'; import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue'; @@ -23,7 +24,6 @@ export default { GlLink, GlSprintf, }, - inject: ['mavenHelpPath', 'mavenPath'], props: { packageEntity: { type: Object, @@ -36,6 +36,9 @@ export default { }; }, computed: { + mavenUrl() { + return this.packageEntity.mavenUrl; + }, appGroup() { return this.packageEntity.metadata.appGroup; }, @@ -61,19 +64,19 @@ export default { return `<repositories> <repository> <id>gitlab-maven</id> - <url>${this.mavenPath}</url> + <url>${this.mavenUrl}</url> </repository> </repositories> <distributionManagement> <repository> <id>gitlab-maven</id> - <url>${this.mavenPath}</url> + <url>${this.mavenUrl}</url> </repository> <snapshotRepository> <id>gitlab-maven</id> - <url>${this.mavenPath}</url> + <url>${this.mavenUrl}</url> </snapshotRepository> </distributionManagement>`; }, @@ -86,7 +89,7 @@ export default { gradleGroovyAddSourceCommand() { // eslint-disable-next-line @gitlab/require-i18n-strings return `maven { - url '${this.mavenPath}' + url '${this.mavenUrl}' }`; }, @@ -95,7 +98,7 @@ export default { }, gradleKotlinAddSourceCommand() { - return `maven("${this.mavenPath}")`; + return `maven("${this.mavenUrl}")`; }, showMaven() { return this.instructionType === 'maven'; @@ -126,7 +129,7 @@ export default { TRACKING_LABEL_CODE_INSTRUCTION, TRACKING_LABEL_MAVEN_INSTALLATION, }, - + links: { MAVEN_HELP_PATH }, installOptions: [ { value: 'maven', label: s__('PackageRegistry|Maven XML') }, { value: 'groovy', label: s__('PackageRegistry|Gradle Groovy DSL') }, @@ -185,7 +188,7 @@ export default { /> <gl-sprintf :message="$options.i18n.helpText"> <template #link="{ content }"> - <gl-link :href="mavenHelpPath" target="_blank">{{ content }}</gl-link> + <gl-link :href="$options.links.MAVEN_HELP_PATH" target="_blank">{{ content }}</gl-link> </template> </gl-sprintf> </template> diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/npm_installation.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/npm_installation.vue index 2448324549e..7479f748a56 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/npm_installation.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/npm_installation.vue @@ -13,6 +13,7 @@ import { YARN_PACKAGE_MANAGER, PROJECT_PACKAGE_ENDPOINT_TYPE, INSTANCE_PACKAGE_ENDPOINT_TYPE, + NPM_HELP_PATH, } from '~/packages_and_registries/package_registry/constants'; import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue'; @@ -25,7 +26,7 @@ export default { GlSprintf, GlFormRadioGroup, }, - inject: ['npmHelpPath', 'npmPath', 'npmProjectPath'], + inject: ['npmInstanceUrl'], props: { packageEntity: { type: Object, @@ -65,7 +66,9 @@ export default { npmSetupCommand(type, endpointType) { const scope = this.packageEntity.name.substring(0, this.packageEntity.name.indexOf('/')); const npmPathForEndpoint = - endpointType === INSTANCE_PACKAGE_ENDPOINT_TYPE ? this.npmPath : this.npmProjectPath; + endpointType === INSTANCE_PACKAGE_ENDPOINT_TYPE + ? this.npmInstanceUrl + : this.packageEntity.npmUrl; if (type === NPM_PACKAGE_MANAGER) { return `echo ${scope}:registry=${npmPathForEndpoint}/ >> .npmrc`; @@ -89,6 +92,7 @@ export default { 'PackageRegistry|You may also need to setup authentication using an auth token. %{linkStart}See the documentation%{linkEnd} to find out more.', ), }, + links: { NPM_HELP_PATH }, installOptions: [ { value: NPM_PACKAGE_MANAGER, label: s__('PackageRegistry|Show NPM commands') }, { value: YARN_PACKAGE_MANAGER, label: s__('PackageRegistry|Show Yarn commands') }, @@ -150,7 +154,7 @@ export default { <gl-sprintf :message="$options.i18n.helpText"> <template #link="{ content }"> - <gl-link :href="npmHelpPath" target="_blank">{{ content }}</gl-link> + <gl-link :href="$options.links.NPM_HELP_PATH" target="_blank">{{ content }}</gl-link> </template> </gl-sprintf> </div> diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/nuget_installation.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/nuget_installation.vue index 2e9991b7be5..b2007df142c 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/nuget_installation.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/nuget_installation.vue @@ -6,6 +6,7 @@ import { TRACKING_ACTION_COPY_NUGET_INSTALL_COMMAND, TRACKING_ACTION_COPY_NUGET_SETUP_COMMAND, TRACKING_LABEL_CODE_INSTRUCTION, + NUGET_HELP_PATH, } from '~/packages_and_registries/package_registry/constants'; import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue'; @@ -17,7 +18,6 @@ export default { GlLink, GlSprintf, }, - inject: ['nugetHelpPath', 'nugetPath'], props: { packageEntity: { type: Object, @@ -29,7 +29,7 @@ export default { return `nuget install ${this.packageEntity.name} -Source "GitLab"`; }, nugetSetupCommand() { - return `nuget source Add -Name "GitLab" -Source "${this.nugetPath}" -UserName <your_username> -Password <your_token>`; + return `nuget source Add -Name "GitLab" -Source "${this.packageEntity.nugetUrl}" -UserName <your_username> -Password <your_token>`; }, }, tracking: { @@ -42,6 +42,7 @@ export default { 'PackageRegistry|For more information on the NuGet registry, %{linkStart}see the documentation%{linkEnd}.', ), }, + links: { NUGET_HELP_PATH }, installOptions: [{ value: 'nuget', label: s__('PackageRegistry|Show Nuget commands') }], }; </script> @@ -68,7 +69,7 @@ export default { /> <gl-sprintf :message="$options.i18n.helpText"> <template #link="{ content }"> - <gl-link :href="nugetHelpPath" target="_blank">{{ content }}</gl-link> + <gl-link :href="$options.links.NUGET_HELP_PATH" target="_blank">{{ content }}</gl-link> </template> </gl-sprintf> </div> diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_files.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_files.vue index bf7fe6fb91b..3724e371e01 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_files.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_files.vue @@ -22,8 +22,12 @@ export default { FileSha, }, mixins: [Tracking.mixin()], - inject: ['canDelete'], props: { + canDelete: { + type: Boolean, + required: false, + default: false, + }, packageFiles: { type: Array, required: false, diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/pypi_installation.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/pypi_installation.vue index 669adab9df6..a126d30f1ec 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/pypi_installation.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/pypi_installation.vue @@ -7,6 +7,7 @@ import { TRACKING_ACTION_COPY_PIP_INSTALL_COMMAND, TRACKING_ACTION_COPY_PYPI_SETUP_COMMAND, TRACKING_LABEL_CODE_INSTRUCTION, + PYPI_HELP_PATH, } from '~/packages_and_registries/package_registry/constants'; import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue'; @@ -18,7 +19,6 @@ export default { GlLink, GlSprintf, }, - inject: ['pypiHelpPath', 'pypiPath', 'pypiSetupPath'], props: { packageEntity: { type: Object, @@ -28,11 +28,11 @@ export default { computed: { pypiPipCommand() { // eslint-disable-next-line @gitlab/require-i18n-strings - return `pip install ${this.packageEntity.name} --extra-index-url ${this.pypiPath}`; + return `pip install ${this.packageEntity.name} --extra-index-url ${this.packageEntity.pypiUrl}`; }, pypiSetupCommand() { return `[gitlab] -repository = ${this.pypiSetupPath} +repository = ${this.packageEntity.pypiSetupUrl} username = __token__ password = <your personal access token>`; }, @@ -50,6 +50,7 @@ password = <your personal access token>`; 'PackageRegistry|For more information on the PyPi registry, %{linkStart}see the documentation%{linkEnd}.', ), }, + links: { PYPI_HELP_PATH }, installOptions: [{ value: 'pypi', label: s__('PackageRegistry|Show PyPi commands') }], }; </script> @@ -86,7 +87,7 @@ password = <your personal access token>`; /> <gl-sprintf :message="$options.i18n.helpText"> <template #link="{ content }"> - <gl-link :href="pypiHelpPath" target="_blank">{{ content }}</gl-link> + <gl-link :href="$options.links.PYPI_HELP_PATH" target="_blank">{{ content }}</gl-link> </template> </gl-sprintf> </div> diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_list_row.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_list_row.vue index 6fd96c0654f..6222c2e73d7 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_list_row.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_list_row.vue @@ -1,5 +1,5 @@ <script> -import { GlButton, GlLink, GlSprintf, GlTooltipDirective, GlTruncate } from '@gitlab/ui'; +import { GlButton, GlSprintf, GlTooltipDirective, GlTruncate } from '@gitlab/ui'; import { s__, __ } from '~/locale'; import ListItem from '~/vue_shared/components/registry/list_item.vue'; import { @@ -18,7 +18,6 @@ export default { name: 'PackageListRow', components: { GlButton, - GlLink, GlSprintf, GlTruncate, PackageTags, @@ -42,9 +41,8 @@ export default { packageType() { return getPackageTypeLabel(this.packageEntity.packageType); }, - packageLink() { - const { project, id } = this.packageEntity; - return `${project?.webUrl}/-/packages/${getIdFromGraphQLId(id)}`; + packageId() { + return getIdFromGraphQLId(this.packageEntity.id); }, pipeline() { return this.packageEntity?.pipelines?.nodes[0]; @@ -61,6 +59,9 @@ export default { disabledRow() { return this.packageEntity.status && this.packageEntity.status !== PACKAGE_DEFAULT_STATUS; }, + routerLinkEvent() { + return this.disabledRow ? '' : 'click'; + }, }, i18n: { erroredPackageText: s__('PackageRegistry|Invalid Package: failed metadata extraction'), @@ -73,14 +74,15 @@ export default { <list-item data-qa-selector="package_row" :disabled="disabledRow"> <template #left-primary> <div class="gl-display-flex gl-align-items-center gl-mr-3 gl-min-w-0"> - <gl-link - :href="packageLink" + <router-link class="gl-text-body gl-min-w-0" + data-testid="details-link" data-qa-selector="package_link" - :disabled="disabledRow" + :event="routerLinkEvent" + :to="{ name: 'details', params: { id: packageId } }" > <gl-truncate :text="packageEntity.name" /> - </gl-link> + </router-link> <gl-button v-if="showWarningIcon" diff --git a/app/assets/javascripts/packages_and_registries/package_registry/constants.js b/app/assets/javascripts/packages_and_registries/package_registry/constants.js index ab6541e4264..c4d331fa384 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/constants.js +++ b/app/assets/javascripts/packages_and_registries/package_registry/constants.js @@ -74,6 +74,7 @@ export const FETCH_PACKAGE_DETAILS_ERROR_MESSAGE = s__( ); export const DELETE_PACKAGE_SUCCESS_MESSAGE = s__('PackageRegistry|Package deleted successfully'); +export const PACKAGE_REGISTRY_TITLE = __('Package Registry'); export const PACKAGE_ERROR_STATUS = 'ERROR'; export const PACKAGE_DEFAULT_STATUS = 'DEFAULT'; @@ -142,3 +143,9 @@ export const PACKAGE_TYPES = [ export const EMPTY_LIST_HELP_URL = helpPagePath('user/packages/package_registry/index'); export const PACKAGE_HELP_URL = helpPagePath('user/packages/index'); +export const NPM_HELP_PATH = helpPagePath('user/packages/npm_registry/index'); +export const MAVEN_HELP_PATH = helpPagePath('user/packages/maven_repository/index'); +export const CONAN_HELP_PATH = helpPagePath('user/packages/conan_repository/index'); +export const NUGET_HELP_PATH = helpPagePath('user/packages/nuget_repository/index'); +export const PYPI_HELP_PATH = helpPagePath('user/packages/pypi_repository/index'); +export const COMPOSER_HELP_PATH = helpPagePath('user/packages/composer_repository/index'); diff --git a/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_details.query.graphql b/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_details.query.graphql index 08ea0938a59..c45cbe56e00 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_details.query.graphql +++ b/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_details.query.graphql @@ -7,9 +7,19 @@ query getPackageDetails($id: ID!) { createdAt updatedAt status + canDestroy + npmUrl + mavenUrl + conanUrl + nugetUrl + pypiUrl + pypiSetupUrl + composerUrl + composerConfigRepositoryUrl project { id path + name } tags(first: 10) { nodes { diff --git a/app/assets/javascripts/packages_and_registries/package_registry/index.js b/app/assets/javascripts/packages_and_registries/package_registry/index.js index 7ec931ff9a0..6680e612985 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/index.js +++ b/app/assets/javascripts/packages_and_registries/package_registry/index.js @@ -2,29 +2,59 @@ import Vue from 'vue'; import Translate from '~/vue_shared/translate'; import { apolloProvider } from '~/packages_and_registries/package_registry/graphql/index'; import PackageRegistry from '~/packages_and_registries/package_registry/pages/index.vue'; +import RegistryBreadcrumb from '~/packages_and_registries/shared/components/registry_breadcrumb.vue'; +import { renderBreadcrumb } from '~/packages_and_registries/shared/utils'; import createRouter from './router'; Vue.use(Translate); export default () => { const el = document.getElementById('js-vue-packages-list'); - const { endpoint, resourceId, fullPath, pageType, emptyListIllustration } = el.dataset; - const router = createRouter(endpoint); + const { + endpoint, + resourceId, + fullPath, + pageType, + emptyListIllustration, + npmInstanceUrl, + projectListUrl, + groupListUrl, + } = el.dataset; const isGroupPage = pageType === 'groups'; - return new Vue({ - el, - router, - apolloProvider, - provide: { - resourceId, - fullPath, - emptyListIllustration, - isGroupPage, - }, - render(createElement) { - return createElement(PackageRegistry); + // This is a mini state to help the breadcrumb have the correct name in the details page + const breadCrumbState = Vue.observable({ + name: '', + updateName(value) { + this.name = value; }, }); + + const router = createRouter(endpoint, breadCrumbState); + + const attachMainComponent = () => + new Vue({ + el, + router, + apolloProvider, + provide: { + resourceId, + fullPath, + emptyListIllustration, + isGroupPage, + npmInstanceUrl, + projectListUrl, + groupListUrl, + breadCrumbState, + }, + render(createElement) { + return createElement(PackageRegistry); + }, + }); + + return { + attachBreadcrumb: renderBreadcrumb(router, apolloProvider, RegistryBreadcrumb), + attachMainComponent, + }; }; diff --git a/app/assets/javascripts/packages_and_registries/package_registry/pages/details.js b/app/assets/javascripts/packages_and_registries/package_registry/pages/details.js deleted file mode 100644 index d94bbd21035..00000000000 --- a/app/assets/javascripts/packages_and_registries/package_registry/pages/details.js +++ /dev/null @@ -1,27 +0,0 @@ -import Vue from 'vue'; -import { parseBoolean } from '~/lib/utils/common_utils'; -import PackagesApp from '~/packages_and_registries/package_registry/components/details/app.vue'; -import { apolloProvider } from '~/packages_and_registries/package_registry/graphql/index'; -import Translate from '~/vue_shared/translate'; - -Vue.use(Translate); - -export default () => { - const el = document.getElementById('js-vue-packages-detail-new'); - if (!el) { - return null; - } - - const { canDelete, ...datasetOptions } = el.dataset; - return new Vue({ - el, - apolloProvider, - provide: { - canDelete: parseBoolean(canDelete), - ...datasetOptions, - }, - render(createElement) { - return createElement(PackagesApp); - }, - }); -}; diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/app.vue b/app/assets/javascripts/packages_and_registries/package_registry/pages/details.vue index d49c1be5202..162b420a784 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/app.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/pages/details.vue @@ -68,16 +68,7 @@ export default { GlModal: GlModalDirective, }, mixins: [Tracking.mixin()], - inject: [ - 'packageId', - 'projectName', - 'canDelete', - 'svgPath', - 'npmPath', - 'npmHelpPath', - 'projectListUrl', - 'groupListUrl', - ], + inject: ['emptyListIllustration', 'projectListUrl', 'groupListUrl', 'breadCrumbState'], trackingActions: { DELETE_PACKAGE_TRACKING_ACTION, REQUEST_DELETE_PACKAGE_TRACKING_ACTION, @@ -100,7 +91,7 @@ export default { return this.queryVariables; }, update(data) { - return data.package; + return data.package || {}; }, error(error) { createFlash({ @@ -109,22 +100,33 @@ export default { error, }); }, + result() { + this.breadCrumbState.updateName( + `${this.packageEntity?.name} v ${this.packageEntity?.version}`, + ); + }, }, }, computed: { + projectName() { + return this.packageEntity.project?.name; + }, + packageId() { + return this.$route.params.id; + }, queryVariables() { return { id: convertToGraphQLId('Packages::Package', this.packageId), }; }, packageFiles() { - return this.packageEntity?.packageFiles?.nodes; + return this.packageEntity.packageFiles?.nodes; }, isLoading() { return this.$apollo.queries.packageEntity.loading; }, isValidPackage() { - return this.isLoading || Boolean(this.packageEntity?.name); + return this.isLoading || Boolean(this.packageEntity.name); }, tracking() { return { @@ -141,7 +143,7 @@ export default { return this.packageEntity.packageType === PACKAGE_TYPE_NUGET; }, showFiles() { - return this.packageEntity?.packageType !== PACKAGE_TYPE_COMPOSER; + return this.packageEntity.packageType !== PACKAGE_TYPE_COMPOSER; }, }, methods: { @@ -235,13 +237,13 @@ export default { v-if="!isValidPackage" :title="s__('PackageRegistry|Unable to load package')" :description="s__('PackageRegistry|There was a problem fetching the details for this package.')" - :svg-path="svgPath" + :svg-path="emptyListIllustration" /> <div v-else-if="!isLoading" class="packages-app"> <package-title :package-entity="packageEntity"> <template #delete-button> <gl-button - v-if="canDelete" + v-if="packageEntity.canDestroy" v-gl-modal="'delete-modal'" variant="danger" category="primary" @@ -265,6 +267,7 @@ export default { <package-files v-if="showFiles" + :can-delete="packageEntity.canDestroy" :package-files="packageFiles" @download-file="track($options.trackingActions.PULL_PACKAGE)" @delete-file="handleFileDelete" diff --git a/app/assets/javascripts/packages_and_registries/package_registry/router.js b/app/assets/javascripts/packages_and_registries/package_registry/router.js index ea5b740e879..c5ef4f70dd9 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/router.js +++ b/app/assets/javascripts/packages_and_registries/package_registry/router.js @@ -1,10 +1,12 @@ import Vue from 'vue'; import VueRouter from 'vue-router'; import List from '~/packages_and_registries/package_registry/pages/list.vue'; +import Details from '~/packages_and_registries/package_registry/pages/details.vue'; +import { PACKAGE_REGISTRY_TITLE } from '~/packages_and_registries/package_registry/constants'; Vue.use(VueRouter); -export default function createRouter(base) { +export default function createRouter(base, breadCrumbState) { const router = new VueRouter({ base, mode: 'history', @@ -13,9 +15,25 @@ export default function createRouter(base) { name: 'list', path: '/', component: List, + meta: { + nameGenerator: () => PACKAGE_REGISTRY_TITLE, + root: true, + }, + }, + { + name: 'details', + path: '/:id', + component: Details, + meta: { + nameGenerator: () => breadCrumbState.name, + }, }, ], }); + router.afterEach(() => { + breadCrumbState.updateName(''); + }); + return router; } diff --git a/app/assets/javascripts/packages_and_registries/shared/components/persisted_search.vue b/app/assets/javascripts/packages_and_registries/shared/components/persisted_search.vue new file mode 100644 index 00000000000..9b2de1a1b84 --- /dev/null +++ b/app/assets/javascripts/packages_and_registries/shared/components/persisted_search.vue @@ -0,0 +1,80 @@ +<script> +import RegistrySearch from '~/vue_shared/components/registry/registry_search.vue'; +import UrlSync from '~/vue_shared/components/url_sync.vue'; +import { extractFilterAndSorting, getQueryParams } from '~/packages_and_registries/shared/utils'; + +export default { + components: { RegistrySearch, UrlSync }, + props: { + sortableFields: { + type: Array, + required: true, + }, + defaultOrder: { + type: String, + required: true, + }, + defaultSort: { + type: String, + required: true, + }, + }, + data() { + return { + filters: [], + sorting: { + orderBy: this.defaultOrder, + sort: this.defaultSort, + }, + mountRegistrySearch: false, + }; + }, + computed: { + parsedSorting() { + const cleanOrderBy = this.sorting?.orderBy.replace('_at', ''); + return `${cleanOrderBy}_${this.sorting?.sort}`.toUpperCase(); + }, + }, + mounted() { + const queryParams = getQueryParams(window.document.location.search); + const { sorting, filters } = extractFilterAndSorting(queryParams); + this.updateSorting(sorting); + this.updateFilters(filters); + this.mountRegistrySearch = true; + this.emitUpdate(); + }, + methods: { + updateFilters(newValue) { + this.filters = newValue; + }, + updateSorting(newValue) { + this.sorting = { ...this.sorting, ...newValue }; + }, + updateSortingAndEmitUpdate(newValue) { + this.updateSorting(newValue); + this.emitUpdate(); + }, + emitUpdate() { + this.$emit('update', { sort: this.parsedSorting, filters: this.filters }); + }, + }, +}; +</script> + +<template> + <url-sync> + <template #default="{ updateQuery }"> + <registry-search + v-if="mountRegistrySearch" + :filter="filters" + :sorting="sorting" + :tokens="$options.tokens" + :sortable-fields="sortableFields" + @sorting:changed="updateSortingAndEmitUpdate" + @filter:changed="updateFilters" + @filter:submit="emitUpdate" + @query:changed="updateQuery" + /> + </template> + </url-sync> +</template> diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/registry_breadcrumb.vue b/app/assets/javascripts/packages_and_registries/shared/components/registry_breadcrumb.vue index e77eda31596..a1e3c06812c 100644 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/registry_breadcrumb.vue +++ b/app/assets/javascripts/packages_and_registries/shared/components/registry_breadcrumb.vue @@ -20,8 +20,11 @@ export default { isRootRoute() { return this.$route.name === this.rootRoute.name; }, + detailsRouteName() { + return this.detailsRoute.meta.nameGenerator(); + }, isLoaded() { - return this.isRootRoute || this.$store?.state.imageDetails?.name; + return this.isRootRoute || this.detailsRouteName; }, allCrumbs() { const crumbs = [ @@ -32,7 +35,7 @@ export default { ]; if (!this.isRootRoute) { crumbs.push({ - text: this.detailsRoute.meta.nameGenerator(), + text: this.detailsRouteName, href: this.detailsRoute.meta.path, }); } @@ -45,7 +48,9 @@ export default { <template> <gl-breadcrumb :key="isLoaded" :items="allCrumbs"> <template #separator> - <gl-icon name="angle-right" :size="8" /> + <span class="gl-mx-n5"> + <gl-icon name="angle-right" :size="8" /> + </span> </template> </gl-breadcrumb> </template> diff --git a/app/assets/javascripts/packages_and_registries/shared/utils.js b/app/assets/javascripts/packages_and_registries/shared/utils.js index cf18f655e79..7e963cd0b08 100644 --- a/app/assets/javascripts/packages_and_registries/shared/utils.js +++ b/app/assets/javascripts/packages_and_registries/shared/utils.js @@ -1,3 +1,4 @@ +import Vue from 'vue'; import { queryToObject } from '~/lib/utils/url_utility'; import { FILTERED_SEARCH_TERM } from './constants'; @@ -38,3 +39,37 @@ export const getCommitLink = ({ project_path: projectPath, pipeline = {} }, isGr return `../commit/${pipeline.sha}`; }; + +export const renderBreadcrumb = (router, apolloProvider, RegistryBreadcrumb) => () => { + const breadCrumbEls = document.querySelectorAll('nav .js-breadcrumbs-list li'); + const breadCrumbEl = breadCrumbEls[breadCrumbEls.length - 1]; + const lastCrumb = breadCrumbEl.children[0]; + const crumbs = [lastCrumb]; + const nestedBreadcrumbEl = document.createElement('div'); + breadCrumbEl.replaceChild(nestedBreadcrumbEl, lastCrumb); + return new Vue({ + el: nestedBreadcrumbEl, + router, + apolloProvider, + components: { + RegistryBreadcrumb, + }, + render(createElement) { + // FIXME(@tnir): this is a workaround until the MR gets merged: + // https://gitlab.com/gitlab-org/gitlab/-/merge_requests/48115 + const parentEl = breadCrumbEl.parentElement.parentElement; + if (parentEl) { + parentEl.classList.remove('breadcrumbs-container'); + parentEl.classList.add('gl-display-flex'); + parentEl.classList.add('w-100'); + } + // End of FIXME(@tnir) + return createElement('registry-breadcrumb', { + class: breadCrumbEl.className, + props: { + crumbs, + }, + }); + }, + }); +}; diff --git a/app/assets/javascripts/pages/admin/integrations/edit/index.js b/app/assets/javascripts/pages/admin/integrations/edit/index.js index 8485b460261..c354ed1c142 100644 --- a/app/assets/javascripts/pages/admin/integrations/edit/index.js +++ b/app/assets/javascripts/pages/admin/integrations/edit/index.js @@ -1,7 +1,7 @@ import initIntegrationSettingsForm from '~/integrations/edit'; import PrometheusMetrics from '~/prometheus_metrics/prometheus_metrics'; -initIntegrationSettingsForm('.js-integration-settings-form'); +initIntegrationSettingsForm(); const prometheusSettingsSelector = '.js-prometheus-metrics-monitoring'; const prometheusSettingsWrapper = document.querySelector(prometheusSettingsSelector); diff --git a/app/assets/javascripts/pages/admin/labels/edit/index.js b/app/assets/javascripts/pages/admin/labels/edit/index.js index a3b9c43388a..a5eee2857df 100644 --- a/app/assets/javascripts/pages/admin/labels/edit/index.js +++ b/app/assets/javascripts/pages/admin/labels/edit/index.js @@ -1,3 +1,5 @@ import Labels from '~/labels/labels'; +import { initDeleteLabelModal } from '~/labels'; new Labels(); // eslint-disable-line no-new +initDeleteLabelModal(); diff --git a/app/assets/javascripts/pages/admin/runners/edit/index.js b/app/assets/javascripts/pages/admin/runners/edit/index.js new file mode 100644 index 00000000000..ddf135a2732 --- /dev/null +++ b/app/assets/javascripts/pages/admin/runners/edit/index.js @@ -0,0 +1,3 @@ +import { initAdminRunnerEdit } from '~/runner/admin_runner_edit'; + +initAdminRunnerEdit(); diff --git a/app/assets/javascripts/pages/admin/runners/show/index.js b/app/assets/javascripts/pages/admin/runners/show/index.js deleted file mode 100644 index d1853772fda..00000000000 --- a/app/assets/javascripts/pages/admin/runners/show/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import { initRunnerDetail } from '~/runner/runner_details'; - -initRunnerDetail(); diff --git a/app/assets/javascripts/pages/dashboard/todos/index/todos.js b/app/assets/javascripts/pages/dashboard/todos/index/todos.js index a1e7eb5d3de..cabb1b24ae6 100644 --- a/app/assets/javascripts/pages/dashboard/todos/index/todos.js +++ b/app/assets/javascripts/pages/dashboard/todos/index/todos.js @@ -172,8 +172,12 @@ export default class Todos { updateBadges(data) { $(document).trigger('todo:toggle', data.count); - document.querySelector('.js-todos-pending .badge').innerHTML = addDelimiter(data.count); - document.querySelector('.js-todos-done .badge').innerHTML = addDelimiter(data.done_count); + document.querySelector('.js-todos-pending .js-todos-badge').innerHTML = addDelimiter( + data.count, + ); + document.querySelector('.js-todos-done .js-todos-badge').innerHTML = addDelimiter( + data.done_count, + ); } goToTodoUrl(e) { diff --git a/app/assets/javascripts/pages/explore/groups/index.js b/app/assets/javascripts/pages/explore/groups/index.js index 808fcce46df..05078191e5c 100644 --- a/app/assets/javascripts/pages/explore/groups/index.js +++ b/app/assets/javascripts/pages/explore/groups/index.js @@ -1,6 +1,6 @@ -import GroupsList from '~/groups_list'; -import Landing from '~/landing'; -import initGroupsList from '../../../groups'; +import initGroupsList from '~/groups'; +import GroupsList from '~/groups/groups_list'; +import Landing from '~/groups/landing'; function exploreGroups() { new GroupsList(); // eslint-disable-line no-new diff --git a/app/assets/javascripts/pages/groups/edit/index.js b/app/assets/javascripts/pages/groups/edit/index.js index 604da77f60c..f6155b2ab2f 100644 --- a/app/assets/javascripts/pages/groups/edit/index.js +++ b/app/assets/javascripts/pages/groups/edit/index.js @@ -1,20 +1,18 @@ import { GROUP_BADGE } from '~/badges/constants'; -import initConfirmDangerModal from '~/confirm_danger_modal'; import dirtySubmitFactory from '~/dirty_submit/dirty_submit_factory'; import initFilePickers from '~/file_pickers'; import TransferDropdown from '~/groups/transfer_dropdown'; +import setupTransferEdit from '~/groups/transfer_edit'; import groupsSelect from '~/groups_select'; import { initCascadingSettingsLockPopovers } from '~/namespaces/cascading_settings'; import mountBadgeSettings from '~/pages/shared/mount_badge_settings'; import projectSelect from '~/project_select'; import initSearchSettings from '~/search_settings'; import initSettingsPanels from '~/settings_panels'; -import setupTransferEdit from '~/transfer_edit'; import initConfirmDanger from '~/init_confirm_danger'; document.addEventListener('DOMContentLoaded', () => { initFilePickers(); - initConfirmDangerModal(); initConfirmDanger(); initSettingsPanels(); dirtySubmitFactory( diff --git a/app/assets/javascripts/pages/groups/issues/index.js b/app/assets/javascripts/pages/groups/issues/index.js index 966d55e5587..725c38defc3 100644 --- a/app/assets/javascripts/pages/groups/issues/index.js +++ b/app/assets/javascripts/pages/groups/issues/index.js @@ -1,6 +1,6 @@ import IssuableFilteredSearchTokenKeys from 'ee_else_ce/filtered_search/issuable_filtered_search_token_keys'; -import issuableInitBulkUpdateSidebar from '~/issuable/bulk_update_sidebar/issuable_init_bulk_update_sidebar'; -import { mountIssuablesListApp, mountIssuesListApp } from '~/issues_list'; +import { initBulkUpdateSidebar } from '~/issuable/bulk_update_sidebar'; +import { mountIssuesListApp } from '~/issues/list'; import initManualOrdering from '~/issues/manual_ordering'; import { FILTERED_SEARCH } from '~/filtered_search/constants'; import initFilteredSearch from '~/pages/search/init_filtered_search'; @@ -13,7 +13,7 @@ if (gon.features?.vueIssuesList) { IssuableFilteredSearchTokenKeys.addExtraTokensForIssues(); IssuableFilteredSearchTokenKeys.removeTokensForKeys('release'); - issuableInitBulkUpdateSidebar.init(ISSUE_BULK_UPDATE_PREFIX); + initBulkUpdateSidebar(ISSUE_BULK_UPDATE_PREFIX); initFilteredSearch({ page: FILTERED_SEARCH.ISSUES, @@ -23,8 +23,4 @@ if (gon.features?.vueIssuesList) { }); projectSelect(); initManualOrdering(); - - if (gon.features?.vueIssuablesList) { - mountIssuablesListApp(); - } } diff --git a/app/assets/javascripts/pages/groups/labels/edit/index.js b/app/assets/javascripts/pages/groups/labels/edit/index.js index e4e377f62fc..c032321d039 100644 --- a/app/assets/javascripts/pages/groups/labels/edit/index.js +++ b/app/assets/javascripts/pages/groups/labels/edit/index.js @@ -1,4 +1,6 @@ import Labels from 'ee_else_ce/labels/labels'; +import { initDeleteLabelModal } from '~/labels'; // eslint-disable-next-line no-new new Labels(); +initDeleteLabelModal(); diff --git a/app/assets/javascripts/pages/groups/merge_requests/index.js b/app/assets/javascripts/pages/groups/merge_requests/index.js index cb38ee1c6e0..de28f027126 100644 --- a/app/assets/javascripts/pages/groups/merge_requests/index.js +++ b/app/assets/javascripts/pages/groups/merge_requests/index.js @@ -1,6 +1,6 @@ import addExtraTokensForMergeRequests from 'ee_else_ce/filtered_search/add_extra_tokens_for_merge_requests'; import IssuableFilteredSearchTokenKeys from '~/filtered_search/issuable_filtered_search_token_keys'; -import issuableInitBulkUpdateSidebar from '~/issuable/bulk_update_sidebar/issuable_init_bulk_update_sidebar'; +import { initBulkUpdateSidebar } from '~/issuable/bulk_update_sidebar'; import { FILTERED_SEARCH } from '~/filtered_search/constants'; import initFilteredSearch from '~/pages/search/init_filtered_search'; import projectSelect from '~/project_select'; @@ -8,7 +8,7 @@ import projectSelect from '~/project_select'; const ISSUABLE_BULK_UPDATE_PREFIX = 'merge_request_'; addExtraTokensForMergeRequests(IssuableFilteredSearchTokenKeys); -issuableInitBulkUpdateSidebar.init(ISSUABLE_BULK_UPDATE_PREFIX); +initBulkUpdateSidebar(ISSUABLE_BULK_UPDATE_PREFIX); initFilteredSearch({ page: FILTERED_SEARCH.MERGE_REQUESTS, diff --git a/app/assets/javascripts/pages/groups/new/index.js b/app/assets/javascripts/pages/groups/new/index.js index 7b0418e1ad5..702b152d25a 100644 --- a/app/assets/javascripts/pages/groups/new/index.js +++ b/app/assets/javascripts/pages/groups/new/index.js @@ -15,7 +15,7 @@ initFilePickers(); new Group(); // eslint-disable-line no-new function initNewGroupCreation(el) { - const { hasErrors } = el.dataset; + const { hasErrors, verificationRequired, verificationFormUrl, subscriptionsUrl } = el.dataset; const props = { hasErrors: parseBoolean(hasErrors), @@ -23,6 +23,11 @@ function initNewGroupCreation(el) { return new Vue({ el, + provide: { + verificationRequired: parseBoolean(verificationRequired), + verificationFormUrl, + subscriptionsUrl, + }, render(h) { return h(NewGroupCreationApp, { props }); }, diff --git a/app/assets/javascripts/pages/groups/packages/index.js b/app/assets/javascripts/pages/groups/packages/index.js new file mode 100644 index 00000000000..cbe08565cfa --- /dev/null +++ b/app/assets/javascripts/pages/groups/packages/index.js @@ -0,0 +1,8 @@ +import packageApp from '~/packages_and_registries/package_registry/index'; + +const app = packageApp(); + +if (app) { + app.attachBreadcrumb(); + app.attachMainComponent(); +} diff --git a/app/assets/javascripts/pages/groups/packages/index/index.js b/app/assets/javascripts/pages/groups/packages/index/index.js deleted file mode 100644 index 174973a9fad..00000000000 --- a/app/assets/javascripts/pages/groups/packages/index/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import packageApp from '~/packages_and_registries/package_registry/index'; - -packageApp(); diff --git a/app/assets/javascripts/pages/groups/settings/access_tokens/index.js b/app/assets/javascripts/pages/groups/settings/access_tokens/index.js new file mode 100644 index 00000000000..dc1bb88bf4b --- /dev/null +++ b/app/assets/javascripts/pages/groups/settings/access_tokens/index.js @@ -0,0 +1,3 @@ +import { initExpiresAtField } from '~/access_tokens'; + +initExpiresAtField(); diff --git a/app/assets/javascripts/pages/groups/settings/integrations/edit/index.js b/app/assets/javascripts/pages/groups/settings/integrations/edit/index.js index 8485b460261..c354ed1c142 100644 --- a/app/assets/javascripts/pages/groups/settings/integrations/edit/index.js +++ b/app/assets/javascripts/pages/groups/settings/integrations/edit/index.js @@ -1,7 +1,7 @@ import initIntegrationSettingsForm from '~/integrations/edit'; import PrometheusMetrics from '~/prometheus_metrics/prometheus_metrics'; -initIntegrationSettingsForm('.js-integration-settings-form'); +initIntegrationSettingsForm(); const prometheusSettingsSelector = '.js-prometheus-metrics-monitoring'; const prometheusSettingsWrapper = document.querySelector(prometheusSettingsSelector); diff --git a/app/assets/javascripts/pages/help/index/index.js b/app/assets/javascripts/pages/help/index/index.js index 736add8dca3..a8e67c57307 100644 --- a/app/assets/javascripts/pages/help/index/index.js +++ b/app/assets/javascripts/pages/help/index/index.js @@ -1,6 +1,5 @@ -import $ from 'jquery'; import docs from '~/docs/docs_bundle'; -import VersionCheckImage from '~/version_check_image'; +import initGitlabVersionCheck from '~/gitlab_version_check'; docs(); -VersionCheckImage.bindErrorEvent($('img.js-version-status-badge')); +initGitlabVersionCheck(); diff --git a/app/assets/javascripts/pages/profiles/keys/index.js b/app/assets/javascripts/pages/profiles/keys/index.js index 1b291d9509d..6b12604c76b 100644 --- a/app/assets/javascripts/pages/profiles/keys/index.js +++ b/app/assets/javascripts/pages/profiles/keys/index.js @@ -7,11 +7,13 @@ function initSshKeyValidation() { const input = document.querySelector('.js-add-ssh-key-validation-input'); if (!input) return; + const supportedAlgorithms = JSON.parse(input.dataset.supportedAlgorithms); const warning = document.querySelector('.js-add-ssh-key-validation-warning'); const originalSubmit = input.form.querySelector('.js-add-ssh-key-validation-original-submit'); const confirmSubmit = warning.querySelector('.js-add-ssh-key-validation-confirm-submit'); const addSshKeyValidation = new AddSshKeyValidation( + supportedAlgorithms, input, warning, originalSubmit, diff --git a/app/assets/javascripts/pages/projects/blob/show/index.js b/app/assets/javascripts/pages/projects/blob/show/index.js index b365e039191..2fc9a111405 100644 --- a/app/assets/javascripts/pages/projects/blob/show/index.js +++ b/app/assets/javascripts/pages/projects/blob/show/index.js @@ -1,5 +1,6 @@ import Vue from 'vue'; import VueApollo from 'vue-apollo'; +import VueRouter from 'vue-router'; import TableOfContents from '~/blob/components/table_contents.vue'; import PipelineTourSuccessModal from '~/blob/pipeline_tour_success_modal.vue'; import { BlobViewer, initAuxiliaryViewer } from '~/blob/viewer/index'; @@ -12,11 +13,14 @@ import BlobContentViewer from '~/repository/components/blob_content_viewer.vue'; import '~/sourcegraph/load'; Vue.use(VueApollo); +Vue.use(VueRouter); const apolloProvider = new VueApollo({ defaultClient: createDefaultClient(), }); +const router = new VueRouter({ mode: 'history' }); + const viewBlobEl = document.querySelector('#js-view-blob-app'); if (viewBlobEl) { @@ -25,6 +29,7 @@ if (viewBlobEl) { // eslint-disable-next-line no-new new Vue({ el: viewBlobEl, + router, apolloProvider, provide: { targetBranch, @@ -41,6 +46,7 @@ if (viewBlobEl) { }); initAuxiliaryViewer(); + initBlob(); } else { new BlobViewer(); // eslint-disable-line no-new initBlob(); diff --git a/app/assets/javascripts/pages/projects/branches/index/index.js b/app/assets/javascripts/pages/projects/branches/index/index.js index 97dc76908af..d279c4cbb08 100644 --- a/app/assets/javascripts/pages/projects/branches/index/index.js +++ b/app/assets/javascripts/pages/projects/branches/index/index.js @@ -1,13 +1,11 @@ import initDeprecatedRemoveRowBehavior from '~/behaviors/deprecated_remove_row_behavior'; import AjaxLoadingSpinner from '~/branches/ajax_loading_spinner'; import BranchSortDropdown from '~/branches/branch_sort_dropdown'; -import DeleteModal from '~/branches/branches_delete_modal'; import initDiverganceGraph from '~/branches/divergence_graph'; import initDeleteBranchButton from '~/branches/init_delete_branch_button'; import initDeleteBranchModal from '~/branches/init_delete_branch_modal'; AjaxLoadingSpinner.init(); -new DeleteModal(); // eslint-disable-line no-new const { divergingCountsEndpoint, defaultBranch } = document.querySelector( '.js-branch-list', diff --git a/app/assets/javascripts/pages/projects/edit/index.js b/app/assets/javascripts/pages/projects/edit/index.js index 100ca5b36d9..c0eb2a8fd77 100644 --- a/app/assets/javascripts/pages/projects/edit/index.js +++ b/app/assets/javascripts/pages/projects/edit/index.js @@ -1,5 +1,4 @@ import { PROJECT_BADGE } from '~/badges/constants'; -import initLegacyConfirmDangerModal from '~/confirm_danger_modal'; import initConfirmDanger from '~/init_confirm_danger'; import dirtySubmitFactory from '~/dirty_submit/dirty_submit_factory'; import initFilePickers from '~/file_pickers'; @@ -15,7 +14,6 @@ import initProjectPermissionsSettings from '../shared/permissions'; import initProjectLoadingSpinner from '../shared/save_project_loader'; initFilePickers(); -initLegacyConfirmDangerModal(); initConfirmDanger(); initSettingsPanels(); initProjectDeleteButton(); diff --git a/app/assets/javascripts/pages/projects/find_file/show/index.js b/app/assets/javascripts/pages/projects/find_file/show/index.js index a8225167c6b..f47888f0cb8 100644 --- a/app/assets/javascripts/pages/projects/find_file/show/index.js +++ b/app/assets/javascripts/pages/projects/find_file/show/index.js @@ -1,6 +1,6 @@ import $ from 'jquery'; import ShortcutsFindFile from '~/behaviors/shortcuts/shortcuts_find_file'; -import ProjectFindFile from '~/project_find_file'; +import ProjectFindFile from '~/projects/project_find_file'; const findElement = document.querySelector('.js-file-finder'); const projectFindFile = new ProjectFindFile($('.file-finder-holder'), { diff --git a/app/assets/javascripts/pages/projects/imports/show/index.js b/app/assets/javascripts/pages/projects/imports/show/index.js index 8397826f8eb..21d07e04ddc 100644 --- a/app/assets/javascripts/pages/projects/imports/show/index.js +++ b/app/assets/javascripts/pages/projects/imports/show/index.js @@ -1,3 +1,3 @@ -import ProjectImport from '~/project_import'; +import ProjectImport from '~/projects/project_import'; new ProjectImport(); // eslint-disable-line no-new diff --git a/app/assets/javascripts/pages/projects/incidents/show/index.js b/app/assets/javascripts/pages/projects/incidents/show/index.js index 4633eaef8f9..5a8cfcf8462 100644 --- a/app/assets/javascripts/pages/projects/incidents/show/index.js +++ b/app/assets/javascripts/pages/projects/incidents/show/index.js @@ -1,6 +1,6 @@ +import { initShow } from '~/issues'; import initRelatedIssues from '~/related_issues'; import initSidebarBundle from '~/sidebar/sidebar_bundle'; -import initShow from '~/issues/show'; initShow(); initSidebarBundle(); diff --git a/app/assets/javascripts/pages/projects/init_blob.js b/app/assets/javascripts/pages/projects/init_blob.js index 06aba866ccf..7db34816cfe 100644 --- a/app/assets/javascripts/pages/projects/init_blob.js +++ b/app/assets/javascripts/pages/projects/init_blob.js @@ -2,8 +2,8 @@ import ShortcutsBlob from '~/behaviors/shortcuts/shortcuts_blob'; import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation'; import BlobForkSuggestion from '~/blob/blob_fork_suggestion'; import BlobLinePermalinkUpdater from '~/blob/blob_line_permalink_updater'; +import LineHighlighter from '~/blob/line_highlighter'; import initBlobBundle from '~/blob_edit/blob_bundle'; -import LineHighlighter from '~/line_highlighter'; export default () => { new LineHighlighter(); // eslint-disable-line no-new diff --git a/app/assets/javascripts/pages/projects/issues/edit/index.js b/app/assets/javascripts/pages/projects/issues/edit/index.js index aa00d1f58bd..06dcd2c2d94 100644 --- a/app/assets/javascripts/pages/projects/issues/edit/index.js +++ b/app/assets/javascripts/pages/projects/issues/edit/index.js @@ -1,3 +1,3 @@ -import initForm from 'ee_else_ce/issues/form'; +import { initForm } from 'ee_else_ce/issues'; initForm(); diff --git a/app/assets/javascripts/pages/projects/issues/index/index.js b/app/assets/javascripts/pages/projects/issues/index/index.js index e937713044c..44b1d5277d1 100644 --- a/app/assets/javascripts/pages/projects/issues/index/index.js +++ b/app/assets/javascripts/pages/projects/issues/index/index.js @@ -1,8 +1,8 @@ import IssuableFilteredSearchTokenKeys from 'ee_else_ce/filtered_search/issuable_filtered_search_token_keys'; import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation'; import { initCsvImportExportButtons, initIssuableByEmail } from '~/issuable'; -import issuableInitBulkUpdateSidebar from '~/issuable/bulk_update_sidebar/issuable_init_bulk_update_sidebar'; -import { mountIssuablesListApp, mountIssuesListApp, mountJiraIssuesListApp } from '~/issues_list'; +import { initBulkUpdateSidebar, initIssueStatusSelect } from '~/issuable/bulk_update_sidebar'; +import { mountIssuesListApp, mountJiraIssuesListApp } from '~/issues/list'; import initManualOrdering from '~/issues/manual_ordering'; import { FILTERED_SEARCH } from '~/filtered_search/constants'; import { ISSUABLE_INDEX } from '~/issuable/constants'; @@ -20,16 +20,13 @@ if (gon.features?.vueIssuesList) { useDefaultState: true, }); - issuableInitBulkUpdateSidebar.init(ISSUABLE_INDEX.ISSUE); + initBulkUpdateSidebar(ISSUABLE_INDEX.ISSUE); + initIssueStatusSelect(); new UsersSelect(); // eslint-disable-line no-new initCsvImportExportButtons(); initIssuableByEmail(); initManualOrdering(); - - if (gon.features?.vueIssuablesList) { - mountIssuablesListApp(); - } } new ShortcutsNavigation(); // eslint-disable-line no-new diff --git a/app/assets/javascripts/pages/projects/issues/new/index.js b/app/assets/javascripts/pages/projects/issues/new/index.js index aa00d1f58bd..06dcd2c2d94 100644 --- a/app/assets/javascripts/pages/projects/issues/new/index.js +++ b/app/assets/javascripts/pages/projects/issues/new/index.js @@ -1,3 +1,3 @@ -import initForm from 'ee_else_ce/issues/form'; +import { initForm } from 'ee_else_ce/issues'; initForm(); diff --git a/app/assets/javascripts/pages/projects/issues/service_desk/index.js b/app/assets/javascripts/pages/projects/issues/service_desk/index.js index 69639d17f8a..7dd128fedb9 100644 --- a/app/assets/javascripts/pages/projects/issues/service_desk/index.js +++ b/app/assets/javascripts/pages/projects/issues/service_desk/index.js @@ -1,8 +1,3 @@ -import { mountIssuablesListApp } from '~/issues_list'; -import { initFilteredSearchServiceDesk } from '~/issues/init_filtered_search_service_desk'; +import { initFilteredSearchServiceDesk } from '~/issues'; initFilteredSearchServiceDesk(); - -if (gon.features?.vueIssuablesList) { - mountIssuablesListApp(); -} diff --git a/app/assets/javascripts/pages/projects/issues/show/index.js b/app/assets/javascripts/pages/projects/issues/show/index.js index d0b1942f2a4..46a34c025b6 100644 --- a/app/assets/javascripts/pages/projects/issues/show/index.js +++ b/app/assets/javascripts/pages/projects/issues/show/index.js @@ -1,7 +1,7 @@ +import { initShow } from '~/issues'; import { store } from '~/notes/stores'; import initRelatedIssues from '~/related_issues'; import initSidebarBundle from '~/sidebar/sidebar_bundle'; -import initShow from '~/issues/show'; initShow(); initSidebarBundle(store); diff --git a/app/assets/javascripts/pages/projects/labels/edit/index.js b/app/assets/javascripts/pages/projects/labels/edit/index.js index c4d7af39767..cb554e3d4da 100644 --- a/app/assets/javascripts/pages/projects/labels/edit/index.js +++ b/app/assets/javascripts/pages/projects/labels/edit/index.js @@ -1,3 +1,5 @@ import Labels from 'ee_else_ce/labels/labels'; +import { initDeleteLabelModal } from '~/labels'; new Labels(); // eslint-disable-line no-new +initDeleteLabelModal(); diff --git a/app/assets/javascripts/pages/projects/merge_requests/index/index.js b/app/assets/javascripts/pages/projects/merge_requests/index/index.js index acd1731a700..e284e7b2c5e 100644 --- a/app/assets/javascripts/pages/projects/merge_requests/index/index.js +++ b/app/assets/javascripts/pages/projects/merge_requests/index/index.js @@ -2,13 +2,14 @@ import addExtraTokensForMergeRequests from 'ee_else_ce/filtered_search/add_extra import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation'; import IssuableFilteredSearchTokenKeys from '~/filtered_search/issuable_filtered_search_token_keys'; import { initCsvImportExportButtons, initIssuableByEmail } from '~/issuable'; -import issuableInitBulkUpdateSidebar from '~/issuable/bulk_update_sidebar/issuable_init_bulk_update_sidebar'; +import { initBulkUpdateSidebar, initIssueStatusSelect } from '~/issuable/bulk_update_sidebar'; import { FILTERED_SEARCH } from '~/filtered_search/constants'; import { ISSUABLE_INDEX } from '~/issuable/constants'; import initFilteredSearch from '~/pages/search/init_filtered_search'; import UsersSelect from '~/users_select'; -issuableInitBulkUpdateSidebar.init(ISSUABLE_INDEX.MERGE_REQUEST); +initBulkUpdateSidebar(ISSUABLE_INDEX.MERGE_REQUEST); +initIssueStatusSelect(); addExtraTokensForMergeRequests(IssuableFilteredSearchTokenKeys); IssuableFilteredSearchTokenKeys.removeTokensForKeys('iteration'); diff --git a/app/assets/javascripts/pages/projects/new/index.js b/app/assets/javascripts/pages/projects/new/index.js index d89b4d0e0a3..5d830872ed9 100644 --- a/app/assets/javascripts/pages/projects/new/index.js +++ b/app/assets/javascripts/pages/projects/new/index.js @@ -1,5 +1,5 @@ import { initNewProjectCreation, initNewProjectUrlSelect } from '~/projects/new'; -import initProjectVisibilitySelector from '~/project_visibility'; +import initProjectVisibilitySelector from '~/projects/project_visibility'; import initProjectNew from '~/projects/project_new'; initProjectVisibilitySelector(); diff --git a/app/assets/javascripts/pages/projects/packages/packages/index.js b/app/assets/javascripts/pages/projects/packages/packages/index.js new file mode 100644 index 00000000000..cbe08565cfa --- /dev/null +++ b/app/assets/javascripts/pages/projects/packages/packages/index.js @@ -0,0 +1,8 @@ +import packageApp from '~/packages_and_registries/package_registry/index'; + +const app = packageApp(); + +if (app) { + app.attachBreadcrumb(); + app.attachMainComponent(); +} diff --git a/app/assets/javascripts/pages/projects/packages/packages/index/index.js b/app/assets/javascripts/pages/projects/packages/packages/index/index.js deleted file mode 100644 index 174973a9fad..00000000000 --- a/app/assets/javascripts/pages/projects/packages/packages/index/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import packageApp from '~/packages_and_registries/package_registry/index'; - -packageApp(); diff --git a/app/assets/javascripts/pages/projects/packages/packages/show/index.js b/app/assets/javascripts/pages/projects/packages/packages/show/index.js deleted file mode 100644 index 2dee87985cb..00000000000 --- a/app/assets/javascripts/pages/projects/packages/packages/show/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import initPackageDetails from '~/packages_and_registries/package_registry/pages/details'; - -initPackageDetails(); diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/timezone_dropdown.js b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/timezone_dropdown.js index e92b9b30fa4..277d2e0d30a 100644 --- a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/timezone_dropdown.js +++ b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/timezone_dropdown.js @@ -1,6 +1,6 @@ import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown'; -const defaultTimezone = { name: 'UTC', offset: 0 }; +const defaultTimezone = { identifier: 'Etc/UTC', name: 'UTC', offset: 0 }; const defaults = { $inputEl: null, $dropdownEl: null, @@ -70,7 +70,7 @@ export default class TimezoneDropdown { setDropdownValue(timezone) { this.$dropdownToggle.text(this.displayFormat(timezone)); - this.$input.val(timezone.name); + this.$input.val(timezone.identifier); } handleDropdownChange({ selectedObj, e }) { diff --git a/app/assets/javascripts/pages/projects/services/edit/index.js b/app/assets/javascripts/pages/projects/services/edit/index.js index a2b18d86240..2048d3dfc37 100644 --- a/app/assets/javascripts/pages/projects/services/edit/index.js +++ b/app/assets/javascripts/pages/projects/services/edit/index.js @@ -2,7 +2,7 @@ import initIntegrationSettingsForm from '~/integrations/edit'; import PrometheusAlerts from '~/prometheus_alerts'; import CustomMetrics from '~/prometheus_metrics/custom_metrics'; -initIntegrationSettingsForm('.js-integration-settings-form'); +initIntegrationSettingsForm(); const prometheusSettingsSelector = '.js-prometheus-metrics-monitoring'; const prometheusSettingsWrapper = document.querySelector(prometheusSettingsSelector); diff --git a/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue b/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue index 384ee1f5034..d5e00f54e91 100644 --- a/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue +++ b/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue @@ -1,6 +1,6 @@ <script> -import { GlIcon, GlSprintf, GlLink, GlFormCheckbox, GlToggle } from '@gitlab/ui'; - +import { GlButton, GlIcon, GlSprintf, GlLink, GlFormCheckbox, GlToggle } from '@gitlab/ui'; +import ConfirmDanger from '~/vue_shared/components/confirm_danger/confirm_danger.vue'; import settingsMixin from 'ee_else_ce/pages/projects/shared/permissions/mixins/settings_pannel_mixin'; import { __, s__ } from '~/locale'; import { @@ -41,16 +41,19 @@ export default { pucWarningHelpText: s__( 'ProjectSettings|Highlight the usage of hidden unicode characters. These have innocent uses for right-to-left languages, but can also be used in potential exploits.', ), + confirmButtonText: __('Save changes'), }, components: { projectFeatureSetting, projectSettingRow, + GlButton, GlIcon, GlSprintf, GlLink, GlFormCheckbox, GlToggle, + ConfirmDanger, }, mixins: [settingsMixin], @@ -163,6 +166,15 @@ export default { required: false, default: '', }, + confirmationPhrase: { + type: String, + required: true, + }, + showVisibilityConfirmModal: { + type: Boolean, + required: false, + default: false, + }, }, data() { const defaults = { @@ -274,6 +286,12 @@ export default { cveIdRequestIsDisabled() { return this.visibilityLevel !== visibilityOptions.PUBLIC; }, + isVisibilityReduced() { + return ( + this.showVisibilityConfirmModal && + this.visibilityLevel < this.currentSettings.visibilityLevel + ); + }, }, watch: { @@ -774,5 +792,23 @@ export default { <template #help>{{ $options.i18n.pucWarningHelpText }}</template> </gl-form-checkbox> </project-setting-row> + <confirm-danger + v-if="isVisibilityReduced" + button-variant="confirm" + :disabled="false" + :phrase="confirmationPhrase" + :button-text="$options.i18n.confirmButtonText" + data-testid="project-features-save-button" + @confirm="$emit('confirm')" + /> + <gl-button + v-else + type="submit" + variant="confirm" + data-testid="project-features-save-button" + data-qa-selector="visibility_features_permissions_save_button" + > + {{ $options.i18n.confirmButtonText }} + </gl-button> </div> </template> diff --git a/app/assets/javascripts/pages/projects/shared/permissions/index.js b/app/assets/javascripts/pages/projects/shared/permissions/index.js index d7bae44e96e..de8b1cc400e 100644 --- a/app/assets/javascripts/pages/projects/shared/permissions/index.js +++ b/app/assets/javascripts/pages/projects/shared/permissions/index.js @@ -1,4 +1,5 @@ import Vue from 'vue'; +import { parseBoolean } from '~/lib/utils/common_utils'; import settingsPanel from './components/settings_panel.vue'; export default function initProjectPermissionsSettings() { @@ -6,8 +7,36 @@ export default function initProjectPermissionsSettings() { const componentPropsEl = document.querySelector('.js-project-permissions-form-data'); const componentProps = JSON.parse(componentPropsEl.innerHTML); + const { + targetFormId, + additionalInformation, + confirmDangerMessage, + confirmButtonText, + showVisibilityConfirmModal, + htmlConfirmationMessage, + phrase: confirmationPhrase, + } = mountPoint.dataset; + return new Vue({ el: mountPoint, - render: (createElement) => createElement(settingsPanel, { props: { ...componentProps } }), + provide: { + additionalInformation, + confirmDangerMessage, + confirmButtonText, + htmlConfirmationMessage: parseBoolean(htmlConfirmationMessage), + }, + render: (createElement) => + createElement(settingsPanel, { + props: { + ...componentProps, + confirmationPhrase, + showVisibilityConfirmModal: parseBoolean(showVisibilityConfirmModal), + }, + on: { + confirm: () => { + if (targetFormId) document.getElementById(targetFormId)?.submit(); + }, + }, + }), }); } diff --git a/app/assets/javascripts/pages/projects/show/index.js b/app/assets/javascripts/pages/projects/show/index.js index 31d69a731fe..71c6773c176 100644 --- a/app/assets/javascripts/pages/projects/show/index.js +++ b/app/assets/javascripts/pages/projects/show/index.js @@ -1,16 +1,16 @@ import initTree from 'ee_else_ce/repository'; import Activities from '~/activities'; import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation'; -import { BlobViewer } from '~/blob/viewer/index'; +import { BlobViewer } from '~/blob/viewer'; import { initUploadForm } from '~/blob_edit/blob_bundle'; import initInviteMembersModal from '~/invite_members/init_invite_members_modal'; import initInviteMembersTrigger from '~/invite_members/init_invite_members_trigger'; import leaveByUrl from '~/namespaces/leave_by_url'; import initVueNotificationsDropdown from '~/notifications'; +import Star from '~/projects/star'; import { initUploadFileTrigger } from '~/projects/upload_file'; import initReadMore from '~/read_more'; import UserCallout from '~/user_callout'; -import Star from '../../../star'; initReadMore(); new Star(); // eslint-disable-line no-new diff --git a/app/assets/javascripts/pages/registrations/new/index.js b/app/assets/javascripts/pages/registrations/new/index.js index ae605edeaf0..8bbe81a9ed5 100644 --- a/app/assets/javascripts/pages/registrations/new/index.js +++ b/app/assets/javascripts/pages/registrations/new/index.js @@ -1,3 +1,5 @@ +import { trackNewRegistrations } from '~/google_tag_manager'; + import NoEmojiValidator from '~/emoji/no_emoji_validator'; import LengthValidator from '~/pages/sessions/new/length_validator'; import UsernameValidator from '~/pages/sessions/new/username_validator'; @@ -5,3 +7,5 @@ import UsernameValidator from '~/pages/sessions/new/username_validator'; new UsernameValidator(); // eslint-disable-line no-new new LengthValidator(); // eslint-disable-line no-new new NoEmojiValidator(); // eslint-disable-line no-new + +trackNewRegistrations(); diff --git a/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue b/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue index b29e9455755..c28de88554a 100644 --- a/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue +++ b/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue @@ -596,7 +596,9 @@ export default { :disabled="disableSubmitButton" >{{ submitButtonText }}</gl-button > - <gl-button :href="cancelFormPath" class="float-right">{{ $options.i18n.cancel }}</gl-button> + <gl-button data-testid="wiki-cancel-button" :href="cancelFormPath" class="float-right">{{ + $options.i18n.cancel + }}</gl-button> </div> </gl-form> </template> diff --git a/app/assets/javascripts/pipeline_editor/components/commit/commit_form.vue b/app/assets/javascripts/pipeline_editor/components/commit/commit_form.vue index 9f82d4a5395..ca78f194a82 100644 --- a/app/assets/javascripts/pipeline_editor/components/commit/commit_form.vue +++ b/app/assets/javascripts/pipeline_editor/components/commit/commit_form.vue @@ -142,6 +142,7 @@ export default { class="js-no-auto-disable" category="primary" variant="confirm" + data-qa-selector="commit_changes_button" :disabled="submitDisabled" :loading="isSaving" > diff --git a/app/assets/javascripts/pipeline_editor/components/editor/text_editor.vue b/app/assets/javascripts/pipeline_editor/components/editor/text_editor.vue index 92fa411d5af..bfbf24c6b13 100644 --- a/app/assets/javascripts/pipeline_editor/components/editor/text_editor.vue +++ b/app/assets/javascripts/pipeline_editor/components/editor/text_editor.vue @@ -15,12 +15,10 @@ export default { onCiConfigUpdate(content) { this.$emit('updateCiConfig', content); }, - registerCiSchema() { + registerCiSchema({ detail: { instance } }) { if (this.glFeatures.schemaLinting) { - const editorInstance = this.$refs.editor.getEditor(); - - editorInstance.use({ definition: CiSchemaExtension }); - editorInstance.registerCiSchema(); + instance.use({ definition: CiSchemaExtension }); + instance.registerCiSchema(); } }, }, @@ -33,7 +31,7 @@ export default { ref="editor" :file-name="ciConfigPath" v-bind="$attrs" - @[$options.readyEvent]="registerCiSchema" + @[$options.readyEvent]="registerCiSchema($event)" @input="onCiConfigUpdate" v-on="$listeners" /> diff --git a/app/assets/javascripts/pipeline_editor/components/header/pipeline_status.vue b/app/assets/javascripts/pipeline_editor/components/header/pipeline_status.vue index 16ad648afca..72b492a5877 100644 --- a/app/assets/javascripts/pipeline_editor/components/header/pipeline_status.vue +++ b/app/assets/javascripts/pipeline_editor/components/header/pipeline_status.vue @@ -153,7 +153,9 @@ export default { <span class="gl-font-weight-bold"> <gl-sprintf :message="$options.i18n.pipelineInfo"> <template #id="{ content }"> - <span data-testid="pipeline-id"> {{ content }}{{ pipelineId }} </span> + <span data-testid="pipeline-id" data-qa-selector="pipeline_id_content"> + {{ content }}{{ pipelineId }} + </span> </template> <template #status>{{ status.text }}</template> <template #commit> diff --git a/app/assets/javascripts/pipeline_editor/components/header/validation_segment.vue b/app/assets/javascripts/pipeline_editor/components/header/validation_segment.vue index 833d784f940..23f1592cac1 100644 --- a/app/assets/javascripts/pipeline_editor/components/header/validation_segment.vue +++ b/app/assets/javascripts/pipeline_editor/components/header/validation_segment.vue @@ -5,6 +5,7 @@ import getAppStatus from '~/pipeline_editor/graphql/queries/client/app_status.qu import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue'; import { EDITOR_APP_STATUS_EMPTY, + EDITOR_APP_STATUS_LINT_UNAVAILABLE, EDITOR_APP_STATUS_LOADING, EDITOR_APP_STATUS_VALID, } from '../../constants'; @@ -17,6 +18,7 @@ export const i18n = { loading: s__('Pipelines|Validating GitLab CI configuration…'), invalid: s__('Pipelines|This GitLab CI configuration is invalid.'), invalidWithReason: s__('Pipelines|This GitLab CI configuration is invalid: %{reason}.'), + unavailableValidation: s__('Pipelines|Configuration validation currently not available.'), valid: s__('Pipelines|This GitLab CI configuration is valid.'), }; @@ -29,6 +31,9 @@ export default { TooltipOnTruncate, }, inject: { + lintUnavailableHelpPagePath: { + default: '', + }, ymlHelpPagePath: { default: '', }, @@ -49,9 +54,15 @@ export default { }, }, computed: { + helpPath() { + return this.isLintUnavailable ? this.lintUnavailableHelpPagePath : this.ymlHelpPagePath; + }, isEmpty() { return this.appStatus === EDITOR_APP_STATUS_EMPTY; }, + isLintUnavailable() { + return this.appStatus === EDITOR_APP_STATUS_LINT_UNAVAILABLE; + }, isLoading() { return this.appStatus === EDITOR_APP_STATUS_LOADING; }, @@ -62,6 +73,8 @@ export default { switch (this.appStatus) { case EDITOR_APP_STATUS_EMPTY: return 'check'; + case EDITOR_APP_STATUS_LINT_UNAVAILABLE: + return 'time-out'; case EDITOR_APP_STATUS_VALID: return 'check'; default: @@ -74,6 +87,8 @@ export default { switch (this.appStatus) { case EDITOR_APP_STATUS_EMPTY: return this.$options.i18n.empty; + case EDITOR_APP_STATUS_LINT_UNAVAILABLE: + return this.$options.i18n.unavailableValidation; case EDITOR_APP_STATUS_VALID: return this.$options.i18n.valid; default: @@ -96,10 +111,13 @@ export default { <span v-else class="gl-display-inline-flex gl-white-space-nowrap gl-max-w-full"> <tooltip-on-truncate :title="message" class="gl-text-truncate"> - <gl-icon :name="icon" /> <span data-testid="validationMsg">{{ message }}</span> + <gl-icon :name="icon" /> + <span data-qa-selector="validation_message_content" data-testid="validationMsg"> + {{ message }} + </span> </tooltip-on-truncate> <span v-if="!isEmpty" class="gl-flex-shrink-0 gl-pl-2"> - <gl-link data-testid="learnMoreLink" :href="ymlHelpPagePath"> + <gl-link data-testid="learnMoreLink" :href="helpPath"> {{ $options.i18n.learnMore }} </gl-link> </span> diff --git a/app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue b/app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue index 3f50a1225d8..c75b1d4bb11 100644 --- a/app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue +++ b/app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue @@ -11,6 +11,7 @@ import { EDITOR_APP_STATUS_INVALID, EDITOR_APP_STATUS_LOADING, EDITOR_APP_STATUS_VALID, + EDITOR_APP_STATUS_LINT_UNAVAILABLE, LINT_TAB, MERGED_TAB, TAB_QUERY_PARAM, @@ -106,6 +107,9 @@ export default { isInvalid() { return this.appStatus === EDITOR_APP_STATUS_INVALID; }, + isLintUnavailable() { + return this.appStatus === EDITOR_APP_STATUS_LINT_UNAVAILABLE; + }, isValid() { return this.appStatus === EDITOR_APP_STATUS_VALID; }, @@ -142,6 +146,7 @@ export default { <template> <gl-tabs class="file-editor gl-mb-3" + data-qa-selector="file_editor_container" :query-param-name="$options.query.TAB_QUERY_PARAM" sync-active-tab-with-query-params > @@ -166,6 +171,7 @@ export default { :empty-message="$options.i18n.empty.visualization" :is-empty="isEmpty" :is-invalid="isInvalid" + :is-unavailable="isLintUnavailable" :keep-component-mounted="false" :title="$options.i18n.tabGraph" lazy @@ -179,6 +185,7 @@ export default { class="gl-mb-3" :empty-message="$options.i18n.empty.lint" :is-empty="isEmpty" + :is-unavailable="isLintUnavailable" :title="$options.i18n.tabLint" data-testid="lint-tab" @click="setCurrentTab($options.tabConstants.LINT_TAB)" @@ -192,6 +199,7 @@ export default { :keep-component-mounted="false" :is-empty="isEmpty" :is-invalid="isInvalid" + :is-unavailable="isLintUnavailable" :title="$options.i18n.tabMergedYaml" lazy data-testid="merged-tab" diff --git a/app/assets/javascripts/pipeline_editor/components/ui/editor_tab.vue b/app/assets/javascripts/pipeline_editor/components/ui/editor_tab.vue index 7c032441a04..673599da085 100644 --- a/app/assets/javascripts/pipeline_editor/components/ui/editor_tab.vue +++ b/app/assets/javascripts/pipeline_editor/components/ui/editor_tab.vue @@ -42,6 +42,9 @@ import { __, s__ } from '~/locale'; export default { i18n: { invalid: __('Your CI/CD configuration syntax is invalid. View Lint tab for more details.'), + unavailable: __( + "We're experiencing difficulties and this tab content is currently unavailable.", + ), }, components: { GlAlert, @@ -66,14 +69,14 @@ export default { isEmpty: { type: Boolean, required: false, - default: null, + default: false, }, isInvalid: { type: Boolean, required: false, - default: null, + default: false, }, - lazy: { + isUnavailable: { type: Boolean, required: false, default: false, @@ -83,6 +86,11 @@ export default { required: false, default: true, }, + lazy: { + type: Boolean, + required: false, + default: false, + }, }, data() { return { @@ -109,6 +117,9 @@ export default { <template> <gl-tab :lazy="isLazy" v-bind="$attrs" v-on="$listeners"> <gl-alert v-if="isEmpty" variant="tip">{{ emptyMessage }}</gl-alert> + <gl-alert v-else-if="isUnavailable" variant="danger" :dismissible="false"> + {{ $options.i18n.unavailable }}</gl-alert + > <gl-alert v-else-if="isInvalid" variant="danger">{{ $options.i18n.invalid }}</gl-alert> <template v-else> <slot v-for="slot in slots" :name="slot"></slot> diff --git a/app/assets/javascripts/pipeline_editor/constants.js b/app/assets/javascripts/pipeline_editor/constants.js index a2eaeeef286..bc79b0742e7 100644 --- a/app/assets/javascripts/pipeline_editor/constants.js +++ b/app/assets/javascripts/pipeline_editor/constants.js @@ -6,12 +6,14 @@ export const CI_CONFIG_STATUS_VALID = 'VALID'; // represent the global state of the pipeline editor app. export const EDITOR_APP_STATUS_EMPTY = 'EMPTY'; export const EDITOR_APP_STATUS_INVALID = CI_CONFIG_STATUS_INVALID; +export const EDITOR_APP_STATUS_LINT_UNAVAILABLE = 'LINT_DOWN'; export const EDITOR_APP_STATUS_LOADING = 'LOADING'; export const EDITOR_APP_STATUS_VALID = CI_CONFIG_STATUS_VALID; export const EDITOR_APP_VALID_STATUSES = [ EDITOR_APP_STATUS_EMPTY, EDITOR_APP_STATUS_INVALID, + EDITOR_APP_STATUS_LINT_UNAVAILABLE, EDITOR_APP_STATUS_LOADING, EDITOR_APP_STATUS_VALID, ]; diff --git a/app/assets/javascripts/pipeline_editor/index.js b/app/assets/javascripts/pipeline_editor/index.js index ee93e327b76..04f91cb3d1e 100644 --- a/app/assets/javascripts/pipeline_editor/index.js +++ b/app/assets/javascripts/pipeline_editor/index.js @@ -37,6 +37,7 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => { emptyStateIllustrationPath, helpPaths, lintHelpPagePath, + lintUnavailableHelpPagePath, needsHelpPagePath, newMergeRequestPath, pipelinePagePath, @@ -124,6 +125,7 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => { emptyStateIllustrationPath, helpPaths, lintHelpPagePath, + lintUnavailableHelpPagePath, needsHelpPagePath, newMergeRequestPath, pipelinePagePath, diff --git a/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue b/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue index e397054f06a..90f48195c5e 100644 --- a/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue +++ b/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue @@ -12,8 +12,9 @@ import PipelineEditorMessages from './components/ui/pipeline_editor_messages.vue import { COMMIT_SHA_POLL_INTERVAL, EDITOR_APP_STATUS_EMPTY, - EDITOR_APP_VALID_STATUSES, EDITOR_APP_STATUS_LOADING, + EDITOR_APP_STATUS_LINT_UNAVAILABLE, + EDITOR_APP_VALID_STATUSES, LOAD_FAILURE_UNKNOWN, STARTER_TEMPLATE_NAME, } from './constants'; @@ -51,6 +52,7 @@ export default { failureReasons: [], initialCiFileContent: '', isFetchingCommitSha: false, + isLintUnavailable: false, isNewCiConfigFile: false, lastCommittedContent: '', shouldSkipStartScreen: false, @@ -147,10 +149,19 @@ export default { return { ...ciConfig, stages }; }, result({ data }) { - this.setAppStatus(data?.ciConfig?.status); + if (data?.ciConfig?.status) { + this.setAppStatus(data.ciConfig.status); + if (this.isLintUnavailable) { + this.isLintUnavailable = false; + } + } }, - error(err) { - this.reportFailure(LOAD_FAILURE_UNKNOWN, [String(err)]); + error() { + // We are not using `reportFailure` here because we don't + // need to bring attention to the linter being down. We let + // the user work on their file and if they look at their + // lint status, they will notice that the service is down + this.isLintUnavailable = true; }, watchLoading(isLoading) { if (isLoading) { @@ -247,6 +258,13 @@ export default { this.setAppStatus(EDITOR_APP_STATUS_EMPTY); } }, + isLintUnavailable(flag) { + if (flag) { + // We cannot set this status directly in the `error` + // hook otherwise we get an infinite loop caused by apollo. + this.setAppStatus(EDITOR_APP_STATUS_LINT_UNAVAILABLE); + } + }, }, mounted() { this.loadTemplateFromURL(); @@ -269,14 +287,10 @@ export default { await this.$apollo.queries.initialCiFileContent.refetch(); }, reportFailure(type, reasons = []) { - const isCurrentFailure = this.failureType === type && this.failureReasons[0] === reasons[0]; - - if (!isCurrentFailure) { - this.showFailure = true; - this.failureType = type; - this.failureReasons = reasons; - window.scrollTo({ top: 0, behavior: 'smooth' }); - } + this.showFailure = true; + this.failureType = type; + this.failureReasons = reasons; + window.scrollTo({ top: 0, behavior: 'smooth' }); }, reportSuccess(type) { window.scrollTo({ top: 0, behavior: 'smooth' }); @@ -289,7 +303,10 @@ export default { }, setAppStatus(appStatus) { if (EDITOR_APP_VALID_STATUSES.includes(appStatus)) { - this.$apollo.mutate({ mutation: updateAppStatus, variables: { appStatus } }); + this.$apollo.mutate({ + mutation: updateAppStatus, + variables: { appStatus }, + }); } }, setNewEmptyCiConfigFile() { diff --git a/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue b/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue index 8e8f31a4acc..96680080f0c 100644 --- a/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue +++ b/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue @@ -90,7 +90,7 @@ export default { </script> <template> - <div class="gl-pr-9 gl-transition-medium gl-w-full"> + <div class="gl-pr-10 gl-transition-medium gl-w-full"> <gl-modal v-if="showSwitchBranchModal" visible diff --git a/app/assets/javascripts/pipelines/components/header_component.vue b/app/assets/javascripts/pipelines/components/header_component.vue index 4db6a3c9fd8..8088858f381 100644 --- a/app/assets/javascripts/pipelines/components/header_component.vue +++ b/app/assets/javascripts/pipelines/components/header_component.vue @@ -212,7 +212,9 @@ export default { </script> <template> <div class="js-pipeline-header-container"> - <gl-alert v-if="hasError" :variant="failure.variant">{{ failure.text }}</gl-alert> + <gl-alert v-if="hasError" :variant="failure.variant" :dismissible="false">{{ + failure.text + }}</gl-alert> <ci-header v-if="shouldRenderContent" :status="pipeline.detailedStatus" diff --git a/app/assets/javascripts/pipelines/components/jobs/jobs_app.vue b/app/assets/javascripts/pipelines/components/jobs/jobs_app.vue index ffac8206b58..e11073aee33 100644 --- a/app/assets/javascripts/pipelines/components/jobs/jobs_app.vue +++ b/app/assets/javascripts/pipelines/components/jobs/jobs_app.vue @@ -112,7 +112,7 @@ export default { </gl-skeleton-loader> </div> - <jobs-table v-else :jobs="jobs" :table-fields="$options.fields" /> + <jobs-table v-else :jobs="jobs" :table-fields="$options.fields" data-testid="jobs-tab-table" /> <gl-intersection-observer v-if="jobsPageInfo.hasNextPage" @appear="fetchMoreJobs"> <gl-loading-icon v-if="$apollo.loading" size="md" /> diff --git a/app/assets/javascripts/pipelines/components/parsing_utils.js b/app/assets/javascripts/pipelines/components/parsing_utils.js index fa7330ce890..cae4e11c13f 100644 --- a/app/assets/javascripts/pipelines/components/parsing_utils.js +++ b/app/assets/javascripts/pipelines/components/parsing_utils.js @@ -1,5 +1,6 @@ import { memoize } from 'lodash'; import { createNodeDict } from '../utils'; +import { EXPLICIT_NEEDS_PROPERTY, NEEDS_PROPERTY } from '../constants'; import { createSankey } from './dag/drawing_utils'; /* @@ -15,12 +16,14 @@ const deduplicate = (item, itemIndex, arr) => { return foundIdx === itemIndex; }; -export const makeLinksFromNodes = (nodes, nodeDict) => { +export const makeLinksFromNodes = (nodes, nodeDict, { needsKey = NEEDS_PROPERTY } = {}) => { const constantLinkValue = 10; // all links are the same weight return nodes .map(({ jobs, name: groupName }) => - jobs.map(({ needs = [] }) => - needs.reduce((acc, needed) => { + jobs.map((job) => { + const needs = job[needsKey] || []; + + return needs.reduce((acc, needed) => { // It's possible that we have an optional job, which // is being needed by another job. In that scenario, // the needed job doesn't exist, so we don't want to @@ -34,8 +37,8 @@ export const makeLinksFromNodes = (nodes, nodeDict) => { } return acc; - }, []), - ), + }, []); + }), ) .flat(2); }; @@ -76,9 +79,9 @@ export const filterByAncestors = (links, nodeDict) => return !allAncestors.includes(source); }); -export const parseData = (nodes) => { - const nodeDict = createNodeDict(nodes); - const allLinks = makeLinksFromNodes(nodes, nodeDict); +export const parseData = (nodes, { needsKey = NEEDS_PROPERTY } = {}) => { + const nodeDict = createNodeDict(nodes, { needsKey }); + const allLinks = makeLinksFromNodes(nodes, nodeDict, { needsKey }); const filteredLinks = allLinks.filter(deduplicate); const links = filterByAncestors(filteredLinks, nodeDict); @@ -123,7 +126,8 @@ export const removeOrphanNodes = (sankeyfiedNodes) => { export const listByLayers = ({ stages }) => { const arrayOfJobs = stages.flatMap(({ groups }) => groups); const parsedData = parseData(arrayOfJobs); - const dataWithLayers = createSankey()(parsedData); + const explicitParsedData = parseData(arrayOfJobs, { needsKey: EXPLICIT_NEEDS_PROPERTY }); + const dataWithLayers = createSankey()(explicitParsedData); const pipelineLayers = dataWithLayers.nodes.reduce((acc, { layer, name }) => { /* sort groups by layer */ diff --git a/app/assets/javascripts/pipelines/components/pipeline_graph/pipeline_graph.vue b/app/assets/javascripts/pipelines/components/pipeline_graph/pipeline_graph.vue index 64210576b29..8daf85e2b2e 100644 --- a/app/assets/javascripts/pipelines/components/pipeline_graph/pipeline_graph.vue +++ b/app/assets/javascripts/pipelines/components/pipeline_graph/pipeline_graph.vue @@ -132,6 +132,7 @@ export default { :ref="$options.CONTAINER_REF" class="gl-bg-gray-10 gl-overflow-auto" data-testid="graph-container" + data-qa-selector="pipeline_graph_container" > <links-layer :pipeline-data="pipelineStages" @@ -147,7 +148,10 @@ export default { :key="`${stage.name}-${index}`" class="gl-flex-direction-column" > - <div class="gl-display-flex gl-align-items-center gl-w-full gl-px-9 gl-py-4 gl-mb-5"> + <div + class="gl-display-flex gl-align-items-center gl-w-full gl-px-9 gl-py-4 gl-mb-5" + data-qa-selector="stage_container" + > <stage-name :stage-name="stage.name" /> </div> <div :class="$options.jobWrapperClasses"> @@ -158,6 +162,7 @@ export default { :pipeline-id="$options.PIPELINE_ID" :is-hovered="highlightedJob === group.name" :is-faded-out="isFadedOut(group.name)" + data-qa-selector="job_container" @on-mouse-enter="setHoveredJob" @on-mouse-leave="removeHoveredJob" /> diff --git a/app/assets/javascripts/pipelines/components/unwrapping_utils.js b/app/assets/javascripts/pipelines/components/unwrapping_utils.js index 2d24beb8323..d42a11c3aba 100644 --- a/app/assets/javascripts/pipelines/components/unwrapping_utils.js +++ b/app/assets/javascripts/pipelines/components/unwrapping_utils.js @@ -1,4 +1,5 @@ import { reportToSentry } from '../utils'; +import { EXPLICIT_NEEDS_PROPERTY, NEEDS_PROPERTY } from '../constants'; const unwrapGroups = (stages) => { return stages.map((stage, idx) => { @@ -27,12 +28,16 @@ const unwrapNodesWithName = (jobArray, prop, field = 'name') => { } return jobArray.map((job) => { - return { ...job, [prop]: job[prop].nodes.map((item) => item[field] || '') }; + if (job[prop]) { + return { ...job, [prop]: job[prop].nodes.map((item) => item[field] || '') }; + } + return job; }); }; const unwrapJobWithNeeds = (denodedJobArray) => { - return unwrapNodesWithName(denodedJobArray, 'needs'); + const explicitNeedsUnwrapped = unwrapNodesWithName(denodedJobArray, EXPLICIT_NEEDS_PROPERTY); + return unwrapNodesWithName(explicitNeedsUnwrapped, NEEDS_PROPERTY); }; const unwrapStagesWithNeedsAndLookup = (denodedStages) => { diff --git a/app/assets/javascripts/pipelines/constants.js b/app/assets/javascripts/pipelines/constants.js index d123f7a203c..410fc7b82cd 100644 --- a/app/assets/javascripts/pipelines/constants.js +++ b/app/assets/javascripts/pipelines/constants.js @@ -7,6 +7,8 @@ export const ANY_TRIGGER_AUTHOR = 'Any'; export const SUPPORTED_FILTER_PARAMETERS = ['username', 'ref', 'status', 'source']; export const FILTER_TAG_IDENTIFIER = 'tag'; export const SCHEDULE_ORIGIN = 'schedule'; +export const NEEDS_PROPERTY = 'needs'; +export const EXPLICIT_NEEDS_PROPERTY = 'previousStageJobsOrNeeds'; export const TestStatus = { FAILED: 'failed', diff --git a/app/assets/javascripts/pipelines/graphql/fragmentTypes.json b/app/assets/javascripts/pipelines/graphql/fragmentTypes.json new file mode 100644 index 00000000000..4601b74b5c1 --- /dev/null +++ b/app/assets/javascripts/pipelines/graphql/fragmentTypes.json @@ -0,0 +1 @@ +{"__schema":{"types":[{"kind":"UNION","name":"JobNeedUnion","possibleTypes":[{"name":"CiBuildNeed"},{"name":"CiJob"}]}]}}
\ No newline at end of file diff --git a/app/assets/javascripts/pipelines/pipeline_shared_client.js b/app/assets/javascripts/pipelines/pipeline_shared_client.js index c3be487caae..84276588d6a 100644 --- a/app/assets/javascripts/pipelines/pipeline_shared_client.js +++ b/app/assets/javascripts/pipelines/pipeline_shared_client.js @@ -1,10 +1,19 @@ import VueApollo from 'vue-apollo'; +import { IntrospectionFragmentMatcher } from 'apollo-cache-inmemory'; import createDefaultClient from '~/lib/graphql'; +import introspectionQueryResultData from './graphql/fragmentTypes.json'; + +export const fragmentMatcher = new IntrospectionFragmentMatcher({ + introspectionQueryResultData, +}); export const apolloProvider = new VueApollo({ defaultClient: createDefaultClient( {}, { + cacheConfig: { + fragmentMatcher, + }, useGet: true, }, ), diff --git a/app/assets/javascripts/pipelines/utils.js b/app/assets/javascripts/pipelines/utils.js index e28eb74fb1b..f6e1c8b7412 100644 --- a/app/assets/javascripts/pipelines/utils.js +++ b/app/assets/javascripts/pipelines/utils.js @@ -1,6 +1,6 @@ import * as Sentry from '@sentry/browser'; import { pickBy } from 'lodash'; -import { SUPPORTED_FILTER_PARAMETERS } from './constants'; +import { SUPPORTED_FILTER_PARAMETERS, NEEDS_PROPERTY } from './constants'; /* The following functions are the main engine in transforming the data as @@ -35,11 +35,11 @@ import { SUPPORTED_FILTER_PARAMETERS } from './constants'; 10 -> value (constant) */ -export const createNodeDict = (nodes) => { +export const createNodeDict = (nodes, { needsKey = NEEDS_PROPERTY } = {}) => { return nodes.reduce((acc, node) => { const newNode = { ...node, - needs: node.jobs.map((job) => job.needs || []).flat(), + needs: node.jobs.map((job) => job[needsKey] || []).flat(), }; if (node.size > 1) { diff --git a/app/assets/javascripts/profile/add_ssh_key_validation.js b/app/assets/javascripts/profile/add_ssh_key_validation.js index 5c78de7ffb0..628dd159db8 100644 --- a/app/assets/javascripts/profile/add_ssh_key_validation.js +++ b/app/assets/javascripts/profile/add_ssh_key_validation.js @@ -1,8 +1,17 @@ export default class AddSshKeyValidation { - constructor(inputElement, warningElement, originalSubmitElement, confirmSubmitElement) { + constructor( + supportedAlgorithms, + inputElement, + warningElement, + originalSubmitElement, + confirmSubmitElement, + ) { this.inputElement = inputElement; this.form = inputElement.form; + this.supportedAlgorithms = supportedAlgorithms; + this.publicKeyRegExp = new RegExp(`^(${this.supportedAlgorithms.join('|')})`); + this.warningElement = warningElement; this.originalSubmitElement = originalSubmitElement; @@ -23,7 +32,7 @@ export default class AddSshKeyValidation { } submit(event) { - this.isValid = AddSshKeyValidation.isPublicKey(this.inputElement.value); + this.isValid = this.isPublicKey(this.inputElement.value); if (this.isValid) return true; @@ -37,7 +46,7 @@ export default class AddSshKeyValidation { this.originalSubmitElement.classList.toggle('hide', isVisible); } - static isPublicKey(value) { - return /^(ssh|ecdsa-sha2)-/.test(value); + isPublicKey(value) { + return this.publicKeyRegExp.test(value); } } diff --git a/app/assets/javascripts/project_select_combo_button.js b/app/assets/javascripts/project_select_combo_button.js index fd45d643ecc..09dbf2cee04 100644 --- a/app/assets/javascripts/project_select_combo_button.js +++ b/app/assets/javascripts/project_select_combo_button.js @@ -1,11 +1,12 @@ import $ from 'jquery'; +import { sprintf, __ } from '~/locale'; import AccessorUtilities from './lib/utils/accessor'; import { loadCSSFile } from './lib/utils/css_utils'; export default class ProjectSelectComboButton { constructor(select) { this.projectSelectInput = $(select); - this.newItemBtn = $('.new-project-item-link'); + this.newItemBtn = $('.js-new-project-item-link'); this.resourceType = this.newItemBtn.data('type'); this.resourceLabel = this.newItemBtn.data('label'); this.formattedText = this.deriveTextVariants(); @@ -80,9 +81,18 @@ export default class ProjectSelectComboButton { setNewItemBtnAttributes(project) { if (project) { this.newItemBtn.attr('href', project.url); - this.newItemBtn.text(`${this.formattedText.defaultTextPrefix} in ${project.name}`); + this.newItemBtn.text( + sprintf(__('New %{type} in %{project}'), { + type: this.resourceLabel, + project: project.name, + }), + ); } else { - this.newItemBtn.text(`Select project to create ${this.formattedText.presetTextSuffix}`); + this.newItemBtn.text( + sprintf(__('Select project to create %{type}'), { + type: this.formattedText.presetTextSuffix, + }), + ); } } @@ -99,15 +109,12 @@ export default class ProjectSelectComboButton { } deriveTextVariants() { - const defaultTextPrefix = this.resourceLabel; - // the trailing slice call depluralizes each of these strings (e.g. new-issues -> new-issue) const localStorageItemType = `new-${this.resourceType.split('_').join('-').slice(0, -1)}`; const presetTextSuffix = this.resourceType.split('_').join(' ').slice(0, -1); return { localStorageItemType, // new-issue / new-merge-request - defaultTextPrefix, // New issue / New merge request presetTextSuffix, // issue / merge request }; } diff --git a/app/assets/javascripts/project_find_file.js b/app/assets/javascripts/projects/project_find_file.js index d295c06928f..d295c06928f 100644 --- a/app/assets/javascripts/project_find_file.js +++ b/app/assets/javascripts/projects/project_find_file.js diff --git a/app/assets/javascripts/project_import.js b/app/assets/javascripts/projects/project_import.js index a51a2a2242f..27a218f1f52 100644 --- a/app/assets/javascripts/project_import.js +++ b/app/assets/javascripts/projects/project_import.js @@ -1,4 +1,4 @@ -import { visitUrl } from './lib/utils/url_utility'; +import { visitUrl } from '~/lib/utils/url_utility'; export default function projectImport() { setTimeout(() => { diff --git a/app/assets/javascripts/project_visibility.js b/app/assets/javascripts/projects/project_visibility.js index 1b57a69d464..c962554c9f4 100644 --- a/app/assets/javascripts/project_visibility.js +++ b/app/assets/javascripts/projects/project_visibility.js @@ -1,4 +1,6 @@ import $ from 'jquery'; +import { escape } from 'lodash'; +import { __, sprintf } from '~/locale'; import eventHub from '~/projects/new/event_hub'; // Values are from lib/gitlab/visibility_level.rb @@ -25,10 +27,21 @@ function setVisibilityOptions({ name, visibility, showPath, editPath }) { if (reason) { const optionTitle = option.querySelector('.option-title'); const optionName = optionTitle ? optionTitle.innerText.toLowerCase() : ''; - reason.innerHTML = `This project cannot be ${optionName} because the visibility of - <a href="${showPath}">${name}</a> is ${visibility}. To make this project - ${optionName}, you must first <a href="${editPath}">change the visibility</a> - of the parent group.`; + reason.innerHTML = sprintf( + __( + 'This project cannot be %{visibilityLevel} because the visibility of %{openShowLink}%{name}%{closeShowLink} is %{visibility}. To make this project %{visibilityLevel}, you must first %{openEditLink}change the visibility%{closeEditLink} of the parent group.', + ), + { + visibilityLevel: optionName, + name: escape(name), + visibility, + openShowLink: `<a href="${showPath}">`, + closeShowLink: '</a>', + openEditLink: `<a href="${editPath}">`, + closeEditLink: '</a>', + }, + false, + ); } } else { option.classList.remove('disabled'); diff --git a/app/assets/javascripts/star.js b/app/assets/javascripts/projects/star.js index 7cba445d9b1..578e22ca25d 100644 --- a/app/assets/javascripts/star.js +++ b/app/assets/javascripts/projects/star.js @@ -1,8 +1,8 @@ import $ from 'jquery'; -import createFlash from './flash'; -import axios from './lib/utils/axios_utils'; -import { spriteIcon } from './lib/utils/common_utils'; -import { __, s__ } from './locale'; +import createFlash from '~/flash'; +import axios from '~/lib/utils/axios_utils'; +import { spriteIcon } from '~/lib/utils/common_utils'; +import { __, s__ } from '~/locale'; export default class Star { constructor(container = '.project-home-panel') { diff --git a/app/assets/javascripts/related_issues/components/related_issues_list.vue b/app/assets/javascripts/related_issues/components/related_issues_list.vue index 58138655241..8b39851405e 100644 --- a/app/assets/javascripts/related_issues/components/related_issues_list.vue +++ b/app/assets/javascripts/related_issues/components/related_issues_list.vue @@ -110,7 +110,7 @@ export default { v-for="issue in relatedIssues" :key="issue.id" :class="{ - 'user-can-drag': canReorder, + 'gl-cursor-grab': canReorder, 'sortable-row': canReorder, 'card card-slim': canReorder, }" diff --git a/app/assets/javascripts/repository/components/blob_button_group.vue b/app/assets/javascripts/repository/components/blob_button_group.vue index 6f540bf8ece..857795c71b0 100644 --- a/app/assets/javascripts/repository/components/blob_button_group.vue +++ b/app/assets/javascripts/repository/components/blob_button_group.vue @@ -1,5 +1,5 @@ <script> -import { GlButtonGroup, GlButton, GlModalDirective } from '@gitlab/ui'; +import { GlButtonGroup, GlButton } from '@gitlab/ui'; import { uniqueId } from 'lodash'; import { sprintf, __ } from '~/locale'; import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; @@ -20,9 +20,6 @@ export default { DeleteBlobModal, LockButton: () => import('ee_component/repository/components/lock_button.vue'), }, - directives: { - GlModal: GlModalDirective, - }, mixins: [getRefMixin, glFeatureFlagMixin()], inject: { targetBranch: { @@ -73,6 +70,10 @@ export default { type: Boolean, required: true, }, + showForkSuggestion: { + type: Boolean, + required: true, + }, }, computed: { replaceModalId() { @@ -91,6 +92,16 @@ export default { return this.canLock ? 'lock_button' : 'disabled_lock_button'; }, }, + methods: { + showModal(modalId) { + if (this.showForkSuggestion) { + this.$emit('fork'); + return; + } + + this.$refs[modalId].show(); + }, + }, }; </script> @@ -107,14 +118,15 @@ export default { data-testid="lock" :data-qa-selector="lockBtnQASelector" /> - <gl-button v-gl-modal="replaceModalId" data-testid="replace"> + <gl-button data-testid="replace" @click="showModal(replaceModalId)"> {{ $options.i18n.replace }} </gl-button> - <gl-button v-gl-modal="deleteModalId" data-testid="delete"> + <gl-button data-testid="delete" @click="showModal(deleteModalId)"> {{ $options.i18n.delete }} </gl-button> </gl-button-group> <upload-blob-modal + :ref="replaceModalId" :modal-id="replaceModalId" :modal-title="replaceModalTitle" :commit-message="replaceModalTitle" @@ -126,6 +138,7 @@ export default { :primary-btn-text="$options.i18n.replacePrimaryBtnText" /> <delete-blob-modal + :ref="deleteModalId" :modal-id="deleteModalId" :modal-title="deleteModalTitle" :delete-path="deletePath" diff --git a/app/assets/javascripts/repository/components/blob_content_viewer.vue b/app/assets/javascripts/repository/components/blob_content_viewer.vue index f3fa4526999..9368d7e6058 100644 --- a/app/assets/javascripts/repository/components/blob_content_viewer.vue +++ b/app/assets/javascripts/repository/components/blob_content_viewer.vue @@ -105,8 +105,10 @@ export default { forkAndEditPath: '', ideForkAndEditPath: '', storedExternally: false, + externalStorage: '', canModifyBlob: false, canCurrentUserPushToBranch: false, + archived: false, rawPath: '', externalStorageUrl: '', replacePath: '', @@ -166,7 +168,7 @@ export default { return pushCode && downloadCode; }, pathLockedByUser() { - const pathLock = this.project.pathLocks.nodes.find((node) => node.path === this.path); + const pathLock = this.project?.pathLocks?.nodes.find((node) => node.path === this.path); return pathLock ? pathLock.user : null; }, @@ -249,6 +251,7 @@ export default { > <template #actions> <blob-edit + v-if="!blobInfo.archived" :show-edit-button="!isBinaryFileType" :edit-path="blobInfo.editBlobPath" :web-ide-path="blobInfo.ideEditPath" @@ -268,7 +271,7 @@ export default { </gl-button> <blob-button-group - v-if="isLoggedIn" + v-if="isLoggedIn && !blobInfo.archived" :path="path" :name="blobInfo.name" :replace-path="blobInfo.replacePath" @@ -279,6 +282,8 @@ export default { :project-path="projectPath" :is-locked="Boolean(pathLockedByUser)" :can-lock="canLock" + :show-fork-suggestion="showForkSuggestion" + @fork="setForkTarget('ide')" /> </template> </blob-header> @@ -289,6 +294,7 @@ export default { /> <blob-content v-if="!blobViewer" + class="js-syntax-highlight" :rich-viewer="legacyRichViewer" :blob="blobInfo" :content="legacySimpleViewer" diff --git a/app/assets/javascripts/repository/components/blob_controls.vue b/app/assets/javascripts/repository/components/blob_controls.vue new file mode 100644 index 00000000000..3223ed92fe2 --- /dev/null +++ b/app/assets/javascripts/repository/components/blob_controls.vue @@ -0,0 +1,119 @@ +<script> +import { GlButton } from '@gitlab/ui'; +import { __ } from '~/locale'; +import createFlash from '~/flash'; +import getRefMixin from '~/repository/mixins/get_ref'; +import initSourcegraph from '~/sourcegraph'; +import { updateElementsVisibility } from '../utils/dom'; +import blobControlsQuery from '../queries/blob_controls.query.graphql'; + +export default { + i18n: { + findFile: __('Find file'), + blame: __('Blame'), + history: __('History'), + permalink: __('Permalink'), + errorMessage: __('An error occurred while loading the blob controls.'), + }, + buttonClassList: 'gl-sm-w-auto gl-w-full gl-sm-mt-0 gl-mt-3', + components: { + GlButton, + }, + mixins: [getRefMixin], + apollo: { + project: { + query: blobControlsQuery, + variables() { + return { + projectPath: this.projectPath, + filePath: this.filePath, + ref: this.ref, + }; + }, + skip() { + return !this.filePath; + }, + error() { + createFlash({ message: this.$options.i18n.errorMessage }); + }, + }, + }, + props: { + projectPath: { + type: String, + required: true, + }, + }, + data() { + return { + project: { + repository: { + blobs: { + nodes: [ + { + findFilePath: null, + blamePath: null, + historyPath: null, + permalinkPath: null, + storedExternally: null, + externalStorage: null, + }, + ], + }, + }, + }, + }; + }, + computed: { + filePath() { + return this.$route.params.path; + }, + showBlobControls() { + return this.filePath && this.$route.name === 'blobPathDecoded'; + }, + blobInfo() { + return this.project?.repository?.blobs?.nodes[0] || {}; + }, + showBlameButton() { + return !this.blobInfo.storedExternally && this.blobInfo.externalStorage !== 'lfs'; + }, + }, + watch: { + showBlobControls(shouldShow) { + updateElementsVisibility('.tree-controls', !shouldShow); + }, + blobInfo() { + initSourcegraph(); + }, + }, +}; +</script> + +<template> + <div v-if="showBlobControls"> + <gl-button data-testid="find" :href="blobInfo.findFilePath" :class="$options.buttonClassList"> + {{ $options.i18n.findFile }} + </gl-button> + <gl-button + v-if="showBlameButton" + data-testid="blame" + :href="blobInfo.blamePath" + :class="$options.buttonClassList" + > + {{ $options.i18n.blame }} + </gl-button> + + <gl-button data-testid="history" :href="blobInfo.historyPath" :class="$options.buttonClassList"> + {{ $options.i18n.history }} + </gl-button> + + <gl-button + data-testid="permalink" + :href="blobInfo.permalinkPath" + :class="$options.buttonClassList" + class="js-data-file-blob-permalink-url" + > + {{ $options.i18n.permalink }} + </gl-button> + </div> +</template> diff --git a/app/assets/javascripts/repository/components/blob_edit.vue b/app/assets/javascripts/repository/components/blob_edit.vue index fd377ba1b81..69e2bd563c9 100644 --- a/app/assets/javascripts/repository/components/blob_edit.vue +++ b/app/assets/javascripts/repository/components/blob_edit.vue @@ -50,6 +50,7 @@ export default { :web-ide-url="webIdePath" :needs-to-fork="needsToFork" :is-blob="true" + disable-fork-modal @edit="onEdit" /> <div v-else> diff --git a/app/assets/javascripts/repository/components/delete_blob_modal.vue b/app/assets/javascripts/repository/components/delete_blob_modal.vue index 0d3dc06c2c8..f3c9aea36f1 100644 --- a/app/assets/javascripts/repository/components/delete_blob_modal.vue +++ b/app/assets/javascripts/repository/components/delete_blob_modal.vue @@ -146,6 +146,9 @@ export default { /* eslint-enable dot-notation */ }, methods: { + show() { + this.$refs[this.modalId].show(); + }, submitForm(e) { e.preventDefault(); // Prevent modal from closing this.form.showValidation = true; @@ -164,6 +167,7 @@ export default { <template> <gl-modal + :ref="modalId" v-bind="$attrs" data-testid="modal-delete" :modal-id="modalId" diff --git a/app/assets/javascripts/repository/components/fork_suggestion.vue b/app/assets/javascripts/repository/components/fork_suggestion.vue index c266bea319b..471f1dad2e3 100644 --- a/app/assets/javascripts/repository/components/fork_suggestion.vue +++ b/app/assets/javascripts/repository/components/fork_suggestion.vue @@ -32,6 +32,7 @@ export default { class="gl-mr-3" category="secondary" variant="confirm" + data-method="post" :href="forkPath" data-testid="fork" > diff --git a/app/assets/javascripts/repository/components/preview/index.vue b/app/assets/javascripts/repository/components/preview/index.vue index c6e461b10e0..dc5a031c9f3 100644 --- a/app/assets/javascripts/repository/components/preview/index.vue +++ b/app/assets/javascripts/repository/components/preview/index.vue @@ -47,6 +47,9 @@ export default { } }, }, + safeHtmlConfig: { + ADD_TAGS: ['copy-code'], + }, }; </script> @@ -62,7 +65,11 @@ export default { </div> <div class="blob-viewer" data-qa-selector="blob_viewer_content" itemprop="about"> <gl-loading-icon v-if="loading > 0" size="md" color="dark" class="my-4 mx-auto" /> - <div v-else-if="readme" ref="readme" v-safe-html="readme.html"></div> + <div + v-else-if="readme" + ref="readme" + v-safe-html:[$options.safeHtmlConfig]="readme.html" + ></div> </div> </article> </template> diff --git a/app/assets/javascripts/repository/components/upload_blob_modal.vue b/app/assets/javascripts/repository/components/upload_blob_modal.vue index b56c9ce5247..7fcaf772aac 100644 --- a/app/assets/javascripts/repository/components/upload_blob_modal.vue +++ b/app/assets/javascripts/repository/components/upload_blob_modal.vue @@ -136,6 +136,9 @@ export default { }, }, methods: { + show() { + this.$refs[this.modalId].show(); + }, setFile(file) { this.file = file; @@ -206,6 +209,7 @@ export default { <template> <gl-form> <gl-modal + :ref="modalId" :modal-id="modalId" :title="modalTitle" :action-primary="primaryOptions" diff --git a/app/assets/javascripts/repository/index.js b/app/assets/javascripts/repository/index.js index 197b19387cf..120c32caefd 100644 --- a/app/assets/javascripts/repository/index.js +++ b/app/assets/javascripts/repository/index.js @@ -9,6 +9,7 @@ import App from './components/app.vue'; import Breadcrumbs from './components/breadcrumbs.vue'; import DirectoryDownloadLinks from './components/directory_download_links.vue'; import LastCommit from './components/last_commit.vue'; +import BlobControls from './components/blob_controls.vue'; import apolloProvider from './graphql'; import commitsQuery from './queries/commits.query.graphql'; import projectPathQuery from './queries/project_path.query.graphql'; @@ -71,8 +72,26 @@ export default function setupVueRepositoryList() { }, }); + const initBlobControlsApp = () => + new Vue({ + el: document.getElementById('js-blob-controls'), + router, + apolloProvider, + render(h) { + return h(BlobControls, { + props: { + projectPath, + }, + }); + }, + }); + initLastCommitApp(); + if (gon.features.refactorBlobViewer) { + initBlobControlsApp(); + } + router.afterEach(({ params: { path } }) => { setTitle(path, ref, fullName); }); @@ -144,7 +163,7 @@ export default function setupVueRepositoryList() { }`, // Ideally passing this class to `props` should work // But it doesn't work here. :( - class: 'btn btn-default btn-md gl-button ml-sm-0', + class: 'btn btn-default btn-md gl-button', }, }, [__('History')], diff --git a/app/assets/javascripts/repository/queries/blob_controls.query.graphql b/app/assets/javascripts/repository/queries/blob_controls.query.graphql new file mode 100644 index 00000000000..fc1cf5f254b --- /dev/null +++ b/app/assets/javascripts/repository/queries/blob_controls.query.graphql @@ -0,0 +1,18 @@ +query getBlobControls($projectPath: ID!, $filePath: String!, $ref: String!) { + project(fullPath: $projectPath) { + id + repository { + blobs(paths: [$filePath], ref: $ref) { + nodes { + id + findFilePath + blamePath + historyPath + permalinkPath + storedExternally + externalStorage + } + } + } + } +} diff --git a/app/assets/javascripts/repository/queries/blob_info.query.graphql b/app/assets/javascripts/repository/queries/blob_info.query.graphql index 45d1ba80917..ae20a0f0bc4 100644 --- a/app/assets/javascripts/repository/queries/blob_info.query.graphql +++ b/app/assets/javascripts/repository/queries/blob_info.query.graphql @@ -1,22 +1,14 @@ +#import "ee_else_ce/repository/queries/path_locks.fragment.graphql" + query getBlobInfo($projectPath: ID!, $filePath: String!, $ref: String!) { project(fullPath: $projectPath) { - id userPermissions { pushCode downloadCode createMergeRequestIn forkProject } - pathLocks { - nodes { - id - path - user { - id - username - } - } - } + ...ProjectPathLocksFragment repository { empty blobs(paths: [$filePath], ref: $ref) { @@ -35,7 +27,9 @@ query getBlobInfo($projectPath: ID!, $filePath: String!, $ref: String!) { ideForkAndEditPath canModifyBlob canCurrentUserPushToBranch + archived storedExternally + externalStorage rawPath replacePath pipelineEditorPath diff --git a/app/assets/javascripts/repository/queries/path_locks.fragment.graphql b/app/assets/javascripts/repository/queries/path_locks.fragment.graphql new file mode 100644 index 00000000000..868a513362d --- /dev/null +++ b/app/assets/javascripts/repository/queries/path_locks.fragment.graphql @@ -0,0 +1,3 @@ +fragment ProjectPathLocksFragment on Project { + id +} diff --git a/app/assets/javascripts/runner/runner_details/runner_details_app.vue b/app/assets/javascripts/runner/admin_runner_edit/admin_runner_edit_app.vue index 6557a7834e7..4d2ca9b0c58 100644 --- a/app/assets/javascripts/runner/runner_details/runner_details_app.vue +++ b/app/assets/javascripts/runner/admin_runner_edit/admin_runner_edit_app.vue @@ -1,20 +1,17 @@ <script> -import createFlash from '~/flash'; +import { createAlert } from '~/flash'; import { TYPE_CI_RUNNER } from '~/graphql_shared/constants'; import { convertToGraphQLId } from '~/graphql_shared/utils'; -import { sprintf } from '~/locale'; -import RunnerTypeAlert from '../components/runner_type_alert.vue'; -import RunnerTypeBadge from '../components/runner_type_badge.vue'; +import RunnerHeader from '../components/runner_header.vue'; import RunnerUpdateForm from '../components/runner_update_form.vue'; -import { I18N_DETAILS_TITLE, I18N_FETCH_ERROR } from '../constants'; +import { I18N_FETCH_ERROR } from '../constants'; import getRunnerQuery from '../graphql/get_runner.query.graphql'; import { captureException } from '../sentry_utils'; export default { - name: 'RunnerDetailsApp', + name: 'AdminRunnerEditApp', components: { - RunnerTypeAlert, - RunnerTypeBadge, + RunnerHeader, RunnerUpdateForm, }, props: { @@ -37,17 +34,12 @@ export default { }; }, error(error) { - createFlash({ message: I18N_FETCH_ERROR }); + createAlert({ message: I18N_FETCH_ERROR }); this.reportToSentry(error); }, }, }, - computed: { - pageTitle() { - return sprintf(I18N_DETAILS_TITLE, { runner_id: this.runnerId }); - }, - }, errorCaptured(error) { this.reportToSentry(error); }, @@ -60,12 +52,7 @@ export default { </script> <template> <div> - <h2 class="page-title"> - {{ pageTitle }} <runner-type-badge v-if="runner" :type="runner.runnerType" /> - </h2> - - <runner-type-alert v-if="runner" :type="runner.runnerType" /> - + <runner-header v-if="runner" :runner="runner" /> <runner-update-form :runner="runner" class="gl-my-5" /> </div> </template> diff --git a/app/assets/javascripts/runner/runner_details/index.js b/app/assets/javascripts/runner/admin_runner_edit/index.js index db8f239a3c3..adb420f9963 100644 --- a/app/assets/javascripts/runner/runner_details/index.js +++ b/app/assets/javascripts/runner/admin_runner_edit/index.js @@ -1,11 +1,11 @@ import Vue from 'vue'; import VueApollo from 'vue-apollo'; import createDefaultClient from '~/lib/graphql'; -import RunnerDetailsApp from './runner_details_app.vue'; +import AdminRunnerEditApp from './admin_runner_edit_app.vue'; Vue.use(VueApollo); -export const initRunnerDetail = (selector = '#js-runner-details') => { +export const initAdminRunnerEdit = (selector = '#js-admin-runner-edit') => { const el = document.querySelector(selector); if (!el) { @@ -22,7 +22,7 @@ export const initRunnerDetail = (selector = '#js-runner-details') => { el, apolloProvider, render(h) { - return h(RunnerDetailsApp, { + return h(AdminRunnerEditApp, { props: { runnerId, }, diff --git a/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue b/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue index f8220553db6..bb2bac531a7 100644 --- a/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue +++ b/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue @@ -1,14 +1,15 @@ <script> import { GlBadge, GlLink } from '@gitlab/ui'; -import createFlash from '~/flash'; +import { createAlert } from '~/flash'; import { fetchPolicies } from '~/lib/graphql'; import { updateHistory } from '~/lib/utils/url_utility'; +import { formatNumber } from '~/locale'; import RegistrationDropdown from '../components/registration/registration_dropdown.vue'; import RunnerFilteredSearchBar from '../components/runner_filtered_search_bar.vue'; import RunnerList from '../components/runner_list.vue'; import RunnerName from '../components/runner_name.vue'; -import RunnerOnlineStat from '../components/stat/runner_online_stat.vue'; +import RunnerStats from '../components/stat/runner_stats.vue'; import RunnerPagination from '../components/runner_pagination.vue'; import RunnerTypeTabs from '../components/runner_type_tabs.vue'; @@ -19,9 +20,13 @@ import { INSTANCE_TYPE, GROUP_TYPE, PROJECT_TYPE, + STATUS_ONLINE, + STATUS_OFFLINE, + STATUS_STALE, I18N_FETCH_ERROR, } from '../constants'; import getRunnersQuery from '../graphql/get_runners.query.graphql'; +import getRunnersCountQuery from '../graphql/get_runners_count.query.graphql'; import { fromUrlQueryToSearch, fromSearchToUrl, @@ -29,6 +34,17 @@ import { } from '../runner_search_utils'; import { captureException } from '../sentry_utils'; +const runnersCountSmartQuery = { + query: getRunnersCountQuery, + fetchPolicy: fetchPolicies.CACHE_AND_NETWORK, + update(data) { + return data?.runners?.count; + }, + error(error) { + this.reportToSentry(error); + }, +}; + export default { name: 'AdminRunnersApp', components: { @@ -38,7 +54,7 @@ export default { RunnerFilteredSearchBar, RunnerList, RunnerName, - RunnerOnlineStat, + RunnerStats, RunnerPagination, RunnerTypeTabs, }, @@ -47,26 +63,6 @@ export default { type: String, required: true, }, - activeRunnersCount: { - type: String, - required: true, - }, - allRunnersCount: { - type: String, - required: true, - }, - instanceRunnersCount: { - type: String, - required: true, - }, - groupRunnersCount: { - type: String, - required: true, - }, - projectRunnersCount: { - type: String, - required: true, - }, }, data() { return { @@ -95,16 +91,78 @@ export default { }; }, error(error) { - createFlash({ message: I18N_FETCH_ERROR }); + createAlert({ message: I18N_FETCH_ERROR }); this.reportToSentry(error); }, }, + allRunnersCount: { + ...runnersCountSmartQuery, + variables() { + return this.countVariables; + }, + }, + instanceRunnersCount: { + ...runnersCountSmartQuery, + variables() { + return { + ...this.countVariables, + type: INSTANCE_TYPE, + }; + }, + }, + groupRunnersCount: { + ...runnersCountSmartQuery, + variables() { + return { + ...this.countVariables, + type: GROUP_TYPE, + }; + }, + }, + projectRunnersCount: { + ...runnersCountSmartQuery, + variables() { + return { + ...this.countVariables, + type: PROJECT_TYPE, + }; + }, + }, + onlineRunnersTotal: { + ...runnersCountSmartQuery, + variables() { + return { + status: STATUS_ONLINE, + }; + }, + }, + offlineRunnersTotal: { + ...runnersCountSmartQuery, + variables() { + return { + status: STATUS_OFFLINE, + }; + }, + }, + staleRunnersTotal: { + ...runnersCountSmartQuery, + variables() { + return { + status: STATUS_STALE, + }; + }, + }, }, computed: { variables() { return fromSearchToVariables(this.search); }, + countVariables() { + // Exclude pagination variables, leave only filters variables + const { sort, before, last, after, first, ...countVariables } = this.variables; + return countVariables; + }, runnersLoading() { return this.$apollo.queries.runners.loading; }, @@ -125,7 +183,7 @@ export default { search: { deep: true, handler() { - // TODO Implement back button reponse using onpopstate + // TODO Implement back button response using onpopstate updateHistory({ url: fromSearchToUrl(this.search), title: document.title, @@ -138,18 +196,27 @@ export default { }, methods: { tabCount({ runnerType }) { + let count; switch (runnerType) { case null: - return this.allRunnersCount; + count = this.allRunnersCount; + break; case INSTANCE_TYPE: - return this.instanceRunnersCount; + count = this.instanceRunnersCount; + break; case GROUP_TYPE: - return this.groupRunnersCount; + count = this.groupRunnersCount; + break; case PROJECT_TYPE: - return this.projectRunnersCount; + count = this.projectRunnersCount; + break; default: return null; } + if (typeof count === 'number') { + return formatNumber(count); + } + return ''; }, reportToSentry(error) { captureException({ error, component: this.$options.name }); @@ -161,7 +228,11 @@ export default { </script> <template> <div> - <runner-online-stat class="gl-py-6 gl-px-5" :value="activeRunnersCount" /> + <runner-stats + :online-runners-count="onlineRunnersTotal" + :offline-runners-count="offlineRunnersTotal" + :stale-runners-count="staleRunnersTotal" + /> <div class="gl-display-flex gl-align-items-center gl-flex-direction-column-reverse gl-md-flex-direction-row gl-mt-3 gl-md-mt-0" diff --git a/app/assets/javascripts/runner/admin_runners/index.js b/app/assets/javascripts/runner/admin_runners/index.js index 62da6cbfa2b..3b8a8fe9cd1 100644 --- a/app/assets/javascripts/runner/admin_runners/index.js +++ b/app/assets/javascripts/runner/admin_runners/index.js @@ -2,6 +2,8 @@ import { GlToast } from '@gitlab/ui'; import Vue from 'vue'; import VueApollo from 'vue-apollo'; import createDefaultClient from '~/lib/graphql'; +import { visitUrl } from '~/lib/utils/url_utility'; +import { updateOutdatedUrl } from '~/runner/runner_search_utils'; import AdminRunnersApp from './admin_runners_app.vue'; Vue.use(GlToast); @@ -14,18 +16,16 @@ export const initAdminRunners = (selector = '#js-admin-runners') => { return null; } - // TODO `activeRunnersCount` should be implemented using a GraphQL API - // https://gitlab.com/gitlab-org/gitlab/-/issues/333806 - const { - runnerInstallHelpPage, - registrationToken, + // Redirect outdated URLs + const updatedUrlQuery = updateOutdatedUrl(); + if (updatedUrlQuery) { + visitUrl(updatedUrlQuery); - activeRunnersCount, - allRunnersCount, - instanceRunnersCount, - groupRunnersCount, - projectRunnersCount, - } = el.dataset; + // Prevent mounting the rest of the app, redirecting now. + return null; + } + + const { runnerInstallHelpPage, registrationToken } = el.dataset; const apolloProvider = new VueApollo({ defaultClient: createDefaultClient(), @@ -41,14 +41,6 @@ export const initAdminRunners = (selector = '#js-admin-runners') => { return h(AdminRunnersApp, { props: { registrationToken, - - // All runner counts are returned as formatted - // strings, we do not use `parseInt`. - activeRunnersCount, - allRunnersCount, - instanceRunnersCount, - groupRunnersCount, - projectRunnersCount, }, }); }, diff --git a/app/assets/javascripts/runner/components/cells/runner_actions_cell.vue b/app/assets/javascripts/runner/components/cells/runner_actions_cell.vue index 33f7a67aba4..0934508c87f 100644 --- a/app/assets/javascripts/runner/components/cells/runner_actions_cell.vue +++ b/app/assets/javascripts/runner/components/cells/runner_actions_cell.vue @@ -1,6 +1,6 @@ <script> import { GlButton, GlButtonGroup, GlModalDirective, GlTooltipDirective } from '@gitlab/ui'; -import createFlash from '~/flash'; +import { createAlert } from '~/flash'; import { __, s__, sprintf } from '~/locale'; import runnerDeleteMutation from '~/runner/graphql/runner_delete.mutation.graphql'; import runnerActionsUpdateMutation from '~/runner/graphql/runner_actions_update.mutation.graphql'; @@ -69,6 +69,12 @@ export default { runnerDeleteModalId() { return `delete-runner-modal-${this.runnerId}`; }, + canUpdate() { + return this.runner.userPermissions?.updateRunner; + }, + canDelete() { + return this.runner.userPermissions?.deleteRunner; + }, }, methods: { async onToggleActive() { @@ -133,7 +139,7 @@ export default { onError(error) { const { message } = error; - createFlash({ message }); + createAlert({ message }); this.reportToSentry(error); }, @@ -156,14 +162,15 @@ export default { See https://gitlab.com/gitlab-org/gitlab/-/issues/334802 --> <gl-button - v-if="runner.adminUrl" + v-if="canUpdate && runner.editAdminUrl" v-gl-tooltip.hover.viewport="$options.I18N_EDIT" - :href="runner.adminUrl" + :href="runner.editAdminUrl" :aria-label="$options.I18N_EDIT" icon="pencil" data-testid="edit-runner" /> <gl-button + v-if="canUpdate" v-gl-tooltip.hover.viewport="toggleActiveTitle" :aria-label="toggleActiveTitle" :icon="toggleActiveIcon" @@ -172,6 +179,7 @@ export default { @click="onToggleActive" /> <gl-button + v-if="canDelete" v-gl-tooltip.hover.viewport="deleteTitle" v-gl-modal="runnerDeleteModalId" :aria-label="deleteTitle" @@ -182,6 +190,7 @@ export default { /> <runner-delete-modal + v-if="canDelete" :ref="runnerDeleteModalId" :modal-id="runnerDeleteModalId" :runner-name="runnerName" diff --git a/app/assets/javascripts/runner/components/cells/runner_status_cell.vue b/app/assets/javascripts/runner/components/cells/runner_status_cell.vue index 473cd7e9794..93f86ae2a2c 100644 --- a/app/assets/javascripts/runner/components/cells/runner_status_cell.vue +++ b/app/assets/javascripts/runner/components/cells/runner_status_cell.vue @@ -28,7 +28,15 @@ export default { <template> <div> - <runner-status-badge :runner="runner" size="sm" /> - <runner-paused-badge v-if="paused" size="sm" /> + <runner-status-badge + :runner="runner" + size="sm" + class="gl-display-inline-block gl-max-w-full gl-text-truncate" + /> + <runner-paused-badge + v-if="paused" + size="sm" + class="gl-display-inline-block gl-max-w-full gl-text-truncate" + /> </div> </template> diff --git a/app/assets/javascripts/runner/components/registration/registration_token_reset_dropdown_item.vue b/app/assets/javascripts/runner/components/registration/registration_token_reset_dropdown_item.vue index 3bb15bff8d8..0e259807f98 100644 --- a/app/assets/javascripts/runner/components/registration/registration_token_reset_dropdown_item.vue +++ b/app/assets/javascripts/runner/components/registration/registration_token_reset_dropdown_item.vue @@ -1,6 +1,6 @@ <script> -import { GlDropdownItem, GlLoadingIcon } from '@gitlab/ui'; -import createFlash from '~/flash'; +import { GlDropdownItem, GlLoadingIcon, GlModal, GlModalDirective } from '@gitlab/ui'; +import { createAlert } from '~/flash'; import { TYPE_GROUP, TYPE_PROJECT } from '~/graphql_shared/constants'; import { convertToGraphQLId } from '~/graphql_shared/utils'; import { __, s__ } from '~/locale'; @@ -10,9 +10,17 @@ import { INSTANCE_TYPE, GROUP_TYPE, PROJECT_TYPE } from '../../constants'; export default { name: 'RunnerRegistrationTokenReset', + i18n: { + modalTitle: __('Reset registration token'), + modalCopy: __('Are you sure you want to reset the registration token?'), + }, components: { GlDropdownItem, GlLoadingIcon, + GlModal, + }, + directives: { + GlModal: GlModalDirective, }, inject: { groupId: { @@ -22,6 +30,7 @@ export default { default: null, }, }, + modalID: 'token-reset-modal', props: { type: { type: String, @@ -59,14 +68,10 @@ export default { }, }, methods: { + handleModalPrimary() { + this.resetToken(); + }, async resetToken() { - // TODO Replace confirmation with gl-modal - // See: https://gitlab.com/gitlab-org/gitlab/-/issues/333810 - // eslint-disable-next-line no-alert - if (!window.confirm(__('Are you sure you want to reset the registration token?'))) { - return; - } - this.loading = true; try { const { @@ -91,7 +96,7 @@ export default { }, onError(error) { const { message } = error; - createFlash({ message }); + createAlert({ message }); this.reportToSentry(error); }, @@ -106,8 +111,15 @@ export default { }; </script> <template> - <gl-dropdown-item @click.capture.native.stop="resetToken"> + <gl-dropdown-item v-gl-modal="$options.modalID"> {{ __('Reset registration token') }} + <gl-modal + :modal-id="$options.modalID" + :title="$options.i18n.modalTitle" + @primary="handleModalPrimary" + > + <p>{{ $options.i18n.modalCopy }}</p> + </gl-modal> <gl-loading-icon v-if="loading" inline /> </gl-dropdown-item> </template> diff --git a/app/assets/javascripts/runner/components/runner_header.vue b/app/assets/javascripts/runner/components/runner_header.vue new file mode 100644 index 00000000000..09f58df7bd0 --- /dev/null +++ b/app/assets/javascripts/runner/components/runner_header.vue @@ -0,0 +1,52 @@ +<script> +import { GlSprintf } from '@gitlab/ui'; +import { sprintf } from '~/locale'; +import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue'; +import { getIdFromGraphQLId } from '~/graphql_shared/utils'; +import { I18N_DETAILS_TITLE } from '../constants'; +import RunnerTypeBadge from './runner_type_badge.vue'; +import RunnerStatusBadge from './runner_status_badge.vue'; + +export default { + components: { + GlSprintf, + TimeAgo, + RunnerTypeBadge, + RunnerStatusBadge, + }, + props: { + runner: { + type: Object, + required: true, + }, + }, + computed: { + paused() { + return !this.runner.active; + }, + heading() { + const id = getIdFromGraphQLId(this.runner.id); + return sprintf(I18N_DETAILS_TITLE, { runner_id: id }); + }, + }, +}; +</script> +<template> + <div class="gl-py-5 gl-border-b-1 gl-border-b-solid gl-border-b-gray-100"> + <runner-status-badge :runner="runner" /> + <runner-type-badge v-if="runner" :type="runner.runnerType" /> + <template v-if="runner.createdAt"> + <gl-sprintf :message="__('%{runner} created %{timeago}')"> + <template #runner> + <strong>{{ heading }}</strong> + </template> + <template #timeago> + <time-ago :time="runner.createdAt" /> + </template> + </gl-sprintf> + </template> + <template v-else> + <strong>{{ heading }}</strong> + </template> + </div> +</template> diff --git a/app/assets/javascripts/runner/components/runner_status_badge.vue b/app/assets/javascripts/runner/components/runner_status_badge.vue index 0823876a187..6d0445ecb7a 100644 --- a/app/assets/javascripts/runner/components/runner_status_badge.vue +++ b/app/assets/javascripts/runner/components/runner_status_badge.vue @@ -4,11 +4,10 @@ import { __, s__, sprintf } from '~/locale'; import { getTimeago } from '~/lib/utils/datetime_utility'; import { I18N_ONLINE_RUNNER_TIMEAGO_DESCRIPTION, - I18N_NOT_CONNECTED_RUNNER_DESCRIPTION, + I18N_NEVER_CONTACTED_RUNNER_DESCRIPTION, I18N_OFFLINE_RUNNER_TIMEAGO_DESCRIPTION, I18N_STALE_RUNNER_DESCRIPTION, STATUS_ONLINE, - STATUS_NOT_CONNECTED, STATUS_NEVER_CONTACTED, STATUS_OFFLINE, STATUS_STALE, @@ -45,12 +44,11 @@ export default { timeAgo: this.contactedAtTimeAgo, }), }; - case STATUS_NOT_CONNECTED: case STATUS_NEVER_CONTACTED: return { variant: 'muted', - label: s__('Runners|not connected'), - tooltip: I18N_NOT_CONNECTED_RUNNER_DESCRIPTION, + label: s__('Runners|never contacted'), + tooltip: I18N_NEVER_CONTACTED_RUNNER_DESCRIPTION, }; case STATUS_OFFLINE: return { diff --git a/app/assets/javascripts/runner/components/runner_type_alert.vue b/app/assets/javascripts/runner/components/runner_type_alert.vue deleted file mode 100644 index 1400875a1d6..00000000000 --- a/app/assets/javascripts/runner/components/runner_type_alert.vue +++ /dev/null @@ -1,54 +0,0 @@ -<script> -import { GlAlert, GlLink } from '@gitlab/ui'; -import { helpPagePath } from '~/helpers/help_page_helper'; -import { s__ } from '~/locale'; -import { INSTANCE_TYPE, GROUP_TYPE, PROJECT_TYPE } from '../constants'; - -const ALERT_DATA = { - [INSTANCE_TYPE]: { - message: s__( - 'Runners|This runner is available to all groups and projects in your GitLab instance.', - ), - anchor: 'shared-runners', - }, - [GROUP_TYPE]: { - message: s__('Runners|This runner is available to all projects and subgroups in a group.'), - anchor: 'group-runners', - }, - [PROJECT_TYPE]: { - message: s__('Runners|This runner is associated with one or more projects.'), - anchor: 'specific-runners', - }, -}; - -export default { - components: { - GlAlert, - GlLink, - }, - props: { - type: { - type: String, - required: false, - default: null, - validator(type) { - return Boolean(ALERT_DATA[type]); - }, - }, - }, - computed: { - alert() { - return ALERT_DATA[this.type]; - }, - helpHref() { - return helpPagePath('ci/runners/runners_scope', { anchor: this.alert.anchor }); - }, - }, -}; -</script> -<template> - <gl-alert v-if="alert" variant="info" :dismissible="false"> - {{ alert.message }} - <gl-link :href="helpHref">{{ __('Learn more.') }}</gl-link> - </gl-alert> -</template> diff --git a/app/assets/javascripts/runner/components/runner_update_form.vue b/app/assets/javascripts/runner/components/runner_update_form.vue index 9a6fc07f6dd..e3deb94236e 100644 --- a/app/assets/javascripts/runner/components/runner_update_form.vue +++ b/app/assets/javascripts/runner/components/runner_update_form.vue @@ -10,8 +10,8 @@ import { import { modelToUpdateMutationVariables, runnerToModel, -} from 'ee_else_ce/runner/runner_details/runner_update_form_utils'; -import createFlash, { FLASH_TYPES } from '~/flash'; +} from 'ee_else_ce/runner/runner_update_form_utils'; +import { createAlert, VARIANT_SUCCESS } from '~/flash'; import { __ } from '~/locale'; import { captureException } from '~/runner/sentry_utils'; import { ACCESS_LEVEL_NOT_PROTECTED, ACCESS_LEVEL_REF_PROTECTED, PROJECT_TYPE } from '../constants'; @@ -75,14 +75,14 @@ export default { if (errors?.length) { // Validation errors need not be thrown - createFlash({ message: errors[0] }); + createAlert({ message: errors[0] }); return; } this.onSuccess(); } catch (error) { const { message } = error; - createFlash({ message }); + createAlert({ message }); this.reportToSentry(error); } finally { @@ -90,7 +90,7 @@ export default { } }, onSuccess() { - createFlash({ message: __('Changes saved.'), type: FLASH_TYPES.SUCCESS }); + createAlert({ message: __('Changes saved.'), variant: VARIANT_SUCCESS }); this.model = runnerToModel(this.runner); }, reportToSentry(error) { diff --git a/app/assets/javascripts/runner/components/search_tokens/status_token_config.js b/app/assets/javascripts/runner/components/search_tokens/status_token_config.js index 4b356fa47ed..79038eb8228 100644 --- a/app/assets/javascripts/runner/components/search_tokens/status_token_config.js +++ b/app/assets/javascripts/runner/components/search_tokens/status_token_config.js @@ -6,7 +6,7 @@ import { STATUS_PAUSED, STATUS_ONLINE, STATUS_OFFLINE, - STATUS_NOT_CONNECTED, + STATUS_NEVER_CONTACTED, STATUS_STALE, PARAM_KEY_STATUS, } from '../../constants'; @@ -16,7 +16,7 @@ const options = [ { value: STATUS_PAUSED, title: s__('Runners|Paused') }, { value: STATUS_ONLINE, title: s__('Runners|Online') }, { value: STATUS_OFFLINE, title: s__('Runners|Offline') }, - { value: STATUS_NOT_CONNECTED, title: s__('Runners|Not connected') }, + { value: STATUS_NEVER_CONTACTED, title: s__('Runners|Never contacted') }, { value: STATUS_STALE, title: s__('Runners|Stale') }, ]; diff --git a/app/assets/javascripts/runner/components/search_tokens/tag_token.vue b/app/assets/javascripts/runner/components/search_tokens/tag_token.vue index 7461308ab91..59230bb809e 100644 --- a/app/assets/javascripts/runner/components/search_tokens/tag_token.vue +++ b/app/assets/javascripts/runner/components/search_tokens/tag_token.vue @@ -1,6 +1,6 @@ <script> import { GlFilteredSearchSuggestion, GlToken } from '@gitlab/ui'; -import createFlash from '~/flash'; +import { createAlert } from '~/flash'; import axios from '~/lib/utils/axios_utils'; import { s__ } from '~/locale'; @@ -50,7 +50,7 @@ export default { try { this.tags = await this.getTagsOptions(searchTerm); } catch { - createFlash({ + createAlert({ message: s__('Runners|Something went wrong while fetching the tags suggestions'), }); } finally { diff --git a/app/assets/javascripts/runner/components/stat/runner_online_stat.vue b/app/assets/javascripts/runner/components/stat/runner_online_stat.vue deleted file mode 100644 index b92b9badef0..00000000000 --- a/app/assets/javascripts/runner/components/stat/runner_online_stat.vue +++ /dev/null @@ -1,17 +0,0 @@ -<script> -import { GlSingleStat } from '@gitlab/ui/dist/charts'; - -export default { - components: { - GlSingleStat, - }, -}; -</script> -<template> - <gl-single-stat - v-bind="$attrs" - variant="success" - :title="s__('Runners|Online Runners')" - :meta-text="s__('Runners|online')" - /> -</template> diff --git a/app/assets/javascripts/runner/components/stat/runner_stats.vue b/app/assets/javascripts/runner/components/stat/runner_stats.vue new file mode 100644 index 00000000000..d3693ee593e --- /dev/null +++ b/app/assets/javascripts/runner/components/stat/runner_stats.vue @@ -0,0 +1,49 @@ +<script> +import { STATUS_ONLINE, STATUS_OFFLINE, STATUS_STALE } from '../../constants'; +import RunnerStatusStat from './runner_status_stat.vue'; + +export default { + components: { + RunnerStatusStat, + }, + props: { + onlineRunnersCount: { + type: Number, + required: false, + default: null, + }, + offlineRunnersCount: { + type: Number, + required: false, + default: null, + }, + staleRunnersCount: { + type: Number, + required: false, + default: null, + }, + }, + STATUS_ONLINE, + STATUS_OFFLINE, + STATUS_STALE, +}; +</script> +<template> + <div class="gl-display-flex gl-py-6"> + <runner-status-stat + class="gl-px-5" + :status="$options.STATUS_ONLINE" + :value="onlineRunnersCount" + /> + <runner-status-stat + class="gl-px-5" + :status="$options.STATUS_OFFLINE" + :value="offlineRunnersCount" + /> + <runner-status-stat + class="gl-px-5" + :status="$options.STATUS_STALE" + :value="staleRunnersCount" + /> + </div> +</template> diff --git a/app/assets/javascripts/runner/components/stat/runner_status_stat.vue b/app/assets/javascripts/runner/components/stat/runner_status_stat.vue new file mode 100644 index 00000000000..b77bbe15541 --- /dev/null +++ b/app/assets/javascripts/runner/components/stat/runner_status_stat.vue @@ -0,0 +1,65 @@ +<script> +import { GlSingleStat } from '@gitlab/ui/dist/charts'; +import { s__, formatNumber } from '~/locale'; +import { STATUS_ONLINE, STATUS_OFFLINE, STATUS_STALE } from '../../constants'; + +export default { + components: { + GlSingleStat, + }, + props: { + value: { + type: Number, + required: false, + default: null, + }, + status: { + type: String, + required: true, + }, + }, + computed: { + formattedValue() { + if (typeof this.value === 'number') { + return formatNumber(this.value); + } + return '-'; + }, + stat() { + switch (this.status) { + case STATUS_ONLINE: + return { + variant: 'success', + title: s__('Runners|Online runners'), + metaText: s__('Runners|online'), + }; + case STATUS_OFFLINE: + return { + variant: 'muted', + title: s__('Runners|Offline runners'), + metaText: s__('Runners|offline'), + }; + case STATUS_STALE: + return { + variant: 'warning', + title: s__('Runners|Stale runners'), + metaText: s__('Runners|stale'), + }; + default: + return { + title: s__('Runners|Runners'), + }; + } + }, + }, +}; +</script> +<template> + <gl-single-stat + v-if="stat" + :value="formattedValue" + :variant="stat.variant" + :title="stat.title" + :meta-text="stat.metaText" + /> +</template> diff --git a/app/assets/javascripts/runner/constants.js b/app/assets/javascripts/runner/constants.js index 355f3054917..ce8019ffaa0 100644 --- a/app/assets/javascripts/runner/constants.js +++ b/app/assets/javascripts/runner/constants.js @@ -18,8 +18,8 @@ export const I18N_PROJECT_RUNNER_DESCRIPTION = s__('Runners|Associated with one export const I18N_ONLINE_RUNNER_TIMEAGO_DESCRIPTION = s__( 'Runners|Runner is online; last contact was %{timeAgo}', ); -export const I18N_NOT_CONNECTED_RUNNER_DESCRIPTION = s__( - 'Runners|This runner has never connected to this instance', +export const I18N_NEVER_CONTACTED_RUNNER_DESCRIPTION = s__( + 'Runners|This runner has never contacted this instance', ); export const I18N_OFFLINE_RUNNER_TIMEAGO_DESCRIPTION = s__( 'Runners|No recent contact from this runner; last contact was %{timeAgo}', @@ -60,7 +60,6 @@ export const STATUS_ACTIVE = 'ACTIVE'; export const STATUS_PAUSED = 'PAUSED'; export const STATUS_ONLINE = 'ONLINE'; -export const STATUS_NOT_CONNECTED = 'NOT_CONNECTED'; export const STATUS_NEVER_CONTACTED = 'NEVER_CONTACTED'; export const STATUS_OFFLINE = 'OFFLINE'; export const STATUS_STALE = 'STALE'; diff --git a/app/assets/javascripts/runner/graphql/get_group_runners.query.graphql b/app/assets/javascripts/runner/graphql/get_group_runners.query.graphql index 6da9e276f74..f7bcd683718 100644 --- a/app/assets/javascripts/runner/graphql/get_group_runners.query.graphql +++ b/app/assets/javascripts/runner/graphql/get_group_runners.query.graphql @@ -13,7 +13,7 @@ query getGroupRunners( $sort: CiRunnerSort ) { group(fullPath: $groupFullPath) { - id + id # Apollo required runners( membership: DESCENDANTS before: $before diff --git a/app/assets/javascripts/runner/graphql/get_group_runners_count.query.graphql b/app/assets/javascripts/runner/graphql/get_group_runners_count.query.graphql new file mode 100644 index 00000000000..554eb09e372 --- /dev/null +++ b/app/assets/javascripts/runner/graphql/get_group_runners_count.query.graphql @@ -0,0 +1,20 @@ +query getGroupRunnersCount( + $groupFullPath: ID! + $status: CiRunnerStatus + $type: CiRunnerType + $tagList: [String!] + $search: String +) { + group(fullPath: $groupFullPath) { + id # Apollo required + runners( + membership: DESCENDANTS + status: $status + type: $type + tagList: $tagList + search: $search + ) { + count + } + } +} diff --git a/app/assets/javascripts/runner/graphql/get_runners.query.graphql b/app/assets/javascripts/runner/graphql/get_runners.query.graphql index 51a91b9eb96..05df399fa6a 100644 --- a/app/assets/javascripts/runner/graphql/get_runners.query.graphql +++ b/app/assets/javascripts/runner/graphql/get_runners.query.graphql @@ -26,6 +26,7 @@ query getRunners( nodes { ...RunnerNode adminUrl + editAdminUrl } pageInfo { ...PageInfo diff --git a/app/assets/javascripts/runner/graphql/get_runners_count.query.graphql b/app/assets/javascripts/runner/graphql/get_runners_count.query.graphql new file mode 100644 index 00000000000..181a4495cae --- /dev/null +++ b/app/assets/javascripts/runner/graphql/get_runners_count.query.graphql @@ -0,0 +1,10 @@ +query getRunnersCount( + $status: CiRunnerStatus + $type: CiRunnerType + $tagList: [String!] + $search: String +) { + runners(status: $status, type: $type, tagList: $tagList, search: $search) { + count + } +} diff --git a/app/assets/javascripts/runner/graphql/runner_details_shared.fragment.graphql b/app/assets/javascripts/runner/graphql/runner_details_shared.fragment.graphql index 8c50cba7de3..8e968343b9b 100644 --- a/app/assets/javascripts/runner/graphql/runner_details_shared.fragment.graphql +++ b/app/assets/javascripts/runner/graphql/runner_details_shared.fragment.graphql @@ -9,4 +9,6 @@ fragment RunnerDetailsShared on CiRunner { description maximumTimeout tagList + createdAt + status(legacyMode: null) } diff --git a/app/assets/javascripts/runner/graphql/runner_node.fragment.graphql b/app/assets/javascripts/runner/graphql/runner_node.fragment.graphql index 169f6ffd2ea..4a771d779dc 100644 --- a/app/assets/javascripts/runner/graphql/runner_node.fragment.graphql +++ b/app/assets/javascripts/runner/graphql/runner_node.fragment.graphql @@ -12,4 +12,8 @@ fragment RunnerNode on CiRunner { tagList contactedAt status(legacyMode: null) + userPermissions { + updateRunner + deleteRunner + } } diff --git a/app/assets/javascripts/runner/group_runners/group_runners_app.vue b/app/assets/javascripts/runner/group_runners/group_runners_app.vue index a58a53a6a0d..3a7b58e3dc9 100644 --- a/app/assets/javascripts/runner/group_runners/group_runners_app.vue +++ b/app/assets/javascripts/runner/group_runners/group_runners_app.vue @@ -1,6 +1,6 @@ <script> import { GlLink } from '@gitlab/ui'; -import createFlash from '~/flash'; +import { createAlert } from '~/flash'; import { fetchPolicies } from '~/lib/graphql'; import { updateHistory } from '~/lib/utils/url_utility'; import { formatNumber, sprintf, s__ } from '~/locale'; @@ -9,7 +9,7 @@ import RegistrationDropdown from '../components/registration/registration_dropdo import RunnerFilteredSearchBar from '../components/runner_filtered_search_bar.vue'; import RunnerList from '../components/runner_list.vue'; import RunnerName from '../components/runner_name.vue'; -import RunnerOnlineStat from '../components/stat/runner_online_stat.vue'; +import RunnerStats from '../components/stat/runner_stats.vue'; import RunnerPagination from '../components/runner_pagination.vue'; import RunnerTypeTabs from '../components/runner_type_tabs.vue'; @@ -19,8 +19,12 @@ import { GROUP_FILTERED_SEARCH_NAMESPACE, GROUP_TYPE, GROUP_RUNNER_COUNT_LIMIT, + STATUS_ONLINE, + STATUS_OFFLINE, + STATUS_STALE, } from '../constants'; import getGroupRunnersQuery from '../graphql/get_group_runners.query.graphql'; +import getGroupRunnersCountQuery from '../graphql/get_group_runners_count.query.graphql'; import { fromUrlQueryToSearch, fromSearchToUrl, @@ -28,6 +32,17 @@ import { } from '../runner_search_utils'; import { captureException } from '../sentry_utils'; +const runnersCountSmartQuery = { + query: getGroupRunnersCountQuery, + fetchPolicy: fetchPolicies.CACHE_AND_NETWORK, + update(data) { + return data?.group?.runners?.count; + }, + error(error) { + this.reportToSentry(error); + }, +}; + export default { name: 'GroupRunnersApp', components: { @@ -36,7 +51,7 @@ export default { RunnerFilteredSearchBar, RunnerList, RunnerName, - RunnerOnlineStat, + RunnerStats, RunnerPagination, RunnerTypeTabs, }, @@ -84,11 +99,38 @@ export default { }; }, error(error) { - createFlash({ message: I18N_FETCH_ERROR }); + createAlert({ message: I18N_FETCH_ERROR }); this.reportToSentry(error); }, }, + onlineRunnersTotal: { + ...runnersCountSmartQuery, + variables() { + return { + groupFullPath: this.groupFullPath, + status: STATUS_ONLINE, + }; + }, + }, + offlineRunnersTotal: { + ...runnersCountSmartQuery, + variables() { + return { + groupFullPath: this.groupFullPath, + status: STATUS_OFFLINE, + }; + }, + }, + staleRunnersTotal: { + ...runnersCountSmartQuery, + variables() { + return { + groupFullPath: this.groupFullPath, + status: STATUS_STALE, + }; + }, + }, }, computed: { variables() { @@ -147,7 +189,11 @@ export default { <template> <div> - <runner-online-stat class="gl-py-6 gl-px-5" :value="groupRunnersCount" /> + <runner-stats + :online-runners-count="onlineRunnersTotal" + :offline-runners-count="offlineRunnersTotal" + :stale-runners-count="staleRunnersTotal" + /> <div class="gl-display-flex gl-align-items-center"> <runner-type-tabs diff --git a/app/assets/javascripts/runner/runner_search_utils.js b/app/assets/javascripts/runner/runner_search_utils.js index b88023720e8..c80a73948b8 100644 --- a/app/assets/javascripts/runner/runner_search_utils.js +++ b/app/assets/javascripts/runner/runner_search_utils.js @@ -16,6 +16,7 @@ import { PARAM_KEY_BEFORE, DEFAULT_SORT, RUNNER_PAGE_SIZE, + STATUS_NEVER_CONTACTED, } from './constants'; /** @@ -79,6 +80,33 @@ const getPaginationFromParams = (params) => { }; }; +// Outdated URL parameters +const STATUS_NOT_CONNECTED = 'NOT_CONNECTED'; + +/** + * Returns an updated URL for old (or deprecated) admin runner URLs. + * + * Use for redirecting users to currently used URLs. + * + * @param {String?} URL + * @returns Updated URL if outdated, `null` otherwise + */ +export const updateOutdatedUrl = (url = window.location.href) => { + const urlObj = new URL(url); + const query = urlObj.search; + + const params = queryToObject(query, { gatherArrays: true }); + + const runnerType = params[PARAM_KEY_STATUS]?.[0] || null; + if (runnerType === STATUS_NOT_CONNECTED) { + const updatedParams = { + [PARAM_KEY_STATUS]: [STATUS_NEVER_CONTACTED], + }; + return setUrlParams(updatedParams, url, false, true, true); + } + return null; +}; + /** * Takes a URL query and transforms it into a "search" object * @param {String?} query diff --git a/app/assets/javascripts/runner/runner_details/runner_update_form_utils.js b/app/assets/javascripts/runner/runner_update_form_utils.js index 3b519fa7d71..3b519fa7d71 100644 --- a/app/assets/javascripts/runner/runner_details/runner_update_form_utils.js +++ b/app/assets/javascripts/runner/runner_update_form_utils.js diff --git a/app/assets/javascripts/security_configuration/components/app.vue b/app/assets/javascripts/security_configuration/components/app.vue index 75d2b324623..d228f77f27d 100644 --- a/app/assets/javascripts/security_configuration/components/app.vue +++ b/app/assets/javascripts/security_configuration/components/app.vue @@ -27,6 +27,9 @@ export const i18n = { securityConfiguration: __('Security Configuration'), vulnerabilityManagement: s__('SecurityConfiguration|Vulnerability Management'), securityTraining: s__('SecurityConfiguration|Security training'), + securityTrainingDescription: s__( + 'SecurityConfiguration|Enable security training to help your developers learn how to fix vulnerabilities. Developers can view security training from selected educational providers, relevant to the detected vulnerability.', + ), }; export default { @@ -160,8 +163,12 @@ export default { </template> </user-callout-dismisser> - <gl-tabs content-class="gl-pt-0"> - <gl-tab data-testid="security-testing-tab" :title="$options.i18n.securityTesting"> + <gl-tabs content-class="gl-pt-0" sync-active-tab-with-query-params lazy> + <gl-tab + data-testid="security-testing-tab" + :title="$options.i18n.securityTesting" + query-param-value="security-testing" + > <auto-dev-ops-enabled-alert v-if="shouldShowAutoDevopsEnabledAlert" class="gl-mt-3" @@ -185,9 +192,12 @@ export default { {{ $options.i18n.description }} </p> <p v-if="canViewCiHistory"> - <gl-link data-testid="security-view-history-link" :href="gitlabCiHistoryPath">{{ - $options.i18n.configurationHistory - }}</gl-link> + <gl-link + data-testid="security-view-history-link" + data-qa-selector="security_configuration_history_link" + :href="gitlabCiHistoryPath" + >{{ $options.i18n.configurationHistory }}</gl-link + > </p> </template> @@ -203,7 +213,11 @@ export default { </template> </section-layout> </gl-tab> - <gl-tab data-testid="compliance-testing-tab" :title="$options.i18n.compliance"> + <gl-tab + data-testid="compliance-testing-tab" + :title="$options.i18n.compliance" + query-param-value="compliance-testing" + > <section-layout :heading="$options.i18n.compliance"> <template #description> <p> @@ -241,8 +255,14 @@ export default { v-if="glFeatures.secureVulnerabilityTraining" data-testid="vulnerability-management-tab" :title="$options.i18n.vulnerabilityManagement" + query-param-value="vulnerability-management" > <section-layout :heading="$options.i18n.securityTraining"> + <template #description> + <p> + {{ $options.i18n.securityTrainingDescription }} + </p> + </template> <template #features> <training-provider-list /> </template> diff --git a/app/assets/javascripts/security_configuration/components/auto_dev_ops_alert.vue b/app/assets/javascripts/security_configuration/components/auto_dev_ops_alert.vue index ce6a1b4888b..315f676e659 100644 --- a/app/assets/javascripts/security_configuration/components/auto_dev_ops_alert.vue +++ b/app/assets/javascripts/security_configuration/components/auto_dev_ops_alert.vue @@ -28,6 +28,7 @@ export default { variant="info" :primary-button-link="autoDevopsPath" :primary-button-text="$options.i18n.primaryButtonText" + data-qa-selector="autodevops_container" @dismiss="dismissMethod" > <gl-sprintf :message="$options.i18n.body"> diff --git a/app/assets/javascripts/security_configuration/components/constants.js b/app/assets/javascripts/security_configuration/components/constants.js index dd8ba72ad1f..034dba29196 100644 --- a/app/assets/javascripts/security_configuration/components/constants.js +++ b/app/assets/javascripts/security_configuration/components/constants.js @@ -254,7 +254,7 @@ export const securityFeatures = [ helpPath: COVERAGE_FUZZING_HELP_PATH, configurationHelpPath: COVERAGE_FUZZING_CONFIG_HELP_PATH, type: REPORT_TYPE_COVERAGE_FUZZING, - secondary: gon?.features?.corpusManagement + secondary: gon?.features?.corpusManagementUi ? { type: REPORT_TYPE_CORPUS_MANAGEMENT, name: CORPUS_MANAGEMENT_NAME, diff --git a/app/assets/javascripts/security_configuration/components/training_provider_list.vue b/app/assets/javascripts/security_configuration/components/training_provider_list.vue index 509377a63e8..ca4596e16b3 100644 --- a/app/assets/javascripts/security_configuration/components/training_provider_list.vue +++ b/app/assets/javascripts/security_configuration/components/training_provider_list.vue @@ -1,21 +1,39 @@ <script> -import { GlCard, GlToggle, GlLink, GlSkeletonLoader } from '@gitlab/ui'; +import { GlAlert, GlCard, GlToggle, GlLink, GlSkeletonLoader } from '@gitlab/ui'; +import { __ } from '~/locale'; import securityTrainingProvidersQuery from '../graphql/security_training_providers.query.graphql'; +import configureSecurityTrainingProvidersMutation from '../graphql/configure_security_training_providers.mutation.graphql'; + +const i18n = { + providerQueryErrorMessage: __( + 'Could not fetch training providers. Please refresh the page, or try again later.', + ), + configMutationErrorMessage: __( + 'Could not save configuration. Please refresh the page, or try again later.', + ), +}; export default { components: { + GlAlert, GlCard, GlToggle, GlLink, GlSkeletonLoader, }, + inject: ['projectPath'], apollo: { securityTrainingProviders: { query: securityTrainingProvidersQuery, + error() { + this.errorMessage = this.$options.i18n.providerQueryErrorMessage; + }, }, }, data() { return { + errorMessage: '', + toggleLoading: false, securityTrainingProviders: [], }; }, @@ -24,38 +42,92 @@ export default { return this.$apollo.queries.securityTrainingProviders.loading; }, }, + methods: { + toggleProvider(selectedProviderId) { + const toggledProviders = this.securityTrainingProviders.map((provider) => ({ + ...provider, + ...(provider.id === selectedProviderId && { isEnabled: !provider.isEnabled }), + })); + + const enabledProviderIds = toggledProviders + .filter(({ isEnabled }) => isEnabled) + .map(({ id }) => id); + + this.storeEnabledProviders(toggledProviders, enabledProviderIds); + }, + async storeEnabledProviders(toggledProviders, enabledProviderIds) { + this.toggleLoading = true; + + try { + const { + data: { + configureSecurityTrainingProviders: { errors = [] }, + }, + } = await this.$apollo.mutate({ + mutation: configureSecurityTrainingProvidersMutation, + variables: { + input: { + enabledProviders: enabledProviderIds, + fullPath: this.projectPath, + }, + }, + }); + + if (errors.length > 0) { + // throwing an error here means we can handle scenarios within the `catch` block below + throw new Error(); + } + } catch { + this.errorMessage = this.$options.i18n.configMutationErrorMessage; + } finally { + this.toggleLoading = false; + } + }, + }, + i18n, }; </script> <template> - <div - v-if="isLoading" - class="gl-bg-white gl-py-6 gl-rounded-base gl-border-1 gl-border-solid gl-border-gray-100" - > - <gl-skeleton-loader :width="350" :height="44"> - <rect width="200" height="8" x="10" y="0" rx="4" /> - <rect width="300" height="8" x="10" y="15" rx="4" /> - <rect width="100" height="8" x="10" y="35" rx="4" /> - </gl-skeleton-loader> - </div> - <ul v-else class="gl-list-style-none gl-m-0 gl-p-0"> - <li - v-for="{ id, isEnabled, name, description, url } in securityTrainingProviders" - :key="id" - class="gl-mb-6" + <div> + <gl-alert v-if="errorMessage" variant="danger" :dismissible="false" class="gl-mb-6"> + {{ errorMessage }} + </gl-alert> + <div + v-if="isLoading" + class="gl-bg-white gl-py-6 gl-rounded-base gl-border-1 gl-border-solid gl-border-gray-100" > - <gl-card> - <div class="gl-display-flex"> - <gl-toggle :value="isEnabled" :label="__('Training mode')" label-position="hidden" /> - <div class="gl-ml-5"> - <h3 class="gl-font-lg gl-m-0 gl-mb-2">{{ name }}</h3> - <p> - {{ description }} - <gl-link :href="url" target="_blank">{{ __('Learn more.') }}</gl-link> - </p> + <gl-skeleton-loader :width="350" :height="44"> + <rect width="200" height="8" x="10" y="0" rx="4" /> + <rect width="300" height="8" x="10" y="15" rx="4" /> + <rect width="100" height="8" x="10" y="35" rx="4" /> + </gl-skeleton-loader> + </div> + <ul v-else class="gl-list-style-none gl-m-0 gl-p-0"> + <li + v-for="{ id, isEnabled, name, description, url } in securityTrainingProviders" + :key="id" + class="gl-mb-6" + > + <gl-card> + <div class="gl-display-flex"> + <gl-toggle + :value="isEnabled" + :label="__('Training mode')" + label-position="hidden" + :is-loading="toggleLoading" + @change="toggleProvider(id)" + /> + <div class="gl-ml-5"> + <h3 class="gl-font-lg gl-m-0 gl-mb-2">{{ name }}</h3> + <p> + {{ description }} + <gl-link :href="url" target="_blank">{{ __('Learn more.') }}</gl-link> + </p> + </div> </div> - </div> - </gl-card> - </li> - </ul> + </gl-card> + </li> + </ul> + </div> </template> diff --git a/app/assets/javascripts/security_configuration/graphql/configure_security_training_providers.mutation.graphql b/app/assets/javascripts/security_configuration/graphql/configure_security_training_providers.mutation.graphql new file mode 100644 index 00000000000..660e0fadafb --- /dev/null +++ b/app/assets/javascripts/security_configuration/graphql/configure_security_training_providers.mutation.graphql @@ -0,0 +1,9 @@ +mutation configureSecurityTrainingProviders($input: configureSecurityTrainingProvidersInput!) { + configureSecurityTrainingProviders(input: $input) @client { + errors + securityTrainingProviders { + id + isEnabled + } + } +} diff --git a/app/assets/javascripts/security_configuration/index.js b/app/assets/javascripts/security_configuration/index.js index c86ff1a58f2..24c0585e077 100644 --- a/app/assets/javascripts/security_configuration/index.js +++ b/app/assets/javascripts/security_configuration/index.js @@ -2,38 +2,10 @@ import Vue from 'vue'; import VueApollo from 'vue-apollo'; import createDefaultClient from '~/lib/graphql'; import { parseBooleanDataAttributes } from '~/lib/utils/dom_utils'; -import { __ } from '~/locale'; import SecurityConfigurationApp from './components/app.vue'; import { securityFeatures, complianceFeatures } from './components/constants'; import { augmentFeatures } from './utils'; - -// Note: this is behind a feature flag and only a placeholder -// until the actual GraphQL fields have been added -// https://gitlab.com/gitlab-org/gi tlab/-/issues/346480 -export const tempResolvers = { - Query: { - securityTrainingProviders() { - return [ - { - __typename: 'SecurityTrainingProvider', - id: 101, - name: __('Kontra'), - description: __('Interactive developer security education.'), - url: 'https://application.security/', - isEnabled: false, - }, - { - __typename: 'SecurityTrainingProvider', - id: 102, - name: __('SecureCodeWarrior'), - description: __('Security training with guide and learning pathways.'), - url: 'https://www.securecodewarrior.com/', - isEnabled: true, - }, - ]; - }, - }, -}; +import tempResolvers from './resolver'; export const initSecurityConfiguration = (el) => { if (!el) { diff --git a/app/assets/javascripts/security_configuration/resolver.js b/app/assets/javascripts/security_configuration/resolver.js new file mode 100644 index 00000000000..93175d4a3d1 --- /dev/null +++ b/app/assets/javascripts/security_configuration/resolver.js @@ -0,0 +1,56 @@ +import produce from 'immer'; +import { __ } from '~/locale'; +import securityTrainingProvidersQuery from './graphql/security_training_providers.query.graphql'; + +// Note: this is behind a feature flag and only a placeholder +// until the actual GraphQL fields have been added +// https://gitlab.com/gitlab-org/gi tlab/-/issues/346480 +export default { + Query: { + securityTrainingProviders() { + return [ + { + __typename: 'SecurityTrainingProvider', + id: 101, + name: __('Kontra'), + description: __('Interactive developer security education.'), + url: 'https://application.security/', + isEnabled: false, + }, + { + __typename: 'SecurityTrainingProvider', + id: 102, + name: __('SecureCodeWarrior'), + description: __('Security training with guide and learning pathways.'), + url: 'https://www.securecodewarrior.com/', + isEnabled: true, + }, + ]; + }, + }, + + Mutation: { + configureSecurityTrainingProviders: ( + _, + { input: { enabledProviders, primaryProvider } }, + { cache }, + ) => { + const sourceData = cache.readQuery({ + query: securityTrainingProvidersQuery, + }); + + const data = produce(sourceData.securityTrainingProviders, (draftData) => { + /* eslint-disable no-param-reassign */ + draftData.forEach((provider) => { + provider.isPrimary = provider.id === primaryProvider; + provider.isEnabled = + provider.id === primaryProvider || enabledProviders.includes(provider.id); + }); + }); + return { + __typename: 'configureSecurityTrainingProvidersPayload', + securityTrainingProviders: data, + }; + }, + }, +}; diff --git a/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue b/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue index e41f3aa5c9d..a746642c191 100644 --- a/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue +++ b/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue @@ -267,6 +267,8 @@ export default { v-if="glFeatures.improvedEmojiPicker" dropdown-class="gl-h-full" toggle-class="btn emoji-menu-toggle-button gl-px-4! gl-rounded-top-right-none! gl-rounded-bottom-right-none!" + boundary="viewport" + :right="false" @click="setEmoji" > <template #button-content> diff --git a/app/assets/javascripts/sidebar/components/crm_contacts/crm_contacts.vue b/app/assets/javascripts/sidebar/components/crm_contacts/crm_contacts.vue index 6d4da104952..950647f1cb2 100644 --- a/app/assets/javascripts/sidebar/components/crm_contacts/crm_contacts.vue +++ b/app/assets/javascripts/sidebar/components/crm_contacts/crm_contacts.vue @@ -1,5 +1,5 @@ <script> -import { GlIcon, GlPopover, GlTooltipDirective } from '@gitlab/ui'; +import { GlIcon, GlLink, GlPopover, GlTooltipDirective } from '@gitlab/ui'; import { __, n__, sprintf } from '~/locale'; import createFlash from '~/flash'; import { convertToGraphQLId } from '~/graphql_shared/utils'; @@ -10,6 +10,7 @@ import issueCrmContactsSubscription from './queries/issue_crm_contacts.subscript export default { components: { GlIcon, + GlLink, GlPopover, }, directives: { @@ -85,9 +86,6 @@ export default { ); }, }, - i18n: { - help: __('Work in progress- click here to find out more'), - }, }; </script> @@ -97,11 +95,10 @@ export default { <gl-icon name="users" /> <span> {{ contactCount }} </span> </div> - <div - v-gl-tooltip.left.viewport="$options.i18n.help" - class="hide-collapsed help-button float-right" - > - <a href="https://gitlab.com/gitlab-org/gitlab/-/issues/2256"><gl-icon name="question-o" /></a> + <div class="hide-collapsed help-button gl-float-right"> + <gl-link href="https://docs.gitlab.com/ee/user/crm/" target="_blank" + ><gl-icon name="question-o" + /></gl-link> </div> <div class="title hide-collapsed gl-mb-2 gl-line-height-20"> {{ contactsLabel }} diff --git a/app/assets/javascripts/sidebar/mount_sidebar.js b/app/assets/javascripts/sidebar/mount_sidebar.js index cbe40d0bfbe..6363422259e 100644 --- a/app/assets/javascripts/sidebar/mount_sidebar.js +++ b/app/assets/javascripts/sidebar/mount_sidebar.js @@ -26,6 +26,7 @@ import trackShowInviteMemberLink from '~/sidebar/track_invite_members'; import { DropdownVariant } from '~/vue_shared/components/sidebar/labels_select_vue/constants'; import LabelsSelectWidget from '~/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue'; import { LabelType } from '~/vue_shared/components/sidebar/labels_select_widget/constants'; +import eventHub from '~/sidebar/event_hub'; import Translate from '../vue_shared/translate'; import SidebarAssignees from './components/assignees/sidebar_assignees.vue'; import CopyEmailToClipboard from './components/copy_email_to_clipboard.vue'; @@ -600,6 +601,12 @@ export function mountSidebar(mediator, store) { mountTimeTrackingComponent(); mountSeverityComponent(); + + if (window.gon?.features?.mrAttentionRequests) { + eventHub.$on('removeCurrentUserAttentionRequested', () => + mediator.removeCurrentUserAttentionRequested(), + ); + } } export { getSidebarOptions }; diff --git a/app/assets/javascripts/sidebar/sidebar_mediator.js b/app/assets/javascripts/sidebar/sidebar_mediator.js index a49ddac8c89..25468d4a697 100644 --- a/app/assets/javascripts/sidebar/sidebar_mediator.js +++ b/app/assets/javascripts/sidebar/sidebar_mediator.js @@ -30,7 +30,7 @@ export default class SidebarMediator { this.store.addAssignee(this.store.currentUser); } - saveAssignees(field) { + async saveAssignees(field) { const selected = this.store.assignees.map((u) => u.id); // If there are no ids, that means we have to unassign (which is id = 0) @@ -38,10 +38,22 @@ export default class SidebarMediator { const assignees = selected.length === 0 ? [0] : selected; const data = { assignee_ids: assignees }; - return this.service.update(field, data); + try { + const res = await this.service.update(field, data); + + this.store.overwrite('assignees', res.data.assignees); + + if (res.data.reviewers) { + this.store.overwrite('reviewers', res.data.reviewers); + } + + return Promise.resolve(res); + } catch (e) { + return Promise.reject(e); + } } - saveReviewers(field) { + async saveReviewers(field) { const selected = this.store.reviewers.map((u) => u.id); // If there are no ids, that means we have to unassign (which is id = 0) @@ -49,7 +61,16 @@ export default class SidebarMediator { const reviewers = selected.length === 0 ? [0] : selected; const data = { reviewer_ids: reviewers }; - return this.service.update(field, data); + try { + const res = await this.service.update(field, data); + + this.store.overwrite('reviewers', res.data.reviewers); + this.store.overwrite('assignees', res.data.assignees); + + return Promise.resolve(res); + } catch (e) { + return Promise.reject(); + } } requestReview({ userId, callback }) { @@ -63,6 +84,19 @@ export default class SidebarMediator { .catch(() => callback(userId, false)); } + removeCurrentUserAttentionRequested() { + const currentUserId = gon.current_user_id; + + const currentUserReviewer = this.store.findReviewer({ id: currentUserId }); + const currentUserAssignee = this.store.findAssignee({ id: currentUserId }); + + if (currentUserReviewer?.attention_requested || currentUserAssignee?.attention_requested) { + // Update current users attention_requested state + this.store.updateReviewer(currentUserId, 'attention_requested'); + this.store.updateAssignee(currentUserId, 'attention_requested'); + } + } + async toggleAttentionRequested(type, { user, callback }) { try { const isReviewer = type === 'reviewer'; @@ -82,15 +116,7 @@ export default class SidebarMediator { const currentUserId = gon.current_user_id; if (currentUserId !== user.id) { - const currentUserReviewerOrAssignee = isReviewer - ? this.store.findReviewer({ id: currentUserId }) - : this.store.findAssignee({ id: currentUserId }); - - if (currentUserReviewerOrAssignee?.attention_requested) { - // Update current users attention_requested state - this.store.updateReviewer(currentUserId, 'attention_requested'); - this.store.updateAssignee(currentUserId, 'attention_requested'); - } + this.removeCurrentUserAttentionRequested(); } toast(sprintf(__('Requested attention from @%{username}'), { username: user.username })); diff --git a/app/assets/javascripts/sidebar/stores/sidebar_store.js b/app/assets/javascripts/sidebar/stores/sidebar_store.js index 5376791469e..2caa6f4f0a0 100644 --- a/app/assets/javascripts/sidebar/stores/sidebar_store.js +++ b/app/assets/javascripts/sidebar/stores/sidebar_store.js @@ -98,6 +98,10 @@ export default class SidebarStore { } } + overwrite(key, newData) { + this[key] = newData; + } + findAssignee(findAssignee) { return this.assignees.find(({ id }) => id === findAssignee.id); } diff --git a/app/assets/javascripts/tracking/index.js b/app/assets/javascripts/tracking/index.js index 7e99ecb4f4e..d60eb37a9a2 100644 --- a/app/assets/javascripts/tracking/index.js +++ b/app/assets/javascripts/tracking/index.js @@ -46,7 +46,10 @@ export function initDefaultTrackers() { // must be after enableActivityTracking const standardContext = getStandardContext(); const experimentContexts = getAllExperimentContexts(); - window.snowplow('trackPageView', null, [standardContext, ...experimentContexts]); + // To not expose personal identifying information, the page title is hardcoded as `GitLab` + // See: https://gitlab.com/gitlab-org/gitlab/-/issues/345243 + window.snowplow('trackPageView', 'GitLab', [standardContext, ...experimentContexts]); + window.snowplow('setDocumentTitle', 'GitLab'); if (window.snowplowOptions.formTracking) { Tracking.enableFormTracking(opts.formTrackingConfig); diff --git a/app/assets/javascripts/tree.js b/app/assets/javascripts/tree.js deleted file mode 100644 index 58bff370fa5..00000000000 --- a/app/assets/javascripts/tree.js +++ /dev/null @@ -1,64 +0,0 @@ -/* eslint-disable func-names, consistent-return, one-var, class-methods-use-this */ - -import $ from 'jquery'; -import { visitUrl } from './lib/utils/url_utility'; - -export default class TreeView { - constructor() { - this.initKeyNav(); - // Code browser tree slider - // Make the entire tree-item row clickable, but not if clicking another link (like a commit message) - $('.tree-content-holder .tree-item').on('click', function (e) { - const $clickedEl = $(e.target); - const path = $('.tree-item-file-name a', this).attr('href'); - if (!$clickedEl.is('a') && !$clickedEl.is('.str-truncated')) { - if (e.metaKey || e.which === 2) { - e.preventDefault(); - return window.open(path, '_blank'); - } - return visitUrl(path); - } - }); - // Show the "Loading commit data" for only the first element - $('span.log_loading').first().removeClass('hide'); - } - - initKeyNav() { - const li = $('tr.tree-item'); - let liSelected = null; - return $('body').keydown((e) => { - let next, path; - if ($('input:focus').length > 0 && (e.which === 38 || e.which === 40)) { - return false; - } - if (e.which === 40) { - if (liSelected) { - next = liSelected.next(); - if (next.length > 0) { - liSelected.removeClass('selected'); - liSelected = next.addClass('selected'); - } - } else { - liSelected = li.eq(0).addClass('selected'); - } - return $(liSelected).focus(); - } else if (e.which === 38) { - if (liSelected) { - next = liSelected.prev(); - if (next.length > 0) { - liSelected.removeClass('selected'); - liSelected = next.addClass('selected'); - } - } else { - liSelected = li.last().addClass('selected'); - } - return $(liSelected).focus(); - } else if (e.which === 13) { - path = $('.tree-item.selected .tree-item-file-name a').attr('href'); - if (path) { - return visitUrl(path); - } - } - }); - } -} diff --git a/app/assets/javascripts/version_check_image.js b/app/assets/javascripts/version_check_image.js deleted file mode 100644 index 4e00e0f11f7..00000000000 --- a/app/assets/javascripts/version_check_image.js +++ /dev/null @@ -1,6 +0,0 @@ -export default class VersionCheckImage { - static bindErrorEvent(imageElement) { - // eslint-disable-next-line @gitlab/no-global-event-off - imageElement.off('error').on('error', () => imageElement.hide()); - } -} diff --git a/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals.vue b/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals.vue index 386ba2e2d77..24cefd63ce3 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals.vue @@ -3,6 +3,7 @@ import { GlButton } from '@gitlab/ui'; import createFlash from '~/flash'; import { BV_SHOW_MODAL } from '~/lib/utils/constants'; import { s__ } from '~/locale'; +import sidebarEventHub from '~/sidebar/event_hub'; import eventHub from '../../event_hub'; import approvalsMixin from '../../mixins/approvals'; import MrWidgetContainer from '../mr_widget_container.vue'; @@ -172,6 +173,7 @@ export default { this.mr.setApprovals(data); eventHub.$emit('MRWidgetUpdateRequested'); eventHub.$emit('ApprovalUpdated'); + sidebarEventHub.$emit('removeCurrentUserAttentionRequested'); this.$emit('updated'); }) .catch(errFn) diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/actions.vue b/app/assets/javascripts/vue_merge_request_widget/components/extensions/actions.vue index 33a83aef057..d878a1fa2e0 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/actions.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/actions.vue @@ -70,6 +70,7 @@ export default { variant="confirm" size="small" class="gl-display-none gl-md-display-block gl-float-left" + data-testid="extension-actions-button" @click="onClickAction(btn)" > {{ btn.text }} diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue b/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue index 549cf64fb08..7322958e6df 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue @@ -13,6 +13,7 @@ import * as Sentry from '@sentry/browser'; import api from '~/api'; import { sprintf, s__, __ } from '~/locale'; import SmartVirtualList from '~/vue_shared/components/smart_virtual_list.vue'; +import Poll from '~/lib/utils/poll'; import { EXTENSION_ICON_CLASS, EXTENSION_ICONS } from '../../constants'; import StatusIcon from './status_icon.vue'; import Actions from './actions.vue'; @@ -132,19 +133,50 @@ export default { this.triggerRedisTracking(); }, + initExtensionPolling() { + const poll = new Poll({ + resource: { + fetchData: () => this.fetchCollapsedData(this.$props), + }, + method: 'fetchData', + successCallback: (data) => { + if (Object.keys(data).length > 0) { + poll.stop(); + this.setCollapsedData(data); + } + }, + errorCallback: (e) => { + poll.stop(); + + this.setCollapsedError(e); + }, + }); + + poll.makeRequest(); + }, loadCollapsedData() { this.loadingState = LOADING_STATES.collapsedLoading; - this.fetchCollapsedData(this.$props) - .then((data) => { - this.collapsedData = data; - this.loadingState = null; - }) - .catch((e) => { - this.loadingState = LOADING_STATES.collapsedError; + if (this.$options.enablePolling) { + this.initExtensionPolling(); + } else { + this.fetchCollapsedData(this.$props) + .then((data) => { + this.setCollapsedData(data); + }) + .catch((e) => { + this.setCollapsedError(e); + }); + } + }, + setCollapsedData(data) { + this.collapsedData = data; + this.loadingState = null; + }, + setCollapsedError(e) { + this.loadingState = LOADING_STATES.collapsedError; - Sentry.captureException(e); - }); + Sentry.captureException(e); }, loadAllData() { if (this.hasFullData) return; diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/index.js b/app/assets/javascripts/vue_merge_request_widget/components/extensions/index.js index ec6e6ed2620..8438f3492b2 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/index.js +++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/index.js @@ -13,6 +13,7 @@ export const registerExtension = (extension) => { props: extension.props, i18n: extension.i18n, expandEvent: extension.expandEvent, + enablePolling: extension.enablePolling, computed: { ...Object.keys(extension.computed).reduce( (acc, computedKey) => ({ diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue index 235a200b747..8cdaa3316ee 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue @@ -119,6 +119,8 @@ export default { :show-gitpod-button="mr.showGitpodButton" :gitpod-url="mr.gitpodUrl" :gitpod-enabled="mr.gitpodEnabled" + :user-preferences-gitpod-path="mr.userPreferencesGitpodPath" + :user-profile-enable-gitpod-path="mr.userProfileEnableGitpodPath" :gitpod-text="$options.i18n.gitpodText" class="gl-display-none gl-md-display-inline-block gl-mr-3" data-placement="bottom" diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue index 677c50ed930..2e3a02b1712 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue @@ -1,5 +1,6 @@ <script> import { GlButton, GlLoadingIcon } from '@gitlab/ui'; +import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import ciIcon from '../../vue_shared/components/ci_icon.vue'; export default { @@ -8,6 +9,7 @@ export default { GlButton, GlLoadingIcon, }, + mixins: [glFeatureFlagMixin()], props: { status: { type: String, @@ -42,7 +44,7 @@ export default { </div> <gl-button - v-if="showDisabledButton" + v-if="!glFeatures.restructuredMrWidget && showDisabledButton" category="primary" variant="success" data-testid="disabled-merge-button" diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/merge_checks_failed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/merge_checks_failed.vue index ce572f8b0bf..701ef89304c 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/merge_checks_failed.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/merge_checks_failed.vue @@ -1,20 +1,16 @@ <script> -import { GlButton } from '@gitlab/ui'; import { s__ } from '~/locale'; -import notesEventHub from '~/notes/event_hub'; import StatusIcon from '../mr_widget_status_icon.vue'; export default { i18n: { - pipelineFailed: s__( - 'mrWidget|The pipeline for this merge request did not complete. Push a new commit to fix the failure.', - ), approvalNeeded: s__('mrWidget|Merge blocked: this merge request must be approved.'), - unresolvedDiscussions: s__('mrWidget|Merge blocked: all threads must be resolved.'), + blockingMergeRequests: s__( + 'mrWidget|Merge blocked: you can only merge after the above items are resolved.', + ), }, components: { StatusIcon, - GlButton, }, props: { mr: { @@ -24,22 +20,15 @@ export default { }, computed: { failedText() { - if (this.mr.isPipelineFailed) { - return this.$options.i18n.pipelineFailed; - } else if (this.mr.approvals && !this.mr.isApproved) { + if (this.mr.approvals && !this.mr.isApproved) { return this.$options.i18n.approvalNeeded; - } else if (this.mr.hasMergeableDiscussionsState) { - return this.$options.i18n.unresolvedDiscussions; + } else if (this.mr.blockingMergeRequests?.total_count > 0) { + return this.$options.i18n.blockingMergeRequests; } return null; }, }, - methods: { - jumpToFirstUnresolvedDiscussion() { - notesEventHub.$emit('jumpToFirstUnresolvedDiscussion'); - }, - }, }; </script> @@ -48,28 +37,6 @@ export default { <status-icon status="warning" /> <p class="media-body gl-m-0! gl-font-weight-bold gl-text-black-normal!"> {{ failedText }} - <template v-if="failedText == $options.i18n.unresolvedDiscussions"> - <gl-button - class="gl-ml-3" - size="small" - variant="confirm" - data-testid="jumpToUnresolved" - @click="jumpToFirstUnresolvedDiscussion" - > - {{ s__('mrWidget|Jump to first unresolved thread') }} - </gl-button> - <gl-button - v-if="mr.createIssueToResolveDiscussionsPath" - :href="mr.createIssueToResolveDiscussionsPath" - class="gl-ml-3" - size="small" - variant="confirm" - category="secondary" - data-testid="resolveIssue" - > - {{ s__('mrWidget|Create issue to resolve all threads') }} - </gl-button> - </template> </p> </div> </template> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue index 13b1e49f44e..071920856a8 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue @@ -1,25 +1,22 @@ <script> -import { GlButton } from '@gitlab/ui'; +import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import statusIcon from '../mr_widget_status_icon.vue'; export default { name: 'MRWidgetArchived', components: { - GlButton, statusIcon, }, + mixins: [glFeatureFlagMixin()], }; </script> <template> <div class="mr-widget-body media"> <div class="space-children"> - <status-icon status="warning" /> - <gl-button category="secondary" variant="success" :disabled="true"> - {{ s__('mrWidget|Merge') }} - </gl-button> + <status-icon status="warning" show-disabled-button /> </div> <div class="media-body"> - <span class="bold"> + <span :class="{ 'gl-ml-0! gl-text-body!': glFeatures.restructuredMrWidget }" class="bold"> {{ s__('mrWidget|Merge unavailable: merge requests are read-only on archived projects.') }} </span> </div> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue index 10b93d7849f..fd42fa0421f 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue @@ -12,9 +12,11 @@ export default { </script> <template> <div class="mr-widget-body media"> - <status-icon :show-disabled-button="!glFeatures.restructuredMrWidget" status="loading" /> + <status-icon :show-disabled-button="true" status="loading" /> <div class="media-body space-children"> - <span class="bold"> {{ s__('mrWidget|Checking if merge request can be merged…') }} </span> + <span :class="{ 'gl-ml-0! gl-text-body!': glFeatures.restructuredMrWidget }" class="bold"> + {{ s__('mrWidget|Checking if merge request can be merged…') }} + </span> </div> </div> </template> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue index 7a002d41ac0..a2c9cfe53cc 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue @@ -109,14 +109,18 @@ export default { </gl-skeleton-loader> </div> <div v-else class="media-body space-children gl-display-flex gl-align-items-center"> - <span v-if="shouldBeRebased" class="bold"> + <span + v-if="shouldBeRebased" + :class="{ 'gl-ml-0! gl-text-body!': glFeatures.restructuredMrWidget }" + class="bold" + > {{ s__(`mrWidget|Merge blocked: fast-forward merge is not possible. To merge this request, first rebase locally.`) }} </span> <template v-else> - <span class="bold"> + <span :class="{ 'gl-ml-0! gl-text-body!': glFeatures.restructuredMrWidget }" class="bold"> {{ s__('mrWidget|Merge blocked: merge conflicts must be resolved.') }} <span v-if="!canMerge"> {{ @@ -129,6 +133,7 @@ export default { <gl-button v-if="showResolveButton" :href="mr.conflictResolutionPath" + :size="glFeatures.restructuredMrWidget ? 'small' : 'medium'" data-testid="resolve-conflicts-button" > {{ s__('mrWidget|Resolve conflicts') }} @@ -136,6 +141,7 @@ export default { <gl-button v-if="canMerge" v-gl-modal-directive="'modal-merge-info'" + :size="glFeatures.restructuredMrWidget ? 'small' : 'medium'" data-testid="merge-locally-button" > {{ s__('mrWidget|Merge locally') }} diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue index f91350d4a82..5b03eda2eac 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue @@ -74,10 +74,21 @@ export default { <status-icon :show-disabled-button="true" status="warning" /> <div class="media-body space-children"> - <span class="bold js-branch-text"> + <span + :class="{ + 'gl-ml-0! gl-text-body!': glFeatures.restructuredMrWidget, + }" + class="bold js-branch-text" + > <span class="capitalize" data-testid="missingBranchName"> {{ missingBranchName }} </span> {{ s__('mrWidget|branch does not exist.') }} {{ missingBranchNameMessage }} - <gl-icon v-gl-tooltip :title="message" :aria-label="message" name="question-o" /> + <gl-icon + v-gl-tooltip + :title="message" + :aria-label="message" + name="question-o" + class="gl-text-blue-600 gl-cursor-pointer" + /> </span> </div> </div> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.vue index 68ffca9cd68..34c5a2ff2c8 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.vue @@ -1,4 +1,5 @@ <script> +import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import StatusIcon from '../mr_widget_status_icon.vue'; export default { @@ -6,13 +7,14 @@ export default { components: { StatusIcon, }, + mixins: [glFeatureFlagMixin()], }; </script> <template> <div class="mr-widget-body media"> <status-icon :show-disabled-button="true" status="warning" /> <div class="media-body space-children"> - <span class="bold"> + <span :class="{ 'gl-ml-0! gl-text-body!': glFeatures.restructuredMrWidget }" class="bold"> {{ s__( `mrWidget|Merge blocked: pipeline must succeed. It's waiting for a manual action to continue.`, diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue index 01e8303f513..bb0fb410d3e 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue @@ -3,11 +3,13 @@ import { GlButton, GlSkeletonLoader } from '@gitlab/ui'; import createFlash from '~/flash'; import { __ } from '~/locale'; import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; +import ActionsButton from '~/vue_shared/components/actions_button.vue'; import simplePoll from '../../../lib/utils/simple_poll'; import eventHub from '../../event_hub'; import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables'; import rebaseQuery from '../../queries/states/rebase.query.graphql'; import statusIcon from '../mr_widget_status_icon.vue'; +import { REBASE_BUTTON_KEY, REBASE_WITHOUT_CI_BUTTON_KEY } from '../../constants'; export default { name: 'MRWidgetRebase', @@ -25,8 +27,9 @@ export default { }, components: { statusIcon, - GlButton, GlSkeletonLoader, + ActionsButton, + GlButton, }, mixins: [glFeatureFlagMixin(), mergeRequestQueryVariablesMixin], props: { @@ -44,12 +47,16 @@ export default { state: {}, isMakingRequest: false, rebasingError: null, + selectedRebaseAction: REBASE_BUTTON_KEY, }; }, computed: { isLoading() { return this.glFeatures.mergeRequestWidgetGraphql && this.$apollo.queries.state.loading; }, + showRebaseWithoutCi() { + return this.glFeatures?.rebaseWithoutCiUi; + }, rebaseInProgress() { if (this.glFeatures.mergeRequestWidgetGraphql) { return this.state.rebaseInProgress; @@ -86,14 +93,36 @@ export default { fastForwardMergeText() { return __('Merge blocked: the source branch must be rebased onto the target branch.'); }, + actions() { + return [this.rebaseAction, this.rebaseWithoutCiAction].filter((action) => action); + }, + rebaseAction() { + return { + key: REBASE_BUTTON_KEY, + text: __('Rebase'), + secondaryText: __('Rebases and triggers a pipeline'), + attrs: { + 'data-qa-selector': 'mr_rebase_button', + }, + handle: () => this.rebase(), + }; + }, + rebaseWithoutCiAction() { + return { + key: REBASE_WITHOUT_CI_BUTTON_KEY, + text: __('Rebase without CI'), + secondaryText: __('Performs a rebase but skips triggering a new pipeline'), + handle: () => this.rebase({ skipCi: true }), + }; + }, }, methods: { - rebase() { + rebase({ skipCi = false } = {}) { this.isMakingRequest = true; this.rebasingError = null; this.service - .rebase() + .rebase({ skipCi }) .then(() => { simplePoll(this.checkRebaseStatus); }) @@ -109,6 +138,9 @@ export default { } }); }, + selectRebaseAction(key) { + this.selectedRebaseAction = key; + }, checkRebaseStatus(continuePolling, stopPolling) { this.service .poll() @@ -152,12 +184,14 @@ export default { <div class="rebase-state-find-class-convention media media-body space-children"> <span v-if="rebaseInProgress || isMakingRequest" + :class="{ 'gl-ml-0! gl-text-body!': glFeatures.restructuredMrWidget }" class="gl-font-weight-bold" data-testid="rebase-message" >{{ __('Rebase in progress') }}</span > <span v-if="!rebaseInProgress && !canPushToSourceBranch" + :class="{ 'gl-text-body!': glFeatures.restructuredMrWidget }" class="gl-font-weight-bold gl-ml-0!" data-testid="rebase-message" >{{ fastForwardMergeText }}</span @@ -167,15 +201,26 @@ export default { class="accept-merge-holder clearfix js-toggle-container accept-action media space-children" > <gl-button + v-if="!glFeatures.restructuredMrWidget && !showRebaseWithoutCi" :loading="isMakingRequest" variant="confirm" data-qa-selector="mr_rebase_button" + data-testid="standard-rebase-button" @click="rebase" > {{ __('Rebase') }} </gl-button> + <actions-button + v-if="!glFeatures.restructuredMrWidget && showRebaseWithoutCi" + :actions="actions" + :selected-key="selectedRebaseAction" + variant="confirm" + category="primary" + @select="selectRebaseAction" + /> <span v-if="!rebasingError" + :class="{ 'gl-ml-0! gl-text-body!': glFeatures.restructuredMrWidget }" class="gl-font-weight-bold" data-testid="rebase-message" data-qa-selector="no_fast_forward_message_content" @@ -186,6 +231,17 @@ export default { <span v-else class="gl-font-weight-bold danger" data-testid="rebase-message">{{ rebasingError }}</span> + <gl-button + v-if="glFeatures.restructuredMrWidget" + :loading="isMakingRequest" + variant="confirm" + size="small" + data-qa-selector="mr_rebase_button" + class="gl-ml-3!" + @click="rebase" + > + {{ __('Rebase') }} + </gl-button> </div> </div> </template> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue index 2d704d3b07a..e43319d42ca 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue @@ -62,8 +62,8 @@ export default { <gl-button v-if="mr.newBlobPath" :href="mr.newBlobPath" - category="secondary" - variant="success" + category="primary" + variant="confirm" data-testid="createFileButton" @click="onClickNewFile" > diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/pipeline_failed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/pipeline_failed.vue index b5d2f91c637..d88dad2e086 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/pipeline_failed.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/pipeline_failed.vue @@ -1,6 +1,7 @@ <script> import { GlLink, GlSprintf } from '@gitlab/ui'; import { helpPagePath } from '~/helpers/help_page_helper'; +import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { s__ } from '~/locale'; import statusIcon from '../mr_widget_status_icon.vue'; @@ -11,6 +12,7 @@ export default { GlSprintf, statusIcon, }, + mixins: [glFeatureFlagMixin()], computed: { troubleshootingDocsPath() { return helpPagePath('ci/troubleshooting', { anchor: 'merge-request-status-messages' }); @@ -28,7 +30,7 @@ export default { <div class="mr-widget-body media"> <status-icon :show-disabled-button="true" status="warning" /> <div class="media-body space-children"> - <span class="bold"> + <span :class="{ 'gl-ml-0! gl-text-body!': glFeatures.restructuredMrWidget }" class="bold"> <gl-sprintf :message="$options.i18n.failedMessage"> <template #link="{ content }"> <gl-link :href="troubleshootingDocsPath" target="_blank"> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue index 8830128b7d6..06ce312bd4c 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue @@ -529,7 +529,7 @@ export default { <template> <div :class="{ - 'gl-border-t-1 gl-border-t-solid gl-border-gray-100 gl-bg-gray-10 gl-pl-7': + 'gl-border-t-1 gl-border-t-solid gl-border-gray-100 gl-bg-gray-10 gl-pl-7 gl-rounded-bottom-left-base gl-rounded-bottom-right-base': glFeatures.restructuredMrWidget, }" > diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue index 7eeba8d8f89..b1fbe150fcf 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue @@ -1,5 +1,6 @@ <script> import { GlButton } from '@gitlab/ui'; +import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { I18N_SHA_MISMATCH } from '../../i18n'; import statusIcon from '../mr_widget_status_icon.vue'; @@ -12,6 +13,7 @@ export default { i18n: { I18N_SHA_MISMATCH, }, + mixins: [glFeatureFlagMixin()], props: { mr: { type: Object, @@ -25,7 +27,11 @@ export default { <div class="mr-widget-body media"> <status-icon :show-disabled-button="false" status="warning" /> <div class="media-body"> - <span class="gl-font-weight-bold" data-qa-selector="head_mismatch_content"> + <span + :class="{ 'gl-ml-0! gl-text-body!': glFeatures.restructuredMrWidget }" + class="gl-font-weight-bold" + data-qa-selector="head_mismatch_content" + > {{ $options.i18n.I18N_SHA_MISMATCH.warningMessage }} </span> <gl-button diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue index 69e4df0ca11..8cf6383c26a 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue @@ -1,5 +1,6 @@ <script> import { GlButton } from '@gitlab/ui'; +import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import notesEventHub from '~/notes/event_hub'; import statusIcon from '../mr_widget_status_icon.vue'; @@ -9,6 +10,7 @@ export default { statusIcon, GlButton, }, + mixins: [glFeatureFlagMixin()], props: { mr: { type: Object, @@ -25,16 +27,24 @@ export default { <template> <div class="mr-widget-body media gl-flex-wrap"> - <status-icon :show-disabled-button="true" status="warning" /> + <status-icon show-disabled-button status="warning" /> <div class="media-body"> - <span class="gl-ml-3 gl-font-weight-bold gl-display-block gl-w-100">{{ - s__('mrWidget|Merge blocked: all threads must be resolved.') - }}</span> + <span + :class="{ + 'gl-ml-0! gl-text-body!': glFeatures.restructuredMrWidget, + 'gl-display-block': !glFeatures.restructuredMrWidget, + }" + class="gl-ml-3 gl-font-weight-bold gl-w-100" + > + {{ s__('mrWidget|Merge blocked: all threads must be resolved.') }} + </span> <gl-button data-testid="jump-to-first" class="gl-ml-3" size="small" - icon="comment-next" + :icon="glFeatures.restructuredMrWidget ? undefined : 'comment-next'" + :variant="glFeatures.restructuredMrWidget && 'confirm'" + :category="glFeatures.restructuredMrWidget && 'secondary'" @click="jumpToFirstUnresolvedDiscussion" > {{ s__('mrWidget|Jump to first unresolved thread') }} @@ -44,7 +54,7 @@ export default { :href="mr.createIssueToResolveDiscussionsPath" class="js-create-issue gl-ml-3" size="small" - icon="issue-new" + :icon="glFeatures.restructuredMrWidget ? undefined : 'issue-new'" > {{ s__('mrWidget|Create issue to resolve all threads') }} </gl-button> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue index ba831a33b73..e0e19094c40 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue @@ -166,7 +166,10 @@ export default { <status-icon :show-disabled-button="canUpdate" status="warning" /> <div class="media-body"> <div class="float-left"> - <span class="gl-font-weight-bold"> + <span + :class="{ 'gl-ml-0! gl-text-body!': glFeatures.restructuredMrWidget }" + class="gl-font-weight-bold" + > {{ __("Merge blocked: merge request must be marked as ready. It's still marked as draft.") }} diff --git a/app/assets/javascripts/vue_merge_request_widget/constants.js b/app/assets/javascripts/vue_merge_request_widget/constants.js index 2edccce7f4e..32effb91043 100644 --- a/app/assets/javascripts/vue_merge_request_widget/constants.js +++ b/app/assets/javascripts/vue_merge_request_widget/constants.js @@ -162,3 +162,6 @@ export const EXTENSION_SUMMARY_FAILED_CLASS = 'gl-text-red-500'; export const EXTENSION_SUMMARY_NEUTRAL_CLASS = 'gl-text-gray-700'; export { STATE_MACHINE }; + +export const REBASE_BUTTON_KEY = 'rebase'; +export const REBASE_WITHOUT_CI_BUTTON_KEY = 'rebaseWithoutCi'; diff --git a/app/assets/javascripts/vue_merge_request_widget/extensions/terraform/index.js b/app/assets/javascripts/vue_merge_request_widget/extensions/terraform/index.js new file mode 100644 index 00000000000..a564acada02 --- /dev/null +++ b/app/assets/javascripts/vue_merge_request_widget/extensions/terraform/index.js @@ -0,0 +1,173 @@ +import { __, n__, s__, sprintf } from '~/locale'; +import axios from '~/lib/utils/axios_utils'; +import { EXTENSION_ICONS } from '../../constants'; + +export default { + name: 'WidgetTerraform', + enablePolling: true, + i18n: { + label: s__('Terraform|Terraform reports'), + loading: s__('Terraform|Loading Terraform reports...'), + error: s__('Terraform|Failed to load Terraform reports'), + reportGenerated: s__('Terraform|A Terraform report was generated in your pipelines.'), + namedReportGenerated: s__( + 'Terraform|The job %{strong_start}%{name}%{strong_end} generated a report.', + ), + reportChanges: s__( + 'Terraform|Reported Resource Changes: %{addNum} to add, %{changeNum} to change, %{deleteNum} to delete', + ), + reportFailed: s__('Terraform|A Terraform report failed to generate.'), + namedReportFailed: s__( + 'Terraform|The job %{strong_start}%{name}%{strong_end} failed to generate a report.', + ), + reportErrored: s__('Terraform|Generating the report caused an error.'), + fullLog: __('Full log'), + }, + expandEvent: 'i_testing_terraform_widget_total', + props: ['terraformReportsPath'], + computed: { + // Extension computed props + statusIcon() { + return EXTENSION_ICONS.warning; + }, + }, + methods: { + // Extension methods + summary({ valid = [], invalid = [] }) { + let title; + let subtitle = ''; + + const validText = sprintf( + n__( + 'Terraform|%{strong_start}%{number}%{strong_end} Terraform report was generated in your pipelines', + 'Terraform|%{strong_start}%{number}%{strong_end} Terraform reports were generated in your pipelines', + valid.length, + ), + { + number: valid.length, + }, + false, + ); + + const invalidText = sprintf( + n__( + 'Terraform|%{strong_start}%{number}%{strong_end} Terraform report failed to generate', + 'Terraform|%{strong_start}%{number}%{strong_end} Terraform reports failed to generate', + invalid.length, + ), + { + number: invalid.length, + }, + false, + ); + + if (valid.length) { + title = validText; + if (invalid.length) { + subtitle = sprintf(`<br>%{small_start}${invalidText}%{small_end}`); + } + } else { + title = invalidText; + } + + return `${title}${subtitle}`; + }, + fetchCollapsedData() { + return Promise.resolve(this.fetchPlans().then(this.prepareReports)); + }, + fetchFullData() { + const { valid, invalid } = this.collapsedData; + return Promise.resolve([...valid, ...invalid]); + }, + // Custom methods + fetchPlans() { + return axios + .get(this.terraformReportsPath) + .then(({ data }) => { + return Object.keys(data).map((key) => { + return data[key]; + }); + }) + .catch(() => { + const invalidData = { tf_report_error: 'api_error' }; + return [invalidData]; + }); + }, + createReportRow(report, iconName) { + const addNum = Number(report.create); + const changeNum = Number(report.update); + const deleteNum = Number(report.delete); + const validPlanValues = addNum + changeNum + deleteNum >= 0; + + const actions = []; + + let title; + let subtitle; + + if (report.job_path) { + const action = { + href: report.job_path, + text: this.$options.i18n.fullLog, + target: '_blank', + }; + actions.push(action); + } + + if (validPlanValues) { + if (report.job_name) { + title = sprintf( + this.$options.i18n.namedReportGenerated, + { + name: report.job_name, + }, + false, + ); + } else { + title = this.$options.i18n.reportGenerated; + } + + subtitle = sprintf(`%{small_start}${this.$options.i18n.reportChanges}%{small_end}`, { + addNum, + changeNum, + deleteNum, + }); + } else { + if (report.job_name) { + title = sprintf( + this.$options.i18n.namedReportFailed, + { + name: report.job_name, + }, + false, + ); + } else { + title = this.$options.i18n.reportFailed; + } + + subtitle = sprintf(`%{small_start}${this.$options.i18n.reportErrored}%{small_end}`); + } + + return { + text: `${title} + <br> + ${subtitle}`, + icon: { name: iconName }, + actions, + }; + }, + prepareReports(reports) { + const valid = []; + const invalid = []; + + reports.forEach((report) => { + if (report.tf_report_error) { + invalid.push(this.createReportRow(report, EXTENSION_ICONS.error)); + } else { + valid.push(this.createReportRow(report, EXTENSION_ICONS.success)); + } + }); + + return { valid, invalid }; + }, + }, +}; diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue index c98dc426224..83a07240403 100644 --- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue +++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue @@ -1,6 +1,7 @@ <script> import { GlSafeHtmlDirective } from '@gitlab/ui'; import { isEmpty } from 'lodash'; +import { registerExtension } from '~/vue_merge_request_widget/components/extensions'; import MrWidgetApprovals from 'ee_else_ce/vue_merge_request_widget/components/approvals/approvals.vue'; import MRWidgetService from 'ee_else_ce/vue_merge_request_widget/services/mr_widget_service'; import MRWidgetStore from 'ee_else_ce/vue_merge_request_widget/stores/mr_widget_store'; @@ -43,6 +44,7 @@ import { STATE_MACHINE, stateToComponentMap } from './constants'; import eventHub from './event_hub'; import mergeRequestQueryVariablesMixin from './mixins/merge_request_query_variables'; import getStateQuery from './queries/get_state.query.graphql'; +import terraformExtension from './extensions/terraform'; export default { // False positive i18n lint: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/25 @@ -184,6 +186,9 @@ export default { shouldRenderSecurityReport() { return Boolean(this.mr.pipeline.id); }, + shouldRenderTerraformPlans() { + return Boolean(this.mr?.terraformReportsPath); + }, mergeError() { let { mergeError } = this.mr; @@ -230,6 +235,11 @@ export default { this.initPostMergeDeploymentsPolling(); } }, + shouldRenderTerraformPlans(newVal) { + if (newVal) { + this.registerTerraformPlans(); + } + }, }, mounted() { MRWidgetService.fetchInitialData() @@ -463,6 +473,11 @@ export default { dismissSuggestPipelines() { this.mr.isDismissedSuggestPipeline = true; }, + registerTerraformPlans() { + if (this.shouldRenderTerraformPlans && this.shouldShowExtension) { + registerExtension(terraformExtension); + } + }, }, }; </script> @@ -542,7 +557,10 @@ export default { :pipeline-path="mr.pipeline.path" /> - <terraform-plan v-if="mr.terraformReportsPath" :endpoint="mr.terraformReportsPath" /> + <terraform-plan + v-if="mr.terraformReportsPath && !shouldShowExtension" + :endpoint="mr.terraformReportsPath" + /> <grouped-accessibility-reports-app v-if="shouldShowAccessibilityReport" diff --git a/app/assets/javascripts/vue_merge_request_widget/services/mr_widget_service.js b/app/assets/javascripts/vue_merge_request_widget/services/mr_widget_service.js index 7dcb4881e7f..7b803b0fcbb 100644 --- a/app/assets/javascripts/vue_merge_request_widget/services/mr_widget_service.js +++ b/app/assets/javascripts/vue_merge_request_widget/services/mr_widget_service.js @@ -55,8 +55,9 @@ export default class MRWidgetService { return axios.get(this.endpoints.mergeActionsContentPath); } - rebase() { - return axios.post(this.endpoints.rebasePath); + rebase({ skipCi = false } = {}) { + const path = `${this.endpoints.rebasePath}?skip_ci=${Boolean(skipCi)}`; + return axios.post(path); } fetchApprovals() { diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js index 57af869a0ba..5378dabf638 100644 --- a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js +++ b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js @@ -222,6 +222,8 @@ export default class MergeRequestStore { this.showGitpodButton = data.show_gitpod_button; this.gitpodUrl = data.gitpod_url; this.gitpodEnabled = data.gitpod_enabled; + this.userPreferencesGitpodPath = data.user_preferences_gitpod_path; + this.userProfileEnableGitpodPath = data.user_profile_enable_gitpod_path; } setState() { @@ -357,15 +359,13 @@ export default class MergeRequestStore { setApprovals(data) { this.approvals = data; this.isApproved = data.approved || false; + + this.setState(); } + // eslint-disable-next-line class-methods-use-this get hasMergeChecksFailed() { - if (!window.gon?.features?.restructuredMrWidget) return false; - - return ( - this.hasMergeableDiscussionsState || - (this.onlyAllowMergeIfPipelineSucceeds && this.isPipelineFailed) - ); + return false; } // Because the state machine doesn't yet handle every state and transition, diff --git a/app/assets/javascripts/vue_shared/components/actions_button.vue b/app/assets/javascripts/vue_shared/components/actions_button.vue index bab13fe7c75..6db18afe51c 100644 --- a/app/assets/javascripts/vue_shared/components/actions_button.vue +++ b/app/assets/javascripts/vue_shared/components/actions_button.vue @@ -66,6 +66,7 @@ export default { :variant="variant" :category="category" split + data-qa-selector="action_dropdown" @click="handleClick(selectedAction, $event)" > <template #button-content> @@ -79,6 +80,7 @@ export default { :is-check-item="true" :is-checked="action.key === selectedAction.key" :secondary-text="action.secondaryText" + :data-qa-selector="`${action.key}_menu_item`" :data-testid="`action_${action.key}`" @click="handleItemClick(action)" > diff --git a/app/assets/javascripts/vue_shared/components/clipboard_button.vue b/app/assets/javascripts/vue_shared/components/clipboard_button.vue index 400be3ef688..f907b64608c 100644 --- a/app/assets/javascripts/vue_shared/components/clipboard_button.vue +++ b/app/assets/javascripts/vue_shared/components/clipboard_button.vue @@ -13,9 +13,23 @@ * /> */ import { GlButton, GlTooltipDirective } from '@gitlab/ui'; +import { uniqueId } from 'lodash'; + +import { __ } from '~/locale'; +import { + CLIPBOARD_SUCCESS_EVENT, + CLIPBOARD_ERROR_EVENT, + I18N_ERROR_MESSAGE, +} from '~/behaviors/copy_to_clipboard'; export default { name: 'ClipboardButton', + i18n: { + copied: __('Copied'), + error: I18N_ERROR_MESSAGE, + }, + CLIPBOARD_SUCCESS_EVENT, + CLIPBOARD_ERROR_EVENT, directives: { GlTooltip: GlTooltipDirective, }, @@ -72,6 +86,13 @@ export default { default: 'default', }, }, + data() { + return { + localTitle: this.title, + titleTimeout: null, + id: null, + }; + }, computed: { clipboardText() { if (this.gfm !== null) { @@ -79,25 +100,50 @@ export default { } return this.text; }, + tooltipDirectiveOptions() { + return { + placement: this.tooltipPlacement, + container: this.tooltipContainer, + boundary: this.tooltipBoundary, + }; + }, + }, + created() { + this.id = uniqueId('clipboard-button-'); + }, + methods: { + updateTooltip(title) { + this.localTitle = title; + this.$root.$emit('bv::show::tooltip', this.id); + + clearTimeout(this.titleTimeout); + + this.titleTimeout = setTimeout(() => { + this.localTitle = this.title; + this.$root.$emit('bv::hide::tooltip', this.id); + }, 1000); + }, }, }; </script> <template> <gl-button - v-gl-tooltip.hover.blur.viewport="{ - placement: tooltipPlacement, - container: tooltipContainer, - boundary: tooltipBoundary, - }" + :id="id" + ref="copyButton" + v-gl-tooltip.hover.focus.click.viewport="tooltipDirectiveOptions" :class="cssClass" - :title="title" + :title="localTitle" :data-clipboard-text="clipboardText" + data-clipboard-handle-tooltip="false" :category="category" :size="size" icon="copy-to-clipboard" - :aria-label="__('Copy this value')" :variant="variant" + :aria-label="localTitle" + aria-live="polite" + @[$options.CLIPBOARD_SUCCESS_EVENT]="updateTooltip($options.i18n.copied)" + @[$options.CLIPBOARD_ERROR_EVENT]="updateTooltip($options.i18n.error)" v-on="$listeners" > <slot></slot> diff --git a/app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger.vue b/app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger.vue index f93415ced45..e12e06a2454 100644 --- a/app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger.vue +++ b/app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger.vue @@ -36,6 +36,11 @@ export default { required: false, default: 'confirm-danger-button', }, + buttonVariant: { + type: String, + required: false, + default: 'danger', + }, }, modalId: CONFIRM_DANGER_MODAL_ID, }; @@ -45,7 +50,7 @@ export default { <gl-button v-gl-modal="$options.modalId" :class="buttonClass" - variant="danger" + :variant="buttonVariant" :disabled="disabled" :data-testid="buttonTestid" >{{ buttonText }}</gl-button diff --git a/app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger_modal.stories.js b/app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger_modal.stories.js index 18fa297da87..6629b293eb9 100644 --- a/app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger_modal.stories.js +++ b/app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger_modal.stories.js @@ -11,7 +11,9 @@ const Template = (args, { argTypes }) => ({ props: Object.keys(argTypes), template: '<confirm-danger v-bind="$props" />', provide: { - confirmDangerMessage: 'You require more Vespene Gas', + additionalInformation: args.additionalInformation || null, + confirmDangerMessage: args.confirmDangerMessage || 'You require more Vespene Gas', + htmlConfirmationMessage: args.confirmDangerMessage || false, }, }); @@ -26,3 +28,16 @@ Disabled.args = { ...Default.args, disabled: true, }; + +export const AdditionalInformation = Template.bind({}); +AdditionalInformation.args = { + ...Default.args, + additionalInformation: 'This replaces the default warning information', +}; + +export const HtmlMessage = Template.bind({}); +HtmlMessage.args = { + ...Default.args, + confirmDangerMessage: 'You strongly require more <strong>Vespene Gas</strong>', + htmlConfirmationMessage: true, +}; diff --git a/app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger_modal.vue b/app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger_modal.vue index 5bbe44b20b3..88890b3332d 100644 --- a/app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger_modal.vue +++ b/app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger_modal.vue @@ -1,5 +1,12 @@ <script> -import { GlAlert, GlModal, GlFormGroup, GlFormInput, GlSprintf } from '@gitlab/ui'; +import { + GlAlert, + GlModal, + GlFormGroup, + GlFormInput, + GlSafeHtmlDirective as SafeHtml, + GlSprintf, +} from '@gitlab/ui'; import { CONFIRM_DANGER_MODAL_BUTTON, CONFIRM_DANGER_MODAL_TITLE, @@ -17,13 +24,22 @@ export default { GlFormInput, GlSprintf, }, + directives: { + SafeHtml, + }, inject: { + htmlConfirmationMessage: { + default: false, + }, confirmDangerMessage: { default: '', }, confirmButtonText: { default: CONFIRM_DANGER_MODAL_BUTTON, }, + additionalInformation: { + default: CONFIRM_DANGER_WARNING, + }, }, props: { modalId: { @@ -81,9 +97,12 @@ export default { :dismissible="false" class="gl-mb-4" > - {{ confirmDangerMessage }} + <span v-if="htmlConfirmationMessage" v-safe-html="confirmDangerMessage"></span> + <span v-else> + {{ confirmDangerMessage }} + </span> </gl-alert> - <p data-testid="confirm-danger-warning">{{ $options.i18n.CONFIRM_DANGER_WARNING }}</p> + <p data-testid="confirm-danger-warning">{{ additionalInformation }}</p> <p data-testid="confirm-danger-phrase"> <gl-sprintf :message="$options.i18n.CONFIRM_DANGER_PHRASE_TEXT"> <template #phrase_code> diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue index 7c1828f2294..5cdf7b6a3b2 100644 --- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue +++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue @@ -332,7 +332,7 @@ export default { v-if="showCheckbox" class="gl-align-self-center" :checked="checkboxChecked" - @input="$emit('checked-input', $event)" + @change="$emit('checked-input', $event)" > <span class="gl-sr-only">{{ __('Select all') }}</span> </gl-form-checkbox> diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/author_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/author_token.vue index 06478a89721..b70317b2ec4 100644 --- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/author_token.vue +++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/author_token.vue @@ -4,7 +4,7 @@ import { compact } from 'lodash'; import createFlash from '~/flash'; import { __ } from '~/locale'; -import { DEFAULT_LABEL_ANY } from '../constants'; +import { DEFAULT_NONE_ANY } from '../constants'; import BaseToken from './base_token.vue'; @@ -36,7 +36,7 @@ export default { }, computed: { defaultAuthors() { - return this.config.defaultAuthors || [DEFAULT_LABEL_ANY]; + return this.config.defaultAuthors || DEFAULT_NONE_ANY; }, preloadedAuthors() { return this.config.preloadedAuthors || []; diff --git a/app/assets/javascripts/vue_shared/components/gitlab_version_check.vue b/app/assets/javascripts/vue_shared/components/gitlab_version_check.vue new file mode 100644 index 00000000000..acddf16bd27 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/gitlab_version_check.vue @@ -0,0 +1,67 @@ +<script> +import { GlBadge } from '@gitlab/ui'; +import { s__ } from '~/locale'; +import axios from '~/lib/utils/axios_utils'; + +const STATUS_TYPES = { + SUCCESS: 'success', + WARNING: 'warning', + DANGER: 'danger', +}; + +export default { + name: 'GitlabVersionCheck', + components: { + GlBadge, + }, + props: { + size: { + type: String, + required: false, + default: 'md', + }, + }, + data() { + return { + status: null, + }; + }, + computed: { + title() { + if (this.status === STATUS_TYPES.SUCCESS) { + return s__('VersionCheck|Up to date'); + } else if (this.status === STATUS_TYPES.WARNING) { + return s__('VersionCheck|Update available'); + } else if (this.status === STATUS_TYPES.DANGER) { + return s__('VersionCheck|Update ASAP'); + } + + return null; + }, + }, + created() { + this.checkGitlabVersion(); + }, + methods: { + checkGitlabVersion() { + axios + .get('/admin/version_check.json') + .then((res) => { + if (res.data) { + this.status = res.data.severity; + } + }) + .catch(() => { + // Silently fail + this.status = null; + }); + }, + }, +}; +</script> + +<template> + <gl-badge v-if="status" class="version-check-badge" :variant="status" :size="size">{{ + title + }}</gl-badge> +</template> diff --git a/app/assets/javascripts/vue_shared/components/line_numbers.vue b/app/assets/javascripts/vue_shared/components/line_numbers.vue index 7e17cca3dcc..11caf3be00a 100644 --- a/app/assets/javascripts/vue_shared/components/line_numbers.vue +++ b/app/assets/javascripts/vue_shared/components/line_numbers.vue @@ -12,31 +12,6 @@ export default { required: true, }, }, - data() { - return { - currentlyHighlightedLine: null, - }; - }, - mounted() { - this.scrollToLine(); - }, - methods: { - scrollToLine(hash = window.location.hash) { - const lineToHighlight = hash && this.$el.querySelector(hash); - - if (!lineToHighlight) { - return; - } - - if (this.currentlyHighlightedLine) { - this.currentlyHighlightedLine.classList.remove('hll'); - } - - lineToHighlight.classList.add('hll'); - this.currentlyHighlightedLine = lineToHighlight; - lineToHighlight.scrollIntoView({ behavior: 'smooth', block: 'center' }); - }, - }, }; </script> <template> @@ -45,10 +20,9 @@ export default { v-for="line in lines" :id="`L${line}`" :key="line" - class="diff-line-num" - :href="`#L${line}`" + class="diff-line-num gl-shadow-none!" + :to="`#LC${line}`" :data-line-number="line" - @click="scrollToLine(`#L${line}`)" > <gl-icon :size="12" name="link" /> {{ line }} diff --git a/app/assets/javascripts/vue_shared/components/markdown/apply_suggestion.vue b/app/assets/javascripts/vue_shared/components/markdown/apply_suggestion.vue index ce7cbafb97d..709d3592828 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/apply_suggestion.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/apply_suggestion.vue @@ -67,7 +67,7 @@ export default { <gl-button class="gl-w-auto! gl-mt-3 gl-text-center! gl-hover-text-white! gl-transition-medium! float-right" category="primary" - variant="success" + variant="confirm" data-qa-selector="commit_with_custom_message_button" @click="onApply" > diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue index 86f04c78ebe..5c86c928ce3 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/field.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue @@ -2,7 +2,7 @@ import { GlIcon } from '@gitlab/ui'; import $ from 'jquery'; import '~/behaviors/markdown/render_gfm'; -import { unescape } from 'lodash'; +import { debounce, unescape } from 'lodash'; import createFlash from '~/flash'; import GLForm from '~/gl_form'; import axios from '~/lib/utils/axios_utils'; @@ -110,7 +110,7 @@ export default { return { markdownPreview: '', referencedCommands: '', - referencedUsers: '', + referencedUsers: [], hasSuggestion: false, markdownPreviewLoading: false, previewMarkdown: false, @@ -188,6 +188,24 @@ export default { }); } }, + + textareaValue: { + immediate: true, + handler(textareaValue, oldVal) { + const all = /@all([^\w._-]|$)/; + const hasAll = all.test(textareaValue); + const hadAll = all.test(oldVal); + + const justAddedAll = !hadAll && hasAll; + const justRemovedAll = hadAll && !hasAll; + + if (justAddedAll) { + this.debouncedFetchMarkdown(); + } else if (justRemovedAll) { + this.referencedUsers = []; + } + }, + }, }, mounted() { // GLForm class handles all the toolbar buttons @@ -222,9 +240,9 @@ export default { if (this.textareaValue) { this.markdownPreviewLoading = true; this.markdownPreview = __('Loading…'); - axios - .post(this.markdownPreviewPath, { text: this.textareaValue }) - .then((response) => this.renderMarkdown(response.data)) + + this.fetchMarkdown() + .then((data) => this.renderMarkdown(data)) .catch(() => createFlash({ message: __('Error loading markdown preview'), @@ -239,17 +257,28 @@ export default { this.previewMarkdown = false; }, + fetchMarkdown() { + return axios.post(this.markdownPreviewPath, { text: this.textareaValue }).then(({ data }) => { + const { references } = data; + if (references) { + this.referencedCommands = references.commands; + this.referencedUsers = references.users; + this.hasSuggestion = references.suggestions?.length > 0; + this.suggestions = references.suggestions; + } + + return data; + }); + }, + + debouncedFetchMarkdown: debounce(function debouncedFetchMarkdown() { + return this.fetchMarkdown(); + }, 400), + renderMarkdown(data = {}) { this.markdownPreviewLoading = false; this.markdownPreview = data.body || __('Nothing to preview.'); - if (data.references) { - this.referencedCommands = data.references.commands; - this.referencedUsers = data.references.users; - this.hasSuggestion = data.references.suggestions && data.references.suggestions.length; - this.suggestions = data.references.suggestions; - } - this.$nextTick() .then(() => $(this.$refs['markdown-preview']).renderGFM()) .catch(() => @@ -326,18 +355,14 @@ export default { v-html="markdownPreview /* eslint-disable-line vue/no-v-html */" ></div> </template> - <template v-if="previewMarkdown && !markdownPreviewLoading"> - <div - v-if="referencedCommands" - class="referenced-commands" - v-html="referencedCommands /* eslint-disable-line vue/no-v-html */" - ></div> - <div v-if="shouldShowReferencedUsers" class="referenced-users"> - <gl-icon name="warning-solid" /> - <span - v-html="addMultipleToDiscussionWarning /* eslint-disable-line vue/no-v-html */" - ></span> - </div> - </template> + <div + v-if="referencedCommands && previewMarkdown && !markdownPreviewLoading" + class="referenced-commands" + v-html="referencedCommands /* eslint-disable-line vue/no-v-html */" + ></div> + <div v-if="shouldShowReferencedUsers" class="referenced-users"> + <gl-icon name="warning-solid" /> + <span v-html="addMultipleToDiscussionWarning /* eslint-disable-line vue/no-v-html */"></span> + </div> </div> </template> diff --git a/app/assets/javascripts/vue_shared/components/modal_copy_button.vue b/app/assets/javascripts/vue_shared/components/modal_copy_button.vue index 38afd56bae6..d4f50e347cb 100644 --- a/app/assets/javascripts/vue_shared/components/modal_copy_button.vue +++ b/app/assets/javascripts/vue_shared/components/modal_copy_button.vue @@ -1,6 +1,6 @@ <script> import { GlButton, GlTooltipDirective } from '@gitlab/ui'; -import Clipboard from 'clipboard'; +import ClipboardJS from 'clipboard'; import { uniqueId } from 'lodash'; import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants'; @@ -69,7 +69,7 @@ export default { }, mounted() { this.$nextTick(() => { - this.clipboard = new Clipboard(this.$el, { + this.clipboard = new ClipboardJS(this.$el, { container: document.querySelector(`${this.modalDomId} div.modal-content`) || document.getElementById(this.container) || diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents.vue index 13a6dd43207..0fa64a29b3a 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents.vue @@ -179,6 +179,9 @@ export default { this.searchKey = ''; this.setFocus(); }, + selectFirstItem() { + this.$refs.dropdownContentsView.selectFirstItem(); + }, }, }; </script> @@ -204,11 +207,13 @@ export default { @toggleDropdownContentsCreateView="toggleDropdownContent" @closeDropdown="$emit('closeDropdown')" @input="debouncedSearchKeyUpdate" + @searchEnter="selectFirstItem" /> </template> <template #default> <component :is="dropdownContentsView" + ref="dropdownContentsView" v-model="localSelectedLabels" :search-key="searchKey" :allow-multiselect="allowMultiselect" diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view.vue index da626a21b14..b99083713a8 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view.vue @@ -1,5 +1,12 @@ <script> -import { GlTooltipDirective, GlButton, GlFormInput, GlLink, GlLoadingIcon } from '@gitlab/ui'; +import { + GlAlert, + GlTooltipDirective, + GlButton, + GlFormInput, + GlLink, + GlLoadingIcon, +} from '@gitlab/ui'; import produce from 'immer'; import createFlash from '~/flash'; import { __ } from '~/locale'; @@ -11,6 +18,7 @@ const errorMessage = __('Error creating label.'); export default { components: { + GlAlert, GlButton, GlFormInput, GlLink, @@ -42,6 +50,7 @@ export default { labelTitle: '', selectedColor: '', labelCreateInProgress: false, + error: undefined, }; }, computed: { @@ -111,13 +120,14 @@ export default { ) => this.updateLabelsInCache(store, label), }); if (labelCreate.errors.length) { - createFlash({ message: errorMessage }); + [this.error] = labelCreate.errors; + } else { + this.$emit('hideCreateView'); } } catch { createFlash({ message: errorMessage }); } this.labelCreateInProgress = false; - this.$emit('hideCreateView'); }, }, }; @@ -126,6 +136,9 @@ export default { <template> <div class="labels-select-contents-create js-labels-create"> <div class="dropdown-input"> + <gl-alert v-if="error" variant="danger" :dismissible="false" class="gl-mb-3"> + {{ error }} + </gl-alert> <gl-form-input v-model.trim="labelTitle" :placeholder="__('Name new label')" diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_labels_view.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_labels_view.vue index e9a2d7747e2..ae179ef93c7 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_labels_view.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_labels_view.vue @@ -84,6 +84,9 @@ export default { showNoMatchingResultsMessage() { return Boolean(this.searchKey) && this.visibleLabels.length === 0; }, + shouldHighlightFirstItem() { + return this.searchKey !== '' && this.visibleLabels.length > 0; + }, }, methods: { isLabelSelected(label) { @@ -128,6 +131,11 @@ export default { onDropdownAppear() { this.isVisible = true; }, + selectFirstItem() { + if (this.shouldHighlightFirstItem) { + this.handleLabelClick(this.visibleLabels[0]); + } + }, }, }; </script> @@ -143,11 +151,13 @@ export default { /> <template v-else> <gl-dropdown-item - v-for="label in visibleLabels" + v-for="(label, index) in visibleLabels" :key="label.id" :is-checked="isLabelSelected(label)" :is-check-centered="true" :is-check-item="true" + :active="shouldHighlightFirstItem && index === 0" + active-class="is-focused" data-testid="labels-list" @click.native.capture.stop="handleLabelClick(label)" > diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_header.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_header.vue index 7a0f20b0c83..faad69732dd 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_header.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_header.vue @@ -83,6 +83,7 @@ export default { data-qa-selector="dropdown_input_field" data-testid="dropdown-input-field" @input="$emit('input', $event)" + @keydown.enter="$emit('searchEnter', $event)" /> </div> </template> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/label_item.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/label_item.vue index f27f0b4e34c..caeee2df7e5 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/label_item.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/label_item.vue @@ -10,7 +10,7 @@ export default { </script> <template> - <div> + <div class="gl-display-flex gl-align-items-center"> <span class="dropdown-label-box gl-flex-shrink-0 gl-top-0 gl-mr-3" :style="{ 'background-color': label.color }" diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue index 3adda69b892..f53b75df4eb 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue @@ -289,6 +289,7 @@ export default { 'is-standalone': isDropdownVariantStandalone(variant), 'is-embedded': isDropdownVariantEmbedded(variant), }" + data-testid="sidebar-labels" data-qa-selector="labels_block" > <template v-if="isDropdownVariantSidebar(variant)"> diff --git a/app/assets/javascripts/vue_shared/components/source_editor.vue b/app/assets/javascripts/vue_shared/components/source_editor.vue index 8a0fef36079..011cad4267c 100644 --- a/app/assets/javascripts/vue_shared/components/source_editor.vue +++ b/app/assets/javascripts/vue_shared/components/source_editor.vue @@ -97,7 +97,7 @@ export default { ref="editor" data-editor-loading data-qa-selector="source_editor_container" - @[$options.readyEvent]="$emit($options.readyEvent)" + @[$options.readyEvent]="$emit($options.readyEvent, $event)" > <pre class="editor-loading-content">{{ value }}</pre> </div> diff --git a/app/assets/javascripts/vue_shared/components/source_viewer.vue b/app/assets/javascripts/vue_shared/components/source_viewer.vue index 8f0d051543f..99895926653 100644 --- a/app/assets/javascripts/vue_shared/components/source_viewer.vue +++ b/app/assets/javascripts/vue_shared/components/source_viewer.vue @@ -1,6 +1,9 @@ <script> import { GlSafeHtmlDirective } from '@gitlab/ui'; import LineNumbers from '~/vue_shared/components/line_numbers.vue'; +import { sanitize } from '~/lib/dompurify'; + +const LINE_SELECT_CLASS_NAME = 'hll'; export default { components: { @@ -46,7 +49,15 @@ export default { } } - return highlightedContent; + return this.wrapLines(highlightedContent); + }, + }, + watch: { + highlightedContent() { + this.$nextTick(() => this.selectLine()); + }, + $route() { + this.selectLine(); }, }, async mounted() { @@ -73,16 +84,40 @@ export default { return languageDefinition; }, + wrapLines(content) { + return ( + content && + content + .split('\n') + .map((line, i) => `<span id="LC${i + 1}" class="line">${line}</span>`) + .join('\r\n') + ); + }, + selectLine() { + const hash = sanitize(this.$route.hash); + const lineToSelect = hash && this.$el.querySelector(hash); + + if (!lineToSelect) { + return; + } + + if (this.$options.currentlySelectedLine) { + this.$options.currentlySelectedLine.classList.remove(LINE_SELECT_CLASS_NAME); + } + + lineToSelect.classList.add(LINE_SELECT_CLASS_NAME); + this.$options.currentlySelectedLine = lineToSelect; + lineToSelect.scrollIntoView({ behavior: 'smooth', block: 'center' }); + }, }, userColorScheme: window.gon.user_color_scheme, + currentlySelectedLine: null, }; </script> <template> - <div class="file-content code" :class="$options.userColorScheme"> + <div class="file-content code js-syntax-highlight" :class="$options.userColorScheme"> <line-numbers :lines="lineNumbers" /> - <pre - class="code gl-pl-3!" - ><code v-safe-html="highlightedContent" class="gl-white-space-pre-wrap!"></code> + <pre class="code"><code v-safe-html="highlightedContent"></code> </pre> </div> </template> diff --git a/app/assets/javascripts/vue_shared/components/web_ide_link.vue b/app/assets/javascripts/vue_shared/components/web_ide_link.vue index 6da2d39a95a..f02cd5c4e2e 100644 --- a/app/assets/javascripts/vue_shared/components/web_ide_link.vue +++ b/app/assets/javascripts/vue_shared/components/web_ide_link.vue @@ -1,6 +1,7 @@ <script> import $ from 'jquery'; -import { __ } from '~/locale'; +import { GlModal, GlSprintf, GlLink } from '@gitlab/ui'; +import { s__, __ } from '~/locale'; import ActionsButton from '~/vue_shared/components/actions_button.vue'; import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue'; @@ -12,6 +13,19 @@ export default { components: { ActionsButton, LocalStorageSync, + GlModal, + GlSprintf, + GlLink, + }, + i18n: { + modal: { + title: __('Enable Gitpod?'), + content: s__( + 'Gitpod|To use Gitpod you must first enable the feature in the integrations section of your %{linkStart}user preferences%{linkEnd}.', + ), + actionCancelText: __('Cancel'), + actionPrimaryText: __('Enable Gitpod'), + }, }, props: { isFork: { @@ -49,6 +63,16 @@ export default { required: false, default: false, }, + userPreferencesGitpodPath: { + type: String, + required: false, + default: '', + }, + userProfileEnableGitpodPath: { + type: String, + required: false, + default: '', + }, editUrl: { type: String, required: false, @@ -74,10 +98,16 @@ export default { required: false, default: '', }, + disableForkModal: { + type: Boolean, + required: false, + default: false, + }, }, data() { return { selection: KEY_WEB_IDE, + showEnableGitpodModal: false, }; }, computed: { @@ -93,8 +123,12 @@ export default { ? { href: '#modal-confirm-fork-edit', handle: () => { - this.$emit('edit', 'simple'); - this.showModal('#modal-confirm-fork-edit'); + if (this.disableForkModal) { + this.$emit('edit', 'simple'); + return; + } + + this.showJQueryModal('#modal-confirm-fork-edit'); }, } : { href: this.editUrl }; @@ -132,8 +166,12 @@ export default { ? { href: '#modal-confirm-fork-webide', handle: () => { - this.$emit('edit', 'ide'); - this.showModal('#modal-confirm-fork-webide'); + if (this.disableForkModal) { + this.$emit('edit', 'ide'); + return; + } + + this.showJQueryModal('#modal-confirm-fork-webide'); }, } : { href: this.webIdeUrl }; @@ -154,14 +192,23 @@ export default { gitpodActionText() { return this.gitpodText || __('Gitpod'); }, + computedShowGitpodButton() { + return ( + this.showGitpodButton && this.userPreferencesGitpodPath && this.userProfileEnableGitpodPath + ); + }, gitpodAction() { - if (!this.showGitpodButton) { + if (!this.computedShowGitpodButton) { return null; } const handleOptions = this.gitpodEnabled ? { href: this.gitpodUrl } - : { href: '#modal-enable-gitpod', handle: () => this.showModal('#modal-enable-gitpod') }; + : { + handle: () => { + this.showModal('showEnableGitpodModal'); + }, + }; const secondaryText = __('Launch a ready-to-code development environment for your project.'); @@ -176,14 +223,36 @@ export default { ...handleOptions, }; }, + enableGitpodModalProps() { + return { + 'modal-id': 'enable-gitpod-modal', + size: 'sm', + title: this.$options.i18n.modal.title, + 'action-cancel': { + text: this.$options.i18n.modal.actionCancelText, + }, + 'action-primary': { + text: this.$options.i18n.modal.actionPrimaryText, + attributes: { + variant: 'confirm', + category: 'primary', + href: this.userProfileEnableGitpodPath, + 'data-method': 'put', + }, + }, + }; + }, }, methods: { select(key) { this.selection = key; }, - showModal(id) { + showJQueryModal(id) { $(id).modal('show'); }, + showModal(dataKey) { + this[dataKey] = true; + }, }, }; </script> @@ -202,5 +271,16 @@ export default { :value="selection" @input="select" /> + <gl-modal + v-if="computedShowGitpodButton && !gitpodEnabled" + v-model="showEnableGitpodModal" + v-bind="enableGitpodModalProps" + > + <gl-sprintf :message="$options.i18n.modal.content"> + <template #link="{ content }"> + <gl-link :href="userPreferencesGitpodPath">{{ content }}</gl-link> + </template> + </gl-sprintf> + </gl-modal> </div> </template> diff --git a/app/assets/javascripts/vue_shared/issuable/list/components/issuable_bulk_edit_sidebar.vue b/app/assets/javascripts/vue_shared/issuable/list/components/issuable_bulk_edit_sidebar.vue index 5ca9e50d854..bcc889495bd 100644 --- a/app/assets/javascripts/vue_shared/issuable/list/components/issuable_bulk_edit_sidebar.vue +++ b/app/assets/javascripts/vue_shared/issuable/list/components/issuable_bulk_edit_sidebar.vue @@ -13,6 +13,7 @@ export default { if (layoutPageEl) { layoutPageEl.classList.toggle('right-sidebar-expanded', value); layoutPageEl.classList.toggle('right-sidebar-collapsed', !value); + layoutPageEl.classList.toggle('issuable-bulk-update-sidebar', !value); } }, }, diff --git a/app/assets/javascripts/vue_shared/issuable/list/components/issuable_item.vue b/app/assets/javascripts/vue_shared/issuable/list/components/issuable_item.vue index 0bb0e0d9fb0..af0235bfc69 100644 --- a/app/assets/javascripts/vue_shared/issuable/list/components/issuable_item.vue +++ b/app/assets/javascripts/vue_shared/issuable/list/components/issuable_item.vue @@ -193,7 +193,13 @@ export default { :title="__('This issue is hidden because its author has been banned')" :aria-label="__('Hidden')" /> - <gl-link class="issue-title-text" dir="auto" :href="webUrl" v-bind="issuableTitleProps"> + <gl-link + class="issue-title-text" + dir="auto" + :href="webUrl" + data-qa-selector="issuable_title_link" + v-bind="issuableTitleProps" + > {{ issuable.title }} <gl-icon v-if="isIssuableUrlExternal" name="external-link" class="gl-ml-2" /> </gl-link> diff --git a/app/assets/javascripts/vue_shared/issuable/list/components/issuable_tabs.vue b/app/assets/javascripts/vue_shared/issuable/list/components/issuable_tabs.vue index 3ff87ba3c4f..9bf54e98cc4 100644 --- a/app/assets/javascripts/vue_shared/issuable/list/components/issuable_tabs.vue +++ b/app/assets/javascripts/vue_shared/issuable/list/components/issuable_tabs.vue @@ -1,5 +1,6 @@ <script> import { GlTabs, GlTab, GlBadge } from '@gitlab/ui'; +import { formatNumber } from '~/locale'; export default { components: { @@ -29,6 +30,9 @@ export default { isTabCountNumeric(tab) { return Number.isInteger(this.tabCounts[tab.name]); }, + formatNumber(count) { + return formatNumber(count); + }, }, }; </script> @@ -55,7 +59,7 @@ export default { size="sm" class="gl-tab-counter-badge" > - {{ tabCounts[tab.name] }} + {{ formatNumber(tabCounts[tab.name]) }} </gl-badge> </template> </gl-tab> diff --git a/app/assets/javascripts/vue_shared/issuable/list/constants.js b/app/assets/javascripts/vue_shared/issuable/list/constants.js index 773ad0f8e93..c6dce6a51c2 100644 --- a/app/assets/javascripts/vue_shared/issuable/list/constants.js +++ b/app/assets/javascripts/vue_shared/issuable/list/constants.js @@ -38,7 +38,7 @@ export const AvailableSortOptions = [ }, { id: 2, - title: __('Last updated'), + title: __('Updated date'), sortDirection: { descending: 'updated_desc', ascending: 'updated_asc', diff --git a/app/assets/javascripts/vue_shared/issuable/show/constants.js b/app/assets/javascripts/vue_shared/issuable/show/constants.js deleted file mode 100644 index 346f45c7d90..00000000000 --- a/app/assets/javascripts/vue_shared/issuable/show/constants.js +++ /dev/null @@ -1,5 +0,0 @@ -export const IssuableType = { - Issue: 'issue', - Incident: 'incident', - TestCase: 'test_case', -}; diff --git a/app/assets/javascripts/vue_shared/new_namespace/new_namespace_page.vue b/app/assets/javascripts/vue_shared/new_namespace/new_namespace_page.vue index 114f60c96ee..f67e590e2ce 100644 --- a/app/assets/javascripts/vue_shared/new_namespace/new_namespace_page.vue +++ b/app/assets/javascripts/vue_shared/new_namespace/new_namespace_page.vue @@ -10,10 +10,17 @@ export default { GlIcon, WelcomePage, LegacyContainer, + CreditCardVerification: () => + import('ee_component/pages/groups/new/components/credit_card_verification.vue'), }, directives: { SafeHtml, }, + inject: { + verificationRequired: { + default: false, + }, + }, props: { title: { type: String, @@ -41,6 +48,7 @@ export default { data() { return { activePanelName: null, + verificationCompleted: false, }; }, @@ -67,6 +75,10 @@ export default { { text: this.activePanel.title, href: `#${this.activePanel.name}` }, ]; }, + + shouldVerify() { + return this.verificationRequired && !this.verificationCompleted; + }, }, created() { @@ -93,12 +105,16 @@ export default { localStorage.setItem(this.persistenceKey, this.activePanelName); } }, + onVerified() { + this.verificationCompleted = true; + }, }, }; </script> <template> - <welcome-page v-if="!activePanelName" :panels="panels" :title="title"> + <credit-card-verification v-if="shouldVerify" @verified="onVerified" /> + <welcome-page v-else-if="!activePanelName" :panels="panels" :title="title"> <template #footer> <slot name="welcome-footer"> </slot> </template> diff --git a/app/assets/javascripts/work_items/components/item_title.vue b/app/assets/javascripts/work_items/components/item_title.vue index 5e9e50a94f0..79840cc4f0f 100644 --- a/app/assets/javascripts/work_items/components/item_title.vue +++ b/app/assets/javascripts/work_items/components/item_title.vue @@ -2,7 +2,10 @@ import { escape } from 'lodash'; import { __ } from '~/locale'; +import { WI_TITLE_TRACK_LABEL } from '../constants'; + export default { + WI_TITLE_TRACK_LABEL, props: { initialTitle: { type: String, @@ -56,6 +59,7 @@ export default { role="textbox" :aria-label="__('Title')" :data-placeholder="placeholder" + :data-track-label="$options.WI_TITLE_TRACK_LABEL" :contenteditable="!disabled" class="gl-pseudo-placeholder" @blur="handleBlur" diff --git a/app/assets/javascripts/work_items/constants.js b/app/assets/javascripts/work_items/constants.js index b39f68abf74..995c02a2c5b 100644 --- a/app/assets/javascripts/work_items/constants.js +++ b/app/assets/javascripts/work_items/constants.js @@ -1,3 +1,5 @@ export const widgetTypes = { title: 'TITLE', }; + +export const WI_TITLE_TRACK_LABEL = 'item_title'; diff --git a/app/assets/javascripts/work_items/pages/work_item_root.vue b/app/assets/javascripts/work_items/pages/work_item_root.vue index 479274baf3a..4262e169655 100644 --- a/app/assets/javascripts/work_items/pages/work_item_root.vue +++ b/app/assets/javascripts/work_items/pages/work_item_root.vue @@ -1,16 +1,21 @@ <script> import { GlAlert } from '@gitlab/ui'; +import Tracking from '~/tracking'; import workItemQuery from '../graphql/work_item.query.graphql'; import updateWorkItemMutation from '../graphql/update_work_item.mutation.graphql'; -import { widgetTypes } from '../constants'; +import { widgetTypes, WI_TITLE_TRACK_LABEL } from '../constants'; import ItemTitle from '../components/item_title.vue'; +const trackingMixin = Tracking.mixin(); + export default { + titleUpdatedEvent: 'updated_title', components: { ItemTitle, GlAlert, }, + mixins: [trackingMixin], props: { id: { type: String, @@ -34,6 +39,14 @@ export default { }, }, computed: { + tracking() { + return { + category: 'workItems:show', + action: 'updated_title', + label: WI_TITLE_TRACK_LABEL, + property: '[type_work_item]', + }; + }, titleWidgetData() { return this.workItem?.widgets?.nodes?.find((widget) => widget.type === widgetTypes.title); }, @@ -50,6 +63,7 @@ export default { }, }, }); + this.track(); } catch { this.error = true; } |