[Backport 2.x] [Workspace] Update collaborator input to text field

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

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

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<EuiComboBoxOptionOption<any>>) => {
-      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 = ({
         />
       </EuiFlexItem>
       <EuiFlexItem style={{ maxWidth: 400 }}>
-        <EuiComboBox
+        <EuiFieldText
           compressed={true}
-          singleSelection={{ asPlainText: true }}
-          selectedOptions={groupOrUserIdSelectedOptions}
-          onCreateOption={handleGroupOrUserIdCreate}
+          disabled={userOrGroupDisabled || !isEditing}
           onChange={handleGroupOrUserIdChange}
+          value={(type === WorkspacePermissionItemType.User ? userId : group) ?? ''}
+          data-test-subj="workspaceFormUserIdOrGroupInput"
           placeholder={
             type === WorkspacePermissionItemType.User
               ? i18n.translate('workspaceForm.permissionSetting.selectUser', {
-                  defaultMessage: 'Select a user',
+                  defaultMessage: 'Enter user name or uer ID',
                 })
               : i18n.translate('workspaceForm.permissionSetting.selectUserGroup', {
-                  defaultMessage: 'Select a user group',
+                  defaultMessage: 'Enter group name or group ID',
                 })
           }
-          isDisabled={userOrGroupDisabled || !isEditing}
         />
       </EuiFlexItem>
       <EuiFlexItem style={{ maxWidth: 150 }}>

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', () => {