Auto merge of #3278 - Turbo87:versions-sort, r=locks

crate.versions: Add "Sort By" dropdown with "Date" and "SemVer" options

<img width="213" alt="Bildschirmfoto 2021-02-10 um 23 22 11" src="https://user-images.githubusercontent.com/141300/107580473-e56a2e00-6bf6-11eb-95b6-e4249db8a742.png">

and if "Date" is chose, the following situation, where a bunch of patch releases for older versions got published, will be more visible:

<img width="975" alt="Bildschirmfoto 2021-02-10 um 23 22 21" src="https://user-images.githubusercontent.com/141300/107580465-e1d6a700-6bf6-11eb-97ba-2b0db4b59683.png">

Author: bors

app/components/sort-dropdown/option.hbs

@@ -1,3 +1,3 @@
-<@menu.Item>
+<@menu.Item ...attributes>
   <LinkTo @query={{@query}}>{{yield}}</LinkTo>
 </@menu.Item>

app/controllers/crate/versions.js

@@ -0,0 +1,20 @@
+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+
+export default class SearchController extends Controller {
+  queryParams = ['sort'];
+
+  @tracked sort;
+
+  get currentSortBy() {
+    return this.sort === 'semver' ? 'SemVer' : 'Date';
+  }
+
+  get sortedVersions() {
+    let versions = this.model.versions.toArray();
+
+    return this.sort === 'semver'
+      ? versions.sort((a, b) => b.semver.compare(a.semver))
+      : versions.sort((a, b) => b.created_at - a.created_at);
+  }
+}

app/styles/crate/versions.module.css

@@ -1,5 +1,8 @@
-.back-link {
-    margin-bottom: 20px;
+.results-meta {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
 }
 
 .page-description {

app/templates/crate/versions.hbs

@@ -1,6 +1,18 @@
 <CrateHeader @crate={{this.model}} />
 
-<LinkTo @route="crate" @model={{this.model}} local-class="back-link">&#11013; Back to Main Page</LinkTo>
+<div local-class="results-meta">
+  <LinkTo @route="crate" @model={{this.model}} local-class="back-link">
+    &#11013; Back to Main Page
+  </LinkTo>
+
+  <div data-test-search-sort>
+    <span local-class="sort-by-label">Sort by </span>
+    <SortDropdown @current={{this.currentSortBy}} as |sd|>
+      <sd.Option @query={{hash sort="date"}} data-test-date-sort>Date</sd.Option>
+      <sd.Option @query={{hash sort="semver"}} data-test-semver-sort>SemVer</sd.Option>
+    </SortDropdown>
+  </div>
+</div>
 
 <span local-class="page-description" data-test-page-description>
   All <strong>{{ this.model.versions.length }}</strong>
@@ -9,9 +21,9 @@
 </span>
 
 <ul local-class="list">
-  {{#each this.model.versions as |version|}}
+  {{#each this.sortedVersions as |version|}}
     <li>
-      <VersionList::Row @version={{version}} local-class="row" />
+      <VersionList::Row @version={{version}} local-class="row" data-test-version={{version.num}} />
     </li>
   {{/each}}
 </ul>

tests/acceptance/versions-test.js

@@ -0,0 +1,28 @@
+import { click, currentURL, findAll, visit } from '@ember/test-helpers';
+import { module, test } from 'qunit';
+
+import { setupApplicationTest } from 'cargo/tests/helpers';
+
+module('Acceptance | crate versions page', function (hooks) {
+  setupApplicationTest(hooks);
+
+  test('show versions sorted by date', async function (assert) {
+    let crate = this.server.create('crate', { name: 'nanomsg' });
+    this.server.create('version', { crate, num: '0.1.0', created_at: '2017-01-01' });
+    this.server.create('version', { crate, num: '0.2.0', created_at: '2018-01-01' });
+    this.server.create('version', { crate, num: '0.3.0', created_at: '2019-01-01' });
+    this.server.create('version', { crate, num: '0.2.1', created_at: '2020-01-01' });
+
+    await visit('/crates/nanomsg/versions');
+    assert.equal(currentURL(), '/crates/nanomsg/versions');
+
+    let versions = findAll('[data-test-version]').map(it => it.dataset.testVersion);
+    assert.deepEqual(versions, ['0.2.1', '0.3.0', '0.2.0', '0.1.0']);
+
+    await click('[data-test-current-order]');
+    await click('[data-test-semver-sort] a');
+
+    versions = findAll('[data-test-version]').map(it => it.dataset.testVersion);
+    assert.deepEqual(versions, ['0.3.0', '0.2.1', '0.2.0', '0.1.0']);
+  });
+});