From a7b3560714b4d9cc4ab32dffcd1f74a284b93580 Mon Sep 17 00:00:00 2001 From: GitLab Bot Date: Fri, 18 Feb 2022 09:45:46 +0000 Subject: Add latest changes from gitlab-org/gitlab@14-8-stable-ee --- .../vue_shared/components/awards_list.vue | 7 + .../components/blob_viewers/simple_viewer.vue | 18 +- .../ci_cd_analytics/ci_cd_analytics_charts.vue | 3 +- .../vue_shared/components/confirm_fork_modal.vue | 68 ++++++ .../design_management/design_note_pin.vue | 28 +++ .../components/filtered_search_bar/constants.js | 14 +- .../filtered_search_bar/tokens/base_token.vue | 23 +- .../filtered_search_bar/tokens/milestone_token.vue | 7 +- .../gfm_autocomplete/gfm_autocomplete.vue | 106 --------- .../components/gfm_autocomplete/utils.js | 195 ---------------- .../vue_shared/components/help_popover.vue | 3 + .../vue_shared/components/markdown/field.vue | 24 +- .../vue_shared/components/markdown/header.vue | 255 +++++++++++---------- .../namespace_select/namespace_select.vue | 104 +++++++-- .../javascripts/vue_shared/components/pikaday.vue | 48 ---- .../runner_instructions/runner_instructions.vue | 2 +- .../components/sidebar/collapsed_calendar_icon.vue | 49 ---- .../vue_shared/components/sidebar/date_picker.vue | 148 ------------ .../dropdown_contents_create_view.vue | 6 +- .../components/sidebar/multiselect_dropdown.vue | 37 --- .../vue_shared/components/source_viewer.vue | 123 ---------- .../components/source_viewer/constants.js | 111 +++++++++ .../components/source_viewer/source_viewer.vue | 116 ++++++++++ .../vue_shared/components/source_viewer/utils.js | 26 +++ .../vue_shared/components/svg_gradient.vue | 34 --- .../components/upload_dropzone/upload_dropzone.vue | 37 ++- .../vue_shared/components/web_ide_link.vue | 27 ++- 27 files changed, 697 insertions(+), 922 deletions(-) create mode 100644 app/assets/javascripts/vue_shared/components/confirm_fork_modal.vue delete mode 100644 app/assets/javascripts/vue_shared/components/gfm_autocomplete/gfm_autocomplete.vue delete mode 100644 app/assets/javascripts/vue_shared/components/gfm_autocomplete/utils.js delete mode 100644 app/assets/javascripts/vue_shared/components/pikaday.vue delete mode 100644 app/assets/javascripts/vue_shared/components/sidebar/collapsed_calendar_icon.vue delete mode 100644 app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue delete mode 100644 app/assets/javascripts/vue_shared/components/sidebar/multiselect_dropdown.vue delete mode 100644 app/assets/javascripts/vue_shared/components/source_viewer.vue create mode 100644 app/assets/javascripts/vue_shared/components/source_viewer/constants.js create mode 100644 app/assets/javascripts/vue_shared/components/source_viewer/source_viewer.vue create mode 100644 app/assets/javascripts/vue_shared/components/source_viewer/utils.js delete mode 100644 app/assets/javascripts/vue_shared/components/svg_gradient.vue (limited to 'app/assets/javascripts/vue_shared/components') diff --git a/app/assets/javascripts/vue_shared/components/awards_list.vue b/app/assets/javascripts/vue_shared/components/awards_list.vue index 82a28d4cb5f..b6010d4b70c 100644 --- a/app/assets/javascripts/vue_shared/components/awards_list.vue +++ b/app/assets/javascripts/vue_shared/components/awards_list.vue @@ -75,6 +75,9 @@ export default { return this.noteAuthorId === this.currentUserId; }, }, + mounted() { + this.virtualScrollerItem = this.$el.closest('.vue-recycle-scroller__item-view'); + }, methods: { getAwardClassBindings(awardList) { return { @@ -162,6 +165,10 @@ export default { }, setIsMenuOpen(menuOpen) { this.isMenuOpen = menuOpen; + + if (this.virtualScrollerItem) { + this.virtualScrollerItem.style.zIndex = this.isMenuOpen ? 1 : null; + } }, }, safeHtmlConfig: { ADD_TAGS: ['gl-emoji'] }, diff --git a/app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue b/app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue index 2c74d56f617..3aaa7d915ea 100644 --- a/app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue +++ b/app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue @@ -1,6 +1,7 @@ + diff --git a/app/assets/javascripts/vue_shared/components/design_management/design_note_pin.vue b/app/assets/javascripts/vue_shared/components/design_management/design_note_pin.vue index cb038a8c4e1..c411496fad1 100644 --- a/app/assets/javascripts/vue_shared/components/design_management/design_note_pin.vue +++ b/app/assets/javascripts/vue_shared/components/design_management/design_note_pin.vue @@ -28,12 +28,37 @@ export default { required: false, default: false, }, + isOnImage: { + type: Boolean, + required: false, + default: false, + }, + isDraft: { + type: Boolean, + required: false, + default: false, + }, + size: { + type: String, + required: false, + default: 'md', + validator: (value) => ['sm', 'md'].includes(value), + }, + ariaLabel: { + type: String, + required: false, + default: null, + }, }, computed: { isNewNote() { return this.label === null; }, pinLabel() { + if (this.ariaLabel) { + return this.ariaLabel; + } + return this.isNewNote ? __('Comment form position') : sprintf(__("Comment '%{label}' position"), { label: this.label }); @@ -51,7 +76,10 @@ export default { 'js-image-badge design-note-pin': !isNewNote, resolved: isResolved, inactive: isInactive, + draft: isDraft, + 'on-image': isOnImage, 'gl-absolute': position, + small: size === 'sm', }" class="gl-display-flex gl-align-items-center gl-justify-content-center gl-font-sm" type="button" diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/constants.js b/app/assets/javascripts/vue_shared/components/filtered_search_bar/constants.js index 810d9f782b9..3d48c74b40b 100644 --- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/constants.js +++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/constants.js @@ -23,9 +23,19 @@ export const DEFAULT_LABEL_NONE = { value: FILTER_NONE, text: __('None'), title: export const DEFAULT_LABEL_ANY = { value: FILTER_ANY, text: __('Any'), title: __('Any') }; export const DEFAULT_NONE_ANY = [DEFAULT_LABEL_NONE, DEFAULT_LABEL_ANY]; +export const DEFAULT_MILESTONE_UPCOMING = { + value: FILTER_UPCOMING, + text: __('Upcoming'), + title: __('Upcoming'), +}; +export const DEFAULT_MILESTONE_STARTED = { + value: FILTER_STARTED, + text: __('Started'), + title: __('Started'), +}; export const DEFAULT_MILESTONES = DEFAULT_NONE_ANY.concat([ - { value: FILTER_UPCOMING, text: __('Upcoming'), title: __('Upcoming') }, - { value: FILTER_STARTED, text: __('Started'), title: __('Started') }, + DEFAULT_MILESTONE_UPCOMING, + DEFAULT_MILESTONE_STARTED, ]); export const SortDirection = { diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue index bbc1888bc0b..157068b2c0f 100644 --- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue +++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue @@ -163,19 +163,22 @@ export default { }, }, methods: { - handleInput: debounce(function debouncedSearch({ data }) { - this.searchKey = data; + handleInput: debounce(function debouncedSearch({ data, operator }) { + // Prevent fetching suggestions when data or operator is not present + if (data || operator) { + this.searchKey = data; - if (!this.suggestionsLoading && !this.activeTokenValue) { - let search = this.searchTerm ? this.searchTerm : data; + if (!this.suggestionsLoading && !this.activeTokenValue) { + let search = this.searchTerm ? this.searchTerm : data; - if (search.startsWith('"') && search.endsWith('"')) { - search = stripQuotes(search); - } else if (search.startsWith('"')) { - search = search.slice(1, search.length); - } + if (search.startsWith('"') && search.endsWith('"')) { + search = stripQuotes(search); + } else if (search.startsWith('"')) { + search = search.slice(1, search.length); + } - this.$emit('fetch-suggestions', search); + this.$emit('fetch-suggestions', search); + } } }, DEBOUNCE_DELAY), handleTokenValueSelected(selectedValue) { diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/milestone_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/milestone_token.vue index 0d3394788fa..11c081ab4f8 100644 --- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/milestone_token.vue +++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/milestone_token.vue @@ -57,7 +57,12 @@ export default { .fetchMilestones(searchTerm) .then((response) => { const data = Array.isArray(response) ? response : response.data; - this.milestones = data.slice().sort(sortMilestonesByDueDate); + + if (this.config.shouldSkipSort) { + this.milestones = data; + } else { + this.milestones = data.slice().sort(sortMilestonesByDueDate); + } }) .catch(() => { createFlash({ message: __('There was a problem fetching milestones.') }); diff --git a/app/assets/javascripts/vue_shared/components/gfm_autocomplete/gfm_autocomplete.vue b/app/assets/javascripts/vue_shared/components/gfm_autocomplete/gfm_autocomplete.vue deleted file mode 100644 index 9ab91e567e6..00000000000 --- a/app/assets/javascripts/vue_shared/components/gfm_autocomplete/gfm_autocomplete.vue +++ /dev/null @@ -1,106 +0,0 @@ - diff --git a/app/assets/javascripts/vue_shared/components/gfm_autocomplete/utils.js b/app/assets/javascripts/vue_shared/components/gfm_autocomplete/utils.js deleted file mode 100644 index 44c3fc34ba6..00000000000 --- a/app/assets/javascripts/vue_shared/components/gfm_autocomplete/utils.js +++ /dev/null @@ -1,195 +0,0 @@ -import { escape, last } from 'lodash'; -import * as Emoji from '~/emoji'; -import { spriteIcon } from '~/lib/utils/common_utils'; - -const groupType = 'Group'; // eslint-disable-line @gitlab/require-i18n-strings - -// Number of users to show in the autocomplete menu to avoid doing a mass fetch of 100+ avatars -const memberLimit = 10; - -const nonWordOrInteger = /\W|^\d+$/; - -export const menuItemLimit = 100; - -export const GfmAutocompleteType = { - Emojis: 'emojis', - Issues: 'issues', - Labels: 'labels', - Members: 'members', - MergeRequests: 'mergeRequests', - Milestones: 'milestones', - QuickActions: 'commands', - Snippets: 'snippets', -}; - -function doesCurrentLineStartWith(searchString, fullText, selectionStart) { - const currentLineNumber = fullText.slice(0, selectionStart).split('\n').length; - const currentLine = fullText.split('\n')[currentLineNumber - 1]; - return currentLine.startsWith(searchString); -} - -export const tributeConfig = { - [GfmAutocompleteType.Emojis]: { - config: { - trigger: ':', - lookup: (value) => value, - menuItemLimit, - menuItemTemplate: ({ original }) => `${original} ${Emoji.glEmojiTag(original)}`, - selectTemplate: ({ original }) => `:${original}:`, - }, - }, - - [GfmAutocompleteType.Issues]: { - config: { - trigger: '#', - lookup: (value) => `${value.iid}${value.title}`, - menuItemLimit, - menuItemTemplate: ({ original }) => - `${original.reference || original.iid} ${escape(original.title)}`, - selectTemplate: ({ original }) => original.reference || `#${original.iid}`, - }, - }, - - [GfmAutocompleteType.Labels]: { - config: { - trigger: '~', - lookup: 'title', - menuItemLimit, - menuItemTemplate: ({ original }) => ` - - ${escape(original.title)}`, - selectTemplate: ({ original }) => - nonWordOrInteger.test(original.title) - ? `~"${escape(original.title)}"` - : `~${escape(original.title)}`, - }, - filterValues({ collection, fullText, selectionStart }) { - if (doesCurrentLineStartWith('/label', fullText, selectionStart)) { - return collection.filter((label) => !label.set); - } - - if (doesCurrentLineStartWith('/unlabel', fullText, selectionStart)) { - return collection.filter((label) => label.set); - } - - return collection; - }, - }, - - [GfmAutocompleteType.Members]: { - config: { - trigger: '@', - fillAttr: 'username', - lookup: (value) => - value.type === groupType ? last(value.name.split(' / ')) : `${value.name}${value.username}`, - menuItemLimit: memberLimit, - menuItemTemplate: ({ original }) => { - const commonClasses = 'gl-avatar gl-avatar-s32 gl-flex-shrink-0'; - const noAvatarClasses = `${commonClasses} gl-rounded-small - gl-display-flex gl-align-items-center gl-justify-content-center`; - - const avatar = original.avatar_url - ? `` - : ``; - - let displayName = original.name; - let parentGroupOrUsername = `@${original.username}`; - - if (original.type === groupType) { - const splitName = original.name.split(' / '); - displayName = splitName.pop(); - parentGroupOrUsername = splitName.pop(); - } - - const count = original.count && !original.mentionsDisabled ? ` (${original.count})` : ''; - - const disabledMentionsIcon = original.mentionsDisabled - ? spriteIcon('notifications-off', 's16 gl-ml-3') - : ''; - - return ` -
- ${avatar} -
-
${escape(displayName)}${count}
-
${escape(parentGroupOrUsername)}
-
- ${disabledMentionsIcon} -
- `; - }, - }, - filterValues({ assignees, collection, fullText, selectionStart }) { - if (doesCurrentLineStartWith('/assign', fullText, selectionStart)) { - return collection.filter((member) => !assignees.includes(member.username)); - } - - if (doesCurrentLineStartWith('/unassign', fullText, selectionStart)) { - return collection.filter((member) => assignees.includes(member.username)); - } - - return collection; - }, - }, - - [GfmAutocompleteType.MergeRequests]: { - config: { - trigger: '!', - lookup: (value) => `${value.iid}${value.title}`, - menuItemLimit, - menuItemTemplate: ({ original }) => - `${original.reference || original.iid} ${escape(original.title)}`, - selectTemplate: ({ original }) => original.reference || `!${original.iid}`, - }, - }, - - [GfmAutocompleteType.Milestones]: { - config: { - trigger: '%', - lookup: 'title', - menuItemLimit, - menuItemTemplate: ({ original }) => escape(original.title), - selectTemplate: ({ original }) => `%"${escape(original.title)}"`, - }, - }, - - [GfmAutocompleteType.QuickActions]: { - config: { - trigger: '/', - fillAttr: 'name', - lookup: (value) => `${value.name}${value.aliases.join()}`, - menuItemLimit, - menuItemTemplate: ({ original }) => { - const aliases = original.aliases.length - ? `(or /${original.aliases.join(', /')})` - : ''; - - const params = original.params.length ? `${original.params.join(' ')}` : ''; - - let description = ''; - - if (original.warning) { - const confidentialIcon = - original.icon === 'confidential' ? spriteIcon('eye-slash', 's16 gl-mr-2') : ''; - description = `${confidentialIcon}${original.warning}`; - } else if (original.description) { - description = `${original.description}`; - } - - return `
/${original.name} ${aliases} ${params}
-
${description}
`; - }, - }, - }, - - [GfmAutocompleteType.Snippets]: { - config: { - trigger: '$', - fillAttr: 'id', - lookup: (value) => `${value.id}${value.title}`, - menuItemLimit, - menuItemTemplate: ({ original }) => `${original.id} ${escape(original.title)}`, - }, - }, -}; diff --git a/app/assets/javascripts/vue_shared/components/help_popover.vue b/app/assets/javascripts/vue_shared/components/help_popover.vue index f36b9107a6e..f3b871c91b6 100644 --- a/app/assets/javascripts/vue_shared/components/help_popover.vue +++ b/app/assets/javascripts/vue_shared/components/help_popover.vue @@ -33,6 +33,9 @@ export default { + diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue index 5c86c928ce3..cbf38984e23 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/field.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue @@ -8,7 +8,6 @@ import GLForm from '~/gl_form'; import axios from '~/lib/utils/axios_utils'; import { stripHtml } from '~/lib/utils/text_utility'; import { __, sprintf } from '~/locale'; -import GfmAutocomplete from '~/vue_shared/components/gfm_autocomplete/gfm_autocomplete.vue'; import Suggestions from '~/vue_shared/components/markdown/suggestions.vue'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import MarkdownHeader from './header.vue'; @@ -20,7 +19,6 @@ function cleanUpLine(content) { export default { components: { - GfmAutocomplete, MarkdownHeader, MarkdownToolbar, GlIcon, @@ -212,15 +210,16 @@ export default { return new GLForm( $(this.$refs['gl-form']), { - emojis: this.enableAutocomplete && !this.glFeatures.tributeAutocomplete, - members: this.enableAutocomplete && !this.glFeatures.tributeAutocomplete, - issues: this.enableAutocomplete && !this.glFeatures.tributeAutocomplete, - mergeRequests: this.enableAutocomplete && !this.glFeatures.tributeAutocomplete, - epics: this.enableAutocomplete && !this.glFeatures.tributeAutocomplete, - milestones: this.enableAutocomplete && !this.glFeatures.tributeAutocomplete, - labels: this.enableAutocomplete && !this.glFeatures.tributeAutocomplete, - snippets: this.enableAutocomplete && !this.glFeatures.tributeAutocomplete, + emojis: this.enableAutocomplete, + members: this.enableAutocomplete, + issues: this.enableAutocomplete, + mergeRequests: this.enableAutocomplete, + epics: this.enableAutocomplete, + milestones: this.enableAutocomplete, + labels: this.enableAutocomplete, + snippets: this.enableAutocomplete, vulnerabilities: this.enableAutocomplete, + contacts: this.enableAutocomplete && this.glFeatures.contactsAutocomplete, }, true, ); @@ -311,10 +310,7 @@ export default { />
- - - - + -import { GlPopover, GlButton, GlTooltipDirective } from '@gitlab/ui'; +import { GlPopover, GlButton, GlTooltipDirective, GlTabs, GlTab } from '@gitlab/ui'; import $ from 'jquery'; import { keysFor, BOLD_TEXT, ITALIC_TEXT, LINK_TEXT } from '~/behaviors/shortcuts/keybindings'; import { getSelectedFragment } from '~/lib/utils/common_utils'; -import { s__ } from '~/locale'; +import { s__, __ } from '~/locale'; import { CopyAsGFM } from '../../../behaviors/markdown/copy_as_gfm'; import ToolbarButton from './toolbar_button.vue'; @@ -12,6 +12,8 @@ export default { ToolbarButton, GlPopover, GlButton, + GlTabs, + GlTab, }, directives: { GlTooltip: GlTooltipDirective, @@ -144,136 +146,143 @@ export default { italic: keysFor(ITALIC_TEXT), link: keysFor(LINK_TEXT), }, + i18n: { + writeTabTitle: __('Write'), + previewTabTitle: __('Preview'), + }, }; +
diff --git a/app/assets/javascripts/vue_shared/components/namespace_select/namespace_select.vue b/app/assets/javascripts/vue_shared/components/namespace_select/namespace_select.vue index 7d2af7983d1..521b1a1075a 100644 --- a/app/assets/javascripts/vue_shared/components/namespace_select/namespace_select.vue +++ b/app/assets/javascripts/vue_shared/components/namespace_select/namespace_select.vue @@ -1,34 +1,74 @@ +
-- cgit v1.2.3