[Workspace]Refactor workspace form UI

changelogs/fragments/7133.yml

@@ -0,0 +1,2 @@
+feat:
+- [Workspace] Refactor workspace form UI ([#7133](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7133))

src/plugins/workspace/common/constants.ts

@@ -182,3 +182,5 @@ export const WORKSPACE_USE_CASES = Object.freeze({
     ] as string[],
   },
 });
+
+export const CURRENT_USER_PLACEHOLDER = '%current_user%';

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

@@ -182,22 +182,21 @@ describe('WorkspaceCreator', () => {
     fireEvent.input(descriptionInput, {
       target: { value: 'test workspace description' },
     });
-    const colorSelector = getByTestId(
-      'euiColorPickerAnchor workspaceForm-workspaceDetails-colorPicker'
-    );
-    fireEvent.input(colorSelector, {
-      target: { value: '#000000' },
-    });
     fireEvent.click(getByTestId('workspaceUseCase-observability'));
     fireEvent.click(getByTestId('workspaceForm-bottomBar-createButton'));
     expect(workspaceClientCreate).toHaveBeenCalledWith(
       expect.objectContaining({
         name: 'test workspace name',
-        color: '#000000',
         description: 'test workspace description',
         features: expect.arrayContaining(['use-case-observability']),
       }),
-      { dataSources: [], permissions: undefined }
+      {
+        dataSources: [],
+        permissions: {
+          library_write: { users: ['%current_user%'] },
+          write: { users: ['%current_user%'] },
+        },
+      }
     );
     await waitFor(() => {
       expect(notificationToastsAddSuccess).toHaveBeenCalled();
@@ -247,8 +246,8 @@ describe('WorkspaceCreator', () => {
     expect(notificationToastsAddSuccess).not.toHaveBeenCalled();
   });
 
-  it('create workspace with customized permissions', async () => {
-    const { getByTestId, getAllByText } = render(
+  it('create workspace with current user', async () => {
+    const { getByTestId } = render(
       <WorkspaceCreator
         workspaceConfigurableApps$={new BehaviorSubject([...PublicAPPInfoMap.values()])}
       />
@@ -259,12 +258,6 @@ describe('WorkspaceCreator', () => {
     });
     fireEvent.click(getByTestId('workspaceUseCase-observability'));
     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({
@@ -273,11 +266,11 @@ describe('WorkspaceCreator', () => {
       {
         dataSources: [],
         permissions: {
-          read: {
-            users: ['test user id'],
+          write: {
+            users: ['%current_user%'],
           },
-          library_read: {
-            users: ['test user id'],
+          library_write: {
+            users: ['%current_user%'],
           },
         },
       }
@@ -313,7 +306,14 @@ describe('WorkspaceCreator', () => {
       }),
       {
         dataSources: ['id1'],
-        permissions: undefined,
+        permissions: {
+          library_write: {
+            users: ['%current_user%'],
+          },
+          write: {
+            users: ['%current_user%'],
+          },
+        },
       }
     );
     await waitFor(() => {

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

@@ -4,7 +4,7 @@
  */
 
 import React, { useCallback } from 'react';
-import { EuiPage, EuiPageBody, EuiPageHeader, EuiPageContent, EuiSpacer } from '@elastic/eui';
+import { EuiPage, EuiPageBody, EuiPageHeader, EuiPageContent } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import { useObservable } from 'react-use';
 import { BehaviorSubject, of } from 'rxjs';
@@ -80,21 +80,15 @@ export const WorkspaceCreator = (props: WorkspaceCreatorProps) => {
   );
 
   return (
-    <EuiPage paddingSize="none">
+    <EuiPage>
       <EuiPageBody>
-        <EuiPageHeader restrictWidth pageTitle="Create a workspace" />
-        <EuiSpacer />
+        <EuiPageHeader pageTitle="Create a workspace" />
         <EuiPageContent
           verticalPosition="center"
           horizontalPosition="center"
           paddingSize="none"
           color="subdued"
           hasShadow={false}
-          /**
-           * Since above EuiPageHeader has a maxWidth: 1000 style,
-           * add maxWidth: 1000 below to align with the above page header
-           **/
-          style={{ width: '100%', maxWidth: 1000 }}
         >
           {application && savedObjects && (
             <WorkspaceForm

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

@@ -3,7 +3,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { i18n } from '@osd/i18n';
 import { WorkspacePermissionMode } from '../../../common/constants';
 
 export enum WorkspaceOperationType {
@@ -19,33 +18,9 @@ export enum WorkspacePermissionItemType {
 export enum PermissionModeId {
   Read = 'read',
   ReadAndWrite = 'read+write',
-  Admin = 'admin',
+  Owner = 'owner',
 }
 
-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[];
 } = {
@@ -54,5 +29,5 @@ export const optionIdToWorkspacePermissionModesMap: {
     WorkspacePermissionMode.LibraryWrite,
     WorkspacePermissionMode.Read,
   ],
-  [PermissionModeId.Admin]: [WorkspacePermissionMode.LibraryWrite, WorkspacePermissionMode.Write],
+  [PermissionModeId.Owner]: [WorkspacePermissionMode.LibraryWrite, WorkspacePermissionMode.Write],
 };

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

@@ -19,9 +19,10 @@ import { i18n } from '@osd/i18n';
 import { SavedObjectsStart } from '../../../../../core/public';
 import { getDataSourcesList } from '../../utils';
 import { DataSource } from '../../../common/types';
+import { WorkspaceFormError } from './types';
 
 export interface SelectDataSourcePanelProps {
-  errors?: { [key: number]: string };
+  errors?: { [key: number]: WorkspaceFormError };
   savedObjects: SavedObjectsStart;
   selectedDataSources: DataSource[];
   onChange: (value: DataSource[]) => void;
@@ -96,7 +97,7 @@ export const SelectDataSourcePanel = ({
       </EuiText>
       <EuiSpacer size="s" />
       {selectedDataSources.map(({ id, title }, index) => (
-        <EuiFormRow key={index} isInvalid={!!errors?.[index]} error={errors?.[index]}>
+        <EuiFormRow key={index} isInvalid={!!errors?.[index]} error={errors?.[index].message}>
           <EuiFlexGroup gutterSize="l">
             <EuiFlexItem grow={false}>
               <EuiComboBox

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

@@ -12,25 +12,28 @@ import type { WorkspacePermissionMode } from '../../../common/constants';
 import type { WorkspaceOperationType, WorkspacePermissionItemType } from './constants';
 import { DataSource } from '../../../common/types';
 
+export interface WorkspaceUserPermissionSetting {
+  id: number;
+  type: WorkspacePermissionItemType.User;
+  userId: string;
+  modes: WorkspacePermissionMode[];
+}
+
+export interface WorkspaceUserGroupPermissionSetting {
+  id: number;
+  type: WorkspacePermissionItemType.Group;
+  group: string;
+  modes: WorkspacePermissionMode[];
+}
+
 export type WorkspacePermissionSetting =
-  | {
-      id: number;
-      type: WorkspacePermissionItemType.User;
-      userId: string;
-      modes: WorkspacePermissionMode[];
-    }
-  | {
-      id: number;
-      type: WorkspacePermissionItemType.Group;
-      group: string;
-      modes: WorkspacePermissionMode[];
-    };
+  | WorkspaceUserPermissionSetting
+  | WorkspaceUserGroupPermissionSetting;
 
 export interface WorkspaceFormSubmitData {
   name: string;
   description?: string;
   features?: string[];
-  color?: string;
   permissionSettings?: WorkspacePermissionSetting[];
   selectedDataSources?: DataSource[];
 }
@@ -40,20 +43,45 @@ export interface WorkspaceFormData extends WorkspaceFormSubmitData {
   reserved?: boolean;
 }
 
+export enum WorkspaceFormErrorCode {
+  InvalidWorkspaceName,
+  WorkspaceNameMissing,
+  UseCaseMissing,
+  InvalidPermissionType,
+  InvalidPermissionModes,
+  PermissionUserIdMissing,
+  PermissionUserGroupMissing,
+  DuplicateUserIdPermissionSetting,
+  DuplicateUserGroupPermissionSetting,
+  PermissionSettingOwnerMissing,
+  InvalidDataSource,
+  DuplicateDataSource,
+}
+
+export interface WorkspaceFormError {
+  message: string;
+  code: WorkspaceFormErrorCode;
+}
+
 export type WorkspaceFormErrors = {
-  [key in keyof Omit<WorkspaceFormData, 'permissionSettings' | 'selectedDataSources'>]?: string;
+  [key in keyof Omit<
+    WorkspaceFormData,
+    'permissionSettings' | 'description' | 'selectedDataSources'
+  >]?: WorkspaceFormError;
 } & {
-  permissionSettings?: { [key: number]: string };
-  selectedDataSources?: { [key: number]: string };
+  permissionSettings?: {
+    overall?: WorkspaceFormError;
+    fields?: { [key: number]: WorkspaceFormError };
+  };
+  selectedDataSources?: { [key: number]: WorkspaceFormError };
 };
 
 export interface WorkspaceFormProps {
   application: ApplicationStart;
   savedObjects: SavedObjectsStart;
   onSubmit?: (formData: WorkspaceFormSubmitData) => void;
   defaultValues?: WorkspaceFormData;
-  operationType?: WorkspaceOperationType;
+  operationType: WorkspaceOperationType;
   workspaceConfigurableApps?: PublicAppInfo[];
   permissionEnabled?: boolean;
-  permissionLastAdminItemDeletable?: boolean;
 }

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

@@ -6,7 +6,8 @@
 import { renderHook, act } from '@testing-library/react-hooks';
 
 import { applicationServiceMock } from '../../../../../core/public/mocks';
-import { WorkspaceFormData } from './types';
+import { WorkspaceOperationType } from './constants';
+import { WorkspaceFormData, WorkspaceFormErrorCode } from './types';
 import { useWorkspaceForm } from './use_workspace_form';
 
 const setup = (defaultValues?: WorkspaceFormData) => {
@@ -16,6 +17,7 @@ const setup = (defaultValues?: WorkspaceFormData) => {
       application: applicationServiceMock.createStartContract(),
       defaultValues,
       onSubmit: onSubmitMock,
+      operationType: WorkspaceOperationType.Create,
     },
   });
   return {
@@ -25,7 +27,7 @@ const setup = (defaultValues?: WorkspaceFormData) => {
 };
 
 describe('useWorkspaceForm', () => {
-  it('should return "Invalid workspace name" and not call onSubmit when invalid name', async () => {
+  it('should return invalid workspace name error and not call onSubmit when invalid name', async () => {
     const { renderResult, onSubmitMock } = setup({
       id: 'foo',
       name: '~',
@@ -37,7 +39,10 @@ describe('useWorkspaceForm', () => {
     });
     expect(renderResult.result.current.formErrors).toEqual(
       expect.objectContaining({
-        name: 'Invalid workspace name',
+        name: {
+          code: WorkspaceFormErrorCode.InvalidWorkspaceName,
+          message: 'Name is invalid. Enter a valid name.',
+        },
       })
     );
     expect(onSubmitMock).not.toHaveBeenCalled();
@@ -54,7 +59,10 @@ describe('useWorkspaceForm', () => {
     });
     expect(renderResult.result.current.formErrors).toEqual(
       expect.objectContaining({
-        features: 'Use case is required. Select a use case.',
+        features: {
+          code: WorkspaceFormErrorCode.UseCaseMissing,
+          message: 'Use case is required. Select a use case.',
+        },
       })
     );
     expect(onSubmitMock).not.toHaveBeenCalled();