Merge pull request #22 from axonivy/XIVY-12288/shorten-class-types

XIVY-12288 improve class type naming
axonivy · Sep 17, 2024 · 4b6b03e · 4b6b03e
2 parents 291206d + e51ac3c
commit 4b6b03e
Show file tree

Hide file tree

Showing 11 changed files with 142 additions and 49 deletions.
diff --git a/integrations/standalone/tests/integration/dataclass-editor-business-dataclass.spec.ts b/integrations/standalone/tests/integration/dataclass-editor-business-dataclass.spec.ts
@@ -1,12 +1,17 @@
 import { expect, test } from '@playwright/test';
 import { DataClassEditor } from '../pageobjects/DataClassEditor';
 
-test('load data', async ({ page }) => {
-  const editor = await DataClassEditor.openDataClass(page, 'dataclasses/dataclass/DataClass.d.json');
+let editor: DataClassEditor;
+
+test.beforeEach(async ({ page }) => {
+  editor = await DataClassEditor.openDataClass(page, 'dataclasses/dataclass/DataClass.d.json');
+});
+
+test('load data', async () => {
   const table = editor.table;
   const detail = editor.detail;
 
-  await detail.expectToHaveDataClassValues('Business Data Class', 'DataClass comment', '@javax.persistence.Table(name="tableName")');
+  await detail.expectToHaveDataClassValues('Business Data', 'DataClass comment', '@javax.persistence.Table(name="tableName")');
 
   await expect(table.rows).toHaveCount(3);
 

diff --git a/integrations/standalone/tests/integration/dataclass-editor-dataclass.spec.ts b/integrations/standalone/tests/integration/dataclass-editor-dataclass.spec.ts
@@ -1,12 +1,17 @@
 import { expect, test } from '@playwright/test';
 import { DataClassEditor } from '../pageobjects/DataClassEditor';
 
-test('load data', async ({ page }) => {
-  const editor = await DataClassEditor.openDataClass(page, 'dataclasses/dataclass/Data.d.json');
+let editor: DataClassEditor;
+
+test.beforeEach(async ({ page }) => {
+  editor = await DataClassEditor.openDataClass(page, 'dataclasses/dataclass/Data.d.json');
+});
+
+test('load data', async () => {
   const table = editor.table;
   const detail = editor.detail;
 
-  await detail.expectToHaveDataClassValues('Data Class', '', '');
+  await detail.expectToHaveDataClassValues('Data', '', '');
 
   await expect(table.rows).toHaveCount(0);
 });
diff --git a/integrations/standalone/tests/integration/dataclass-editor-entityclass.spec.ts b/integrations/standalone/tests/integration/dataclass-editor-entityclass.spec.ts
@@ -1,12 +1,17 @@
 import { expect, test } from '@playwright/test';
 import { DataClassEditor } from '../pageobjects/DataClassEditor';
 
-test('load data', async ({ page }) => {
-  const editor = await DataClassEditor.openDataClass(page, 'dataclasses/dataclass/EntityClass.d.json');
+let editor: DataClassEditor;
+
+test.beforeEach(async ({ page }) => {
+  editor = await DataClassEditor.openDataClass(page, 'dataclasses/dataclass/EntityClass.d.json');
+});
+
+test('load data', async () => {
   const table = editor.table;
   const detail = editor.detail;
 
-  await detail.expectToHaveDataClassValues('Entity Class', 'EntityClass comment', '');
+  await detail.expectToHaveDataClassValues('Entity', 'EntityClass comment', '');
 
   await expect(table.rows).toHaveCount(1);
 

diff --git a/integrations/standalone/tests/mock/dataclass-editor.spec.ts b/integrations/standalone/tests/mock/dataclass-editor.spec.ts
@@ -12,14 +12,16 @@ test('title', async () => {
   await expect(editor.page).toHaveTitle('Data Class Editor Mock');
 });
 
-test('detail data class', async () => {
-  await editor.detail.expectTitle('Data Class Editor');
-  await editor.detail.expectToBeDataClass();
+test('headers', async () => {
+  await expect(editor.title).toHaveText('Business Data Editor');
+  await expect(editor.detail.title).toHaveText('Business Data - Interview');
+  await editor.table.row(0).locator.click();
+  await expect(editor.detail.title).toHaveText('Attribute - firstName');
 });
 
-test('detail field', async () => {
+test('detail', async () => {
+  await editor.detail.expectToBeDataClass();
   await editor.table.row(0).locator.click();
-  await editor.detail.expectTitle('Attribute - firstName');
   await editor.detail.expectToBeField();
 });
 

diff --git a/integrations/standalone/tests/pageobjects/DataClassEditor.ts b/integrations/standalone/tests/pageobjects/DataClassEditor.ts
@@ -13,6 +13,7 @@ const pmv = 'dataclass-test-project';
 
 export class DataClassEditor {
   readonly page: Page;
+  readonly title: Locator;
   readonly detailPanel: Locator;
   readonly detailToggle: Button;
   readonly detail: Detail;
@@ -23,6 +24,7 @@ export class DataClassEditor {
 
   constructor(page: Page) {
     this.page = page;
+    this.title = this.page.locator('.master-header');
     this.detailPanel = this.page.locator('.detail-panel');
     this.detailToggle = new Button(this.page, { name: 'Details toggle' });
     this.detail = new Detail(this.page);

diff --git a/integrations/standalone/tests/pageobjects/Detail.ts b/integrations/standalone/tests/pageobjects/Detail.ts
@@ -25,10 +25,6 @@ export class Detail {
     this.comment = new TextArea(this.locator, { label: 'Comment' });
   }
 
-  async expectTitle(title: string) {
-    await expect(this.title).toHaveText(title);
-  }
-
   async expectToBeDataClass() {
     await expect(this.classType.locator).not.toBeHidden();
     await expect(this.description.locator).not.toBeHidden();

diff --git a/packages/dataclass-editor/src/DataClassEditor.tsx b/packages/dataclass-editor/src/DataClassEditor.tsx
@@ -3,7 +3,7 @@ import { IvyIcons } from '@axonivy/ui-icons';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useEffect, useMemo, useState } from 'react';
 import type { DataClass } from './components/dataclass/data/dataclass';
-import { isEntityClass } from './components/dataclass/data/dataclass-utils';
+import { headerTitles } from './components/dataclass/data/dataclass-utils';
 import { DataClassDetailContent } from './components/dataclass/detail/DataClassDetailContent';
 import { FieldDetailContent } from './components/dataclass/detail/FieldDetailContent';
 import { DataClassMasterContent } from './components/dataclass/master/DataClassMasterContent';
@@ -71,14 +71,7 @@ function DataClassEditor(props: EditorProps) {
   }
 
   const dataClass = data.data;
-  const dataClassFields = dataClass.fields;
-
-  const title = isEntityClass(dataClass) ? 'Entity Class Editor' : 'Data Class Editor';
-  let detailTitle = title;
-  if (selectedField !== undefined && selectedField < dataClassFields.length) {
-    const selectedDataClassField = dataClassFields[selectedField];
-    detailTitle = 'Attribute - ' + selectedDataClassField.name;
-  }
+  const { masterTitle, detailTitle } = headerTitles(dataClass, selectedField);
 
   return (
     <AppProvider
@@ -94,7 +87,7 @@ function DataClassEditor(props: EditorProps) {
       <ResizablePanelGroup direction='horizontal' style={{ height: `100vh` }}>
         <ResizablePanel defaultSize={75} minSize={50} className='master-panel'>
           <Flex className='panel-content-container' direction='column'>
-            <DataClassMasterToolbar title={title} />
+            <DataClassMasterToolbar title={masterTitle} />
             <DataClassMasterContent />
           </Flex>
         </ResizablePanel>

diff --git a/packages/dataclass-editor/src/components/dataclass/data/dataclass-utils.test.ts b/packages/dataclass-editor/src/components/dataclass/data/dataclass-utils.test.ts
@@ -1,15 +1,68 @@
 import type { DataClass } from './dataclass';
-import { className, isEntityClass } from './dataclass-utils';
+import { className, classType, headerTitles } from './dataclass-utils';
 
-describe('isEntityClass', () => {
-  test('true', () => {
+describe('classType', () => {
+  test('data', () => {
+    const dataClass = {} as DataClass;
+    expect(classType(dataClass)).toEqual('DATA');
+  });
+
+  test('businessData', () => {
+    const dataClass = { isBusinessCaseData: true } as DataClass;
+    expect(classType(dataClass)).toEqual('BUSINESS_DATA');
+  });
+
+  test('entity', () => {
     const dataClass = { entity: {} } as DataClass;
-    expect(isEntityClass(dataClass)).toBeTruthy();
+    expect(classType(dataClass)).toEqual('ENTITY');
   });
+});
 
-  test('false', () => {
-    const dataClass = {} as DataClass;
-    expect(isEntityClass(dataClass)).toBeFalsy();
+describe('headerTitles', () => {
+  describe('title', () => {
+    test('data', () => {
+      const dataClass = {} as DataClass;
+      const { masterTitle } = headerTitles(dataClass);
+      expect(masterTitle).toEqual('Data Editor');
+    });
+
+    test('businessData', () => {
+      const dataClass = { isBusinessCaseData: true } as DataClass;
+      const { masterTitle } = headerTitles(dataClass);
+      expect(masterTitle).toEqual('Business Data Editor');
+    });
+
+    test('entity', () => {
+      const dataClass = { entity: {} } as DataClass;
+      const { masterTitle } = headerTitles(dataClass);
+      expect(masterTitle).toEqual('Entity Editor');
+    });
+  });
+
+  describe('detailTitle', () => {
+    test('data', () => {
+      const dataClass = { simpleName: 'DataClassName' } as DataClass;
+      const { detailTitle } = headerTitles(dataClass);
+      expect(detailTitle).toEqual('Data - DataClassName');
+    });
+
+    test('businessData', () => {
+      const dataClass = { simpleName: 'BusinessDataClassName', isBusinessCaseData: true } as DataClass;
+      const { detailTitle } = headerTitles(dataClass);
+      expect(detailTitle).toEqual('Business Data - BusinessDataClassName');
+    });
+
+    test('entity', () => {
+      const dataClass = { simpleName: 'EntityClassName', entity: {} } as DataClass;
+      const { detailTitle } = headerTitles(dataClass);
+      expect(detailTitle).toEqual('Entity - EntityClassName');
+    });
+
+    test('attribute', () => {
+      const dataClass = { fields: [{ name: 'FieldName0' }, { name: 'FieldName1' }] } as DataClass;
+      const { detailTitle } = headerTitles(dataClass, 1);
+      expect(detailTitle).toEqual('Attribute - FieldName1');
+    });
   });
 });
 

diff --git a/packages/dataclass-editor/src/components/dataclass/data/dataclass-utils.ts b/packages/dataclass-editor/src/components/dataclass/data/dataclass-utils.ts
@@ -1,7 +1,39 @@
 import type { DataClass } from './dataclass';
 
-export const isEntityClass = (dataClass: DataClass) => {
-  return !!dataClass.entity;
+export const classType = (dataClass: DataClass) => {
+  if (dataClass.entity) {
+    return 'ENTITY';
+  }
+  if (dataClass.isBusinessCaseData) {
+    return 'BUSINESS_DATA';
+  }
+  return 'DATA';
+};
+
+export const headerTitles = (dataClass: DataClass, selectedField?: number) => {
+  let baseTitle = '';
+  switch (classType(dataClass)) {
+    case 'DATA':
+      baseTitle = 'Data';
+      break;
+    case 'BUSINESS_DATA':
+      baseTitle = 'Business Data';
+      break;
+    case 'ENTITY':
+      baseTitle = 'Entity';
+  }
+  const masterTitle = `${baseTitle} Editor`;
+
+  const dataClassFields = dataClass.fields;
+
+  let detailTitle = '';
+  if (selectedField === undefined) {
+    detailTitle = `${baseTitle} - ${dataClass.simpleName}`;
+  } else if (selectedField < dataClassFields.length) {
+    const selectedDataClassField = dataClassFields[selectedField];
+    detailTitle = 'Attribute - ' + selectedDataClassField.name;
+  }
+  return { masterTitle, detailTitle };
 };
 
 export const className = (qualifiedName: string) => {

diff --git a/packages/dataclass-editor/src/components/dataclass/detail/DataClassDetailContent.tsx b/packages/dataclass-editor/src/components/dataclass/detail/DataClassDetailContent.tsx
@@ -1,13 +1,13 @@
 import { BasicField, Button, Flex, Textarea, ToggleGroup, ToggleGroupItem } from '@axonivy/ui-components';
 import { useState } from 'react';
 import { useAppContext } from '../../../context/AppContext';
-import { isEntityClass } from '../data/dataclass-utils';
+import { classType as getClassType } from '../data/dataclass-utils';
 import './DetailContent.css';
 
 export const DataClassDetailContent = () => {
   const { dataClass } = useAppContext();
 
-  const initialClassType = isEntityClass(dataClass) ? 'entity-class' : dataClass.isBusinessCaseData ? 'business-data-class' : 'data-class';
+  const initialClassType = getClassType(dataClass);
 
   const [classType, setClassType] = useState(initialClassType);
 
@@ -17,19 +17,19 @@ export const DataClassDetailContent = () => {
     <Flex direction='column' gap={4} className='detail-content'>
       <BasicField label='Class type'>
         <ToggleGroup type='single' className='class-type-group' value={classType} onValueChange={setClassType}>
-          <ToggleGroupItem value='data-class' asChild>
-            <Button variant={variant('data-class')} size='large'>
-              Data Class
+          <ToggleGroupItem value='DATA' asChild>
+            <Button variant={variant('DATA')} size='large'>
+              Data
             </Button>
           </ToggleGroupItem>
-          <ToggleGroupItem value='business-data-class' asChild>
-            <Button variant={variant('business-data-class')} size='large'>
-              Business Data Class
+          <ToggleGroupItem value='BUSINESS_DATA' asChild>
+            <Button variant={variant('BUSINESS_DATA')} size='large'>
+              Business Data
             </Button>
           </ToggleGroupItem>
-          <ToggleGroupItem value='entity-class' asChild>
-            <Button variant={variant('entity-class')} size='large'>
-              Entity Class
+          <ToggleGroupItem value='ENTITY' asChild>
+            <Button variant={variant('ENTITY')} size='large'>
+              Entity
             </Button>
           </ToggleGroupItem>
         </ToggleGroup>

diff --git a/packages/dataclass-editor/src/components/dataclass/master/DataClassMasterToolbar.tsx b/packages/dataclass-editor/src/components/dataclass/master/DataClassMasterToolbar.tsx
@@ -27,7 +27,7 @@ export const DataClassMasterToolbar = ({ title }: DataClassMasterToolbarProps) =
 
   return (
     <Toolbar className='master-toolbar'>
-      <ToolbarTitle>{title}</ToolbarTitle>
+      <ToolbarTitle className='master-header'>{title}</ToolbarTitle>
       <Flex gap={1}>
         {theme !== 'system' && (
           <Popover>