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

Author: Turbo87

app/components/crate-sidebar.hbs

@@ -171,4 +171,17 @@
       </div>
     {{/if}}
   </div>
+
+  {{#if this.playgroundLink}}
+    <div>
+      <a
+        href={{this.playgroundLink}}
+        target="_blank"
+        rel="noopener noreferrer"
+        local-class="playground-button"
+      >
+        Try on Rust Playground
+      </a>
+    </div>
+  {{/if}}
 </section>

app/components/crate-sidebar.js

@@ -7,6 +7,7 @@ const NUM_VERSIONS = 5;
 
 export default class DownloadGraph extends Component {
   @service session;
+  @service playground;
 
   @computed('args.crate.owner_user', 'session.currentUser.id')
   get isOwner() {
@@ -21,4 +22,14 @@ export default class DownloadGraph extends Component {
   }
 
   @gt('sortedVersions.length', NUM_VERSIONS) hasMoreVersions;
+
+  get playgroundLink() {
+    let playgroundCrates = this.playground.crates;
+    if (!playgroundCrates) return;
+
+    let playgroundCrate = playgroundCrates.find(it => it.name === this.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`;
+  }
 }

app/components/crate-sidebar.module.css

@@ -118,3 +118,9 @@ ul.owners, ul.keywords {
 .more-versions-link {
     composes: small from '../styles/shared/typography.module.css';
 }
+
+.playground-button {
+    composes: yellow-button small from '../styles/shared/buttons.module.css';
+    justify-content: center;
+    margin-top: 20px;
+}

app/routes/crate/version.js

@@ -7,6 +7,7 @@ import { AjaxError } from '../../utils/ajax';
 
 export default class VersionRoute extends Route {
   @service notifications;
+  @service playground;
 
   async model(params) {
     let crate = this.modelFor('crate');
@@ -49,6 +50,9 @@ export default class VersionRoute extends Route {
         }
       });
     }
+
+    // load Rust Playground crates list
+    this.playground.loadCrates();
   }
 
   serialize(model) {