debian-mirror-gitlab/app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

412 lines
11 KiB
Vue
Raw Normal View History

2021-09-04 01:27:46 +05:30
<script>
import {
GlLink,
GlDropdown,
GlDropdownItem,
GlDropdownText,
GlSearchBoxByType,
GlDropdownDivider,
GlLoadingIcon,
GlIcon,
GlTooltipDirective,
} from '@gitlab/ui';
2022-04-04 11:22:00 +05:30
import { kebabCase, snakeCase } from 'lodash';
2021-09-04 01:27:46 +05:30
import createFlash from '~/flash';
import { getIdFromGraphQLId } from '~/graphql_shared/utils';
2022-01-26 12:08:38 +05:30
import { IssuableType } from '~/issues/constants';
2021-10-27 15:23:28 +05:30
import { timeFor } from '~/lib/utils/datetime_utility';
2022-01-26 12:08:38 +05:30
import { __ } from '~/locale';
2021-09-04 01:27:46 +05:30
import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue';
import {
2022-01-26 12:08:38 +05:30
dropdowni18nText,
2021-09-30 23:02:18 +05:30
Tracking,
2021-09-04 01:27:46 +05:30
IssuableAttributeState,
IssuableAttributeType,
issuableAttributesQueries,
noAttributeId,
2021-09-30 23:02:18 +05:30
defaultEpicSort,
2021-10-27 15:23:28 +05:30
epicIidPattern,
2022-01-26 12:08:38 +05:30
} from 'ee_else_ce/sidebar/constants';
2021-09-04 01:27:46 +05:30
export default {
noAttributeId,
i18n: {
2021-09-30 23:02:18 +05:30
expired: __('(expired)'),
2021-09-04 01:27:46 +05:30
none: __('None'),
},
directives: {
GlTooltip: GlTooltipDirective,
},
components: {
SidebarEditableItem,
GlLink,
GlDropdown,
GlDropdownItem,
GlDropdownText,
GlDropdownDivider,
GlSearchBoxByType,
GlIcon,
GlLoadingIcon,
},
inject: {
isClassicSidebar: {
default: false,
},
2022-01-26 12:08:38 +05:30
issuableAttributesQueries: {
default: issuableAttributesQueries,
},
issuableAttributesState: {
default: IssuableAttributeState,
},
widgetTitleText: {
default: {
[IssuableAttributeType.Milestone]: __('Milestone'),
expired: __('(expired)'),
none: __('None'),
},
},
2021-09-04 01:27:46 +05:30
},
props: {
issuableAttribute: {
type: String,
required: true,
},
workspacePath: {
required: true,
type: String,
},
iid: {
required: true,
type: String,
},
attrWorkspacePath: {
required: true,
type: String,
},
issuableType: {
type: String,
required: true,
validator(value) {
2021-09-30 23:02:18 +05:30
return [IssuableType.Issue, IssuableType.MergeRequest].includes(value);
2021-09-04 01:27:46 +05:30
},
},
2021-09-30 23:02:18 +05:30
icon: {
type: String,
required: false,
default: undefined,
},
2021-09-04 01:27:46 +05:30
},
apollo: {
currentAttribute: {
query() {
const { current } = this.issuableAttributeQuery;
const { query } = current[this.issuableType];
return query;
},
variables() {
return {
fullPath: this.workspacePath,
iid: this.iid,
};
},
update(data) {
return data?.workspace?.issuable.attribute;
},
error(error) {
createFlash({
message: this.i18n.currentFetchError,
captureError: true,
error,
});
},
},
attributesList: {
query() {
const { list } = this.issuableAttributeQuery;
const { query } = list[this.issuableType];
return query;
},
skip() {
2021-10-27 15:23:28 +05:30
if (this.isEpic && this.searchTerm.startsWith('&') && this.searchTerm.length < 2) {
return true;
}
2021-09-04 01:27:46 +05:30
return !this.editing;
},
debounce: 250,
variables() {
2021-10-27 15:23:28 +05:30
if (!this.isEpic) {
return {
fullPath: this.attrWorkspacePath,
title: this.searchTerm,
2022-01-26 12:08:38 +05:30
state: this.issuableAttributesState[this.issuableAttribute],
2021-10-27 15:23:28 +05:30
};
}
const variables = {
2021-09-04 01:27:46 +05:30
fullPath: this.attrWorkspacePath,
2022-01-26 12:08:38 +05:30
state: this.issuableAttributesState[this.issuableAttribute],
2021-10-27 15:23:28 +05:30
sort: defaultEpicSort,
2021-09-04 01:27:46 +05:30
};
2021-10-27 15:23:28 +05:30
if (epicIidPattern.test(this.searchTerm)) {
const matches = this.searchTerm.match(epicIidPattern);
variables.iidStartsWith = matches.groups.iid;
} else if (this.searchTerm !== '') {
variables.in = 'TITLE';
variables.title = this.searchTerm;
}
return variables;
2021-09-04 01:27:46 +05:30
},
update(data) {
if (data?.workspace) {
return data?.workspace?.attributes.nodes;
}
return [];
},
error(error) {
createFlash({ message: this.i18n.listFetchError, captureError: true, error });
},
},
},
data() {
return {
searchTerm: '',
editing: false,
updating: false,
selectedTitle: null,
currentAttribute: null,
attributesList: [],
tracking: {
2021-09-30 23:02:18 +05:30
event: Tracking.editEvent,
label: Tracking.rightSidebarLabel,
2021-09-04 01:27:46 +05:30
property: this.issuableAttribute,
},
};
},
computed: {
issuableAttributeQuery() {
2022-01-26 12:08:38 +05:30
return this.issuableAttributesQueries[this.issuableAttribute];
2021-09-04 01:27:46 +05:30
},
attributeTitle() {
return this.currentAttribute?.title || this.i18n.noAttribute;
},
attributeUrl() {
return this.currentAttribute?.webUrl;
},
dropdownText() {
2022-01-26 12:08:38 +05:30
return this.currentAttribute ? this.currentAttribute?.title : this.attributeTypeTitle;
2021-09-04 01:27:46 +05:30
},
loading() {
return this.$apollo.queries.currentAttribute.loading;
},
emptyPropsList() {
return this.attributesList.length === 0;
},
attributeTypeTitle() {
2022-01-26 12:08:38 +05:30
return this.widgetTitleText[this.issuableAttribute];
2021-09-04 01:27:46 +05:30
},
2021-09-30 23:02:18 +05:30
attributeTypeIcon() {
return this.icon || this.issuableAttribute;
},
2021-10-27 15:23:28 +05:30
tooltipText() {
return timeFor(this.currentAttribute?.dueDate);
},
2021-09-04 01:27:46 +05:30
i18n() {
2022-01-26 12:08:38 +05:30
return dropdowni18nText(this.issuableAttribute, this.issuableType);
2021-09-04 01:27:46 +05:30
},
2021-10-27 15:23:28 +05:30
isEpic() {
2022-01-26 12:08:38 +05:30
// MV to EE https://gitlab.com/gitlab-org/gitlab/-/issues/345311
2021-10-27 15:23:28 +05:30
return this.issuableAttribute === IssuableType.Epic;
},
2022-04-04 11:22:00 +05:30
formatIssuableAttribute() {
return {
kebab: kebabCase(this.issuableAttribute),
snake: snakeCase(this.issuableAttribute),
};
},
2021-09-04 01:27:46 +05:30
},
methods: {
updateAttribute(attributeId) {
if (this.currentAttribute === null && attributeId === null) return;
if (attributeId === this.currentAttribute?.id) return;
this.updating = true;
const selectedAttribute =
Boolean(attributeId) && this.attributesList.find((p) => p.id === attributeId);
2022-01-26 12:08:38 +05:30
this.selectedTitle = selectedAttribute ? selectedAttribute.title : this.widgetTitleText.none;
2021-09-04 01:27:46 +05:30
const { current } = this.issuableAttributeQuery;
const { mutation } = current[this.issuableType];
this.$apollo
.mutate({
mutation,
variables: {
fullPath: this.workspacePath,
attributeId:
2021-09-30 23:02:18 +05:30
this.issuableAttribute === IssuableAttributeType.Milestone &&
this.issuableType === IssuableType.Issue
2021-09-04 01:27:46 +05:30
? getIdFromGraphQLId(attributeId)
: attributeId,
iid: this.iid,
},
})
.then(({ data }) => {
if (data.issuableSetAttribute?.errors?.length) {
createFlash({
message: data.issuableSetAttribute.errors[0],
captureError: true,
error: data.issuableSetAttribute.errors[0],
});
} else {
this.$emit('attribute-updated', data);
}
})
.catch((error) => {
createFlash({ message: this.i18n.updateError, captureError: true, error });
})
.finally(() => {
this.updating = false;
this.searchTerm = '';
this.selectedTitle = null;
});
},
isAttributeChecked(attributeId = undefined) {
return (
attributeId === this.currentAttribute?.id || (!this.currentAttribute?.id && !attributeId)
);
},
2021-09-30 23:02:18 +05:30
isAttributeOverdue(attribute) {
return this.issuableAttribute === IssuableAttributeType.Milestone
? attribute?.expired
: false;
},
2021-09-04 01:27:46 +05:30
showDropdown() {
this.$refs.newDropdown.show();
},
handleOpen() {
this.editing = true;
this.showDropdown();
},
handleClose() {
this.editing = false;
},
setFocus() {
this.$refs.search.focusInput();
},
},
};
</script>
<template>
<sidebar-editable-item
ref="editable"
:title="attributeTypeTitle"
2022-04-04 11:22:00 +05:30
:data-testid="`${formatIssuableAttribute.kebab}-edit`"
2021-09-04 01:27:46 +05:30
:tracking="tracking"
:loading="updating || loading"
@open="handleOpen"
@close="handleClose"
>
<template #collapsed>
2022-04-04 11:22:00 +05:30
<slot name="value-collapsed" :current-attribute="currentAttribute">
<div
v-if="isClassicSidebar"
v-gl-tooltip.left.viewport
:title="attributeTypeTitle"
class="sidebar-collapsed-icon"
>
<gl-icon :aria-label="attributeTypeTitle" :name="attributeTypeIcon" />
2022-07-23 23:45:48 +05:30
<span class="collapse-truncated-title gl-pt-2 gl-px-3 gl-font-sm">
2022-04-04 11:22:00 +05:30
{{ attributeTitle }}
</span>
</div>
</slot>
2021-09-04 01:27:46 +05:30
<div
2022-04-04 11:22:00 +05:30
:data-testid="`select-${formatIssuableAttribute.kebab}`"
2021-09-04 01:27:46 +05:30
:class="isClassicSidebar ? 'hide-collapsed' : 'gl-mt-3'"
>
2022-07-16 23:28:13 +05:30
<span v-if="updating">{{ selectedTitle }}</span>
2021-09-04 01:27:46 +05:30
<span v-else-if="!currentAttribute" class="gl-text-gray-500">
{{ $options.i18n.none }}
</span>
<slot
v-else
name="value"
2022-07-16 23:28:13 +05:30
:attribute-title="attributeTitle"
:attribute-url="attributeUrl"
:current-attribute="currentAttribute"
2021-09-04 01:27:46 +05:30
>
2021-09-30 23:02:18 +05:30
<gl-link
2021-10-27 15:23:28 +05:30
v-gl-tooltip="tooltipText"
2021-09-30 23:02:18 +05:30
:href="attributeUrl"
2022-04-04 11:22:00 +05:30
:data-qa-selector="`${formatIssuableAttribute.snake}_link`"
2021-09-30 23:02:18 +05:30
>
2021-09-04 01:27:46 +05:30
{{ attributeTitle }}
2021-09-30 23:02:18 +05:30
<span v-if="isAttributeOverdue(currentAttribute)">{{ $options.i18n.expired }}</span>
2021-09-04 01:27:46 +05:30
</gl-link>
</slot>
</div>
</template>
<template #default>
<gl-dropdown
ref="newDropdown"
lazy
:header-text="i18n.assignAttribute"
:text="dropdownText"
:loading="loading"
class="gl-w-full"
2021-11-11 11:23:49 +05:30
toggle-class="gl-max-w-100"
2021-12-11 22:18:48 +05:30
block
2021-09-04 01:27:46 +05:30
@shown="setFocus"
>
<gl-search-box-by-type ref="search" v-model="searchTerm" />
<gl-dropdown-item
2022-04-04 11:22:00 +05:30
:data-testid="`no-${formatIssuableAttribute.kebab}-item`"
2021-09-04 01:27:46 +05:30
:is-check-item="true"
:is-checked="isAttributeChecked($options.noAttributeId)"
@click="updateAttribute($options.noAttributeId)"
>
{{ i18n.noAttribute }}
</gl-dropdown-item>
<gl-dropdown-divider />
<gl-loading-icon
v-if="$apollo.queries.attributesList.loading"
2021-09-30 23:02:18 +05:30
size="sm"
2021-09-04 01:27:46 +05:30
class="gl-py-4"
data-testid="loading-icon-dropdown"
/>
<template v-else>
<gl-dropdown-text v-if="emptyPropsList">
{{ i18n.noAttributesFound }}
</gl-dropdown-text>
<slot
v-else
name="list"
2022-07-16 23:28:13 +05:30
:attributes-list="attributesList"
:is-attribute-checked="isAttributeChecked"
:update-attribute="updateAttribute"
2021-09-04 01:27:46 +05:30
>
<gl-dropdown-item
v-for="attrItem in attributesList"
:key="attrItem.id"
:is-check-item="true"
:is-checked="isAttributeChecked(attrItem.id)"
2022-04-04 11:22:00 +05:30
:data-testid="`${formatIssuableAttribute.kebab}-items`"
2021-09-04 01:27:46 +05:30
@click="updateAttribute(attrItem.id)"
>
{{ attrItem.title }}
2021-09-30 23:02:18 +05:30
<span v-if="isAttributeOverdue(attrItem)">{{ $options.i18n.expired }}</span>
2021-09-04 01:27:46 +05:30
</gl-dropdown-item>
</slot>
</template>
</gl-dropdown>
</template>
</sidebar-editable-item>
</template>