[Workspace]Remove collaborators in workspace creation page and refactor with getDisplayedType

changelogs/fragments/8520.yml

@@ -0,0 +1,2 @@
+feat:
+- [Workspace]Remove collaborators in workspace creation page ([#8520](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8520))

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

@@ -12,7 +12,7 @@ describe('AddCollaboratorsModal', () => {
     title: 'Add Collaborators',
     inputLabel: 'Collaborator ID',
     addAnotherButtonLabel: 'Add Another',
-    permissionType: 'readOnly',
+    permissionType: 'user' as const,
     onClose: jest.fn(),
     onAddCollaborators: jest.fn(),
   };
@@ -46,7 +46,7 @@ describe('AddCollaboratorsModal', () => {
     fireEvent.click(addCollaboratorsButton);
     await waitFor(() => {
       expect(defaultProps.onAddCollaborators).toHaveBeenCalledWith([
-        { collaboratorId: 'user1', accessLevel: 'readOnly', permissionType: 'readOnly' },
+        { collaboratorId: 'user1', accessLevel: 'readOnly', permissionType: 'user' },
       ]);
     });
   });
@@ -68,10 +68,12 @@ describe('AddCollaboratorsModal', () => {
     const instruction = {
       title: 'Instructions',
       detail: 'Follow these instructions to add collaborators',
+      link: 'foo',
     };
     const props = { ...defaultProps, instruction };
     render(<AddCollaboratorsModal {...props} />);
     expect(screen.getByText(instruction.title)).toBeInTheDocument();
     expect(screen.getByText(instruction.detail)).toBeInTheDocument();
+    expect(screen.getByText('Learn more in Documentation')).toBeInTheDocument();
   });
 });

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

@@ -6,6 +6,7 @@
 import {
   EuiAccordion,
   EuiHorizontalRule,
+  EuiLink,
   EuiModal,
   EuiModalBody,
   EuiModalFooter,
@@ -34,7 +35,7 @@ export interface AddCollaboratorsModalProps {
   inputPlaceholder?: string;
   instruction?: {
     title: string;
-    detail: string;
+    detail: React.ReactNode;
     link?: string;
   };
   permissionType: WorkspaceCollaboratorPermissionType;
@@ -91,6 +92,19 @@ export const AddCollaboratorsModal = ({
               <EuiSpacer size="xs" />
               <EuiSpacer size="s" />
               <EuiText size="xs">{instruction.detail}</EuiText>
+              {instruction.link && (
+                <>
+                  <EuiSpacer size="xs" />
+                  <EuiLink href={instruction.link} target="_blank" external>
+                    {i18n.translate(
+                      'workspace.addCollaboratorsModal.instruction.learnMoreLinkText',
+                      {
+                        defaultMessage: 'Learn more in Documentation',
+                      }
+                    )}
+                  </EuiLink>
+                </>
+              )}
             </EuiAccordion>
             <EuiHorizontalRule margin="xs" />
             <EuiSpacer size="s" />

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

@@ -18,6 +18,7 @@ import {
 import { DataSourceEngineType } from '../../../../data_source/common/data_sources';
 import { DataSourceConnectionType } from '../../../common/types';
 import * as utils from '../../utils';
+import * as workspaceUtilsExports from '../utils/workspace';
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
@@ -113,8 +114,15 @@ jest.spyOn(utils, 'fetchDataSourceConnections').mockImplementation(async (passed
 const WorkspaceCreator = ({
   isDashboardAdmin = false,
   dataSourceEnabled = false,
+  isPermissionEnabled = true,
   ...props
-}: Partial<WorkspaceCreatorProps & { isDashboardAdmin: boolean; dataSourceEnabled?: boolean }>) => {
+}: Partial<
+  WorkspaceCreatorProps & {
+    isDashboardAdmin: boolean;
+    dataSourceEnabled?: boolean;
+    isPermissionEnabled?: boolean;
+  }
+>) => {
   const { Provider } = createOpenSearchDashboardsReactContext({
     ...mockCoreStart,
     ...{
@@ -123,7 +131,7 @@ const WorkspaceCreator = ({
         capabilities: {
           ...mockCoreStart.application.capabilities,
           workspaces: {
-            permissionEnabled: true,
+            permissionEnabled: isPermissionEnabled,
           },
           dashboards: {
             isDashboardAdmin,
@@ -273,8 +281,12 @@ describe('WorkspaceCreator', () => {
         dataSources: [],
         dataConnections: [],
         permissions: {
-          library_write: { users: ['%me%'] },
-          write: { users: ['%me%'] },
+          library_write: {
+            users: ['%me%'],
+          },
+          write: {
+            users: ['%me%'],
+          },
         },
       }
     );
@@ -328,43 +340,6 @@ describe('WorkspaceCreator', () => {
     expect(notificationToastsAddSuccess).not.toHaveBeenCalled();
   });
 
-  it('create workspace with customized permissions', async () => {
-    const { getByTestId } = render(<WorkspaceCreator />);
-
-    // Ensure workspace create form rendered
-    await waitFor(() => {
-      expect(getByTestId('workspaceForm-bottomBar-createButton')).toBeInTheDocument();
-    });
-    const nameInput = getByTestId('workspaceForm-workspaceDetails-nameInputText');
-    fireEvent.input(nameInput, {
-      target: { value: 'test workspace name' },
-    });
-    fireEvent.click(getByTestId('workspaceUseCase-observability'));
-    fireEvent.click(getByTestId('workspaceForm-permissionSettingPanel-addNew'));
-    fireEvent.click(getByTestId('workspaceForm-bottomBar-createButton'));
-    expect(workspaceClientCreate).toHaveBeenCalledWith(
-      expect.objectContaining({
-        name: 'test workspace name',
-      }),
-      {
-        dataConnections: [],
-        dataSources: [],
-        permissions: {
-          write: {
-            users: ['%me%'],
-          },
-          library_write: {
-            users: ['%me%'],
-          },
-        },
-      }
-    );
-    await waitFor(() => {
-      expect(notificationToastsAddSuccess).toHaveBeenCalled();
-    });
-    expect(notificationToastsAddDanger).not.toHaveBeenCalled();
-  });
-
   it('create workspace with customized selected dataSources', async () => {
     Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
       configurable: true,
@@ -404,18 +379,10 @@ describe('WorkspaceCreator', () => {
       expect.objectContaining({
         name: 'test workspace name',
       }),
-      {
+      expect.objectContaining({
         dataConnections: [],
         dataSources: ['id1'],
-        permissions: {
-          library_write: {
-            users: ['%me%'],
-          },
-          write: {
-            users: ['%me%'],
-          },
-        },
-      }
+      })
     );
     await waitFor(() => {
       expect(notificationToastsAddSuccess).toHaveBeenCalled();
@@ -462,17 +429,40 @@ describe('WorkspaceCreator', () => {
       expect.objectContaining({
         name: 'test workspace name',
       }),
-      {
+      expect.objectContaining({
         dataConnections: ['id3'],
         dataSources: [],
-        permissions: {
-          library_write: {
-            users: ['%me%'],
-          },
-          write: {
-            users: ['%me%'],
-          },
-        },
+      })
+    );
+    await waitFor(() => {
+      expect(notificationToastsAddSuccess).toHaveBeenCalled();
+    });
+    expect(notificationToastsAddDanger).not.toHaveBeenCalled();
+  });
+
+  it('should not include permissions parameter if permissions not enabled', async () => {
+    const { getByTestId } = render(
+      <WorkspaceCreator isDashboardAdmin={true} isPermissionEnabled={false} />
+    );
+
+    // Ensure workspace create form rendered
+    await waitFor(() => {
+      expect(getByTestId('workspaceForm-bottomBar-createButton')).toBeInTheDocument();
+    });
+    const nameInput = getByTestId('workspaceForm-workspaceDetails-nameInputText');
+    fireEvent.input(nameInput, {
+      target: { value: 'test workspace name' },
+    });
+    fireEvent.click(getByTestId('workspaceUseCase-observability'));
+
+    fireEvent.click(getByTestId('workspaceForm-bottomBar-createButton'));
+    expect(workspaceClientCreate).toHaveBeenCalledWith(
+      expect.objectContaining({
+        name: 'test workspace name',
+      }),
+      {
+        dataConnections: [],
+        dataSources: [],
       }
     );
     await waitFor(() => {
@@ -510,8 +500,8 @@ describe('WorkspaceCreator', () => {
     });
   });
 
-  it('should redirect to workspace use case landing page after created successfully', async () => {
-    const { getByTestId } = render(<WorkspaceCreator />);
+  it('should redirect to workspace use case landing page if permission not enabled', async () => {
+    const { getByTestId } = render(<WorkspaceCreator isPermissionEnabled={false} />);
 
     // Ensure workspace create form rendered
     await waitFor(() => {
@@ -529,4 +519,32 @@ describe('WorkspaceCreator', () => {
     });
     jest.useRealTimers();
   });
+
+  it('should redirect to workspace setting collaborators tab if permission enabled', async () => {
+    const { getByTestId } = render(<WorkspaceCreator />);
+    const navigateToWorkspaceDetailMock = jest.fn();
+    jest
+      .spyOn(workspaceUtilsExports, 'navigateToWorkspaceDetail')
+      .mockImplementation(navigateToWorkspaceDetailMock);
+
+    // Ensure workspace create form rendered
+    await waitFor(() => {
+      expect(getByTestId('workspaceForm-bottomBar-createButton')).toBeInTheDocument();
+    });
+    const nameInput = getByTestId('workspaceForm-workspaceDetails-nameInputText');
+    fireEvent.input(nameInput, {
+      target: { value: 'test workspace name' },
+    });
+    fireEvent.click(getByTestId('workspaceForm-bottomBar-createButton'));
+    jest.useFakeTimers();
+    jest.runAllTimers();
+    await waitFor(() => {
+      expect(navigateToWorkspaceDetailMock).toHaveBeenCalledWith(
+        expect.anything(),
+        'successResult',
+        'collaborators'
+      );
+    });
+    jest.useRealTimers();
+  });
 });