[Workspace] Limit workspace colors (#8607) (#8618)

* Limit workspace color



* Limit workspace color at detail page



* Changeset file for PR #8607 created/updated

* Add validation



---------



(cherry picked from commit 2b3fbf0)

Signed-off-by: Kapian1234 <[email protected]>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>

changelogs/fragments/8607.yml

@@ -0,0 +1,2 @@
+feat:
+- Limit workspace colors ([#8607](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8607))

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={
                   <EuiFormControlLayout
                     icon={{

src/plugins/workspace/public/components/workspace_form/utils.test.ts

@@ -186,7 +186,7 @@ describe('validateWorkspaceForm', () => {
   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', () => {

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.',
       }),
     };
   }

src/plugins/workspace/public/components/workspace_form/workspace_detail_form_details.tsx

@@ -129,6 +129,7 @@ export const WorkspaceDetailFormDetails = ({
           error={formErrors.color?.message}
         >
           <EuiCompressedColorPicker
+            mode="swatch"
             color={formData.color}
             onChange={handleColorChange}
             readOnly={!isEditing}

src/plugins/workspace/public/components/workspace_form/workspace_form_error_callout.test.tsx

@@ -58,7 +58,7 @@ describe('WorkspaceFormErrorCallout', () => {
       },
     });
 
-    expect(renderResult.getByText('Color: Enter a valid color.')).toBeInTheDocument();
+    expect(renderResult.getByText('Color: Choose a valid color.')).toBeInTheDocument();
   });
 
   it('should render use case suggestion', () => {

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;