Beta

example-app/bin/setup-db.js

@@ -35,6 +35,7 @@ const setupDb = async () => {
 
   await Tool.create([...new Array(100)].map((el, index) => ({
     name: `tool ${index}`,
+    description: null,
   })))
 }
 

example-app/cypress/integration/nested/create-nested.spec.js

@@ -0,0 +1,19 @@
+/// <reference types="cypress" />
+/// <reference types="../../support" />
+
+context('resources/Nested/actions/new', () => {
+  before(() => {
+    cy.login()
+  })
+
+  beforeEach(() => {
+    Cypress.Cookies.preserveOnce(Cypress.env('COOKIE_NAME'))
+    cy.visit('resources/Nested/actions/new')
+  })
+
+  it('fills name when button is clicked', () => {
+    cy.get('[data-testid="name-button"]').click()
+    cy.get('[data-testid="property-edit-name"] input')
+      .should('have.value', 'my new name')
+  })
+})

example-app/cypress/integration/tools/create-tool.spec.js

@@ -12,11 +12,22 @@ context('resources/Tool/actions/new', () => {
   })
 
   it('creates new tool by hitting enter instead of clicking submit', () => {
+    cy.server()
+    cy.route({ method: 'POST', url: 'admin/api/resources/Tool/actions/new' })
+      .as('apiNew')
+
     const name = 'My Name'
     cy.get('[data-testid="property-edit-name"]').type(`${name}{enter}`)
 
+    cy.wait('@apiNew').then((xhr) => {
+      const { record } = xhr.response.body
+      expect(record.params.description).to.be.undefined
+      expect(record.params.name).to.eq(name)
+    })
+
     cy.location('pathname').should('eq', '/admin/resources/Tool')
 
+    // Remove the created record, because it brakes the pagination test otherwise.
     cy.get('td[data-property-name="name"]').contains(name).parents('tr')
       .find('[data-testid="actions-dropdown"]')
       .trigger('mouseover')

example-app/cypress/integration/tools/edit-tool.spec.js

@@ -0,0 +1,28 @@
+/// <reference types="cypress" />
+/// <reference types="../../support" />
+
+context('resources/Tool/actions/edit', () => {
+  before(() => {
+    cy.login()
+  })
+
+  beforeEach(() => {
+    Cypress.Cookies.preserveOnce(Cypress.env('COOKIE_NAME'))
+    cy.visit('resources/Tool')
+  })
+
+  it('leaves null value in description when it was not alter', () => {
+    cy.get('[data-testid="property-list-name"]').last().click()
+    cy.get('[data-testid="action-edit"]').click()
+
+    cy.server()
+    cy.route({ method: 'POST', url: 'admin/api/resources/Tool/records/*/edit' })
+      .as('apiEdit')
+    cy.get('button[type="submit"]').click()
+
+    cy.wait('@apiEdit').then((xhr) => {
+      const { record } = xhr.response.body
+      expect(record.params.description).to.eq(null)
+    })
+  })
+})

example-app/src/admin.options.js

@@ -12,6 +12,7 @@ const AdminTaggable = require('./taggables/taggable.admin')
 const AdminProfession = require('./professions/profession.admin')
 const AdminTool = require('./tools/tool.admin')
 const AdminPage = require('./pages/page.admin')
+const AdminNested = require('./nested/nested.admin')
 
 AdminBro.bundle('./components/sidebar-footer', 'SidebarFooter')
 AdminBro.bundle('./components/no-records', 'NoRecords')
@@ -27,6 +28,7 @@ const options = {
     AdminTool,
     AdminTaggable,
     AdminPage,
+    AdminNested,
   ],
   version: {
     admin: true,

example-app/src/nested/nested.admin.js

@@ -0,0 +1,18 @@
+const { default: AdminBro } = require('admin-bro')
+const { Nested } = require('./nested.entity')
+
+/** @type {import('admin-bro').ResourceOptions} */
+const options = {
+  properties: {
+    valueTrigger: {
+      components: {
+        edit: AdminBro.bundle('./value-trigger.component.tsx'),
+      },
+    },
+  },
+}
+
+module.exports = {
+  options,
+  resource: Nested,
+}

example-app/src/nested/nested.entity.js

@@ -0,0 +1,26 @@
+const mongoose = require('mongoose')
+
+const InnerElement = new mongoose.Schema({
+  name: {
+    type: String,
+    required: true,
+  },
+})
+
+const TopArrayElement = new mongoose.Schema({
+  innerObjects: {
+    type: [InnerElement],
+    required: true,
+  },
+})
+
+const NestedSchema = new mongoose.Schema({
+  name: {
+    type: String,
+  },
+  topObjects: [TopArrayElement],
+})
+
+const Nested = mongoose.model('Nested', NestedSchema)
+
+module.exports = { ToolSchema: NestedSchema, Nested }

example-app/src/nested/value-trigger.component.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { EditPropertyProps } from 'admin-bro'
+import { Button, Box } from '@admin-bro/design-system'
+
+const ValueTrigger: React.FC<EditPropertyProps> = (props) => {
+  const { onChange, record } = props
+
+  const handleClick = (): void => {
+    onChange({
+      ...record,
+      params: {
+        ...record.params,
+        name: 'my new name',
+      },
+    })
+  }
+
+  return (
+    <Box mb="xxl">
+      <Button data-testid="name-button" type="button" onClick={handleClick}>Set Name</Button>
+    </Box>
+  )
+}
+
+export default ValueTrigger

package.json

@@ -1,6 +1,6 @@
 {
   "name": "admin-bro",
-  "version": "3.0.1",
+  "version": "3.1.0-beta.4",
   "description": "Admin panel for apps written in node.js",
   "main": "index.js",
   "types": "index.d.ts",

spec/backend/helpers/resource-stub.ts

@@ -4,11 +4,46 @@ import BaseProperty from '../../../src/backend/adapters/base-property'
 import BaseResource from '../../../src/backend/adapters/base-resource'
 import ResourceDecorator from '../../../src/backend/decorators/resource-decorator'
 
+/**
+ * returns properties with following absolute paths:
+ * - normal: number
+ * - nested: mixed
+ * - nested.normal: string
+ * - nested.nested: mixed
+ * - nested.nested.normalInner: string
+ * - arrayed: string (array)
+ * - arrayedMixed: mixed (array)
+ * - arrayedMixed.arrayParam: string
+ *
+ * @private
+ */
+const buildProperties = (): Array<BaseProperty> => {
+  const normalProperty = new BaseProperty({ path: 'normal', type: 'number' }) as any
+  const nestedProperty = new BaseProperty({ path: 'nested', type: 'mixed' }) as any
+  const nested2Property = new BaseProperty({ path: 'nested', type: 'mixed' }) as any
+  const arrayProperty = new BaseProperty({ path: 'arrayed', type: 'string' }) as any
+  const arrayMixedProperty = new BaseProperty({ path: 'arrayedMixed', type: 'mixed' }) as any
+  arrayProperty.isArray = (): boolean => true
+  arrayMixedProperty.isArray = (): boolean => true
+
+  nestedProperty.subProperties = (): Array<BaseProperty> => [
+    new BaseProperty({ path: 'normal', type: 'string' }),
+    nested2Property,
+  ]
+  nested2Property.subProperties = (): Array<BaseProperty> => [
+    new BaseProperty({ path: 'normalInner', type: 'string' }),
+  ]
+  arrayMixedProperty.subProperties = (): Array<BaseProperty> => [
+    new BaseProperty({ path: 'arrayParam', type: 'string' }),
+  ]
+
+  return [normalProperty, nestedProperty, arrayProperty, arrayMixedProperty]
+}
+
+
 export const expectedResult = {
   id: 'someID',
-  properties: [...Array(10)].map((a, i) => new BaseProperty({
-    path: `property.${i}`, type: 'string',
-  })),
+  properties: buildProperties(),
   resourceName: 'resourceName',
   databaseName: 'databaseName',
   databaseType: 'mongodb',

src/admin-bro.ts

@@ -27,7 +27,7 @@ import { OverridableComponent } from './frontend/utils/overridable-component'
 const pkg = JSON.parse(fs.readFileSync(path.join(__dirname, '../package.json'), 'utf-8'))
 export const VERSION = pkg.version
 
-const defaults: AdminBroOptionsWithDefault = {
+export const defaultOptions: AdminBroOptionsWithDefault = {
   rootPath: DEFAULT_PATHS.rootPath,
   logoutPath: DEFAULT_PATHS.logoutPath,
   loginPath: DEFAULT_PATHS.loginPath,
@@ -160,7 +160,7 @@ class AdminBro {
      * @type {AdminBroOptions}
      * @description Options given by a user
      */
-    this.options = _.merge({}, defaults, options)
+    this.options = _.merge({}, defaultOptions, options)
 
     this.initI18n()
 

src/backend/decorators/property-decorator.ts

@@ -22,7 +22,7 @@ class PropertyDecorator {
    * This path serves as a key in {@link PropertyOptions} to identify which
    * property has to be updated
    */
-  private path: string
+  public path: string
 
   private _admin: AdminBro
 
@@ -202,6 +202,15 @@ class PropertyDecorator {
     return !!this.overrideFromOptions(AvailablePropertyOptions.isTitle)
   }
 
+  /**
+   * If property should be disabled in the UI
+   *
+   * @return  {boolean}
+   */
+  isDisabled(): boolean {
+    return !!this.options.isDisabled
+  }
+
   /**
    * Returns JSON representation of a property
    *
@@ -219,7 +228,7 @@ class PropertyDecorator {
       isRequired: this.isRequired(),
       availableValues: this.availableValues(),
       name: this.name(),
-      isDisabled: !!this.options.isDisabled,
+      isDisabled: this.isDisabled(),
       label: this.label(),
       type: this.type(),
       reference: this.property.reference(),