Commit e7010863 authored by Phil Hughes's avatar Phil Hughes

Merge branch 'kp-fix-missing-create-manage-labels-issue-board' into 'master'

Fix create & manage label actions in Labels dropdown

See merge request gitlab-org/gitlab!40511
parents 3f40c4b2 81ca8ce7
......@@ -29,6 +29,10 @@ export default {
type: String,
required: true,
},
labelsWebUrl: {
type: String,
required: true,
},
scopedIssueBoardFeatureEnabled: {
type: Boolean,
required: false,
......@@ -198,6 +202,7 @@ export default {
:board="board"
:can-admin-board="canAdminBoard"
:labels-path="labelsPath"
:labels-web-url="labelsWebUrl"
:enable-scoped-labels="enableScopedLabels"
:project-id="projectId"
:group-id="groupId"
......
......@@ -61,6 +61,10 @@ export default {
type: String,
required: true,
},
labelsWebUrl: {
type: String,
required: true,
},
projectId: {
type: Number,
required: true,
......@@ -332,6 +336,7 @@ export default {
<board-form
v-if="currentPage"
:labels-path="labelsPath"
:labels-web-url="labelsWebUrl"
:project-id="projectId"
:group-id="groupId"
:can-admin-board="canAdminBoard"
......
......@@ -14,7 +14,10 @@ import DropdownSearchInput from './dropdown_search_input.vue';
import DropdownFooter from './dropdown_footer.vue';
import DropdownCreateLabel from './dropdown_create_label.vue';
import { DropdownVariant } from '../labels_select_vue/constants';
export default {
DropdownVariant,
components: {
DropdownTitle,
DropdownValue,
......@@ -80,6 +83,11 @@ export default {
required: false,
default: false,
},
variant: {
type: String,
required: false,
default: DropdownVariant.Sidebar,
},
},
computed: {
hiddenInputName() {
......@@ -123,7 +131,7 @@ export default {
<template>
<div class="block labels js-labels-block">
<dropdown-value-collapsed
v-if="showCreate"
v-if="showCreate && variant === $options.DropdownVariant.Sidebar"
:labels="context.labels"
@onValueClick="handleCollapsedValueClick"
/>
......@@ -150,18 +158,21 @@ export default {
:labels-path="labelsPath"
:namespace="namespace"
:labels="context.labels"
:show-extra-options="!showCreate"
: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"
class="dropdown-menu dropdown-select dropdown-menu-paging dropdown-menu-labels dropdown-menu-selectable"
>
<div class="dropdown-page-one">
<dropdown-header v-if="showCreate" />
<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 /></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"
......
<script>
import { GlTooltipDirective } from '@gitlab/ui';
import { __ } from '~/locale';
export default {
directives: {
GlTooltip: GlTooltipDirective,
},
props: {
headerTitle: {
type: String,
......@@ -10,7 +14,11 @@ export default {
},
},
created() {
this.suggestedColors = gon.suggested_label_colors;
const rawLabelsColors = gon.suggested_label_colors;
this.suggestedColors = Object.keys(rawLabelsColors).map(colorCode => ({
colorCode,
title: rawLabelsColors[colorCode],
}));
},
};
</script>
......@@ -46,10 +54,12 @@ export default {
<a
v-for="(color, index) in suggestedColors"
:key="index"
:data-color="color"
v-gl-tooltip
:data-color="color.colorCode"
:style="{
backgroundColor: color,
backgroundColor: color.colorCode,
}"
:title="color.title"
href="#"
>
&nbsp;
......
......@@ -171,6 +171,13 @@
}
}
.labels {
// Prevent double scroll-bars for labels dropdown.
.dropdown-menu-toggle.wide + .dropdown-select {
max-height: unset;
}
}
.gl-dropdown .dropdown-menu-toggle {
padding-right: $gl-padding-8;
......
......@@ -10,6 +10,7 @@
can_admin_board: can?(current_user, :admin_board, parent).to_s,
multiple_issue_boards_available: parent.multiple_issue_boards_available?.to_s,
labels_path: labels_filter_path_with_defaults(only_group_labels: true, include_descendant_groups: true),
labels_web_url: parent.is_a?(Project) ? project_labels_path(@project) : group_labels_path(@group),
project_id: @project&.id,
group_id: @group&.id,
scoped_issue_board_feature_enabled: Gitlab.ee? && parent.feature_available?(:scoped_issue_board) ? 'true' : 'false',
......
---
title: Fix create & manage label actions in Labels dropdown
merge_request: 40511
author:
type: fixed
......@@ -31,6 +31,10 @@ export default {
type: String,
required: true,
},
labelsWebUrl: {
type: String,
required: true,
},
enableScopedLabels: {
type: Boolean,
required: false,
......@@ -110,13 +114,15 @@ export default {
<board-labels-select
:context="board"
:labels-path="labelsPath"
:labels-web-url="labelsWebUrl"
:can-edit="canAdminBoard"
:show-create="canAdminBoard"
:enable-scoped-labels="enableScopedLabels"
variant="standalone"
ability-name="issue"
@onLabelClick="handleLabelClick"
>{{ __('Any label') }}</board-labels-select
>
{{ __('Any label') }}
</board-labels-select>
<assignee-select
:board="board"
......
......@@ -4,6 +4,7 @@ require 'spec_helper'
RSpec.describe 'Scoped issue boards', :js do
include FilteredSearchHelpers
include MobileHelpers
let(:user) { create(:user) }
let(:group) { create(:group, :public) }
......@@ -34,10 +35,16 @@ RSpec.describe 'Scoped issue boards', :js do
login_as(user)
# ensure there is enough vertical space for create/edit board modal
resize_window(1920, 1080)
visit project_boards_path(project)
wait_for_requests
end
after do
restore_window_size
end
context 'new board' do
context 'milestone' do
it 'creates board filtering by milestone' do
......
......@@ -15,6 +15,7 @@ describe('BoardScope', () => {
assignee: {},
},
labelsPath: `${TEST_HOST}/labels`,
labelsWebUrl: `${TEST_HOST}/-/labels`,
};
wrapper = mount(BoardScope, {
......
......@@ -11,6 +11,7 @@ describe('board_form.vue', () => {
const propsData = {
canAdminBoard: false,
labelsPath: `${TEST_HOST}/labels/path`,
labelsWebUrl: `${TEST_HOST}/-/labels`,
};
const findModal = () => wrapper.find(DeprecatedModal);
......
......@@ -86,6 +86,7 @@ describe('BoardsSelector', () => {
canAdminBoard: true,
multipleIssueBoardsAvailable: true,
labelsPath: `${TEST_HOST}/labels/path`,
labelsWebUrl: `${TEST_HOST}/labels`,
projectId: 42,
groupId: 19,
scopedIssueBoardFeatureEnabled: true,
......
......@@ -14,6 +14,7 @@ const createComponent = headerTitle => {
};
describe('DropdownCreateLabelComponent', () => {
const colorsCount = Object.keys(mockSuggestedColors).length;
let vm;
beforeEach(() => {
......@@ -27,7 +28,7 @@ describe('DropdownCreateLabelComponent', () => {
describe('created', () => {
it('initializes `suggestedColors` prop on component from `gon.suggested_color_labels` object', () => {
expect(vm.suggestedColors.length).toBe(mockSuggestedColors.length);
expect(vm.suggestedColors.length).toBe(colorsCount);
});
});
......@@ -78,11 +79,11 @@ describe('DropdownCreateLabelComponent', () => {
const colorsListContainerEl = vm.$el.querySelector('.suggest-colors.suggest-colors-dropdown');
expect(colorsListContainerEl).not.toBe(null);
expect(colorsListContainerEl.querySelectorAll('a').length).toBe(mockSuggestedColors.length);
expect(colorsListContainerEl.querySelectorAll('a').length).toBe(colorsCount);
const colorItemEl = colorsListContainerEl.querySelectorAll('a')[0];
expect(colorItemEl.dataset.color).toBe(vm.suggestedColors[0]);
expect(colorItemEl.dataset.color).toBe(vm.suggestedColors[0].colorCode);
expect(colorItemEl.getAttribute('style')).toBe('background-color: rgb(0, 51, 204);');
});
......
......@@ -15,29 +15,29 @@ export const mockLabels = [
},
];
export const mockSuggestedColors = [
'#0033CC',
'#428BCA',
'#44AD8E',
'#A8D695',
'#5CB85C',
'#69D100',
'#004E00',
'#34495E',
'#7F8C8D',
'#A295D6',
'#5843AD',
'#8E44AD',
'#FFECDB',
'#AD4363',
'#D10069',
'#CC0033',
'#FF0000',
'#D9534F',
'#D1D100',
'#F0AD4E',
'#AD8D43',
];
export const mockSuggestedColors = {
'#0033CC': 'UA blue',
'#428BCA': 'Moderate blue',
'#44AD8E': 'Lime green',
'#A8D695': 'Feijoa',
'#5CB85C': 'Slightly desaturated green',
'#69D100': 'Bright green',
'#004E00': 'Very dark lime green',
'#34495E': 'Very dark desaturated blue',
'#7F8C8D': 'Dark grayish cyan',
'#A295D6': 'Slightly desaturated blue',
'#5843AD': 'Dark moderate blue',
'#8E44AD': 'Dark moderate violet',
'#FFECDB': 'Very pale orange',
'#AD4363': 'Dark moderate pink',
'#D10069': 'Strong pink',
'#CC0033': 'Strong red',
'#FF0000': 'Pure red',
'#D9534F': 'Soft red',
'#D1D100': 'Strong yellow',
'#F0AD4E': 'Soft orange',
'#AD8D43': 'Dark moderate orange',
};
export const mockConfig = {
showCreate: true,
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment