diff --git a/changelogs/fragments/7879.yml b/changelogs/fragments/7879.yml new file mode 100644 index 000000000000..68a7f88ad045 --- /dev/null +++ b/changelogs/fragments/7879.yml @@ -0,0 +1,2 @@ +feat: +- Update the collaborator input from a combobox to a text field ([#7879](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7879)) \ No newline at end of file diff --git a/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_input.test.tsx b/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_input.test.tsx index d524eb05887e..72d0415f5984 100644 --- a/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_input.test.tsx +++ b/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_input.test.tsx @@ -75,7 +75,7 @@ describe('WorkspacePermissionSettingInput', () => { modes: [WorkspacePermissionMode.LibraryRead, WorkspacePermissionMode.Read], }); - expect(renderResult.getByText('foo')).toBeInTheDocument(); + expect(renderResult.getByDisplayValue('foo')).toBeInTheDocument(); expect(renderResult.getByText('Read')).toBeInTheDocument(); }); it('should render consistent group id and permission modes', () => { @@ -85,18 +85,17 @@ describe('WorkspacePermissionSettingInput', () => { modes: [WorkspacePermissionMode.LibraryWrite, WorkspacePermissionMode.Read], }); - expect(renderResult.getByText('bar')).toBeInTheDocument(); + expect(renderResult.getByDisplayValue('bar')).toBeInTheDocument(); expect(renderResult.getByText('Read & Write')).toBeInTheDocument(); }); it('should call onGroupOrUserIdChange with user id', () => { const { renderResult, onGroupOrUserIdChangeMock } = setup(); expect(onGroupOrUserIdChangeMock).not.toHaveBeenCalled(); - fireEvent.click(renderResult.getByText('Select a user')); - fireEvent.input(renderResult.getAllByTestId('comboBoxSearchInput')[0], { + fireEvent.change(renderResult.getAllByTestId('workspaceFormUserIdOrGroupInput')[0], { target: { value: 'user1' }, }); - fireEvent.blur(renderResult.getAllByTestId('comboBoxSearchInput')[0]); + fireEvent.blur(renderResult.getAllByTestId('workspaceFormUserIdOrGroupInput')[0]); expect(onGroupOrUserIdChangeMock).toHaveBeenCalledWith({ type: 'user', userId: 'user1' }, 0); }); it('should call onGroupOrUserIdChange with group', () => { @@ -105,24 +104,13 @@ describe('WorkspacePermissionSettingInput', () => { }); expect(onGroupOrUserIdChangeMock).not.toHaveBeenCalled(); - fireEvent.click(renderResult.getByText('Select a user group')); - fireEvent.input(renderResult.getAllByTestId('comboBoxSearchInput')[0], { + fireEvent.change(renderResult.getAllByTestId('workspaceFormUserIdOrGroupInput')[0], { target: { value: 'group' }, }); - fireEvent.blur(renderResult.getAllByTestId('comboBoxSearchInput')[0]); + fireEvent.blur(renderResult.getAllByTestId('workspaceFormUserIdOrGroupInput')[0]); expect(onGroupOrUserIdChangeMock).toHaveBeenCalledWith({ type: 'group', group: 'group' }, 0); }); - it('should call onGroupOrUserIdChange without user id after clear button clicked', () => { - const { renderResult, onGroupOrUserIdChangeMock } = setup({ - userId: 'foo', - }); - - expect(onGroupOrUserIdChangeMock).not.toHaveBeenCalled(); - fireEvent.click(renderResult.getByTestId('comboBoxClearButton')); - expect(onGroupOrUserIdChangeMock).toHaveBeenCalledWith({ type: 'user' }, 0); - }); - it('should call onPermissionModesChange with permission modes after permission modes changed', () => { const { renderResult, onPermissionModesChangeMock } = setup({}); diff --git a/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_input.tsx b/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_input.tsx index 87d5ccb3a418..00560f7c033d 100644 --- a/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_input.tsx +++ b/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_input.tsx @@ -7,11 +7,10 @@ import React, { useCallback, useMemo } from 'react'; import { EuiFlexGroup, EuiFlexItem, - EuiComboBox, EuiButtonIcon, - EuiComboBoxOptionOption, EuiSuperSelect, EuiSuperSelectOption, + EuiFieldText, } from '@elastic/eui'; import { i18n } from '@osd/i18n'; import { WorkspacePermissionMode } from '../../../common/constants'; @@ -104,19 +103,15 @@ export const WorkspacePermissionSettingInput = ({ onPermissionModesChange, onTypeChange, }: WorkspacePermissionSettingInputProps) => { - const groupOrUserIdSelectedOptions = useMemo( - () => (group || userId ? [{ label: (group || userId) as string }] : []), - [group, userId] - ); - const permissionModesSelected = useMemo( () => getPermissionModeId(modes ?? []), [modes] ); - const handleGroupOrUserIdCreate = useCallback( - (groupOrUserId) => { + const handleGroupOrUserIdChange = useCallback( + (event) => { + const groupOrUserId = event.target.value; onGroupOrUserIdChange( type === WorkspacePermissionItemType.Group ? { type, group: groupOrUserId } @@ -127,15 +122,6 @@ export const WorkspacePermissionSettingInput = ({ [index, type, onGroupOrUserIdChange] ); - const handleGroupOrUserIdChange = useCallback( - (options: Array>) => { - if (options.length === 0) { - onGroupOrUserIdChange({ type }, index); - } - }, - [index, type, onGroupOrUserIdChange] - ); - const handlePermissionModeOptionChange = useCallback( (id: string) => { if (optionIdToWorkspacePermissionModesMap[id]) { @@ -165,22 +151,21 @@ export const WorkspacePermissionSettingInput = ({ /> - diff --git a/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_panel.test.tsx b/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_panel.test.tsx index a6249584bcea..2bf0903361c0 100644 --- a/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_panel.test.tsx +++ b/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_panel.test.tsx @@ -76,10 +76,10 @@ describe('WorkspacePermissionSettingInput', () => { it('should render consistent user and group permissions', () => { const { renderResult } = setup(); - expect(renderResult.getByText('foo')).toBeInTheDocument(); + expect(renderResult.getByDisplayValue('foo')).toBeInTheDocument(); expect(renderResult.getByText('Read')).toBeInTheDocument(); - expect(renderResult.getByText('bar')).toBeInTheDocument(); + expect(renderResult.getByDisplayValue('bar')).toBeInTheDocument(); expect(renderResult.getByText('Read & Write')).toBeInTheDocument(); }); @@ -202,11 +202,12 @@ describe('WorkspacePermissionSettingInput', () => { ]); }); - it('should call onGroupOrUserIdChange without user id after clear button clicked', () => { + it('should call onGroupOrUserIdChange after user value changed', () => { const { renderResult, onChangeMock } = setup(); expect(onChangeMock).not.toHaveBeenCalled(); - fireEvent.click(renderResult.getAllByTestId('comboBoxClearButton')[0]); + const inputElement = renderResult.getByDisplayValue('foo'); + fireEvent.change(inputElement, { target: { value: 'fooo' } }); expect(onChangeMock).toHaveBeenCalled(); }); @@ -229,12 +230,8 @@ describe('WorkspacePermissionSettingInput', () => { disabledUserOrGroupInputIds: [0, 1], }); - expect(renderResult.getByText('user-1')?.closest('div[role="combobox"]')).toHaveClass( - 'euiComboBox-isDisabled' - ); - expect(renderResult.getByText('user-group-1')?.closest('div[role="combobox"]')).toHaveClass( - 'euiComboBox-isDisabled' - ); + expect(renderResult.getByDisplayValue('user-1')).toBeDisabled(); + expect(renderResult.getByDisplayValue('user-group-1')).toBeDisabled(); }); it('should render consistent errors', () => {