Extract VersionList::Row component

Author: Turbo87

app/components/version-list/row.hbs

@@ -0,0 +1,18 @@
+<div local-class="row" ...attributes>
+  <div>
+    <LinkTo @route="crate.version" @model={{@version.num}}>{{@version.num}}</LinkTo>
+
+    <span local-class="date">{{date-format @version.created_at 'PPP'}}</span>
+    {{#if @version.yanked}}
+      <span local-class='yanked'>yanked</span>
+    {{/if}}
+  </div>
+
+  {{#if this.isOwner}}
+    <YankButton @version={{@version}} />
+  {{else}}
+    <LinkTo @route="crate.version" @model={{@version.num}} local-class="arrow">
+      {{svg-jar "right-arrow"}}
+    </LinkTo>
+  {{/if}}
+</div>

app/components/version-list/row.js

@@ -0,0 +1,12 @@
+import { computed } from '@ember/object';
+import { inject as service } from '@ember/service';
+import Component from '@glimmer/component';
+
+export default class VersionRow extends Component {
+  @service session;
+
+  @computed('args.version.crate.owner_user', 'session.currentUser.id')
+  get isOwner() {
+    return this.args.version.crate?.owner_user?.findBy('id', this.session.currentUser?.id);
+  }
+}

app/components/version-list/row.module.css

@@ -0,0 +1,25 @@
+.row {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    padding: 20px 0;
+}
+
+.date {
+    composes: small from '../../styles/shared/typography.module.css';
+    display: inline-block;
+    margin-left: 20px;
+}
+
+.yanked {
+    composes: yanked from '../../styles/shared/typography.module.css';
+}
+
+.arrow {
+    display: inline-block;
+    float: right;
+
+    svg {
+        background: #EEECDD;
+    }
+}

app/controllers/crate/versions.js

@@ -13,32 +13,9 @@
 }
 
 .row {
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    padding: 20px 0;
     border-bottom: 2px solid #d5d3cb;
 
     &:last-of-type {
         border: none;
     }
 }
-
-.date {
-    composes: small from '../shared/typography.module.css';
-    display: inline-block;
-    margin-left: 20px;
-}
-
-.yanked {
-    composes: yanked from '../shared/typography.module.css';
-}
-
-.arrow {
-    display: inline-block;
-    float: right;
-
-    svg {
-        background: #EEECDD;
-    }
-}

app/styles/crate/versions.module.css

@@ -10,22 +10,6 @@
 
 <div local-class="list">
   {{#each this.model.versions as |version|}}
-    <div local-class="row">
-      <div>
-        <LinkTo @route="crate.version" @model={{version.num}}>{{ version.num }}</LinkTo>
-
-        <span local-class="date">{{date-format version.created_at 'PPP'}}</span>
-        {{#if version.yanked}}
-          <span local-class='yanked'>yanked</span>
-        {{/if}}
-      </div>
-      {{#if this.isOwner}}
-        <YankButton @version={{version}} />
-      {{else}}
-        <LinkTo @route="crate.version" @model={{version.num}} local-class="arrow">
-          {{svg-jar "right-arrow"}}
-        </LinkTo>
-      {{/if}}
-    </div>
+    <VersionList::Row @version={{version}} local-class="row" />
   {{/each}}
 </div>