[Workspace]Change workspace description field to textarea

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

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(
-      <WorkspaceCreator
-        workspaceConfigurableApps$={new BehaviorSubject([...PublicAPPInfoMap.values()])}
-      />
-    );
-    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(
       <WorkspaceCreator

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

@@ -40,22 +40,6 @@ describe('useWorkspaceForm', () => {
     });
     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',

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<Required<EuiFieldTextProps>['onChange']>((e) => {
+  const handleDescriptionChange = useCallback<Required<EuiTextAreaProps>['onChange']>((e) => {
     setDescription(e.target.value);
   }, []);
 
@@ -136,6 +141,6 @@ export const useWorkspaceForm = ({ application, defaultValues, onSubmit }: Works
     handleTabFeatureClick,
     setPermissionSettings,
     handleTabPermissionClick,
-    handleDescriptionInputChange,
+    handleDescriptionChange,
   };
 };

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({

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

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 - <i>optional</i>
             </>
           }
-          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}
         >
-          <EuiFieldText
-            value={formData.description}
-            onChange={handleDescriptionInputChange}
-            data-test-subj="workspaceForm-workspaceDetails-descriptionInputText"
-          />
+          <>
+            <EuiText size="xs" color="subdued">
+              {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.',
+              })}
+            </EuiText>
+            <EuiTextArea
+              value={formData.description}
+              onChange={handleDescriptionChange}
+              data-test-subj="workspaceForm-workspaceDetails-descriptionInputText"
+              rows={4}
+              placeholder={i18n.translate(
+                'workspace.form.workspaceDetails.description.placeholder',
+                {
+                  defaultMessage: 'Describe the workspace',
+                }
+              )}
+            />
+          </>
         </EuiFormRow>
         <EuiFormRow
           label={i18n.translate('workspace.form.workspaceDetails.color.label', {

src/plugins/workspace/public/components/workspace_updater/workspace_updater.test.tsx

@@ -138,23 +138,6 @@ describe('WorkspaceUpdater', () => {
     expect(workspaceClientUpdate).not.toHaveBeenCalled();
   });
 
-  it('cannot update workspace with invalid description', async () => {
-    const { getByTestId } = render(
-      <WorkspaceUpdater
-        workspaceConfigurableApps$={new BehaviorSubject([...PublicAPPInfoMap.values()])}
-      />
-    );
-    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(
       <WorkspaceUpdater