diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/sidebar/labels_select')
9 files changed, 0 insertions, 607 deletions
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue deleted file mode 100644 index 88c4d132d61..00000000000 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue +++ /dev/null @@ -1,191 +0,0 @@ -<script> -import { GlLoadingIcon } from '@gitlab/ui'; -import $ from 'jquery'; -import LabelsSelect from '~/labels_select'; -import { __ } from '~/locale'; -import DropdownHiddenInput from '~/vue_shared/components/dropdown/dropdown_hidden_input.vue'; - -import { DropdownVariant } from '../labels_select_vue/constants'; -import DropdownButton from './dropdown_button.vue'; -import DropdownCreateLabel from './dropdown_create_label.vue'; -import DropdownFooter from './dropdown_footer.vue'; -import DropdownHeader from './dropdown_header.vue'; -import DropdownSearchInput from './dropdown_search_input.vue'; -import DropdownTitle from './dropdown_title.vue'; -import DropdownValue from './dropdown_value.vue'; -import DropdownValueCollapsed from './dropdown_value_collapsed.vue'; - -export default { - DropdownVariant, - components: { - DropdownTitle, - DropdownValue, - DropdownValueCollapsed, - DropdownButton, - DropdownHiddenInput, - DropdownHeader, - DropdownSearchInput, - DropdownFooter, - DropdownCreateLabel, - GlLoadingIcon, - }, - props: { - showCreate: { - type: Boolean, - required: false, - default: false, - }, - isProject: { - type: Boolean, - required: false, - default: false, - }, - abilityName: { - type: String, - required: true, - }, - context: { - type: Object, - required: true, - }, - namespace: { - type: String, - required: false, - default: '', - }, - updatePath: { - type: String, - required: false, - default: '', - }, - labelsPath: { - type: String, - required: true, - }, - labelsWebUrl: { - type: String, - required: false, - default: '', - }, - labelFilterBasePath: { - type: String, - required: false, - default: '', - }, - canEdit: { - type: Boolean, - required: false, - default: false, - }, - enableScopedLabels: { - type: Boolean, - required: false, - default: false, - }, - variant: { - type: String, - required: false, - default: DropdownVariant.Sidebar, - }, - }, - computed: { - hiddenInputName() { - return this.showCreate ? `${this.abilityName}[label_names][]` : 'label_id[]'; - }, - createLabelTitle() { - if (this.isProject) { - return __('Create project label'); - } - - return __('Create group label'); - }, - manageLabelsTitle() { - if (this.isProject) { - return __('Manage project labels'); - } - - return __('Manage group labels'); - }, - }, - mounted() { - this.labelsDropdown = new LabelsSelect(this.$refs.dropdownButton, { - handleClick: this.handleClick, - }); - $(this.$refs.dropdown).on('hidden.gl.dropdown', this.handleDropdownHidden); - }, - methods: { - handleClick(label) { - this.$emit('onLabelClick', label); - }, - handleCollapsedValueClick() { - this.$emit('toggleCollapse'); - }, - handleDropdownHidden() { - this.$emit('onDropdownClose'); - }, - }, -}; -</script> - -<template> - <div class="block labels js-labels-block"> - <dropdown-value-collapsed - v-if="showCreate && variant === $options.DropdownVariant.Sidebar" - :labels="context.labels" - @onValueClick="handleCollapsedValueClick" - /> - <dropdown-title :can-edit="canEdit" /> - <dropdown-value - :labels="context.labels" - :label-filter-base-path="labelFilterBasePath" - :enable-scoped-labels="enableScopedLabels" - > - <slot></slot> - </dropdown-value> - <div v-if="canEdit" class="selectbox js-selectbox" style="display: none"> - <dropdown-hidden-input - v-for="label in context.labels" - :key="label.id" - :name="hiddenInputName" - :value="label.id" - /> - <div ref="dropdown" class="dropdown"> - <dropdown-button - :ability-name="abilityName" - :field-name="hiddenInputName" - :update-path="updatePath" - :labels-path="labelsPath" - :namespace="namespace" - :labels="context.labels" - :show-extra-options="!showCreate || variant !== $options.DropdownVariant.Sidebar" - :enable-scoped-labels="enableScopedLabels" - /> - <div - class="dropdown-menu dropdown-select dropdown-menu-paging dropdown-menu-labels dropdown-menu-selectable" - > - <div class="dropdown-page-one"> - <dropdown-header v-if="showCreate && variant === $options.DropdownVariant.Sidebar" /> - <dropdown-search-input /> - <div class="dropdown-content" data-qa-selector="labels_dropdown_content"></div> - <div class="dropdown-loading"> - <gl-loading-icon - class="gl-display-flex gl-justify-content-center gl-align-items-center gl-h-full" - /> - </div> - <dropdown-footer - v-if="showCreate" - :labels-web-url="labelsWebUrl" - :create-label-title="createLabelTitle" - :manage-labels-title="manageLabelsTitle" - /> - </div> - <dropdown-create-label - v-if="showCreate" - :is-project="isProject" - :header-title="createLabelTitle" - /> - </div> - </div> - </div> - </div> -</template> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button.vue deleted file mode 100644 index 94cf1f84ec3..00000000000 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button.vue +++ /dev/null @@ -1,86 +0,0 @@ -<script> -import { GlIcon } from '@gitlab/ui'; -import { __, s__, sprintf } from '~/locale'; - -export default { - components: { - GlIcon, - }, - props: { - abilityName: { - type: String, - required: true, - }, - fieldName: { - type: String, - required: true, - }, - updatePath: { - type: String, - required: true, - }, - labelsPath: { - type: String, - required: true, - }, - namespace: { - type: String, - required: true, - }, - labels: { - type: Array, - required: true, - }, - showExtraOptions: { - type: Boolean, - required: true, - }, - enableScopedLabels: { - type: Boolean, - required: false, - default: false, - }, - }, - computed: { - dropdownToggleText() { - if (this.labels.length === 0) { - return __('Label'); - } - - if (this.labels.length > 1) { - return sprintf(s__('LabelSelect|%{firstLabelName} +%{remainingLabelCount} more'), { - firstLabelName: this.labels[0].title, - remainingLabelCount: this.labels.length - 1, - }); - } - - return this.labels[0].title; - }, - }, -}; -</script> - -<template> - <!-- eslint-disable @gitlab/vue-no-data-toggle --> - <button - ref="dropdownButton" - :class="{ 'js-extra-options': showExtraOptions }" - :data-ability-name="abilityName" - :data-field-name="fieldName" - :data-issue-update="updatePath" - :data-labels="labelsPath" - :data-namespace-path="namespace" - :data-show-any="showExtraOptions" - :data-scoped-labels="enableScopedLabels" - type="button" - class="dropdown-menu-toggle wide js-label-select js-multiselect js-context-config-modal" - data-toggle="dropdown" - > - <span class="dropdown-toggle-text"> {{ dropdownToggleText }} </span> - <gl-icon - name="chevron-down" - class="gl-absolute gl-top-3 gl-right-3 gl-text-gray-500" - :size="16" - /> - </button> -</template> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue deleted file mode 100644 index 795f16f4efc..00000000000 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue +++ /dev/null @@ -1,92 +0,0 @@ -<script> -import { GlButton, GlTooltipDirective } from '@gitlab/ui'; -import { __ } from '~/locale'; - -export default { - components: { - GlButton, - }, - directives: { - GlTooltip: GlTooltipDirective, - }, - props: { - headerTitle: { - type: String, - required: false, - default: () => __('Create new label'), - }, - }, - created() { - const rawLabelsColors = gon.suggested_label_colors; - this.suggestedColors = Object.keys(rawLabelsColors).map((colorCode) => ({ - colorCode, - title: rawLabelsColors[colorCode], - })); - }, -}; -</script> - -<template> - <div class="dropdown-page-two dropdown-new-label"> - <div - class="dropdown-title gl-display-flex gl-justify-content-space-between gl-align-items-center" - > - <gl-button - :aria-label="__('Go back')" - category="tertiary" - class="dropdown-menu-back" - icon="arrow-left" - size="small" - /> - {{ headerTitle }} - <gl-button - :aria-label="__('Close')" - category="tertiary" - class="dropdown-menu-close" - icon="close" - size="small" - /> - </div> - <div class="dropdown-content"> - <div class="dropdown-labels-error js-label-error"></div> - <input - id="new_label_name" - :placeholder="__('Name new label')" - type="text" - class="default-dropdown-input" - /> - <div class="suggest-colors suggest-colors-dropdown"> - <a - v-for="(color, index) in suggestedColors" - :key="index" - v-gl-tooltip - :data-color="color.colorCode" - :style="{ - backgroundColor: color.colorCode, - }" - :title="color.title" - href="#" - > - - </a> - </div> - <div class="dropdown-label-color-input"> - <div class="dropdown-label-color-preview js-dropdown-label-color-preview"></div> - <input - id="new_label_color" - :placeholder="__('Assign custom color like #FF0000')" - type="text" - class="default-dropdown-input" - /> - </div> - <div class="clearfix"> - <gl-button category="secondary" class="float-left js-new-label-btn disabled"> - {{ __('Create') }} - </gl-button> - <gl-button category="secondary" class="float-right js-cancel-label-btn"> - {{ __('Cancel') }} - </gl-button> - </div> - </div> - </div> -</template> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer.vue deleted file mode 100644 index ebbd8d119b5..00000000000 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer.vue +++ /dev/null @@ -1,37 +0,0 @@ -<script> -import { __ } from '~/locale'; - -export default { - props: { - labelsWebUrl: { - type: String, - required: true, - }, - createLabelTitle: { - type: String, - required: false, - default: () => __('Create new label'), - }, - manageLabelsTitle: { - type: String, - required: false, - default: () => __('Manage labels'), - }, - }, -}; -</script> - -<template> - <div class="dropdown-footer"> - <ul class="dropdown-footer-list"> - <li> - <a href="#" class="dropdown-toggle-page"> {{ createLabelTitle }} </a> - </li> - <li> - <a :href="labelsWebUrl" data-is-link="true" class="dropdown-external-link"> - {{ manageLabelsTitle }} - </a> - </li> - </ul> - </div> -</template> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header.vue deleted file mode 100644 index 4f505b9e678..00000000000 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header.vue +++ /dev/null @@ -1,22 +0,0 @@ -<script> -import { GlIcon } from '@gitlab/ui'; - -export default { - components: { - GlIcon, - }, -}; -</script> - -<template> - <div class="dropdown-title gl-display-flex gl-justify-content-center"> - <span class="gl-ml-auto">{{ __('Assign labels') }}</span> - <button - :aria-label="__('Close')" - type="button" - class="dropdown-title-button dropdown-menu-close gl-ml-auto" - > - <gl-icon name="close" class="dropdown-menu-close-icon" /> - </button> - </div> -</template> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input.vue deleted file mode 100644 index 6222dfc5853..00000000000 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input.vue +++ /dev/null @@ -1,28 +0,0 @@ -<script> -import { GlIcon } from '@gitlab/ui'; - -export default { - components: { - GlIcon, - }, -}; -</script> - -<template> - <div class="dropdown-input"> - <input - :placeholder="__('Search')" - autocomplete="off" - class="dropdown-input-field" - type="search" - /> - <gl-icon - name="search" - class="dropdown-input-search gl-absolute gl-top-3 gl-right-5 gl-text-gray-300 gl-pointer-events-none" - /> - <gl-icon - name="close" - class="dropdown-input-clear js-dropdown-input-clear gl-absolute gl-top-3 gl-right-5 gl-text-gray-500" - /> - </div> -</template> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_title.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_title.vue deleted file mode 100644 index 91cf5d6bef5..00000000000 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_title.vue +++ /dev/null @@ -1,31 +0,0 @@ -<script> -import { GlLoadingIcon } from '@gitlab/ui'; - -export default { - components: { - GlLoadingIcon, - }, - props: { - canEdit: { - type: Boolean, - required: true, - }, - }, -}; -</script> - -<template> - <div class="title hide-collapsed gl-mb-3"> - {{ __('Labels') }} - <template v-if="canEdit"> - <gl-loading-icon inline class="align-text-top block-loading" /> - <button - type="button" - class="edit-link btn btn-blank float-right js-sidebar-dropdown-toggle" - data-qa-selector="labels_edit_button" - > - {{ __('Edit') }} - </button> - </template> - </div> -</template> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value.vue deleted file mode 100644 index 71d7069dd57..00000000000 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value.vue +++ /dev/null @@ -1,65 +0,0 @@ -<script> -import { GlLabel } from '@gitlab/ui'; -import { isScopedLabel } from '~/lib/utils/common_utils'; - -export default { - components: { - GlLabel, - }, - props: { - labels: { - type: Array, - required: true, - }, - labelFilterBasePath: { - type: String, - required: true, - }, - enableScopedLabels: { - type: Boolean, - required: false, - default: false, - }, - }, - computed: { - isEmpty() { - return this.labels.length === 0; - }, - }, - methods: { - labelFilterUrl(label) { - return `${this.labelFilterBasePath}?label_name[]=${encodeURIComponent(label.title)}`; - }, - scopedLabelsDescription({ description = '' }) { - return `<span class="font-weight-bold scoped-label-tooltip-title">Scoped label</span><br />${description}`; - }, - showScopedLabels(label) { - return this.enableScopedLabels && isScopedLabel(label); - }, - }, -}; -</script> - -<template> - <div - :class="{ - 'has-labels': !isEmpty, - }" - class="hide-collapsed value issuable-show-labels js-value" - > - <span v-if="isEmpty" class="text-secondary"> - <slot>{{ __('None') }}</slot> - </span> - - <template v-for="label in labels" v-else> - <gl-label - :key="label.id" - :target="labelFilterUrl(label)" - :background-color="label.color" - :title="label.title" - :description="label.description" - :scoped="showScopedLabels(label)" - /> - </template> - </div> -</template> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue deleted file mode 100644 index 122250d1ce7..00000000000 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue +++ /dev/null @@ -1,55 +0,0 @@ -<script> -import { GlIcon, GlTooltipDirective } from '@gitlab/ui'; -import { s__, sprintf } from '~/locale'; - -export default { - directives: { - GlTooltip: GlTooltipDirective, - }, - components: { - GlIcon, - }, - props: { - labels: { - type: Array, - required: true, - }, - }, - computed: { - labelsList() { - const labelsString = this.labels.length - ? this.labels - .slice(0, 5) - .map((label) => label.title) - .join(', ') - : s__('LabelSelect|Labels'); - - if (this.labels.length > 5) { - return sprintf(s__('LabelSelect|%{labelsString}, and %{remainingLabelCount} more'), { - labelsString, - remainingLabelCount: this.labels.length - 5, - }); - } - - return labelsString; - }, - }, - methods: { - handleClick() { - this.$emit('onValueClick'); - }, - }, -}; -</script> - -<template> - <div - v-gl-tooltip.left.viewport - :title="labelsList" - class="sidebar-collapsed-icon" - @click="handleClick" - > - <gl-icon name="labels" /> - <span>{{ labels.length }}</span> - </div> -</template> |