ember-inspector 4.13.1 → 4.15.0

package/app/components/list-content.ts

@@ -0,0 +1,96 @@
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import Component from '@glimmer/component';
+import { htmlSafe } from '@ember/template';
+import { schedule } from '@ember/runloop';
+import { tracked } from '@glimmer/tracking';
+
+import type LayoutService from '../services/layout';
+
+interface ListContentSignature {
+  Element: HTMLDivElement;
+  Args: {
+    /**
+     * Array of objects representing the columns to render
+     * and their corresponding widths. This array is passed
+     * through the template.
+     *
+     * Each item in the array has `width` and `id` properties.
+     */
+    columns: Array<{ id: string; width: number }>;
+    /**
+     * Number passed from `list`. Indicates the header height
+     * in pixels.
+     */
+    headerHeight: number;
+  };
+}
+
+/**
+ * Base list view config
+ */
+export default class ListContent extends Component<ListContentSignature> {
+  /**
+   * The layout service. Used to observe the app's content height.
+   */
+  @service('layout') declare layoutService: LayoutService;
+
+  @tracked contentHeight: number | null = null;
+
+  /**
+   * Hook called before destruction. Clean up events listeners.
+   */
+  willDestroy() {
+    this.layoutService.off(
+      'content-height-update',
+      this,
+      this.updateContentHeight,
+    );
+    return super.willDestroy();
+  }
+
+  get height() {
+    // In testing list-view is created before `contentHeight` is set
+    // which will trigger an exception
+    if (!this.contentHeight) {
+      return 1;
+    }
+    return this.contentHeight - this.args.headerHeight;
+  }
+
+  get style() {
+    return htmlSafe(`height:${this.height}px`);
+  }
+
+  /**
+   * Hook called when content element is inserted.
+   */
+  @action
+  elementInserted() {
+    // eslint-disable-next-line ember/no-runloop
+    schedule('afterRender', this, this.setupHeight);
+  }
+
+  /**
+   * Set up the content height and listen to any updates to that property.
+   */
+  setupHeight = () => {
+    this.contentHeight = this.layoutService.contentHeight;
+    this.layoutService.on(
+      'content-height-update',
+      this,
+      this.updateContentHeight,
+    );
+  };
+
+  /**
+   * Triggered whenever the app's content height changes. This usually happens
+   * when the window is resized. Once we detect a change we update this
+   * component's `contentHeight` property and consequently its `height` style.
+   *
+   * @param height The app's new content height
+   */
+  updateContentHeight = (height: number) => {
+    this.contentHeight = height;
+  };
+}

package/app/components/list.hbs

