Add author of gist and original author (forked gist)

app/components/gist-footer.js

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

app/components/user-profile-link.js

@@ -0,0 +1,10 @@
+import Component from '@ember/component';
+import { alias } from '@ember/object/computed';
+
+export default Component.extend({
+  tagName: 'a',
+  classNames: ['user-link'],
+  attributeBindings: ['href', 'target'],
+  target: '_blank',
+  href: alias('user.htmlUrl'),
+});

app/models/gist.js

@@ -2,7 +2,7 @@ import DS from 'ember-data';
 import Ember from 'ember';
 import { memberAction } from 'ember-api-actions';
 
-const { attr, hasMany } = DS;
+const { attr, hasMany, belongsTo } = DS;
 const {
   computed,
   computed: { oneWay },
@@ -26,6 +26,11 @@ export default DS.Model.extend({
     return (this.get('id')||'').substring(0,7);
   }),
 
+  owner: belongsTo('user', { async: false }),
+
+  forkOf: belongsTo('gist', { async: false, inverse: null }),
+
+
   /**
    * Just call this action to fork
    * See https://developer.github.com/v3/gists/#fork-a-gist

app/models/user.js

@@ -7,8 +7,13 @@ const { computed } = Ember;
 export default DS.Model.extend({
   login: attr('string'),
   avatarUrl: attr('string'),
+  htmlUrl: attr('string'),
 
   avatarUrl32: computed('avatarUrl', function() {
     return this.get('avatarUrl') + '&s=32';
-  })
+  }),
+
+  avatarUrl16: computed('avatarUrl', function() {
+    return this.get('avatarUrl') + '&s=16';
+  }),
 });

app/serializers/gist.js

@@ -3,7 +3,9 @@ import ApplicationSerializer from './application';
 export default ApplicationSerializer.extend({
   attrs: {
     files: { embedded: 'always' },
-    history: { embedded: 'always', deserialize: 'records', serialize: false }
+    history: { embedded: 'always', deserialize: 'records', serialize: false },
+    owner: { embedded: 'always', deserialize: 'records', serialize: false },
+    forkOf: { embedded: 'always', deserialize: 'record', serialize: false }
   },
 
   init() {
@@ -29,6 +31,10 @@ export default ApplicationSerializer.extend({
     if (payload.owner) {
       payload.owner_login = payload.owner.login;
     }
+    //Normalise files entries for fork_of gist
+    if (payload.fork_of) {
+      this.normalizeFiles(payload.fork_of, isArray);
+    }
   },
 
   normalizeFiles(payload, isArray) {

app/styles/_footer.scss

@@ -0,0 +1,54 @@
+footer {
+
+  height: $footer-height;
+  line-height: $footer-height;
+
+  @media (min-width: $screen-md-min) {
+    position: absolute;
+    width: 100%;
+    bottom: 0px;
+    left: 0px;
+    border-top: $footer-border;
+    text-align: right;
+  }
+
+  @media (max-width: $screen-md-min) {
+    margin-left: -15px;
+    margin-right: -15px;
+    border-bottom: $footer-border;
+    position: relative;
+    z-index: 100;
+    opacity: 1;
+    text-align: center;
+  }
+  color: #666;
+  background: $footer-bg;
+  padding: 0 1.5rem 0;
+
+  a {
+    color: #666;
+    cursor: pointer;
+
+    &:hover {
+      border-bottom: dotted 1px;
+      text-decoration: none;
+    }
+  }
+
+  .user-link {
+    text-transform: uppercase;
+    font-weight: 500;
+
+    img {
+      width: 16px;
+      height: 16px;
+      border-radius: 3px;
+      margin-right: 2px;
+      margin-top: -2px;
+    }
+  }
+
+  .gist-link {
+    font-weight: 500;
+  }
+}

app/styles/_twiddle-panes.scss

@@ -10,6 +10,10 @@
   @media (min-width: $screen-md-min) {
     display: -webkit-flex;
     display: flex;
+    bottom: $footer-height;
+  }
+  @media (max-width: $screen-md-min) {
+    padding-top: $footer-height;
   }
 
   .twiddle-pane {

app/styles/_variables.scss

@@ -26,6 +26,10 @@ $code-header-height: 60px;
 $url-bar-height: 30px;
 $url-bar-padding: 6px;
 
+$footer-height: 30px;
+$footer-bg: #f2ece9;
+$footer-border: 1px solid #e5dbd6;
+
 $font-size: 13px;
 $font-size-larger: 15px;
 

app/styles/app.scss

@@ -8,3 +8,4 @@
 @import "output-pane";
 @import "dropdown";
 @import "saved-twiddles";
+@import "footer";

app/templates/components/gist-footer.hbs

@@ -0,0 +1,14 @@
+{{#if owner}}
+  Author: {{user-profile-link user=owner}}
+{{else}}
+  No author (new twiddle)
+{{/if}}
+
+{{#if originalGist}}
+  |
+  Fork from: {{user-profile-link user=originalGist.owner}}'s gist
+  |
+  {{#link-to 'gist.edit' originalGist.id class="gist-link" title="Open original gist in a new ember-twiddle" target="_blank"}}
+    <span class="glyphicon glyphicon-new-window"></span>&nbsp;Open original gist
+  {{/link-to}}
+{{/if}}

app/templates/components/main-gist.hbs

@@ -44,3 +44,5 @@
             exitFullScreen=(action "exitFullScreen")
             switchTests=(action "switchTests")
 }}
+
+{{gist-footer owner=model.owner originalGist=model.forkOf}}

app/templates/components/user-profile-link.hbs

@@ -0,0 +1 @@
+<img src={{user.avatarUrl16}} />{{user.login}}

tests/helpers/setup-router.js

@@ -0,0 +1,4 @@
+export default function({ container }) {
+  const router = container.lookup('router:main');
+  router.setupRouter();
+}

tests/integration/components/gist-footer-test.js

@@ -0,0 +1,72 @@
+import Ember from "ember";
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+import setupRouter from '../../helpers/setup-router';
+
+moduleForComponent('owner-info', 'Integration | Component | gist footer', {
+  integration: true,
+  setup() {
+    setupRouter(this);
+  }
+});
+
+test('it renders with author and fork', function(assert) {
+
+  this.set('model', Ember.Object.create({
+    owner: {
+      login: 'octocat',
+      avatarUrl16: 'fake16.png',
+      htmlUrl: 'https://github.com/octocat'
+    },
+    forkOf: {
+      id: 'fakegistid',
+      owner: {
+        login: 'romgere',
+        avatarUrl16: 'fake16.png',
+        htmlUrl: 'https://github.com/romgere'
+      }
+    }
+  }));
+
+  this.render(hbs`{{gist-footer owner=model.owner originalGist=model.forkOf}}`);
+
+  assert.equal(this.$('footer').text().trim().replace(/[\t\n\s]+/g, " "), 'Author: octocat | Fork from: romgere \'s gist | Open original gist');
+
+  assert.equal(this.$('footer .user-link').length, 2);
+
+  assert.equal(this.$('footer a:last-child').attr('href'), '/fakegistid');
+
+});
+
+test('it renders with author and no fork', function(assert) {
+
+  this.set('model', Ember.Object.create({
+    owner: {
+      login: 'octocat',
+      avatarUrl16: 'fake16.png',
+      htmlUrl: 'https://github.com/octocat'
+    },
+    forkOf: null
+  }));
+
+  this.render(hbs`{{gist-footer owner=model.owner originalGist=model.forkOf}}`);
+
+  assert.equal(this.$('footer').text().trim().replace(/[\t\n\s]+/g, " "), 'Author: octocat');
+  assert.equal(this.$('footer .user-link').length, 1);
+  assert.equal(this.$('footer a').length, 1);
+
+});
+
+test('it renders without author (new twiddle)', function(assert) {
+
+  this.set('model', Ember.Object.create({
+    owner: null,
+    forkOf: null
+  }));
+
+  this.render(hbs`{{gist-footer owner=model.owner originalGist=model.forkOf}}`);
+
+  assert.equal(this.$('footer').text().trim().replace(/[\t\n\s]+/g, " "), 'No author (new twiddle)');
+
+  assert.equal(this.$('footer a').length, 0);
+});

tests/integration/components/user-profile-link-test.js

@@ -0,0 +1,24 @@
+import Ember from "ember";
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('user-profile-link', 'Integration | Component | user profile link', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+
+  this.set('user', Ember.Object.create({
+    login: 'octocat',
+    avatarUrl16: 'fake16.png',
+    htmlUrl: 'https://github.com/octocat'
+  }));
+
+  this.render(hbs`{{user-profile-link user=user}}`);
+
+  assert.equal(this.$().text().trim(), 'octocat');
+
+  assert.equal(this.$('.user-link').attr('target'), '_blank');
+  assert.equal(this.$('.user-link').attr('href'), 'https://github.com/octocat');
+  assert.equal(this.$('.user-link > img').attr('src'), 'fake16.png');
+});