From 707d5ad1e50ac37ee40c55b203be88443cf15703 Mon Sep 17 00:00:00 2001 From: Rajan Mistry Date: Tue, 20 Feb 2024 23:27:44 +0530 Subject: [PATCH 1/3] Redesign the color picker for labels and color widget --- .../dropdown_contents_create_view.vue | 6 +- .../components/sidebar_color_picker.vue | 67 +++++++++++------ .../sidebar/components/sidebar_color_view.vue | 11 ++- .../javascripts/work_items/constants.js | 19 +++++ app/assets/stylesheets/pages/colors.scss | 8 +++ .../components/work_item_color_inline.vue | 10 ++- .../components/work_item_color_with_edit.vue | 71 ++++++++++++++----- .../work_item_color_with_edit_spec.js | 55 +++++++------- locale/gitlab.pot | 45 ++++++++++++ spec/features/boards/sidebar_labels_spec.rb | 2 +- .../dropdown_contents_create_view_spec.js | 5 ++ spec/frontend/sidebar/components/mock_data.js | 17 +++++ .../components/sidebar_color_picker_spec.js | 34 +++++---- .../sidebar/sidebar_labels_shared_examples.rb | 2 +- 14 files changed, 268 insertions(+), 84 deletions(-) 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 512709914276a9..c93d73ac8469db 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 1c9492a5b2e952..0ae15fcc6148aa 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 003116557d3690..7cefafe0b9bfbe 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'; @@ -51,6 +52,7 @@ export default { currentColor: '', isEditing: false, isUpdating: false, + errorMessage: '', }; }, computed: { @@ -66,6 +68,17 @@ 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.suggestedColors.find((item) => Object.keys(item)[0] === this.color?.toLowerCase()), + ).pop(); + } + return __('Custom'); + }, textColor() { return this.workItemColorWidget?.textColor; }, @@ -76,21 +89,42 @@ export default { property: `type_${this.workItemType}`, }; }, + suggestedColors() { + return EPIC_COLORS; + }, + suggestedColorKeys() { + return this.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 1504c92983ff44..1503b4c0f81216 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 c5345c5f4f7e1f..18a1273623fb24 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 0560cbbfae7baa..eec5b97a3bf9e1 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 7180e10e7b103f..860896fd8e1a9d 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 b1b52674eb5061..0e1e4bf12f074f 100644 --- a/spec/frontend/sidebar/components/mock_data.js +++ b/spec/frontend/sidebar/components/mock_data.js @@ -80,3 +80,20 @@ export const mockSuggestedColors = { '#ed9121': 'Carrot orange', '#c39953': 'Aztec Gold', }; + +export const mockSuggestedEpicColors = [ + { '#E9BE74': 'Apricot' }, + { '#D99530': 'Copper' }, + { '#C17D10': 'Rust' }, + { '#F57F6C': 'Pink' }, + { '#EC5941': 'Vermilion' }, + { '#DD2B0E': 'Red' }, + { '#C91C00': 'Dark red' }, + { '#52B87A': 'Teal' }, + { '#2DA160': 'Green' }, + { '#108548': 'Forest green' }, + { '#63A6E9': 'Sky blue' }, + { '#428FDC': 'Royal blue' }, + { '#1F75CB': 'Blue' }, + { '#1068BF': '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 56e79c5a119908..e7dc419f520de5 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 c2d144bef3b199..5d7aea444d3d45 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 -- GitLab From 6c370c281b5b41fc11315aaaa9ae331a98f250b2 Mon Sep 17 00:00:00 2001 From: Rajan Mistry Date: Wed, 27 Mar 2024 15:56:10 +0530 Subject: [PATCH 2/3] Cover review comments from maintainer --- .../components/work_item_color_inline.vue | 4 +- spec/frontend/sidebar/components/mock_data.js | 72 ++++++++++--------- 2 files changed, 38 insertions(+), 38 deletions(-) diff --git a/ee/app/assets/javascripts/work_items/components/work_item_color_inline.vue b/ee/app/assets/javascripts/work_items/components/work_item_color_inline.vue index 3568d0ad9ec948..4f4a7465421496 100644 --- a/ee/app/assets/javascripts/work_items/components/work_item_color_inline.vue +++ b/ee/app/assets/javascripts/work_items/components/work_item_color_inline.vue @@ -19,6 +19,7 @@ export default { i18n: { colorLabel: __('Color'), }, + suggestedColors: EPIC_COLORS, components: { GlFormGroup, SidebarColorPicker, @@ -67,9 +68,6 @@ export default { property: `type_${this.workItemType}`, }; }, - suggestedColors() { - return EPIC_COLORS; - }, }, created() { this.currentColor = this.color; diff --git a/spec/frontend/sidebar/components/mock_data.js b/spec/frontend/sidebar/components/mock_data.js index 0e1e4bf12f074f..27747b62e54498 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,42 +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': 'Apricot' }, - { '#D99530': 'Copper' }, - { '#C17D10': 'Rust' }, - { '#F57F6C': 'Pink' }, - { '#EC5941': 'Vermilion' }, - { '#DD2B0E': 'Red' }, - { '#C91C00': 'Dark red' }, - { '#52B87A': 'Teal' }, - { '#2DA160': 'Green' }, - { '#108548': 'Forest green' }, - { '#63A6E9': 'Sky blue' }, - { '#428FDC': 'Royal blue' }, - { '#1F75CB': 'Blue' }, - { '#1068BF': 'Midnight blue' }, + { '#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') }, ]; -- GitLab From 08c27075bde81bf6bf39f3a8d934c21fa0cf6aa9 Mon Sep 17 00:00:00 2001 From: Rajan Mistry Date: Wed, 27 Mar 2024 18:24:50 +0530 Subject: [PATCH 3/3] Fix the jest cases for suggested colors --- .../work_items/components/work_item_color_inline.vue | 2 +- .../components/work_item_color_with_edit.vue | 12 ++++++------ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/ee/app/assets/javascripts/work_items/components/work_item_color_inline.vue b/ee/app/assets/javascripts/work_items/components/work_item_color_inline.vue index 4f4a7465421496..9b0436e243bedd 100644 --- a/ee/app/assets/javascripts/work_items/components/work_item_color_inline.vue +++ b/ee/app/assets/javascripts/work_items/components/work_item_color_inline.vue @@ -165,7 +165,7 @@ export default { 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 7cefafe0b9bfbe..5cecd5af37ef69 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 @@ -26,6 +26,7 @@ export default { colorLabel: __('Color'), }, inputId: 'color-widget-input', + suggestedColors: EPIC_COLORS, components: { GlForm, SidebarColorPicker, @@ -74,7 +75,9 @@ export default { // If no, return Custom if (this.suggestedColorKeys.includes(this.color?.toLowerCase())) { return Object.values( - this.suggestedColors.find((item) => Object.keys(item)[0] === this.color?.toLowerCase()), + this.$options.suggestedColors.find( + (item) => Object.keys(item)[0] === this.color?.toLowerCase(), + ), ).pop(); } return __('Custom'); @@ -89,11 +92,8 @@ export default { property: `type_${this.workItemType}`, }; }, - suggestedColors() { - return EPIC_COLORS; - }, suggestedColorKeys() { - return this.suggestedColors.map((item) => { + return this.$options.suggestedColors.map((item) => { return Object.keys(item).pop(); }); }, @@ -240,7 +240,7 @@ export default { -- GitLab