diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-02-15 15:14:49 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-02-15 15:14:49 +0300 |
commit | 524e97262236b70abe4399faef040f4298c31d38 (patch) | |
tree | 20ee49eadaa5e5796e5e4b9d35b43c866f4b37f9 /app/assets/javascripts/sidebar | |
parent | e7e44c0e4ce493bb103b0fd98f8dd3c90928d291 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/sidebar')
3 files changed, 48 insertions, 35 deletions
diff --git a/app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue b/app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue index 0de4cb2e59f..ec23e817127 100644 --- a/app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue +++ b/app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue @@ -10,6 +10,7 @@ import { GlIcon, GlTooltipDirective, } from '@gitlab/ui'; +import { kebabCase, snakeCase } from 'lodash'; import createFlash from '~/flash'; import { getIdFromGraphQLId } from '~/graphql_shared/utils'; import { IssuableType } from '~/issues/constants'; @@ -221,6 +222,12 @@ export default { // MV to EE https://gitlab.com/gitlab-org/gitlab/-/issues/345311 return this.issuableAttribute === IssuableType.Epic; }, + formatIssuableAttribute() { + return { + kebab: kebabCase(this.issuableAttribute), + snake: snakeCase(this.issuableAttribute), + }; + }, }, methods: { updateAttribute(attributeId) { @@ -300,26 +307,28 @@ export default { <sidebar-editable-item ref="editable" :title="attributeTypeTitle" - :data-testid="`${issuableAttribute}-edit`" + :data-testid="`${formatIssuableAttribute.kebab}-edit`" :tracking="tracking" :loading="updating || loading" @open="handleOpen" @close="handleClose" > <template #collapsed> + <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" /> + <span class="collapse-truncated-title"> + {{ attributeTitle }} + </span> + </div> + </slot> <div - v-if="isClassicSidebar" - v-gl-tooltip.left.viewport - :title="attributeTypeTitle" - class="sidebar-collapsed-icon" - > - <gl-icon :size="16" :aria-label="attributeTypeTitle" :name="attributeTypeIcon" /> - <span class="collapse-truncated-title"> - {{ attributeTitle }} - </span> - </div> - <div - :data-testid="`select-${issuableAttribute}`" + :data-testid="`select-${formatIssuableAttribute.kebab}`" :class="isClassicSidebar ? 'hide-collapsed' : 'gl-mt-3'" > <span v-if="updating" class="gl-font-weight-bold">{{ selectedTitle }}</span> @@ -337,7 +346,7 @@ export default { v-gl-tooltip="tooltipText" class="gl-text-gray-900! gl-font-weight-bold" :href="attributeUrl" - :data-qa-selector="`${issuableAttribute}_link`" + :data-qa-selector="`${formatIssuableAttribute.snake}_link`" > {{ attributeTitle }} <span v-if="isAttributeOverdue(currentAttribute)">{{ $options.i18n.expired }}</span> @@ -359,7 +368,7 @@ export default { > <gl-search-box-by-type ref="search" v-model="searchTerm" /> <gl-dropdown-item - :data-testid="`no-${issuableAttribute}-item`" + :data-testid="`no-${formatIssuableAttribute.kebab}-item`" :is-check-item="true" :is-checked="isAttributeChecked($options.noAttributeId)" @click="updateAttribute($options.noAttributeId)" @@ -389,7 +398,7 @@ export default { :key="attrItem.id" :is-check-item="true" :is-checked="isAttributeChecked(attrItem.id)" - :data-testid="`${issuableAttribute}-items`" + :data-testid="`${formatIssuableAttribute.kebab}-items`" @click="updateAttribute(attrItem.id)" > {{ attrItem.title }} diff --git a/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue b/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue index 7c157fe2775..bb90ef8e444 100644 --- a/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue +++ b/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue @@ -38,7 +38,10 @@ export default { </script> <template> - <div data-testid="helpPane" class="time-tracking-help-state"> + <div + data-testid="helpPane" + class="sidebar-help-state gl-bg-white gl-border-gray-100 gl-border-t-solid gl-border-b-solid gl-border-1" + > <div class="time-tracking-info"> <h4>{{ __('Track time with quick actions') }}</h4> <p>{{ __('Quick actions can be used in description and comment boxes.') }}</p> diff --git a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue b/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue index 91c67a03dfb..d222a2af382 100644 --- a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue +++ b/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue @@ -1,5 +1,5 @@ <script> -import { GlIcon, GlLink, GlModal, GlModalDirective, GlLoadingIcon } from '@gitlab/ui'; +import { GlIcon, GlLink, GlModal, GlButton, GlModalDirective, GlLoadingIcon } from '@gitlab/ui'; import { IssuableType } from '~/issues/constants'; import { s__, __ } from '~/locale'; import { timeTrackingQueries } from '~/sidebar/constants'; @@ -21,6 +21,7 @@ export default { GlIcon, GlLink, GlModal, + GlButton, GlLoadingIcon, TimeTrackingCollapsedState, TimeTrackingSpentOnlyPane, @@ -187,7 +188,11 @@ export default { </script> <template> - <div v-cloak class="time-tracker time-tracking-component-wrap" data-testid="time-tracker"> + <div + v-cloak + class="time-tracker time-tracking-component-wrap sidebar-help-wrap" + data-testid="time-tracker" + > <time-tracking-collapsed-state v-if="showCollapsed" :show-comparison-state="showComparisonState" @@ -198,25 +203,21 @@ export default { :time-spent-human-readable="humanTotalTimeSpent" :time-estimate-human-readable="humanTimeEstimate" /> - <div class="hide-collapsed gl-line-height-20 gl-text-gray-900"> + <div + class="hide-collapsed gl-line-height-20 gl-text-gray-900 gl-display-flex gl-align-items-center" + > {{ __('Time tracking') }} <gl-loading-icon v-if="isTimeTrackingInfoLoading" size="sm" inline /> - <div - v-if="!showHelpState" - data-testid="helpButton" - class="help-button float-right" - @click="toggleHelpState(true)" + <gl-button + :data-testid="showHelpState ? 'closeHelpButton' : 'helpButton'" + category="tertiary" + size="small" + variant="link" + class="gl-ml-auto" + @click="toggleHelpState(!showHelpState)" > - <gl-icon name="question-o" /> - </div> - <div - v-else - data-testid="closeHelpButton" - class="close-help-button float-right" - @click="toggleHelpState(false)" - > - <gl-icon name="close" /> - </div> + <gl-icon :name="showHelpState ? 'close' : 'question-o'" class="gl-text-gray-900!" /> + </gl-button> </div> <div v-if="!isTimeTrackingInfoLoading" class="hide-collapsed"> <div v-if="showEstimateOnlyState" data-testid="estimateOnlyPane"> |