Skip to content

Commit

Permalink
[Workspace] Updated permission settings appearance (#7652)
Browse files Browse the repository at this point in the history
* Changed permission control style

Signed-off-by: Kapian1234 <[email protected]>

* Merged the group section and user section, and added type switching.

Signed-off-by: Kapian1234 <[email protected]>

* Added isDisabled for permission control

Signed-off-by: Kapian1234 <[email protected]>

* Modified styles and added descriptions for permission control

Signed-off-by: Kapian1234 <[email protected]>

* /

Signed-off-by: Kapian1234 <[email protected]>

* Modified tests

Signed-off-by: Kapian1234 <[email protected]>

* Changeset file for PR #7652 created/updated

* Modified tests

Signed-off-by: Kapian1234 <[email protected]>

* Modified tests

Signed-off-by: Kapian1234 <[email protected]>

* /

Signed-off-by: Kapian1234 <[email protected]>

* Modified tests

Signed-off-by: Kapian1234 <[email protected]>

* Remove the doc updates

Signed-off-by: Kapian1234 <[email protected]>

* Remove the doc updates

Signed-off-by: Kapian1234 <[email protected]>

* Resolve some issues

Signed-off-by: Kapian1234 <[email protected]>

* resolve some issues

Signed-off-by: Kapian1234 <[email protected]>

* Change type switch to popover style

Signed-off-by: Kapian1234 <[email protected]>

* Change type switch to popover style

Signed-off-by: Kapian1234 <[email protected]>

* Change type switch to popover style

Signed-off-by: Kapian1234 <[email protected]>

* Change type switch to popover style

Signed-off-by: Kapian1234 <[email protected]>

* Modify tests

Signed-off-by: Kapian1234 <[email protected]>

* Resolve some issues

Signed-off-by: Kapian1234 <[email protected]>

* Modify tests

Signed-off-by: Kapian1234 <[email protected]>

* Modify tests to increase coverage

Signed-off-by: Kapian1234 <[email protected]>

* Modify tests

Signed-off-by: Kapian1234 <[email protected]>

* Modify tests

Signed-off-by: Kapian1234 <[email protected]>

* Modify tests

Signed-off-by: Kapian1234 <[email protected]>

* Modify tests

Signed-off-by: Kapian1234 <[email protected]>

---------

Signed-off-by: Kapian1234 <[email protected]>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
  • Loading branch information
1 parent b4ae264 commit aed03fa
Show file tree
Hide file tree
Showing 8 changed files with 354 additions and 200 deletions.
2 changes: 2 additions & 0 deletions changelogs/fragments/7652.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
feat:
- Update permission settings appearance ([#7652](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7652))
Original file line number Diff line number Diff line change
Expand Up @@ -252,7 +252,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({
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,11 @@ export const usersAndPermissionsTitle = i18n.translate('workspace.form.usersAndP
defaultMessage: 'Workspaces access',
});

export const usersAndPermissionsCreatePageTitle = i18n.translate(
'workspace.form.usersAndPermissions.createPage.title',
{ defaultMessage: 'Add collaborators' }
);

export const detailsName = i18n.translate('workspace.form.workspaceDetails.name.label', {
defaultMessage: 'Name',
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
*/

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 { WorkspaceFormProps } from './types';
import { useWorkspaceForm } from './use_workspace_form';
import { WorkspacePermissionSettingPanel } from './workspace_permission_setting_panel';
Expand All @@ -16,7 +16,7 @@ import { SelectDataSourcePanel } from './select_data_source_panel';
import { EnterDetailsPanel } from './workspace_enter_details_panel';
import {
selectDataSourceTitle,
usersAndPermissionsTitle,
usersAndPermissionsCreatePageTitle,
workspaceDetailsTitle,
workspaceUseCaseTitle,
} from './constants';
Expand All @@ -36,7 +36,6 @@ export const WorkspaceForm = (props: WorkspaceFormProps) => {
formData,
formErrors,
numberOfErrors,
numberOfChanges,
setName,
setDescription,
handleFormSubmit,
Expand Down Expand Up @@ -95,8 +94,15 @@ export const WorkspaceForm = (props: WorkspaceFormProps) => {
{permissionEnabled && (
<EuiPanel>
<EuiTitle size="s">
<h2>{usersAndPermissionsTitle}</h2>
<h2>{usersAndPermissionsCreatePageTitle}</h2>
</EuiTitle>
<EuiSpacer size="s" />
<EuiText size="xs" color="default">
{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.',
})}
</EuiText>
<EuiSpacer size="m" />
<WorkspacePermissionSettingPanel
errors={formErrors.permissionSettings?.fields}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -16,6 +16,7 @@ const setup = (options?: Partial<WorkspacePermissionSettingInputProps>) => {
const onGroupOrUserIdChangeMock = jest.fn();
const onPermissionModesChangeMock = jest.fn();
const onDeleteMock = jest.fn();
const onTypeChangeMock = jest.fn();
const renderResult = render(
<WorkspacePermissionSettingInput
index={0}
Expand All @@ -24,6 +25,7 @@ const setup = (options?: Partial<WorkspacePermissionSettingInputProps>) => {
onGroupOrUserIdChange={onGroupOrUserIdChangeMock}
onPermissionModesChange={onPermissionModesChangeMock}
onDelete={onDeleteMock}
onTypeChange={onTypeChangeMock}
{...options}
/>
);
Expand All @@ -32,10 +34,41 @@ const setup = (options?: Partial<WorkspacePermissionSettingInputProps>) => {
onGroupOrUserIdChangeMock,
onPermissionModesChangeMock,
onDeleteMock,
onTypeChangeMock,
};
};

describe('WorkspacePermissionSettingInput', () => {
const originalOffsetHeight = Object.getOwnPropertyDescriptor(
HTMLElement.prototype,
'offsetHeight'
);
const originalOffsetWidth = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetWidth');

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',
Expand All @@ -44,9 +77,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({
Expand All @@ -57,19 +87,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', () => {
Expand All @@ -79,10 +106,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);
});

Expand All @@ -100,6 +127,10 @@ describe('WorkspacePermissionSettingInput', () => {
const { renderResult, onPermissionModesChangeMock } = setup({});

expect(onPermissionModesChangeMock).not.toHaveBeenCalled();
const permissionToggleListButton = within(
renderResult.getAllByTestId('workspace-permissionModeOptions')[0]
).getByTestId('comboBoxToggleListButton');
fireEvent.click(permissionToggleListButton);
fireEvent.click(renderResult.getByText('Owner'));
expect(onPermissionModesChangeMock).toHaveBeenCalledWith(['library_write', 'write'], 0);
});
Expand All @@ -111,4 +142,13 @@ 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({});
expect(onTypeChangeMock).not.toHaveBeenCalled();

fireEvent.click(renderResult.getByTestId('workspace-typeOptions'));
fireEvent.click(renderResult.getByText('Group'));
expect(onTypeChangeMock).toHaveBeenCalledWith('group', 0);
});
});
Loading

0 comments on commit aed03fa

Please sign in to comment.