diff --git a/changelogs/fragments/6907.yml b/changelogs/fragments/6907.yml
new file mode 100644
index 000000000000..6d6e804bfc30
--- /dev/null
+++ b/changelogs/fragments/6907.yml
@@ -0,0 +1,2 @@
+feat:
+- [Workspace] Change description field to textarea ([#6907](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6907))
\ No newline at end of file
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 1682e24c3025..06d766a831e1 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
@@ -116,23 +116,6 @@ describe('WorkspaceCreator', () => {
expect(workspaceClientCreate).not.toHaveBeenCalled();
});
- it('should not create workspace with invalid description', async () => {
- const { getByTestId } = render(
-
- );
- const nameInput = getByTestId('workspaceForm-workspaceDetails-nameInputText');
- fireEvent.input(nameInput, {
- target: { value: 'test workspace name' },
- });
- const descriptionInput = getByTestId('workspaceForm-workspaceDetails-descriptionInputText');
- fireEvent.input(descriptionInput, {
- target: { value: '~' },
- });
- expect(workspaceClientCreate).not.toHaveBeenCalled();
- });
-
it('cancel create workspace', async () => {
const { findByText, getByTestId } = render(
{
});
expect(onSubmitMock).not.toHaveBeenCalled();
});
- it('should return "Invalid workspace description" and not call onSubmit when invalid description', async () => {
- const { renderResult, onSubmitMock } = setup({
- id: 'foo',
- name: 'test-workspace-name',
- description: '~',
- });
- expect(renderResult.result.current.formErrors).toEqual({});
-
- act(() => {
- renderResult.result.current.handleFormSubmit({ preventDefault: jest.fn() });
- });
- expect(renderResult.result.current.formErrors).toEqual({
- description: 'Invalid workspace description',
- });
- expect(onSubmitMock).not.toHaveBeenCalled();
- });
it('should call onSubmit with workspace name and features', async () => {
const { renderResult, onSubmitMock } = setup({
id: 'foo',
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
index cded7c4bcb71..07de89ffe18a 100644
--- 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, useEffect } from 'react';
-import { htmlIdGenerator, EuiFieldTextProps, EuiColorPickerProps } from '@elastic/eui';
+import {
+ htmlIdGenerator,
+ EuiFieldTextProps,
+ EuiColorPickerProps,
+ EuiTextAreaProps,
+} from '@elastic/eui';
import { useApplications } from '../../hooks';
import { featureMatchesConfig } from '../../utils';
@@ -97,7 +102,7 @@ export const useWorkspaceForm = ({ application, defaultValues, onSubmit }: Works
setName(e.target.value);
}, []);
- const handleDescriptionInputChange = useCallback['onChange']>((e) => {
+ const handleDescriptionChange = useCallback['onChange']>((e) => {
setDescription(e.target.value);
}, []);
@@ -136,6 +141,6 @@ export const useWorkspaceForm = ({ application, defaultValues, onSubmit }: Works
handleTabFeatureClick,
setPermissionSettings,
handleTabPermissionClick,
- handleDescriptionInputChange,
+ handleDescriptionChange,
};
};
diff --git a/src/plugins/workspace/public/components/workspace_form/utils.test.ts b/src/plugins/workspace/public/components/workspace_form/utils.test.ts
index c2cf46fcf292..ec078c8a0456 100644
--- a/src/plugins/workspace/public/components/workspace_form/utils.test.ts
+++ b/src/plugins/workspace/public/components/workspace_form/utils.test.ts
@@ -250,11 +250,6 @@ describe('validateWorkspaceForm', () => {
it('should return error if name is invalid', () => {
expect(validateWorkspaceForm({ name: '~' }).name).toEqual('Invalid workspace name');
});
- it('should return error if description is invalid', () => {
- expect(validateWorkspaceForm({ description: '~' }).description).toEqual(
- 'Invalid workspace description'
- );
- });
it('should return error if permission setting type is invalid', () => {
expect(
validateWorkspaceForm({
diff --git a/src/plugins/workspace/public/components/workspace_form/utils.ts b/src/plugins/workspace/public/components/workspace_form/utils.ts
index 404314cc652a..f5a7bd149218 100644
--- a/src/plugins/workspace/public/components/workspace_form/utils.ts
+++ b/src/plugins/workspace/public/components/workspace_form/utils.ts
@@ -255,11 +255,6 @@ export const validateWorkspaceForm = (
defaultMessage: "Name can't be empty.",
});
}
- if (description && !isValidFormTextInput(description)) {
- formErrors.description = i18n.translate('workspace.form.detail.description.invalid', {
- defaultMessage: 'Invalid workspace description',
- });
- }
if (permissionSettings) {
const permissionSettingsErrors: { [key: number]: string } = {};
for (let i = 0; i < permissionSettings.length; i++) {
diff --git a/src/plugins/workspace/public/components/workspace_form/workspace_form.tsx b/src/plugins/workspace/public/components/workspace_form/workspace_form.tsx
index de841b09c60e..794f983bd989 100644
--- a/src/plugins/workspace/public/components/workspace_form/workspace_form.tsx
+++ b/src/plugins/workspace/public/components/workspace_form/workspace_form.tsx
@@ -16,6 +16,7 @@ import {
EuiHorizontalRule,
EuiTab,
EuiTabs,
+ EuiTextArea,
} from '@elastic/eui';
import { i18n } from '@osd/i18n';
@@ -47,7 +48,7 @@ export const WorkspaceForm = (props: WorkspaceFormProps) => {
handleTabFeatureClick,
setPermissionSettings,
handleTabPermissionClick,
- handleDescriptionInputChange,
+ handleDescriptionChange,
} = useWorkspaceForm(props);
const workspaceDetailsTitle = i18n.translate('workspace.form.workspaceDetails.title', {
defaultMessage: 'Workspace Details',
@@ -91,18 +92,29 @@ export const WorkspaceForm = (props: WorkspaceFormProps) => {
Description - optional
>
}
- helpText={i18n.translate('workspace.form.workspaceDetails.description.helpText', {
- defaultMessage:
- 'Valid characters are a-z, A-Z, 0-9, (), [], _ (underscore), - (hyphen) and (space).',
- })}
isInvalid={!!formErrors.description}
error={formErrors.description}
>
-
+ <>
+
+ {i18n.translate('workspace.form.workspaceDetails.description.introduction', {
+ defaultMessage:
+ 'Help others understand the purpose of this workspace by providing an overview of the workspace you’re creating.',
+ })}
+
+
+ >
{
expect(workspaceClientUpdate).not.toHaveBeenCalled();
});
- it('cannot update workspace with invalid description', async () => {
- const { getByTestId } = render(
-
- );
- const nameInput = getByTestId('workspaceForm-workspaceDetails-nameInputText');
- fireEvent.input(nameInput, {
- target: { value: 'test workspace name' },
- });
- const descriptionInput = getByTestId('workspaceForm-workspaceDetails-descriptionInputText');
- fireEvent.input(descriptionInput, {
- target: { value: '~' },
- });
- expect(workspaceClientUpdate).not.toHaveBeenCalled();
- });
-
it('cancel update workspace', async () => {
const { findByText, getByTestId } = render(