diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/issuable')
6 files changed, 102 insertions, 21 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 25799171905..2644befc902 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,8 +1,8 @@ <script> 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'; +import { DropdownVariant } from '~/sidebar/components/labels/labels_select_vue/constants'; +import LabelsSelect from '~/sidebar/components/labels/labels_select_vue/labels_select_root.vue'; export default { LabelSelectVariant: DropdownVariant, diff --git a/app/assets/javascripts/vue_shared/issuable/create/components/issuable_label_selector.vue b/app/assets/javascripts/vue_shared/issuable/create/components/issuable_label_selector.vue new file mode 100644 index 00000000000..b3f9c8d9fcd --- /dev/null +++ b/app/assets/javascripts/vue_shared/issuable/create/components/issuable_label_selector.vue @@ -0,0 +1,92 @@ +<script> +import { GlFormGroup, GlIcon } from '@gitlab/ui'; +import { getIdFromGraphQLId } from '~/graphql_shared/utils'; +import LabelsSelect from '~/sidebar/components/labels/labels_select_widget/labels_select_root.vue'; +import { __ } from '~/locale'; + +export default { + components: { + GlFormGroup, + GlIcon, + LabelsSelect, + }, + inject: [ + 'allowLabelRemove', + 'attrWorkspacePath', + 'fieldName', + 'fullPath', + 'labelsFilterBasePath', + 'initialLabels', + 'issuableType', + 'labelType', + 'variant', + 'workspaceType', + ], + data() { + return { + selectedLabels: this.initialLabels || [], + }; + }, + methods: { + handleUpdateSelectedLabels({ labels }) { + this.selectedLabels = labels.map((label) => ({ ...label, id: getIdFromGraphQLId(label.id) })); + }, + handleLabelRemove(labelId) { + this.selectedLabels = this.selectedLabels.filter((label) => label.id !== labelId); + }, + }, + i18n: { + fieldLabel: __('Labels'), + dropdownButtonText: __('Select label'), + listTitle: __('Select label'), + createTitle: __('Create project label'), + manageTitle: __('Manage project labels'), + emptySelection: __('None'), + }, +}; +</script> + +<template> + <gl-form-group class="row" label-class="gl-display-none"> + <label class="col-12 gl-display-flex gl-align-center gl-mb-1"> + {{ $options.i18n.fieldLabel }} + <div class="gl-ml-3"> + <gl-icon name="labels" /> + <span class="gl-font-base gl-line-height-24">{{ selectedLabels.length }}</span> + </div> + </label> + <div class="col-12"> + <div class="issuable-form-select-holder"> + <input + v-for="selectedLabel in selectedLabels" + :key="selectedLabel.id" + :value="selectedLabel.id" + :name="fieldName" + type="hidden" + /> + <labels-select + class="block labels" + :allow-label-remove="allowLabelRemove" + :allow-multiselect="true" + :show-embedded-labels-list="true" + :full-path="fullPath" + :attr-workspace-path="attrWorkspacePath" + :labels-filter-base-path="labelsFilterBasePath" + :dropdown-button-text="$options.i18n.dropdownButtonText" + :labels-list-title="$options.i18n.listTitle" + :footer-create-label-title="$options.i18n.createTitle" + :footer-manage-label-title="$options.i18n.manageTitle" + :variant="variant" + :workspace-type="workspaceType" + :issuable-type="issuableType" + :label-create-type="labelType" + :selected-labels="selectedLabels" + @updateSelectedLabels="handleUpdateSelectedLabels" + @onLabelRemove="handleLabelRemove" + > + {{ $options.i18n.emptySelection }} + </labels-select> + </div> + </div> + </gl-form-group> +</template> 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 30b7b073ac3..5b303b9a314 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 @@ -318,8 +318,8 @@ export default { <slot name="statistics"></slot> <li v-if="showDiscussions" - data-testid="issuable-discussions" - class="issuable-comments gl-display-none gl-sm-display-block" + class="gl-display-none gl-sm-display-block" + data-testid="issuable-comments" > <gl-link v-gl-tooltip.top 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 dd3d7c8f4d6..5b6c5bf6e03 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 @@ -331,6 +331,7 @@ export default { <slot name="sidebar-items" :checked-issuables="bulkEditIssuables"></slot> </template> </issuable-bulk-edit-sidebar> + <slot name="list-body"></slot> <ul v-if="issuablesLoading" class="content-list"> <li v-for="n in skeletonItemCount" :key="n" class="issue gl-px-5! gl-py-5!"> <gl-skeleton-loader /> diff --git a/app/assets/javascripts/vue_shared/issuable/show/components/issuable_description.vue b/app/assets/javascripts/vue_shared/issuable/show/components/issuable_description.vue index d4e9120ff17..ce1851ab873 100644 --- a/app/assets/javascripts/vue_shared/issuable/show/components/issuable_description.vue +++ b/app/assets/javascripts/vue_shared/issuable/show/components/issuable_description.vue @@ -1,7 +1,6 @@ <script> -import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui'; -import $ from 'jquery'; -import '~/behaviors/markdown/render_gfm'; +import SafeHtml from '~/vue_shared/directives/safe_html'; +import { renderGFM } from '~/behaviors/markdown/render_gfm'; export default { directives: { @@ -26,12 +25,7 @@ export default { }, }, mounted() { - this.renderGFM(); - }, - methods: { - renderGFM() { - $(this.$refs.gfmContainer).renderGFM(); - }, + renderGFM(this.$refs.gfmContainer); }, }; </script> 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 35124bd15d2..fd94245b7c9 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 @@ -1,12 +1,6 @@ <script> -import { - GlIcon, - GlBadge, - GlButton, - GlIntersectionObserver, - GlTooltipDirective, - GlSafeHtmlDirective as SafeHtml, -} from '@gitlab/ui'; +import { GlIcon, GlBadge, GlButton, GlIntersectionObserver, GlTooltipDirective } from '@gitlab/ui'; +import SafeHtml from '~/vue_shared/directives/safe_html'; import { __ } from '~/locale'; import { IssuableStates } from '~/vue_shared/issuable/list/constants'; |