[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'),
@@ -178,18 +179,13 @@ function clearMockedFunctions() {
 describe('WorkspaceCreator', () => {
   beforeEach(() => clearMockedFunctions());
   const { location } = window;
-  const setHrefSpy = jest.fn((href) => href);
 
   beforeAll(() => {
     if (window.location) {
       // @ts-ignore
       delete window.location;
     }
     window.location = {} as Location;
-    Object.defineProperty(window.location, 'href', {
-      get: () => 'http://localhost/w/workspace/app/workspace_create',
-      set: setHrefSpy,
-    });
   });
 
   afterAll(() => {
@@ -272,10 +268,6 @@ describe('WorkspaceCreator', () => {
       {
         dataSources: [],
         dataConnections: [],
-        permissions: {
-          library_write: { users: ['%me%'] },
-          write: { users: ['%me%'] },
-        },
       }
     );
     await waitFor(() => {
@@ -328,43 +320,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,
@@ -407,14 +362,6 @@ describe('WorkspaceCreator', () => {
       {
         dataConnections: [],
         dataSources: ['id1'],
-        permissions: {
-          library_write: {
-            users: ['%me%'],
-          },
-          write: {
-            users: ['%me%'],
-          },
-        },
       }
     );
     await waitFor(() => {
@@ -465,14 +412,6 @@ describe('WorkspaceCreator', () => {
       {
         dataConnections: ['id3'],
         dataSources: [],
-        permissions: {
-          library_write: {
-            users: ['%me%'],
-          },
-          write: {
-            users: ['%me%'],
-          },
-        },
       }
     );
     await waitFor(() => {
@@ -512,6 +451,10 @@ describe('WorkspaceCreator', () => {
 
   it('should redirect to workspace use case landing page after created successfully', async () => {
     const { getByTestId } = render(<WorkspaceCreator />);
+    const navigateToWorkspaceDetailMock = jest.fn();
+    jest
+      .spyOn(workspaceUtilsExports, 'navigateToWorkspaceDetail')
+      .mockImplementation(navigateToWorkspaceDetailMock);
 
     // Ensure workspace create form rendered
     await waitFor(() => {
@@ -525,7 +468,11 @@ describe('WorkspaceCreator', () => {
     jest.useFakeTimers();
     jest.runAllTimers();
     await waitFor(() => {
-      expect(setHrefSpy).toHaveBeenCalledWith(expect.stringContaining('/app/discover'));
+      expect(navigateToWorkspaceDetailMock).toHaveBeenCalledWith(
+        expect.anything(),
+        'successResult',
+        'collaborators'
+      );
     });
     jest.useRealTimers();
   });

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

@@ -10,18 +10,15 @@ import { BehaviorSubject } from 'rxjs';
 
 import { useLocation } from 'react-router-dom';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
-import { WorkspaceFormSubmitData, WorkspaceOperationType } from '../workspace_form';
-import { WORKSPACE_DETAIL_APP_ID } from '../../../common/constants';
+import { WorkspaceFormSubmitData, WorkspaceOperationType, DetailTab } from '../workspace_form';
 import { getUseCaseFeatureConfig } from '../../../common/utils';
-import { formatUrlWithWorkspaceId } from '../../../../../core/public/utils';
 import { WorkspaceClient } from '../../workspace_client';
-import { convertPermissionSettingsToPermissions } from '../workspace_form';
 import { DataSourceManagementPluginSetup } from '../../../../../plugins/data_source_management/public';
 import { WorkspaceUseCase } from '../../types';
-import { getFirstUseCaseOfFeatureConfigs } from '../../utils';
 import { useFormAvailableUseCases } from '../workspace_form/use_form_available_use_cases';
 import { NavigationPublicPluginStart } from '../../../../../plugins/navigation/public';
 import { DataSourceConnectionType } from '../../../common/types';
+import { navigateToWorkspaceDetail } from '../utils/workspace';
 import { WorkspaceCreatorForm } from './workspace_creator_form';
 
 export interface WorkspaceCreatorProps {
@@ -47,7 +44,6 @@ export const WorkspaceCreator = (props: WorkspaceCreatorProps) => {
   }>();
   const [isFormSubmitting, setIsFormSubmitting] = useState(false);
 
-  const isPermissionEnabled = application?.capabilities.workspaces.permissionEnabled;
   const { isOnlyAllowEssential, availableUseCases } = useFormAvailableUseCases({
     savedObjects,
     registeredUseCases$,
@@ -102,7 +98,6 @@ export const WorkspaceCreator = (props: WorkspaceCreatorProps) => {
         result = await workspaceClient.create(attributes, {
           dataSources: selectedDataSourceIds,
           dataConnections: selectedDataConnectionIds,
-          permissions: convertPermissionSettingsToPermissions(permissionSettings),
         });
         if (result?.success) {
           notifications?.toasts.addSuccess({
@@ -112,17 +107,12 @@ export const WorkspaceCreator = (props: WorkspaceCreatorProps) => {
           });
           if (application && http) {
             const newWorkspaceId = result.result.id;
-            const useCaseId = getFirstUseCaseOfFeatureConfigs(attributes.features);
-            const useCaseLandingAppId = availableUseCases?.find(({ id }) => useCaseId === id)
-              ?.features[0].id;
             // Redirect page after one second, leave one second time to show create successful toast.
             window.setTimeout(() => {
-              window.location.href = formatUrlWithWorkspaceId(
-                application.getUrlForApp(useCaseLandingAppId || WORKSPACE_DETAIL_APP_ID, {
-                  absolute: true,
-                }),
+              navigateToWorkspaceDetail(
+                { application, http },
                 newWorkspaceId,
-                http.basePath
+                DetailTab.Collaborators
               );
             }, 1000);
           }
@@ -142,7 +132,7 @@ export const WorkspaceCreator = (props: WorkspaceCreatorProps) => {
         setIsFormSubmitting(false);
       }
     },
-    [notifications?.toasts, http, application, workspaceClient, isFormSubmitting, availableUseCases]
+    [notifications?.toasts, http, application, workspaceClient, isFormSubmitting]
   );
 
   const isFormReadyToRender =
@@ -177,7 +167,7 @@ export const WorkspaceCreator = (props: WorkspaceCreatorProps) => {
               savedObjects={savedObjects}
               onSubmit={handleWorkspaceFormSubmit}
               operationType={WorkspaceOperationType.Create}
-              permissionEnabled={isPermissionEnabled}
+              permissionEnabled={false}
               dataSourceManagement={dataSourceManagement}
               availableUseCases={availableUseCases}
               defaultValues={defaultWorkspaceFormValues}

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

@@ -3,24 +3,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useCallback, useRef } from 'react';
-import {
-  EuiSpacer,
-  EuiForm,
-  EuiText,
-  EuiFlexItem,
-  EuiFlexGroup,
-  EuiDescribedFormGroup,
-  EuiPanel,
-} from '@elastic/eui';
+import React from 'react';
+import { EuiSpacer, EuiForm, EuiText, EuiFlexItem, EuiFlexGroup, EuiPanel } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import {
   useWorkspaceForm,
-  WorkspacePermissionSettingPanel,
   WorkspaceUseCase,
   WorkspaceFormErrorCallout,
   SelectDataSourcePanel,
-  usersAndPermissionsCreatePageTitle,
   WorkspaceFormProps,
 } from '../workspace_form';
 
@@ -38,8 +28,6 @@ export const WorkspaceCreatorForm = (props: WorkspaceCreatorFormProps) => {
   const {
     application,
     savedObjects,
-    defaultValues,
-    permissionEnabled,
     dataSourceManagement: isDataSourceEnabled,
     availableUseCases,
   } = props;
@@ -53,13 +41,9 @@ export const WorkspaceCreatorForm = (props: WorkspaceCreatorFormProps) => {
     handleFormSubmit,
     handleColorChange,
     handleUseCaseChange,
-    setPermissionSettings,
     setSelectedDataSourceConnections,
   } = useWorkspaceForm(props);
 
-  const disabledUserOrGroupInputIdsRef = useRef(
-    defaultValues?.permissionSettings?.map((item) => item.id) ?? []
-  );
   const isDashboardAdmin = application?.capabilities?.dashboards?.isDashboardAdmin ?? false;
 
   return (
@@ -123,50 +107,8 @@ export const WorkspaceCreatorForm = (props: WorkspaceCreatorFormProps) => {
                   showDataSourceManagement={true}
                 />
               </EuiPanel>
-              <EuiSpacer size="s" />
-              <EuiSpacer size="s" />
             </>
           )}
-          {permissionEnabled && (
-            <EuiPanel>
-              <EuiText
-                {...generateRightSidebarScrollProps(RightSidebarScrollField.Collaborators)}
-                size="s"
-              >
-                <h2>{usersAndPermissionsCreatePageTitle}</h2>
-              </EuiText>
-              <EuiText size="xs">
-                {i18n.translate('workspace.creator.form.usersAndPermissionsDescription', {
-                  defaultMessage: 'Manage access and permissions',
-                })}
-              </EuiText>
-              <EuiSpacer size="m" />
-              <EuiDescribedFormGroup
-                title={
-                  <h4 {...generateRightSidebarScrollProps(RightSidebarScrollField.Name)}>
-                    {i18n.translate('workspace.creator.collaborators.panel.fields.name.title', {
-                      defaultMessage: 'Workspace access',
-                    })}
-                  </h4>
-                }
-                description={i18n.translate(
-                  'workspace.creator.collaborators.panel.fields.name.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.',
-                  }
-                )}
-              >
-                <WorkspacePermissionSettingPanel
-                  errors={formErrors.permissionSettings?.fields}
-                  onChange={setPermissionSettings}
-                  permissionSettings={formData.permissionSettings}
-                  disabledUserOrGroupInputIds={disabledUserOrGroupInputIdsRef.current}
-                  data-test-subj={`workspaceForm-permissionSettingPanel`}
-                />
-              </EuiDescribedFormGroup>
-            </EuiPanel>
-          )}
         </EuiForm>
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
@@ -175,7 +117,6 @@ export const WorkspaceCreatorForm = (props: WorkspaceCreatorFormProps) => {
             <WorkspaceFormSummaryPanel
               formData={formData}
               availableUseCases={availableUseCases}
-              permissionEnabled={permissionEnabled}
               formId={formId}
               application={application}
               isSubmitting={props.isSubmitting}