From 1b3e60ca0cd3bf67b4dc4b5d4cf5bc272e19e72d Mon Sep 17 00:00:00 2001
From: Lin Wang <wonglam@amazon.com>
Date: Thu, 7 Nov 2024 11:31:10 +0800
Subject: [PATCH] [Workspace]Fix error message missed in workspace creator name
 input (#8738)

* Fix error message missed in workspace creator name input

Signed-off-by: Lin Wang <wonglam@amazon.com>

* Changeset file for PR #8738 created/updated

---------

Signed-off-by: Lin Wang <wonglam@amazon.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
---
 changelogs/fragments/8738.yml                         |  2 ++
 .../workspace_creator/creator_details_panel.tsx       | 11 ++++++++++-
 .../workspace_creator/workspace_creator.test.tsx      |  3 ++-
 .../workspace_creator/workspace_creator_form.tsx      |  1 +
 .../public/components/workspace_form/index.ts         |  1 +
 5 files changed, 16 insertions(+), 2 deletions(-)
 create mode 100644 changelogs/fragments/8738.yml

diff --git a/changelogs/fragments/8738.yml b/changelogs/fragments/8738.yml
new file mode 100644
index 000000000000..45a81128b0ba
--- /dev/null
+++ b/changelogs/fragments/8738.yml
@@ -0,0 +1,2 @@
+fix:
+- [Workspace]Fix error message missed in workspace creator name input ([#8738](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8738))
\ 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 a03a124024e7..29f5989fef79 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
@@ -18,13 +18,18 @@ import {
 } from '@elastic/eui';
 import { EuiColorPickerOutput } from '@elastic/eui/src/components/color_picker/color_picker';
 import { i18n } from '@osd/i18n';
-import { WorkspaceDescriptionField, WorkspaceNameField } from '../workspace_form';
+import {
+  WorkspaceDescriptionField,
+  WorkspaceNameField,
+  WorkspaceFormErrors,
+} from '../workspace_form';
 import { generateRightSidebarScrollProps, RightSidebarScrollField } from './utils';
 
 interface CreatorDetailsPanelProps {
   color?: string;
   name?: string;
   description?: string;
+  formErrors?: Pick<WorkspaceFormErrors, 'name' | 'color'>;
   onColorChange: (text: string, output: EuiColorPickerOutput) => void;
   onNameChange: (name: string) => void;
   onDescriptionChange: (description: string) => void;
@@ -34,6 +39,7 @@ export const CreatorDetailsPanel = ({
   color,
   name,
   description,
+  formErrors,
   onColorChange,
   onNameChange,
   onDescriptionChange,
@@ -68,6 +74,8 @@ export const CreatorDetailsPanel = ({
                 defaultMessage: 'Color',
               })}
               {...generateRightSidebarScrollProps(RightSidebarScrollField.Color)}
+              error={formErrors?.color?.message}
+              isInvalid={!!formErrors?.color}
             >
               <EuiColorPicker
                 color={color}
@@ -101,6 +109,7 @@ export const CreatorDetailsPanel = ({
                 }
               )}
               showDescription={false}
+              error={formErrors?.name?.message}
             />
           </EuiFlexItem>
         </EuiFlexGroup>
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
index 6fa536f95dd0..9f6dc00ec9a7 100644
--- a/src/plugins/workspace/public/components/workspace_creator/workspace_creator.test.tsx
+++ b/src/plugins/workspace/public/components/workspace_creator/workspace_creator.test.tsx
@@ -205,7 +205,7 @@ describe('WorkspaceCreator', () => {
   });
 
   it('should not create workspace when name is empty', async () => {
-    const { getByTestId } = render(<WorkspaceCreator />);
+    const { getByTestId, getByText } = render(<WorkspaceCreator />);
 
     // Ensure workspace create form rendered
     await waitFor(() => {
@@ -219,6 +219,7 @@ describe('WorkspaceCreator', () => {
       },
     });
     fireEvent.click(getByTestId('workspaceForm-bottomBar-createButton'));
+    expect(getByText('Name is required. Enter a name.')).toBeInTheDocument();
     expect(workspaceClientCreate).not.toHaveBeenCalled();
   });
 
diff --git a/src/plugins/workspace/public/components/workspace_creator/workspace_creator_form.tsx b/src/plugins/workspace/public/components/workspace_creator/workspace_creator_form.tsx
index 89af611784e4..c6c044f37289 100644
--- a/src/plugins/workspace/public/components/workspace_creator/workspace_creator_form.tsx
+++ b/src/plugins/workspace/public/components/workspace_creator/workspace_creator_form.tsx
@@ -68,6 +68,7 @@ export const WorkspaceCreatorForm = (props: WorkspaceCreatorFormProps) => {
             onNameChange={setName}
             onColorChange={handleColorChange}
             onDescriptionChange={setDescription}
+            formErrors={formErrors}
           />
           <EuiSpacer size="m" />
           <div {...generateRightSidebarScrollProps(RightSidebarScrollField.UseCase)}>
diff --git a/src/plugins/workspace/public/components/workspace_form/index.ts b/src/plugins/workspace/public/components/workspace_form/index.ts
index 6b967722bf51..7d25d34bbacd 100644
--- a/src/plugins/workspace/public/components/workspace_form/index.ts
+++ b/src/plugins/workspace/public/components/workspace_form/index.ts
@@ -18,6 +18,7 @@ export {
   WorkspaceFormProps,
   WorkspaceFormDataState,
   WorkspacePermissionSetting,
+  WorkspaceFormErrors,
 } from './types';
 export {
   WorkspaceOperationType,