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

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']);
+  });
+});