Merge 23ca887 into b76db54

addon/components/array-container.js

@@ -101,9 +101,17 @@ export default Component.extend(HookMixin, PropTypeMixin, {
    * @returns {String} label
    */
   addLabel (bunsenId, cellConfig, bunsenModel) {
-    const label = get(cellConfig, 'label')
-    const renderLabel = getLabel(label, bunsenModel, bunsenId)
-    return `Add ${singularize(renderLabel).toLowerCase()}`
+    const prefix = 'Add '
+    let label = get(cellConfig, 'label')
+
+    if (label) {
+      label = `${singularize(label)}`
+    } else {
+      const renderLabel = getLabel(label, bunsenModel, bunsenId)
+      label = `${singularize(renderLabel).toLowerCase()}`
+    }
+
+    return `${prefix}${label}`
   },
 
   @readOnly

addon/components/cell.js

@@ -296,7 +296,12 @@ export default Component.extend(HookMixin, PropTypeMixin, {
       return null
     }
 
-    const label = get(cellConfig, 'label')
+    let label = get(cellConfig, 'label')
+
+    if (label) {
+      label = label.charAt(0).toUpperCase() + label.slice(1)
+    }
+
     return getLabel(label, bunsenModel, nonIndexId)
   },
 

tests/dummy/mirage/data/views/array-explicit-label.js

@@ -0,0 +1,55 @@
+export default {
+  version: '2.0',
+  type: 'form',
+  cells: [
+    {
+      extends: 'main'
+    }
+  ],
+  cellDefinitions: {
+    addr: {
+      children: [
+        {
+          model: 'street'
+        },
+        {
+          model: 'city'
+        },
+        {
+          model: 'state'
+        },
+        {
+          model: 'zip'
+        }
+      ]
+    },
+    main: {
+      children: [
+        {
+          model: 'name',
+          extends: 'name'
+        },
+        {
+          model: 'addresses',
+          label: 'HOME Addresses',
+          arrayOptions: {
+            itemCell: {
+              extends: 'addr',
+              label: 'Address'
+            }
+          }
+        }
+      ]
+    },
+    name: {
+      children: [
+        {
+          model: 'first'
+        },
+        {
+          model: 'last'
+        }
+      ]
+    }
+  }
+}

tests/dummy/mirage/data/views/index.js

@@ -2,6 +2,7 @@ import array from './array'
 import array2WithConditionals from './array-2-with-conditionals'
 import arrayAutoAdd from './array-auto-add'
 import arrayCustom from './array-custom'
+import arrayExplicitLabel from './array-explicit-label'
 import arrayIndexed from './array-indexed'
 import arrayIndexed2 from './array-indexed-2'
 import arrayInline from './array-inline'
@@ -31,6 +32,7 @@ export default {
   array2WithConditionals,
   arrayAutoAdd,
   arrayCustom,
+  arrayExplicitLabel,
   arrayIndexed,
   arrayIndexed2,
   arrayInline,

tests/dummy/mirage/fixtures/view.js

@@ -25,6 +25,12 @@ export default [
     modelIds: ['array'],
     view: views.arrayCustom
   },
+  {
+    id: 'array-explicit-label',
+    label: 'Array (Explicit Label)',
+    modelIds: ['array'],
+    view: views.arrayExplicitLabel
+  },
   {
     id: 'array-indexed',
     label: 'Array (Indexed)',

tests/integration/components/frost-bunsen-form/arrays/cell-config-with-label-test.js

@@ -0,0 +1,266 @@
+import {expect} from 'chai'
+import {describe, it} from 'mocha'
+
+import {expectButtonWithState} from 'dummy/tests/helpers/ember-frost-core'
+import selectors from 'dummy/tests/helpers/selectors'
+import {setupFormComponentTest} from 'dummy/tests/helpers/utils'
+
+describe(
+  'Integration: Component / frost-bunsen-form / array Title and "Add" button text with "network elements" label',
+  function () {
+    setupFormComponentTest({
+      bunsenModel: {
+        type: 'object',
+        properties: {
+          name: {
+            type: 'object',
+            title: 'Full name',
+            properties: {
+              first: {
+                type: 'string'
+              },
+              last: {
+                type: 'string'
+              }
+            },
+            required: [
+              'first',
+              'last'
+            ]
+          },
+          addresses: {
+            type: 'array',
+            items: {
+              type: 'object',
+              properties: {
+                street: {
+                  type: 'string'
+                },
+                city: {
+                  type: 'string'
+                },
+                state: {
+                  type: 'string'
+                },
+                zip: {
+                  type: 'string'
+                }
+              },
+              required: [
+                'street',
+                'city',
+                'state',
+                'zip'
+              ]
+            },
+            minItems: 1
+          }
+        },
+        required: [
+          'name',
+          'addresses'
+        ]
+      },
+      bunsenView: {
+        version: '2.0',
+        type: 'form',
+        cells: [
+          {
+            extends: 'main'
+          }
+        ],
+        cellDefinitions: {
+          addr: {
+            children: [
+              {
+                model: 'street'
+              },
+              {
+                model: 'city'
+              },
+              {
+                model: 'state'
+              },
+              {
+                model: 'zip'
+              }
+            ]
+          },
+          main: {
+            children: [
+              {
+                model: 'name',
+                extends: 'name'
+              },
+              {
+                model: 'addresses',
+                label: 'network elements',
+                arrayOptions: {
+                  itemCell: {
+                    extends: 'addr',
+                    label: 'Address'
+                  }
+                }
+              }
+            ]
+          },
+          name: {
+            children: [
+              {
+                model: 'first'
+              },
+              {
+                model: 'last'
+              }
+            ]
+          }
+        }
+      }
+    })
+
+    it('renders as expected', function () {
+      const $button = this.$(selectors.frost.button.input.enabled)
+      const $headings = this.$(selectors.bunsen.section.heading)
+
+      expect(
+        $headings.eq(0).text().trim(),
+        'renders expected section heading'
+      ).to.equal('Network elements')
+
+      expectButtonWithState($button, {
+        icon: 'round-add',
+        text: 'Add network element'
+      })
+    })
+  }
+)
+
+describe(
+  'Integration: Component / frost-bunsen-form / array Title and "Add" button text with "IP addresses" label',
+  function () {
+    setupFormComponentTest({
+      bunsenModel: {
+        type: 'object',
+        properties: {
+          name: {
+            type: 'object',
+            title: 'Full name',
+            properties: {
+              first: {
+                type: 'string'
+              },
+              last: {
+                type: 'string'
+              }
+            },
+            required: [
+              'first',
+              'last'
+            ]
+          },
+          addresses: {
+            type: 'array',
+            items: {
+              type: 'object',
+              properties: {
+                street: {
+                  type: 'string'
+                },
+                city: {
+                  type: 'string'
+                },
+                state: {
+                  type: 'string'
+                },
+                zip: {
+                  type: 'string'
+                }
+              },
+              required: [
+                'street',
+                'city',
+                'state',
+                'zip'
+              ]
+            },
+            minItems: 1
+          }
+        },
+        required: [
+          'name',
+          'addresses'
+        ]
+      },
+      bunsenView: {
+        version: '2.0',
+        type: 'form',
+        cells: [
+          {
+            extends: 'main'
+          }
+        ],
+        cellDefinitions: {
+          addr: {
+            children: [
+              {
+                model: 'street'
+              },
+              {
+                model: 'city'
+              },
+              {
+                model: 'state'
+              },
+              {
+                model: 'zip'
+              }
+            ]
+          },
+          main: {
+            children: [
+              {
+                model: 'name',
+                extends: 'name'
+              },
+              {
+                model: 'addresses',
+                label: 'IP addresses',
+                arrayOptions: {
+                  itemCell: {
+                    extends: 'addr',
+                    label: 'Address'
+                  }
+                }
+              }
+            ]
+          },
+          name: {
+            children: [
+              {
+                model: 'first'
+              },
+              {
+                model: 'last'
+              }
+            ]
+          }
+        }
+      }
+    })
+
+    it('renders as expected', function () {
+      const $button = this.$(selectors.frost.button.input.enabled)
+      const $headings = this.$(selectors.bunsen.section.heading)
+
+      expect(
+        $headings.eq(0).text().trim(),
+        'renders expected section heading'
+      ).to.equal('IP addresses')
+
+      expectButtonWithState($button, {
+        icon: 'round-add',
+        text: 'Add IP address'
+      })
+    })
+  }
+)