diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/issuable')
6 files changed, 76 insertions, 16 deletions
diff --git a/app/assets/javascripts/vue_shared/issuable/create/components/issuable_form.vue b/app/assets/javascripts/vue_shared/issuable/create/components/issuable_form.vue index c216a05bdb0..0758cb507e9 100644 --- a/app/assets/javascripts/vue_shared/issuable/create/components/issuable_form.vue +++ b/app/assets/javascripts/vue_shared/issuable/create/components/issuable_form.vue @@ -1,5 +1,5 @@ <script> -import { GlForm, GlFormInput } from '@gitlab/ui'; +import { GlForm, GlFormInput, GlFormGroup } from '@gitlab/ui'; import MarkdownField from '~/vue_shared/components/markdown/field.vue'; import { DropdownVariant } from '~/vue_shared/components/sidebar/labels_select_vue/constants'; import LabelsSelect from '~/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue'; @@ -9,6 +9,7 @@ export default { components: { GlForm, GlFormInput, + GlFormGroup, MarkdownField, LabelsSelect, }, @@ -37,6 +38,7 @@ export default { selectedLabels: [], }; }, + computed: {}, methods: { handleUpdateSelectedLabels(labels) { if (labels.length) { @@ -52,12 +54,15 @@ export default { <div data-testid="issuable-title" class="form-group row"> <label for="issuable-title" class="col-form-label col-sm-2">{{ __('Title') }}</label> <div class="col-sm-10"> - <gl-form-input - id="issuable-title" - v-model="issuableTitle" - :autofocus="true" - :placeholder="__('Title')" - /> + <gl-form-group :description="__('Maximum of 255 characters')"> + <gl-form-input + id="issuable-title" + v-model="issuableTitle" + maxlength="255" + :autofocus="true" + :placeholder="__('Title')" + /> + </gl-form-group> </div> </div> <div data-testid="issuable-description" class="form-group row"> diff --git a/app/assets/javascripts/vue_shared/issuable/list/components/issuable_item.vue b/app/assets/javascripts/vue_shared/issuable/list/components/issuable_item.vue index 8008b85bbdb..6453290f6ea 100644 --- a/app/assets/javascripts/vue_shared/issuable/list/components/issuable_item.vue +++ b/app/assets/javascripts/vue_shared/issuable/list/components/issuable_item.vue @@ -55,7 +55,7 @@ export default { return createdSecondsAgo < SECONDS_IN_DAY; }, author() { - return this.issuable.author; + return this.issuable.author || {}; }, webUrl() { return this.issuable.gitlabWebUrl || this.issuable.webUrl; @@ -215,7 +215,7 @@ export default { <span class="gl-display-none gl-sm-display-inline"> <span aria-hidden="true">·</span> <span class="issuable-authored gl-mr-3"> - <gl-sprintf :message="__('created %{timeAgo} by %{author}')"> + <gl-sprintf v-if="author.name" :message="__('created %{timeAgo} by %{author}')"> <template #timeAgo> <span v-gl-tooltip.bottom @@ -241,6 +241,17 @@ export default { </gl-link> </template> </gl-sprintf> + <gl-sprintf v-else :message="__('created %{timeAgo}')"> + <template #timeAgo> + <span + v-gl-tooltip.bottom + :title="tooltipTitle(issuable.createdAt)" + data-testid="issuable-created-at" + > + {{ createdAt }} + </span> + </template> + </gl-sprintf> </span> <slot name="timeframe"></slot> </span> diff --git a/app/assets/javascripts/vue_shared/issuable/list/components/issuable_list_root.vue b/app/assets/javascripts/vue_shared/issuable/list/components/issuable_list_root.vue index 20f178dfb7d..8b293b2e9f6 100644 --- a/app/assets/javascripts/vue_shared/issuable/list/components/issuable_list_root.vue +++ b/app/assets/javascripts/vue_shared/issuable/list/components/issuable_list_root.vue @@ -168,6 +168,11 @@ export default { required: false, default: '', }, + syncFilterAndSort: { + type: Boolean, + required: false, + default: false, + }, }, data() { return { @@ -282,6 +287,7 @@ export default { :sort-options="sortOptions" :initial-filter-value="initialFilterValue" :initial-sort-by="initialSortBy" + :sync-filter-and-sort="syncFilterAndSort" :show-checkbox="showBulkEditSidebar" :checkbox-checked="allIssuablesChecked" class="gl-flex-grow-1 gl-border-t-none row-content-block" diff --git a/app/assets/javascripts/vue_shared/issuable/show/components/issuable_header.vue b/app/assets/javascripts/vue_shared/issuable/show/components/issuable_header.vue index ee7e113af72..649dbd6576b 100644 --- a/app/assets/javascripts/vue_shared/issuable/show/components/issuable_header.vue +++ b/app/assets/javascripts/vue_shared/issuable/show/components/issuable_header.vue @@ -1,14 +1,23 @@ <script> -import { GlIcon, GlButton, GlTooltipDirective, GlAvatarLink, GlAvatarLabeled } from '@gitlab/ui'; +import { + GlIcon, + GlBadge, + GlButton, + GlTooltipDirective, + GlAvatarLink, + GlAvatarLabeled, +} from '@gitlab/ui'; import { getIdFromGraphQLId } from '~/graphql_shared/utils'; import { isExternal } from '~/lib/utils/url_utility'; import { n__, sprintf } from '~/locale'; import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; +import { IssuableStates } from '~/vue_shared/issuable/list/constants'; export default { components: { GlIcon, + GlBadge, GlButton, GlAvatarLink, GlAvatarLabeled, @@ -26,6 +35,11 @@ export default { type: Object, required: true, }, + issuableState: { + type: String, + required: false, + default: '', + }, statusBadgeClass: { type: String, required: false, @@ -36,6 +50,11 @@ export default { required: false, default: '', }, + statusIconClass: { + type: String, + required: false, + default: '', + }, blocked: { type: Boolean, required: false, @@ -53,6 +72,9 @@ export default { }, }, computed: { + badgeVariant() { + return this.issuableState === IssuableStates.Opened ? 'success' : 'info'; + }, authorId() { return getIdFromGraphQLId(`${this.author.id}`); }, @@ -71,6 +93,9 @@ export default { { completedCount, count }, ); }, + hasTasks() { + return this.taskCompletionStatus.count > 0; + }, }, mounted() { this.toggleSidebarButtonEl = document.querySelector('.js-toggle-right-sidebar-button'); @@ -88,10 +113,15 @@ export default { <template> <div class="detail-page-header"> <div class="detail-page-header-body"> - <div data-testid="status" class="issuable-status-box status-box" :class="statusBadgeClass"> - <gl-icon v-if="statusIcon" :name="statusIcon" class="d-block d-sm-none" /> - <span class="d-none d-sm-block"><slot name="status-badge"></slot></span> - </div> + <gl-badge + data-testid="status" + class="issuable-status-badge gl-mr-3" + :class="statusBadgeClass" + :variant="badgeVariant" + > + <gl-icon v-if="statusIcon" :name="statusIcon" :class="statusIconClass" /> + <span class="gl-display-none gl-sm-display-block"><slot name="status-badge"></slot></span> + </gl-badge> <div class="issuable-meta gl-display-flex gl-align-items-center d-md-inline-block"> <div v-if="blocked || confidential" class="gl-display-inline-block"> <div v-if="blocked" data-testid="blocked" class="issuable-warning-icon inline"> @@ -128,7 +158,7 @@ export default { <strong class="author d-sm-none d-inline">@{{ author.username }}</strong> </gl-avatar-link> <span - v-if="taskCompletionStatus" + v-if="taskCompletionStatus && hasTasks" data-testid="task-status" class="gl-display-none gl-md-display-block gl-lg-display-inline-block" >{{ taskStatusString }}</span diff --git a/app/assets/javascripts/vue_shared/issuable/show/components/issuable_show_root.vue b/app/assets/javascripts/vue_shared/issuable/show/components/issuable_show_root.vue index 8849af2a52e..c165ee91c59 100644 --- a/app/assets/javascripts/vue_shared/issuable/show/components/issuable_show_root.vue +++ b/app/assets/javascripts/vue_shared/issuable/show/components/issuable_show_root.vue @@ -27,6 +27,11 @@ export default { required: false, default: '', }, + statusIconClass: { + type: String, + required: false, + default: '', + }, enableEdit: { type: Boolean, required: false, @@ -102,8 +107,10 @@ export default { <template> <div class="issuable-show-container" data-qa-selector="issuable_show_container"> <issuable-header + :issuable-state="issuable.state" :status-badge-class="statusBadgeClass" :status-icon="statusIcon" + :status-icon-class="statusIconClass" :blocked="issuable.blocked" :confidential="issuable.confidential" :created-at="issuable.createdAt" @@ -122,6 +129,7 @@ export default { :issuable="issuable" :status-badge-class="statusBadgeClass" :status-icon="statusIcon" + :status-icon-class="statusIconClass" :enable-edit="enableEdit" :enable-autocomplete="enableAutocomplete" :enable-autosave="enableAutosave" diff --git a/app/assets/javascripts/vue_shared/issuable/show/components/issuable_title.vue b/app/assets/javascripts/vue_shared/issuable/show/components/issuable_title.vue index 45941174a62..47f05a2cee2 100644 --- a/app/assets/javascripts/vue_shared/issuable/show/components/issuable_title.vue +++ b/app/assets/javascripts/vue_shared/issuable/show/components/issuable_title.vue @@ -86,7 +86,7 @@ export default { > <p data-testid="status" - class="issuable-status-box status-box gl-my-0" + class="issuable-status-box status-box gl-white-space-nowrap gl-my-0" :class="statusBadgeClass" > <gl-icon :name="statusIcon" class="gl-display-block d-sm-none gl-h-6!" /> |