[Workspace] Updated permission settings appearance (#7652)

* Changed permission control style Signed-off-by: Kapian1234 <wanjinch@amazon.com> * Merged the group section and user section, and added type switching. Signed-off-by: Kapian1234 <wanjinch@amazon.com> * Added isDisabled for permission control Signed-off-by: Kapian1234 <wanjinch@amazon.com> * Modified styles and added descriptions for permission control Signed-off-by: Kapian1234 <wanjinch@amazon.com> * / Signed-off-by: Kapian1234 <wanjinch@amazon.com> * Modified tests Signed-off-by: Kapian1234 <wanjinch@amazon.com> * Changeset file for PR #7652 created/updated * Modified tests Signed-off-by: Kapian1234 <wanjinch@amazon.com> * Modified tests Signed-off-by: Kapian1234 <wanjinch@amazon.com> * / Signed-off-by: Kapian1234 <wanjinch@amazon.com> * Modified tests Signed-off-by: Kapian1234 <wanjinch@amazon.com> * Remove the doc updates Signed-off-by: Kapian1234 <wanjinch@amazon.com> * Remove the doc updates Signed-off-by: Kapian1234 <wanjinch@amazon.com> * Resolve some issues Signed-off-by: Kapian1234 <wanjinch@amazon.com> * resolve some issues Signed-off-by: Kapian1234 <wanjinch@amazon.com> * Change type switch to popover style Signed-off-by: Kapian1234 <wanjinch@amazon.com> * Change type switch to popover style Signed-off-by: Kapian1234 <wanjinch@amazon.com> * Change type switch to popover style Signed-off-by: Kapian1234 <wanjinch@amazon.com> * Change type switch to popover style Signed-off-by: Kapian1234 <wanjinch@amazon.com> * Modify tests Signed-off-by: Kapian1234 <wanjinch@amazon.com> * Resolve some issues Signed-off-by: Kapian1234 <wanjinch@amazon.com> * Modify tests Signed-off-by: Kapian1234 <wanjinch@amazon.com> * Modify tests to increase coverage Signed-off-by: Kapian1234 <wanjinch@amazon.com> * Modify tests Signed-off-by: Kapian1234 <wanjinch@amazon.com> * Modify tests Signed-off-by: Kapian1234 <wanjinch@amazon.com> * Modify tests Signed-off-by: Kapian1234 <wanjinch@amazon.com> * Modify tests Signed-off-by: Kapian1234 <wanjinch@amazon.com> --------- Signed-off-by: Kapian1234 <wanjinch@amazon.com> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
opensearch-project · Aug 21, 2024 · aed03fa · aed03fa
1 parent b4ae264
commit aed03fa
Show file tree

Hide file tree

Showing 8 changed files with 354 additions and 200 deletions.
diff --git a/changelogs/fragments/7652.yml b/changelogs/fragments/7652.yml
@@ -0,0 +1,2 @@
+feat:
+- Update permission settings appearance ([#7652](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7652))
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
@@ -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({

diff --git a/src/plugins/workspace/public/components/workspace_form/constants.ts b/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',
 });

diff --git 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,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}

diff --git a/...ns/workspace/public/components/workspace_form/workspace_permission_setting_input.test.tsx b/...ns/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,
@@ -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,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',
@@ -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({
@@ -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', () => {
@@ -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);
   });
 
@@ -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);
   });
@@ -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);
+  });
 });