[Workspace] Add permission tab to workspace create update page

CHANGELOG.md

@@ -92,6 +92,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [CSP Handler] Update CSP handler to only query and modify frame ancestors instead of all CSP directives ([#6398](https:/opensearch-project/OpenSearch-Dashboards/pull/6398))
 - [MD] Add OpenSearch cluster group label to top of single selectable dropdown ([#6400](https:/opensearch-project/OpenSearch-Dashboards/pull/6400))
 - [Workspace] Support workspace in saved objects client in server side. ([#6365](https:/opensearch-project/OpenSearch-Dashboards/pull/6365))
+- [Workspace] Add permission tab to workspace create update page ([#6378](https:/opensearch-project/OpenSearch-Dashboards/pull/6378))
 
 ### 🐛 Bug Fixes
 

src/core/types/saved_objects.ts

@@ -126,3 +126,5 @@ export interface SavedObjectError {
  statusCode: number;
  metadata?: Record<string, unknown>;
 }
+
+export type SavedObjectPermissions = Permissions;

src/core/types/workspace.ts

@@ -3,6 +3,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { Permissions } from '../server/saved_objects';
+
 export interface WorkspaceAttribute {
  id: string;
  name: string;
@@ -12,3 +14,7 @@ export interface WorkspaceAttribute {
  icon?: string;
  reserved?: boolean;
 }
+
+export interface WorkspaceAttributeWithPermission extends WorkspaceAttribute {
+ permissions?: Permissions;
+}

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

@@ -34,6 +34,12 @@ const WorkspaceCreator = (props: any) => {
  ...{
  application: {
  ...mockCoreStart.application,
+ capabilities: {
+ ...mockCoreStart.application.capabilities,
+ workspaces: {
+ permissionEnabled: true,
+ },
+ },
  navigateToApp,
  getUrlForApp: jest.fn(() => '/app/workspace_overview'),
  applications$: new BehaviorSubject<Map<string, PublicAppInfo>>(PublicAPPInfoMap as any),
@@ -145,7 +151,8 @@ describe('WorkspaceCreator', () => {
  name: 'test workspace name',
  color: '#000000',
  description: 'test workspace description',
- })
+ }),
+ undefined
  );
  await waitFor(() => {
  expect(notificationToastsAddSuccess).toHaveBeenCalled();
@@ -168,7 +175,8 @@ describe('WorkspaceCreator', () => {
  expect.objectContaining({
  name: 'test workspace name',
  features: expect.arrayContaining(['app1', 'app2', 'app3']),
- })
+ }),
+ undefined
  );
  await waitFor(() => {
  expect(notificationToastsAddSuccess).toHaveBeenCalled();
@@ -180,7 +188,7 @@ describe('WorkspaceCreator', () => {
  });
 
  it('should show danger toasts after create workspace failed', async () => {
- workspaceClientCreate.mockReturnValue({ result: { id: 'failResult' }, success: false });
+ workspaceClientCreate.mockReturnValueOnce({ result: { id: 'failResult' }, success: false });
  const { getByTestId } = render(<WorkspaceCreator />);
  const nameInput = getByTestId('workspaceForm-workspaceDetails-nameInputText');
  fireEvent.input(nameInput, {
@@ -195,7 +203,7 @@ describe('WorkspaceCreator', () => {
  });
 
  it('should show danger toasts after call create workspace API failed', async () => {
- workspaceClientCreate.mockImplementation(async () => {
+ workspaceClientCreate.mockImplementationOnce(async () => {
  throw new Error();
  });
  const { getByTestId } = render(<WorkspaceCreator />);
@@ -210,4 +218,38 @@ describe('WorkspaceCreator', () => {
  });
  expect(notificationToastsAddSuccess).not.toHaveBeenCalled();
  });
+
+ it('create workspace with customized permissions', async () => {
+ const { getByTestId, getByText, getAllByText } = render(<WorkspaceCreator />);
+ const nameInput = getByTestId('workspaceForm-workspaceDetails-nameInputText');
+ fireEvent.input(nameInput, {
+ target: { value: 'test workspace name' },
+ });
+ fireEvent.click(getByText('Users & Permissions'));
+ fireEvent.click(getByTestId('workspaceForm-permissionSettingPanel-user-addNew'));
+ const userIdInput = getAllByText('Select')[0];
+ fireEvent.click(userIdInput);
+ fireEvent.input(getByTestId('comboBoxSearchInput'), {
+ target: { value: 'test user id' },
+ });
+ fireEvent.blur(getByTestId('comboBoxSearchInput'));
+ fireEvent.click(getByTestId('workspaceForm-bottomBar-createButton'));
+ expect(workspaceClientCreate).toHaveBeenCalledWith(
+ expect.objectContaining({
+ name: 'test workspace name',
+ }),
+ {
+ read: {
+ users: ['test user id'],
+ },
+ library_read: {
+ users: ['test user id'],
+ },
+ }
+ );
+ await waitFor(() => {
+ expect(notificationToastsAddSuccess).toHaveBeenCalled();
+ });
+ expect(notificationToastsAddDanger).not.toHaveBeenCalled();
+ });
 });

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

@@ -11,17 +11,23 @@ import { WorkspaceForm, WorkspaceFormSubmitData, WorkspaceOperationType } from '
 import { WORKSPACE_OVERVIEW_APP_ID } from '../../../common/constants';
 import { formatUrlWithWorkspaceId } from '../../../../../core/public/utils';
 import { WorkspaceClient } from '../../workspace_client';
+import { convertPermissionSettingsToPermissions } from '../workspace_form';
 
 export const WorkspaceCreator = () => {
  const {
  services: { application, notifications, http, workspaceClient },
  } = useOpenSearchDashboards<{ workspaceClient: WorkspaceClient }>();
+ const isPermissionEnabled = application?.capabilities.workspaces.permissionEnabled;
 
  const handleWorkspaceFormSubmit = useCallback(
  async (data: WorkspaceFormSubmitData) => {
  let result;
  try {
- result = await workspaceClient.create(data);
+ const { permissionSettings, ...attributes } = data;
+ result = await workspaceClient.create(
+ attributes,
+ convertPermissionSettingsToPermissions(permissionSettings)
+ );
  if (result?.success) {
  notifications?.toasts.addSuccess({
  title: i18n.translate('workspace.create.success', {
@@ -80,6 +86,8 @@ export const WorkspaceCreator = () => {
  application={application}
  onSubmit={handleWorkspaceFormSubmit}
  operationType={WorkspaceOperationType.Create}
+ permissionEnabled={isPermissionEnabled}
+ permissionLastAdminItemDeletable
  />
  )}
  </EuiPageContent>

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

@@ -3,6 +3,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { i18n } from '@osd/i18n';
+import { WorkspacePermissionMode } from '../../../common/constants';
+
 export enum WorkspaceOperationType {
  Create = 'create',
  Update = 'update',
@@ -11,4 +14,51 @@ export enum WorkspaceOperationType {
 export enum WorkspaceFormTabs {
  NotSelected,
  FeatureVisibility,
+ UsersAndPermissions,
+}
+
+export enum WorkspacePermissionItemType {
+ User = 'user',
+ Group = 'group',
 }
+
+export enum PermissionModeId {
+ Read = 'read',
+ ReadAndWrite = 'read+write',
+ Admin = 'admin',
+}
+
+export const permissionModeOptions = [
+ {
+ id: PermissionModeId.Read,
+ label: i18n.translate('workspace.form.permissionSettingPanel.permissionModeOptions.read', {
+ defaultMessage: 'Read',
+ }),
+ },
+ {
+ id: PermissionModeId.ReadAndWrite,
+ label: i18n.translate(
+ 'workspace.form.permissionSettingPanel.permissionModeOptions.readAndWrite',
+ {
+ defaultMessage: 'Read & Write',
+ }
+ ),
+ },
+ {
+ id: PermissionModeId.Admin,
+ label: i18n.translate('workspace.form.permissionSettingPanel.permissionModeOptions.admin', {
+ defaultMessage: 'Admin',
+ }),
+ },
+];
+
+export const optionIdToWorkspacePermissionModesMap: {
+ [key: string]: WorkspacePermissionMode[];
+} = {
+ [PermissionModeId.Read]: [WorkspacePermissionMode.LibraryRead, WorkspacePermissionMode.Read],
+ [PermissionModeId.ReadAndWrite]: [
+ WorkspacePermissionMode.LibraryWrite,
+ WorkspacePermissionMode.Read,
+ ],
+ [PermissionModeId.Admin]: [WorkspacePermissionMode.LibraryWrite, WorkspacePermissionMode.Write],
+};

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

@@ -6,3 +6,7 @@
 export { WorkspaceForm } from './workspace_form';
 export { WorkspaceFormSubmitData } from './types';
 export { WorkspaceOperationType } from './constants';
+export {
+ convertPermissionsToPermissionSettings,
+ convertPermissionSettingsToPermissions,
+} from './utils';

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

@@ -3,14 +3,30 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import type { WorkspaceOperationType } from './constants';
 import type { ApplicationStart } from '../../../../../core/public';
+import type { WorkspacePermissionMode } from '../../../common/constants';
+import type { WorkspaceOperationType, WorkspacePermissionItemType } from './constants';
+
+export type WorkspacePermissionSetting =
+ | {
+ id: number;
+ type: WorkspacePermissionItemType.User;
+ userId: string;
+ modes: WorkspacePermissionMode[];
+ }
+ | {
+ id: number;
+ type: WorkspacePermissionItemType.Group;
+ group: string;
+ modes: WorkspacePermissionMode[];
+ };
 
 export interface WorkspaceFormSubmitData {
  name: string;
  description?: string;
  features?: string[];
  color?: string;
+ permissionSettings?: WorkspacePermissionSetting[];
 }
 
 export interface WorkspaceFormData extends WorkspaceFormSubmitData {
@@ -28,11 +44,17 @@ export interface WorkspaceFeatureGroup {
  features: WorkspaceFeature[];
 }
 
-export type WorkspaceFormErrors = { [key in keyof WorkspaceFormData]?: string };
+export type WorkspaceFormErrors = {
+ [key in keyof Omit<WorkspaceFormData, 'permissionSettings'>]?: string;
+} & {
+ permissionSettings?: { [key: number]: string };
+};
 
 export interface WorkspaceFormProps {
  application: ApplicationStart;
  onSubmit?: (formData: WorkspaceFormSubmitData) => void;
  defaultValues?: WorkspaceFormData;
  operationType?: WorkspaceOperationType;
+ permissionEnabled?: boolean;
+ permissionLastAdminItemDeletable?: boolean;
 }

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

@@ -5,13 +5,12 @@
 
 import { useCallback, useState, FormEventHandler, useRef, useMemo, useEffect } from 'react';
 import { htmlIdGenerator, EuiFieldTextProps, EuiColorPickerProps } from '@elastic/eui';
-import { i18n } from '@osd/i18n';
 import { useApplications } from '../../hooks';
 import { featureMatchesConfig } from '../../utils';
 
 import { WorkspaceFormTabs } from './constants';
-import { WorkspaceFormProps, WorkspaceFormErrors } from './types';
-import { appendDefaultFeatureIds, getNumberOfErrors, isValidFormTextInput } from './utils';
+import { WorkspaceFormProps, WorkspaceFormErrors, WorkspacePermissionSetting } from './types';
+import { appendDefaultFeatureIds, getNumberOfErrors, validateWorkspaceForm } from './utils';
 
 const workspaceHtmlIdGenerator = htmlIdGenerator();
 
@@ -36,6 +35,13 @@ export const useWorkspaceForm = ({ application, defaultValues, onSubmit }: Works
  const [selectedFeatureIds, setSelectedFeatureIds] = useState(
  appendDefaultFeatureIds(defaultFeatures)
  );
+ const [permissionSettings, setPermissionSettings] = useState<
+ Array<Pick<WorkspacePermissionSetting, 'id'> & Partial<WorkspacePermissionSetting>>
+ >(
+ defaultValues?.permissionSettings && defaultValues.permissionSettings.length > 0
+ ? defaultValues.permissionSettings
+ : []
+ );
 
  const [formErrors, setFormErrors] = useState<WorkspaceFormErrors>({});
  const numberOfErrors = useMemo(() => getNumberOfErrors(formErrors), [formErrors]);
@@ -45,6 +51,7 @@ export const useWorkspaceForm = ({ application, defaultValues, onSubmit }: Works
  description,
  features: selectedFeatureIds,
  color,
+ permissionSettings,
  });
  const getFormDataRef = useRef(getFormData);
  getFormDataRef.current = getFormData;
@@ -56,32 +63,8 @@ export const useWorkspaceForm = ({ application, defaultValues, onSubmit }: Works
  const handleFormSubmit = useCallback<FormEventHandler>(
  (e) => {
  e.preventDefault();
- let currentFormErrors: WorkspaceFormErrors = {};
  const formData = getFormDataRef.current();
- if (!formData.name) {
- currentFormErrors = {
- ...currentFormErrors,
- name: i18n.translate('workspace.form.detail.name.empty', {
- defaultMessage: "Name can't be empty.",
- }),
- };
- }
- if (formData.name && !isValidFormTextInput(formData.name)) {
- currentFormErrors = {
- ...currentFormErrors,
- name: i18n.translate('workspace.form.detail.name.invalid', {
- defaultMessage: 'Invalid workspace name',
- }),
- };
- }
- if (formData.description && !isValidFormTextInput(formData.description)) {
- currentFormErrors = {
- ...currentFormErrors,
- description: i18n.translate('workspace.form.detail.description.invalid', {
- defaultMessage: 'Invalid workspace description',
- }),
- };
- }
+ const currentFormErrors: WorkspaceFormErrors = validateWorkspaceForm(formData);
  setFormErrors(currentFormErrors);
  if (getNumberOfErrors(currentFormErrors) > 0) {
  return;
@@ -101,7 +84,11 @@ export const useWorkspaceForm = ({ application, defaultValues, onSubmit }: Works
  formData.features = defaultValues?.features ?? [];
  }
 
- onSubmit?.({ ...formData, name: formData.name! });
+ onSubmit?.({
+ ...formData,
+ name: formData.name!,
+ permissionSettings: formData.permissionSettings as WorkspacePermissionSetting[],
+ });
  },
  [defaultFeatures, onSubmit, defaultValues?.features]
  );
@@ -122,6 +109,10 @@ export const useWorkspaceForm = ({ application, defaultValues, onSubmit }: Works
  setSelectedTab(WorkspaceFormTabs.FeatureVisibility);
  }, []);
 
+ const handleTabPermissionClick = useCallback(() => {
+ setSelectedTab(WorkspaceFormTabs.UsersAndPermissions);
+ }, []);
+
  const handleFeaturesChange = useCallback((featureIds: string[]) => {
  setSelectedFeatureIds(featureIds);
  }, []);
@@ -143,6 +134,8 @@ export const useWorkspaceForm = ({ application, defaultValues, onSubmit }: Works
  handleFeaturesChange,
  handleNameInputChange,
  handleTabFeatureClick,
+ setPermissionSettings,
+ handleTabPermissionClick,
  handleDescriptionInputChange,
  };
 };