Add back color picker

Signed-off-by: Lin Wang <[email protected]>
opensearch-project · Jul 9, 2024 · 2930293 · 2930293
1 parent cb07ad3
commit 2930293
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 1 deletion.
diff --git a/src/plugins/workspace/public/components/workspace_creator/workspace_creator.test.tsx b/src/plugins/workspace/public/components/workspace_creator/workspace_creator.test.tsx
@@ -182,11 +182,18 @@ describe('WorkspaceCreator', () => {
     fireEvent.input(descriptionInput, {
       target: { value: 'test workspace description' },
     });
+    const colorSelector = getByTestId(
+      'euiColorPickerAnchor workspaceForm-workspaceDetails-colorPicker'
+    );
+    fireEvent.input(colorSelector, {
+      target: { value: '#000000' },
+    });
     fireEvent.click(getByTestId('workspaceUseCase-observability'));
     fireEvent.click(getByTestId('workspaceForm-bottomBar-createButton'));
     expect(workspaceClientCreate).toHaveBeenCalledWith(
       expect.objectContaining({
         name: 'test workspace name',
+        color: '#000000',
         description: 'test workspace description',
         features: expect.arrayContaining(['use-case-observability']),
       }),

diff --git a/src/plugins/workspace/public/components/workspace_form/types.ts b/src/plugins/workspace/public/components/workspace_form/types.ts
@@ -34,6 +34,7 @@ export interface WorkspaceFormSubmitData {
   name: string;
   description?: string;
   features?: string[];
+  color?: string;
   permissionSettings?: WorkspacePermissionSetting[];
   selectedDataSources?: DataSource[];
 }

diff --git a/src/plugins/workspace/public/components/workspace_form/use_workspace_form.ts b/src/plugins/workspace/public/components/workspace_form/use_workspace_form.ts
@@ -4,7 +4,12 @@
  */
 
 import { useCallback, useState, FormEventHandler, useRef, useMemo } from 'react';
-import { htmlIdGenerator, EuiFieldTextProps, EuiTextAreaProps } from '@elastic/eui';
+import {
+  htmlIdGenerator,
+  EuiFieldTextProps,
+  EuiTextAreaProps,
+  EuiColorPickerProps,
+} from '@elastic/eui';
 
 import { useApplications } from '../../hooks';
 import {
@@ -37,6 +42,7 @@ export const useWorkspaceForm = ({
   const applications = useApplications(application);
   const [name, setName] = useState(defaultValues?.name);
   const [description, setDescription] = useState(defaultValues?.description);
+  const [color, setColor] = useState(defaultValues?.color);
   const defaultValuesRef = useRef(defaultValues);
   const initialPermissionSettingsRef = useRef(
     generatePermissionSettingsState(operationType, defaultValues?.permissionSettings)
@@ -67,6 +73,7 @@ export const useWorkspaceForm = ({
     description,
     features: featureConfigs,
     useCases: selectedUseCases,
+    color,
     permissionSettings,
     selectedDataSources,
   });
@@ -115,6 +122,7 @@ export const useWorkspaceForm = ({
       onSubmit?.({
         name: currentFormData.name!,
         description: currentFormData.description,
+        color: currentFormData.color,
         features: currentFormData.features,
         permissionSettings: currentFormData.permissionSettings.filter(
           (item) =>
@@ -135,6 +143,10 @@ export const useWorkspaceForm = ({
     setDescription(e.target.value);
   }, []);
 
+  const handleColorChange = useCallback<Required<EuiColorPickerProps>['onChange']>((text) => {
+    setColor(text);
+  }, []);
+
   return {
     formId: formIdRef.current,
     formData,
@@ -143,6 +155,7 @@ export const useWorkspaceForm = ({
     numberOfErrors,
     numberOfChanges,
     handleFormSubmit,
+    handleColorChange,
     handleUseCasesChange,
     handleNameInputChange,
     setPermissionSettings,

diff --git a/src/plugins/workspace/public/components/workspace_form/workspace_form.tsx b/src/plugins/workspace/public/components/workspace_form/workspace_form.tsx
@@ -13,6 +13,7 @@ import {
   EuiFieldText,
   EuiText,
   EuiTextArea,
+  EuiColorPicker,
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 
@@ -42,6 +43,7 @@ export const WorkspaceForm = (props: WorkspaceFormProps) => {
     numberOfErrors,
     numberOfChanges,
     handleFormSubmit,
+    handleColorChange,
     handleUseCasesChange,
     handleNameInputChange,
     setPermissionSettings,
@@ -118,6 +120,27 @@ export const WorkspaceForm = (props: WorkspaceFormProps) => {
             />
           </>
         </EuiFormRow>
+        <EuiFormRow
+          label={i18n.translate('workspace.form.workspaceDetails.color.label', {
+            defaultMessage: 'Color',
+          })}
+          isInvalid={!!formErrors.color}
+          error={formErrors.color?.message}
+        >
+          <div>
+            <EuiText size="xs" color="subdued">
+              {i18n.translate('workspace.form.workspaceDetails.color.helpText', {
+                defaultMessage: 'Accent color for your workspace',
+              })}
+            </EuiText>
+            <EuiSpacer size={'s'} />
+            <EuiColorPicker
+              color={formData.color}
+              onChange={handleColorChange}
+              data-test-subj="workspaceForm-workspaceDetails-colorPicker"
+            />
+          </div>
+        </EuiFormRow>
       </EuiPanel>
       <EuiSpacer />
       <EuiPanel>

diff --git a/src/plugins/workspace/public/components/workspace_updater/workspace_updater.test.tsx b/src/plugins/workspace/public/components/workspace_updater/workspace_updater.test.tsx
@@ -203,6 +203,12 @@ describe('WorkspaceUpdater', () => {
     fireEvent.input(descriptionInput, {
       target: { value: 'test workspace description' },
     });
+    const colorSelector = getByTestId(
+      'euiColorPickerAnchor workspaceForm-workspaceDetails-colorPicker'
+    );
+    fireEvent.input(colorSelector, {
+      target: { value: '#000000' },
+    });
 
     fireEvent.click(getByTestId('workspaceUseCase-observability'));
     fireEvent.click(getByTestId('workspaceUseCase-analytics'));
@@ -224,6 +230,7 @@ describe('WorkspaceUpdater', () => {
       expect.any(String),
       expect.objectContaining({
         name: 'test workspace name',
+        color: '#000000',
         description: 'test workspace description',
         features: expect.arrayContaining(['use-case-analytics']),
       }),