feat: advanced fields

SenseNet · May 22, 2024 · 2d65bfa · 2d65bfa
1 parent 4abbeec
commit 2d65bfa
Show file tree

Hide file tree

Showing 7 changed files with 227 additions and 13 deletions.
diff --git a/packages/sn-authentication-oidc-react/src/components/session-lost.tsx b/packages/sn-authentication-oidc-react/src/components/session-lost.tsx
@@ -1,6 +1,6 @@
 import { Button, Container, Typography } from '@material-ui/core'
 import { History } from 'history'
-import React, { ElementType } from 'react'
+import React from 'react'
 import { getUserManager } from '../authentication-service'
 import { authenticateUser } from '../oidc-service'
 
@@ -20,7 +20,7 @@ export const SessionLost = ({ onAuthenticate }: SessionLostProps) => (
 
 type SessionLostContainerProps = {
   history: History
-  SessionLostComponentOverride?: ElementType<SessionLostProps>
+  SessionLostComponentOverride?: any
 }
 
 export const SessionLostContainer = ({ history, SessionLostComponentOverride }: SessionLostContainerProps) => {

diff --git a/packages/sn-controls-react/src/viewcontrols/browse-view.tsx b/packages/sn-controls-react/src/viewcontrols/browse-view.tsx
@@ -141,7 +141,7 @@ export const BrowseView: React.FC<BrowseViewProps> = (props) => {
           .map((field) => renderField(field))}
 
         {advancedFields.length > 0 && (
-          <>
+          <Box data-test="advanced-field-container">
             <Box className={classes.divider} />
             <Box className={classes.advancedFieldContainer}>
               <Box className={classes.advancedFieldBox}>
@@ -156,7 +156,7 @@ export const BrowseView: React.FC<BrowseViewProps> = (props) => {
                 .filter((i) => advancedFields.includes(i.fieldSettings.Name))
                 .sort((item1, item2) => (item2.fieldSettings.FieldIndex || 0) - (item1.fieldSettings.FieldIndex || 0))
                 .map((field) => renderField(field))}
-          </>
+          </Box>
         )}
       </Grid>
 

diff --git a/packages/sn-controls-react/src/viewcontrols/edit-view.tsx b/packages/sn-controls-react/src/viewcontrols/edit-view.tsx
@@ -201,7 +201,7 @@ export const EditView: React.FC<EditViewProps> = (props) => {
           .map((field) => renderField(field))}
 
         {advancedFields.length > 0 && (
-          <>
+          <Box data-test="advanced-field-container">
             <Box className={classes.divider} />
             <Box className={classes.advancedFieldContainer}>
               <Box className={classes.advancedFieldBox}>
@@ -216,7 +216,7 @@ export const EditView: React.FC<EditViewProps> = (props) => {
                 .filter((i) => advancedFields.includes(i.fieldSettings.Name))
                 .sort((item1, item2) => (item2.fieldSettings.FieldIndex || 0) - (item1.fieldSettings.FieldIndex || 0))
                 .map((field) => renderField(field))}
-          </>
+          </Box>
         )}
       </Grid>
       <div className={classes.actionButtonWrapper}>

diff --git a/packages/sn-controls-react/test/__mocks__/schema.ts b/packages/sn-controls-react/test/__mocks__/schema.ts
@@ -463,7 +463,73 @@ export const schema = [
     Description: '$Ctd-GenericContent,Description',
     Icon: 'Content',
     AllowedChildTypes: [],
-    HandlerName: 'a',
-    FieldSettings: []
-  }
+    HandlerName: 'Handlers.TestContentTypeHandler',
+    FieldSettings: [
+      {
+        Type: 'ShortTextFieldSetting',
+        Name: 'NonAdvanced1',
+        FieldClassName: 'SenseNet.ContentRepository.Fields.ShortTextField',
+        DisplayName: 'Non advanced field #3',
+        Description: '',
+        ReadOnly: false,
+        Compulsory: false,
+        VisibleBrowse: FieldSettings.FieldVisibility.Show,
+        VisibleEdit: FieldSettings.FieldVisibility.Show,
+        VisibleNew: FieldSettings.FieldVisibility.Show,
+        ControlHint: 'sn:ColorPicker',
+      } as FieldSettings.ShortTextFieldSetting,
+      {
+        Type: 'ShortTextFieldSetting',
+        Name: 'NonAdvanced2',
+        FieldClassName: 'SenseNet.ContentRepository.Fields.ShortTextField',
+        DisplayName: 'Non advanced field #3',
+        Description: '',
+        ReadOnly: false,
+        Compulsory: false,
+        VisibleBrowse: FieldSettings.FieldVisibility.Show,
+        VisibleEdit: FieldSettings.FieldVisibility.Show,
+        VisibleNew: FieldSettings.FieldVisibility.Show,
+        ControlHint: 'sn:ColorPicker',
+      } as FieldSettings.ShortTextFieldSetting,
+      {
+        Type: 'DateTimeFieldSetting',
+        DateTimeMode: FieldSettings.DateTimeMode.DateAndTime,
+        Name: 'NonAdvanced3',
+        FieldClassName: 'SenseNet.ContentRepository.Fields.DateTimeField',
+        DisplayName: 'Non advanced field #3',
+        Description: 'Content was last modified on this date.',
+        ReadOnly: false,
+        Compulsory: false,
+        VisibleBrowse: FieldSettings.FieldVisibility.Show,
+        VisibleEdit: FieldSettings.FieldVisibility.Show,
+        VisibleNew: FieldSettings.FieldVisibility.Show,
+      } as FieldSettings.DateTimeFieldSetting,
+      {
+        Type: 'ShortTextFieldSetting',
+        Name: 'Advanced1',
+        FieldClassName: 'SenseNet.ContentRepository.Fields.ShortTextField',
+        DisplayName: 'Advanced field #1',
+        Description: '',
+        ReadOnly: false,
+        Compulsory: false,
+        VisibleBrowse: FieldSettings.FieldVisibility.Advanced,
+        VisibleEdit: FieldSettings.FieldVisibility.Advanced,
+        VisibleNew: FieldSettings.FieldVisibility.Advanced,
+        ControlHint: 'sn:ColorPicker',
+      } as FieldSettings.ShortTextFieldSetting,
+      {
+        Type: 'DateTimeFieldSetting',
+        DateTimeMode: FieldSettings.DateTimeMode.DateAndTime,
+        Name: 'Advanced2',
+        FieldClassName: 'SenseNet.ContentRepository.Fields.DateTimeField',
+        DisplayName: 'Advanced field #2',
+        Description: 'Content was last modified on this date.',
+        ReadOnly: false,
+        Compulsory: false,
+        VisibleBrowse: FieldSettings.FieldVisibility.Advanced,
+        VisibleEdit: FieldSettings.FieldVisibility.Advanced,
+        VisibleNew: FieldSettings.FieldVisibility.Advanced,
+      } as FieldSettings.DateTimeFieldSetting,
+    ],
+  },
 ]
