Merge #952

952: Maintenence badge front end r=carols10cents

Start front end work for #704 by creating a maintenance badge component. I'm not quite sure what the alias() function does in ember.js, think it takes out the attributes from the badges for a crate?

I'm going to work on all the frontend changes here, since the tests failed when I attempted to add the fixture without the badge component.

NOTE: If #996 is approved, I'll have to change this PR to work with it.

Author: bors-voyager[bot]

app/components/badge-maintenance.js

@@ -0,0 +1,33 @@
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+import { alias } from '@ember/object/computed';
+
+export default Component.extend({
+    tagName: 'span',
+    classNames: ['badge'],
+    escapedStatus: computed('badge', function() {
+        return this.get('badge.attributes.status').replace(/-/g, '--');
+    }),
+    none: computed('badge', function() {
+        return this.get('badge.attributes.status') === 'none'
+        || !this.get('badge.attributes.status');
+    }),
+    status: alias('badge.attributes.status'),
+    color: computed('badge', function() {
+        switch (this.get('badge.attributes.status')) {
+        case 'actively-developed':
+            return 'brightgreen';
+        case 'passively-maintained':
+            return 'yellowgreen';
+        case 'as-is':
+            return 'yellow';
+        case 'experimental':
+            return 'blue';
+        case 'looking-for-maintainer':
+            return 'orange';
+        case 'deprecated':
+            return 'red';
+        }
+    }),
+    text: 'Maintenance intention for this crate'
+});

app/templates/components/badge-maintenance.hbs

@@ -0,0 +1,7 @@
+{{#unless none}}
+    <img
+        src="https://img.shields.io/badge/maintenance-{{escapedStatus}}-{{color}}.svg"
+        alt="{{text}}"
+        title="{{text}}"
+    />
+{{/unless}}

mirage/fixtures/crates.js

@@ -1,6 +1,11 @@
 /* eslint-disable quotes */
 export default [{
-    "badges": [],
+    "badges": [{
+        "badge_type": "maintenance",
+        "attributes": {
+            "value": "actively-developed"
+        }
+    }],
     "categories": [],
     "created_at": "2014-12-08T02:08:06Z",
     "description": "A high-level, Rust idiomatic wrapper around nanomsg.",
@@ -191,6 +196,12 @@ export default [{
     "updated_at": "2015-11-11T00:10:43Z",
     "versions": null
 }, {
+    "badges": [{
+        "badge_type": "maintenance",
+        "attributes": {
+            "status": "actively-developed"
+        }
+    }],
     "created_at": "2014-11-23T09:01:21Z",
     "description": "A Kinetic protocol library written in Rust",
     "documentation": "https://icorderi.github.io/kinetic-rust/doc/kinetic/",

tests/acceptance/search-test.js

@@ -25,6 +25,7 @@ test('searching for "rust"', async function(assert) {
 
     hasText(assert, '#crates .row:first .desc .summary', 'A Kinetic protocol library written in Rust');
     hasText(assert, '#crates .row:first .downloads', 'All-Time: 225');
+    findWithAssert('#crates .row:first .desc .info img[alt="Maintenance intention for this crate"]');
 });
 
 test('pressing S key to focus the search bar', async function(assert) {