[Workspace] Updated permission settings appearance

changelogs/fragments/7652.yml

@@ -0,0 +1,2 @@
+feat:
+- Update permission settings appearance ([#7652](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7652))

src/plugins/workspace/public/components/workspace_creator/workspace_creator.test.tsx

@@ -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({
@@ -309,7 +309,7 @@ describe('WorkspaceCreator', () => {
         },
       }
     );
-    await waitFor(() => {
+    waitFor(() => {
       expect(notificationToastsAddSuccess).toHaveBeenCalled();
     });
     expect(notificationToastsAddDanger).not.toHaveBeenCalled();

src/plugins/workspace/public/components/workspace_detail/workspace_detail.test.tsx

@@ -189,6 +189,7 @@ 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 () => {

src/plugins/workspace/public/components/workspace_form/constants.ts

@@ -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',
 });

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

@@ -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';
@@ -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';
@@ -36,7 +36,6 @@ export const WorkspaceForm = (props: WorkspaceFormProps) => {
     formData,
     formErrors,
     numberOfErrors,
-    numberOfChanges,
     setName,
     setDescription,
     handleFormSubmit,
@@ -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}

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

@@ -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}
@@ -24,6 +25,7 @@ const setup = (options?: Partial<WorkspacePermissionSettingInputProps>) => {
       onGroupOrUserIdChange={onGroupOrUserIdChangeMock}
       onPermissionModesChange={onPermissionModesChangeMock}
       onDelete={onDeleteMock}
+      onTypeChange={onTypeChangeMock}
       {...options}
     />
   );
@@ -32,10 +34,45 @@ 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');
+  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',
@@ -44,9 +81,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({
@@ -57,19 +91,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', () => {
@@ -79,10 +110,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);
   });
 
@@ -100,6 +131,10 @@ 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];
+    fireEvent.click(permissionToggleListButton);
     fireEvent.click(renderResult.getByText('Owner'));
     expect(onPermissionModesChangeMock).toHaveBeenCalledWith(['library_write', 'write'], 0);
   });
@@ -111,4 +146,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);
+  });
 });