octane migration - deprecation-item-source

app/components/deprecation-item-source.hbs

@@ -1 +1,28 @@
-{{yield this}}
+<div class="deprecation-source pb-2" data-test-deprecation-source>
+  <button
+    class="send-to-console send-to-console--chevron-only mr-3"
+    title="Trace deprecations in console"
+    data-test-trace-deprecations-btn
+    onclick={{this.handleClick}}
+    type="button"
+  >
+    {{svg-jar "send-with-chevron" width="6px" height="9px"}}
+    Trace in the Console
+  </button>
+  <span class="source">
+    {{#if this.isClickable}}
+      <a
+        class="font-mono"
+        href="#"
+        data-test-deprecation-source-link
+        {{on "click" this.handleRedirect}}
+      >
+        {{this.url}}
+      </a>
+    {{else}}
+      <span class="font-mono" data-test-deprecation-source-text>
+        {{this.url}}
+      </span>
+    {{/if}}
+  </span>
+</div>

app/components/deprecation-item-source.js

@@ -1,26 +1,37 @@
-import { tagName } from '@ember-decorators/component';
-import { computed, get } from '@ember/object';
+import { get, action } from '@ember/object';
 import { inject as service } from '@ember/service';
-import { and, readOnly, bool } from '@ember/object/computed';
-import Component from '@ember/component';
-
-@tagName('')
+import Component from '@glimmer/component';
 export default class DeprecationItemSource extends Component {
   @service port;
 
-  @bool('model.map.source') known;
-
-  @computed('model.map.{line,source}', 'known')
   get url() {
-    let source = get(this, 'model.map.source');
+    const source = get(this.args, 'itemModel.map.source');
     if (this.known) {
-      return `${source}:${get(this, 'model.map.line')}`;
+      return `${source}:${get(this.args, 'itemModel.map.line')}`;
     } else {
       return 'Unkown source';
     }
   }
 
-  @readOnly('port.adapter') adapter;
+  get adapter() {
+    return this.port.adapter;
+  }
+
+  get isClickable() {
+    return this.known && this.adapter.canOpenResource;
+  }
+
+  get known() {
+    return this.args.itemModel.map.source;
+  }
 
-  @and('known', 'adapter.canOpenResource') isClickable;
+  @action
+  handleClick() {
+    this.args.traceSource?.(this.args.modelGroup, this.args.itemModel);
+  }
+
+  @action
+  handleRedirect() {
+    this.args.openResource?.(this.args.itemModel.map);
+  }
 }

app/components/deprecation-item.hbs

@@ -50,36 +50,12 @@
 
     {{#if (and @model.hasSourceMap disclosure.isExpanded)}}
       {{#each @model.sources as |single|}}
-        <DeprecationItemSource @model={{single}} as |source|>
-          <div class="deprecation-source pb-2" data-test-deprecation-source>
-            <button
-              class="send-to-console send-to-console--chevron-only mr-3"
-              title="Trace deprecations in console"
-              data-test-trace-deprecations-btn
-              {{on "click" (fn @traceSource @model source.model)}}
-              type="button"
-            >
-              {{svg-jar "send-with-chevron" width="6px" height="9px"}}
-              Trace in the Console
-            </button>
-            <span class="source">
-              {{#if source.isClickable}}
-                <a
-                  class="font-mono"
-                  href="#"
-                  data-test-deprecation-source-link
-                  {{on "click" (fn @openResource source.model.map)}}
-                >
-                  {{source.url}}
-                </a>
-              {{else}}
-                <span class="font-mono" data-test-deprecation-source-text>
-                  {{source.url}}
-                </span>
-              {{/if}}
-            </span>
-          </div>
-        </DeprecationItemSource>
+        <DeprecationItemSource
+          @itemModel={{single}}
+          @modelGroup={{@model}}
+          @traceSource={{@traceSource}}
+          @openResource={{@openResource}}
+        />
       {{/each}}
     {{/if}}
   </div>