From 2b3fbf0d062ed872882e1ccc78f39c44674422b8 Mon Sep 17 00:00:00 2001 From: Jincheng Wan <45655760+Kapian1234@users.noreply.github.com> Date: Thu, 17 Oct 2024 14:50:47 +0800 Subject: [PATCH] [Workspace] Limit workspace colors (#8607) * Limit workspace color Signed-off-by: Kapian1234 * Limit workspace color at detail page Signed-off-by: Kapian1234 * Changeset file for PR #8607 created/updated * Add validation Signed-off-by: Kapian1234 --------- Signed-off-by: Kapian1234 Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com> --- changelogs/fragments/8607.yml | 2 ++ .../components/workspace_creator/creator_details_panel.tsx | 1 + .../public/components/workspace_form/utils.test.ts | 2 +- .../workspace/public/components/workspace_form/utils.ts | 6 +++--- .../workspace_form/workspace_detail_form_details.tsx | 1 + .../workspace_form/workspace_form_error_callout.test.tsx | 2 +- .../workspace_form/workspace_form_error_callout.tsx | 2 +- 7 files changed, 10 insertions(+), 6 deletions(-) create mode 100644 changelogs/fragments/8607.yml diff --git a/changelogs/fragments/8607.yml b/changelogs/fragments/8607.yml new file mode 100644 index 000000000000..3aadf45899b5 --- /dev/null +++ b/changelogs/fragments/8607.yml @@ -0,0 +1,2 @@ +feat: +- Limit workspace colors ([#8607](/~https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8607)) \ No newline at end of file diff --git a/src/plugins/workspace/public/components/workspace_creator/creator_details_panel.tsx b/src/plugins/workspace/public/components/workspace_creator/creator_details_panel.tsx index f654ea327fd4..a03a124024e7 100644 --- a/src/plugins/workspace/public/components/workspace_creator/creator_details_panel.tsx +++ b/src/plugins/workspace/public/components/workspace_creator/creator_details_panel.tsx @@ -73,6 +73,7 @@ export const CreatorDetailsPanel = ({ color={color} onChange={onColorChange} compressed + mode="swatch" button={ { it('should return error if color is invalid', () => { expect(validateWorkspaceForm({ color: 'QWERTY' }, false).color).toEqual({ code: WorkspaceFormErrorCode.InvalidColor, - message: 'Color is invalid. Enter a valid color.', + message: 'Color is invalid. Choose a valid color.', }); }); it('should return error if use case is empty', () => { diff --git a/src/plugins/workspace/public/components/workspace_form/utils.ts b/src/plugins/workspace/public/components/workspace_form/utils.ts index 0bdb861a55bc..1233bfbc0d53 100644 --- a/src/plugins/workspace/public/components/workspace_form/utils.ts +++ b/src/plugins/workspace/public/components/workspace_form/utils.ts @@ -4,7 +4,7 @@ */ import { i18n } from '@osd/i18n'; - +import { euiPaletteColorBlind } from '@elastic/eui'; import type { SavedObjectPermissions } from '../../../../../core/types'; import { WorkspacePermissionMode } from '../../../common/constants'; import { isUseCaseFeatureConfig } from '../../utils'; @@ -335,11 +335,11 @@ export const validateWorkspaceForm = ( }), }; } - if (color && !validateWorkspaceColor(color)) { + if (color && (!validateWorkspaceColor(color) || !euiPaletteColorBlind().includes(color))) { formErrors.color = { code: WorkspaceFormErrorCode.InvalidColor, message: i18n.translate('workspace.form.features.invalidColor', { - defaultMessage: 'Color is invalid. Enter a valid color.', + defaultMessage: 'Color is invalid. Choose a valid color.', }), }; } diff --git a/src/plugins/workspace/public/components/workspace_form/workspace_detail_form_details.tsx b/src/plugins/workspace/public/components/workspace_form/workspace_detail_form_details.tsx index 3aa957592a59..d0965443ea24 100644 --- a/src/plugins/workspace/public/components/workspace_form/workspace_detail_form_details.tsx +++ b/src/plugins/workspace/public/components/workspace_form/workspace_detail_form_details.tsx @@ -129,6 +129,7 @@ export const WorkspaceDetailFormDetails = ({ error={formErrors.color?.message} > { }, }); - expect(renderResult.getByText('Color: Enter a valid color.')).toBeInTheDocument(); + expect(renderResult.getByText('Color: Choose a valid color.')).toBeInTheDocument(); }); it('should render use case suggestion', () => { diff --git a/src/plugins/workspace/public/components/workspace_form/workspace_form_error_callout.tsx b/src/plugins/workspace/public/components/workspace_form/workspace_form_error_callout.tsx index 2c32fde1d100..4dd9f9141da3 100644 --- a/src/plugins/workspace/public/components/workspace_form/workspace_form_error_callout.tsx +++ b/src/plugins/workspace/public/components/workspace_form/workspace_form_error_callout.tsx @@ -44,7 +44,7 @@ const getSuggestionFromErrorCode = (error: WorkspaceFormError) => { }); case WorkspaceFormErrorCode.InvalidColor: return i18n.translate('workspace.form.errorCallout.invalidColor', { - defaultMessage: 'Enter a valid color.', + defaultMessage: 'Choose a valid color.', }); default: return error.message;