diff options
Diffstat (limited to 'app/assets/javascripts/sidebar/components')
13 files changed, 54 insertions, 166 deletions
diff --git a/app/assets/javascripts/sidebar/components/assignees/assignee_avatar_link.vue b/app/assets/javascripts/sidebar/components/assignees/assignee_avatar_link.vue index 2c6eb0e5001..820d2e94016 100644 --- a/app/assets/javascripts/sidebar/components/assignees/assignee_avatar_link.vue +++ b/app/assets/javascripts/sidebar/components/assignees/assignee_avatar_link.vue @@ -2,46 +2,8 @@ import { GlTooltipDirective, GlLink } from '@gitlab/ui'; import { TYPE_ISSUE, TYPE_MERGE_REQUEST } from '~/issues/constants'; import { isGid, getIdFromGraphQLId } from '~/graphql_shared/utils'; -import { __ } from '~/locale'; -import { isUserBusy } from '~/set_status_modal/utils'; import AssigneeAvatar from './assignee_avatar.vue'; -const I18N = { - BUSY: __('Busy'), - CANNOT_MERGE: __('Cannot merge'), - LC_CANNOT_MERGE: __('cannot merge'), -}; - -const paranthesize = (str) => `(${str})`; - -const generateAssigneeTooltip = ({ - name, - availability, - cannotMerge = true, - tooltipHasName = false, -}) => { - if (!tooltipHasName) { - return cannotMerge ? I18N.CANNOT_MERGE : ''; - } - - const statusInformation = []; - if (availability && isUserBusy(availability)) { - statusInformation.push(I18N.BUSY); - } - - if (cannotMerge) { - statusInformation.push(I18N.LC_CANNOT_MERGE); - } - - if (tooltipHasName && statusInformation.length) { - const status = statusInformation.map(paranthesize).join(' '); - - return `${name} ${status}`; - } - - return name; -}; - export default { components: { AssigneeAvatar, @@ -55,16 +17,6 @@ export default { type: Object, required: true, }, - tooltipPlacement: { - type: String, - default: 'bottom', - required: false, - }, - tooltipHasName: { - type: Boolean, - default: true, - required: false, - }, issuableType: { type: String, default: TYPE_ISSUE, @@ -79,34 +31,10 @@ export default { const canMerge = this.user.mergeRequestInteraction?.canMerge || this.user.can_merge; return this.isMergeRequest && !canMerge; }, - tooltipTitle() { - const { name = '', availability = '' } = this.user; - return generateAssigneeTooltip({ - name, - availability, - cannotMerge: this.cannotMerge, - tooltipHasName: this.tooltipHasName, - }); - }, - tooltipOption() { - if (this.isMergeRequest) { - return null; - } - - return { - container: 'body', - placement: this.tooltipPlacement, - boundary: 'viewport', - }; - }, assigneeUrl() { return this.user.web_url || this.user.webUrl; }, assigneeId() { - if (this.isMergeRequest) { - return null; - } - return isGid(this.user.id) ? getIdFromGraphQLId(this.user.id) : this.user.id; }, }, @@ -116,10 +44,10 @@ export default { <template> <!-- must be `d-inline-block` or parent flex-basis causes width issues --> <gl-link - v-gl-tooltip="tooltipOption" :href="assigneeUrl" - :title="tooltipTitle" :data-user-id="assigneeId" + :data-username="user.username" + :data-cannot-merge="cannotMerge" data-placement="left" class="gl-display-inline-block js-user-link" > diff --git a/app/assets/javascripts/sidebar/components/assignees/assignee_title.vue b/app/assets/javascripts/sidebar/components/assignees/assignee_title.vue index 2a9100f0cb5..609a9355d20 100644 --- a/app/assets/javascripts/sidebar/components/assignees/assignee_title.vue +++ b/app/assets/javascripts/sidebar/components/assignees/assignee_title.vue @@ -1,15 +1,12 @@ <script> -import { GlLoadingIcon, GlIcon } from '@gitlab/ui'; +import { GlLoadingIcon } from '@gitlab/ui'; import { n__, __ } from '~/locale'; -import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; export default { name: 'AssigneeTitle', components: { GlLoadingIcon, - GlIcon, }, - mixins: [glFeatureFlagMixin()], props: { loading: { type: Boolean, @@ -24,11 +21,6 @@ export default { type: Boolean, required: true, }, - showToggle: { - type: Boolean, - required: false, - default: false, - }, changing: { type: Boolean, required: false, @@ -62,15 +54,5 @@ export default { > {{ titleCopy }} </a> - <a - v-if="showToggle" - :aria-label="__('Toggle sidebar')" - class="gutter-toggle float-right js-sidebar-toggle" - :class="{ 'gl-display-block gl-md-display-none!': glFeatures.movedMrSidebar }" - href="#" - role="button" - > - <gl-icon data-hidden="true" name="chevron-double-lg-right" :size="12" /> - </a> </div> </template> diff --git a/app/assets/javascripts/sidebar/components/assignees/collapsed_assignee_list.vue b/app/assets/javascripts/sidebar/components/assignees/collapsed_assignee_list.vue index 884edc97016..577c01c50ff 100644 --- a/app/assets/javascripts/sidebar/components/assignees/collapsed_assignee_list.vue +++ b/app/assets/javascripts/sidebar/components/assignees/collapsed_assignee_list.vue @@ -17,7 +17,7 @@ const generateCollapsedAssigneeTooltip = ({ renderUsers, allUsers, tooltipTitleM }); if (!allUsers.length) { - return __('Assignee(s)'); + return __('Assignees'); } if (allUsers.length > names.length) { names.push(sprintf(__('+ %{amount} more'), { amount: allUsers.length - names.length })); diff --git a/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue b/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue index 062f63175a7..0563ed8394c 100644 --- a/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue +++ b/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue @@ -27,11 +27,6 @@ export default { type: String, required: true, }, - signedIn: { - type: Boolean, - required: false, - default: false, - }, issuableType: { type: String, required: false, @@ -143,7 +138,6 @@ export default { :number-of-assignees="store.assignees.length" :loading="loading || store.isFetching.assignees" :editable="store.editable" - :show-toggle="!signedIn" :changing="store.changing" /> <assignees diff --git a/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue b/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue index b424d9074d0..930e7ff12d9 100644 --- a/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue +++ b/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue @@ -77,14 +77,13 @@ export default { v-for="(user, index) in uncollapsedUsers" :key="user.id" :class="{ - 'gl-mb-3': index !== users.length - 1, + 'gl-mb-3': index !== users.length - 1 || users.length > 5, }" class="assignee-grid gl-display-grid gl-align-items-center gl-w-full" > <assignee-avatar-link :user="user" :issuable-type="issuableType" - :tooltip-has-name="!isMergeRequest" class="gl-word-break-word" data-css-area="user" > diff --git a/app/assets/javascripts/sidebar/components/crm_contacts/crm_contacts.vue b/app/assets/javascripts/sidebar/components/crm_contacts/crm_contacts.vue index 916ff70a5ea..398a94356e2 100644 --- a/app/assets/javascripts/sidebar/components/crm_contacts/crm_contacts.vue +++ b/app/assets/javascripts/sidebar/components/crm_contacts/crm_contacts.vue @@ -4,10 +4,12 @@ import { __, n__, sprintf } from '~/locale'; import { createAlert } from '~/alert'; import { convertToGraphQLId, getIdFromGraphQLId } from '~/graphql_shared/utils'; import { TYPENAME_ISSUE } from '~/graphql_shared/constants'; +import { DOCS_URL_IN_EE_DIR } from 'jh_else_ce/lib/utils/url_utility'; import getIssueCrmContactsQuery from '../../queries/get_issue_crm_contacts.query.graphql'; import issueCrmContactsSubscription from '../../queries/issue_crm_contacts.subscription.graphql'; export default { + crmDocsLink: `${DOCS_URL_IN_EE_DIR}/user/crm/`, components: { GlIcon, GlLink, @@ -104,9 +106,7 @@ export default { <span> {{ contactCount }} </span> </div> <div class="hide-collapsed help-button gl-float-right"> - <gl-link href="https://docs.gitlab.com/ee/user/crm/" target="_blank" - ><gl-icon name="question-o" - /></gl-link> + <gl-link :href="$options.crmDocsLink" target="_blank"><gl-icon name="question-o" /></gl-link> </div> <div class="title hide-collapsed gl-mb-2 gl-line-height-20 gl-font-weight-bold"> {{ contactsLabel }} diff --git a/app/assets/javascripts/sidebar/components/labels/labels_select_vue/dropdown_contents.vue b/app/assets/javascripts/sidebar/components/labels/labels_select_vue/dropdown_contents.vue index 89a976d45fa..1c27df2418d 100644 --- a/app/assets/javascripts/sidebar/components/labels/labels_select_vue/dropdown_contents.vue +++ b/app/assets/javascripts/sidebar/components/labels/labels_select_vue/dropdown_contents.vue @@ -40,7 +40,6 @@ export default { <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" > <component :is="dropdownContentsView" /> diff --git a/app/assets/javascripts/sidebar/components/labels/labels_select_widget/dropdown_contents.vue b/app/assets/javascripts/sidebar/components/labels/labels_select_widget/dropdown_contents.vue index b44096c7743..53582aacabd 100644 --- a/app/assets/javascripts/sidebar/components/labels/labels_select_widget/dropdown_contents.vue +++ b/app/assets/javascripts/sidebar/components/labels/labels_select_widget/dropdown_contents.vue @@ -20,6 +20,11 @@ export default { GlDropdownItem, GlLink, }, + inject: { + toggleAttrs: { + default: () => ({}), + }, + }, props: { labelsCreateTitle: { type: String, @@ -204,7 +209,7 @@ export default { class="gl-w-full" block data-testid="labels-select-dropdown-contents" - data-qa-selector="labels_dropdown_content" + :toggle-attrs="toggleAttrs" @hide="handleDropdownHide" @shown="setFocus" > @@ -219,7 +224,7 @@ export default { @toggleDropdownContentsCreateView="toggleDropdownContent" @closeDropdown="hideDropdown" @input="debouncedSearchKeyUpdate" - @searchEnter="selectFirstItem" + @searchEnter.prevent="selectFirstItem" /> </template> <template #default> diff --git a/app/assets/javascripts/sidebar/components/lock/issuable_lock_form.vue b/app/assets/javascripts/sidebar/components/lock/issuable_lock_form.vue index 1d9233db361..1ea8ab19012 100644 --- a/app/assets/javascripts/sidebar/components/lock/issuable_lock_form.vue +++ b/app/assets/javascripts/sidebar/components/lock/issuable_lock_form.vue @@ -19,12 +19,12 @@ export default { locked: { icon: 'lock', class: 'value', - iconClass: 'is-active', + displayText: __('Locked'), }, unlocked: { class: ['no-value hide-collapsed'], icon: 'lock-open', - iconClass: '', + displayText: __('Unlocked'), }, components: { EditForm, @@ -49,8 +49,6 @@ export default { issueCapitalized: __('Issue'), mergeRequest: __('merge request'), mergeRequestCapitalized: __('Merge request'), - locked: __('Locked'), - unlocked: __('Unlocked'), lockingMergeRequest: __('Locking %{issuableDisplayName}'), unlockingMergeRequest: __('Unlocking %{issuableDisplayName}'), lockMergeRequest: __('Lock %{issuableDisplayName}'), @@ -84,10 +82,7 @@ export default { return this.getNoteableData.discussion_locked; }, lockStatus() { - return this.isLocked ? this.$options.i18n.locked : this.$options.i18n.unlocked; - }, - tooltipLabel() { - return this.isLocked ? this.$options.i18n.locked : this.$options.i18n.unlocked; + return this.isLocked ? this.$options.locked : this.$options.unlocked; }, lockToggleInProgressText() { return this.isLocked ? this.unlockingMergeRequestText : this.lockingMergeRequestText; @@ -205,7 +200,7 @@ export default { </gl-disclosure-dropdown-item> <div v-else class="block issuable-sidebar-item lock"> <div - v-gl-tooltip.left.viewport="{ title: tooltipLabel }" + v-gl-tooltip.left.viewport="{ title: lockStatus.displayText }" class="sidebar-collapsed-icon" data-testid="sidebar-collapse-icon" @click="toggleForm" @@ -239,7 +234,7 @@ export default { /> <div data-testid="lock-status" class="sidebar-item-value" :class="lockStatus.class"> - {{ lockStatus }} + {{ lockStatus.displayText }} </div> </div> </div> diff --git a/app/assets/javascripts/sidebar/components/participants/participants.vue b/app/assets/javascripts/sidebar/components/participants/participants.vue index bbd3cda0ad3..bad73273409 100644 --- a/app/assets/javascripts/sidebar/components/participants/participants.vue +++ b/app/assets/javascripts/sidebar/components/participants/participants.vue @@ -1,6 +1,7 @@ <script> import { GlButton, GlIcon, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui'; import { __, n__, sprintf } from '~/locale'; +import { getIdFromGraphQLId } from '~/graphql_shared/utils'; import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue'; export default { @@ -81,6 +82,9 @@ export default { toggleMoreParticipants() { this.isShowingMoreParticipants = !this.isShowingMoreParticipants; }, + getParticipantId(participantId) { + return getIdFromGraphQLId(participantId); + }, onClickCollapsedIcon() { this.$emit('toggleSidebar'); }, @@ -118,13 +122,14 @@ export default { > <a :href="participant.web_url || participant.webUrl" - class="author-link gl-display-inline-block gl-rounded-full" + :data-user-id="getParticipantId(participant.id)" + :data-username="participant.username" + class="author-link js-user-link gl-display-inline-block gl-rounded-full" > <user-avatar-image :lazy="lazy" :img-src="participant.avatar_url || participant.avatarUrl" :size="24" - :tooltip-text="participant.name" :img-alt="participant.name" css-classes="gl-mr-0!" tooltip-placement="bottom" diff --git a/app/assets/javascripts/sidebar/components/reviewers/collapsed_reviewer_list.vue b/app/assets/javascripts/sidebar/components/reviewers/collapsed_reviewer_list.vue index 6f82178b6fd..88a74784dd2 100644 --- a/app/assets/javascripts/sidebar/components/reviewers/collapsed_reviewer_list.vue +++ b/app/assets/javascripts/sidebar/components/reviewers/collapsed_reviewer_list.vue @@ -67,7 +67,7 @@ export default { const names = renderUsers.map((u) => u.name); if (!this.users.length) { - return __('Reviewer(s)'); + return __('Reviewers'); } if (this.users.length > names.length) { diff --git a/app/assets/javascripts/sidebar/components/reviewers/reviewer_avatar_link.vue b/app/assets/javascripts/sidebar/components/reviewers/reviewer_avatar_link.vue index 80c051f86b5..01787c97bca 100644 --- a/app/assets/javascripts/sidebar/components/reviewers/reviewer_avatar_link.vue +++ b/app/assets/javascripts/sidebar/components/reviewers/reviewer_avatar_link.vue @@ -3,7 +3,7 @@ // It will soon be overhauled in Issue https://gitlab.com/gitlab-org/gitlab/-/issues/233736 import { GlTooltipDirective, GlLink } from '@gitlab/ui'; import { TYPE_ISSUE, TYPE_MERGE_REQUEST } from '~/issues/constants'; -import { __, sprintf } from '~/locale'; +import { getIdFromGraphQLId } from '~/graphql_shared/utils'; import ReviewerAvatar from './reviewer_avatar.vue'; export default { @@ -23,16 +23,6 @@ export default { type: String, required: true, }, - tooltipPlacement: { - type: String, - default: 'bottom', - required: false, - }, - tooltipHasName: { - type: Boolean, - default: true, - required: false, - }, issuableType: { type: String, default: TYPE_ISSUE, @@ -45,21 +35,8 @@ export default { this.issuableType === TYPE_MERGE_REQUEST && !this.user.mergeRequestInteraction?.canMerge ); }, - tooltipTitle() { - if (this.cannotMerge && this.tooltipHasName) { - return sprintf(__('%{userName} (cannot merge)'), { userName: this.user.name }); - } else if (this.cannotMerge) { - return __('Cannot merge'); - } - - return ''; - }, - tooltipOption() { - return { - container: 'body', - placement: this.tooltipPlacement, - boundary: 'viewport', - }; + reviewerId() { + return getIdFromGraphQLId(this.user.id); }, reviewerUrl() { return this.user.webUrl; @@ -71,9 +48,11 @@ export default { <template> <!-- must be `d-inline-block` or parent flex-basis causes width issues --> <gl-link - v-gl-tooltip="tooltipOption" :href="reviewerUrl" - :title="tooltipTitle" + :data-user-id="reviewerId" + :data-username="user.username" + :data-cannot-merge="cannotMerge" + data-placement="left" class="gl-display-inline-block js-user-link" > <!-- use d-flex so that slot can be appropriately styled --> diff --git a/app/assets/javascripts/sidebar/components/severity/sidebar_severity_widget.vue b/app/assets/javascripts/sidebar/components/severity/sidebar_severity_widget.vue index 55de0ceb388..e2a3efa096f 100644 --- a/app/assets/javascripts/sidebar/components/severity/sidebar_severity_widget.vue +++ b/app/assets/javascripts/sidebar/components/severity/sidebar_severity_widget.vue @@ -1,5 +1,5 @@ <script> -import { GlDropdown, GlDropdownItem, GlTooltip, GlSprintf } from '@gitlab/ui'; +import { GlCollapsibleListbox, GlTooltip, GlSprintf } from '@gitlab/ui'; import { createAlert } from '~/alert'; import { TYPE_INCIDENT } from '~/issues/constants'; import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue'; @@ -12,8 +12,7 @@ export default { components: { GlTooltip, GlSprintf, - GlDropdown, - GlDropdownItem, + GlCollapsibleListbox, SeverityToken, SidebarEditableItem, }, @@ -57,6 +56,13 @@ export default { return []; } }, + dropdownItems() { + return this.severitiesList.map((severity) => ({ + text: severity.label, + value: severity.value, + severity, + })); + }, selectedItem() { return this.severitiesList.find((severity) => severity.value === this.severity); }, @@ -99,7 +105,7 @@ export default { }); }, showDropdown() { - this.$refs.dropdown.show(); + this.$refs.dropdown.open(); }, }, }; @@ -131,24 +137,20 @@ export default { </template> <template #default> - <gl-dropdown + <gl-collapsible-listbox ref="dropdown" class="gl-mt-3" block :header-text="__('Assign severity')" - :text="selectedItem.label" + :toggle-text="selectedItem.label" + :items="dropdownItems" + :selected="severity" + @select="updateSeverity" > - <gl-dropdown-item - v-for="option in severitiesList" - :key="option.value" - data-testid="severityDropdownItem" - is-check-item - :is-checked="option.value === severity" - @click="updateSeverity(option.value)" - > - <severity-token :severity="option" /> - </gl-dropdown-item> - </gl-dropdown> + <template #list-item="{ item }"> + <severity-token :severity="item.severity" /> + </template> + </gl-collapsible-listbox> </template> </sidebar-editable-item> </div> |