@@ -5,8 +5,8 @@
   {{did-update this.schemaUpdated this.schema}}
 >
   {{#if this.schema.columns.length}}
-    <div class="list__header">
-      <div class="list__table-container">
+    <div class="list-header">
+      <div class="list-table-container">
         <table>
           <colgroup>
             {{#each this.columns key="id" as |column|}}
@@ -14,7 +14,7 @@
             {{/each}}
           </colgroup>
           <tbody>
-            <tr class="list__row">
+            <tr class="list-row">
               {{#each this.columns key="id" as |column|}}
                 <ListCell class="js-header-column" @tagName="th">
                   {{column.name}}

package/app/components/list.js

@@ -13,9 +13,6 @@ export default class ListComponent extends Component {
   /**
    * Layout service used to listen to changes to the application
    * layout such as resizing of the main nav or object inspector.
-   *
-   * @property layoutService
-   * @type {Service}
    */
   @service('layout') layoutService;
 
@@ -120,6 +117,7 @@ export default class ListComponent extends Component {
     let oldSchema = this.oldSchema;
     let newSchema = this.schema;
     if (newSchema && newSchema !== oldSchema) {
+      // eslint-disable-next-line ember/no-runloop
       scheduleOnce('actions', this, this.setupColumns);
     }
     this.oldSchema = newSchema;
@@ -128,6 +126,7 @@ export default class ListComponent extends Component {
   @action
   elementInserted(el) {
     this.el = el;
+    // eslint-disable-next-line ember/no-runloop
     scheduleOnce('afterRender', this, this.setupColumns);
     this.onResize = () => {
       this.debounceColumnWidths.perform();
@@ -157,6 +156,7 @@ export default class ListComponent extends Component {
         arr.push({
           name,
           title: name,
+          // eslint-disable-next-line ember/no-runloop
           fn: bind(this, this.toggleColumnVisibility, id),
         });
         return arr;
@@ -166,7 +166,7 @@ export default class ListComponent extends Component {
       basicContext.show(menu, e);
     };
 
-    const listHeader = this.el.querySelector('.list__header');
+    const listHeader = this.el.querySelector('.list-header');
     if (listHeader) {
       listHeader.addEventListener('contextmenu', this.showBasicContext);
     }
@@ -184,7 +184,7 @@ export default class ListComponent extends Component {
   @action
   toggleColumnVisibility(id) {
     this.resizableColumns.toggleVisibility(id);
-    const listHeader = this.el.querySelector('.list__header');
+    const listHeader = this.el.querySelector('.list-header');
     if (listHeader) {
       listHeader.removeEventListener('contextmenu', this.showBasicContext);
     }
@@ -212,7 +212,7 @@ export default class ListComponent extends Component {
    * @method willDestroy
    */
   willDestroy() {
-    const listHeader = this.el.querySelector('.list__header');
+    const listHeader = this.el.querySelector('.list-header');
     if (listHeader) {
       listHeader.removeEventListener('contextmenu', this.showBasicContext);
     }
@@ -228,7 +228,7 @@ export default class ListComponent extends Component {
    */
   @action
   getTableWidth() {
-    return this.el.querySelector('.list__table-container').clientWidth;
+    return this.el.querySelector('.list-table-container').clientWidth;
   }
 
   /**

package/app/components/model-types-toolbar.hbs

@@ -6,7 +6,7 @@
 
   <Ui::ToolbarDivider />
 
-  <div class="toolbar__checkbox js-filter-hide-empty-model-types">
+  <div class="toolbar-checkbox js-filter-hide-empty-model-types">
     <label>
       <Input
         data-test-options-hideEmptyModelTypes
@@ -16,7 +16,7 @@
       Hide Empty Model Types
     </label>
   </div>
-  <div class="toolbar__checkbox js-filter-order-records-by-count">
+  <div class="toolbar-checkbox js-filter-order-records-by-count">
     <label>
       <Input
         data-test-options-orderByRecordCount
@@ -26,7 +26,7 @@
       Order Models By Record Count
     </label>
   </div>
-  <button class="toolbar__radio js-filter" {{on "click" @getStore}} data-test-inspect-store type="button">
+  <button class="toolbar-radio js-filter" {{on "click" @getStore}} data-test-inspect-store type="button">
     Inspect Store
   </button>
 </div>

package/app/components/object-inspector/component-parents.hbs

@@ -0,0 +1,33 @@
+<ObjectInspector::Accordion @mixin={{this.accordionMixin}} as |accordion|>
+  <div
+    class="mixin {{this.accordionMixin.type}} {{if accordion.isExpanded "mixin-state-expanded"}} {{if this.accordionMixin.properties.length "mixin-props-yes" "mixin-props-no"}}"
+    data-test-object-detail
+  >
+    {{#if this.accordionMixin.properties.length}}
+      <h2
+        data-test-object-detail-name
+        class="mixin-name sticky top-0 truncate select-none cursor-default text-base15 bg-base01"
+        role="button"
+        {{on "click" accordion.toggle}}
+      >
+        {{this.accordionMixin.name}}
+      </h2>
+    {{else}}
+      <h2
+        class="mixin-name mixin-name--no-props sticky top-0 truncate select-none text-base09 cursor-default bg-base01"
+        data-test-object-detail-name
+      >
+        {{this.accordionMixin.name}}
+      </h2>
+    {{/if}}
+    {{#if accordion.isExpanded}}
+      <ul class="mixin-properties m-0 text-base font-mono list-none">
+      {{#each this.parents as |parent|}}
+        <ComponentTreeItem @item={{parent}}  />
+      {{else}}
+          <li class="mixin-property flex relative flex-row items-center truncate">No Properties</li>
+      {{/each}}
+      </ul>
+    {{/if}}
+  </div>
+</ObjectInspector::Accordion>

package/app/components/object-inspector/component-parents.js

@@ -0,0 +1,43 @@
+import Component from '@glimmer/component';
+import { RenderItem } from 'ember-inspector/controllers/component-tree';
+
+class RenderItemNoParent extends RenderItem {
+  get level() {
+    return 0;
+  }
+
+  get hasChildren() {
+    return false;
+  }
+}
+
+export default class ComponentParents extends Component {
+  get accordionMixin() {
+    return {
+      name: 'rendered by',
+      expand: true,
+      properties: {
+        length: 1,
+      },
+    };
+  }
+  get parents() {
+    const parents = [];
+    let item = this.args.item?.parentItem;
+    while (item) {
+      parents.push(
+        new RenderItemNoParent(
+          item.controller,
+          item.parentItem,
+          item.renderNode,
+        ),
+      );
+      item = item.parentItem;
+    }
+    return parents;
+  }
+
+  selectComponent = (item) => {
+    this.args.select(item);
+  };
+}

package/app/components/object-inspector/dependent-keys.hbs

@@ -1,14 +1,14 @@
-<li class="mixin__property-dependency-list relative">
+<li class="mixin-property-dependency-list relative">
   {{svg-jar "dependent-key-connection" width="20px" height="10px"}}
   <ul class="m-0 p-0 list-none">
     {{#each @keys as |dep|}}
       <li
-        class="mixin__property-dependency-item relative text-base12 text-sm {{if dep.changed 'text-spec01'}}"
+        class="mixin-property-dependency-item relative text-base12 text-sm {{if dep.changed 'text-spec01'}}"
         title={{if dep.changed 'this property changed'}}
       >
       {{#if dep.child}}
         <span
-          class="mixin__property-dependency-name subkey"
+          class="mixin-property-dependency-name subkey"
           data-label="object-property-name"
         >
           • -- {{dep.child}}
@@ -20,7 +20,7 @@
           height="9px"
         }}
         <span
-          class="mixin__property-dependency-name"
+          class="mixin-property-dependency-name"
           data-label="object-property-name"
         >
           {{dep.name}}

package/app/components/object-inspector/errors.hbs

@@ -1,9 +1,9 @@
-<div class="mixin mixin_props_no" data-test-object-inspector-errors>
-  <h2 class="mixin__name mixin__name--errors bg-base00">
+<div class="mixin mixin-props-no" data-test-object-inspector-errors>
+  <h2 class="mixin-name mixin-name--errors bg-base00">
     Errors
     <button
       data-test-send-errors-to-console
-      class="send-to-console send-to-console--chevron-only ml-1"
+      class="send-to-console send-to-console-chevron-only ml-1"
       type="button"
       {{on "click" @traceErrors}}
     >
@@ -11,7 +11,7 @@
       Trace in the Console
     </button>
   </h2>
-  <div class="mixin__properties m-0 text-base font-mono">
+  <div class="mixin-properties m-0 text-base font-mono">
     {{#each @errors as |error|}}
       <div class="py-0 px-5 mr-1 text-spec01" data-test-object-inspector-error>
         Error while computing: {{error.property}}

package/app/components/object-inspector/properties-all.hbs

@@ -1,5 +1,5 @@
 {{#if this.flatPropertyList.length}}
-  <ul class="mixin__properties m-0 text-base font-mono list-none">
+  <ul class="mixin-properties m-0 text-base font-mono list-none">
     <ObjectInspector::SortProperties
       @properties={{this.flatPropertyList}}
       as |sortedProperties|

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

@@ -9,9 +9,11 @@ export default class PropertiesBase extends Component {
     const data = {
       objectId: this.args.model.objectId,
     };
+
     if (name !== '...') {
       data.property = name;
     }
+
     this.port.send('objectInspector:sendToConsole', data);
   }
 

package/app/components/object-inspector/properties-grouped.hbs

@@ -1,13 +1,13 @@
 {{#each @model.mixins as |mixin|}}
   <ObjectInspector::Accordion @mixin={{mixin}} as |accordion|>
     <div
-      class="mixin {{mixin.type}} {{if accordion.isExpanded "mixin_state_expanded"}} {{if mixin.properties.length "mixin_props_yes" "mixin_props_no"}}"
+      class="mixin {{mixin.type}} {{if accordion.isExpanded "mixin-state-expanded"}} {{if mixin.properties.length "mixin-props-yes" "mixin-props-no"}}"
       data-test-object-detail
     >
       {{#if mixin.properties.length}}
         <h2
           data-test-object-detail-name
-          class="mixin__name sticky top-0 truncate select-none cursor-default text-base15 bg-base01"
+          class="mixin-name sticky top-0 truncate select-none cursor-default text-base15 bg-base01"
           role="button"
           {{on "click" accordion.toggle}}
         >
@@ -15,14 +15,14 @@
         </h2>
       {{else}}
         <h2
-          class="mixin__name mixin__name--no-props sticky top-0 truncate select-none text-base09 cursor-default bg-base01"
+          class="mixin-name mixin-name--no-props sticky top-0 truncate select-none text-base09 cursor-default bg-base01"
           data-test-object-detail-name
         >
           {{mixin.name}}
         </h2>
       {{/if}}
       {{#if accordion.isExpanded}}
-        <ul class="mixin__properties m-0 text-base font-mono list-none">
+        <ul class="mixin-properties m-0 text-base font-mono list-none">
           <ObjectInspector::SortProperties
             @properties={{mixin.properties}} as |sortedProperties|
           >
@@ -36,7 +36,7 @@
                 @gotoSource={{fn this.gotoSource prop}}
               />
             {{else}}
-              <li class="mixin__property flex relative flex-row items-center truncate">No Properties</li>
+              <li class="mixin-property flex relative flex-row items-center truncate">No Properties</li>
             {{/each}}
           </ObjectInspector::SortProperties>
         </ul>

package/app/components/object-inspector/property.hbs

@@ -1,11 +1,11 @@
 <li
-  class="{{if this.isOverridden "mixin__property-state-overridden line-through"}} mixin__property flex flex-row relative items-center truncate"
+  class="{{if this.isOverridden "mixin-property-state-overridden line-through"}} mixin-property flex flex-row relative items-center truncate"
   data-test-object-property
 >
   {{!-- Disclosure Triangle --}}
   {{#if this.hasDependentKeys}}
     <button
-      class="mixin__cp-toggle {{if this.showDependentKeys "mixin__cp-toggle--expanded"}}"
+      class="mixin-cp-toggle {{if this.showDependentKeys "mixin-cp-toggle-expanded"}}"
       {{on "click" this.toggleDeps}}
       type="button"
     >
@@ -22,47 +22,49 @@
 
   {{!-- Property Icon --}}
   <span
-    class="mixin__property-icon-container flex-shrink-0"
+    class="mixin-property-icon-container flex-shrink-0"
     role="button"
     title={{if @model.code @model.code this.iconInfo.title}}
     {{on "click" this.toggleDeps}}
   >
-    <span class="mixin__property-icon mixin__property-icon--{{this.iconInfo.type}} inline-block rounded font-mono text-md text-white text-center select-none"></span>
+    <span class="mixin-property-icon mixin-property-icon-{{this.iconInfo.type}} inline-block rounded font-mono text-md text-white text-center select-none"></span>
   </span>
 
-  {{!-- Property Name --}}
-  <span
-    class="mixin__property-name text-base14 truncate"
-    data-test-object-property-name
-  >
-    {{#if this.isService}}
-      <span
-        title="service"
-        class="mixin__property--group"
-        data-test-property-name-service
-      >
-        {{@model.name}}
-      </span>
-    {{else}}
-      {{#if this.hasDependentKeys}}
+  {{#unless this.isOwner}}
+    {{!-- Property Name --}}
+    <span
+      class="mixin-property-name text-base14 truncate"
+      data-test-object-property-name
+    >
+      {{#if this.isService}}
         <span
-          title="computed"
-          class="mixin__property--group"
+          title="service"
+          class="mixin-property--group"
+          data-test-property-name-service
         >
           {{@model.name}}
         </span>
       {{else}}
-        {{@model.name}}
+        {{#if this.hasDependentKeys}}
+          <span
+            title="computed"
+            class="mixin-property--group"
+          >
+            {{@model.name}}
+          </span>
+        {{else}}
+          {{@model.name}}
+        {{/if}}
       {{/if}}
-    {{/if}}
-  </span>
+    </span>
 
-  <span class="mr-1">: </span>
+    <span class="mr-1">: </span>
+  {{/unless}}
 
   {{#if this.isEdit}}
     {{#if this.isDate}}
       <DatePropertyField
-        class="mixin__property-value-txt flex-1 text-base14 outline-none text-base bg-base01 js-object-property-value-date"
+        class="mixin-property-value-txt flex-1 text-base14 outline-none text-base bg-base01 js-object-property-value-date"
         @allowInput={{true}}
         @date={{readonly this.dateValue}}
         @dateFormat="Y-m-d"
@@ -71,7 +73,7 @@
       />
     {{else}}
       <ObjectInspector::PropertyField
-        class="mixin__property-value-txt flex-1 text-base14 text-base bg-base01 outline-none"
+        class="mixin-property-value-txt flex-1 text-base14 text-base bg-base01 outline-none"
         @value={{this.txtValue}}
         @insert-newline={{this.save}}
         @escape-press={{this.finishedEditing}}
@@ -83,17 +85,17 @@
     {{#if this.canCalculate}}
       <button
         data-test-calculate
-        class="mixin__calc-btn"
+        class="mixin-calc-btn"
         title="compute property"
         type="button"
-        {{on "click" @calculate bubbles=false}}
+        {{on "click" (stop-propagation @calculate)}}
       >
         {{svg-jar "calculate" width="16px" height="16px"}}
       </button>
     {{/if}}
     {{#if this.isDate}}
       <span
-        class="{{@model.value.type}} mixin__property-value truncate"
+        class="{{@model.value.type}} mixin-property-value truncate"
         role="button"
         {{on "click" this.dateClick}}
         data-test-object-property-value
@@ -102,7 +104,7 @@
       </span>
     {{else}}
       <span
-        class="{{@model.value.type}} {{if this.isService "type-service"}} mixin__property-value truncate"
+        class="{{@model.value.type}} {{if this.isService "type-service"}} mixin-property-value truncate"
         role="button"
         {{on "click" this.valueClick}}
         data-test-object-property-value
@@ -112,13 +114,13 @@
     {{/if}}
   {{/if}}
 
-  <span class="mixin__property-overridden-by absolute right-0 no-underline bg-spec00">
+  <span class="mixin-property-overridden-by absolute right-0 no-underline bg-spec00">
     (Overridden by {{@model.overridden}})
   </span>
 
   <button
     data-test-send-to-console-btn
-    class="mixin__send-btn flex-shrink-0 send-to-console"
+    class="mixin-send-btn flex-shrink-0 send-to-console"
     title="Send To Console"
     type="button"
     {{on "click" @sendToConsole}}
@@ -128,7 +130,7 @@
   {{#if this.isFunction}}
     <button
       data-test-goto-source-btn
-      class="mixin__send-btn flex-shrink-0 goto-source"
+      class="mixin-send-btn flex-shrink-0 goto-source"
       title="Goto Source"
       type="button"
       {{on "click" @gotoSource}}

package/app/components/object-inspector/property.ts

@@ -1,23 +1,29 @@
+/* eslint-disable @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return */
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
+// eslint-disable-next-line ember/no-computed-properties-in-native-classes
 import { action, computed } from '@ember/object';
+// eslint-disable-next-line ember/no-computed-properties-in-native-classes
 import { alias, equal } from '@ember/object/computed';
 import { next } from '@ember/runloop';
 import parseText from 'ember-inspector/utils/parse-text';
 
-interface ObjectInspectorPropertyArgs {
-  model: any;
-  digDeeper: () => unknown;
-  gotoSource: () => void;
-  sendToConsole: () => void;
-  saveProperty: (
-    property: unknown,
-    value: unknown,
-    dataType: unknown
-  ) => unknown;
+interface ObjectInspectorPropertySignature {
+  Args: {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    model: any;
+    digDeeper: () => unknown;
+    gotoSource: () => void;
+    sendToConsole: () => void;
+    saveProperty: (
+      property: unknown,
+      value: unknown,
+      dataType: unknown,
+    ) => unknown;
+  };
 }
 
-export default class ObjectInspectorProperty extends Component<ObjectInspectorPropertyArgs> {
+export default class ObjectInspectorProperty extends Component<ObjectInspectorPropertySignature> {
   @tracked dateValue: Date | null = null;
   @tracked isDepsExpanded = false;
   @tracked isEdit = false;
@@ -41,6 +47,10 @@ export default class ObjectInspectorProperty extends Component<ObjectInspectorPr
   @equal('args.model.value.type', 'type-string')
   isString!: boolean;
 
+  get isOwner() {
+    return this.args.model?.value?.type === 'type-owner';
+  }
+
   get isService() {
     return this.args.model?.isService;
   }
@@ -66,10 +76,7 @@ export default class ObjectInspectorProperty extends Component<ObjectInspectorPr
 
   @computed('args.model.dependentKeys.[]', 'isCalculated')
   get hasDependentKeys() {
-    return (
-      this.args.model?.dependentKeys?.length &&
-      this.isCalculated
-    );
+    return this.args.model?.dependentKeys?.length && this.isCalculated;
   }
 
   get showDependentKeys() {
@@ -113,6 +120,10 @@ export default class ObjectInspectorProperty extends Component<ObjectInspectorPr
       return { type: 'getter', title: 'Getter' };
     }
 
+    if (this.isOwner) {
+      return { type: 'owner', title: 'Owner' };
+    }
+
     return { type: 'n/a', title: 'N/A' };
   }
 
@@ -121,8 +132,11 @@ export default class ObjectInspectorProperty extends Component<ObjectInspectorPr
   }
 
   get cannotEdit() {
-    if (this.args.model.name === '...' || !this.isCalculated || this.readOnly) return true;
-    return !['type-string', 'type-number', 'type-boolean'].includes(this.args.model?.value?.type);
+    if (this.args.model.name === '...' || !this.isCalculated || this.readOnly)
+      return true;
+    return !['type-string', 'type-number', 'type-boolean'].includes(
+      this.args.model?.value?.type,
+    );
   }
 
   @action
@@ -143,12 +157,14 @@ export default class ObjectInspectorProperty extends Component<ObjectInspectorPr
       return;
     }
 
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     let value = this.args.model.value.inspect;
 
     if (this.isString) {
       value = this._quotedString(value);
     }
 
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     this.txtValue = value;
     this.isEdit = true;
   }
@@ -168,6 +184,7 @@ export default class ObjectInspectorProperty extends Component<ObjectInspectorPr
 
   @action
   finishedEditing() {
+    // eslint-disable-next-line ember/no-runloop
     next(() => {
       this.isEdit = false;
     });