From 642e4d37fa3f7ecfd7c14b11ff227d9d0bd4b502 Mon Sep 17 00:00:00 2001 From: "opensearch-trigger-bot[bot]" <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com> Date: Fri, 7 Jun 2024 18:15:47 +0800 Subject: [PATCH] [Workspace]Change workspace description field to textarea (#6907) (#6960) * Change workspace description field to textarea * Changeset file for PR #6907 created/updated * Update description UI --------- (cherry picked from commit fe443e9408263518efacd5b6eda64afe26ae5b8b) Signed-off-by: Lin Wang Signed-off-by: github-actions[bot] Co-authored-by: github-actions[bot] Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com> Co-authored-by: Lu Yu --- changelogs/fragments/6907.yml | 2 ++ .../workspace_creator.test.tsx | 17 ---------- .../workspace_form/use_workspace_form.test.ts | 16 ---------- .../workspace_form/use_workspace_form.ts | 11 +++++-- .../components/workspace_form/utils.test.ts | 5 --- .../public/components/workspace_form/utils.ts | 5 --- .../workspace_form/workspace_form.tsx | 32 +++++++++++++------ .../workspace_updater.test.tsx | 17 ---------- 8 files changed, 32 insertions(+), 73 deletions(-) create mode 100644 changelogs/fragments/6907.yml 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(