Merge pull request #265 from hypermedia-app/add-object-with-editor

Add object with overrides

.changeset/cool-eels-mate.md

@@ -0,0 +1,5 @@
+---
+"@hydrofoil/shaperone-wc-shoelace": patch
+---
+
+Extends property renderer to support overriding the controls to add new object

.changeset/dirty-years-juggle.md

@@ -0,0 +1,7 @@
+---
+"@hydrofoil/shaperone-core": patch
+"@hydrofoil/shaperone-wc": patch
+---
+
+When adding a new object for a property, it should is now possible to override the `nodeKind` to 
+select

.changeset/twenty-candles-mate.md

@@ -0,0 +1,6 @@
+---
+"@hydrofoil/shaperone-core": patch
+"@hydrofoil/shaperone-wc": patch
+---
+
+When adding a new object for a property, it should is now possible to override the `editor` to select

packages/core-tests/models/forms/effects/addObject.test.ts

@@ -9,6 +9,7 @@ import { addObject } from '@hydrofoil/shaperone-core/models/forms/effects/addObj
 import { Store } from '@hydrofoil/shaperone-core/state'
 import { SingleEditorMatch } from '@hydrofoil/shaperone-core/models/editors'
 import { propertyShape } from '@shaperone/testing/util.js'
+import { sh } from '@tpluscode/rdf-ns-builders'
 
 describe('models/forms/effects/addObject', () => {
   let store: Store
@@ -34,6 +35,8 @@ describe('models/forms/effects/addObject', () => {
       form,
       property,
       focusNode,
+      editor: undefined,
+      nodeKind: undefined,
     })
 
     // then
@@ -47,6 +50,33 @@ describe('models/forms/effects/addObject', () => {
     }))
   })
 
+  it('sets nodeKind to state', () => {
+    // given
+    const property = propertyShape()
+    const focusNode = cf({ dataset: $rdf.dataset() }).blankNode()
+    const editors: SingleEditorMatch[] = [{
+      term: dash.TextFieldEditor,
+      score: 5,
+      meta: <any> {},
+    }]
+    store.getState().editors.matchSingleEditors = () => editors
+
+    // when
+    addObject(store)({
+      form,
+      property,
+      focusNode,
+      editor: undefined,
+      nodeKind: sh.IRI,
+    })
+
+    // then
+    const dispatch = store.getDispatch()
+    expect(dispatch.forms.addFormField).to.have.been.calledWith(sinon.match({
+      nodeKind: sh.IRI,
+    }))
+  })
+
   it('takes property editor as default match', () => {
     // given
     const property = propertyShape({
@@ -64,6 +94,8 @@ describe('models/forms/effects/addObject', () => {
       form,
       property,
       focusNode,
+      editor: undefined,
+      nodeKind: undefined,
     })
 
     // then
@@ -75,4 +107,93 @@ describe('models/forms/effects/addObject', () => {
       selectedEditor: dash.FooEditor,
     }))
   })
+
+  context('with editor argument', () => {
+    it('sets selected editor', () => {
+      // given
+      const property = propertyShape({
+        editor: dash.FooEditor,
+      })
+      const focusNode = cf({ dataset: $rdf.dataset() }).blankNode()
+      store.getState().editors.matchSingleEditors = () => [{
+        term: dash.TextFieldEditor,
+        score: 5,
+        meta: <any> {},
+      }]
+
+      // when
+      addObject(store)({
+        form,
+        property,
+        focusNode,
+        editor: dash.BarEditor,
+        nodeKind: undefined,
+      })
+
+      // then
+      const dispatch = store.getDispatch()
+      expect(dispatch.forms.addFormField).to.have.been.calledWith(sinon.match({
+        selectedEditor: dash.BarEditor,
+      }))
+    })
+
+    it('add editor to array', () => {
+      // given
+      const property = propertyShape({
+        editor: dash.FooEditor,
+      })
+      const focusNode = cf({ dataset: $rdf.dataset() }).blankNode()
+      store.getState().editors.matchSingleEditors = () => [{
+        term: dash.TextFieldEditor,
+        score: 5,
+        meta: <any> {},
+      }]
+
+      // when
+      addObject(store)({
+        form,
+        property,
+        focusNode,
+        editor: dash.BarEditor,
+        nodeKind: undefined,
+      })
+
+      // then
+      const dispatch = store.getDispatch()
+      expect(dispatch.forms.addFormField).to.have.been.calledWith(sinon.match({
+        editors: sinon.match.some(sinon.match({
+          term: dash.BarEditor,
+          score: null,
+        })),
+      }))
+    })
+
+    it('does not add editor to array if its already a match', () => {
+      // given
+      const property = propertyShape({
+        editor: dash.FooEditor,
+      })
+      const focusNode = cf({ dataset: $rdf.dataset() }).blankNode()
+      store.getState().editors.matchSingleEditors = () => [{
+        term: dash.TextFieldEditor,
+        score: 5,
+        meta: <any> {},
+      }]
+
+      // when
+      addObject(store)({
+        form,
+        property,
+        focusNode,
+        editor: dash.TextFieldEditor,
+        nodeKind: undefined,
+      })
+
+      // then
+      const dispatch = store.getDispatch()
+      expect(dispatch.forms.addFormField).to.have.been.calledWith(sinon.match({
+        editors: sinon.match.has('length', 2),
+      }))
+    })
+  })
 })

