[Backport 2.x] [Workspace] Adjust the appearance of collaborator panel

changelogs/fragments/7795.yml

@@ -0,0 +1,2 @@
+feat:
+- Adjust the appearance of collaborator panel ([#7795](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7795))

src/plugins/workspace/public/components/workspace_form/workspace_form.tsx

@@ -103,7 +103,7 @@ export const WorkspaceForm = (props: WorkspaceFormProps) => {
                 'You will be added as an owner to the workspace. Select additional users and user groups as workspace collaborators with different access levels.',
             })}
           </EuiText>
-          <EuiSpacer size="m" />
+          <EuiSpacer size="l" />
           <WorkspacePermissionSettingPanel
             errors={formErrors.permissionSettings?.fields}
             onChange={setPermissionSettings}

src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_input.test.tsx

@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import { fireEvent, render, within } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import {
   WorkspacePermissionSettingInput,
   WorkspacePermissionSettingInputProps,
@@ -127,10 +127,7 @@ describe('WorkspacePermissionSettingInput', () => {
     const { renderResult, onPermissionModesChangeMock } = setup({});
 
     expect(onPermissionModesChangeMock).not.toHaveBeenCalled();
-    const permissionToggleListButton = within(
-      renderResult.getAllByTestId('workspace-permissionModeOptions')[0]
-    ).getByTestId('comboBoxToggleListButton');
-    fireEvent.click(permissionToggleListButton);
+    fireEvent.click(renderResult.getAllByTestId('workspace-permissionModeOptions')[0]);
     fireEvent.click(renderResult.getByText('Owner'));
     expect(onPermissionModesChangeMock).toHaveBeenCalledWith(['library_write', 'write'], 0);
   });
@@ -148,7 +145,7 @@ describe('WorkspacePermissionSettingInput', () => {
     expect(onTypeChangeMock).not.toHaveBeenCalled();
 
     fireEvent.click(renderResult.getByTestId('workspace-typeOptions'));
-    fireEvent.click(renderResult.getByText('Group'));
+    fireEvent.click(renderResult.getByText('User Group'));
     expect(onTypeChangeMock).toHaveBeenCalledWith('group', 0);
   });
 });

src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_input.tsx

@@ -3,17 +3,15 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiComboBox,
-  EuiPopover,
   EuiButtonIcon,
-  EuiButtonEmpty,
-  EuiSelectable,
   EuiComboBoxOptionOption,
-  EuiSelectableOption,
+  EuiSuperSelect,
+  EuiSuperSelectOption,
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import { WorkspacePermissionMode } from '../../../common/constants';
@@ -24,16 +22,19 @@ import {
 } from './constants';
 import { getPermissionModeId } from './utils';
 
