Allows yanking a crate from the web UI

Author: thiagoarrais

app/components/yank-button.hbs

@@ -0,0 +1,31 @@
+{{#if @version.yanked}}
+  <button
+    type="button"
+    local-class="button"
+    ...attributes
+    data-test-version-unyank-button={{@version.num}}
+    disabled={{@version.unyankTask.isRunning}}
+    {{on "click" (perform @version.unyankTask)}}
+  >
+    {{#if @version.unyankTask.isRunning }}
+       Unyanking...
+    {{else}}
+       Unyank
+    {{/if}}
+  </button>
+{{else}}
+  <button
+    type="button"
+    local-class="button"
+    ...attributes
+    data-test-version-yank-button={{@version.num}}
+    disabled={{@version.yankTask.isRunning}}
+    {{on "click" (perform @version.yankTask)}}
+  >
+    {{#if @version.yankTask.isRunning }}
+       Yanking...
+    {{else}}
+       Yank
+    {{/if}}
+  </button>
+{{/if}}

app/components/yank-button.js

@@ -0,0 +1,5 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  tagName: '',
+});

app/components/yank-button.module.css

@@ -0,0 +1,5 @@
+.button {
+    composes: yellow-button from '../styles/shared/buttons.module.css';
+    padding: 6px 12px;
+    border-radius: 18px;
+}

app/controllers/crate/versions.js

@@ -0,0 +1,11 @@
+import Controller from '@ember/controller';
+import { computed } from '@ember/object';
+import { inject as service } from '@ember/service';
+
+export default Controller.extend({
+  session: service(),
+
+  isOwner: computed('model.owner_user', 'session.currentUser.id', function () {
+    return this.get('model.owner_user').findBy('id', this.get('session.currentUser.id'));
+  }),
+});

app/models/version.js

@@ -60,4 +60,26 @@ export default class Version extends Model {
     }
   }).keepLatest())
   loadReadmeTask;
+
+  @(task(function* () {
+    let response = yield fetch(`/api/v1/crates/${this.crate.id}/${this.num}/yank`, { method: 'DELETE' });
+    if (!response.ok) {
+      throw new Error(`Yank request for ${this.crateName} v${this.num} failed`);
+    }
+    this.set('yanked', true);
+
+    return yield response.text();
+  }).keepLatest())
+  yankTask;
+
+  @(task(function* () {
+    let response = yield fetch(`/api/v1/crates/${this.crate.id}/${this.num}/unyank`, { method: 'PUT' });
+    if (!response.ok) {
+      throw new Error(`Unyank request for ${this.crateName} v${this.num} failed`);
+    }
+    this.set('yanked', false);
+
+    return yield response.text();
+  }).keepLatest())
+  unyankTask;
 }

app/styles/crate/version.module.css

@@ -273,3 +273,7 @@ div.header {
 .yanked {
     composes: yanked from '../shared/typography.module.css';
 }
+
+.version {
+    padding: 4px 0;
+}

app/styles/crate/versions.module.css

@@ -37,6 +37,7 @@
 .arrow {
     display: inline-block;
     float: right;
+    margin-left: 8px;
 
     svg {
         background: #EEECDD;

app/templates/crate/version.hbs

@@ -163,13 +163,17 @@
           <h3>Versions</h3>
           <ul>
             {{#each this.smallSortedVersions as |version|}}
-              <li>
+              <li local-class="version">
                 <LinkTo @route="crate.version" @model={{version.num}} data-test-version-link={{version.num}}>
                   {{ version.num }}
                 </LinkTo>
                 {{moment-format version.created_at 'll'}}
-                {{#if version.yanked}}
-                  <span local-class='yanked'>yanked</span>
+                {{#if this.isOwner}}
+                  <YankButton @version={{version}}/>
+                {{else}}
+                  {{#if version.yanked}}
+                    <span local-class='yanked'>yanked</span>
+                  {{/if}}
                 {{/if}}
               </li>
             {{/each}}

app/templates/crate/versions.hbs

@@ -17,9 +17,14 @@
           <span local-class='yanked'>yanked</span>
         {{/if}}
       </div>
-      <LinkTo @route="crate.version" @model={{version.num}} local-class="arrow">
-        {{svg-jar "right-arrow"}}
-      </LinkTo>
+      <div>
+        {{#if this.isOwner}}
+          <YankButton @version={{version}} />
+        {{/if}}
+        <LinkTo @route="crate.version" @model={{version.num}} local-class="arrow">
+          {{svg-jar "right-arrow"}}
+        </LinkTo>
+      </div>
     </div>
   {{/each}}
 </div>

mirage/route-handlers/crates.js

@@ -254,4 +254,28 @@ export function register(server) {
 
     return {};
   });
+
+  server.delete('/api/v1/crates/:crate_id/:version/yank', (schema, request) => {
+    const crateId = request.params.crate_id;
+    const versionNum = request.params.version;
+
+    const version = schema.versions.findBy({ crateId, num: versionNum });
+    if (!version) {
+      return notFound();
+    }
+
+    return {};
+  });
+
+  server.put('/api/v1/crates/:crate_id/:version/unyank', (schema, request) => {
+    const crateId = request.params.crate_id;
+    const versionNum = request.params.version;
+
+    const version = schema.versions.findBy({ crateId, num: versionNum });
+    if (!version) {
+      return notFound();
+    }
+
+    return {};
+  });
 }

tests/acceptance/crate-test.js

@@ -1,4 +1,4 @@
-import { click, fillIn, currentURL, currentRouteName, visit } from '@ember/test-helpers';
+import { click, fillIn, currentURL, currentRouteName, visit, waitFor } from '@ember/test-helpers';
 import { setupApplicationTest } from 'ember-qunit';
 import { module, test } from 'qunit';
 
@@ -219,6 +219,25 @@ module('Acceptance | crate page', function (hooks) {
     assert.dom('[data-test-license]').hasText('MIT/Apache-2.0');
   });
 
+  test('crates can be yanked by owner', async function (assert) {
+    this.server.loadFixtures();
+
+    let user = this.server.schema.users.findBy({ login: 'thehydroimpulse' });
+    this.authenticateAs(user);
+
+    await visit('/crates/nanomsg');
+    await click('[data-test-version-yank-button="0.5.0"]');
+    assert.dom('[data-test-version-yank-button="0.5.0"]').hasText('Yanking...');
+    assert.dom('[data-test-version-yank-button="0.5.0"]').isDisabled();
+
+    await waitFor('[data-test-version-unyank-button="0.5.0"]');
+    await click('[data-test-version-unyank-button="0.5.0"]');
+    assert.dom('[data-test-version-unyank-button="0.5.0"]').hasText('Unyanking...');
+    assert.dom('[data-test-version-unyank-button="0.5.0"]').isDisabled();
+
+    await waitFor('[data-test-version-yank-button="0.5.0"]');
+  });
+
   test('navigating to the owners page when not logged in', async function (assert) {
     this.server.loadFixtures();