diff --git a/app/assets/javascripts/sidebar/components/labels/labels_select_widget/dropdown_contents_create_view.vue b/app/assets/javascripts/sidebar/components/labels/labels_select_widget/dropdown_contents_create_view.vue index 512709914276a96aad35d6077398a95ee25395d5..c93d73ac8469db737b0480e54af2b93a91ba26ce 100644 --- a/app/assets/javascripts/sidebar/components/labels/labels_select_widget/dropdown_contents_create_view.vue +++ b/app/assets/javascripts/sidebar/components/labels/labels_select_widget/dropdown_contents_create_view.vue @@ -148,7 +148,11 @@ export default { data-testid="label-title-input" /> - +
-import { GlFormInput, GlLink, GlTooltipDirective } from '@gitlab/ui'; +import { GlFormGroup, GlFormInput, GlLink, GlTooltipDirective } from '@gitlab/ui'; export default { components: { GlFormInput, GlLink, + GlFormGroup, }, directives: { GlTooltip: GlTooltipDirective, @@ -15,6 +16,16 @@ export default { required: false, default: '', }, + errorMessage: { + type: String, + required: false, + default: '', + }, + suggestedColors: { + type: Array, + required: false, + default: () => [], + }, autofocus: { type: Boolean, required: false, @@ -22,10 +33,6 @@ export default { }, }, computed: { - suggestedColors() { - const colorsMap = gon.suggested_label_colors; - return Object.keys(colorsMap).map((color) => ({ [color]: colorsMap[color] })); - }, selectedColor: { get() { return this.value; @@ -34,6 +41,9 @@ export default { this.handleColorClick(color); }, }, + validColor() { + return !this.errorMessage; + }, }, methods: { handleColorClick(color) { @@ -54,33 +64,44 @@ export default { }; diff --git a/app/assets/javascripts/sidebar/components/sidebar_color_view.vue b/app/assets/javascripts/sidebar/components/sidebar_color_view.vue index 1c9492a5b2e952f1f0786c6a868970d9b4184870..0ae15fcc6148aa05a04983d5e1a60f8152302507 100644 --- a/app/assets/javascripts/sidebar/components/sidebar_color_view.vue +++ b/app/assets/javascripts/sidebar/components/sidebar_color_view.vue @@ -10,6 +10,11 @@ export default { type: String, required: true, }, + colorName: { + type: String, + required: false, + default: '', + }, }, computed: { style() { @@ -25,9 +30,13 @@ export default { + + {{ colorName }} + - + diff --git a/ee/app/assets/javascripts/work_items/components/work_item_color_with_edit.vue b/ee/app/assets/javascripts/work_items/components/work_item_color_with_edit.vue index 003116557d36909a5d54c4008b7ba356845ece28..5cecd5af37ef69561f2904afcc06a48bf6790a3f 100644 --- a/ee/app/assets/javascripts/work_items/components/work_item_color_with_edit.vue +++ b/ee/app/assets/javascripts/work_items/components/work_item_color_with_edit.vue @@ -7,14 +7,15 @@ import { GlLoadingIcon, } from '@gitlab/ui'; import { validateHexColor } from '~/lib/utils/color_utils'; -import { __ } from '~/locale'; +import { __, s__ } from '~/locale'; import { I18N_WORK_ITEM_ERROR_UPDATING, sprintfWorkItem, WIDGET_TYPE_COLOR, TRACKING_CATEGORY_SHOW, + EPIC_COLORS, + DEFAULT_EPIC_COLORS, } from '~/work_items/constants'; -import { DEFAULT_COLOR } from '~/vue_shared/components/color_select_dropdown/constants'; import SidebarColorView from '~/sidebar/components/sidebar_color_view.vue'; import SidebarColorPicker from '~/sidebar/components/sidebar_color_picker.vue'; import updateWorkItemMutation from '~/work_items/graphql/update_work_item.mutation.graphql'; @@ -25,6 +26,7 @@ export default { colorLabel: __('Color'), }, inputId: 'color-widget-input', + suggestedColors: EPIC_COLORS, components: { GlForm, SidebarColorPicker, @@ -51,6 +53,7 @@ export default { currentColor: '', isEditing: false, isUpdating: false, + errorMessage: '', }; }, computed: { @@ -66,6 +69,19 @@ export default { color() { return this.workItemColorWidget?.color; }, + selectedColor() { + // Check if current color hex code matches a suggested color key + // If yes, return the named color from suggested color list + // If no, return Custom + if (this.suggestedColorKeys.includes(this.color?.toLowerCase())) { + return Object.values( + this.$options.suggestedColors.find( + (item) => Object.keys(item)[0] === this.color?.toLowerCase(), + ), + ).pop(); + } + return __('Custom'); + }, textColor() { return this.workItemColorWidget?.textColor; }, @@ -76,21 +92,39 @@ export default { property: `type_${this.workItemType}`, }; }, + suggestedColorKeys() { + return this.$options.suggestedColors.map((item) => { + return Object.keys(item).pop(); + }); + }, + }, + watch: { + currentColor() { + if (!validateHexColor(this.currentColor)) { + this.errorMessage = s__('WorkItem|Must be a valid hex code'); + } else if (this.suggestedColorKeys.includes(this.currentColor)) { + this.errorMessage = ''; + this.updateColor(); + } else { + this.errorMessage = ''; + } + }, }, created() { this.currentColor = this.color; }, methods: { async updateColor() { - if (!this.canUpdate || this.color === this.currentColor) { + if ( + !this.canUpdate || + this.color === this.currentColor || + !validateHexColor(this.currentColor) + ) { this.isEditing = false; return; } this.isUpdating = true; - this.currentColor = validateHexColor(this.currentColor) - ? this.currentColor - : DEFAULT_COLOR.color; try { const { @@ -137,13 +171,12 @@ export default { } }, resetColor() { - this.currentColor = null; + this.currentColor = DEFAULT_EPIC_COLORS; this.updateColor(); }, }, }; - diff --git a/ee/spec/frontend/work_items/components/work_item_color_with_edit_spec.js b/ee/spec/frontend/work_items/components/work_item_color_with_edit_spec.js index 1504c92983ff44f6856c6b80d94f5047cb52f3ac..1503b4c0f81216e050e34807df1fe661db270e8e 100644 --- a/ee/spec/frontend/work_items/components/work_item_color_with_edit_spec.js +++ b/ee/spec/frontend/work_items/components/work_item_color_with_edit_spec.js @@ -1,5 +1,5 @@ import { GlDisclosureDropdown } from '@gitlab/ui'; -import Vue from 'vue'; +import Vue, { nextTick } from 'vue'; import VueApollo from 'vue-apollo'; import createMockApollo from 'helpers/mock_apollo_helper'; import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper'; @@ -38,12 +38,6 @@ describe('WorkItemColor component', () => { .mockResolvedValue( updateWorkItemMutationResponseFactory({ colorWidgetPresent: true, color: selectedColor }), ); - const successUpdateWorkItemMutationDefaultColorHandler = jest.fn().mockResolvedValue( - updateWorkItemMutationResponseFactory({ - colorWidgetPresent: true, - color: DEFAULT_COLOR.color, - }), - ); const createComponent = ({ canUpdate = true, @@ -83,6 +77,7 @@ describe('WorkItemColor component', () => { it('renders the color view component with provided value', () => { expect(findSidebarColorView().exists()).toBe(true); expect(findSidebarColorView().props('color')).toBe(selectedColor); + expect(findSidebarColorView().props('colorName')).toBe('Custom'); }); it('does not render the color picker component and edit button', () => { @@ -109,8 +104,9 @@ describe('WorkItemColor component', () => { }); describe('when editing', () => { - beforeEach(() => { + beforeEach(async () => { createComponent({ workItem: mockWorkItem }); + await nextTick(); findEditButton().vm.$emit('click'); }); @@ -140,29 +136,24 @@ describe('WorkItemColor component', () => { }); }); - it.each` - color | inputColor | successHandler - ${selectedColor} | ${selectedColor} | ${successUpdateWorkItemMutationHandler} - ${DEFAULT_COLOR.color} | ${null} | ${successUpdateWorkItemMutationDefaultColorHandler} - `( - 'updates the color from $inputColor to $color if dropdown is closed after selecting input color', - async ({ color, inputColor, successHandler }) => { - createComponent({ mutationHandler: successHandler }); + it('updates the color if dropdown is closed after selecting input color', async () => { + createComponent({ mutationHandler: successUpdateWorkItemMutationHandler }); - selectColor(inputColor); + await nextTick(); - await waitForPromises(); + selectColor(selectedColor); + + await waitForPromises(); - expect(successHandler).toHaveBeenCalledWith({ - input: { - id: workItemColorWidget.id, - colorWidget: { - color, - }, + expect(successUpdateWorkItemMutationHandler).toHaveBeenCalledWith({ + input: { + id: workItemColorWidget.id, + colorWidget: { + color: selectedColor, }, - }); - }, - ); + }, + }); + }); it.each` errorType | expectedErrorMessage | failureHandler @@ -175,6 +166,8 @@ describe('WorkItemColor component', () => { mutationHandler: failureHandler, }); + await nextTick(); + selectColor(selectedColor); await waitForPromises(); @@ -187,9 +180,15 @@ describe('WorkItemColor component', () => { it('renders the title in the dropdown header', async () => { createComponent({ mountFn: mountExtended, stubs: { SidebarColorPicker: true } }); - + await nextTick(); await findEditButton().vm.$emit('click'); expect(findColorHeaderTitle().text()).toBe('Select a color'); }); + + it('renders the color name when preset color is applied', () => { + createComponent(); + + expect(findSidebarColorView().props('colorName')).toBe('Blue'); + }); }); diff --git a/locale/gitlab.pot b/locale/gitlab.pot index c5345c5f4f7e1f91698628dbc1fa1e3febb84ad4..18a1273623fb2400dd2ffad131ec5e08cb3cf3ac 100644 --- a/locale/gitlab.pot +++ b/locale/gitlab.pot @@ -57518,6 +57518,12 @@ msgstr "" msgid "WorkItem|Ancestor" msgstr "" +msgid "WorkItem|Apricot" +msgstr "" + +msgid "WorkItem|Aqua" +msgstr "" + msgid "WorkItem|Are you sure you want to cancel editing?" msgstr "" @@ -57538,6 +57544,9 @@ msgstr "" msgid "WorkItem|Blocking" msgstr "" +msgid "WorkItem|Blue" +msgstr "" + msgid "WorkItem|Cancel" msgstr "" @@ -57556,6 +57565,9 @@ msgstr "" msgid "WorkItem|Closed" msgstr "" +msgid "WorkItem|Coffee" +msgstr "" + msgid "WorkItem|Comments only" msgstr "" @@ -57571,6 +57583,9 @@ msgstr "" msgid "WorkItem|Create %{workItemType}" msgstr "" +msgid "WorkItem|Dark red" +msgstr "" + msgid "WorkItem|Dates" msgstr "" @@ -57598,6 +57613,9 @@ msgstr "" msgid "WorkItem|Fixed" msgstr "" +msgid "WorkItem|Forest green" +msgstr "" + msgid "WorkItem|History only" msgstr "" @@ -57619,6 +57637,12 @@ msgstr "" msgid "WorkItem|Key result" msgstr "" +msgid "WorkItem|Lavender" +msgstr "" + +msgid "WorkItem|Light blue" +msgstr "" + msgid "WorkItem|Link items together to show that they're related or that one is blocking others." msgstr "" @@ -57628,12 +57652,21 @@ msgstr "" msgid "WorkItem|Linked item removed" msgstr "" +msgid "WorkItem|Magenta" +msgstr "" + msgid "WorkItem|Mark as done" msgstr "" msgid "WorkItem|Milestone" msgstr "" +msgid "WorkItem|Mint green" +msgstr "" + +msgid "WorkItem|Must be a valid hex code" +msgstr "" + msgid "WorkItem|New %{workItemName}" msgstr "" @@ -57694,9 +57727,15 @@ msgstr "" msgid "WorkItem|Parent" msgstr "" +msgid "WorkItem|Pink" +msgstr "" + msgid "WorkItem|Promoted to objective." msgstr "" +msgid "WorkItem|Purple" +msgstr "" + msgid "WorkItem|Related to" msgstr "" @@ -57706,6 +57745,9 @@ msgstr "" msgid "WorkItem|Requirements" msgstr "" +msgid "WorkItem|Rose" +msgstr "" + msgid "WorkItem|Save and overwrite" msgstr "" @@ -57817,6 +57859,9 @@ msgstr "" msgid "WorkItem|Tasks" msgstr "" +msgid "WorkItem|Teal" +msgstr "" + msgid "WorkItem|Test case" msgstr "" diff --git a/spec/features/boards/sidebar_labels_spec.rb b/spec/features/boards/sidebar_labels_spec.rb index 0560cbbfae7baa586815bbc116648e46fb22969b..eec5b97a3bf9e19789259f82d453e4d6a9678266 100644 --- a/spec/features/boards/sidebar_labels_spec.rb +++ b/spec/features/boards/sidebar_labels_spec.rb @@ -133,7 +133,7 @@ click_on 'Create project label' fill_in 'Name new label', with: 'test label' - first('.suggest-colors-dropdown a').click + first('.suggested-colors a').click click_button 'Create' wait_for_requests diff --git a/spec/frontend/sidebar/components/labels/labels_select_widget/dropdown_contents_create_view_spec.js b/spec/frontend/sidebar/components/labels/labels_select_widget/dropdown_contents_create_view_spec.js index 7180e10e7b103f8c1e0177dc0db665444f4d9ea6..860896fd8e1a9dbcbd75ebe3deae2999a644e1d8 100644 --- a/spec/frontend/sidebar/components/labels/labels_select_widget/dropdown_contents_create_view_spec.js +++ b/spec/frontend/sidebar/components/labels/labels_select_widget/dropdown_contents_create_view_spec.js @@ -13,6 +13,7 @@ import { mockCreateLabelResponse as createAbuseReportLabelSuccessfulResponse, mockLabelsQueryResponse as abuseReportLabelsQueryResponse, } from '../../../../admin/abuse_report/mock_data'; +import { mockSuggestedColors } from '../../mock_data'; import { mockRegularLabel, createLabelSuccessfulResponse, @@ -90,6 +91,10 @@ describe('DropdownContentsCreateView', () => { }); }; + beforeEach(() => { + gon.suggested_label_colors = mockSuggestedColors; + }); + it('disables a Create button if label title is not set', async () => { createComponent(); findSibebarColorPicker().vm.$emit('input', '#fff'); diff --git a/spec/frontend/sidebar/components/mock_data.js b/spec/frontend/sidebar/components/mock_data.js index b1b52674eb5061af89504738e8e01eaaa6167e8b..27747b62e54498dd9efdb3e48636eb7855193f05 100644 --- a/spec/frontend/sidebar/components/mock_data.js +++ b/spec/frontend/sidebar/components/mock_data.js @@ -1,3 +1,5 @@ +import { s__ } from '~/locale'; + export const getIssueCrmContactsQueryResponse = { data: { issue: { @@ -58,25 +60,42 @@ export const issueCrmContactsUpdateResponse = { }; export const mockSuggestedColors = { - '#009966': 'Green-cyan', - '#8fbc8f': 'Dark sea green', - '#3cb371': 'Medium sea green', - '#00b140': 'Green screen', - '#013220': 'Dark green', - '#6699cc': 'Blue-gray', - '#0000ff': 'Blue', - '#e6e6fa': 'Lavender', - '#9400d3': 'Dark violet', - '#330066': 'Deep violet', - '#808080': 'Gray', - '#36454f': 'Charcoal grey', - '#f7e7ce': 'Champagne', - '#c21e56': 'Rose red', - '#cc338b': 'Magenta-pink', - '#dc143c': 'Crimson', - '#ff0000': 'Red', - '#cd5b45': 'Dark coral', - '#eee600': 'Titanium yellow', - '#ed9121': 'Carrot orange', - '#c39953': 'Aztec Gold', + '#009966': s__('SuggestedColors|Green-cyan'), + '#8fbc8f': s__('SuggestedColors|Dark sea green'), + '#3cb371': s__('SuggestedColors|Medium sea green'), + '#00b140': s__('SuggestedColors|Green screen'), + '#013220': s__('SuggestedColors|Dark green'), + '#6699cc': s__('SuggestedColors|Blue-gray'), + '#0000ff': s__('SuggestedColors|Blue'), + '#e6e6fa': s__('SuggestedColors|Lavender'), + '#9400d3': s__('SuggestedColors|Dark violet'), + '#330066': s__('SuggestedColors|Deep violet'), + '#808080': s__('SuggestedColors|Gray'), + '#36454f': s__('SuggestedColors|Charcoal grey'), + '#f7e7ce': s__('SuggestedColors|Champagne'), + '#c21e56': s__('SuggestedColors|Rose red'), + '#cc338b': s__('SuggestedColors|Magenta-pink'), + '#dc143c': s__('SuggestedColors|Crimson'), + '#ff0000': s__('SuggestedColors|Red'), + '#cd5b45': s__('SuggestedColors|Dark coral'), + '#eee600': s__('SuggestedColors|Titanium yellow'), + '#ed9121': s__('SuggestedColors|Carrot orange'), + '#c39953': s__('SuggestedColors|Aztec Gold'), }; + +export const mockSuggestedEpicColors = [ + { '#E9BE74': s__('WorkItem|Apricot') }, + { '#D99530': s__('WorkItem|Copper') }, + { '#C17D10': s__('WorkItem|Rust') }, + { '#F57F6C': s__('WorkItem|Pink') }, + { '#EC5941': s__('WorkItem|Vermilion') }, + { '#DD2B0E': s__('WorkItem|Red') }, + { '#C91C00': s__('WorkItem|Dark red') }, + { '#52B87A': s__('WorkItem|Teal') }, + { '#2DA160': s__('WorkItem|Green') }, + { '#108548': s__('WorkItem|Forest green') }, + { '#63A6E9': s__('WorkItem|Sky blue') }, + { '#428FDC': s__('WorkItem|Royal blue') }, + { '#1F75CB': s__('WorkItem|Blue') }, + { '#1068BF': s__('WorkItem|Midnight blue') }, +]; diff --git a/spec/frontend/sidebar/components/sidebar_color_picker_spec.js b/spec/frontend/sidebar/components/sidebar_color_picker_spec.js index 56e79c5a1199082ac5c7db42784695249435e3b2..e7dc419f520de5703000eaf7259c59a547650b97 100644 --- a/spec/frontend/sidebar/components/sidebar_color_picker_spec.js +++ b/spec/frontend/sidebar/components/sidebar_color_picker_spec.js @@ -1,31 +1,35 @@ -import { GlFormInput, GlLink } from '@gitlab/ui'; +import { GlFormGroup, GlFormInput, GlLink } from '@gitlab/ui'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import SibebarColorPicker from '~/sidebar/components/sidebar_color_picker.vue'; -import { mockSuggestedColors } from './mock_data'; +import { mockSuggestedEpicColors } from './mock_data'; describe('SibebarColorPicker', () => { let wrapper; const findAllColors = () => wrapper.findAllComponents(GlLink); const findFirstColor = () => findAllColors().at(0); - const findColorPicker = () => wrapper.findComponent(GlFormInput); - const findColorPickerText = () => wrapper.findByTestId('selected-color-text'); + const findColorPicker = () => wrapper.findAllComponents(GlFormInput).at(0); + const findColorPickerText = () => wrapper.findAllComponents(GlFormInput).at(1); + const findColorPickerTextFormGroup = () => wrapper.findAllComponents(GlFormGroup).at(1); - const createComponent = ({ value = '', autofocus = false } = {}) => { + const createComponent = ({ + value = '', + suggestedColors = mockSuggestedEpicColors, + errorMessage = '', + autofocus = false, + } = {}) => { wrapper = shallowMountExtended(SibebarColorPicker, { propsData: { value, autofocus, + suggestedColors, + errorMessage, }, }); }; - beforeEach(() => { - gon.suggested_label_colors = mockSuggestedColors; - }); - - it('renders a palette of 21 colors', () => { + it('renders a palette of 14 colors', () => { createComponent(); - expect(findAllColors()).toHaveLength(21); + expect(findAllColors()).toHaveLength(14); }); it('renders value of the color in textbox', () => { @@ -47,7 +51,7 @@ describe('SibebarColorPicker', () => { it('emits color on click of suggested color link', () => { findFirstColor().vm.$emit('click', new Event('mouseclick')); - expect(wrapper.emitted('input')).toEqual([['#009966']]); + expect(wrapper.emitted('input')).toEqual([['#E9BE74']]); }); it('emits color on selecting color from picker', () => { @@ -61,5 +65,11 @@ describe('SibebarColorPicker', () => { expect(wrapper.emitted('input')).toEqual([['#000000']]); }); + + it('sets invalid state if error message is provided', () => { + createComponent({ errorMessage: 'Invalid hex' }); + + expect(findColorPickerTextFormGroup().attributes('invalid-feedback')).toBe('Invalid hex'); + }); }); }); diff --git a/spec/support/shared_examples/features/sidebar/sidebar_labels_shared_examples.rb b/spec/support/shared_examples/features/sidebar/sidebar_labels_shared_examples.rb index c2d144bef3b199735ada9992cef64d019cc58a45..5d7aea444d3d4523243da42265379a74ccd39d6e 100644 --- a/spec/support/shared_examples/features/sidebar/sidebar_labels_shared_examples.rb +++ b/spec/support/shared_examples/features/sidebar/sidebar_labels_shared_examples.rb @@ -109,7 +109,7 @@ it 'shows error message if label title is taken' do page.within(labels_widget) do fill_in 'Name new label', with: development.title - page.find('.suggest-colors a', match: :first).click + page.find('.suggested-colors a', match: :first).click page.find('button', text: 'Create').click wait_for_requests