-const permissionModeOptions = [
+const permissionModeOptions: Array<EuiSuperSelectOption<any>> = [
   {
     value: PermissionModeId.Read,
-    label: i18n.translate('workspace.form.permissionSettingPanel.permissionModeOptions.read', {
-      defaultMessage: 'Read',
-    }),
+    inputDisplay: i18n.translate(
+      'workspace.form.permissionSettingPanel.permissionModeOptions.read',
+      {
+        defaultMessage: 'Read',
+      }
+    ),
   },
   {
     value: PermissionModeId.ReadAndWrite,
-    label: i18n.translate(
+    inputDisplay: i18n.translate(
       'workspace.form.permissionSettingPanel.permissionModeOptions.readAndWrite',
       {
         defaultMessage: 'Read & Write',
@@ -42,8 +43,26 @@ const permissionModeOptions = [
   },
   {
     value: PermissionModeId.Owner,
-    label: i18n.translate('workspace.form.permissionSettingPanel.permissionModeOptions.owner', {
-      defaultMessage: 'Owner',
+    inputDisplay: i18n.translate(
+      'workspace.form.permissionSettingPanel.permissionModeOptions.owner',
+      {
+        defaultMessage: 'Owner',
+      }
+    ),
+  },
+];
+
+const typeOptions: Array<EuiSuperSelectOption<any>> = [
+  {
+    value: WorkspacePermissionItemType.User,
+    inputDisplay: i18n.translate('workspace.form.permissionSettingPanel.typeOptions.user', {
+      defaultMessage: 'User',
+    }),
+  },
+  {
+    value: WorkspacePermissionItemType.Group,
+    inputDisplay: i18n.translate('workspace.form.permissionSettingPanel.typeOptions.group', {
+      defaultMessage: 'User Group',
     }),
   },
 ];
@@ -90,36 +109,12 @@ export const WorkspacePermissionSettingInput = ({
     [group, userId]
   );
 
-  const [isTypeListOpen, setIsTypeListOpen] = useState(false);
+  const permissionModesSelected = useMemo(
+    () => getPermissionModeId(modes ?? []),
 
-  const typeOptions = useMemo<Array<EuiSelectableOption<any>>>(
-    () => [
-      {
-        value: WorkspacePermissionItemType.User,
-        label: i18n.translate('workspace.form.permissionSettingPanel.typeOptions.user', {
-          defaultMessage: 'User',
-        }),
-        checked: type === WorkspacePermissionItemType.User ? 'on' : undefined,
-      },
-      {
-        value: WorkspacePermissionItemType.Group,
-        label: i18n.translate('workspace.form.permissionSettingPanel.typeOptions.group', {
-          defaultMessage: 'Group',
-        }),
-        checked: type === WorkspacePermissionItemType.Group ? 'on' : undefined,
-      },
-    ],
-    [type]
+    [modes]
   );
 
-  const permissionModesSelected = useMemo(() => {
-    const idSelected = getPermissionModeId(modes ?? []);
-    const permissionModeSelected = permissionModeOptions.find(
-      (option) => option.value === idSelected
-    );
-    return permissionModeSelected ? [permissionModeSelected] : [];
-  }, [modes]);
-
   const handleGroupOrUserIdCreate = useCallback(
     (groupOrUserId) => {
       onGroupOrUserIdChange(
@@ -142,36 +137,33 @@ export const WorkspacePermissionSettingInput = ({
   );
 
   const handlePermissionModeOptionChange = useCallback(
-    (option: Array<EuiComboBoxOptionOption<any>>) => {
-      if (option.length > 0) {
-        const id = option[0].value;
-        if (optionIdToWorkspacePermissionModesMap[id]) {
-          onPermissionModesChange([...optionIdToWorkspacePermissionModesMap[id]], index);
-        }
+    (id: string) => {
+      if (optionIdToWorkspacePermissionModesMap[id]) {
+        onPermissionModesChange([...optionIdToWorkspacePermissionModesMap[id]], index);
       }
     },
     [index, onPermissionModesChange]
   );
 
-  const handleTypeChange = useCallback(
-    (options: Array<EuiSelectableOption<any>>) => {
-      for (const option of options) {
-        if (option.checked === 'on') {
-          onTypeChange(option.value, index);
-          setIsTypeListOpen(false);
-          return;
-        }
-      }
-    },
-    [index, onTypeChange]
-  );
-
   const handleDelete = useCallback(() => {
     onDelete(index);
   }, [index, onDelete]);
 
   return (
-    <EuiFlexGroup alignItems="center" gutterSize="m">
+    <EuiFlexGroup alignItems="center" gutterSize="s">
+      <EuiFlexItem style={{ maxWidth: 150 }}>
+        <EuiSuperSelect
+          compressed={true}
+          placeholder={i18n.translate('workspaceForm.permissionSetting.selectType', {
+            defaultMessage: 'Select',
+          })}
+          options={typeOptions}
+          valueOfSelected={type}
+          onChange={(value) => onTypeChange(value, index)}
+          disabled={userOrGroupDisabled || !isEditing}
+          data-test-subj="workspace-typeOptions"
+        />
+      </EuiFlexItem>
       <EuiFlexItem style={{ maxWidth: 400 }}>
         <EuiComboBox
           compressed={true}
@@ -189,57 +181,22 @@ export const WorkspacePermissionSettingInput = ({
                 })
           }
           isDisabled={userOrGroupDisabled || !isEditing}
-          prepend={
-            <EuiPopover
-              button={
-                <EuiButtonEmpty
-                  iconType="arrowDown"
-                  iconSide="right"
-                  onClick={() => setIsTypeListOpen((current) => !current)}
-                  data-test-subj="workspace-typeOptions"
-                  isDisabled={userOrGroupDisabled || !isEditing}
-                >
-                  {type === WorkspacePermissionItemType.User
-                    ? typeOptions[0].label
-                    : typeOptions[1].label}
-                </EuiButtonEmpty>
-              }
-              isOpen={isTypeListOpen}
-              closePopover={() => setIsTypeListOpen(false)}
-              panelPaddingSize="none"
-            >
-              <EuiSelectable
-                singleSelection={true}
-                options={typeOptions}
-                listProps={{
-                  bordered: true,
-                  rowHeight: 32,
-                  onFocusBadge: false,
-                }}
-                onChange={handleTypeChange}
-              >
-                {(list) => list}
-              </EuiSelectable>
-            </EuiPopover>
-          }
         />
       </EuiFlexItem>
-      <EuiFlexItem style={{ maxWidth: 200 }}>
-        <EuiComboBox
+      <EuiFlexItem style={{ maxWidth: 150 }}>
+        <EuiSuperSelect
           compressed={true}
-          singleSelection={{ asPlainText: true }}
           options={permissionModeOptions}
-          isDisabled={userOrGroupDisabled}
-          selectedOptions={permissionModesSelected}
+          valueOfSelected={permissionModesSelected}
           onChange={handlePermissionModeOptionChange}
-          isClearable={false}
+          disabled={userOrGroupDisabled || !isEditing}
           data-test-subj="workspace-permissionModeOptions"
         />
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
         {deletable && isEditing && (
           <EuiButtonIcon
-            color="danger"
+            color="text"
             aria-label="Delete permission setting"
             iconType="trash"
             display="empty"

src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_panel.test.tsx

@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import { fireEvent, render, waitFor, within } from '@testing-library/react';
+import { fireEvent, render, waitFor } from '@testing-library/react';
 import {
   WorkspacePermissionSettingPanel,
   WorkspacePermissionSettingPanelProps,
@@ -87,10 +87,7 @@ describe('WorkspacePermissionSettingInput', () => {
     const { renderResult, onChangeMock } = setup();
 
     expect(onChangeMock).not.toHaveBeenCalled();
-    const permissionToggleListButton = within(
-      renderResult.getAllByTestId('workspace-permissionModeOptions')[0]
-    ).getByTestId('comboBoxToggleListButton');
-    fireEvent.click(permissionToggleListButton);
+    fireEvent.click(renderResult.getAllByTestId('workspace-permissionModeOptions')[0]);
     fireEvent.click(renderResult.getAllByText('Read & Write')[1]);
     expect(onChangeMock).toHaveBeenCalledWith([
       {
@@ -111,10 +108,8 @@ describe('WorkspacePermissionSettingInput', () => {
     const { renderResult, onChangeMock } = setup();
 
     expect(onChangeMock).not.toHaveBeenCalled();
-    const permissionToggleListButton = within(
-      renderResult.getAllByTestId('workspace-permissionModeOptions')[1]
-    ).getByTestId('comboBoxToggleListButton');
-    fireEvent.click(permissionToggleListButton);
+
+    fireEvent.click(renderResult.getAllByTestId('workspace-permissionModeOptions')[1]);
     fireEvent.click(renderResult.getByText('Owner'));
     expect(onChangeMock).toHaveBeenCalledWith([
       {

src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_panel.tsx

@@ -131,7 +131,16 @@ export const WorkspacePermissionSettingPanel = ({
 
   return (
     <div>
-      <EuiFlexGroup gutterSize="m">
+      <EuiFlexGroup gutterSize="s">
+        <EuiFlexItem style={{ maxWidth: 150 }}>
+          <EuiCompressedFormRow
+            label={i18n.translate('workspaceForm.permissionSetting.typeLabel', {
+              defaultMessage: 'Type',
+            })}
+          >
+            <></>
+          </EuiCompressedFormRow>
+        </EuiFlexItem>
         <EuiFlexItem style={{ maxWidth: 400 }}>
           <EuiCompressedFormRow
             label={i18n.translate('workspaceForm.permissionSetting.collaboratorLabel', {