Tidy up object inspector (emberjs#1024)

* Create DependentKeys component

* Call object-inspector with angle brackets

* ObjectInspector:Errors

* Cleanup some mixin-details property names

* Move grouped props and flat list into separate components

- also move errors in ObjectInspector

* Create ObjectInspector::Accordion

* ObjectInspector::SortedProperties

* Untangle ObjectInspector child components

- namespace children under ObjectInspector
- do not pass parent component down to child
- separate accordion logic
- separate property sorting
- fix calculate for “all” flat properties?

* Attempt to make Code Climate happy

#valueClicked function has a Cognitive Complexity dialed up to 11

* Remove unneeded component classes

app/components/object-inspector.js

@@ -1,17 +1,9 @@
 import Component from '@ember/component';
 import { action, computed, get } from '@ember/object';
+
 export default Component.extend({
   tagName: '',
 
-  /**
-   * Application Controller passed
-   * through the template
-   *
-   * @property application
-   * @type {Controller}
-   */
-  application: null,
-
   propDisplayType: 'grouped',
 
   trail: computed('model.[]', function () {
@@ -37,7 +29,14 @@ export default Component.extend({
 
   popStack: action(function () {
     if (this.isNested) {
-      this.application.popMixinDetails();
+      this.popMixinDetails();
     }
   }),
+
+  traceErrors: action(function(objectId) {
+    this.port.send('objectInspector:traceErrors', {
+      objectId
+    });
+  })
 });
+

app/components/object-inspector/accordion.js

@@ -0,0 +1,15 @@
+import { action, computed } from '@ember/object';
+import Component from '@ember/component';
+
+export default Component.extend({
+  tagName: '',
+
+  isExpanded: computed('mixin.expand', 'mixin.properties.length', function () {
+    return this.get('mixin.expand') && this.get('mixin.properties.length') > 0;
+  }),
+
+  toggle: action(function () {
+    this.toggleProperty('mixin.expand');
+  }),
+});
+

app/components/object-inspector/properties-all.js

@@ -0,0 +1,31 @@
+import { action, computed } from '@ember/object';
+import PropertiesBase from 'ember-inspector/components/object-inspector/properties-base';
+
+const findMixin = function(mixins, property) {
+  return mixins.find((m) => {
+    return m.properties.includes(property);
+  });
+};
+
+export default PropertiesBase.extend({
+  calculate: action(function(property) {
+    const mixin = findMixin(this.get('model.mixins'), property);
+
+    this.port.send('objectInspector:calculate', {
+      objectId: this.model.objectId,
+      mixinIndex: this.get('model.mixins').indexOf(mixin),
+      property: property.name
+    });
+  }),
+
+  flatPropertyList: computed('model', function () {
+    const props = this.get('model.mixins').map(function (mixin) {
+      return mixin.properties.filter(function (p) {
+        return !p.hasOwnProperty('overridden');
+      });
+    });
+
+    return props.flat();
+  }),
+});
+

app/components/object-inspector/properties-base.js

@@ -0,0 +1,30 @@
+import Component from '@ember/component';
+import { action } from '@ember/object';
+
+export default Component.extend({
+  tagName: '',
+
+  sendToConsole: action(function ({ name }) {
+    this.port.send('objectInspector:sendToConsole', {
+      objectId: this.model.objectId,
+      property: name
+    });
+  }),
+
+  digDeeper: action(function({ name }) {
+    this.port.send('objectInspector:digDeeper', {
+      objectId: this.model.objectId,
+      property: name
+    });
+  }),
+
+  saveProperty: action(function(property, value, dataType) {
+    this.port.send('objectInspector:saveProperty', {
+      objectId: this.model.objectId,
+      property,
+      value,
+      dataType
+    });
+  }),
+});
+

app/components/object-inspector/properties-grouped.js

@@ -0,0 +1,13 @@
+import { action } from '@ember/object';
+import PropertiesBase from 'ember-inspector/components/object-inspector/properties-base';
+
+export default PropertiesBase.extend({
+  calculate: action(function({ name }, mixin) {
+    this.port.send('objectInspector:calculate', {
+      objectId: this.model.objectId,
+      mixinIndex: this.get('model.mixins').indexOf(mixin),
+      property: name
+    });
+  }),
+});
+

app/components/object-inspector/property-field.js

@@ -0,0 +1,9 @@
+import TextField from '@ember/component/text-field';
+
+export default TextField.extend({
+  didInsertElement() {
+    this.element.select();
+    return this._super(...arguments);
+  }
+});
+