diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/sidebar')
10 files changed, 322 insertions, 122 deletions
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/copyable_field.vue b/app/assets/javascripts/vue_shared/components/sidebar/copyable_field.vue index 5c3a6852219..6538de085b0 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/copyable_field.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/copyable_field.vue @@ -62,7 +62,7 @@ export default { <div> <clipboard-button v-if="!isLoading" - css-class="sidebar-collapsed-icon dont-change-state gl-rounded-0! gl-hover-bg-transparent" + css-class="sidebar-collapsed-icon js-dont-change-state gl-rounded-0! gl-hover-bg-transparent" v-bind="clipboardProps" /> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/mutations.js b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/mutations.js index 8853dc8b9e3..0ea22eb7aea 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/mutations.js +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/mutations.js @@ -1,4 +1,5 @@ import { isScopedLabel, scopedLabelKey } from '~/lib/utils/common_utils'; +import { SCOPED_LABEL_DELIMITER } from '~/vue_shared/components/sidebar/labels_select_widget/constants'; import { DropdownVariant } from '../constants'; import * as types from './mutation_types'; @@ -66,10 +67,10 @@ export default { } if (isScopedLabel(candidateLabel)) { - const scopedBase = scopedLabelKey(candidateLabel); - const currentActiveScopedLabel = state.labels.find(({ title }) => { - return title.startsWith(scopedBase) && title !== '' && title !== candidateLabel.title; - }); + const scopedKeyWithDelimiter = `${scopedLabelKey(candidateLabel)}${SCOPED_LABEL_DELIMITER}`; + const currentActiveScopedLabel = state.labels.find( + ({ title }) => title.startsWith(scopedKeyWithDelimiter) && title !== candidateLabel.title, + ); if (currentActiveScopedLabel) { currentActiveScopedLabel.set = false; diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/constants.js b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/constants.js index 00c54313292..389eb174c0e 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/constants.js +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/constants.js @@ -1,3 +1,5 @@ +export const SCOPED_LABEL_DELIMITER = '::'; + export const DropdownVariant = { Sidebar: 'sidebar', Standalone: 'standalone', diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents.vue index 0fcc67c0ffa..3ee0baf8812 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents.vue @@ -1,9 +1,9 @@ <script> import { GlButton, GlDropdown, GlDropdownItem, GlLink } from '@gitlab/ui'; - +import { __, s__, sprintf } from '~/locale'; import DropdownContentsCreateView from './dropdown_contents_create_view.vue'; import DropdownContentsLabelsView from './dropdown_contents_labels_view.vue'; -import { isDropdownVariantSidebar, isDropdownVariantEmbedded } from './utils'; +import { isDropdownVariantStandalone, isDropdownVariantSidebar } from './utils'; export default { components: { @@ -48,10 +48,30 @@ export default { type: String, required: true, }, + issuableType: { + type: String, + required: true, + }, + isVisible: { + type: Boolean, + required: false, + default: false, + }, + fullPath: { + type: String, + required: true, + }, + attrWorkspacePath: { + type: String, + required: false, + default: undefined, + }, }, data() { return { showDropdownContentsCreateView: false, + localSelectedLabels: [...this.selectedLabels], + isDirty: false, }; }, computed: { @@ -64,28 +84,66 @@ export default { dropdownTitle() { return this.showDropdownContentsCreateView ? this.labelsCreateTitle : this.labelsListTitle; }, + buttonText() { + if (!this.localSelectedLabels.length) { + return this.dropdownButtonText || __('Label'); + } else if (this.localSelectedLabels.length > 1) { + return sprintf(s__('LabelSelect|%{firstLabelName} +%{remainingLabelCount} more'), { + firstLabelName: this.localSelectedLabels[0].title, + remainingLabelCount: this.localSelectedLabels.length - 1, + }); + } + return this.localSelectedLabels[0].title; + }, showDropdownFooter() { - return ( - !this.showDropdownContentsCreateView && - (this.isDropdownVariantSidebar(this.variant) || - this.isDropdownVariantEmbedded(this.variant)) - ); + return !this.showDropdownContentsCreateView && !this.isStandalone; + }, + isStandalone() { + return isDropdownVariantStandalone(this.variant); }, }, - methods: { - showDropdown() { - this.$refs.dropdown.show(); + watch: { + localSelectedLabels: { + handler() { + this.isDirty = true; + }, + deep: true, + }, + isVisible(newVal) { + if (newVal) { + this.$refs.dropdown.show(); + this.isDirty = false; + } else { + this.$refs.dropdown.hide(); + this.setLabels(); + } }, + selectedLabels(newVal) { + this.localSelectedLabels = newVal; + }, + }, + methods: { toggleDropdownContentsCreateView() { this.showDropdownContentsCreateView = !this.showDropdownContentsCreateView; }, toggleDropdownContent() { this.toggleDropdownContentsCreateView(); // Required to recalculate dropdown position as its size changes - this.$refs.dropdown.$refs.dropdown.$_popper.scheduleUpdate(); + if (this.$refs.dropdown?.$refs.dropdown) { + this.$refs.dropdown.$refs.dropdown.$_popper.scheduleUpdate(); + } + }, + setLabels() { + if (!this.isDirty) { + return; + } + this.$emit('setLabels', this.localSelectedLabels); + }, + handleDropdownHide() { + if (!isDropdownVariantSidebar(this.variant)) { + this.setLabels(); + } }, - isDropdownVariantSidebar, - isDropdownVariantEmbedded, }, }; </script> @@ -93,14 +151,16 @@ export default { <template> <gl-dropdown ref="dropdown" - :text="dropdownButtonText" + :text="buttonText" class="gl-w-full gl-mt-2" data-qa-selector="labels_dropdown_content" + @hide="handleDropdownHide" > <template #header> <div - v-if="isDropdownVariantSidebar(variant) || isDropdownVariantEmbedded(variant)" + v-if="!isStandalone" class="dropdown-title gl-display-flex gl-align-items-center gl-pt-0 gl-pb-3!" + data-testid="dropdown-header" > <gl-button v-if="showDropdownContentsCreateView" @@ -119,27 +179,33 @@ export default { size="small" class="dropdown-header-button gl-p-0!" icon="close" + data-testid="close-button" @click="$emit('closeDropdown')" /> </div> </template> - <component - :is="dropdownContentsView" - :selected-labels="selectedLabels" - :allow-multiselect="allowMultiselect" - @hideCreateView="toggleDropdownContentsCreateView" - @setLabels="$emit('setLabels', $event)" - /> + <template #default> + <component + :is="dropdownContentsView" + v-model="localSelectedLabels" + :selected-labels="selectedLabels" + :allow-multiselect="allowMultiselect" + :issuable-type="issuableType" + :full-path="fullPath" + :attr-workspace-path="attrWorkspacePath" + @hideCreateView="toggleDropdownContentsCreateView" + /> + </template> <template #footer> <div v-if="showDropdownFooter" data-testid="dropdown-footer"> <gl-dropdown-item v-if="allowLabelCreate" data-testid="create-label-button" - @click.native.capture.stop="toggleDropdownContent" + @click.capture.native.stop="toggleDropdownContent" > {{ footerCreateLabelTitle }} </gl-dropdown-item> - <gl-dropdown-item :href="labelsManagePath" @click.native.capture.stop> + <gl-dropdown-item :href="labelsManagePath" @click.capture.native.stop> {{ footerManageLabelTitle }} </gl-dropdown-item> </div> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view.vue index 2e31b386fdd..a2ed08e6b28 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view.vue @@ -2,9 +2,10 @@ import { GlTooltipDirective, GlButton, GlFormInput, GlLink, GlLoadingIcon } from '@gitlab/ui'; import produce from 'immer'; import createFlash from '~/flash'; +import { IssuableType } from '~/issue_show/constants'; import { __ } from '~/locale'; +import { labelsQueries } from '~/sidebar/constants'; import createLabelMutation from './graphql/create_label.mutation.graphql'; -import projectLabelsQuery from './graphql/project_labels.query.graphql'; const errorMessage = __('Error creating label.'); @@ -18,9 +19,19 @@ export default { directives: { GlTooltip: GlTooltipDirective, }, - inject: { - projectPath: { - default: '', + props: { + issuableType: { + type: String, + required: true, + }, + fullPath: { + type: String, + required: true, + }, + attrWorkspacePath: { + type: String, + required: false, + default: undefined, }, }, data() { @@ -38,6 +49,27 @@ export default { const colorsMap = gon.suggested_label_colors; return Object.keys(colorsMap).map((color) => ({ [color]: colorsMap[color] })); }, + mutationVariables() { + if (this.issuableType === IssuableType.Epic) { + return { + title: this.labelTitle, + color: this.selectedColor, + groupPath: this.fullPath, + }; + } + + return this.attrWorkspacePath !== undefined + ? { + title: this.labelTitle, + color: this.selectedColor, + groupPath: this.attrWorkspacePath, + } + : { + title: this.labelTitle, + color: this.selectedColor, + projectPath: this.fullPath, + }; + }, }, methods: { getColorCode(color) { @@ -51,8 +83,8 @@ export default { }, updateLabelsInCache(store, label) { const sourceData = store.readQuery({ - query: projectLabelsQuery, - variables: { fullPath: this.projectPath, searchTerm: '' }, + query: labelsQueries[this.issuableType].workspaceQuery, + variables: { fullPath: this.fullPath, searchTerm: '' }, }); const collator = new Intl.Collator('en'); @@ -63,8 +95,8 @@ export default { }); store.writeQuery({ - query: projectLabelsQuery, - variables: { fullPath: this.projectPath, searchTerm: '' }, + query: labelsQueries[this.issuableType].workspaceQuery, + variables: { fullPath: this.fullPath, searchTerm: '' }, data, }); }, @@ -75,11 +107,7 @@ export default { data: { labelCreate }, } = await this.$apollo.mutate({ mutation: createLabelMutation, - variables: { - title: this.labelTitle, - color: this.selectedColor, - projectPath: this.projectPath, - }, + variables: this.mutationVariables, update: ( store, { diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_labels_view.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_labels_view.vue index 857367a0721..e6a25362ff0 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_labels_view.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_labels_view.vue @@ -1,12 +1,18 @@ <script> -import { GlDropdownForm, GlDropdownItem, GlLoadingIcon, GlSearchBoxByType } from '@gitlab/ui'; +import { + GlDropdownForm, + GlDropdownItem, + GlLoadingIcon, + GlSearchBoxByType, + GlIntersectionObserver, +} from '@gitlab/ui'; import fuzzaldrinPlus from 'fuzzaldrin-plus'; import { debounce } from 'lodash'; import createFlash from '~/flash'; import { getIdFromGraphQLId } from '~/graphql_shared/utils'; import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants'; import { __ } from '~/locale'; -import projectLabelsQuery from './graphql/project_labels.query.graphql'; +import { labelsQueries } from '~/sidebar/constants'; import LabelItem from './label_item.vue'; export default { @@ -15,9 +21,12 @@ export default { GlDropdownItem, GlLoadingIcon, GlSearchBoxByType, + GlIntersectionObserver, LabelItem, }, - inject: ['projectPath'], + model: { + prop: 'localSelectedLabels', + }, props: { selectedLabels: { type: Array, @@ -27,30 +36,44 @@ export default { type: Boolean, required: true, }, + issuableType: { + type: String, + required: true, + }, + localSelectedLabels: { + type: Array, + required: true, + }, + fullPath: { + type: String, + required: true, + }, }, data() { return { searchKey: '', labels: [], - localSelectedLabels: [...this.selectedLabels], + isVisible: false, }; }, apollo: { labels: { - query: projectLabelsQuery, + query() { + return labelsQueries[this.issuableType].workspaceQuery; + }, variables() { return { - fullPath: this.projectPath, + fullPath: this.fullPath, searchTerm: this.searchKey, }; }, skip() { - return this.searchKey.length === 1; + return this.searchKey.length === 1 || !this.isVisible; }, update: (data) => data.workspace?.labels?.nodes || [], async result() { if (this.$refs.searchInput) { - await this.$nextTick(); + await this.$nextTick; this.$refs.searchInput.focusInput(); } }, @@ -64,7 +87,7 @@ export default { return this.$apollo.queries.labels.loading; }, localSelectedLabelsIds() { - return this.localSelectedLabels.map((label) => label.id); + return this.localSelectedLabels.map((label) => getIdFromGraphQLId(label.id)); }, visibleLabels() { if (this.searchKey) { @@ -82,7 +105,6 @@ export default { this.debouncedSearchKeyUpdate = debounce(this.setSearchKey, DEFAULT_DEBOUNCE_AND_THROTTLE_MS); }, beforeDestroy() { - this.$emit('setLabels', this.localSelectedLabels); this.debouncedSearchKeyUpdate.cancel(); }, methods: { @@ -109,16 +131,21 @@ export default { } }, updateSelectedLabels(label) { + let labels; if (this.isLabelSelected(label)) { - this.localSelectedLabels = this.localSelectedLabels.filter( - ({ id }) => id !== getIdFromGraphQLId(label.id), + labels = this.localSelectedLabels.filter( + ({ id }) => id !== getIdFromGraphQLId(label.id) && id !== label.id, ); } else { - this.localSelectedLabels.push({ - ...label, - id: getIdFromGraphQLId(label.id), - }); + labels = [ + ...this.localSelectedLabels, + { + ...label, + id: getIdFromGraphQLId(label.id), + }, + ]; } + this.$emit('input', labels); }, handleLabelClick(label) { this.updateSelectedLabels(label); @@ -129,46 +156,52 @@ export default { setSearchKey(value) { this.searchKey = value; }, + onDropdownAppear() { + this.isVisible = true; + this.$refs.searchInput.focusInput(); + }, }, }; </script> <template> - <gl-dropdown-form class="labels-select-contents-list js-labels-list"> - <gl-search-box-by-type - ref="searchInput" - :value="searchKey" - :disabled="labelsFetchInProgress" - data-qa-selector="dropdown_input_field" - data-testid="dropdown-input-field" - @input="debouncedSearchKeyUpdate" - /> - <div ref="labelsListContainer" data-testid="dropdown-content"> - <gl-loading-icon - v-if="labelsFetchInProgress" - class="labels-fetch-loading gl-align-items-center gl-w-full gl-h-full" - size="md" + <gl-intersection-observer @appear="onDropdownAppear"> + <gl-dropdown-form class="labels-select-contents-list js-labels-list"> + <gl-search-box-by-type + ref="searchInput" + :value="searchKey" + :disabled="labelsFetchInProgress" + data-qa-selector="dropdown_input_field" + data-testid="dropdown-input-field" + @input="debouncedSearchKeyUpdate" /> - <template v-else> - <gl-dropdown-item - v-for="label in visibleLabels" - :key="label.id" - :is-checked="isLabelSelected(label)" - :is-check-centered="true" - :is-check-item="true" - data-testid="labels-list" - @click.native.capture.stop="handleLabelClick(label)" - > - <label-item :label="label" /> - </gl-dropdown-item> - <gl-dropdown-item - v-show="showNoMatchingResultsMessage" - class="gl-p-3 gl-text-center" - data-testid="no-results" - > - {{ __('No matching results') }} - </gl-dropdown-item> - </template> - </div> - </gl-dropdown-form> + <div ref="labelsListContainer" data-testid="dropdown-content"> + <gl-loading-icon + v-if="labelsFetchInProgress" + class="labels-fetch-loading gl-align-items-center gl-w-full gl-h-full gl-mb-3" + size="md" + /> + <template v-else> + <gl-dropdown-item + v-for="label in visibleLabels" + :key="label.id" + :is-checked="isLabelSelected(label)" + :is-check-centered="true" + :is-check-item="true" + data-testid="labels-list" + @click.native.capture.stop="handleLabelClick(label)" + > + <label-item :label="label" /> + </gl-dropdown-item> + <gl-dropdown-item + v-show="showNoMatchingResultsMessage" + class="gl-p-3 gl-text-center" + data-testid="no-results" + > + {{ __('No matching results') }} + </gl-dropdown-item> + </template> + </div> + </gl-dropdown-form> + </gl-intersection-observer> </template> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/graphql/epic_labels.query.graphql b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/graphql/epic_labels.query.graphql new file mode 100644 index 00000000000..a2e8579486f --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/graphql/epic_labels.query.graphql @@ -0,0 +1,15 @@ +query epicLabels($fullPath: ID!, $iid: ID) { + workspace: group(fullPath: $fullPath) { + issuable: epic(iid: $iid) { + id + labels { + nodes { + id + title + color + description + } + } + } + } +} diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/graphql/group_labels.query.graphql b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/graphql/group_labels.query.graphql new file mode 100644 index 00000000000..acc9bcd2015 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/graphql/group_labels.query.graphql @@ -0,0 +1,12 @@ +query groupLabels($fullPath: ID!, $searchTerm: String) { + workspace: group(fullPath: $fullPath) { + labels(searchTerm: $searchTerm, onlyGroupLabels: true) { + nodes { + id + title + color + description + } + } + } +} diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue index 3c834770563..6bd43da2203 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue @@ -1,21 +1,18 @@ <script> -import Vue from 'vue'; -import Vuex from 'vuex'; +import createFlash from '~/flash'; import { __ } from '~/locale'; import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue'; +import { labelsQueries } from '~/sidebar/constants'; import { DropdownVariant } from './constants'; import DropdownContents from './dropdown_contents.vue'; import DropdownValue from './dropdown_value.vue'; import DropdownValueCollapsed from './dropdown_value_collapsed.vue'; -import issueLabelsQuery from './graphql/issue_labels.query.graphql'; import { isDropdownVariantSidebar, isDropdownVariantStandalone, isDropdownVariantEmbedded, } from './utils'; -Vue.use(Vuex); - export default { components: { DropdownValue, @@ -23,8 +20,21 @@ export default { DropdownValueCollapsed, SidebarEditableItem, }, - inject: ['iid', 'projectPath', 'allowLabelEdit'], + inject: { + allowLabelEdit: { + default: false, + }, + }, props: { + iid: { + type: String, + required: false, + default: '', + }, + fullPath: { + type: String, + required: true, + }, allowLabelRemove: { type: Boolean, required: false, @@ -90,43 +100,60 @@ export default { required: false, default: false, }, + issuableType: { + type: String, + required: true, + }, + attrWorkspacePath: { + type: String, + required: false, + default: undefined, + }, }, data() { return { contentIsOnViewport: true, - issueLabels: [], + issuableLabels: [], }; }, + computed: { + isLoading() { + return this.labelsSelectInProgress || this.$apollo.queries.issuableLabels.loading; + }, + }, apollo: { - issueLabels: { - query: issueLabelsQuery, + issuableLabels: { + query() { + return labelsQueries[this.issuableType].issuableQuery; + }, + skip() { + return !isDropdownVariantSidebar(this.variant); + }, variables() { return { iid: this.iid, - fullPath: this.projectPath, + fullPath: this.fullPath, }; }, update(data) { return data.workspace?.issuable?.labels.nodes || []; }, + error() { + createFlash({ message: __('Error fetching labels.') }); + }, }, }, methods: { handleDropdownClose(labels) { - if (labels.length) this.$emit('updateSelectedLabels', labels); - this.$emit('onDropdownClose'); + this.$emit('updateSelectedLabels', labels); + this.collapseEditableItem(); }, - collapseDropdown() { - this.$refs.editable.collapse(); + collapseEditableItem() { + this.$refs.editable?.collapse(); }, handleCollapsedValueClick() { this.$emit('toggleCollapse'); }, - showDropdown() { - this.$nextTick(() => { - this.$refs.dropdownContents.showDropdown(); - }); - }, isDropdownVariantSidebar, isDropdownVariantStandalone, isDropdownVariantEmbedded, @@ -145,20 +172,19 @@ export default { <template v-if="isDropdownVariantSidebar(variant)"> <dropdown-value-collapsed ref="dropdownButtonCollapsed" - :labels="issueLabels" + :labels="issuableLabels" @onValueClick="handleCollapsedValueClick" /> <sidebar-editable-item ref="editable" :title="__('Labels')" - :loading="labelsSelectInProgress" + :loading="isLoading" :can-edit="allowLabelEdit" - @open="showDropdown" > <template #collapsed> <dropdown-value :disable-labels="labelsSelectInProgress" - :selected-labels="issueLabels" + :selected-labels="issuableLabels" :allow-label-remove="allowLabelRemove" :labels-filter-base-path="labelsFilterBasePath" :labels-filter-param="labelsFilterParam" @@ -170,7 +196,7 @@ export default { <template #default="{ edit }"> <dropdown-value :disable-labels="labelsSelectInProgress" - :selected-labels="issueLabels" + :selected-labels="issuableLabels" :allow-label-remove="allowLabelRemove" :labels-filter-base-path="labelsFilterBasePath" :labels-filter-param="labelsFilterParam" @@ -180,8 +206,6 @@ export default { <slot></slot> </dropdown-value> <dropdown-contents - v-if="edit" - ref="dropdownContents" :dropdown-button-text="dropdownButtonText" :allow-multiselect="allowMultiselect" :labels-list-title="labelsListTitle" @@ -190,11 +214,30 @@ export default { :labels-create-title="labelsCreateTitle" :selected-labels="selectedLabels" :variant="variant" - @closeDropdown="collapseDropdown" + :issuable-type="issuableType" + :is-visible="edit" + :full-path="fullPath" + :attr-workspace-path="attrWorkspacePath" @setLabels="handleDropdownClose" + @closeDropdown="collapseEditableItem" /> </template> </sidebar-editable-item> </template> + <dropdown-contents + v-else + ref="dropdownContents" + :allow-multiselect="allowMultiselect" + :dropdown-button-text="dropdownButtonText" + :labels-list-title="labelsListTitle" + :footer-create-label-title="footerCreateLabelTitle" + :footer-manage-label-title="footerManageLabelTitle" + :labels-create-title="labelsCreateTitle" + :selected-labels="selectedLabels" + :variant="variant" + :issuable-type="issuableType" + :full-path="fullPath" + @setLabels="handleDropdownClose" + /> </div> </template> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/todo_toggle/todo_button.stories.js b/app/assets/javascripts/vue_shared/components/sidebar/todo_toggle/todo_button.stories.js index d2afc02233e..294e5bd9f90 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/todo_toggle/todo_button.stories.js +++ b/app/assets/javascripts/vue_shared/components/sidebar/todo_toggle/todo_button.stories.js @@ -4,7 +4,7 @@ import TodoButton from './todo_button.vue'; export default { component: TodoButton, - title: 'vue_shared/components/todo_toggle/todo_button', + title: 'vue_shared/components/sidebar/todo_toggle/todo_button', }; const Template = (args, { argTypes }) => ({ |