CrateSidebar: Show "Try on Rust Playground" button for crates that are available there

Author: Turbo87

app/components/crate-sidebar.hbs

@@ -130,4 +130,22 @@
       {{/if}}
     {{/unless}}
   </div>
+
+  {{#if this.playgroundLink}}
+    <div>
+      <a
+        href={{this.playgroundLink}}
+        target="_blank"
+        rel="noopener noreferrer"
+        local-class="playground-button"
+        data-test-playground-button
+      >
+        Try on Rust Playground
+      </a>
+      <p local-class="playground-help" data-test-playground-help>
+        The top 100 crates are available on the Rust Playground for you to
+        try out directly in your browser.
+      </p>
+    </div>
+  {{/if}}
 </section>

app/components/crate-sidebar.js

@@ -1,10 +1,16 @@
 import { computed } from '@ember/object';
 import { gt, readOnly } from '@ember/object/computed';
+import { inject as service } from '@ember/service';
 import Component from '@glimmer/component';
 
+import * as Sentry from '@sentry/browser';
+import { didCancel } from 'ember-concurrency';
+
 const NUM_VERSIONS = 5;
 
 export default class DownloadGraph extends Component {
+  @service playground;
+
   @readOnly('args.crate.versions') sortedVersions;
 
   @computed('sortedVersions')
@@ -17,4 +23,28 @@ export default class DownloadGraph extends Component {
   get tomlSnippet() {
     return `${this.args.crate.name} = "${this.args.version.num}"`;
   }
+
+  get playgroundLink() {
+    let playgroundCrates = this.playground.crates;
+    if (!playgroundCrates) return;
+
+    let playgroundCrate = playgroundCrates.find(it => it.name === this.args.crate.name);
+    if (!playgroundCrate) return;
+
+    return `https://play.rust-lang.org/?code=use%20${playgroundCrate.id}%3B%0A%0Afn%20main()%20%7B%0A%20%20%20%20%2F%2F%20try%20using%20the%20%60${playgroundCrate.id}%60%20crate%20here%0A%7D`;
+  }
+
+  constructor() {
+    super(...arguments);
+
+    // load Rust Playground crates list, if necessary
+    if (!this.playground.crates) {
+      this.playground.loadCratesTask.perform().catch(error => {
+        if (!(didCancel(error) || error.isServerError || error.isNetworkError)) {
+          // report unexpected errors to Sentry
+          Sentry.captureException(error);
+        }
+      });
+    }
+  }
 }

app/components/crate-sidebar.module.css

@@ -119,3 +119,17 @@ ul.owners, ul.keywords {
 .reverse-deps-link {
     composes: small from '../styles/shared/typography.module.css';
 }
+
+.playground-button {
+    composes: yellow-button small from '../styles/shared/buttons.module.css';
+    justify-content: center;
+    width: 220px;
+    margin-top: 20px;
+}
+
+.playground-help {
+    composes: small from '../styles/shared/typography.module.css';
+    max-width: 220px;
+    text-align: justify;
+    line-height: 1.3em;
+}

tests/components/crate-sidebar/playground-button-test.js

@@ -0,0 +1,93 @@
+import { render, settled, waitFor } from '@ember/test-helpers';
+import { module, test } from 'qunit';
+
+import { defer } from 'rsvp';
+
+import { hbs } from 'ember-cli-htmlbars';
+
+import { setupRenderingTest } from 'cargo/tests/helpers';
+
+import setupMirage from '../../helpers/setup-mirage';
+
+module('Component | CrateSidebar | Playground Button', function (hooks) {
+  setupRenderingTest(hooks);
+  setupMirage(hooks);
+
+  hooks.beforeEach(function () {
+    let crates = [
+      { name: 'addr2line', version: '0.14.1', id: 'addr2line' },
+      { name: 'adler', version: '0.2.3', id: 'adler' },
+      { name: 'adler32', version: '1.2.0', id: 'adler32' },
+      { name: 'ahash', version: '0.4.7', id: 'ahash' },
+      { name: 'aho-corasick', version: '0.7.15', id: 'aho_corasick' },
+      { name: 'ansi_term', version: '0.12.1', id: 'ansi_term' },
+      { name: 'ansi_term', version: '0.11.0', id: 'ansi_term_0_11_0' },
+    ];
+
+    this.server.get('https://play.rust-lang.org/meta/crates', { crates });
+  });
+
+  test('button is hidden for unavailable crates', async function (assert) {
+    let crate = this.server.create('crate', { name: 'foo' });
+    this.server.create('version', { crate, num: '1.0.0' });
+
+    let store = this.owner.lookup('service:store');
+    this.crate = await store.findRecord('crate', crate.name);
+    this.version = (await this.crate.versions).firstObject;
+
+    await render(hbs`<CrateSidebar @crate={{this.crate}} @version={{this.version}} />`);
+    assert.dom('[data-test-playground-button]').doesNotExist();
+    assert.dom('[data-test-playground-help]').doesNotExist();
+  });
+
+  test('button is visible for available crates', async function (assert) {
+    let crate = this.server.create('crate', { name: 'aho-corasick' });
+    this.server.create('version', { crate, num: '1.0.0' });
+
+    let store = this.owner.lookup('service:store');
+    this.crate = await store.findRecord('crate', crate.name);
+    this.version = (await this.crate.versions).firstObject;
+
+    let expectedHref =
+      'https://play.rust-lang.org/?code=use%20aho_corasick%3B%0A%0Afn%20main()%20%7B%0A%20%20%20%20%2F%2F%20try%20using%20the%20%60aho_corasick%60%20crate%20here%0A%7D';
+
+    await render(hbs`<CrateSidebar @crate={{this.crate}} @version={{this.version}} />`);
+    assert.dom('[data-test-playground-button]').hasAttribute('href', expectedHref);
+    assert.dom('[data-test-playground-help]').exists();
+  });
+
+  test('button is hidden while Playground request is pending', async function (assert) {
+    let crate = this.server.create('crate', { name: 'aho-corasick' });
+    this.server.create('version', { crate, num: '1.0.0' });
+
+    let deferred = defer();
+    this.server.get('https://play.rust-lang.org/meta/crates', deferred.promise);
+
+    let store = this.owner.lookup('service:store');
+    this.crate = await store.findRecord('crate', crate.name);
+    this.version = (await this.crate.versions).firstObject;
+
+    render(hbs`<CrateSidebar @crate={{this.crate}} @version={{this.version}} />`);
+    await waitFor('[data-test-versions]');
+    assert.dom('[data-test-playground-button]').doesNotExist();
+    assert.dom('[data-test-playground-help]').doesNotExist();
+
+    deferred.resolve({ crates: [] });
+    await settled();
+  });
+
+  test('button is hidden if the Playground request fails', async function (assert) {
+    let crate = this.server.create('crate', { name: 'aho-corasick' });
+    this.server.create('version', { crate, num: '1.0.0' });
+
+    this.server.get('https://play.rust-lang.org/meta/crates', {}, 500);
+
+    let store = this.owner.lookup('service:store');
+    this.crate = await store.findRecord('crate', crate.name);
+    this.version = (await this.crate.versions).firstObject;
+
+    await render(hbs`<CrateSidebar @crate={{this.crate}} @version={{this.version}} />`);
+    assert.dom('[data-test-playground-button]').doesNotExist();
+    assert.dom('[data-test-playground-help]').doesNotExist();
+  });
+});