Add app config tab

app/controllers/app-config.js

@@ -0,0 +1,22 @@
+import { computed } from '@ember/object';
+import Controller from '@ember/controller';
+
+export default class AppConfigController extends Controller {
+  get columns() {
+    return [
+      { name: 'Key', valuePath: 'key' },
+      { name: 'Value', valuePath: 'value' },
+    ];
+  }
+
+  @computed('model')
+  get rows() {
+    return Object.entries(this.get('model')).map(([key, value]) => {
+      const obj = { key, value };
+      if (typeof obj.value === 'object') {
+        obj.value = JSON.stringify(obj.value, null, 2);
+      }
+      return obj;
+    });
+  }
+}

app/router.js

@@ -29,6 +29,7 @@ Router.map(function () {
     this.route('info', { resetNamespace: true }, function () {
       this.route('info-index', { path: '/', resetNamespace: true });
       this.route('libraries', { resetNamespace: true });
+      this.route('app-config', { resetNamespace: true });
       this.route('whats-new', { resetNamespace: true });
     });
 

app/routes/app-config.js

@@ -0,0 +1,15 @@
+import TabRoute from 'ember-inspector/routes/tab';
+import { readOnly } from '@ember/object/computed';
+
+export default TabRoute.extend({
+
+  model() {
+    const port = this.port;
+    return new Promise((resolve) => {
+      port.one('general:emberCliConfig', (message) => {
+        resolve(message.emberCliConfig);
+      });
+      port.send('general:getEmberCliConfig');
+    });
+  },
+});

app/templates/app-config.hbs

@@ -0,0 +1,15 @@
+<EmberTable as |t|>
+  <t.head @columns={{columns}} @enableReorder={{false}} />
+
+  <t.body @rows={{rows}} as |b|>
+    <b.row
+      class={{
+        concat "js-config-row" (if (mod b.rowMeta.index 2) " striped")
+      }} as |r|
+    >
+      <r.cell class={{concat "js-config-" r.columnValue.valuePath}} as |value|>
+        {{value}}
+      </r.cell>
+    </b.row>
+  </t.body>
+</EmberTable>

app/templates/info.hbs

@@ -10,6 +10,11 @@
           <LinkTo @route="libraries" class="nav__item">
             <span class="nav__item-label">Libraries</span>
           </LinkTo>
+        </li>
+         <li>
+          <LinkTo @route="app-config" class="nav__item">
+            <span class="nav__item-label">App Config</span>
+          </LinkTo>
         </li>
         <li>
           <LinkTo @route="whats-new" class="nav__item">

ember_debug/general-debug.js

@@ -96,6 +96,12 @@ export default EmberObject.extend(PortMixin, {
       this.sendMessage('libraries', { libraries: libraries._registry });
     },
 
+    getEmberCliConfig() {
+      this.sendMessage('emberCliConfig', {
+        emberCliConfig: this.emberCliConfig,
+      });
+    },
+
     /**
      * Called from the inspector to refresh the inspected app.
      * Used in case the inspector was opened late and therefore missed capturing

tests/acceptance/info-test.js

@@ -38,4 +38,35 @@ module('Info Tab', function (hooks) {
       .hasText('Handlebars');
     assert.dom(libraries[2].querySelector('.js-lib-version')).hasText('2.1');
   });
+
+  test('App config is displayed correctly', async function (assert) {
+    respondWith('general:getEmberCliConfig', {
+      type: 'general:emberCliConfig',
+      emberCliConfig: {
+        modulePrefix: 'extended',
+        environment: 'production',
+      },
+    });
+
+    await visit('/info/app-config');
+
+    let configs = findAll('.js-config-row');
+    assert.equal(
+      configs.length,
+      2,
+      'The correct number of configurations is displayed'
+    );
+    assert
+      .dom(configs[0].querySelector('.js-config-key'))
+      .hasText('modulePrefix');
+    assert
+      .dom(configs[0].querySelector('.js-config-value'))
+      .hasText('extended');
+    assert
+      .dom(configs[1].querySelector('.js-config-key'))
+      .hasText('environment');
+    assert
+      .dom(configs[1].querySelector('.js-config-value'))
+      .hasText('production');
+  });
 });