From 14af74b6a51b5c6390e97dea109744b25699f394 Mon Sep 17 00:00:00 2001 From: Kapian1234 Date: Fri, 2 Aug 2024 16:02:24 +0800 Subject: [PATCH 01/27] Changed permission control style Signed-off-by: Kapian1234 --- .../workspace_permission_setting_input.tsx | 134 +++++++++++++----- .../workspace_permission_setting_panel.tsx | 26 ++-- 2 files changed, 114 insertions(+), 46 deletions(-) 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 8827f9bf9b74..aa62ec7a7782 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 @@ -11,8 +11,13 @@ import { EuiButtonIcon, EuiButtonGroup, EuiText, + EuiSelect, + EuiComboBox, + EuiComboBoxOptionOption, + EuiPopover, } from '@elastic/eui'; import { i18n } from '@osd/i18n'; +import { label } from 'joi'; import { WorkspacePermissionMode } from '../../../common/constants'; import { WorkspacePermissionItemType, @@ -21,39 +26,63 @@ import { } from './constants'; import { getPermissionModeId } from './utils'; +// const permissionModeOptions = [ +// { +// id: PermissionModeId.Read, +// label: ( +// +// {i18n.translate('workspace.form.permissionSettingPanel.permissionModeOptions.read', { +// defaultMessage: 'Read', +// })} +// +// ), +// }, +// { +// id: PermissionModeId.ReadAndWrite, +// label: ( +// +// {i18n.translate( +// 'workspace.form.permissionSettingPanel.permissionModeOptions.readAndWrite', +// { +// defaultMessage: 'Read & Write', +// } +// )} +// +// ), +// }, +// { +// id: PermissionModeId.Owner, +// label: ( +// +// {i18n.translate('workspace.form.permissionSettingPanel.permissionModeOptions.owner', { +// defaultMessage: 'Owner', +// })} +// +// ), +// }, +// ]; + const permissionModeOptions = [ { - id: PermissionModeId.Read, - label: ( - - {i18n.translate('workspace.form.permissionSettingPanel.permissionModeOptions.read', { - defaultMessage: 'Read', - })} - - ), + value: PermissionModeId.Read, + label: i18n.translate('workspace.form.permissionSettingPanel.permissionModeOptions.read', { + defaultMessage: 'Read', + }), }, { - id: PermissionModeId.ReadAndWrite, - label: ( - - {i18n.translate( - 'workspace.form.permissionSettingPanel.permissionModeOptions.readAndWrite', - { - defaultMessage: 'Read & Write', - } - )} - + value: PermissionModeId.ReadAndWrite, + label: i18n.translate( + 'workspace.form.permissionSettingPanel.permissionModeOptions.readAndWrite', + { + defaultMessage: 'Read & Write', + } ), }, { - id: PermissionModeId.Owner, - label: ( - - {i18n.translate('workspace.form.permissionSettingPanel.permissionModeOptions.owner', { - defaultMessage: 'Owner', - })} - - ), + value: PermissionModeId.Owner, + label: i18n.translate('workspace.form.permissionSettingPanel.permissionModeOptions.owner', { + defaultMessage: 'Owner', + }), }, ]; @@ -75,6 +104,9 @@ export interface WorkspacePermissionSettingInputProps { WorkspacePermissionMode: WorkspacePermissionMode[], index: number ) => void; + // onGroupOrUserTypeChange: ( + + // ) => void onDelete: (index: number) => void; } @@ -95,7 +127,15 @@ export const WorkspacePermissionSettingInput = ({ [group, userId] ); - const permissionModesSelectedId = useMemo(() => getPermissionModeId(modes ?? []), [modes]); + // const permissionModesSelectedId = useMemo(() => getPermissionModeId(modes ?? []), [modes]); + const idSelected = useMemo(() => getPermissionModeId(modes ?? []), [modes]); + const permissionModesSelected = useMemo(() => { + const permissionModeSelected = permissionModeOptions.find( + (option) => option.value === idSelected + ); + return permissionModeSelected ? [permissionModeSelected] : []; + }, [idSelected]); + const handleGroupOrUserIdCreate = useCallback( (groupOrUserId) => { onGroupOrUserIdChange( @@ -117,10 +157,23 @@ export const WorkspacePermissionSettingInput = ({ [index, type, onGroupOrUserIdChange] ); + // const handlePermissionModeOptionChange = useCallback( + // (id: string) => { + // if (optionIdToWorkspacePermissionModesMap[id]) { + // onPermissionModesChange([...optionIdToWorkspacePermissionModesMap[id]], index); + // console.log(id) + // } + // }, + // [index, onPermissionModesChange] + // ); const handlePermissionModeOptionChange = useCallback( - (id: string) => { - if (optionIdToWorkspacePermissionModesMap[id]) { - onPermissionModesChange([...optionIdToWorkspacePermissionModesMap[id]], index); + (option) => { + if (option) { + const id = option[0].value; + if (optionIdToWorkspacePermissionModesMap[id]) { + onPermissionModesChange([...optionIdToWorkspacePermissionModesMap[id]], index); + // console.log(id); + } } }, [index, onPermissionModesChange] @@ -131,10 +184,10 @@ export const WorkspacePermissionSettingInput = ({ }, [index, onDelete]); return ( - + - } /> - + {/* - + */} + {deletable && ( <> @@ -120,7 +123,7 @@ const UserOrGroupSection = ({ <> @@ -153,13 +156,16 @@ const UserOrGroupSection = ({ data-test-subj={`workspaceForm-permissionSettingPanel-${type}-addNew`} color="secondary" > - {type === WorkspacePermissionItemType.User + {/* {type === WorkspacePermissionItemType.User ? i18n.translate('workspace.form.permissionSettingPanel.addUser', { defaultMessage: 'Add user', }) : i18n.translate('workspace.form.permissionSettingPanel.addUserGroup', { defaultMessage: 'Add user group', - })} + })} */} + {i18n.translate('workspace.form.permissionSettingPanel.addCollaborator', { + defaultMessage: 'Add collaborator', + })} ); From e28f4a98d46f25c16b8e7e3184fc32b8e36a4c11 Mon Sep 17 00:00:00 2001 From: Kapian1234 Date: Mon, 5 Aug 2024 14:13:42 +0800 Subject: [PATCH 02/27] Merged the group section and user section, and added type switching. Signed-off-by: Kapian1234 --- .../components/workspace_form/constants.ts | 2 +- .../workspace_permission_setting_input.tsx | 125 +++++++----------- .../workspace_permission_setting_panel.tsx | 98 +++++--------- 3 files changed, 82 insertions(+), 143 deletions(-) diff --git a/src/plugins/workspace/public/components/workspace_form/constants.ts b/src/plugins/workspace/public/components/workspace_form/constants.ts index 2a2c7142d6f0..e2a0e4f1b7a2 100644 --- a/src/plugins/workspace/public/components/workspace_form/constants.ts +++ b/src/plugins/workspace/public/components/workspace_form/constants.ts @@ -46,7 +46,7 @@ export const selectDataSourceTitle = i18n.translate('workspace.form.selectDataSo }); export const usersAndPermissionsTitle = i18n.translate('workspace.form.usersAndPermissions.title', { - defaultMessage: 'Manage access and permissions', + defaultMessage: 'Add collaborators', }); export enum DetailTab { 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 aa62ec7a7782..290f21b67557 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 @@ -4,20 +4,8 @@ */ import React, { useCallback, useMemo } from 'react'; -import { - EuiFlexGroup, - EuiCompressedComboBox, - EuiFlexItem, - EuiButtonIcon, - EuiButtonGroup, - EuiText, - EuiSelect, - EuiComboBox, - EuiComboBoxOptionOption, - EuiPopover, -} from '@elastic/eui'; +import { EuiFlexGroup, EuiFlexItem, EuiButtonIcon, EuiSelect, EuiComboBox } from '@elastic/eui'; import { i18n } from '@osd/i18n'; -import { label } from 'joi'; import { WorkspacePermissionMode } from '../../../common/constants'; import { WorkspacePermissionItemType, @@ -26,42 +14,6 @@ import { } from './constants'; import { getPermissionModeId } from './utils'; -// const permissionModeOptions = [ -// { -// id: PermissionModeId.Read, -// label: ( -// -// {i18n.translate('workspace.form.permissionSettingPanel.permissionModeOptions.read', { -// defaultMessage: 'Read', -// })} -// -// ), -// }, -// { -// id: PermissionModeId.ReadAndWrite, -// label: ( -// -// {i18n.translate( -// 'workspace.form.permissionSettingPanel.permissionModeOptions.readAndWrite', -// { -// defaultMessage: 'Read & Write', -// } -// )} -// -// ), -// }, -// { -// id: PermissionModeId.Owner, -// label: ( -// -// {i18n.translate('workspace.form.permissionSettingPanel.permissionModeOptions.owner', { -// defaultMessage: 'Owner', -// })} -// -// ), -// }, -// ]; - const permissionModeOptions = [ { value: PermissionModeId.Read, @@ -86,6 +38,21 @@ const permissionModeOptions = [ }, ]; +const typeOptions = [ + { + value: WorkspacePermissionItemType.User, + text: i18n.translate('workspace.form.permissionSettingPanel.typeOptions.user', { + defaultMessage: 'User', + }), + }, + { + value: WorkspacePermissionItemType.Group, + text: i18n.translate('workspace.form.permissionSettingPanel.typeOptions.group', { + defaultMessage: 'Group', + }), + }, +]; + export interface WorkspacePermissionSettingInputProps { index: number; type: WorkspacePermissionItemType; @@ -104,9 +71,12 @@ export interface WorkspacePermissionSettingInputProps { WorkspacePermissionMode: WorkspacePermissionMode[], index: number ) => void; - // onGroupOrUserTypeChange: ( - - // ) => void + onTypeChange: ( + WorkspacePermissionItemType: + | WorkspacePermissionItemType.User + | WorkspacePermissionItemType.Group, + index: number + ) => void; onDelete: (index: number) => void; } @@ -121,6 +91,7 @@ export const WorkspacePermissionSettingInput = ({ onDelete, onGroupOrUserIdChange, onPermissionModesChange, + onTypeChange, }: WorkspacePermissionSettingInputProps) => { const groupOrUserIdSelectedOptions = useMemo( () => (group || userId ? [{ label: (group || userId) as string }] : []), @@ -157,28 +128,28 @@ export const WorkspacePermissionSettingInput = ({ [index, type, onGroupOrUserIdChange] ); - // const handlePermissionModeOptionChange = useCallback( - // (id: string) => { - // if (optionIdToWorkspacePermissionModesMap[id]) { - // onPermissionModesChange([...optionIdToWorkspacePermissionModesMap[id]], index); - // console.log(id) - // } - // }, - // [index, onPermissionModesChange] - // ); const handlePermissionModeOptionChange = useCallback( (option) => { if (option) { const id = option[0].value; if (optionIdToWorkspacePermissionModesMap[id]) { onPermissionModesChange([...optionIdToWorkspacePermissionModesMap[id]], index); - // console.log(id); } } }, [index, onPermissionModesChange] ); + const handleTypeChange = useCallback( + (e) => { + if (e.target.value) { + const option = e.target.value; + onTypeChange(option, index); + } + }, + [index, onTypeChange] + ); + const handleDelete = useCallback(() => { onDelete(index); }, [index, onDelete]); @@ -201,29 +172,23 @@ export const WorkspacePermissionSettingInput = ({ }) } isDisabled={userOrGroupDisabled} - prepend={} + prepend={ + + + + } /> - {/* - + - */} - + {deletable && ( number; } const UserOrGroupSection = ({ - type, + // type, errors, onChange, nextIdGenerator, @@ -54,11 +54,11 @@ const UserOrGroupSection = ({ ...permissionSettings, { id: nextIdGenerator(), - type, + type: WorkspacePermissionItemType.User, modes: optionIdToWorkspacePermissionModesMap[PermissionModeId.Read], }, ]); - }, [onChange, type, permissionSettings, nextIdGenerator]); + }, [onChange, permissionSettings, nextIdGenerator]); const handleDelete = useCallback( (index: number) => { @@ -99,23 +99,34 @@ const UserOrGroupSection = ({ [onChange, permissionSettings] ); + const handleTypeChange = useCallback( + (type, index) => { + onChange?.( + permissionSettings.map((item, itemIndex) => { + if (index === itemIndex) { + if (type === WorkspacePermissionItemType.User) { + const { group, ...newItem } = { ...item, type, userId: '', group: '' }; + return newItem; + } else { + const { userId, ...newItem } = { ...item, type, userId: '', group: '' }; + return newItem; + } + } + return item; + }) + ); + }, + [onChange, permissionSettings] + ); + return (
<> @@ -140,12 +151,13 @@ const UserOrGroupSection = ({ > @@ -153,16 +165,9 @@ const UserOrGroupSection = ({ - {/* {type === WorkspacePermissionItemType.User - ? i18n.translate('workspace.form.permissionSettingPanel.addUser', { - defaultMessage: 'Add user', - }) - : i18n.translate('workspace.form.permissionSettingPanel.addUserGroup', { - defaultMessage: 'Add user group', - })} */} {i18n.translate('workspace.form.permissionSettingPanel.addCollaborator', { defaultMessage: 'Add collaborator', })} @@ -177,35 +182,13 @@ export const WorkspacePermissionSettingPanel = ({ permissionSettings, disabledUserOrGroupInputIds, }: WorkspacePermissionSettingPanelProps) => { - const userPermissionSettings = useMemo( - () => - permissionSettings?.filter( - (permissionSettingItem) => permissionSettingItem.type === WorkspacePermissionItemType.User - ) ?? [], - [permissionSettings] - ); - const groupPermissionSettings = useMemo( - () => - permissionSettings?.filter( - (permissionSettingItem) => permissionSettingItem.type === WorkspacePermissionItemType.Group - ) ?? [], - [permissionSettings] - ); - const nextIdRef = useRef(generateNextPermissionSettingsId(permissionSettings)); - const handleUserPermissionSettingsChange = useCallback( - (newSettings) => { - onChange?.([...newSettings, ...groupPermissionSettings]); - }, - [groupPermissionSettings, onChange] - ); - - const handleGroupPermissionSettingsChange = useCallback( + const handlePermissionSettingsChange = useCallback( (newSettings) => { - onChange?.([...userPermissionSettings, ...newSettings]); + onChange?.([...newSettings]); }, - [userPermissionSettings, onChange] + [onChange] ); const nextIdGenerator = useCallback(() => { @@ -225,21 +208,12 @@ export const WorkspacePermissionSettingPanel = ({
-
); }; From 3d860e2183887d5d5888b4ecaca786b24b2e90b1 Mon Sep 17 00:00:00 2001 From: Kapian1234 Date: Mon, 5 Aug 2024 17:37:40 +0800 Subject: [PATCH 03/27] Added isDisabled for permission control Signed-off-by: Kapian1234 --- .../workspace_form/workspace_permission_setting_input.tsx | 2 +- .../workspace_form/workspace_permission_setting_panel.tsx | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) 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 290f21b67557..5146463ff623 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 @@ -183,7 +183,7 @@ export const WorkspacePermissionSettingInput = ({ -
); }; From 4b7a368ad083b4659fcd05ec133bbc337a235659 Mon Sep 17 00:00:00 2001 From: Kapian1234 Date: Tue, 6 Aug 2024 17:26:18 +0800 Subject: [PATCH 04/27] Modified styles and added descriptions for permission control Signed-off-by: Kapian1234 --- .../workspace_form/workspace_form.tsx | 10 +++++++++- .../workspace_permission_setting_input.tsx | 17 +++++++++++++++-- .../workspace_permission_setting_panel.tsx | 3 ++- 3 files changed, 26 insertions(+), 4 deletions(-) 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 c7e319b48435..8bf3f50b5263 100644 --- a/src/plugins/workspace/public/components/workspace_form/workspace_form.tsx +++ b/src/plugins/workspace/public/components/workspace_form/workspace_form.tsx @@ -4,8 +4,9 @@ */ import React, { useRef } from 'react'; -import { EuiPanel, EuiSpacer, EuiTitle, EuiForm } from '@elastic/eui'; +import { EuiPanel, EuiSpacer, EuiTitle, EuiForm, EuiText } from '@elastic/eui'; +import { i18n } from '@osd/i18n'; import { WorkspaceBottomBar } from './workspace_bottom_bar'; import { WorkspaceFormProps } from './types'; import { useWorkspaceForm } from './use_workspace_form'; @@ -97,6 +98,13 @@ export const WorkspaceForm = (props: WorkspaceFormProps) => {

{usersAndPermissionsTitle}

 + + + {i18n.translate('workspace.form.usersAndPermissions.description', { + defaultMessage: + 'You will be added as an owner to the workspace. Select additional users and user groups as workspace collaborators with different access levels.', + })} + - + } /> - + {i18n.translate('workspace.form.permissionSettingPanel.addCollaborator', { defaultMessage: 'Add collaborator', From 2bf47e1f4061ad51c7023ff0e1d30ef4847d277f Mon Sep 17 00:00:00 2001 From: Kapian1234 Date: Wed, 7 Aug 2024 15:43:54 +0800 Subject: [PATCH 05/27] / Signed-off-by: Kapian1234 --- .../workspace_form/workspace_permission_setting_input.scss | 7 +++++++ .../workspace_permission_setting_input.test.tsx | 4 +--- .../workspace_form/workspace_permission_setting_input.tsx | 1 + 3 files changed, 9 insertions(+), 3 deletions(-) create mode 100644 src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_input.scss diff --git a/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_input.scss b/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_input.scss new file mode 100644 index 000000000000..a3289787937a --- /dev/null +++ b/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_input.scss @@ -0,0 +1,7 @@ +.workspacePermissionSettingUserAndGroupSelect { + background-color: $euiFormInputGroupLabelBackground; + + &:focus { + background-color: $euiFormInputGroupLabelBackground; + } +} 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 fc0f7ec6b44c..d85878b3c989 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 @@ -44,9 +44,6 @@ describe('WorkspacePermissionSettingInput', () => { expect(renderResult.getByText('foo')).toBeInTheDocument(); expect(renderResult.getByText('Read')).toBeInTheDocument(); - expect( - renderResult.getByText('Read').closest('.euiButtonGroupButton-isSelected') - ).toBeInTheDocument(); }); it('should render consistent group id and permission modes', () => { const { renderResult } = setup({ @@ -100,6 +97,7 @@ describe('WorkspacePermissionSettingInput', () => { const { renderResult, onPermissionModesChangeMock } = setup({}); expect(onPermissionModesChangeMock).not.toHaveBeenCalled(); + fireEvent.click(renderResult.getByTestId('workspace.permissionModeOptions')); fireEvent.click(renderResult.getByText('Owner')); expect(onPermissionModesChangeMock).toHaveBeenCalledWith(['library_write', 'write'], 0); }); 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 11d7ae0a3ae2..5812b86fd168 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 @@ -200,6 +200,7 @@ export const WorkspacePermissionSettingInput = ({ selectedOptions={permissionModesSelected} onChange={handlePermissionModeOptionChange} isClearable={false} + data-test-subj="workspace.permissionModeOptions" /> From 272b57f10aace475d5e3bace40ca6401861f0a8f Mon Sep 17 00:00:00 2001 From: Kapian1234 Date: Thu, 8 Aug 2024 11:13:17 +0800 Subject: [PATCH 06/27] Modified tests Signed-off-by: Kapian1234 --- ...orkspace_permission_setting_input.test.tsx | 29 ++++++++++---- .../workspace_permission_setting_input.tsx | 1 + ...orkspace_permission_setting_panel.test.tsx | 38 +++++++------------ .../workspace_permission_setting_panel.tsx | 2 +- 4 files changed, 36 insertions(+), 34 deletions(-) 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 d85878b3c989..36eda137cdb8 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 @@ -16,6 +16,7 @@ const setup = (options?: Partial) => { const onGroupOrUserIdChangeMock = jest.fn(); const onPermissionModesChangeMock = jest.fn(); const onDeleteMock = jest.fn(); + const onTypeChangeMock = jest.fn(); const renderResult = render( ) => { onGroupOrUserIdChange={onGroupOrUserIdChangeMock} onPermissionModesChange={onPermissionModesChangeMock} onDelete={onDeleteMock} + onTypeChange={onTypeChangeMock} {...options} /> ); @@ -32,6 +34,7 @@ const setup = (options?: Partial) => { onGroupOrUserIdChangeMock, onPermissionModesChangeMock, onDeleteMock, + onTypeChangeMock, }; }; @@ -54,19 +57,16 @@ describe('WorkspacePermissionSettingInput', () => { expect(renderResult.getByText('bar')).toBeInTheDocument(); expect(renderResult.getByText('Read & Write')).toBeInTheDocument(); - expect( - renderResult.getByText('Read & Write').closest('.euiButtonGroupButton-isSelected') - ).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.getByTestId('comboBoxSearchInput'), { + fireEvent.input(renderResult.getAllByTestId('comboBoxSearchInput')[0], { target: { value: 'user1' }, }); - fireEvent.blur(renderResult.getByTestId('comboBoxSearchInput')); + fireEvent.blur(renderResult.getAllByTestId('comboBoxSearchInput')[0]); expect(onGroupOrUserIdChangeMock).toHaveBeenCalledWith({ type: 'user', userId: 'user1' }, 0); }); it('should call onGroupOrUserIdChange with group', () => { @@ -76,10 +76,10 @@ describe('WorkspacePermissionSettingInput', () => { expect(onGroupOrUserIdChangeMock).not.toHaveBeenCalled(); fireEvent.click(renderResult.getByText('Select a user group')); - fireEvent.input(renderResult.getByTestId('comboBoxSearchInput'), { + fireEvent.input(renderResult.getAllByTestId('comboBoxSearchInput')[0], { target: { value: 'group' }, }); - fireEvent.blur(renderResult.getByTestId('comboBoxSearchInput')); + fireEvent.blur(renderResult.getAllByTestId('comboBoxSearchInput')[0]); expect(onGroupOrUserIdChangeMock).toHaveBeenCalledWith({ type: 'group', group: 'group' }, 0); }); @@ -97,7 +97,10 @@ describe('WorkspacePermissionSettingInput', () => { const { renderResult, onPermissionModesChangeMock } = setup({}); expect(onPermissionModesChangeMock).not.toHaveBeenCalled(); - fireEvent.click(renderResult.getByTestId('workspace.permissionModeOptions')); + const permissionToggleListButton = renderResult + .getAllByTestId('comboBoxToggleListButton') + .filter((button) => button.closest('[data-test-subj="workspace.permissionModeOptions"]'))[0]; + fireEvent.click(permissionToggleListButton); fireEvent.click(renderResult.getByText('Owner')); expect(onPermissionModesChangeMock).toHaveBeenCalledWith(['library_write', 'write'], 0); }); @@ -110,3 +113,13 @@ describe('WorkspacePermissionSettingInput', () => { expect(onDeleteMock).toHaveBeenCalledWith(0); }); }); + +it('should call onTypeChange with types after types changed', () => { + const { renderResult, onTypeChangeMock } = setup({}); + + expect(onTypeChangeMock).not.toHaveBeenCalled(); + fireEvent.change(renderResult.getByTestId('workspace.typeOptions'), { + target: { value: 'group' }, + }); + expect(onTypeChangeMock).toHaveBeenCalledWith('group', 0); +}); 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 5812b86fd168..5d5b4f88c38c 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 @@ -186,6 +186,7 @@ export const WorkspacePermissionSettingInput = ({ boxShadow: 'none', fontWeight: 'bold', }} + data-test-subj="workspace.typeOptions" /> } 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 6e8a3ffb62dc..80f1859ec568 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 @@ -47,21 +47,21 @@ describe('WorkspacePermissionSettingInput', () => { const { renderResult } = setup(); expect(renderResult.getByText('foo')).toBeInTheDocument(); - expect( - renderResult.getAllByText('Read')[0].closest('.euiButtonGroupButton-isSelected') - ).toBeInTheDocument(); + expect(renderResult.getByText('Read')).toBeInTheDocument(); expect(renderResult.getByText('bar')).toBeInTheDocument(); - expect( - renderResult.getAllByText('Read & Write')[1].closest('.euiButtonGroupButton-isSelected') - ).toBeInTheDocument(); + expect(renderResult.getByText('Read & Write')).toBeInTheDocument(); }); it('should call onChange with new user permission modes', () => { const { renderResult, onChangeMock } = setup(); expect(onChangeMock).not.toHaveBeenCalled(); - fireEvent.click(renderResult.getAllByText('Read & Write')[0]); + const permissionToggleListButton = renderResult + .getAllByTestId('comboBoxToggleListButton') + .filter((button) => button.closest('[data-test-subj="workspace.permissionModeOptions"]'))[0]; + fireEvent.click(permissionToggleListButton); + fireEvent.click(renderResult.getAllByText('Read & Write')[1]); expect(onChangeMock).toHaveBeenCalledWith([ { id: 0, @@ -81,7 +81,11 @@ describe('WorkspacePermissionSettingInput', () => { const { renderResult, onChangeMock } = setup(); expect(onChangeMock).not.toHaveBeenCalled(); - fireEvent.click(renderResult.getAllByText('Owner')[1]); + const permissionToggleListButton = renderResult + .getAllByTestId('comboBoxToggleListButton') + .filter((button) => button.closest('[data-test-subj="workspace.permissionModeOptions"]'))[1]; + fireEvent.click(permissionToggleListButton); + fireEvent.click(renderResult.getByText('Owner')); expect(onChangeMock).toHaveBeenCalledWith([ { id: 0, @@ -104,7 +108,7 @@ describe('WorkspacePermissionSettingInput', () => { }); expect(onChangeMock).not.toHaveBeenCalled(); - fireEvent.click(renderResult.getByTestId('workspaceForm-permissionSettingPanel-user-addNew')); + fireEvent.click(renderResult.getByTestId('workspaceForm-permissionSettingPanel-addNew')); expect(onChangeMock).toHaveBeenCalledWith([ { id: 0, @@ -114,22 +118,6 @@ describe('WorkspacePermissionSettingInput', () => { ]); }); - it('should call onChange with new group permission setting after add new button click', () => { - const { renderResult, onChangeMock } = setup({ - permissionSettings: [], - }); - - expect(onChangeMock).not.toHaveBeenCalled(); - fireEvent.click(renderResult.getByTestId('workspaceForm-permissionSettingPanel-group-addNew')); - expect(onChangeMock).toHaveBeenCalledWith([ - { - id: 0, - type: WorkspacePermissionItemType.Group, - modes: [WorkspacePermissionMode.LibraryRead, WorkspacePermissionMode.Read], - }, - ]); - }); - it('should not able to edit user or group when disabled', () => { const { renderResult } = setup({ permissionSettings: [ diff --git a/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_panel.tsx b/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_panel.tsx index a51109d7f57e..ef0065a6aeae 100644 --- a/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_panel.tsx +++ b/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_panel.tsx @@ -165,7 +165,7 @@ const UserOrGroupSection = ({ From afb5a252e40fa860122bdb802252c27a27773004 Mon Sep 17 00:00:00 2001 From: "opensearch-changeset-bot[bot]" <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com> Date: Thu, 8 Aug 2024 03:44:48 +0000 Subject: [PATCH 07/27] Changeset file for PR #7652 created/updated --- changelogs/fragments/7652.yml | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 changelogs/fragments/7652.yml diff --git a/changelogs/fragments/7652.yml b/changelogs/fragments/7652.yml new file mode 100644 index 000000000000..132afc64c12c --- /dev/null +++ b/changelogs/fragments/7652.yml @@ -0,0 +1,2 @@ +feat: +- Update permission settings appearance ([#7652](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7652)) \ No newline at end of file From 97505a9768339a6accdf58b3dd8bbf8d3d16de6c Mon Sep 17 00:00:00 2001 From: Kapian1234 Date: Thu, 8 Aug 2024 13:11:31 +0800 Subject: [PATCH 08/27] Modified tests Signed-off-by: Kapian1234 --- .../components/workspace_detail/workspace_detail.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugins/workspace/public/components/workspace_detail/workspace_detail.test.tsx b/src/plugins/workspace/public/components/workspace_detail/workspace_detail.test.tsx index 030cc03fee99..20cb142dc69a 100644 --- a/src/plugins/workspace/public/components/workspace_detail/workspace_detail.test.tsx +++ b/src/plugins/workspace/public/components/workspace_detail/workspace_detail.test.tsx @@ -107,7 +107,7 @@ describe('WorkspaceDetail', () => { }); expect(document.querySelector('#collaborators')).toHaveClass('euiTab-isSelected'); await waitFor(() => { - expect(screen.queryByText('Manage access and permissions')).not.toBeNull(); + expect(screen.queryByText('Add collaborators')).not.toBeNull(); }); }); From 3fe0e7bac8e29283cdd9d618b7b5cb3500d46e18 Mon Sep 17 00:00:00 2001 From: Kapian1234 Date: Thu, 8 Aug 2024 13:52:48 +0800 Subject: [PATCH 09/27] Modified tests Signed-off-by: Kapian1234 --- .../components/workspace_creator/workspace_creator.test.tsx | 2 +- .../components/workspace_detail/workspace_updater.test.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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 8550e0c4fa91..f4589bdffe11 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 @@ -249,7 +249,7 @@ describe('WorkspaceCreator', () => { target: { value: 'test workspace name' }, }); fireEvent.click(getByTestId('workspaceUseCase-observability')); - fireEvent.click(getByTestId('workspaceForm-permissionSettingPanel-user-addNew')); + fireEvent.click(getByTestId('workspaceForm-permissionSettingPanel-addNew')); fireEvent.click(getByTestId('workspaceForm-bottomBar-createButton')); expect(workspaceClientCreate).toHaveBeenCalledWith( expect.objectContaining({ diff --git a/src/plugins/workspace/public/components/workspace_detail/workspace_updater.test.tsx b/src/plugins/workspace/public/components/workspace_detail/workspace_updater.test.tsx index 8f28fdd816dc..ac886d961c6d 100644 --- a/src/plugins/workspace/public/components/workspace_detail/workspace_updater.test.tsx +++ b/src/plugins/workspace/public/components/workspace_detail/workspace_updater.test.tsx @@ -261,7 +261,7 @@ describe('WorkspaceUpdater', () => { const { getByTestId, getAllByTestId } = render( ); - await waitFor(() => expect(screen.queryByText('Manage access and permissions')).not.toBeNull()); + await waitFor(() => expect(screen.queryByText('Add collaborators')).not.toBeNull()); const userIdInput = getAllByTestId('comboBoxSearchInput')[0]; fireEvent.click(userIdInput); From 31a87ee8a451f5459b31e15edf746ed22f77401c Mon Sep 17 00:00:00 2001 From: Kapian1234 Date: Fri, 9 Aug 2024 09:58:34 +0800 Subject: [PATCH 10/27] / Signed-off-by: Kapian1234 --- docs/_sidebar.md | 2 ++ .../workspace_form/workspace_permission_setting_input.tsx | 1 - 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/_sidebar.md b/docs/_sidebar.md index e5136a6df4c5..792c35e3949b 100644 --- a/docs/_sidebar.md +++ b/docs/_sidebar.md @@ -30,6 +30,7 @@ - public - application - [Hooks](../src/plugins/console/public/application/hooks/README.md) + - [Content_management](../src/plugins/content_management/README.md) - [Csp_handler](../src/plugins/csp_handler/README.md) - [Dashboard](../src/plugins/dashboard/README.md) - [Data](../src/plugins/data/README.md) @@ -164,6 +165,7 @@ - [Opensearch dashboards.release notes 2.13.0](../release-notes/opensearch-dashboards.release-notes-2.13.0.md) - [Opensearch dashboards.release notes 2.14.0](../release-notes/opensearch-dashboards.release-notes-2.14.0.md) - [Opensearch dashboards.release notes 2.15.0](../release-notes/opensearch-dashboards.release-notes-2.15.0.md) + - [Opensearch dashboards.release notes 2.16.0](../release-notes/opensearch-dashboards.release-notes-2.16.0.md) - [Opensearch dashboards.release notes 2.2.0](../release-notes/opensearch-dashboards.release-notes-2.2.0.md) - [Opensearch dashboards.release notes 2.2.1](../release-notes/opensearch-dashboards.release-notes-2.2.1.md) - [Opensearch dashboards.release notes 2.3.0](../release-notes/opensearch-dashboards.release-notes-2.3.0.md) 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 5d5b4f88c38c..2e9e1d77852e 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 @@ -99,7 +99,6 @@ export const WorkspacePermissionSettingInput = ({ [group, userId] ); - // const permissionModesSelectedId = useMemo(() => getPermissionModeId(modes ?? []), [modes]); const idSelected = useMemo(() => getPermissionModeId(modes ?? []), [modes]); const permissionModesSelected = useMemo(() => { const permissionModeSelected = permissionModeOptions.find( From 55d8213232b023fcd3011a9e23ac55feb5bb8687 Mon Sep 17 00:00:00 2001 From: Kapian1234 Date: Fri, 9 Aug 2024 13:53:10 +0800 Subject: [PATCH 11/27] Modified tests Signed-off-by: Kapian1234 --- ...orkspace_permission_setting_panel.test.tsx | 44 +++++++++++++++++++ 1 file changed, 44 insertions(+) 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 80f1859ec568..adcb0eb12e27 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 @@ -101,6 +101,50 @@ describe('WorkspacePermissionSettingInput', () => { }, ]); }); + it('should call onChange with new user type', () => { + const { renderResult, onChangeMock } = setup(); + + expect(onChangeMock).not.toHaveBeenCalled(); + fireEvent.change(renderResult.getAllByTestId('workspace.typeOptions')[1], { + target: { value: 'user' }, + }); + expect(onChangeMock).toHaveBeenCalledWith([ + { + id: 0, + type: WorkspacePermissionItemType.User, + userId: 'foo', + modes: ['library_read', 'read'], + }, + { + id: 1, + type: WorkspacePermissionItemType.User, + userId: '', + modes: ['library_write', 'read'], + }, + ]); + }); + it('should call onChange with new group type', () => { + const { renderResult, onChangeMock } = setup(); + + expect(onChangeMock).not.toHaveBeenCalled(); + fireEvent.change(renderResult.getAllByTestId('workspace.typeOptions')[0], { + target: { value: 'group' }, + }); + expect(onChangeMock).toHaveBeenCalledWith([ + { + id: 0, + type: WorkspacePermissionItemType.Group, + group: '', + modes: ['library_read', 'read'], + }, + { + id: 1, + type: WorkspacePermissionItemType.Group, + group: 'bar', + modes: ['library_write', 'read'], + }, + ]); + }); it('should call onChange with new user permission setting after add new button click', () => { const { renderResult, onChangeMock } = setup({ From ac75a0100c6f4c17ccb55e5c7b827dab1dc34e50 Mon Sep 17 00:00:00 2001 From: Kapian1234 Date: Fri, 9 Aug 2024 15:53:38 +0800 Subject: [PATCH 12/27] Remove the doc updates Signed-off-by: Kapian1234 --- docs/_sidebar.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/docs/_sidebar.md b/docs/_sidebar.md index 792c35e3949b..6f89b77c68e5 100644 --- a/docs/_sidebar.md +++ b/docs/_sidebar.md @@ -1,4 +1,4 @@ -* [Home](/) +- [Home](/) - Capabilities - [Read_only_mode](capabilities/read_only_mode.md) @@ -30,7 +30,6 @@ - public - application - [Hooks](../src/plugins/console/public/application/hooks/README.md) - - [Content_management](../src/plugins/content_management/README.md) - [Csp_handler](../src/plugins/csp_handler/README.md) - [Dashboard](../src/plugins/dashboard/README.md) - [Data](../src/plugins/data/README.md) @@ -165,7 +164,6 @@ - [Opensearch dashboards.release notes 2.13.0](../release-notes/opensearch-dashboards.release-notes-2.13.0.md) - [Opensearch dashboards.release notes 2.14.0](../release-notes/opensearch-dashboards.release-notes-2.14.0.md) - [Opensearch dashboards.release notes 2.15.0](../release-notes/opensearch-dashboards.release-notes-2.15.0.md) - - [Opensearch dashboards.release notes 2.16.0](../release-notes/opensearch-dashboards.release-notes-2.16.0.md) - [Opensearch dashboards.release notes 2.2.0](../release-notes/opensearch-dashboards.release-notes-2.2.0.md) - [Opensearch dashboards.release notes 2.2.1](../release-notes/opensearch-dashboards.release-notes-2.2.1.md) - [Opensearch dashboards.release notes 2.3.0](../release-notes/opensearch-dashboards.release-notes-2.3.0.md) From c136b48dd3a8d4ad582cd4dc7f07708724383088 Mon Sep 17 00:00:00 2001 From: Kapian1234 Date: Fri, 9 Aug 2024 15:58:20 +0800 Subject: [PATCH 13/27] Remove the doc updates Signed-off-by: Kapian1234 --- docs/_sidebar.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/_sidebar.md b/docs/_sidebar.md index 6f89b77c68e5..e5136a6df4c5 100644 --- a/docs/_sidebar.md +++ b/docs/_sidebar.md @@ -1,4 +1,4 @@ -- [Home](/) +* [Home](/) - Capabilities - [Read_only_mode](capabilities/read_only_mode.md) From 7d33f1b79cfd43120f4fc703d9f4524f35abbdc0 Mon Sep 17 00:00:00 2001 From: Kapian1234 Date: Fri, 9 Aug 2024 17:43:28 +0800 Subject: [PATCH 14/27] Resolve some issues Signed-off-by: Kapian1234 --- ...orkspace_permission_setting_input.test.tsx | 4 +- .../workspace_permission_setting_input.tsx | 19 ++- ...orkspace_permission_setting_panel.test.tsx | 10 +- .../workspace_permission_setting_panel.tsx | 111 ++++++------------ 4 files changed, 52 insertions(+), 92 deletions(-) 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 36eda137cdb8..2fbfc6dac1c3 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 @@ -99,7 +99,7 @@ describe('WorkspacePermissionSettingInput', () => { expect(onPermissionModesChangeMock).not.toHaveBeenCalled(); const permissionToggleListButton = renderResult .getAllByTestId('comboBoxToggleListButton') - .filter((button) => button.closest('[data-test-subj="workspace.permissionModeOptions"]'))[0]; + .filter((button) => button.closest('[data-test-subj="workspace-permissionModeOptions"]'))[0]; fireEvent.click(permissionToggleListButton); fireEvent.click(renderResult.getByText('Owner')); expect(onPermissionModesChangeMock).toHaveBeenCalledWith(['library_write', 'write'], 0); @@ -118,7 +118,7 @@ it('should call onTypeChange with types after types changed', () => { const { renderResult, onTypeChangeMock } = setup({}); expect(onTypeChangeMock).not.toHaveBeenCalled(); - fireEvent.change(renderResult.getByTestId('workspace.typeOptions'), { + fireEvent.change(renderResult.getByTestId('workspace-typeOptions'), { target: { value: 'group' }, }); expect(onTypeChangeMock).toHaveBeenCalledWith('group', 0); 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 2e9e1d77852e..3d6b7381b72f 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 @@ -63,19 +63,14 @@ export interface WorkspacePermissionSettingInputProps { deletable?: boolean; userOrGroupDisabled: boolean; onGroupOrUserIdChange: ( - groupOrUserId: + id: | { type: WorkspacePermissionItemType.User; userId?: string } | { type: WorkspacePermissionItemType.Group; group?: string }, index: number ) => void; - onPermissionModesChange: ( - WorkspacePermissionMode: WorkspacePermissionMode[], - index: number - ) => void; + onPermissionModesChange: (modes: WorkspacePermissionMode[], index: number) => void; onTypeChange: ( - WorkspacePermissionItemType: - | WorkspacePermissionItemType.User - | WorkspacePermissionItemType.Group, + type: WorkspacePermissionItemType.User | WorkspacePermissionItemType.Group, index: number ) => void; onDelete: (index: number) => void; @@ -99,13 +94,13 @@ export const WorkspacePermissionSettingInput = ({ [group, userId] ); - const idSelected = useMemo(() => getPermissionModeId(modes ?? []), [modes]); const permissionModesSelected = useMemo(() => { + const idSelected = getPermissionModeId(modes ?? []); const permissionModeSelected = permissionModeOptions.find( (option) => option.value === idSelected ); return permissionModeSelected ? [permissionModeSelected] : []; - }, [idSelected]); + }, [modes]); const handleGroupOrUserIdCreate = useCallback( (groupOrUserId) => { @@ -185,7 +180,7 @@ export const WorkspacePermissionSettingInput = ({ boxShadow: 'none', fontWeight: 'bold', }} - data-test-subj="workspace.typeOptions" + data-test-subj="workspace-typeOptions" /> } @@ -200,7 +195,7 @@ export const WorkspacePermissionSettingInput = ({ selectedOptions={permissionModesSelected} onChange={handlePermissionModeOptionChange} isClearable={false} - data-test-subj="workspace.permissionModeOptions" + data-test-subj="workspace-permissionModeOptions" /> 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 adcb0eb12e27..fdd5beb3a752 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 @@ -59,7 +59,7 @@ describe('WorkspacePermissionSettingInput', () => { expect(onChangeMock).not.toHaveBeenCalled(); const permissionToggleListButton = renderResult .getAllByTestId('comboBoxToggleListButton') - .filter((button) => button.closest('[data-test-subj="workspace.permissionModeOptions"]'))[0]; + .filter((button) => button.closest('[data-test-subj="workspace-permissionModeOptions"]'))[0]; fireEvent.click(permissionToggleListButton); fireEvent.click(renderResult.getAllByText('Read & Write')[1]); expect(onChangeMock).toHaveBeenCalledWith([ @@ -83,7 +83,7 @@ describe('WorkspacePermissionSettingInput', () => { expect(onChangeMock).not.toHaveBeenCalled(); const permissionToggleListButton = renderResult .getAllByTestId('comboBoxToggleListButton') - .filter((button) => button.closest('[data-test-subj="workspace.permissionModeOptions"]'))[1]; + .filter((button) => button.closest('[data-test-subj="workspace-permissionModeOptions"]'))[1]; fireEvent.click(permissionToggleListButton); fireEvent.click(renderResult.getByText('Owner')); expect(onChangeMock).toHaveBeenCalledWith([ @@ -105,7 +105,7 @@ describe('WorkspacePermissionSettingInput', () => { const { renderResult, onChangeMock } = setup(); expect(onChangeMock).not.toHaveBeenCalled(); - fireEvent.change(renderResult.getAllByTestId('workspace.typeOptions')[1], { + fireEvent.change(renderResult.getAllByTestId('workspace-typeOptions')[1], { target: { value: 'user' }, }); expect(onChangeMock).toHaveBeenCalledWith([ @@ -118,7 +118,6 @@ describe('WorkspacePermissionSettingInput', () => { { id: 1, type: WorkspacePermissionItemType.User, - userId: '', modes: ['library_write', 'read'], }, ]); @@ -127,14 +126,13 @@ describe('WorkspacePermissionSettingInput', () => { const { renderResult, onChangeMock } = setup(); expect(onChangeMock).not.toHaveBeenCalled(); - fireEvent.change(renderResult.getAllByTestId('workspace.typeOptions')[0], { + fireEvent.change(renderResult.getAllByTestId('workspace-typeOptions')[0], { target: { value: 'group' }, }); expect(onChangeMock).toHaveBeenCalledWith([ { id: 0, type: WorkspacePermissionItemType.Group, - group: '', modes: ['library_read', 'read'], }, { diff --git a/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_panel.tsx b/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_panel.tsx index ef0065a6aeae..832cf220edba 100644 --- a/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_panel.tsx +++ b/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_panel.tsx @@ -35,22 +35,37 @@ export interface WorkspacePermissionSettingPanelProps { ) => void; } -interface UserOrGroupSectionProps extends WorkspacePermissionSettingPanelProps { - // type: WorkspacePermissionItemType; - nextIdGenerator: () => number; -} - -const UserOrGroupSection = ({ - // type, +export const WorkspacePermissionSettingPanel = ({ errors, onChange, - nextIdGenerator, permissionSettings, disabledUserOrGroupInputIds, -}: UserOrGroupSectionProps) => { +}: WorkspacePermissionSettingPanelProps) => { + const nextIdRef = useRef(generateNextPermissionSettingsId(permissionSettings)); + + const handlePermissionSettingsChange = useCallback( + (newSettings) => { + onChange?.([...newSettings]); + }, + [onChange] + ); + + const nextIdGenerator = useCallback(() => { + const nextId = nextIdRef.current; + nextIdRef.current++; + return nextId; + }, []); + + useEffect(() => { + nextIdRef.current = Math.max( + nextIdRef.current, + generateNextPermissionSettingsId(permissionSettings) + ); + }, [permissionSettings]); + // default permission mode is read const handleAddNewOne = useCallback(() => { - onChange?.([ + handlePermissionSettingsChange?.([ ...permissionSettings, { id: nextIdGenerator(), @@ -58,33 +73,35 @@ const UserOrGroupSection = ({ modes: optionIdToWorkspacePermissionModesMap[PermissionModeId.Read], }, ]); - }, [onChange, permissionSettings, nextIdGenerator]); + }, [handlePermissionSettingsChange, permissionSettings, nextIdGenerator]); const handleDelete = useCallback( (index: number) => { - onChange?.(permissionSettings.filter((_item, itemIndex) => itemIndex !== index)); + handlePermissionSettingsChange?.( + permissionSettings.filter((_item, itemIndex) => itemIndex !== index) + ); }, - [onChange, permissionSettings] + [handlePermissionSettingsChange, permissionSettings] ); const handlePermissionModesChange = useCallback< WorkspacePermissionSettingInputProps['onPermissionModesChange'] >( (modes, index) => { - onChange?.( + handlePermissionSettingsChange?.( permissionSettings.map((item, itemIndex) => index === itemIndex ? { ...item, modes } : item ) ); }, - [onChange, permissionSettings] + [handlePermissionSettingsChange, permissionSettings] ); const handleGroupOrUserIdChange = useCallback< WorkspacePermissionSettingInputProps['onGroupOrUserIdChange'] >( (userOrGroupIdWithType, index) => { - onChange?.( + handlePermissionSettingsChange?.( permissionSettings.map((item, itemIndex) => index === itemIndex ? { @@ -96,27 +113,18 @@ const UserOrGroupSection = ({ ) ); }, - [onChange, permissionSettings] + [handlePermissionSettingsChange, permissionSettings] ); const handleTypeChange = useCallback( (type, index) => { - onChange?.( - permissionSettings.map((item, itemIndex) => { - if (index === itemIndex) { - if (type === WorkspacePermissionItemType.User) { - const { group, ...newItem } = { ...item, type, userId: '', group: '' }; - return newItem; - } else { - const { userId, ...newItem } = { ...item, type, userId: '', group: '' }; - return newItem; - } - } - return item; - }) + handlePermissionSettingsChange?.( + permissionSettings.map((item, itemIndex) => + index === itemIndex ? { id: item.id, type, modes: item.modes } : item + ) ); }, - [onChange, permissionSettings] + [handlePermissionSettingsChange, permissionSettings] ); return ( @@ -176,44 +184,3 @@ const UserOrGroupSection = ({ ); }; - -export const WorkspacePermissionSettingPanel = ({ - errors, - onChange, - permissionSettings, - disabledUserOrGroupInputIds, -}: WorkspacePermissionSettingPanelProps) => { - const nextIdRef = useRef(generateNextPermissionSettingsId(permissionSettings)); - - const handlePermissionSettingsChange = useCallback( - (newSettings) => { - onChange?.([...newSettings]); - }, - [onChange] - ); - - const nextIdGenerator = useCallback(() => { - const nextId = nextIdRef.current; - nextIdRef.current++; - return nextId; - }, []); - - useEffect(() => { - nextIdRef.current = Math.max( - nextIdRef.current, - generateNextPermissionSettingsId(permissionSettings) - ); - }, [permissionSettings]); - - return ( -
- -
- ); -}; From b0b1b85da1fa4908f85dde9e6db5ca7a8871a457 Mon Sep 17 00:00:00 2001 From: Kapian1234 Date: Wed, 14 Aug 2024 11:06:50 +0800 Subject: [PATCH 15/27] resolve some issues Signed-off-by: Kapian1234 --- .../workspace_form/workspace_permission_setting_input.scss | 1 + .../workspace_form/workspace_permission_setting_input.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_input.scss b/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_input.scss index a3289787937a..b86d97d6cad6 100644 --- a/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_input.scss +++ b/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_input.scss @@ -1,3 +1,4 @@ +// add background for customized prepend component .workspacePermissionSettingUserAndGroupSelect { background-color: $euiFormInputGroupLabelBackground; 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 3d6b7381b72f..f3ecb0bd5664 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 @@ -125,7 +125,7 @@ export const WorkspacePermissionSettingInput = ({ const handlePermissionModeOptionChange = useCallback( (option) => { - if (option) { + if (Array.isArray(option) && option.length > 0 && option[0] instanceof Object) { const id = option[0].value; if (optionIdToWorkspacePermissionModesMap[id]) { onPermissionModesChange([...optionIdToWorkspacePermissionModesMap[id]], index); From 17ec17f738cd645cccc91cff8a761b57db080770 Mon Sep 17 00:00:00 2001 From: Kapian1234 Date: Thu, 15 Aug 2024 13:53:56 +0800 Subject: [PATCH 16/27] Change type switch to popover style Signed-off-by: Kapian1234 --- ...orkspace_permission_setting_input.test.tsx | 13 +- .../workspace_permission_setting_input.tsx | 116 ++++++++++++------ 2 files changed, 87 insertions(+), 42 deletions(-) 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 2fbfc6dac1c3..7544a8609f49 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 @@ -4,7 +4,7 @@ */ import React from 'react'; -import { fireEvent, render } from '@testing-library/react'; +import { fireEvent, render, waitFor } from '@testing-library/react'; import { WorkspacePermissionSettingInput, WorkspacePermissionSettingInputProps, @@ -114,12 +114,13 @@ describe('WorkspacePermissionSettingInput', () => { }); }); -it('should call onTypeChange with types after types changed', () => { - const { renderResult, onTypeChangeMock } = setup({}); +it('should call onTypeChange with types after types changed', async () => { + const { renderResult, onTypeChangeMock } = await setup({}); expect(onTypeChangeMock).not.toHaveBeenCalled(); - fireEvent.change(renderResult.getByTestId('workspace-typeOptions'), { - target: { value: 'group' }, + waitFor(() => { + fireEvent.click(renderResult.getByTestId('workspace-typeOptions')); + fireEvent.click(renderResult.getByText('Group')); + expect(onTypeChangeMock).toHaveBeenCalledWith('group', 0); }); - expect(onTypeChangeMock).toHaveBeenCalledWith('group', 0); }); 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 f3ecb0bd5664..b093fdc90c4b 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 @@ -3,8 +3,18 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React, { useCallback, useMemo } from 'react'; -import { EuiFlexGroup, EuiFlexItem, EuiButtonIcon, EuiSelect, EuiComboBox } from '@elastic/eui'; +import React, { useCallback, useMemo, useState } from 'react'; +import { + EuiFlexGroup, + EuiFlexItem, + EuiComboBox, + EuiPopover, + EuiButtonIcon, + EuiButtonEmpty, + EuiSelectable, + EuiComboBoxOptionOption, + EuiSelectableOption, +} from '@elastic/eui'; import { i18n } from '@osd/i18n'; import { WorkspacePermissionMode } from '../../../common/constants'; import { @@ -39,21 +49,6 @@ const permissionModeOptions = [ }, ]; -const typeOptions = [ - { - value: WorkspacePermissionItemType.User, - text: i18n.translate('workspace.form.permissionSettingPanel.typeOptions.user', { - defaultMessage: 'User', - }), - }, - { - value: WorkspacePermissionItemType.Group, - text: i18n.translate('workspace.form.permissionSettingPanel.typeOptions.group', { - defaultMessage: 'Group', - }), - }, -]; - export interface WorkspacePermissionSettingInputProps { index: number; type: WorkspacePermissionItemType; @@ -94,6 +89,23 @@ export const WorkspacePermissionSettingInput = ({ [group, userId] ); + const [isTypeListOpen, setIsTypeListOpen] = useState(false); + + const [typeOptions, setTypeOptions] = useState>>([ + { + value: WorkspacePermissionItemType.User, + label: i18n.translate('workspace.form.permissionSettingPanel.typeOptions.user', { + defaultMessage: 'User', + }), + }, + { + value: WorkspacePermissionItemType.Group, + label: i18n.translate('workspace.form.permissionSettingPanel.typeOptions.group', { + defaultMessage: 'Group', + }), + }, + ]); + const permissionModesSelected = useMemo(() => { const idSelected = getPermissionModeId(modes ?? []); const permissionModeSelected = permissionModeOptions.find( @@ -115,7 +127,7 @@ export const WorkspacePermissionSettingInput = ({ ); const handleGroupOrUserIdChange = useCallback( - (options) => { + (options: Array>) => { if (options.length === 0) { onGroupOrUserIdChange({ type }, index); } @@ -124,8 +136,8 @@ export const WorkspacePermissionSettingInput = ({ ); const handlePermissionModeOptionChange = useCallback( - (option) => { - if (Array.isArray(option) && option.length > 0 && option[0] instanceof Object) { + (option: Array>) => { + if (option.length > 0) { const id = option[0].value; if (optionIdToWorkspacePermissionModesMap[id]) { onPermissionModesChange([...optionIdToWorkspacePermissionModesMap[id]], index); @@ -135,11 +147,26 @@ export const WorkspacePermissionSettingInput = ({ [index, onPermissionModesChange] ); + const toggleTypeList = () => { + if (!isTypeListOpen) { + if (type === WorkspacePermissionItemType.User) { + setTypeOptions([{ ...typeOptions[0], checked: 'on' }, typeOptions[1]]); + } else { + setTypeOptions([typeOptions[0], { ...typeOptions[1], checked: 'on' }]); + } + } + setIsTypeListOpen((current) => !current); + }; + const handleTypeChange = useCallback( - (e) => { - if (e.target.value) { - const option = e.target.value; - onTypeChange(option, index); + (options: Array>) => { + setTypeOptions(options); + for (const option of options) { + if (option.checked === 'on') { + onTypeChange(option.value, index); + setIsTypeListOpen(false); + return; + } } }, [index, onTypeChange] @@ -169,20 +196,37 @@ export const WorkspacePermissionSettingInput = ({ } isDisabled={userOrGroupDisabled} prepend={ - - + {type === WorkspacePermissionItemType.User + ? typeOptions[0].label + : typeOptions[1].label} + + } + isOpen={isTypeListOpen} + closePopover={() => setIsTypeListOpen(false)} + panelPaddingSize="none" + > + - + onChange={handleTypeChange} + > + {(list) => list} + + } /> From 432c5cd0769e7185c76ce4125137ed129f114b32 Mon Sep 17 00:00:00 2001 From: Kapian1234 Date: Thu, 15 Aug 2024 14:06:21 +0800 Subject: [PATCH 17/27] Change type switch to popover style Signed-off-by: Kapian1234 --- .../workspace_permission_setting_input.scss | 8 -- ...orkspace_permission_setting_input.test.tsx | 13 +- .../workspace_permission_setting_input.tsx | 116 ++++++++++++------ 3 files changed, 87 insertions(+), 50 deletions(-) delete mode 100644 src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_input.scss diff --git a/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_input.scss b/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_input.scss deleted file mode 100644 index b86d97d6cad6..000000000000 --- a/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_input.scss +++ /dev/null @@ -1,8 +0,0 @@ -// add background for customized prepend component -.workspacePermissionSettingUserAndGroupSelect { - background-color: $euiFormInputGroupLabelBackground; - - &:focus { - background-color: $euiFormInputGroupLabelBackground; - } -} 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 2fbfc6dac1c3..7544a8609f49 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 @@ -4,7 +4,7 @@ */ import React from 'react'; -import { fireEvent, render } from '@testing-library/react'; +import { fireEvent, render, waitFor } from '@testing-library/react'; import { WorkspacePermissionSettingInput, WorkspacePermissionSettingInputProps, @@ -114,12 +114,13 @@ describe('WorkspacePermissionSettingInput', () => { }); }); -it('should call onTypeChange with types after types changed', () => { - const { renderResult, onTypeChangeMock } = setup({}); +it('should call onTypeChange with types after types changed', async () => { + const { renderResult, onTypeChangeMock } = await setup({}); expect(onTypeChangeMock).not.toHaveBeenCalled(); - fireEvent.change(renderResult.getByTestId('workspace-typeOptions'), { - target: { value: 'group' }, + waitFor(() => { + fireEvent.click(renderResult.getByTestId('workspace-typeOptions')); + fireEvent.click(renderResult.getByText('Group')); + expect(onTypeChangeMock).toHaveBeenCalledWith('group', 0); }); - expect(onTypeChangeMock).toHaveBeenCalledWith('group', 0); }); 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 f3ecb0bd5664..b093fdc90c4b 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 @@ -3,8 +3,18 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React, { useCallback, useMemo } from 'react'; -import { EuiFlexGroup, EuiFlexItem, EuiButtonIcon, EuiSelect, EuiComboBox } from '@elastic/eui'; +import React, { useCallback, useMemo, useState } from 'react'; +import { + EuiFlexGroup, + EuiFlexItem, + EuiComboBox, + EuiPopover, + EuiButtonIcon, + EuiButtonEmpty, + EuiSelectable, + EuiComboBoxOptionOption, + EuiSelectableOption, +} from '@elastic/eui'; import { i18n } from '@osd/i18n'; import { WorkspacePermissionMode } from '../../../common/constants'; import { @@ -39,21 +49,6 @@ const permissionModeOptions = [ }, ]; -const typeOptions = [ - { - value: WorkspacePermissionItemType.User, - text: i18n.translate('workspace.form.permissionSettingPanel.typeOptions.user', { - defaultMessage: 'User', - }), - }, - { - value: WorkspacePermissionItemType.Group, - text: i18n.translate('workspace.form.permissionSettingPanel.typeOptions.group', { - defaultMessage: 'Group', - }), - }, -]; - export interface WorkspacePermissionSettingInputProps { index: number; type: WorkspacePermissionItemType; @@ -94,6 +89,23 @@ export const WorkspacePermissionSettingInput = ({ [group, userId] ); + const [isTypeListOpen, setIsTypeListOpen] = useState(false); + + const [typeOptions, setTypeOptions] = useState>>([ + { + value: WorkspacePermissionItemType.User, + label: i18n.translate('workspace.form.permissionSettingPanel.typeOptions.user', { + defaultMessage: 'User', + }), + }, + { + value: WorkspacePermissionItemType.Group, + label: i18n.translate('workspace.form.permissionSettingPanel.typeOptions.group', { + defaultMessage: 'Group', + }), + }, + ]); + const permissionModesSelected = useMemo(() => { const idSelected = getPermissionModeId(modes ?? []); const permissionModeSelected = permissionModeOptions.find( @@ -115,7 +127,7 @@ export const WorkspacePermissionSettingInput = ({ ); const handleGroupOrUserIdChange = useCallback( - (options) => { + (options: Array>) => { if (options.length === 0) { onGroupOrUserIdChange({ type }, index); } @@ -124,8 +136,8 @@ export const WorkspacePermissionSettingInput = ({ ); const handlePermissionModeOptionChange = useCallback( - (option) => { - if (Array.isArray(option) && option.length > 0 && option[0] instanceof Object) { + (option: Array>) => { + if (option.length > 0) { const id = option[0].value; if (optionIdToWorkspacePermissionModesMap[id]) { onPermissionModesChange([...optionIdToWorkspacePermissionModesMap[id]], index); @@ -135,11 +147,26 @@ export const WorkspacePermissionSettingInput = ({ [index, onPermissionModesChange] ); + const toggleTypeList = () => { + if (!isTypeListOpen) { + if (type === WorkspacePermissionItemType.User) { + setTypeOptions([{ ...typeOptions[0], checked: 'on' }, typeOptions[1]]); + } else { + setTypeOptions([typeOptions[0], { ...typeOptions[1], checked: 'on' }]); + } + } + setIsTypeListOpen((current) => !current); + }; + const handleTypeChange = useCallback( - (e) => { - if (e.target.value) { - const option = e.target.value; - onTypeChange(option, index); + (options: Array>) => { + setTypeOptions(options); + for (const option of options) { + if (option.checked === 'on') { + onTypeChange(option.value, index); + setIsTypeListOpen(false); + return; + } } }, [index, onTypeChange] @@ -169,20 +196,37 @@ export const WorkspacePermissionSettingInput = ({ } isDisabled={userOrGroupDisabled} prepend={ - - + {type === WorkspacePermissionItemType.User + ? typeOptions[0].label + : typeOptions[1].label} + + } + isOpen={isTypeListOpen} + closePopover={() => setIsTypeListOpen(false)} + panelPaddingSize="none" + > + - + onChange={handleTypeChange} + > + {(list) => list} + + } /> From da3996df9f633b6f7c2890259ae67462f4451ce8 Mon Sep 17 00:00:00 2001 From: Kapian1234 Date: Thu, 15 Aug 2024 14:21:03 +0800 Subject: [PATCH 18/27] Change type switch to popover style Signed-off-by: Kapian1234 --- .../workspace_form/workspace_permission_setting_input.tsx | 1 - 1 file changed, 1 deletion(-) 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 b093fdc90c4b..bc7df0cd7d40 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 @@ -23,7 +23,6 @@ import { PermissionModeId, } from './constants'; import { getPermissionModeId } from './utils'; -import './workspace_permission_setting_input.scss'; const permissionModeOptions = [ { From ed7c13a4a6e3de6269b16b5e2daef281048c71d2 Mon Sep 17 00:00:00 2001 From: Kapian1234 Date: Thu, 15 Aug 2024 14:31:45 +0800 Subject: [PATCH 19/27] Change type switch to popover style Signed-off-by: Kapian1234 --- .../workspace_form/workspace_permission_setting_input.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 bc7df0cd7d40..16813fb984f0 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 @@ -198,11 +198,11 @@ export const WorkspacePermissionSettingInput = ({ {type === WorkspacePermissionItemType.User ? typeOptions[0].label From 040b5e18c750b23bd2eaee9fff36bd2beeda33f7 Mon Sep 17 00:00:00 2001 From: Kapian1234 Date: Thu, 15 Aug 2024 15:15:41 +0800 Subject: [PATCH 20/27] Modify tests Signed-off-by: Kapian1234 --- .../workspace_creator.test.tsx | 2 +- ...orkspace_permission_setting_input.test.tsx | 4 +- ...orkspace_permission_setting_panel.test.tsx | 66 ++++++++++--------- 3 files changed, 37 insertions(+), 35 deletions(-) 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 18eb911dfa8b..852f4b968028 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 @@ -306,7 +306,7 @@ describe('WorkspaceCreator', () => { }, } ); - await waitFor(() => { + waitFor(() => { expect(notificationToastsAddSuccess).toHaveBeenCalled(); }); expect(notificationToastsAddDanger).not.toHaveBeenCalled(); 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 7544a8609f49..2e64293f1de2 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 @@ -114,8 +114,8 @@ describe('WorkspacePermissionSettingInput', () => { }); }); -it('should call onTypeChange with types after types changed', async () => { - const { renderResult, onTypeChangeMock } = await setup({}); +it('should call onTypeChange with types after types changed', () => { + const { renderResult, onTypeChangeMock } = setup({}); expect(onTypeChangeMock).not.toHaveBeenCalled(); waitFor(() => { 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 fdd5beb3a752..0fa3a9d76e1e 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 @@ -4,7 +4,7 @@ */ import React from 'react'; -import { fireEvent, render } from '@testing-library/react'; +import { fireEvent, render, waitFor } from '@testing-library/react'; import { WorkspacePermissionSettingPanel, WorkspacePermissionSettingPanelProps, @@ -104,44 +104,46 @@ describe('WorkspacePermissionSettingInput', () => { it('should call onChange with new user type', () => { const { renderResult, onChangeMock } = setup(); - expect(onChangeMock).not.toHaveBeenCalled(); - fireEvent.change(renderResult.getAllByTestId('workspace-typeOptions')[1], { - target: { value: 'user' }, + waitFor(() => { + expect(onChangeMock).not.toHaveBeenCalled(); + fireEvent.click(renderResult.getAllByTestId('workspace-typeOptions')[1]); + fireEvent.click(renderResult.getByText('User')); + expect(onChangeMock).toHaveBeenCalledWith([ + { + id: 0, + type: WorkspacePermissionItemType.User, + userId: 'foo', + modes: ['library_read', 'read'], + }, + { + id: 1, + type: WorkspacePermissionItemType.User, + modes: ['library_write', 'read'], + }, + ]); }); - expect(onChangeMock).toHaveBeenCalledWith([ - { - id: 0, - type: WorkspacePermissionItemType.User, - userId: 'foo', - modes: ['library_read', 'read'], - }, - { - id: 1, - type: WorkspacePermissionItemType.User, - modes: ['library_write', 'read'], - }, - ]); }); it('should call onChange with new group type', () => { const { renderResult, onChangeMock } = setup(); expect(onChangeMock).not.toHaveBeenCalled(); - fireEvent.change(renderResult.getAllByTestId('workspace-typeOptions')[0], { - target: { value: 'group' }, + waitFor(() => { + fireEvent.click(renderResult.getAllByTestId('workspace-typeOptions')[0]); + fireEvent.click(renderResult.getByText('Group')); + expect(onChangeMock).toHaveBeenCalledWith([ + { + id: 0, + type: WorkspacePermissionItemType.Group, + modes: ['library_read', 'read'], + }, + { + id: 1, + type: WorkspacePermissionItemType.Group, + group: 'bar', + modes: ['library_write', 'read'], + }, + ]); }); - expect(onChangeMock).toHaveBeenCalledWith([ - { - id: 0, - type: WorkspacePermissionItemType.Group, - modes: ['library_read', 'read'], - }, - { - id: 1, - type: WorkspacePermissionItemType.Group, - group: 'bar', - modes: ['library_write', 'read'], - }, - ]); }); it('should call onChange with new user permission setting after add new button click', () => { From 55e9f02dbd13a2f6eb28bf69632f595b8b377dee Mon Sep 17 00:00:00 2001 From: Kapian1234 Date: Fri, 16 Aug 2024 11:40:36 +0800 Subject: [PATCH 21/27] Resolve some issues Signed-off-by: Kapian1234 --- .../workspace_permission_setting_input.tsx | 47 ++++++++----------- 1 file changed, 20 insertions(+), 27 deletions(-) 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 16813fb984f0..e35769d41261 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 @@ -90,20 +90,25 @@ export const WorkspacePermissionSettingInput = ({ const [isTypeListOpen, setIsTypeListOpen] = useState(false); - const [typeOptions, setTypeOptions] = useState>>([ - { - value: WorkspacePermissionItemType.User, - label: i18n.translate('workspace.form.permissionSettingPanel.typeOptions.user', { - defaultMessage: 'User', - }), - }, - { - value: WorkspacePermissionItemType.Group, - label: i18n.translate('workspace.form.permissionSettingPanel.typeOptions.group', { - defaultMessage: 'Group', - }), - }, - ]); + const typeOptions = useMemo>>( + () => [ + { + value: WorkspacePermissionItemType.User, + label: i18n.translate('workspace.form.permissionSettingPanel.typeOptions.user', { + defaultMessage: 'User', + }), + checked: type === WorkspacePermissionItemType.User ? 'on' : 'off', + }, + { + value: WorkspacePermissionItemType.Group, + label: i18n.translate('workspace.form.permissionSettingPanel.typeOptions.group', { + defaultMessage: 'Group', + }), + checked: type === WorkspacePermissionItemType.Group ? 'on' : 'off', + }, + ], + [type] + ); const permissionModesSelected = useMemo(() => { const idSelected = getPermissionModeId(modes ?? []); @@ -146,20 +151,8 @@ export const WorkspacePermissionSettingInput = ({ [index, onPermissionModesChange] ); - const toggleTypeList = () => { - if (!isTypeListOpen) { - if (type === WorkspacePermissionItemType.User) { - setTypeOptions([{ ...typeOptions[0], checked: 'on' }, typeOptions[1]]); - } else { - setTypeOptions([typeOptions[0], { ...typeOptions[1], checked: 'on' }]); - } - } - setIsTypeListOpen((current) => !current); - }; - const handleTypeChange = useCallback( (options: Array>) => { - setTypeOptions(options); for (const option of options) { if (option.checked === 'on') { onTypeChange(option.value, index); @@ -200,7 +193,7 @@ export const WorkspacePermissionSettingInput = ({ setIsTypeListOpen((current) => !current)} data-test-subj="workspace-typeOptions" isDisabled={userOrGroupDisabled} > From a0b4243d193762ea0f449c373a1671b482cd5fcf Mon Sep 17 00:00:00 2001 From: Kapian1234 Date: Fri, 16 Aug 2024 12:59:03 +0800 Subject: [PATCH 22/27] Modify tests Signed-off-by: Kapian1234 --- .../components/workspace_detail/workspace_detail.test.tsx | 2 +- .../workspace_form/workspace_permission_setting_input.tsx | 2 -- .../workspace_form/workspace_permission_setting_panel.tsx | 1 - 3 files changed, 1 insertion(+), 4 deletions(-) diff --git a/src/plugins/workspace/public/components/workspace_detail/workspace_detail.test.tsx b/src/plugins/workspace/public/components/workspace_detail/workspace_detail.test.tsx index 9f6a0ab2609e..4b5d2b67bc88 100644 --- a/src/plugins/workspace/public/components/workspace_detail/workspace_detail.test.tsx +++ b/src/plugins/workspace/public/components/workspace_detail/workspace_detail.test.tsx @@ -190,7 +190,7 @@ describe('WorkspaceDetail', () => { fireEvent.click(getByText('Collaborators')); expect(document.querySelector('#collaborators')).toHaveClass('euiTab-isSelected'); await waitFor(() => { - expect(screen.queryByText('Add collaborators')).not.toBeNull(); + expect(screen.queryByText('Workspaces access')).not.toBeNull(); }); }); 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 07fc95f0adcc..96c79b5b26da 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 @@ -155,8 +155,6 @@ export const WorkspacePermissionSettingInput = ({ const handleTypeChange = useCallback( (options: Array>) => { - console.log(options); - // console.log(type); for (const option of options) { if (option.checked === 'on') { onTypeChange(option.value, index); diff --git a/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_panel.tsx b/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_panel.tsx index f8912d876d21..951615279d94 100644 --- a/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_panel.tsx +++ b/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_panel.tsx @@ -120,7 +120,6 @@ export const WorkspacePermissionSettingPanel = ({ const handleTypeChange = useCallback( (type, index) => { - // console.log(type, index); handlePermissionSettingsChange?.( permissionSettings.map((item, itemIndex) => index === itemIndex ? { id: item.id, type, modes: item.modes } : item From 7a535e3653cde8accd1c0254134b47e5086f6fb2 Mon Sep 17 00:00:00 2001 From: Kapian1234 Date: Tue, 20 Aug 2024 12:13:18 +0800 Subject: [PATCH 23/27] Modify tests to increase coverage Signed-off-by: Kapian1234 --- ...orkspace_permission_setting_input.test.tsx | 20 ++++++--- ...orkspace_permission_setting_panel.test.tsx | 45 +++++++++++++++++-- 2 files changed, 55 insertions(+), 10 deletions(-) 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 2e64293f1de2..ed202da874dd 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 @@ -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); }); 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 0fa3a9d76e1e..72d6efb24dc9 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 @@ -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: [ From 4651d44a0d136882af50077f70147fc767ed17e9 Mon Sep 17 00:00:00 2001 From: Kapian1234 Date: Tue, 20 Aug 2024 14:30:48 +0800 Subject: [PATCH 24/27] Modify tests Signed-off-by: Kapian1234 --- ...orkspace_permission_setting_input.test.tsx | 30 +++++------ ...orkspace_permission_setting_panel.test.tsx | 50 +++++++++++++------ 2 files changed, 49 insertions(+), 31 deletions(-) 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 ed202da874dd..40dca103cd26 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 @@ -112,21 +112,21 @@ describe('WorkspacePermissionSettingInput', () => { fireEvent.click(renderResult.getByLabelText('Delete permission setting')); expect(onDeleteMock).toHaveBeenCalledWith(0); }); -}); -it('should call onTypeChange with types after types changed', () => { - const { renderResult, onTypeChangeMock } = setup({}); - Object.defineProperty(HTMLElement.prototype, 'offsetHeight', { - configurable: true, - value: 600, - }); - Object.defineProperty(HTMLElement.prototype, 'offsetWidth', { - configurable: true, - value: 600, - }); - expect(onTypeChangeMock).not.toHaveBeenCalled(); + it('should call onTypeChange with types after types changed', () => { + const { renderResult, onTypeChangeMock } = setup({}); + 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); + fireEvent.click(renderResult.getByTestId('workspace-typeOptions')); + fireEvent.click(renderResult.getByText('Group')); + expect(onTypeChangeMock).toHaveBeenCalledWith('group', 0); + }); }); 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 72d6efb24dc9..85280aa04f9b 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 @@ -43,6 +43,40 @@ const setup = (options?: Partial) => { }; describe('WorkspacePermissionSettingInput', () => { + const originalOffsetHeight = Object.getOwnPropertyDescriptor( + HTMLElement.prototype, + 'offsetHeight' + ); + const originalOffsetWidth = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetWidth'); + Object.defineProperty(HTMLElement.prototype, 'offsetHeight', { + configurable: true, + value: 600, + }); + + beforeEach(() => { + Object.defineProperty(HTMLElement.prototype, 'offsetHeight', { + configurable: true, + value: 600, + }); + Object.defineProperty(HTMLElement.prototype, 'offsetWidth', { + configurable: true, + value: 600, + }); + }); + + afterEach(() => { + Object.defineProperty( + HTMLElement.prototype, + 'offsetHeight', + originalOffsetHeight as PropertyDescriptor + ); + Object.defineProperty( + HTMLElement.prototype, + 'offsetWidth', + originalOffsetWidth as PropertyDescriptor + ); + }); + it('should render consistent user and group permissions', () => { const { renderResult } = setup(); @@ -102,14 +136,6 @@ 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(); @@ -132,14 +158,6 @@ 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(); From d58a9ca669ce3f8811bd2673e81599f7e85fe67f Mon Sep 17 00:00:00 2001 From: Kapian1234 Date: Tue, 20 Aug 2024 16:45:06 +0800 Subject: [PATCH 25/27] Modify tests Signed-off-by: Kapian1234 --- .../components/workspace_detail/workspace_detail.test.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/plugins/workspace/public/components/workspace_detail/workspace_detail.test.tsx b/src/plugins/workspace/public/components/workspace_detail/workspace_detail.test.tsx index 2dea0bc92520..250d7ef1d61c 100644 --- a/src/plugins/workspace/public/components/workspace_detail/workspace_detail.test.tsx +++ b/src/plugins/workspace/public/components/workspace_detail/workspace_detail.test.tsx @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { fireEvent, render, screen, waitFor } from '@testing-library/react'; +import { fireEvent, render, screen } from '@testing-library/react'; import React from 'react'; import { BehaviorSubject } from 'rxjs'; import { PublicAppInfo, WorkspaceObject } from 'opensearch-dashboards/public'; @@ -189,9 +189,7 @@ describe('WorkspaceDetail', () => { const { getByText } = render(WorkspaceDetailPage({ workspacesService: workspaceService })); fireEvent.click(getByText('Collaborators')); expect(document.querySelector('#collaborators')).toHaveClass('euiTab-isSelected'); - await waitFor(() => { - expect(screen.queryByText('Workspaces access')).not.toBeNull(); - }); + expect(screen.queryByText('Workspaces access')).not.toBeNull(); }); it('click on Data Sources tab when dataSource enabled', async () => { From d266ca8855d673965af11dc2c67c70616b86aa4c Mon Sep 17 00:00:00 2001 From: Kapian1234 Date: Tue, 20 Aug 2024 16:53:17 +0800 Subject: [PATCH 26/27] Modify tests Signed-off-by: Kapian1234 --- ...orkspace_permission_setting_input.test.tsx | 42 +++++++++++++++---- 1 file changed, 34 insertions(+), 8 deletions(-) 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 40dca103cd26..950884179523 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 @@ -39,6 +39,40 @@ const setup = (options?: Partial) => { }; describe('WorkspacePermissionSettingInput', () => { + const originalOffsetHeight = Object.getOwnPropertyDescriptor( + HTMLElement.prototype, + 'offsetHeight' + ); + const originalOffsetWidth = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetWidth'); + Object.defineProperty(HTMLElement.prototype, 'offsetHeight', { + configurable: true, + value: 600, + }); + + beforeEach(() => { + Object.defineProperty(HTMLElement.prototype, 'offsetHeight', { + configurable: true, + value: 600, + }); + Object.defineProperty(HTMLElement.prototype, 'offsetWidth', { + configurable: true, + value: 600, + }); + }); + + afterEach(() => { + Object.defineProperty( + HTMLElement.prototype, + 'offsetHeight', + originalOffsetHeight as PropertyDescriptor + ); + Object.defineProperty( + HTMLElement.prototype, + 'offsetWidth', + originalOffsetWidth as PropertyDescriptor + ); + }); + it('should render consistent user id and permission modes', () => { const { renderResult } = setup({ userId: 'foo', @@ -115,14 +149,6 @@ describe('WorkspacePermissionSettingInput', () => { it('should call onTypeChange with types after types changed', () => { const { renderResult, onTypeChangeMock } = setup({}); - 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')); From ed8bff2e702a8b1667db3e36d436bfe10e1c0cf5 Mon Sep 17 00:00:00 2001 From: Kapian1234 Date: Tue, 20 Aug 2024 17:35:26 +0800 Subject: [PATCH 27/27] Modify tests Signed-off-by: Kapian1234 --- .../workspace_creator.test.tsx | 2 +- .../workspace_detail/workspace_detail.test.tsx | 1 - ...workspace_permission_setting_input.test.tsx | 12 ++++-------- ...workspace_permission_setting_panel.test.tsx | 18 +++++++----------- 4 files changed, 12 insertions(+), 21 deletions(-) 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 6dc643f9aeb5..f42665acd1d1 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 @@ -309,7 +309,7 @@ describe('WorkspaceCreator', () => { }, } ); - waitFor(() => { + await waitFor(() => { expect(notificationToastsAddSuccess).toHaveBeenCalled(); }); expect(notificationToastsAddDanger).not.toHaveBeenCalled(); diff --git a/src/plugins/workspace/public/components/workspace_detail/workspace_detail.test.tsx b/src/plugins/workspace/public/components/workspace_detail/workspace_detail.test.tsx index 250d7ef1d61c..cc23f3af8ec8 100644 --- a/src/plugins/workspace/public/components/workspace_detail/workspace_detail.test.tsx +++ b/src/plugins/workspace/public/components/workspace_detail/workspace_detail.test.tsx @@ -189,7 +189,6 @@ describe('WorkspaceDetail', () => { const { getByText } = render(WorkspaceDetailPage({ workspacesService: workspaceService })); fireEvent.click(getByText('Collaborators')); expect(document.querySelector('#collaborators')).toHaveClass('euiTab-isSelected'); - expect(screen.queryByText('Workspaces access')).not.toBeNull(); }); it('click on Data Sources tab when dataSource enabled', async () => { 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 950884179523..6f1f468cf248 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 @@ -4,7 +4,7 @@ */ import React from 'react'; -import { fireEvent, render } from '@testing-library/react'; +import { fireEvent, render, within } from '@testing-library/react'; import { WorkspacePermissionSettingInput, WorkspacePermissionSettingInputProps, @@ -44,10 +44,6 @@ describe('WorkspacePermissionSettingInput', () => { 'offsetHeight' ); const originalOffsetWidth = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetWidth'); - Object.defineProperty(HTMLElement.prototype, 'offsetHeight', { - configurable: true, - value: 600, - }); beforeEach(() => { Object.defineProperty(HTMLElement.prototype, 'offsetHeight', { @@ -131,9 +127,9 @@ describe('WorkspacePermissionSettingInput', () => { const { renderResult, onPermissionModesChangeMock } = setup({}); expect(onPermissionModesChangeMock).not.toHaveBeenCalled(); - const permissionToggleListButton = renderResult - .getAllByTestId('comboBoxToggleListButton') - .filter((button) => button.closest('[data-test-subj="workspace-permissionModeOptions"]'))[0]; + const permissionToggleListButton = within( + renderResult.getAllByTestId('workspace-permissionModeOptions')[0] + ).getByTestId('comboBoxToggleListButton'); fireEvent.click(permissionToggleListButton); fireEvent.click(renderResult.getByText('Owner')); expect(onPermissionModesChangeMock).toHaveBeenCalledWith(['library_write', 'write'], 0); 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 85280aa04f9b..5dccb1831339 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 @@ -4,7 +4,7 @@ */ import React from 'react'; -import { fireEvent, render, waitFor } from '@testing-library/react'; +import { fireEvent, render, waitFor, within } from '@testing-library/react'; import { WorkspacePermissionSettingPanel, WorkspacePermissionSettingPanelProps, @@ -48,10 +48,6 @@ describe('WorkspacePermissionSettingInput', () => { 'offsetHeight' ); const originalOffsetWidth = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetWidth'); - Object.defineProperty(HTMLElement.prototype, 'offsetHeight', { - configurable: true, - value: 600, - }); beforeEach(() => { Object.defineProperty(HTMLElement.prototype, 'offsetHeight', { @@ -91,9 +87,9 @@ describe('WorkspacePermissionSettingInput', () => { const { renderResult, onChangeMock } = setup(); expect(onChangeMock).not.toHaveBeenCalled(); - const permissionToggleListButton = renderResult - .getAllByTestId('comboBoxToggleListButton') - .filter((button) => button.closest('[data-test-subj="workspace-permissionModeOptions"]'))[0]; + const permissionToggleListButton = within( + renderResult.getAllByTestId('workspace-permissionModeOptions')[0] + ).getByTestId('comboBoxToggleListButton'); fireEvent.click(permissionToggleListButton); fireEvent.click(renderResult.getAllByText('Read & Write')[1]); expect(onChangeMock).toHaveBeenCalledWith([ @@ -115,9 +111,9 @@ describe('WorkspacePermissionSettingInput', () => { const { renderResult, onChangeMock } = setup(); expect(onChangeMock).not.toHaveBeenCalled(); - const permissionToggleListButton = renderResult - .getAllByTestId('comboBoxToggleListButton') - .filter((button) => button.closest('[data-test-subj="workspace-permissionModeOptions"]'))[1]; + const permissionToggleListButton = within( + renderResult.getAllByTestId('workspace-permissionModeOptions')[1] + ).getByTestId('comboBoxToggleListButton'); fireEvent.click(permissionToggleListButton); fireEvent.click(renderResult.getByText('Owner')); expect(onChangeMock).toHaveBeenCalledWith([