packages/core-tests/models/forms/reducers/addFormField.test.ts

@@ -7,6 +7,7 @@ import { dash } from '@tpluscode/rdf-ns-builders/loose'
 import { testFocusNodeState, testPropertyState, testStore } from '@shaperone/testing/models/form.js'
 import { addFormField } from '@hydrofoil/shaperone-core/models/forms/reducers/addFormField.js'
 import { propertyShape } from '@shaperone/testing/util.js'
+import { sh } from '@tpluscode/rdf-ns-builders'
 
 const ex = ns('http://example.com/')
 
@@ -40,6 +41,7 @@ describe('core/models/forms/reducers/addObject', () => {
       focusNode,
       editors: [],
       selectedEditor: undefined,
+      nodeKind: undefined,
     })
 
     // then
@@ -76,6 +78,7 @@ describe('core/models/forms/reducers/addObject', () => {
       focusNode,
       editors: [],
       selectedEditor: undefined,
+      nodeKind: undefined,
     })
 
     // then
@@ -112,6 +115,7 @@ describe('core/models/forms/reducers/addObject', () => {
       focusNode,
       editors: [],
       selectedEditor: undefined,
+      nodeKind: undefined,
     })
 
     // then
@@ -147,13 +151,50 @@ describe('core/models/forms/reducers/addObject', () => {
       focusNode,
       editors: [],
       selectedEditor: undefined,
+      nodeKind: undefined,
     })
 
     // then
     const { focusNodes: { [ex.FocusNode.value]: fooState } } = after.get(form)!
     expect(fooState.properties[0].objects[0].editorSwitchDisabled).to.be.true
   })
 
+  it('adds state with passed nodeKind', () => {
+    // given
+    const graph = cf({ dataset: $rdf.dataset() })
+    const property = propertyShape(graph.blankNode(), {
+      path: ex.prop,
+    })
+    const focusNode = graph.node(ex.FocusNode)
+    const { form, store } = testStore()
+    const { forms } = store.getState()
+
+    forms.get(form)!.focusNodes = testFocusNodeState(focusNode, {
+      properties: [testPropertyState(focusNode.blankNode(), {
+        canRemove: true,
+        canAdd: true,
+        name: 'prop',
+        shape: property,
+        selectedEditor: undefined,
+        objects: [],
+      })],
+    })
+
+    // when
+    const after = addFormField(forms, {
+      form,
+      property,
+      focusNode,
+      editors: [],
+      selectedEditor: undefined,
+      nodeKind: sh.IRIOrLiteral,
+    })
+
+    // then
+    const { focusNodes: { [ex.FocusNode.value]: fooState } } = after.get(form)!
+    expect(fooState.properties[0].objects[0].nodeKind).to.deep.eq(sh.IRIOrLiteral)
+  })
+
   it('initializes with state with preferred editor and adds it as first choice', () => {
     // given
     const graph = cf({ dataset: $rdf.dataset() })
@@ -191,6 +232,7 @@ describe('core/models/forms/reducers/addObject', () => {
         meta: {} as any,
       }],
       selectedEditor: dash.FooEditor,
+      nodeKind: undefined,
     })
 
     // then

packages/core-tests/models/forms/reducers/selectEditor.test.ts

@@ -50,6 +50,7 @@ describe('core/models/forms/reducers/selectEditor', () => {
         componentState: {},
         validationResults: [],
         hasErrors: false,
+        nodeKind: undefined,
       },
     })
 
@@ -83,6 +84,7 @@ describe('core/models/forms/reducers/selectEditor', () => {
         componentState: { foo: 'bar' },
         validationResults: [],
         hasErrors: false,
+        nodeKind: undefined,
       },
     })
 

packages/core-tests/models/resources/effects/forms/addFormField.test.ts

@@ -43,6 +43,7 @@ describe('models/resources/effects/forms/addFormField', () => {
       focusNode,
       property,
       selectedEditor: undefined,
+      nodeKind: undefined,
     })
 
     // then
@@ -66,6 +67,7 @@ describe('models/resources/effects/forms/addFormField', () => {
       focusNode,
       property,
       selectedEditor: undefined,
+      nodeKind: undefined,
     })
 
     // then
@@ -91,6 +93,7 @@ describe('models/resources/effects/forms/addFormField', () => {
         focusNode,
         property,
         selectedEditor: undefined,
+        nodeKind: undefined,
       })
 
       // then