[Workspace] Updated permission settings appearance

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

@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import { fireEvent, render, waitFor } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import {
   WorkspacePermissionSettingInput,
   WorkspacePermissionSettingInputProps,
@@ -116,11 +116,17 @@ describe('WorkspacePermissionSettingInput', () => {
 
 it('should call onTypeChange with types after types changed', () => {
   const { renderResult, onTypeChangeMock } = setup({});
-
-  expect(onTypeChangeMock).not.toHaveBeenCalled();
-  waitFor(() => {
-    fireEvent.click(renderResult.getByTestId('workspace-typeOptions'));
-    fireEvent.click(renderResult.getByText('Group'));
-    expect(onTypeChangeMock).toHaveBeenCalledWith('group', 0);
+  Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
+    configurable: true,
+    value: 600,
+  });
+  Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
+    configurable: true,
+    value: 600,
   });
+  expect(onTypeChangeMock).not.toHaveBeenCalled();
+
+  fireEvent.click(renderResult.getByTestId('workspace-typeOptions'));
+  fireEvent.click(renderResult.getByText('Group'));
+  expect(onTypeChangeMock).toHaveBeenCalledWith('group', 0);
 });

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

@@ -102,12 +102,20 @@ describe('WorkspacePermissionSettingInput', () => {
     ]);
   });
   it('should call onChange with new user type', () => {
+    Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
+      configurable: true,
+      value: 600,
+    });
+    Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
+      configurable: true,
+      value: 600,
+    });
     const { renderResult, onChangeMock } = setup();
+    expect(onChangeMock).not.toHaveBeenCalled();
 
     waitFor(() => {
-      expect(onChangeMock).not.toHaveBeenCalled();
       fireEvent.click(renderResult.getAllByTestId('workspace-typeOptions')[1]);
-      fireEvent.click(renderResult.getByText('User'));
+      fireEvent.click(renderResult.getAllByText('User')[1]);
       expect(onChangeMock).toHaveBeenCalledWith([
         {
           id: 0,
@@ -124,12 +132,20 @@ describe('WorkspacePermissionSettingInput', () => {
     });
   });
   it('should call onChange with new group type', () => {
+    Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
+      configurable: true,
+      value: 600,
+    });
+    Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
+      configurable: true,
+      value: 600,
+    });
     const { renderResult, onChangeMock } = setup();
 
     expect(onChangeMock).not.toHaveBeenCalled();
     waitFor(() => {
       fireEvent.click(renderResult.getAllByTestId('workspace-typeOptions')[0]);
-      fireEvent.click(renderResult.getByText('Group'));
+      fireEvent.click(renderResult.getAllByText('Group')[0]);
       expect(onChangeMock).toHaveBeenCalledWith([
         {
           id: 0,
@@ -162,6 +178,29 @@ describe('WorkspacePermissionSettingInput', () => {
     ]);
   });
 
+  it('should call onChange with user permission setting after delete button click', () => {
+    const { renderResult, onChangeMock } = setup();
+
+    expect(onChangeMock).not.toHaveBeenCalled();
+    fireEvent.click(renderResult.getAllByLabelText('Delete permission setting')[0]);
+    expect(onChangeMock).toHaveBeenCalledWith([
+      {
+        id: 1,
+        type: WorkspacePermissionItemType.Group,
+        group: 'bar',
+        modes: [WorkspacePermissionMode.LibraryWrite, WorkspacePermissionMode.Read],
+      },
+    ]);
+  });
+
+  it('should call onGroupOrUserIdChange without user id after clear button clicked', () => {
+    const { renderResult, onChangeMock } = setup();
+
+    expect(onChangeMock).not.toHaveBeenCalled();
+    fireEvent.click(renderResult.getAllByTestId('comboBoxClearButton')[0]);
+    expect(onChangeMock).toHaveBeenCalled();
+  });
+
   it('should not able to edit user or group when disabled', () => {
     const { renderResult } = setup({
       permissionSettings: [