[Workspace]Fix error message missed in workspace creator name input (o…

…pensearch-project#8738)

* Fix error message missed in workspace creator name input

Signed-off-by: Lin Wang <[email protected]>

* Changeset file for PR opensearch-project#8738 created/updated

---------

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

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))

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>

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();
   });
 

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)}>

src/plugins/workspace/public/components/workspace_form/index.ts

@@ -18,6 +18,7 @@ export {
   WorkspaceFormProps,
   WorkspaceFormDataState,
   WorkspacePermissionSetting,
+  WorkspaceFormErrors,
 } from './types';
 export {
   WorkspaceOperationType,