Merge pull request #106 from axonivy/hide-type-on-hd

XIVY-15662 Hide type switch on hd data editor
axonivy · Dec 20, 2024 · 2d27199 · 2d27199
2 parents 62c16af + 4d1049c
commit 2d27199
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 10 deletions.
diff --git a/packages/dataclass-editor/src/context/AppContext.tsx b/packages/dataclass-editor/src/context/AppContext.tsx
@@ -26,7 +26,8 @@ const appContext = createContext<AppContext>({
 export const AppProvider = appContext.Provider;
 
 export const useAppContext = () => {
-  return useContext(appContext);
+  const context = useContext(appContext);
+  return { ...context, isHdData: context.context.file.includes('src_hd') };
 };
 
 type EntityClassContext = {

diff --git a/packages/dataclass-editor/src/context/test-utils/test-utils.tsx b/packages/dataclass-editor/src/context/test-utils/test-utils.tsx
@@ -30,7 +30,7 @@ type ContextHelperProps = {
 
 const ContextHelper = (props: ContextHelperProps & { children: ReactNode }) => {
   const appContext = {
-    context: props.appContext?.context ?? ({} as DataClassEditorDataContext),
+    context: props.appContext?.context ?? ({ file: '' } as DataClassEditorDataContext),
     dataClass: props.appContext?.dataClass ?? ({} as DataClass),
     setDataClass: props.appContext?.setDataClass ?? (() => {}),
     selectedField: props.appContext?.selectedField,

diff --git a/packages/dataclass-editor/src/detail/dataclass/DataClassDetailContent.tsx b/packages/dataclass-editor/src/detail/dataclass/DataClassDetailContent.tsx
@@ -8,7 +8,7 @@ import { EntityClassDatabaseTable } from './entity/EntityClassDatabaseTable';
 import { useDataClassProperty } from './useDataClassProperty';
 
 export const DataClassDetailContent = () => {
-  const { dataClass, setDataClass } = useAppContext();
+  const { dataClass, setDataClass, isHdData } = useAppContext();
   const { setProperty } = useDataClassProperty();
 
   return (
@@ -22,7 +22,7 @@ export const DataClassDetailContent = () => {
               annotations={dataClass.annotations}
               setAnnotations={(newAnnotations: Array<string>) => setProperty('annotations', newAnnotations)}
             />
-            <DataClassType />
+            {!isHdData && <DataClassType />}
           </Flex>
         </AccordionContent>
       </AccordionItem>

diff --git a/packages/dataclass-editor/src/detail/field/FieldDetailContent.tsx b/packages/dataclass-editor/src/detail/field/FieldDetailContent.tsx
@@ -7,8 +7,10 @@ import { FieldEntityDatabaseField } from './entity/FieldEntityDatabaseField';
 import { FieldNameTypeComment } from './FieldNameTypeComment';
 import { FieldProperties } from './FieldProperties';
 import { useFieldProperty } from './useFieldProperty';
+import { useAppContext } from '../../context/AppContext';
 
 export const FieldDetailContent = () => {
+  const { isHdData } = useAppContext();
   const { field, setField } = useField();
   const { setProperty } = useFieldProperty();
 
@@ -19,7 +21,7 @@ export const FieldDetailContent = () => {
         <AccordionContent>
           <Flex direction='column' gap={4}>
             <FieldNameTypeComment />
-            <FieldProperties />
+            {!isHdData && <FieldProperties />}
             <AnnotationsTable
               annotations={field.annotations}
               setAnnotations={(annotations: Array<string>) => setProperty('annotations', annotations)}

diff --git a/packages/dataclass-editor/src/master/DataClassMasterToolbar.tsx b/packages/dataclass-editor/src/master/DataClassMasterToolbar.tsx
@@ -23,17 +23,16 @@ type DataClassMasterToolbarProps = {
 };
 
 export const DataClassMasterToolbar = ({ title }: DataClassMasterToolbarProps) => {
-  const { context, detail, setDetail } = useAppContext();
+  const { detail, setDetail, isHdData } = useAppContext();
   const { theme, setTheme, disabled } = useTheme();
-  const isFormData = context.file.includes('src_hd');
   const openForm = useAction('openForm');
   const openProcess = useAction('openProcess');
 
   return (
     <Toolbar className='master-toolbar'>
       <ToolbarTitle className='master-header'>{title}</ToolbarTitle>
       <Flex gap={1}>
-        {isFormData && (
+        {isHdData && (
           <>
             <Button icon={IvyIcons.File} size='large' title='Open Form' aria-label='Open Form' onClick={() => openForm()} />
             <Button icon={IvyIcons.Process} size='large' title='Open Process' aria-label='Open Process' onClick={() => openProcess()} />

diff --git a/...tests/integration/jump-to-editors.spec.ts → ...t/tests/integration/hidden-fields.spec.ts b/...tests/integration/jump-to-editors.spec.ts → ...t/tests/integration/hidden-fields.spec.ts
@@ -1,16 +1,22 @@
 import { expect, test } from '@playwright/test';
 import { DataClassEditor } from '../pageobjects/DataClassEditor';
 
-test('not visible in normal data class', async ({ page }) => {
+test('normal data class', async ({ page }) => {
   const editor = await DataClassEditor.openDataClass(page, 'dataclasses/dataclass/Data.d.json');
   await expect(editor.title).toHaveText('Data Class - Data');
   await expect(editor.toolbar.getByRole('button', { name: 'Open Process' })).toBeHidden();
   await expect(editor.toolbar.getByRole('button', { name: 'Open Form' })).toBeHidden();
 });
 
-test('visible in form data class', async ({ page }) => {
+test('hd data class', async ({ page }) => {
   const editor = await DataClassEditor.openDataClass(page, 'src_hd/dataclass/form/formData.d.json');
   await expect(editor.title).toHaveText('Data Class - formData');
   await expect(editor.toolbar.getByRole('button', { name: 'Open Process' })).toBeVisible();
   await expect(editor.toolbar.getByRole('button', { name: 'Open Form' })).toBeVisible();
+
+  await editor.detailToggle.locator.click();
+  await expect(editor.detail.dataClass.general.classType.collapsible.locator).toBeHidden();
+
+  await editor.table.row(0).locator.click();
+  await expect(editor.detail.field.general.properties.collapsible.locator).toBeHidden();
 });