diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared')
56 files changed, 1042 insertions, 347 deletions
diff --git a/app/assets/javascripts/vue_shared/alert_details/components/system_notes/system_note.vue b/app/assets/javascripts/vue_shared/alert_details/components/system_notes/system_note.vue index f8f1613879f..6b774b2a734 100644 --- a/app/assets/javascripts/vue_shared/alert_details/components/system_notes/system_note.vue +++ b/app/assets/javascripts/vue_shared/alert_details/components/system_notes/system_note.vue @@ -1,5 +1,5 @@ <script> -import { GlIcon } from '@gitlab/ui'; +import { GlIcon, GlSafeHtmlDirective } from '@gitlab/ui'; import NoteHeader from '~/notes/components/note_header.vue'; export default { @@ -7,6 +7,9 @@ export default { NoteHeader, GlIcon, }, + directives: { + SafeHtml: GlSafeHtmlDirective, + }, props: { note: { type: Object, @@ -39,7 +42,7 @@ export default { <div class="note-header"> <note-header :author="noteAuthor" :created-at="note.createdAt" :note-id="note.id"> - <span v-html="note.bodyHtml /* eslint-disable-line vue/no-v-html */"></span> + <span v-safe-html="note.bodyHtml"></span> </note-header> </div> </div> diff --git a/app/assets/javascripts/vue_shared/alert_details/graphql/queries/alert_sidebar_details.query.graphql b/app/assets/javascripts/vue_shared/alert_details/graphql/queries/alert_sidebar_details.query.graphql index da5f1a00e11..0c26fcc0ab2 100644 --- a/app/assets/javascripts/vue_shared/alert_details/graphql/queries/alert_sidebar_details.query.graphql +++ b/app/assets/javascripts/vue_shared/alert_details/graphql/queries/alert_sidebar_details.query.graphql @@ -1,7 +1,7 @@ #import "~/graphql_shared/fragments/alert_detail_item.fragment.graphql" #import "~/graphql_shared/fragments/user.fragment.graphql" -query alertDetails($fullPath: ID!, $alertId: String) { +query alertDetailsAssignees($fullPath: ID!, $alertId: String) { project(fullPath: $fullPath) { alertManagementAlerts(iid: $alertId) { nodes { diff --git a/app/assets/javascripts/vue_shared/alert_details/index.js b/app/assets/javascripts/vue_shared/alert_details/index.js index fda405c0fa5..9f1da9ae173 100644 --- a/app/assets/javascripts/vue_shared/alert_details/index.js +++ b/app/assets/javascripts/vue_shared/alert_details/index.js @@ -38,7 +38,6 @@ export default (selector) => { return defaultDataIdFromObject(object); }, }, - assumeImmutableResults: true, }), }); diff --git a/app/assets/javascripts/vue_shared/components/alerts_deprecation_warning.vue b/app/assets/javascripts/vue_shared/components/alerts_deprecation_warning.vue deleted file mode 100644 index 16ca2df02c0..00000000000 --- a/app/assets/javascripts/vue_shared/components/alerts_deprecation_warning.vue +++ /dev/null @@ -1,46 +0,0 @@ -<script> -import { GlAlert, GlLink, GlSprintf } from '@gitlab/ui'; -import { helpPagePath } from '~/helpers/help_page_helper'; -import { s__ } from '~/locale'; - -export default { - components: { - GlAlert, - GlLink, - GlSprintf, - }, - inject: ['hasManagedPrometheus'], - i18n: { - alertsDeprecationText: s__( - 'Metrics|GitLab-managed Prometheus is deprecated and %{linkStart}scheduled for removal%{linkEnd}. Following this removal, your existing alerts will continue to function as part of the new cluster integration. However, you will no longer be able to add new alerts or edit existing alerts from the metrics dashboard.', - ), - }, - methods: { - helpPagePath, - }, -}; -</script> - -<template> - <gl-alert - v-if="hasManagedPrometheus" - variant="warning" - class="my-2" - data-testid="alerts-deprecation-warning" - > - <gl-sprintf :message="$options.i18n.alertsDeprecationText"> - <template #link="{ content }"> - <gl-link - :href=" - helpPagePath('operations/metrics/alerts.html', { - anchor: 'managed-prometheus-instances', - }) - " - target="_blank" - > - <span>{{ content }}</span> - </gl-link> - </template> - </gl-sprintf> - </gl-alert> -</template> 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 40044e518c3..2c74d56f617 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,5 +1,5 @@ <script> -import { GlIcon } from '@gitlab/ui'; +import { GlIcon, GlSafeHtmlDirective } from '@gitlab/ui'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { HIGHLIGHT_CLASS_NAME } from './constants'; import ViewerMixin from './mixins'; @@ -9,6 +9,9 @@ export default { components: { GlIcon, }, + directives: { + SafeHtml: GlSafeHtmlDirective, + }, mixins: [ViewerMixin, glFeatureFlagsMixin()], inject: ['blobHash'], data() { @@ -65,7 +68,7 @@ export default { <div class="blob-content"> <pre class="code highlight" - ><code :data-blob-hash="blobHash" v-html="content /* eslint-disable-line vue/no-v-html */"></code></pre> + ><code v-safe-html="content" :data-blob-hash="blobHash"></code></pre> </div> </div> </div> diff --git a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue index f388a468fd2..5de71c35be9 100644 --- a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue +++ b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue @@ -21,6 +21,7 @@ import CiIcon from './ci_icon.vue'; * - Job show view - header * - MR widget * - Terraform table + * - On-demand scans list */ export default { 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 new file mode 100644 index 00000000000..4c07cf44fed --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger.vue @@ -0,0 +1,54 @@ +<script> +import { GlButton, GlModalDirective } from '@gitlab/ui'; +import { CONFIRM_DANGER_MODAL_ID } from './constants'; +import ConfirmDangerModal from './confirm_danger_modal.vue'; + +export default { + name: 'ConfirmDanger', + components: { + GlButton, + ConfirmDangerModal, + }, + directives: { + GlModal: GlModalDirective, + }, + props: { + disabled: { + type: Boolean, + required: false, + default: false, + }, + phrase: { + type: String, + required: true, + }, + buttonText: { + type: String, + required: true, + }, + buttonTestid: { + type: String, + required: false, + default: 'confirm-danger-button', + }, + }, + modalId: CONFIRM_DANGER_MODAL_ID, +}; +</script> +<template> + <div> + <gl-button + v-gl-modal="$options.modalId" + class="gl-button" + variant="danger" + :disabled="disabled" + :data-testid="buttonTestid" + >{{ buttonText }}</gl-button + > + <confirm-danger-modal + :modal-id="$options.modalId" + :phrase="phrase" + @confirm="$emit('confirm')" + /> + </div> +</template> 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 new file mode 100644 index 00000000000..18fa297da87 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger_modal.stories.js @@ -0,0 +1,28 @@ +/* eslint-disable @gitlab/require-i18n-strings */ +import ConfirmDanger from './confirm_danger.vue'; + +export default { + component: ConfirmDanger, + title: 'vue_shared/components/modals/confirm_danger_modal', +}; + +const Template = (args, { argTypes }) => ({ + components: { ConfirmDanger }, + props: Object.keys(argTypes), + template: '<confirm-danger v-bind="$props" />', + provide: { + confirmDangerMessage: 'You require more Vespene Gas', + }, +}); + +export const Default = Template.bind({}); +Default.args = { + phrase: 'You must construct additional pylons', + buttonText: 'Confirm button text', +}; + +export const Disabled = Template.bind({}); +Disabled.args = { + ...Default.args, + disabled: 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 new file mode 100644 index 00000000000..30c96daf7e3 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger_modal.vue @@ -0,0 +1,104 @@ +<script> +import { GlAlert, GlModal, GlFormGroup, GlFormInput, GlSprintf } from '@gitlab/ui'; +import { + CONFIRM_DANGER_MODAL_BUTTON, + CONFIRM_DANGER_MODAL_TITLE, + CONFIRM_DANGER_PHRASE_TEXT, + CONFIRM_DANGER_WARNING, + CONFIRM_DANGER_MODAL_ERROR, +} from './constants'; + +export default { + name: 'ConfirmDangerModal', + components: { + GlAlert, + GlModal, + GlFormGroup, + GlFormInput, + GlSprintf, + }, + inject: { + confirmDangerMessage: { + default: '', + }, + confirmButtonText: { + default: CONFIRM_DANGER_MODAL_BUTTON, + }, + }, + props: { + modalId: { + type: String, + required: true, + }, + phrase: { + type: String, + required: true, + }, + }, + data() { + return { confirmationPhrase: '' }; + }, + computed: { + isValid() { + return Boolean( + this.confirmationPhrase.length && this.equalString(this.confirmationPhrase, this.phrase), + ); + }, + actionPrimary() { + return { + text: this.confirmButtonText, + attributes: [{ variant: 'danger', disabled: !this.isValid }], + }; + }, + }, + methods: { + equalString(a, b) { + return a.trim().toLowerCase() === b.trim().toLowerCase(); + }, + }, + i18n: { + CONFIRM_DANGER_MODAL_BUTTON, + CONFIRM_DANGER_MODAL_TITLE, + CONFIRM_DANGER_WARNING, + CONFIRM_DANGER_PHRASE_TEXT, + CONFIRM_DANGER_MODAL_ERROR, + }, +}; +</script> +<template> + <gl-modal + ref="modal" + :modal-id="modalId" + :data-testid="modalId" + :title="$options.i18n.CONFIRM_DANGER_MODAL_TITLE" + :action-primary="actionPrimary" + @primary="$emit('confirm')" + > + <gl-alert + v-if="confirmDangerMessage" + variant="danger" + data-testid="confirm-danger-message" + :dismissible="false" + class="gl-mb-4" + > + {{ confirmDangerMessage }} + </gl-alert> + <p data-testid="confirm-danger-warning">{{ $options.i18n.CONFIRM_DANGER_WARNING }}</p> + <p data-testid="confirm-danger-phrase"> + <gl-sprintf :message="$options.i18n.CONFIRM_DANGER_PHRASE_TEXT"> + <template #phrase_code> + <code>{{ phrase }}</code> + </template> + </gl-sprintf> + </p> + <gl-form-group :state="isValid" :invalid-feedback="$options.i18n.CONFIRM_DANGER_MODAL_ERROR"> + <gl-form-input + id="confirm_name_input" + v-model="confirmationPhrase" + class="form-control" + data-testid="confirm-danger-input" + type="text" + /> + </gl-form-group> + </gl-modal> +</template> diff --git a/app/assets/javascripts/vue_shared/components/confirm_danger/constants.js b/app/assets/javascripts/vue_shared/components/confirm_danger/constants.js new file mode 100644 index 00000000000..fa44a9be411 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/confirm_danger/constants.js @@ -0,0 +1,12 @@ +import { __ } from '~/locale'; + +export const CONFIRM_DANGER_MODAL_ID = 'confirm-danger-modal'; +export const CONFIRM_DANGER_MODAL_TITLE = __('Confirmation required'); +export const CONFIRM_DANGER_MODAL_ERROR = __('Confirmation required'); +export const CONFIRM_DANGER_MODAL_BUTTON = __('Confirm'); +export const CONFIRM_DANGER_WARNING = __( + 'This action can lead to data loss. To prevent accidental actions we ask you to confirm your intention.', +); +export const CONFIRM_DANGER_PHRASE_TEXT = __( + 'Please type %{phrase_code} to proceed or close this modal to cancel.', +); diff --git a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue index ea507017caa..9cf8638f3cb 100644 --- a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue +++ b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue @@ -1,5 +1,8 @@ <script> -import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui'; +import { + GlDeprecatedSkeletonLoading as GlSkeletonLoading, + GlSafeHtmlDirective as SafeHtml, +} from '@gitlab/ui'; import $ from 'jquery'; import '~/behaviors/markdown/render_gfm'; import { forEach, escape } from 'lodash'; @@ -13,6 +16,9 @@ export default { components: { GlSkeletonLoading, }, + directives: { + SafeHtml, + }, props: { content: { type: String, @@ -103,6 +109,7 @@ export default { } }, }, + safeHtmlConfig: { ADD_TAGS: ['gl-emoji', 'use'] }, }; </script> @@ -111,8 +118,8 @@ export default { <gl-skeleton-loading v-if="isLoading" /> <div v-else + v-safe-html:[$options.safeHtmlConfig]="previewContent" class="md gl-ml-auto gl-mr-auto" - v-html="previewContent /* eslint-disable-line vue/no-v-html */" ></div> </div> </template> diff --git a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_widget/dropdown_widget.vue b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_widget/dropdown_widget.vue index 7859ef85dd8..153b0981813 100644 --- a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_widget/dropdown_widget.vue +++ b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_widget/dropdown_widget.vue @@ -45,7 +45,7 @@ export default { default: false, }, selected: { - type: Object, + type: [Object, Array], required: false, default: () => {}, }, @@ -54,6 +54,11 @@ export default { required: false, default: '', }, + allowMultiselect: { + type: Boolean, + required: false, + default: false, + }, }, computed: { isSearchEmpty() { @@ -66,8 +71,14 @@ export default { methods: { selectOption(option) { this.$emit('set-option', option || null); + if (!this.allowMultiselect) { + this.$refs.dropdown.hide(); + } }, isSelected(option) { + if (Array.isArray(this.selected)) { + return this.selected.some((label) => label.title === option.title); + } return ( this.selected && ((option.name && this.selected.name === option.name) || @@ -78,7 +89,7 @@ export default { this.$refs.dropdown.show(); }, setFocus() { - this.$refs.search.focusInput(); + this.$refs.search?.focusInput(); }, setSearchTerm(search) { this.$emit('set-search', search); @@ -108,56 +119,60 @@ export default { @shown="setFocus" > <template #header> - <gl-search-box-by-type - ref="search" - :value="searchTerm" - :placeholder="searchText" - class="js-dropdown-input-field" - @input="setSearchTerm" - /> + <slot name="header"> + <gl-search-box-by-type + ref="search" + :value="searchTerm" + :placeholder="searchText" + class="js-dropdown-input-field" + @input="setSearchTerm" + /> + </slot> </template> - <gl-dropdown-form class="gl-relative gl-min-h-7"> - <gl-loading-icon - v-if="isLoading" - size="md" - class="gl-absolute gl-left-0 gl-top-0 gl-right-0" - /> - <template v-else> - <template v-if="isSearchEmpty && presetOptions.length > 0"> + <slot name="default"> + <gl-dropdown-form class="gl-relative gl-min-h-7" data-qa-selector="labels_dropdown_content"> + <gl-loading-icon + v-if="isLoading" + size="md" + class="gl-absolute gl-left-0 gl-top-0 gl-right-0" + /> + <template v-else> + <template v-if="isSearchEmpty && presetOptions.length > 0"> + <gl-dropdown-item + v-for="option in presetOptions" + :key="option.id" + :is-checked="isSelected(option)" + :is-check-centered="true" + :is-check-item="true" + @click.native.capture.stop="selectOption(option)" + > + <slot name="preset-item" :item="option"> + {{ option.title }} + </slot> + </gl-dropdown-item> + <gl-dropdown-divider /> + </template> <gl-dropdown-item - v-for="option in presetOptions" + v-for="option in options" :key="option.id" :is-checked="isSelected(option)" :is-check-centered="true" :is-check-item="true" - @click="selectOption(option)" + :avatar-url="avatarUrl(option)" + :secondary-text="secondaryText(option)" + data-testid="unselected-option" + @click.native.capture.stop="selectOption(option)" > - <slot name="preset-item" :item="option"> + <slot name="item" :item="option"> {{ option.title }} </slot> </gl-dropdown-item> - <gl-dropdown-divider /> + <gl-dropdown-item v-if="noOptionsFound" class="gl-pl-6!"> + {{ $options.i18n.noMatchingResults }} + </gl-dropdown-item> </template> - <gl-dropdown-item - v-for="option in options" - :key="option.id" - :is-checked="isSelected(option)" - :is-check-centered="true" - :is-check-item="true" - :avatar-url="avatarUrl(option)" - :secondary-text="secondaryText(option)" - data-testid="unselected-option" - @click="selectOption(option)" - > - <slot name="item" :item="option"> - {{ option.title }} - </slot> - </gl-dropdown-item> - <gl-dropdown-item v-if="noOptionsFound" class="gl-pl-6!"> - {{ $options.i18n.noMatchingResults }} - </gl-dropdown-item> - </template> - </gl-dropdown-form> + </gl-dropdown-form> + </slot> <template #footer> <slot name="footer"></slot> </template> diff --git a/app/assets/javascripts/vue_shared/components/file_icon.vue b/app/assets/javascripts/vue_shared/components/file_icon.vue index 276fb35b51f..adf34f822ed 100644 --- a/app/assets/javascripts/vue_shared/components/file_icon.vue +++ b/app/assets/javascripts/vue_shared/components/file_icon.vue @@ -86,7 +86,7 @@ export default { <template> <span> <gl-loading-icon v-if="loading" size="sm" :inline="true" /> - <gl-icon v-else-if="isSymlink" name="symlink" :size="size" use-deprecated-sizes /> + <gl-icon v-else-if="isSymlink" name="symlink" :size="size" /> <svg v-else-if="!folder" :key="spriteHref" :class="[iconSizeClass, cssClasses]"> <use v-bind="{ 'xlink:href': spriteHref }" /> </svg> 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 1df65d0a666..d9290e86bca 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 @@ -53,6 +53,7 @@ export const TOKEN_TITLE_ASSIGNEE = __('Assignee'); export const TOKEN_TITLE_MILESTONE = __('Milestone'); export const TOKEN_TITLE_LABEL = __('Label'); export const TOKEN_TITLE_TYPE = __('Type'); +export const TOKEN_TITLE_RELEASE = __('Release'); export const TOKEN_TITLE_MY_REACTION = __('My-Reaction'); export const TOKEN_TITLE_CONFIDENTIAL = __('Confidential'); export const TOKEN_TITLE_ITERATION = __('Iteration'); 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 9dc5c5db276..7c1828f2294 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 @@ -171,15 +171,17 @@ export default { * This watcher listens for updates to `filterValue` on * such instances. :( */ - filterValue(value) { - const [firstVal] = value; + filterValue(newValue, oldValue) { + const [firstVal] = newValue; if ( !this.initialRender && - value.length === 1 && + newValue.length === 1 && firstVal.type === 'filtered-search-term' && !firstVal.value.data ) { - this.$emit('onFilter', []); + const filtersCleared = + oldValue[0].type !== 'filtered-search-term' || oldValue[0].value.data !== ''; + this.$emit('onFilter', [], filtersCleared); } // Set initial render flag to false 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 ae5d3965de1..b3b3d5c88c6 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 @@ -1,6 +1,6 @@ <script> import { GlAvatar, GlFilteredSearchSuggestion } from '@gitlab/ui'; - +import { compact } from 'lodash'; import createFlash from '~/flash'; import { __ } from '~/locale'; @@ -59,8 +59,10 @@ export default { .then((res) => { // We'd want to avoid doing this check but // users.json and /groups/:id/members & /projects/:id/users - // return response differently. - this.authors = Array.isArray(res) ? res : res.data; + // return response differently + + // TODO: rm when completed https://gitlab.com/gitlab-org/gitlab/-/issues/345756 + this.authors = Array.isArray(res) ? compact(res) : compact(res.data); }) .catch(() => createFlash({ diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/iteration_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/iteration_token.vue index c1d1bc7da91..aff93ebc9c0 100644 --- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/iteration_token.vue +++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/iteration_token.vue @@ -1,16 +1,21 @@ <script> -import { GlFilteredSearchSuggestion } from '@gitlab/ui'; +import { GlDropdownDivider, GlDropdownSectionHeader, GlFilteredSearchSuggestion } from '@gitlab/ui'; import createFlash from '~/flash'; import { getIdFromGraphQLId } from '~/graphql_shared/utils'; import { __ } from '~/locale'; import BaseToken from '~/vue_shared/components/filtered_search_bar/tokens/base_token.vue'; +import { formatDate } from '~/lib/utils/datetime_utility'; +import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { DEFAULT_ITERATIONS } from '../constants'; export default { components: { BaseToken, + GlDropdownDivider, + GlDropdownSectionHeader, GlFilteredSearchSuggestion, }, + mixins: [glFeatureFlagMixin()], props: { active: { type: Boolean, @@ -40,6 +45,27 @@ export default { getActiveIteration(iterations, data) { return iterations.find((iteration) => this.getValue(iteration) === data); }, + groupIterationsByCadence(iterations) { + const cadences = []; + iterations.forEach((iteration) => { + if (!iteration.iterationCadence) { + return; + } + const { title } = iteration.iterationCadence; + const cadenceIteration = { + id: iteration.id, + title: iteration.title, + period: this.getIterationPeriod(iteration), + }; + const cadence = cadences.find((cad) => cad.title === title); + if (cadence) { + cadence.iterations.push(cadenceIteration); + } else { + cadences.push({ title, iterations: [cadenceIteration] }); + } + }); + return cadences; + }, fetchIterations(searchTerm) { this.loading = true; this.config @@ -57,6 +83,16 @@ export default { getValue(iteration) { return String(getIdFromGraphQLId(iteration.id)); }, + /** + * TODO: https://gitlab.com/gitlab-org/gitlab/-/issues/344619 + * This method also exists as a utility function in ee/../iterations/utils.js + * Remove the duplication when iteration token is moved to EE. + */ + getIterationPeriod({ startDate, dueDate }) { + const start = formatDate(startDate, 'mmm d, yyyy', true); + const due = formatDate(dueDate, 'mmm d, yyyy', true); + return `${start} - ${due}`; + }, }, }; </script> @@ -77,13 +113,26 @@ export default { {{ activeTokenValue ? activeTokenValue.title : inputValue }} </template> <template #suggestions-list="{ suggestions }"> - <gl-filtered-search-suggestion - v-for="iteration in suggestions" - :key="iteration.id" - :value="getValue(iteration)" - > - {{ iteration.title }} - </gl-filtered-search-suggestion> + <template v-for="(cadence, index) in groupIterationsByCadence(suggestions)"> + <gl-dropdown-divider v-if="index !== 0" :key="index" /> + <gl-dropdown-section-header + :key="cadence.title" + class="gl-overflow-hidden" + :title="cadence.title" + > + {{ cadence.title }} + </gl-dropdown-section-header> + <gl-filtered-search-suggestion + v-for="iteration in cadence.iterations" + :key="iteration.id" + :value="getValue(iteration)" + > + {{ iteration.title }} + <div v-if="glFeatures.iterationCadences" class="gl-text-gray-400"> + {{ iteration.period }} + </div> + </gl-filtered-search-suggestion> + </template> </template> </base-token> </template> diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/release_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/release_token.vue new file mode 100644 index 00000000000..f353cc3a765 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/release_token.vue @@ -0,0 +1,85 @@ +<script> +import { GlFilteredSearchSuggestion } from '@gitlab/ui'; +import createFlash from '~/flash'; +import { __ } from '~/locale'; +import BaseToken from '~/vue_shared/components/filtered_search_bar/tokens/base_token.vue'; +import { DEFAULT_NONE_ANY } from '../constants'; + +export default { + components: { + BaseToken, + GlFilteredSearchSuggestion, + }, + props: { + active: { + type: Boolean, + required: true, + }, + config: { + type: Object, + required: true, + }, + value: { + type: Object, + required: true, + }, + }, + data() { + return { + releases: this.config.initialReleases || [], + loading: false, + }; + }, + computed: { + defaultReleases() { + return this.config.defaultReleases || DEFAULT_NONE_ANY; + }, + }, + methods: { + getActiveRelease(releases, data) { + return releases.find((release) => release.tag.toLowerCase() === data.toLowerCase()); + }, + fetchReleases(searchTerm) { + this.loading = true; + this.config + .fetchReleases(searchTerm) + .then((response) => { + this.releases = response; + }) + .catch(() => { + createFlash({ message: __('There was a problem fetching releases.') }); + }) + .finally(() => { + this.loading = false; + }); + }, + }, +}; +</script> + +<template> + <base-token + :active="active" + :config="config" + :value="value" + :default-suggestions="defaultReleases" + :suggestions="releases" + :suggestions-loading="loading" + :get-active-token-value="getActiveRelease" + @fetch-suggestions="fetchReleases" + v-on="$listeners" + > + <template #view="{ viewTokenProps: { inputValue, activeTokenValue } }"> + {{ activeTokenValue ? activeTokenValue.tag : inputValue }} + </template> + <template #suggestions-list="{ suggestions }"> + <gl-filtered-search-suggestion + v-for="release in suggestions" + :key="release.id" + :value="release.tag" + > + {{ release.tag }} + </gl-filtered-search-suggestion> + </template> + </base-token> +</template> diff --git a/app/assets/javascripts/vue_shared/components/header_ci_component.vue b/app/assets/javascripts/vue_shared/components/header_ci_component.vue index 41613bb3307..6ace0bd88f8 100644 --- a/app/assets/javascripts/vue_shared/components/header_ci_component.vue +++ b/app/assets/javascripts/vue_shared/components/header_ci_component.vue @@ -1,10 +1,16 @@ <script> -import { GlTooltipDirective, GlLink, GlButton, GlTooltip, GlSafeHtmlDirective } from '@gitlab/ui'; +import { + GlTooltipDirective, + GlButton, + GlSafeHtmlDirective, + GlAvatarLink, + GlAvatarLabeled, +} from '@gitlab/ui'; +import { isGid, getIdFromGraphQLId } from '~/graphql_shared/utils'; import { glEmojiTag } from '../../emoji'; import { __, sprintf } from '../../locale'; import CiIconBadge from './ci_badge_link.vue'; import TimeagoTooltip from './time_ago_tooltip.vue'; -import UserAvatarImage from './user_avatar/user_avatar_image.vue'; /** * Renders header component for job and pipeline page based on UI mockups @@ -17,10 +23,9 @@ export default { components: { CiIconBadge, TimeagoTooltip, - UserAvatarImage, - GlLink, GlButton, - GlTooltip, + GlAvatarLink, + GlAvatarLabeled, }, directives: { GlTooltip: GlTooltipDirective, @@ -94,6 +99,9 @@ export default { return this.itemName; }, + userId() { + return isGid(this.user?.id) ? getIdFromGraphQLId(this.user?.id) : this.user?.id; + }, }, methods: { @@ -124,24 +132,32 @@ export default { {{ __('by') }} <template v-if="user"> - <gl-link - v-gl-tooltip - :href="userPath" - :title="user.email" - class="js-user-link commit-committer-link" + <gl-avatar-link + :data-user-id="userId" + :data-username="user.username" + :data-name="user.name" + :href="user.webUrl" + target="_blank" + class="js-user-link gl-vertical-align-middle gl-mx-2 gl-align-items-center" > - <user-avatar-image :img-src="avatarUrl" :img-alt="userAvatarAltText" :size="24" /> - {{ user.name }} - </gl-link> - <gl-tooltip v-if="message" :target="() => $refs[$options.EMOJI_REF]"> - {{ message }} - </gl-tooltip> - <span - v-if="statusTooltipHTML" - :ref="$options.EMOJI_REF" - v-safe-html:[$options.safeHtmlConfig]="statusTooltipHTML" - :data-testid="message" - ></span> + <gl-avatar-labeled + :size="24" + :src="avatarUrl" + :label="user.name" + class="gl-display-none gl-sm-display-inline-flex gl-mx-1" + /> + <strong class="author gl-display-inline gl-sm-display-none!">@{{ user.username }}</strong> + <gl-tooltip v-if="message" :target="() => $refs[$options.EMOJI_REF]"> + {{ message }} + </gl-tooltip> + <span + v-if="statusTooltipHTML" + :ref="$options.EMOJI_REF" + v-safe-html:[$options.safeHtmlConfig]="statusTooltipHTML" + class="gl-ml-2" + :data-testid="message" + ></span> + </gl-avatar-link> </template> </section> diff --git a/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue b/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue index f9ae59567b2..648e9c9462f 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue @@ -1,11 +1,11 @@ <script> -import { GlButton, GlLoadingIcon, GlTooltipDirective, GlIcon } from '@gitlab/ui'; +import { GlBadge, GlButton, GlLoadingIcon, GlTooltipDirective, GlIcon } from '@gitlab/ui'; import { isLoggedIn } from '~/lib/utils/common_utils'; import { __ } from '~/locale'; import ApplySuggestion from './apply_suggestion.vue'; export default { - components: { GlIcon, GlButton, GlLoadingIcon, ApplySuggestion }, + components: { GlBadge, GlIcon, GlButton, GlLoadingIcon, ApplySuggestion }, directives: { 'gl-tooltip': GlTooltipDirective }, props: { batchSuggestionsCount: { @@ -134,8 +134,14 @@ export default { <gl-icon name="question-o" css-classes="link-highlight" /> </a> </div> - <div v-if="isApplied" class="badge badge-success">{{ __('Applied') }}</div> - <div v-else-if="isApplying" class="d-flex align-items-center text-secondary"> + <gl-badge v-if="isApplied" variant="success" data-qa-selector="applied_badge"> + {{ __('Applied') }} + </gl-badge> + <div + v-else-if="isApplying" + class="d-flex align-items-center text-secondary" + data-qa-selector="applying_badge" + > <gl-loading-icon size="sm" class="d-flex-center mr-2" /> <span>{{ applyingSuggestionsMessage }}</span> </div> diff --git a/app/assets/javascripts/vue_shared/components/notes/system_note.vue b/app/assets/javascripts/vue_shared/components/notes/system_note.vue index 755e6f1f224..8877cfa39fb 100644 --- a/app/assets/javascripts/vue_shared/components/notes/system_note.vue +++ b/app/assets/javascripts/vue_shared/components/notes/system_note.vue @@ -26,6 +26,7 @@ import { import $ from 'jquery'; import { mapGetters, mapActions, mapState } from 'vuex'; import descriptionVersionHistoryMixin from 'ee_else_ce/notes/mixins/description_version_history'; +import axios from '~/lib/utils/axios_utils'; import { __ } from '~/locale'; import initMRPopovers from '~/mr_popover/'; import noteHeader from '~/notes/components/note_header.vue'; @@ -61,6 +62,9 @@ export default { data() { return { expanded: false, + lines: [], + showLines: false, + loadingDiff: false, }; }, computed: { @@ -94,10 +98,25 @@ export default { }, methods: { ...mapActions(['fetchDescriptionVersion', 'softDeleteDescriptionVersion']), + async toggleDiff() { + this.showLines = !this.showLines; + + if (!this.lines.length) { + this.loadingDiff = true; + const { data } = await axios.get(this.note.outdated_line_change_path); + + this.lines = data.map((l) => ({ + ...l, + rich_text: l.rich_text.replace(/^[+ -]/, ''), + })); + this.loadingDiff = false; + } + }, }, safeHtmlConfig: { ADD_TAGS: ['use'], // to support icon SVGs }, + userColorSchemeClass: window.gon.user_color_scheme, }; </script> @@ -112,15 +131,28 @@ export default { <div class="note-header"> <note-header :author="note.author" :created-at="note.created_at" :note-id="note.id"> <span v-safe-html="actionTextHtml"></span> - <template v-if="canSeeDescriptionVersion" #extra-controls> + <template + v-if="canSeeDescriptionVersion || note.outdated_line_change_path" + #extra-controls + > · <gl-button + v-if="canSeeDescriptionVersion" variant="link" :icon="descriptionVersionToggleIcon" data-testid="compare-btn" @click="toggleDescriptionVersion" >{{ __('Compare with previous version') }}</gl-button > + <gl-button + v-if="note.outdated_line_change_path" + :icon="showLines ? 'chevron-up' : 'chevron-down'" + variant="link" + data-testid="outdated-lines-change-btn" + @click="toggleDiff" + > + {{ __('Compare changes') }} + </gl-button> </template> </note-header> </div> @@ -154,6 +186,37 @@ export default { @click="deleteDescriptionVersion" /> </div> + <div + v-if="lines.length && showLines" + class="diff-content gl-border-solid gl-border-1 gl-border-gray-200 gl-mt-4 gl-rounded-small gl-overflow-hidden" + > + <table + :class="$options.userColorSchemeClass" + class="code js-syntax-highlight" + data-testid="outdated-lines" + > + <tr v-for="line in lines" v-once :key="line.line_code" class="line_holder"> + <td + :class="line.type" + class="diff-line-num old_line gl-border-bottom-0! gl-border-top-0!" + > + {{ line.old_line }} + </td> + <td + :class="line.type" + class="diff-line-num new_line gl-border-bottom-0! gl-border-top-0!" + > + {{ line.new_line }} + </td> + <td + :class="line.type" + class="line_content gl-display-table-cell!" + v-html="line.rich_text /* eslint-disable-line vue/no-v-html */" + ></td> + </tr> + </table> + </div> + <gl-skeleton-loading v-else-if="showLines" class="gl-mt-4" /> </div> </div> </timeline-entry-item> diff --git a/app/assets/javascripts/vue_shared/components/registry/title_area.vue b/app/assets/javascripts/vue_shared/components/registry/title_area.vue index 4b21ec0330a..d108d8d689d 100644 --- a/app/assets/javascripts/vue_shared/components/registry/title_area.vue +++ b/app/assets/javascripts/vue_shared/components/registry/title_area.vue @@ -69,20 +69,23 @@ export default { /> <div class="gl-display-flex gl-flex-direction-column"> - <h1 class="gl-font-size-h1 gl-mt-3 gl-mb-2" data-testid="title"> + <h2 class="gl-font-size-h1 gl-mt-3 gl-mb-0" data-testid="title"> <slot name="title">{{ title }}</slot> - </h1> + </h2> <div v-if="$slots['sub-header']" - class="gl-display-flex gl-align-items-center gl-text-gray-500 gl-mt-1" + class="gl-display-flex gl-align-items-center gl-text-gray-500 gl-mt-3" > <slot name="sub-header"></slot> </div> </div> </div> - <div class="gl-display-flex gl-flex-wrap gl-align-items-center gl-mt-3"> + <div + v-if="metadataSlots.length > 0" + class="gl-display-flex gl-flex-wrap gl-align-items-center gl-mt-3" + > <template v-if="!metadataLoading"> <div v-for="(row, metadataIndex) in metadataSlots" diff --git a/app/assets/javascripts/vue_shared/components/runner_instructions/constants.js b/app/assets/javascripts/vue_shared/components/runner_instructions/constants.js index facace0d809..34845e3d9e4 100644 --- a/app/assets/javascripts/vue_shared/components/runner_instructions/constants.js +++ b/app/assets/javascripts/vue_shared/components/runner_instructions/constants.js @@ -2,6 +2,8 @@ import { s__ } from '~/locale'; export const PLATFORMS_WITHOUT_ARCHITECTURES = ['docker', 'kubernetes']; +export const REGISTRATION_TOKEN_PLACEHOLDER = '$REGISTRATION_TOKEN'; + export const INSTRUCTIONS_PLATFORMS_WITHOUT_ARCHITECTURES = { docker: { instructions: s__( diff --git a/app/assets/javascripts/vue_shared/components/runner_instructions/runner_instructions_modal.vue b/app/assets/javascripts/vue_shared/components/runner_instructions/runner_instructions_modal.vue index d55c93fd146..d5493aa5a66 100644 --- a/app/assets/javascripts/vue_shared/components/runner_instructions/runner_instructions_modal.vue +++ b/app/assets/javascripts/vue_shared/components/runner_instructions/runner_instructions_modal.vue @@ -16,8 +16,9 @@ import { isEmpty } from 'lodash'; import { __, s__ } from '~/locale'; import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue'; import { - PLATFORMS_WITHOUT_ARCHITECTURES, INSTRUCTIONS_PLATFORMS_WITHOUT_ARCHITECTURES, + PLATFORMS_WITHOUT_ARCHITECTURES, + REGISTRATION_TOKEN_PLACEHOLDER, } from './constants'; import getRunnerPlatformsQuery from './graphql/queries/get_runner_platforms.query.graphql'; import getRunnerSetupInstructionsQuery from './graphql/queries/get_runner_setup.query.graphql'; @@ -41,7 +42,13 @@ export default { props: { modalId: { type: String, - required: true, + required: false, + default: 'runner-instructions-modal', + }, + registrationToken: { + type: String, + required: false, + default: null, }, }, apollo: { @@ -117,8 +124,20 @@ export default { runnerInstallationLink() { return INSTRUCTIONS_PLATFORMS_WITHOUT_ARCHITECTURES[this.selectedPlatformName]?.link; }, + registerInstructionsWithToken() { + const { registerInstructions } = this.instructions || {}; + + if (this.registrationToken) { + return registerInstructions.replace(REGISTRATION_TOKEN_PLACEHOLDER, this.registrationToken); + } + + return registerInstructions; + }, }, methods: { + show() { + this.$refs.modal.show(); + }, selectPlatform(platform) { this.selectedPlatform = platform; @@ -158,9 +177,11 @@ export default { </script> <template> <gl-modal + ref="modal" :modal-id="modalId" :title="$options.i18n.installARunner" :action-secondary="$options.closeButton" + v-bind="$attrs" > <gl-alert v-if="showAlert" variant="danger" @dismiss="toggleAlert(false)"> {{ $options.i18n.fetchError }} @@ -243,11 +264,11 @@ export default { <pre class="gl-bg-gray gl-flex-grow-1 gl-white-space-pre-line" data-testid="register-command" - >{{ instructions.registerInstructions }}</pre + >{{ registerInstructionsWithToken }}</pre > <modal-copy-button :title="$options.i18n.copyInstructions" - :text="instructions.registerInstructions" + :text="registerInstructionsWithToken" :modal-id="$options.modalId" css-classes="gl-align-self-start gl-ml-2 gl-mt-2" category="tertiary" diff --git a/app/assets/javascripts/vue_shared/components/settings/settings_block.vue b/app/assets/javascripts/vue_shared/components/settings/settings_block.vue index e75fedbb1d7..e68f0f31c13 100644 --- a/app/assets/javascripts/vue_shared/components/settings/settings_block.vue +++ b/app/assets/javascripts/vue_shared/components/settings/settings_block.vue @@ -24,10 +24,13 @@ export default { }, }, data() { + const forceOpen = !this.collapsible || this.defaultExpanded; return { // Non-collapsible sections should always be expanded. // For collapsible sections, fall back to defaultExpanded. - sectionExpanded: !this.collapsible || this.defaultExpanded, + sectionExpanded: forceOpen, + initialised: forceOpen, + animating: false, }; }, computed: { @@ -53,7 +56,12 @@ export default { toggleSectionExpanded() { this.sectionExpanded = !this.sectionExpanded; + if (!this.initialised) { + this.initialised = true; + } + if (this.sectionExpanded) { + this.animating = true; this.$refs.settingsContent.focus(); } }, @@ -68,7 +76,10 @@ export default { </script> <template> - <section class="settings" :class="{ 'no-animate': !slideAnimated, expanded: sectionExpanded }"> + <section + class="settings" + :class="{ 'no-animate': !slideAnimated, expanded: sectionExpanded, animating }" + > <div class="settings-header"> <h4> <span @@ -103,12 +114,14 @@ export default { </p> </div> <div + v-show="initialised" :id="settingsContentId" ref="settingsContent" :aria-labelledby="settingsLabelId" tabindex="-1" role="region" class="settings-content" + @animationend="animating = false" > <slot></slot> </div> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/collapsed_calendar_icon.vue b/app/assets/javascripts/vue_shared/components/sidebar/collapsed_calendar_icon.vue index 6511c8d8c31..460a10e08ed 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/collapsed_calendar_icon.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/collapsed_calendar_icon.vue @@ -40,7 +40,7 @@ export default { </script> <template> - <div v-gl-tooltip.left.viewport :class="containerClass" :title="tooltipText" @click="click"> + <div v-gl-tooltip.left.viewport="tooltipText" :class="containerClass" @click="click"> <gl-icon v-if="showIcon" name="calendar" /> <slot> <span> {{ text }} </span> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents.vue index d80b66fd9be..399db978b60 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents.vue @@ -36,6 +36,7 @@ export default { <template> <div class="labels-select-dropdown-contents gl-w-full gl-my-2 gl-py-3 gl-rounded-base gl-absolute" + data-testid="labels-select-dropdown-contents" data-qa-selector="labels_dropdown_content" :style="directionStyle" > diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_value_collapsed.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_value_collapsed.vue index 122250d1ce7..8a26c4a6618 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_value_collapsed.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_value_collapsed.vue @@ -43,12 +43,7 @@ export default { </script> <template> - <div - v-gl-tooltip.left.viewport - :title="labelsList" - class="sidebar-collapsed-icon" - @click="handleClick" - > + <div v-gl-tooltip.left.viewport="labelsList" class="sidebar-collapsed-icon" @click="handleClick"> <gl-icon name="labels" /> <span>{{ labels.length }}</span> </div> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/mutations.js b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/mutations.js index 0ea22eb7aea..9e64f03fe84 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/mutations.js +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/mutations.js @@ -1,5 +1,4 @@ import { isScopedLabel, scopedLabelKey } from '~/lib/utils/common_utils'; -import { SCOPED_LABEL_DELIMITER } from '~/vue_shared/components/sidebar/labels_select_widget/constants'; import { DropdownVariant } from '../constants'; import * as types from './mutation_types'; @@ -67,9 +66,11 @@ export default { } if (isScopedLabel(candidateLabel)) { - const scopedKeyWithDelimiter = `${scopedLabelKey(candidateLabel)}${SCOPED_LABEL_DELIMITER}`; const currentActiveScopedLabel = state.labels.find( - ({ title }) => title.startsWith(scopedKeyWithDelimiter) && title !== candidateLabel.title, + ({ set, title }) => + set && + title !== candidateLabel.title && + scopedLabelKey({ title }) === scopedLabelKey(candidateLabel), ); if (currentActiveScopedLabel) { diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/constants.js b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/constants.js index 389eb174c0e..cd671b4d8f5 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/constants.js +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/constants.js @@ -1,7 +1,13 @@ export const SCOPED_LABEL_DELIMITER = '::'; +export const DEBOUNCE_DROPDOWN_DELAY = 200; export const DropdownVariant = { Sidebar: 'sidebar', Standalone: 'standalone', Embedded: 'embedded', }; + +export const LabelType = { + group: 'group', + project: 'project', +}; 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 3ee0baf8812..f7485de0342 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 @@ -1,20 +1,25 @@ <script> import { GlButton, GlDropdown, GlDropdownItem, GlLink } from '@gitlab/ui'; +import { debounce } from 'lodash'; +import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants'; import { __, s__, sprintf } from '~/locale'; import DropdownContentsCreateView from './dropdown_contents_create_view.vue'; import DropdownContentsLabelsView from './dropdown_contents_labels_view.vue'; +import DropdownFooter from './dropdown_footer.vue'; +import DropdownHeader from './dropdown_header.vue'; import { isDropdownVariantStandalone, isDropdownVariantSidebar } from './utils'; export default { components: { DropdownContentsLabelsView, DropdownContentsCreateView, + DropdownHeader, + DropdownFooter, GlButton, GlDropdown, GlDropdownItem, GlLink, }, - inject: ['allowLabelCreate', 'labelsManagePath'], props: { labelsCreateTitle: { type: String, @@ -48,10 +53,6 @@ export default { type: String, required: true, }, - issuableType: { - type: String, - required: true, - }, isVisible: { type: Boolean, required: false, @@ -61,10 +62,17 @@ export default { type: String, required: true, }, + workspaceType: { + type: String, + required: true, + }, attrWorkspacePath: { type: String, - required: false, - default: undefined, + required: true, + }, + labelCreateType: { + type: String, + required: true, }, }, data() { @@ -72,6 +80,7 @@ export default { showDropdownContentsCreateView: false, localSelectedLabels: [...this.selectedLabels], isDirty: false, + searchKey: '', }; }, computed: { @@ -113,15 +122,24 @@ export default { if (newVal) { this.$refs.dropdown.show(); this.isDirty = false; + this.localSelectedLabels = this.selectedLabels; } else { this.$refs.dropdown.hide(); this.setLabels(); } }, selectedLabels(newVal) { - this.localSelectedLabels = newVal; + if (!this.isDirty) { + this.localSelectedLabels = newVal; + } }, }, + created() { + this.debouncedSearchKeyUpdate = debounce(this.setSearchKey, DEFAULT_DEBOUNCE_AND_THROTTLE_MS); + }, + beforeDestroy() { + this.debouncedSearchKeyUpdate.cancel(); + }, methods: { toggleDropdownContentsCreateView() { this.showDropdownContentsCreateView = !this.showDropdownContentsCreateView; @@ -140,10 +158,20 @@ export default { this.$emit('setLabels', this.localSelectedLabels); }, handleDropdownHide() { + this.$emit('closeDropdown'); if (!isDropdownVariantSidebar(this.variant)) { this.setLabels(); } }, + setSearchKey(value) { + this.searchKey = value; + }, + setFocus() { + this.$refs.header.focusInput(); + }, + showDropdown() { + this.$refs.dropdown.show(); + }, }, }; </script> @@ -153,62 +181,44 @@ export default { ref="dropdown" :text="buttonText" class="gl-w-full gl-mt-2" + data-testid="labels-select-dropdown-contents" data-qa-selector="labels_dropdown_content" @hide="handleDropdownHide" + @shown="setFocus" > <template #header> - <div + <dropdown-header v-if="!isStandalone" - class="dropdown-title gl-display-flex gl-align-items-center gl-pt-0 gl-pb-3!" - data-testid="dropdown-header" - > - <gl-button - v-if="showDropdownContentsCreateView" - :aria-label="__('Go back')" - variant="link" - size="small" - class="js-btn-back dropdown-header-button gl-p-0" - icon="arrow-left" - data-testid="go-back-button" - @click.stop="toggleDropdownContent" - /> - <span class="gl-flex-grow-1">{{ dropdownTitle }}</span> - <gl-button - :aria-label="__('Close')" - variant="link" - size="small" - class="dropdown-header-button gl-p-0!" - icon="close" - data-testid="close-button" - @click="$emit('closeDropdown')" - /> - </div> + ref="header" + v-model="searchKey" + :labels-create-title="labelsCreateTitle" + :labels-list-title="labelsListTitle" + :show-dropdown-contents-create-view="showDropdownContentsCreateView" + @toggleDropdownContentsCreateView="toggleDropdownContent" + @closeDropdown="$emit('closeDropdown')" + @input="debouncedSearchKeyUpdate" + /> </template> <template #default> <component :is="dropdownContentsView" v-model="localSelectedLabels" - :selected-labels="selectedLabels" + :search-key="searchKey" :allow-multiselect="allowMultiselect" - :issuable-type="issuableType" :full-path="fullPath" + :workspace-type="workspaceType" :attr-workspace-path="attrWorkspacePath" - @hideCreateView="toggleDropdownContentsCreateView" + :label-create-type="labelCreateType" + @hideCreateView="toggleDropdownContent" /> </template> <template #footer> - <div v-if="showDropdownFooter" data-testid="dropdown-footer"> - <gl-dropdown-item - v-if="allowLabelCreate" - data-testid="create-label-button" - @click.capture.native.stop="toggleDropdownContent" - > - {{ footerCreateLabelTitle }} - </gl-dropdown-item> - <gl-dropdown-item :href="labelsManagePath" @click.capture.native.stop> - {{ footerManageLabelTitle }} - </gl-dropdown-item> - </div> + <dropdown-footer + v-if="showDropdownFooter" + :footer-create-label-title="footerCreateLabelTitle" + :footer-manage-label-title="footerManageLabelTitle" + @toggleDropdownContentsCreateView="toggleDropdownContent" + /> </template> </gl-dropdown> </template> 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 a2ed08e6b28..da626a21b14 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 @@ -2,10 +2,10 @@ import { GlTooltipDirective, GlButton, GlFormInput, GlLink, GlLoadingIcon } from '@gitlab/ui'; import produce from 'immer'; import createFlash from '~/flash'; -import { IssuableType } from '~/issue_show/constants'; import { __ } from '~/locale'; -import { labelsQueries } from '~/sidebar/constants'; +import { workspaceLabelsQueries } from '~/sidebar/constants'; import createLabelMutation from './graphql/create_label.mutation.graphql'; +import { LabelType } from './constants'; const errorMessage = __('Error creating label.'); @@ -20,18 +20,21 @@ export default { GlTooltip: GlTooltipDirective, }, props: { - issuableType: { + fullPath: { type: String, required: true, }, - fullPath: { + attrWorkspacePath: { type: String, required: true, }, - attrWorkspacePath: { + labelCreateType: { + type: String, + required: true, + }, + workspaceType: { type: String, - required: false, - default: undefined, + required: true, }, }, data() { @@ -50,25 +53,13 @@ export default { return Object.keys(colorsMap).map((color) => ({ [color]: colorsMap[color] })); }, mutationVariables() { - if (this.issuableType === IssuableType.Epic) { - return { - title: this.labelTitle, - color: this.selectedColor, - groupPath: this.fullPath, - }; - } + const attributePath = this.labelCreateType === LabelType.group ? 'groupPath' : 'projectPath'; - return this.attrWorkspacePath !== undefined - ? { - title: this.labelTitle, - color: this.selectedColor, - groupPath: this.attrWorkspacePath, - } - : { - title: this.labelTitle, - color: this.selectedColor, - projectPath: this.fullPath, - }; + return { + title: this.labelTitle, + color: this.selectedColor, + [attributePath]: this.attrWorkspacePath, + }; }, }, methods: { @@ -82,8 +73,10 @@ export default { this.selectedColor = this.getColorCode(color); }, updateLabelsInCache(store, label) { + const { query } = workspaceLabelsQueries[this.workspaceType]; + const sourceData = store.readQuery({ - query: labelsQueries[this.issuableType].workspaceQuery, + query, variables: { fullPath: this.fullPath, searchTerm: '' }, }); @@ -95,7 +88,7 @@ export default { }); store.writeQuery({ - query: labelsQueries[this.issuableType].workspaceQuery, + query, variables: { fullPath: this.fullPath, searchTerm: '' }, data, }); @@ -180,7 +173,7 @@ export default { <gl-button class="js-btn-cancel-create" data-testid="cancel-button" - @click="$emit('hideCreateView')" + @click.stop="$emit('hideCreateView')" > {{ __('Cancel') }} </gl-button> 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 e6a25362ff0..e9a2d7747e2 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 @@ -1,18 +1,10 @@ <script> -import { - GlDropdownForm, - GlDropdownItem, - GlLoadingIcon, - GlSearchBoxByType, - GlIntersectionObserver, -} from '@gitlab/ui'; +import { GlDropdownForm, GlDropdownItem, GlLoadingIcon, GlIntersectionObserver } from '@gitlab/ui'; import fuzzaldrinPlus from 'fuzzaldrin-plus'; -import { debounce } from 'lodash'; import createFlash from '~/flash'; import { getIdFromGraphQLId } from '~/graphql_shared/utils'; -import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants'; import { __ } from '~/locale'; -import { labelsQueries } from '~/sidebar/constants'; +import { workspaceLabelsQueries } from '~/sidebar/constants'; import LabelItem from './label_item.vue'; export default { @@ -20,7 +12,6 @@ export default { GlDropdownForm, GlDropdownItem, GlLoadingIcon, - GlSearchBoxByType, GlIntersectionObserver, LabelItem, }, @@ -28,18 +19,10 @@ export default { prop: 'localSelectedLabels', }, props: { - selectedLabels: { - type: Array, - required: true, - }, allowMultiselect: { type: Boolean, required: true, }, - issuableType: { - type: String, - required: true, - }, localSelectedLabels: { type: Array, required: true, @@ -48,10 +31,17 @@ export default { type: String, required: true, }, + searchKey: { + type: String, + required: true, + }, + workspaceType: { + type: String, + required: true, + }, }, data() { return { - searchKey: '', labels: [], isVisible: false, }; @@ -59,7 +49,7 @@ export default { apollo: { labels: { query() { - return labelsQueries[this.issuableType].workspaceQuery; + return workspaceLabelsQueries[this.workspaceType].query; }, variables() { return { @@ -71,12 +61,6 @@ export default { return this.searchKey.length === 1 || !this.isVisible; }, update: (data) => data.workspace?.labels?.nodes || [], - async result() { - if (this.$refs.searchInput) { - await this.$nextTick; - this.$refs.searchInput.focusInput(); - } - }, error() { createFlash({ message: __('Error fetching labels.') }); }, @@ -101,12 +85,6 @@ export default { return Boolean(this.searchKey) && this.visibleLabels.length === 0; }, }, - created() { - this.debouncedSearchKeyUpdate = debounce(this.setSearchKey, DEFAULT_DEBOUNCE_AND_THROTTLE_MS); - }, - beforeDestroy() { - this.debouncedSearchKeyUpdate.cancel(); - }, methods: { isLabelSelected(label) { return this.localSelectedLabelsIds.includes(getIdFromGraphQLId(label.id)); @@ -137,13 +115,7 @@ export default { ({ id }) => id !== getIdFromGraphQLId(label.id) && id !== label.id, ); } else { - labels = [ - ...this.localSelectedLabels, - { - ...label, - id: getIdFromGraphQLId(label.id), - }, - ]; + labels = [...this.localSelectedLabels, label]; } this.$emit('input', labels); }, @@ -153,12 +125,8 @@ export default { this.$emit('closeDropdown', this.localSelectedLabels); } }, - setSearchKey(value) { - this.searchKey = value; - }, onDropdownAppear() { this.isVisible = true; - this.$refs.searchInput.focusInput(); }, }, }; @@ -167,14 +135,6 @@ export default { <template> <gl-intersection-observer @appear="onDropdownAppear"> <gl-dropdown-form class="labels-select-contents-list js-labels-list"> - <gl-search-box-by-type - ref="searchInput" - :value="searchKey" - :disabled="labelsFetchInProgress" - data-qa-selector="dropdown_input_field" - data-testid="dropdown-input-field" - @input="debouncedSearchKeyUpdate" - /> <div ref="labelsListContainer" data-testid="dropdown-content"> <gl-loading-icon v-if="labelsFetchInProgress" diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_footer.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_footer.vue new file mode 100644 index 00000000000..e67e704ffb8 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_footer.vue @@ -0,0 +1,35 @@ +<script> +import { GlDropdownItem } from '@gitlab/ui'; + +export default { + components: { + GlDropdownItem, + }, + inject: ['allowLabelCreate', 'labelsManagePath'], + props: { + footerCreateLabelTitle: { + type: String, + required: true, + }, + footerManageLabelTitle: { + type: String, + required: true, + }, + }, +}; +</script> + +<template> + <div data-testid="dropdown-footer"> + <gl-dropdown-item + v-if="allowLabelCreate" + data-testid="create-label-button" + @click.capture.native.stop="$emit('toggleDropdownContentsCreateView')" + > + {{ footerCreateLabelTitle }} + </gl-dropdown-item> + <gl-dropdown-item :href="labelsManagePath" @click.capture.native.stop> + {{ footerManageLabelTitle }} + </gl-dropdown-item> + </div> +</template> 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 new file mode 100644 index 00000000000..10064b01648 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_header.vue @@ -0,0 +1,82 @@ +<script> +import { GlButton, GlSearchBoxByType } from '@gitlab/ui'; + +export default { + components: { + GlButton, + GlSearchBoxByType, + }, + model: { + prop: 'searchKey', + }, + props: { + labelsCreateTitle: { + type: String, + required: true, + }, + labelsListTitle: { + type: String, + required: true, + }, + showDropdownContentsCreateView: { + type: Boolean, + required: true, + }, + labelsFetchInProgress: { + type: Boolean, + required: false, + default: false, + }, + searchKey: { + type: String, + required: true, + }, + }, + computed: { + dropdownTitle() { + return this.showDropdownContentsCreateView ? this.labelsCreateTitle : this.labelsListTitle; + }, + }, + methods: { + focusInput() { + this.$refs.searchInput?.focusInput(); + }, + }, +}; +</script> + +<template> + <div data-testid="dropdown-header"> + <div class="dropdown-title gl-display-flex gl-align-items-center gl-pt-0 gl-pb-3!"> + <gl-button + v-if="showDropdownContentsCreateView" + :aria-label="__('Go back')" + variant="link" + size="small" + class="js-btn-back dropdown-header-button gl-p-0" + icon="arrow-left" + data-testid="go-back-button" + @click.stop="$emit('toggleDropdownContentsCreateView')" + /> + <span class="gl-flex-grow-1">{{ dropdownTitle }}</span> + <gl-button + :aria-label="__('Close')" + variant="link" + size="small" + class="dropdown-header-button gl-p-0!" + icon="close" + data-testid="close-button" + @click="$emit('closeDropdown')" + /> + </div> + <gl-search-box-by-type + v-if="!showDropdownContentsCreateView" + ref="searchInput" + :value="searchKey" + :disabled="labelsFetchInProgress" + data-qa-selector="dropdown_input_field" + data-testid="dropdown-input-field" + @input="$emit('input', $event)" + /> + </div> +</template> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_value.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_value.vue index 71d3d87cce5..aed5bc303ee 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_value.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_value.vue @@ -1,7 +1,6 @@ <script> import { GlLabel } from '@gitlab/ui'; import { sortBy } from 'lodash'; -import { getIdFromGraphQLId } from '~/graphql_shared/utils'; import { isScopedLabel } from '~/lib/utils/common_utils'; export default { @@ -47,7 +46,7 @@ export default { return this.allowScopedLabels && isScopedLabel(label); }, removeLabel(labelId) { - this.$emit('onLabelRemove', getIdFromGraphQLId(labelId)); + this.$emit('onLabelRemove', labelId); }, }, }; diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/graphql/create_label.mutation.graphql b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/graphql/create_label.mutation.graphql index eb478645a03..a9c791091fc 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/graphql/create_label.mutation.graphql +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/graphql/create_label.mutation.graphql @@ -1,12 +1,11 @@ +#import "~/graphql_shared/fragments/label.fragment.graphql" + mutation createLabel($title: String!, $color: String, $projectPath: ID, $groupPath: ID) { labelCreate( input: { title: $title, color: $color, projectPath: $projectPath, groupPath: $groupPath } ) { label { - id - color - description - title + ...Label } errors } diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/graphql/epic_labels.query.graphql b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/graphql/epic_labels.query.graphql index a2e8579486f..c130cc426dc 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/graphql/epic_labels.query.graphql +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/graphql/epic_labels.query.graphql @@ -1,13 +1,12 @@ +#import "~/graphql_shared/fragments/label.fragment.graphql" + query epicLabels($fullPath: ID!, $iid: ID) { workspace: group(fullPath: $fullPath) { issuable: epic(iid: $iid) { id labels { nodes { - id - title - color - description + ...Label } } } diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/graphql/epic_update_labels.mutation.graphql b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/graphql/epic_update_labels.mutation.graphql new file mode 100644 index 00000000000..45fcb50732e --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/graphql/epic_update_labels.mutation.graphql @@ -0,0 +1,15 @@ +#import "~/graphql_shared/fragments/label.fragment.graphql" + +mutation updateEpicLabels($input: UpdateEpicInput!) { + updateEpic(input: $input) { + epic { + id + labels { + nodes { + ...Label + } + } + } + errors + } +} diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/graphql/group_labels.query.graphql b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/graphql/group_labels.query.graphql index acc9bcd2015..ce1a69f84c0 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/graphql/group_labels.query.graphql +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/graphql/group_labels.query.graphql @@ -1,11 +1,11 @@ +#import "~/graphql_shared/fragments/label.fragment.graphql" + query groupLabels($fullPath: ID!, $searchTerm: String) { workspace: group(fullPath: $fullPath) { - labels(searchTerm: $searchTerm, onlyGroupLabels: true) { + id + labels(searchTerm: $searchTerm, onlyGroupLabels: true, includeAncestorGroups: true) { nodes { - id - title - color - description + ...Label } } } diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/graphql/issue_labels.query.graphql b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/graphql/issue_labels.query.graphql index 1c2fd3bb7c0..e471d279b24 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/graphql/issue_labels.query.graphql +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/graphql/issue_labels.query.graphql @@ -1,13 +1,12 @@ +#import "~/graphql_shared/fragments/label.fragment.graphql" + query issueLabels($fullPath: ID!, $iid: String) { workspace: project(fullPath: $fullPath) { issuable: issue(iid: $iid) { id labels { nodes { - id - title - color - description + ...Label } } } diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/graphql/merge_request_labels.query.graphql b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/graphql/merge_request_labels.query.graphql new file mode 100644 index 00000000000..dd80e89c8a7 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/graphql/merge_request_labels.query.graphql @@ -0,0 +1,14 @@ +#import "~/graphql_shared/fragments/label.fragment.graphql" + +query mergeRequestLabels($fullPath: ID!, $iid: String!) { + workspace: project(fullPath: $fullPath) { + issuable: mergeRequest(iid: $iid) { + id + labels { + nodes { + ...Label + } + } + } + } +} diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/graphql/project_labels.query.graphql b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/graphql/project_labels.query.graphql index dc39220487d..a7c24620aad 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/graphql/project_labels.query.graphql +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/graphql/project_labels.query.graphql @@ -1,11 +1,11 @@ +#import "~/graphql_shared/fragments/label.fragment.graphql" + query projectLabels($fullPath: ID!, $searchTerm: String) { workspace: project(fullPath: $fullPath) { + id labels(searchTerm: $searchTerm, includeAncestorGroups: true) { nodes { - id - title - color - description + ...Label } } } 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 6bd43da2203..97a65c13933 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 @@ -1,9 +1,12 @@ <script> +import { debounce } from 'lodash'; +import { MutationOperationMode, getIdFromGraphQLId } from '~/graphql_shared/utils'; import createFlash from '~/flash'; +import { IssuableType } from '~/issue_show/constants'; import { __ } from '~/locale'; import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue'; -import { labelsQueries } from '~/sidebar/constants'; -import { DropdownVariant } from './constants'; +import { issuableLabelsQueries } from '~/sidebar/constants'; +import { DEBOUNCE_DROPDOWN_DELAY, DropdownVariant } from './constants'; import DropdownContents from './dropdown_contents.vue'; import DropdownValue from './dropdown_value.vue'; import DropdownValueCollapsed from './dropdown_value_collapsed.vue'; @@ -50,16 +53,6 @@ export default { required: false, default: DropdownVariant.Sidebar, }, - selectedLabels: { - type: Array, - required: false, - default: () => [], - }, - labelsSelectInProgress: { - type: Boolean, - required: false, - default: false, - }, labelsFilterBasePath: { type: String, required: false, @@ -95,36 +88,44 @@ export default { required: false, default: __('Manage group labels'), }, - isEditing: { - type: Boolean, - required: false, - default: false, - }, issuableType: { type: String, required: true, }, + workspaceType: { + type: String, + required: true, + }, attrWorkspacePath: { type: String, - required: false, - default: undefined, + required: true, + }, + labelCreateType: { + type: String, + required: true, }, }, data() { return { contentIsOnViewport: true, issuableLabels: [], + labelsSelectInProgress: false, + oldIid: null, + sidebarExpandedOnClick: false, }; }, computed: { isLoading() { return this.labelsSelectInProgress || this.$apollo.queries.issuableLabels.loading; }, + issuableLabelIds() { + return this.issuableLabels.map((label) => label.id); + }, }, apollo: { issuableLabels: { query() { - return labelsQueries[this.issuableType].issuableQuery; + return issuableLabelsQueries[this.issuableType].issuableQuery; }, skip() { return !isDropdownVariantSidebar(this.variant); @@ -143,16 +144,140 @@ export default { }, }, }, + watch: { + iid(_, oldVal) { + this.oldIid = oldVal; + }, + }, + mounted() { + document.addEventListener('toggleSidebarRevealLabelsDropdown', this.handleCollapsedValueClick); + }, + beforeDestroy() { + document.removeEventListener( + 'toggleSidebarRevealLabelsDropdown', + this.handleCollapsedValueClick, + ); + }, methods: { handleDropdownClose(labels) { - this.$emit('updateSelectedLabels', labels); + if (this.iid !== '') { + this.updateSelectedLabels(this.getUpdateVariables(labels)); + } else { + this.$emit('updateSelectedLabels', { labels }); + } + this.collapseEditableItem(); }, collapseEditableItem() { this.$refs.editable?.collapse(); + if (this.sidebarExpandedOnClick) { + this.sidebarExpandedOnClick = false; + this.$emit('toggleCollapse'); + } }, handleCollapsedValueClick() { + this.sidebarExpandedOnClick = true; this.$emit('toggleCollapse'); + debounce(() => { + this.$refs.editable.toggle(); + this.$refs.dropdownContents.showDropdown(); + }, DEBOUNCE_DROPDOWN_DELAY)(); + }, + getUpdateVariables(labels) { + let labelIds = []; + + labelIds = labels.map(({ id }) => id); + const currentIid = this.oldIid || this.iid; + + const updateVariables = { + iid: currentIid, + projectPath: this.fullPath, + labelIds, + }; + + switch (this.issuableType) { + case IssuableType.Issue: + return updateVariables; + case IssuableType.MergeRequest: + return { + ...updateVariables, + operationMode: MutationOperationMode.Replace, + }; + case IssuableType.Epic: + return { + iid: currentIid, + groupPath: this.fullPath, + addLabelIds: labelIds.map((id) => getIdFromGraphQLId(id)), + removeLabelIds: this.issuableLabelIds + .filter((id) => !labelIds.includes(id)) + .map((id) => getIdFromGraphQLId(id)), + }; + default: + return {}; + } + }, + updateSelectedLabels(inputVariables) { + this.labelsSelectInProgress = true; + + this.$apollo + .mutate({ + mutation: issuableLabelsQueries[this.issuableType].mutation, + variables: { input: inputVariables }, + }) + .then(({ data }) => { + const { mutationName } = issuableLabelsQueries[this.issuableType]; + + if (data[mutationName]?.errors?.length) { + throw new Error(); + } + + this.$emit('updateSelectedLabels', { + id: data[mutationName]?.[this.issuableType]?.id, + labels: data[mutationName]?.[this.issuableType]?.labels?.nodes, + }); + }) + .catch((error) => + createFlash({ + message: __('An error occurred while updating labels.'), + captureError: true, + error, + }), + ) + .finally(() => { + this.labelsSelectInProgress = false; + }); + }, + getRemoveVariables(labelId) { + const removeVariables = { + iid: this.iid, + projectPath: this.fullPath, + }; + + switch (this.issuableType) { + case IssuableType.Issue: + return { + ...removeVariables, + removeLabelIds: [labelId], + }; + case IssuableType.MergeRequest: + return { + ...removeVariables, + labelIds: [labelId], + operationMode: MutationOperationMode.Remove, + }; + case IssuableType.Epic: + return { + iid: this.iid, + removeLabelIds: [getIdFromGraphQLId(labelId)], + groupPath: this.fullPath, + }; + default: + return {}; + } + }, + handleLabelRemove(labelId) { + this.updateSelectedLabels(this.getRemoveVariables(labelId)); + this.$emit('onLabelRemove', labelId); }, isDropdownVariantSidebar, isDropdownVariantStandalone, @@ -180,6 +305,7 @@ export default { :title="__('Labels')" :loading="isLoading" :can-edit="allowLabelEdit" + @open="oldIid = null" > <template #collapsed> <dropdown-value @@ -188,7 +314,7 @@ export default { :allow-label-remove="allowLabelRemove" :labels-filter-base-path="labelsFilterBasePath" :labels-filter-param="labelsFilterParam" - @onLabelRemove="$emit('onLabelRemove', $event)" + @onLabelRemove="handleLabelRemove" > <slot></slot> </dropdown-value> @@ -201,23 +327,25 @@ export default { :labels-filter-base-path="labelsFilterBasePath" :labels-filter-param="labelsFilterParam" class="gl-mb-2" - @onLabelRemove="$emit('onLabelRemove', $event)" + @onLabelRemove="handleLabelRemove" > <slot></slot> </dropdown-value> <dropdown-contents + ref="dropdownContents" :dropdown-button-text="dropdownButtonText" :allow-multiselect="allowMultiselect" :labels-list-title="labelsListTitle" :footer-create-label-title="footerCreateLabelTitle" :footer-manage-label-title="footerManageLabelTitle" :labels-create-title="labelsCreateTitle" - :selected-labels="selectedLabels" + :selected-labels="issuableLabels" :variant="variant" - :issuable-type="issuableType" :is-visible="edit" :full-path="fullPath" + :workspace-type="workspaceType" :attr-workspace-path="attrWorkspacePath" + :label-create-type="labelCreateType" @setLabels="handleDropdownClose" @closeDropdown="collapseEditableItem" /> @@ -233,10 +361,12 @@ export default { :footer-create-label-title="footerCreateLabelTitle" :footer-manage-label-title="footerManageLabelTitle" :labels-create-title="labelsCreateTitle" - :selected-labels="selectedLabels" + :selected-labels="issuableLabels" :variant="variant" - :issuable-type="issuableType" :full-path="fullPath" + :workspace-type="workspaceType" + :attr-workspace-path="attrWorkspacePath" + :label-create-type="labelCreateType" @setLabels="handleDropdownClose" /> </div> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/queries/get_issue_timelogs.query.graphql b/app/assets/javascripts/vue_shared/components/sidebar/queries/get_issue_timelogs.query.graphql index a2990d7171b..dffcc053fac 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/queries/get_issue_timelogs.query.graphql +++ b/app/assets/javascripts/vue_shared/components/sidebar/queries/get_issue_timelogs.query.graphql @@ -1,6 +1,6 @@ #import "~/graphql_shared/fragments/issuable_timelogs.fragment.graphql" -query timeTrackingReport($id: IssueID!) { +query issueTimeTrackingReport($id: IssueID!) { issuable: issue(id: $id) { __typename id diff --git a/app/assets/javascripts/vue_shared/components/sidebar/queries/get_mr_timelogs.query.graphql b/app/assets/javascripts/vue_shared/components/sidebar/queries/get_mr_timelogs.query.graphql index 753f1b345e3..ede9b75d765 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/queries/get_mr_timelogs.query.graphql +++ b/app/assets/javascripts/vue_shared/components/sidebar/queries/get_mr_timelogs.query.graphql @@ -1,6 +1,6 @@ #import "~/graphql_shared/fragments/issuable_timelogs.fragment.graphql" -query timeTrackingReport($id: MergeRequestID!) { +query mrTimeTrackingReport($id: MergeRequestID!) { issuable: mergeRequest(id: $id) { __typename id diff --git a/app/assets/javascripts/vue_shared/components/user_deletion_obstacles/user_deletion_obstacles_list.vue b/app/assets/javascripts/vue_shared/components/user_deletion_obstacles/user_deletion_obstacles_list.vue index 1eea660d527..a16dcb6d893 100644 --- a/app/assets/javascripts/vue_shared/components/user_deletion_obstacles/user_deletion_obstacles_list.vue +++ b/app/assets/javascripts/vue_shared/components/user_deletion_obstacles/user_deletion_obstacles_list.vue @@ -5,10 +5,10 @@ import { OBSTACLE_TYPES } from './constants'; const OBSTACLE_TEXT = { [OBSTACLE_TYPES.oncallSchedules]: s__( - 'OnCallSchedules|On-call schedule %{obstacle} in Project %{project}', + 'OnCallSchedules|On-call schedule %{obstacle} in project %{project}', ), [OBSTACLE_TYPES.escalationPolicies]: s__( - 'EscalationPolicies|Escalation policy %{obstacle} in Project %{project}', + 'EscalationPolicies|Escalation policy %{obstacle} in project %{project}', ), }; diff --git a/app/assets/javascripts/vue_shared/constants.js b/app/assets/javascripts/vue_shared/constants.js index 33fac5ebdbb..9cb66f6e65f 100644 --- a/app/assets/javascripts/vue_shared/constants.js +++ b/app/assets/javascripts/vue_shared/constants.js @@ -63,3 +63,6 @@ export const timeRanges = [ export const defaultTimeRange = timeRanges.find((tr) => tr.default); export const getTimeWindow = (timeWindowName) => timeRanges.find((tr) => tr.name === timeWindowName); + +export const AVATAR_SHAPE_OPTION_CIRCLE = 'circle'; +export const AVATAR_SHAPE_OPTION_RECT = 'rect'; diff --git a/app/assets/javascripts/vue_shared/directives/validation.js b/app/assets/javascripts/vue_shared/directives/validation.js index 779b04dc2bd..fc0ff78e7b4 100644 --- a/app/assets/javascripts/vue_shared/directives/validation.js +++ b/app/assets/javascripts/vue_shared/directives/validation.js @@ -1,4 +1,4 @@ -import { s__ } from '~/locale'; +import { __ } from '~/locale'; /** * Validation messages will take priority based on the property order. @@ -12,11 +12,11 @@ import { s__ } from '~/locale'; const defaultFeedbackMap = { valueMissing: { isInvalid: (el) => el.validity?.valueMissing, - message: s__('Please fill out this field.'), + message: __('Please fill out this field.'), }, urlTypeMismatch: { isInvalid: (el) => el.type === 'url' && el.validity?.typeMismatch, - message: s__('Please enter a valid URL format, ex: http://www.example.com/home'), + message: __('Please enter a valid URL format, ex: http://www.example.com/home'), }, }; 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 c1e8376d656..114f60c96ee 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 @@ -82,7 +82,7 @@ export default { }); this.$root.$on('clicked::link', (e) => { - window.location = e.target.href; + window.location = e.currentTarget.href; }); }, diff --git a/app/assets/javascripts/vue_shared/security_configuration/provider.js b/app/assets/javascripts/vue_shared/security_configuration/provider.js index fa23669b615..ef96b443da8 100644 --- a/app/assets/javascripts/vue_shared/security_configuration/provider.js +++ b/app/assets/javascripts/vue_shared/security_configuration/provider.js @@ -5,5 +5,5 @@ import createDefaultClient from '~/lib/graphql'; Vue.use(VueApollo); export default new VueApollo({ - defaultClient: createDefaultClient({}, { assumeImmutableResults: true }), + defaultClient: createDefaultClient(), }); diff --git a/app/assets/javascripts/vue_shared/security_reports/components/artifact_downloads/merge_request_artifact_download.vue b/app/assets/javascripts/vue_shared/security_reports/components/artifact_downloads/merge_request_artifact_download.vue index 3a4453bc7ae..e0669b3ed27 100644 --- a/app/assets/javascripts/vue_shared/security_reports/components/artifact_downloads/merge_request_artifact_download.vue +++ b/app/assets/javascripts/vue_shared/security_reports/components/artifact_downloads/merge_request_artifact_download.vue @@ -26,6 +26,11 @@ export default { type: Number, required: true, }, + injectedArtifacts: { + type: Array, + required: false, + default: () => [], + }, }, data() { return { @@ -56,6 +61,9 @@ export default { isLoadingReportArtifacts() { return this.$apollo.queries.reportArtifacts.loading; }, + mergedReportArtifacts() { + return [...this.reportArtifacts, ...this.injectedArtifacts]; + }, }, methods: { showError(error) { @@ -77,7 +85,7 @@ export default { <template> <security-report-download-dropdown :title="s__('SecurityReports|Download results')" - :artifacts="reportArtifacts" + :artifacts="mergedReportArtifacts" :loading="isLoadingReportArtifacts" /> </template> diff --git a/app/assets/javascripts/vue_shared/security_reports/constants.js b/app/assets/javascripts/vue_shared/security_reports/constants.js index b024e92bd0e..fafbd02634f 100644 --- a/app/assets/javascripts/vue_shared/security_reports/constants.js +++ b/app/assets/javascripts/vue_shared/security_reports/constants.js @@ -17,6 +17,7 @@ export const REPORT_FILE_TYPES = { * Security scan report types, as provided by the backend. */ export const REPORT_TYPE_SAST = 'sast'; +export const REPORT_TYPE_SAST_IAC = 'sast_iac'; export const REPORT_TYPE_DAST = 'dast'; export const REPORT_TYPE_DAST_PROFILES = 'dast_profiles'; export const REPORT_TYPE_SECRET_DETECTION = 'secret_detection'; diff --git a/app/assets/javascripts/vue_shared/security_reports/graphql/queries/security_report_pipeline_download_paths.query.graphql b/app/assets/javascripts/vue_shared/security_reports/graphql/queries/security_report_pipeline_download_paths.query.graphql index b5858ab012b..e1f3c55a886 100644 --- a/app/assets/javascripts/vue_shared/security_reports/graphql/queries/security_report_pipeline_download_paths.query.graphql +++ b/app/assets/javascripts/vue_shared/security_reports/graphql/queries/security_report_pipeline_download_paths.query.graphql @@ -1,6 +1,6 @@ #import "../fragments/job_artifacts.fragment.graphql" -query getCorpuses($projectPath: ID!, $iid: ID, $reportTypes: [SecurityReportTypeEnum!]) { +query getPipelineCorpuses($projectPath: ID!, $iid: ID, $reportTypes: [SecurityReportTypeEnum!]) { project(fullPath: $projectPath) { pipeline(iid: $iid) { id diff --git a/app/assets/javascripts/vue_shared/security_reports/store/modules/sast/actions.js b/app/assets/javascripts/vue_shared/security_reports/store/modules/sast/actions.js index 62a51abe038..8aefc13a5fa 100644 --- a/app/assets/javascripts/vue_shared/security_reports/store/modules/sast/actions.js +++ b/app/assets/javascripts/vue_shared/security_reports/store/modules/sast/actions.js @@ -18,6 +18,7 @@ export const fetchDiff = ({ state, rootState, dispatch }) => { return fetchDiffData(rootState, state.paths.diffEndpoint, REPORT_TYPE_SAST) .then((data) => { dispatch('receiveDiffSuccess', data); + return data; }) .catch(() => { dispatch('receiveDiffError'); diff --git a/app/assets/javascripts/vue_shared/security_reports/store/modules/secret_detection/actions.js b/app/assets/javascripts/vue_shared/security_reports/store/modules/secret_detection/actions.js index 722dcce3075..13ca154bfa7 100644 --- a/app/assets/javascripts/vue_shared/security_reports/store/modules/secret_detection/actions.js +++ b/app/assets/javascripts/vue_shared/security_reports/store/modules/secret_detection/actions.js @@ -18,6 +18,7 @@ export const fetchDiff = ({ state, rootState, dispatch }) => { return fetchDiffData(rootState, state.paths.diffEndpoint, REPORT_TYPE_SECRET_DETECTION) .then((data) => { dispatch('receiveDiffSuccess', data); + return data; }) .catch(() => { dispatch('receiveDiffError'); |