diff --git a/packages/sn-controls-react/test/browse-view.test.tsx b/packages/sn-controls-react/test/browse-view.test.tsx
@@ -1,6 +1,7 @@
+import { IconButton } from '@material-ui/core'
 import { Repository } from '@sensenet/client-core'
 import { GenericContent, VersioningMode } from '@sensenet/default-content-types'
-import { mount } from 'enzyme'
+import { mount, shallow } from 'enzyme'
 import React from 'react'
 import { act } from 'react-dom/test-utils'
 import {
@@ -53,6 +54,18 @@ export const testFile: GenericContent = {
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec iaculis lectus, sed blandit urna. Nullam in auctor odio, eu eleifend diam. Curabitur rutrum ullamcorper nunc, sit amet consectetur turpis elementum ac. Aenean lorem lorem, feugiat sit amet sem at, accumsan cursus leo.',
 }
 
+export const testContent: GenericContent = {
+  Id: 1,
+  Name: 'TestContent',
+  DisplayName: 'Test content',
+  Path: '/Root/Content/TestContent',
+  Type: 'TestContentType',
+  Index: 42,
+  VersioningMode: [VersioningMode.Option0],
+  AllowedChildTypes: [1, 2],
+  Description: 'Lorem ipsum short description.',
+}
+
 describe('Browse view component', () => {
   afterAll(() => {
     // Restore console.errors
@@ -84,4 +97,42 @@ describe('Browse view component', () => {
     expect(wrapper.find(Avatar)).toHaveLength(1)
     expect(wrapper.find(ColorPicker)).toHaveLength(2)
   })
+
+  //Advanced field tests
+  it('Advanced field header should be visible', () => {
+    const wrapper = mount(<BrowseView content={testContent} repository={testRepository} />)
+    wrapper.update()
+
+    const element = wrapper.find('[data-test="advanced-field-container"]')
+    expect(element.exists()).toBe(true)
+
+    wrapper.unmount()
+  })
+  it('Advanced fields should be invisible by default', () => {
+    const wrapper = shallow(<BrowseView content={testContent} repository={testRepository} />)
+    const element = wrapper.find('[data-test="advanced-field-container"]')
+    expect(element.find(DatePicker).exists()).toBe(false)
+    expect(element.find(ShortText).exists()).toBe(false)
+  })
+  it('Advanced fields should be visible after clicking on show icon', () => {
+    const wrapper = shallow(<BrowseView content={testContent} repository={testRepository} />)
+    wrapper.update()
+
+    wrapper.find('[data-test="advanced-field-container"]').find(IconButton).simulate('click')
+    wrapper.update()
+
+    const element = wrapper.find('[data-test="advanced-field-container"]')
+    expect(element.find(DatePicker).exists()).toBe(true)
+    expect(element.find(ShortText).exists()).toBe(true)
+  })
+  it('Should render advanced fields in the right section', async () => {
+    const wrapper = mount(<BrowseView content={testContent} repository={testRepository} />)
+    wrapper.update()
+
+    const parent = wrapper.find('[data-test="advanced-field-container"]')
+    expect(parent.find(DatePicker)).toHaveLength(1)
+    expect(parent.find(ShortText)).toHaveLength(1)
+
+    wrapper.unmount()
+  })
 })
diff --git a/packages/sn-controls-react/test/edit-view.test.tsx b/packages/sn-controls-react/test/edit-view.test.tsx
@@ -1,7 +1,9 @@
+import { IconButton } from '@material-ui/core'
 import { Repository } from '@sensenet/client-core'
 import { GenericContent, VersioningMode } from '@sensenet/default-content-types'
-import { shallow } from 'enzyme'
+import { mount, ReactWrapper, shallow } from 'enzyme'
 import React from 'react'
+import { act } from 'react-dom/test-utils'
 import {
   AllowedChildTypes,
   AutoComplete,
@@ -44,6 +46,18 @@ export const testFile: GenericContent = {
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec iaculis lectus, sed blandit urna. Nullam in auctor odio, eu eleifend diam. Curabitur rutrum ullamcorper nunc, sit amet consectetur turpis elementum ac. Aenean lorem lorem, feugiat sit amet sem at, accumsan cursus leo.',
 }
 
+export const testContent: GenericContent = {
+  Id: 1,
+  Name: 'TestContent',
+  DisplayName: 'Test content',
+  Path: '/Root/Content/TestContent',
+  Type: 'TestContentType',
+  Index: 42,
+  VersioningMode: [VersioningMode.Option0],
+  AllowedChildTypes: [1, 2],
+  Description: 'Lorem ipsum short description.',
+}
+
 describe('Edit view component', () => {
   it('should render all components', () => {
     const wrapper = shallow(<EditView repository={testRepository} content={testFile} contentTypeName={testFile.Type} />)
@@ -76,4 +90,49 @@ describe('Edit view component', () => {
     wrapper.find('[component="form"]').simulate('submit', { preventDefault: jest.fn() })
     expect(onSubmit).toBeCalledWith({ VersioningMode: '1' }, 'GenericContent')
   })
+  //Advanced field tests
+  it('Advanced field header should be visible', () => {
+    const wrapper = mount(
+      <EditView repository={testRepository} content={testContent} contentTypeName={testContent.Type} />,
+    )
+    wrapper.update()
+
+    const element = wrapper.find('[data-test="advanced-field-container"]')
+    expect(element.exists()).toBe(true)
+
+    wrapper.unmount()
+  })
+  it('Advanced fields should be invisible by default', () => {
+    const wrapper = shallow(
+      <EditView repository={testRepository} content={testContent} contentTypeName={testContent.Type} />,
+    )
+    const element = wrapper.find('[data-test="advanced-field-container"]')
+    expect(element.find(DatePicker).exists()).toBe(false)
+    expect(element.find(ShortText).exists()).toBe(false)
+  })
+  it('Advanced fields should be visible after clicking on show icon', () => {
+    const wrapper = shallow(
+      <EditView repository={testRepository} content={testContent} contentTypeName={testContent.Type} />,
+    )
+    wrapper.update()
+
+    wrapper.find('[data-test="advanced-field-container"]').find(IconButton).simulate('click')
+    wrapper.update()
+
+    const element = wrapper.find('[data-test="advanced-field-container"]')
+    expect(element.find(DatePicker).exists()).toBe(true)
+    expect(element.find(ShortText).exists()).toBe(true)
+  })
+  it('Should render advanced fields in the right section', async () => {
+    const wrapper = mount(
+      <EditView repository={testRepository} content={testContent} contentTypeName={testContent.Type} />,
+    )
+    wrapper.update()
+
+    const parent = wrapper.find('[data-test="advanced-field-container"]')
+    expect(parent.find(DatePicker)).toHaveLength(1)
+    expect(parent.find(ShortText)).toHaveLength(1)
+
+    wrapper.unmount()
+  })
 })
diff --git a/packages/sn-controls-react/test/new-view.test.tsx b/packages/sn-controls-react/test/new-view.test.tsx
@@ -1,7 +1,8 @@
+import { IconButton } from '@material-ui/core'
 import Typography from '@material-ui/core/Typography'
 import { Repository } from '@sensenet/client-core'
 import { GenericContent, VersioningMode } from '@sensenet/default-content-types'
-import { shallow } from 'enzyme'
+import { mount, shallow } from 'enzyme'
 import React from 'react'
 import {
   AllowedChildTypes,
@@ -73,11 +74,48 @@ describe('New view component', () => {
   it('should handle change', () => {
     const onSubmit = jest.fn()
     const wrapper = shallow(
-      <NewView repository={testRepository} onSubmit={onSubmit} contentTypeName="GenericContent" />,
+      <NewView repository={testRepository} showTitle={true} contentTypeName="GenericContent" />,
     ).dive()
     const onChange = wrapper.find(CheckboxGroup).first().prop('fieldOnChange')
     onChange?.('VersioningMode', VersioningMode.Option1)
     wrapper.find('[component="form"]').simulate('submit', { preventDefault: jest.fn() })
     expect(onSubmit).toBeCalledWith({ VersioningMode: '1' }, 'GenericContent')
   })
+  //Advanced field tests
+  it('Advanced field header should be visible', () => {
+    const wrapper = mount(<NewView repository={testRepository} showTitle={true} contentTypeName="TestContentType" />)
+    wrapper.update()
+
+    const element = wrapper.find('[data-test="advanced-field-container"]')
+    expect(element.exists()).toBe(true)
+
+    wrapper.unmount()
+  })
+  it('Advanced fields should be invisible by default', () => {
+    const wrapper = shallow(<NewView repository={testRepository} showTitle={true} contentTypeName="TestContentType" />)
+    const element = wrapper.find('[data-test="advanced-field-container"]')
+    expect(element.find(DatePicker).exists()).toBe(false)
+    expect(element.find(ShortText).exists()).toBe(false)
+  })
+  it('Advanced fields should be visible after clicking on show icon', () => {
+    const wrapper = shallow(<NewView repository={testRepository} showTitle={true} contentTypeName="TestContentType" />)
+    wrapper.update()
+
+    wrapper.find('[data-test="advanced-field-container"]').find(IconButton).simulate('click')
+    wrapper.update()
+
+    const element = wrapper.find('[data-test="advanced-field-container"]')
+    expect(element.find(DatePicker).exists()).toBe(true)
+    expect(element.find(ShortText).exists()).toBe(true)
+  })
+  it('Should render advanced fields in the right section', async () => {
+    const wrapper = mount(<NewView repository={testRepository} showTitle={true} contentTypeName="TestContentType" />)
+    wrapper.update()
+
+    const parent = wrapper.find('[data-test="advanced-field-container"]')
+    expect(parent.find(DatePicker)).toHaveLength(1)
+    expect(parent.find(ShortText)).toHaveLength(1)
+
+    wrapper.unmount()
+  })
 })