Auto merge of #4152 - Turbo87:owners-list, r=locks

CrateSidebar: Show detailed list for small number of owners

This PR extracts a `OwnersList` component and then adjusts it to show a more detailed list if the number of owners is five or less.

### Before:

<img width="314" alt="Bildschirmfoto 2021-11-09 um 20 24 00" src="https://user-images.githubusercontent.com/141300/140990929-c17e09b4-d30f-45cb-96e1-f9a896956c57.png">

### After:

<img width="344" alt="Bildschirmfoto 2021-11-09 um 20 23 41" src="https://user-images.githubusercontent.com/141300/140990923-2ff9088d-5428-4536-b1a5-979863f375dc.png">

Author: bors

app/components/crate-sidebar.hbs

@@ -84,24 +84,7 @@
 
     <div>
       <h3>Owners</h3>
-
-      <ul local-class='owners' data-test-owners>
-        {{#each @crate.owner_team as |team|}}
-          <li>
-            <LinkTo @route={{team.kind}} @model={{team.login}} data-test-team-link={{team.login}}>
-              <UserAvatar @user={{team}} @size="medium-small" />
-            </LinkTo>
-          </li>
-        {{/each}}
-
-        {{#each @crate.owner_user as |user|}}
-          <li>
-            <LinkTo @route={{user.kind}} @model={{user.login}} data-test-user-link={{user.login}}>
-              <UserAvatar @user={{user}} @size="medium-small" />
-            </LinkTo>
-          </li>
-        {{/each}}
-      </ul>
+      <OwnersList @owners={{@crate.owners}} />
     </div>
   </div>
 
@@ -110,7 +93,7 @@
       {{#if @crate.categories}}
         <div>
           <h3>Categories</h3>
-          <ul>
+          <ul local-class="categories">
             {{#each @crate.categories as |category|}}
               <li><LinkTo @route="category" @model={{category.slug}}>{{category.category}}</LinkTo></li>
             {{/each}}

app/components/crate-sidebar.module.css

@@ -10,7 +10,7 @@
             flex-direction: column;
         }
 
-        ul {
+        .categories {
             padding-left: 20px;
         }
     }
@@ -103,18 +103,6 @@
     }
 }
 
-ul.owners {
-    display: flex;
-    flex-wrap: wrap;
-    list-style: none;
-    padding: 0;
-    margin: 0;
-
-    li {
-        margin: 0 7px 7px 0;
-    }
-}
-
 .more-versions-link,
 .reverse-deps-link {
     composes: small from '../styles/shared/typography.module.css';

app/components/owners-list.hbs

@@ -0,0 +1,19 @@
+<ul
+  role="list"
+  local-class="list {{if this.showDetailedList "detailed"}}"
+  data-test-owners
+>
+  {{#each @owners as |owner|}}
+    <li>
+      <LinkTo
+        @route={{owner.kind}}
+        @model={{owner.login}}
+        local-class="link"
+        data-test-owner-link={{owner.login}}
+      >
+        <UserAvatar @user={{owner}} @size="medium-small" local-class="avatar" />
+        <span local-class="name">{{or owner.display_name owner.name}}</span>
+      </LinkTo>
+    </li>
+  {{/each}}
+</ul>

app/components/owners-list.js

@@ -0,0 +1,7 @@
+import Component from '@glimmer/component';
+
+export default class VersionRow extends Component {
+  get showDetailedList() {
+    return this.args.owners.length <= 5;
+  }
+}

app/components/owners-list.module.css

@@ -0,0 +1,45 @@
+.list.detailed {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    > * + * {
+        margin-top: 5px;
+    }
+
+    .link {
+        display: grid;
+        grid-template-columns: auto 1fr;
+        align-items: center;
+    }
+
+    .avatar {
+        margin-right: 10px;
+    }
+
+    .name {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}
+
+.list:not(.detailed) {
+    display: flex;
+    flex-wrap: wrap;
+    list-style: none;
+    padding: 0;
+    margin: 0 0 -10px;
+
+    > * {
+        margin: 0 10px 10px 0;
+    }
+
+    .name {
+        display: none;
+    }
+}
+
+.avatar {
+    border-radius: 4px;
+}

app/models/crate.js

@@ -20,7 +20,6 @@ export default class Crate extends Model {
 
   @hasMany('versions', { async: true }) versions;
 
-  @hasMany('users', { async: true }) owners;
   @hasMany('teams', { async: true }) owner_team;
   @hasMany('users', { async: true }) owner_user;
   @hasMany('version-download', { async: true }) version_downloads;
@@ -43,6 +42,12 @@ export default class Crate extends Model {
     }
   }
 
+  get owners() {
+    let teams = this.owner_team.toArray() ?? [];
+    let users = this.owner_user.toArray() ?? [];
+    return [...teams, ...users];
+  }
+
   follow = memberAction({ type: 'PUT', path: 'follow' });
   unfollow = memberAction({ type: 'DELETE', path: 'follow' });
 

tests/acceptance/crate-test.js

@@ -148,7 +148,7 @@ module('Acceptance | crate page', function (hooks) {
     this.server.loadFixtures();
 
     await visit('/crates/nanomsg');
-    await click('[data-test-owners] [data-test-user-link="blabaere"]');
+    await click('[data-test-owners] [data-test-owner-link="blabaere"]');
 
     assert.equal(currentURL(), '/users/blabaere');
     assert.dom('[data-test-heading] [data-test-username]').hasText('blabaere');
@@ -158,7 +158,7 @@ module('Acceptance | crate page', function (hooks) {
     this.server.loadFixtures();
 
     await visit('/crates/nanomsg');
-    await click('[data-test-owners] [data-test-team-link="github:org:thehydroimpulse"]');
+    await click('[data-test-owners] [data-test-owner-link="github:org:thehydroimpulse"]');
 
     assert.equal(currentURL(), '/teams/github:org:thehydroimpulse');
     assert.dom('[data-test-heading] [data-test-team-name]').hasText('thehydroimpulseteam');
@@ -170,7 +170,7 @@ module('Acceptance | crate page', function (hooks) {
     await visit('/crates/nanomsg');
 
     assert
-      .dom('[data-test-owners] [data-test-team-link="github:org:thehydroimpulse"] img')
+      .dom('[data-test-owners] [data-test-owner-link="github:org:thehydroimpulse"] img')
       .hasAttribute('src', 'https://avatars.githubusercontent.com/u/565790?v=3&s=64');
 
     assert.dom('[data-test-owners] li').exists({ count: 4 });
@@ -181,7 +181,7 @@ module('Acceptance | crate page', function (hooks) {
 
     await visit('/crates/nanomsg');
 
-    assert.dom('[data-test-owners] [data-test-team-link="github:org:thehydroimpulse"]').exists();
+    assert.dom('[data-test-owners] [data-test-owner-link="github:org:thehydroimpulse"]').exists();
     assert.dom('[data-test-owners] li').exists({ count: 4 });
   });