Clarify workspace form types

Signed-off-by: Lin Wang <[email protected]>

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

@@ -11,7 +11,7 @@ export { WorkspacePermissionSettingPanel } from './workspace_permission_setting_
 export { WorkspaceCancelModal } from './workspace_cancel_modal';
 export { WorkspaceNameField, WorkspaceDescriptionField } from './fields';
 
-export { WorkspaceFormSubmitData, WorkspaceFormData, WorkspaceFormProps } from './types';
+export { WorkspaceFormSubmitData, WorkspaceFormProps, WorkspaceFormDataState } from './types';
 export {
   WorkspaceOperationType,
   DetailTab,

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

@@ -31,17 +31,12 @@ export type WorkspacePermissionSetting =
 export interface WorkspaceFormSubmitData {
   name: string;
   description?: string;
-  features?: string[];
+  features: string[];
   color?: string;
   permissionSettings?: WorkspacePermissionSetting[];
   selectedDataSources?: DataSource[];
 }
 
-export interface WorkspaceFormData extends WorkspaceFormSubmitData {
-  id: string;
-  reserved?: boolean;
-}
-
 export enum WorkspaceFormErrorCode {
   InvalidWorkspaceName,
   WorkspaceNameMissing,
@@ -65,7 +60,7 @@ export interface WorkspaceFormError {
 
 export type WorkspaceFormErrors = {
   [key in keyof Omit<
-    WorkspaceFormData,
+    WorkspaceFormSubmitData,
     'permissionSettings' | 'description' | 'selectedDataSources'
   >]?: WorkspaceFormError;
 } & {
@@ -80,20 +75,24 @@ export interface WorkspaceFormProps {
   application: ApplicationStart;
   savedObjects: SavedObjectsStart;
   onSubmit?: (formData: WorkspaceFormSubmitData) => void;
-  defaultValues?: Partial<WorkspaceFormData>;
+  defaultValues?: Partial<WorkspaceFormSubmitData>;
   operationType: WorkspaceOperationType;
   permissionEnabled?: boolean;
-  detailTab?: DetailTab;
   dataSourceManagement?: DataSourceManagementPluginSetup;
   availableUseCases: WorkspaceUseCase[];
-  detailTitle?: string;
-}
-
-export interface WorkspaceDetailedFormProps extends WorkspaceFormProps {
-  defaultValues?: WorkspaceFormData;
 }
 
 export interface AvailableUseCaseItem
   extends Pick<WorkspaceUseCase, 'id' | 'title' | 'features' | 'description' | 'systematic'> {
   disabled?: boolean;
 }
+
+export interface WorkspaceFormDataState
+  extends Omit<WorkspaceFormSubmitData, 'name' | 'permissionSettings'> {
+  name: string;
+  useCase: string | undefined;
+  selectedDataSources: DataSource[];
+  permissionSettings: Array<
+    Pick<WorkspacePermissionSetting, 'id'> & Partial<WorkspacePermissionSetting>
+  >;
+}

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

@@ -8,10 +8,10 @@ import { renderHook, act } from '@testing-library/react-hooks';
 import { applicationServiceMock } from '../../../../../core/public/mocks';
 import { WorkspacePermissionMode } from '../../../common/constants';
 import { WorkspaceOperationType, WorkspacePermissionItemType } from './constants';
-import { WorkspaceFormData, WorkspaceFormErrorCode } from './types';
+import { WorkspaceFormSubmitData, WorkspaceFormErrorCode } from './types';
 import { useWorkspaceForm } from './use_workspace_form';
 
-const setup = (defaultValues?: WorkspaceFormData, permissionEnabled = false) => {
+const setup = (defaultValues?: WorkspaceFormSubmitData, permissionEnabled = false) => {
   const onSubmitMock = jest.fn();
   const renderResult = renderHook(useWorkspaceForm, {
     initialProps: {

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

@@ -13,7 +13,12 @@ import {
   isUseCaseFeatureConfig,
 } from '../../utils';
 import { DataSource } from '../../../common/types';
-import { WorkspaceFormProps, WorkspaceFormErrors, WorkspacePermissionSetting } from './types';
+import {
+  WorkspaceFormProps,
+  WorkspaceFormErrors,
+  WorkspacePermissionSetting,
+  WorkspaceFormDataState,
+} from './types';
 import {
   generatePermissionSettingsState,
   getNumberOfChanges,
@@ -46,7 +51,7 @@ export const useWorkspaceForm = ({
     featureConfigs,
   ]);
   const [permissionSettings, setPermissionSettings] = useState<
-    Array<Pick<WorkspacePermissionSetting, 'id'> & Partial<WorkspacePermissionSetting>>
+    WorkspaceFormDataState['permissionSettings']
   >(initialPermissionSettingsRef.current);
 
   const [selectedDataSources, setSelectedDataSources] = useState<DataSource[]>(
@@ -58,7 +63,7 @@ export const useWorkspaceForm = ({
   const [formErrors, setFormErrors] = useState<WorkspaceFormErrors>({});
   const numberOfErrors = useMemo(() => getNumberOfErrors(formErrors), [formErrors]);
   const formIdRef = useRef<string>();
-  const getFormData = () => ({
+  const getFormData = (): WorkspaceFormDataState => ({
     name,
     description,
     features: featureConfigs,

src/plugins/workspace/public/components/forms/utils.ts

@@ -16,7 +16,7 @@ import {
 } from './constants';
 
 import {
-  WorkspaceFormData,
+  WorkspaceFormDataState,
   WorkspaceFormError,
   WorkspaceFormErrorCode,
   WorkspaceFormErrors,
@@ -295,11 +295,7 @@ export const isSelectedDataSourcesDuplicated = (
 ) => selectedDataSources.some((ds) => ds.id === row.id);
 
 export const validateWorkspaceForm = (
-  formData: Omit<Partial<WorkspaceFormSubmitData>, 'permissionSettings'> & {
-    permissionSettings?: Array<
-      Pick<WorkspacePermissionSetting, 'id'> & Partial<WorkspacePermissionSetting>
-    >;
-  },
+  formData: Partial<WorkspaceFormDataState>,
   isPermissionEnabled: boolean
 ) => {
   const formErrors: WorkspaceFormErrors = {};
@@ -452,12 +448,8 @@ const isSamePermissionSetting = (a: PermissionSettingLike, b: PermissionSettingL
 };
 
 export const getNumberOfChanges = (
-  newFormData: Partial<Omit<WorkspaceFormSubmitData, 'permissionSettings'>> & {
-    permissionSettings?: Array<
-      Pick<WorkspacePermissionSetting, 'id'> & Partial<WorkspacePermissionSetting>
-    >;
-  },
-  initialFormData: Partial<Omit<WorkspaceFormData, 'id'>>
+  newFormData: Partial<WorkspaceFormDataState>,
+  initialFormData: Partial<WorkspaceFormSubmitData>
 ) => {
   let count = 0;
   if (newFormData.name !== initialFormData.name) {

src/plugins/workspace/public/components/forms/workspace_detail_form.tsx

@@ -50,7 +50,12 @@ const FormGroup = ({ title, children, describe }: FormGroupProps) => (
   </>
 );
 
-export const WorkspaceDetailForm = (props: WorkspaceFormProps) => {
+interface WorkspaceDetailedFormProps extends WorkspaceFormProps {
+  detailTab?: DetailTab;
+  detailTitle?: string;
+}
+
+export const WorkspaceDetailForm = (props: WorkspaceDetailedFormProps) => {
   const { detailTab, detailTitle, defaultValues, availableUseCases } = props;
   const {
     formId,

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

@@ -17,7 +17,6 @@ import { convertPermissionSettingsToPermissions } from '../forms';
 import { DataSource } from '../../../common/types';
 import { DataSourceManagementPluginSetup } from '../../../../../plugins/data_source_management/public';
 import { WorkspaceUseCase } from '../../types';
-import { WorkspaceFormData } from '../forms/types';
 import { getUseCaseFeatureConfig } from '../../utils';
 import { useFormAvailableUseCases } from '../forms/use_form_available_use_cases';
 import { NavigationPublicPluginStart } from '../../../../../plugins/navigation/public';
@@ -53,7 +52,7 @@ export const WorkspaceCreator = (props: WorkspaceCreatorProps) => {
   });
 
   const defaultSelectedUseCase = availableUseCases?.[0];
-  const defaultWorkspaceFormValues: Partial<WorkspaceFormData> = {
+  const defaultWorkspaceFormValues: Partial<WorkspaceFormSubmitData> = {
     color: euiPaletteColorBlind()[0],
     ...(defaultSelectedUseCase
       ? {