# This is a combination of 8 commits.

# This is the 1st commit message:

Add admin UI for GitHub events

# This is the commit message #2:

Reorder UI, add navigation, add pagination

# This is the commit message #3:

Add admin navigation link

# This is the commit message #4:

Fix eslint

# This is the commit message #5:

Add beginning of tests

# This is the commit message #6:

Rename test and add currentRouteName assertion

# This is the commit message #7:

Add pagination helper function and get acceptance test passing

# This is the commit message #8:

Clean up paginate logic

app/controllers/admin/github-events/index.js

@@ -0,0 +1,7 @@
+import Controller from '@ember/controller';
+
+export default Controller.extend({
+  queryParams: ['page', 'size'],
+  page: 1,
+  size: 20
+});

app/mixins/admin-route-mixin.js

@@ -0,0 +1,25 @@
+import Mixin from '@ember/object/mixin';
+import { get, set } from '@ember/object';
+import { inject as service } from '@ember/service';
+
+const NOT_AN_ADMIN = "You're not authorized to view this page.";
+
+export default Mixin.create({
+  currentUser: service(),
+  flashMessages: service(),
+  session: service(),
+
+  beforeModel(transition) {
+    let session = get(this, 'session');
+    let isAuthenticated = get(session, 'isAuthenticated');
+    let isAdmin = get(this, 'currentUser.user.admin');
+
+    if (isAuthenticated && isAdmin) {
+      return this._super(...arguments);
+    } else {
+      set(session, 'attemptedTransition', transition);
+      get(this, 'flashMessages').danger(NOT_AN_ADMIN);
+      return this.transitionTo('login');
+    }
+  }
+});

app/models/github-event.js

@@ -0,0 +1,19 @@
+import Model from 'ember-data/model';
+import attr from 'ember-data/attr';
+import { computed, get } from '@ember/object';
+
+export default Model.extend({
+  action: attr(),
+  eventType: attr(),
+  failureReason: attr(),
+  githubDeliveryId: attr(),
+  insertedAt: attr('date'),
+  payload: attr(),
+  status: attr(),
+  updatedAt: attr('date'),
+
+  prettyPayload: computed('payload', function() {
+    let payload = get(this, 'payload');
+    return JSON.stringify(payload, null, 2);
+  })
+});

app/models/user.js

@@ -4,6 +4,7 @@ import attr from 'ember-data/attr';
 import { belongsTo, hasMany } from 'ember-data/relationships';
 
 export default Model.extend({
+  admin: attr(),
   biography: attr(),
   cloudinaryPublicId: attr(),
   email: attr(),

app/router.js

@@ -28,6 +28,12 @@ const Router = EmberRouter.extend(RouterScroll, {
 Router.map(function() {
   this.route('about');
 
+  this.route('admin', function() {
+    this.route('github-events', { path: '/github/events' }, function() {
+      this.route('github-event', { path: '/:id' });
+    });
+  });
+
   this.route('github', {
     path: '/oauth/github'
   });

app/routes/admin.js

@@ -0,0 +1,5 @@
+import Route from '@ember/routing/route';
+import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
+import AdminRouteMixin from 'code-corps-ember/mixins/admin-route-mixin';
+
+export default Route.extend(AuthenticatedRouteMixin, AdminRouteMixin, { });

app/routes/admin/github-events/github-event.js

@@ -0,0 +1,7 @@
+import Route from '@ember/routing/route';
+
+export default Route.extend({
+  model(params) {
+    return this.store.find('github-event', params.id);
+  }
+});

app/routes/admin/github-events/index.js

@@ -0,0 +1,21 @@
+import Route from '@ember/routing/route';
+
+export default Route.extend({
+  model(params) {
+    return this.store.query('github-event', {
+      page: {
+        page: params.page,
+        'page-size': params.size
+      }
+    });
+  },
+
+  queryParams: {
+    page: {
+      refreshModel: true
+    },
+    size: {
+      refreshModel: true
+    }
+  }
+});

app/routes/project/checkout.js

@@ -1,7 +1,7 @@
 import { inject as service } from '@ember/service';
 import Route from '@ember/routing/route';
 import RSVP from 'rsvp';
-import { set, get } from '@ember/object';
+import { get, set } from '@ember/object';
 
 const ALREADY_A_SUBSCRIBER = "You're already supporting this project.";
 

app/serializers/application.js

@@ -4,6 +4,41 @@ import { singularize } from 'ember-inflector';
 const { JSONAPISerializer } = DS;
 
 export default JSONAPISerializer.extend({
+  createPageMeta(data) {
+    let meta = {};
+
+    Object.keys(data).forEach((type) => {
+      let link = data[type];
+      meta[type] = {};
+      let a = document.createElement('a');
+      a.href = link;
+
+      a.search.slice(1).split('&').forEach((pairs) => {
+        let [param, value] = pairs.split('=');
+        if (param == 'page[page]') {
+          meta[type].number = parseInt(value);
+        }
+        if (param == 'page[page-size]') {
+          meta[type].size = parseInt(value);
+        }
+      });
+      a = null;
+    });
+
+    return meta;
+  },
+
+  normalizeQueryResponse(store, klass, payload) {
+    let result = this._super(...arguments);
+    result.meta = result.meta || {};
+
+    if (payload.links) {
+      result.meta.pagination = this.createPageMeta(payload.links);
+    }
+
+    return result;
+  },
+
   // Our Phoenix API uses singularized model names
   payloadKeyFromModelName(modelName) {
     return singularize(modelName);

app/styles/_buttons.scss

@@ -47,14 +47,10 @@
   font-weight: 500;
   padding: 11px 14px;
   text-decoration: none;
+  user-select: none;
 
   &:focus {
     outline: none;
-    @include focus($default-color);
-
-    &.danger {
-      @include focus($danger-color);
-    }
   }
 
   &.large {
@@ -113,6 +109,10 @@
     color: $text--dark;
     font-weight: 400;
 
+    &:disabled, &.disabled {
+      background: $background-gray;
+    }
+
     &:focus {
       background: $clear-focus;
       border-color: darken($gray, 2%);
@@ -131,7 +131,7 @@
 
   &.danger {
     @include colorButton($danger-color);
-    &:disabled {
+    &:disabled, &.disabled {
       @include colorButton($clear-hover);
       color: $red;
     }
@@ -236,14 +236,14 @@
     background-image: linear-gradient(white, $clear-hover);
     border-color: $gray;
 
-    &:disabled {
-      background: white;
+    &:disabled, &.disabled {
+      background: $background-gray;
     }
   }
 
   &.danger {
     @include hoverButton($danger-color);
-    &:disabled {
+    &:disabled, &.disabled {
       @include colorButton($clear-hover);
       color: $red;
     }
@@ -263,8 +263,8 @@
     border: 1px solid $red;
   }
 
-  &:disabled {
-    cursor: not-allowed;
+  &:disabled, &.disabled {
+    cursor: default;
   }
 }
 
@@ -336,18 +336,12 @@ p {
   }
 
   &.clear {
-    &:disabled {
+    &:disabled, &.disabled {
       background: white;
     }
   }
 }
 
-select {
-  &:focus {
-    @include focus($default-color);
-  }
-}
-
 .button__github {
   span {
     display: inline-block;

app/styles/app.scss

@@ -220,6 +220,11 @@
 @import "templates/about";
 @import "templates/team";
 
+//
+// TEMPLATES - ADMIN
+//
+@import "templates/admin/github-events";
+
 //
 // TEMPLATES - PROJECTS
 //

app/styles/components/dropdown-menu.scss

@@ -72,6 +72,16 @@
 }
 
 .dropdown__options {
+  border-bottom: 1px solid $border-gray;
+  padding-bottom: 1em;
+  margin-bottom: 1em;
+
+  &:last-child {
+    border-bottom: none;
+    padding-bottom: 0;
+    margin-bottom: 0;
+  }
+
   li {
     display: block;
     float: none;

app/styles/templates/admin/github-events.scss

@@ -0,0 +1,99 @@
+.admin-main {
+  @include span-columns(10);
+}
+
+.admin-sidebar {
+  @include span-columns(2);
+  display: flex;
+
+  ul {
+    flex: 1;
+  }
+
+  li {
+    width: 100%;
+
+    a {
+      align-items: center;
+      color: #333;
+      display: flex;
+      font-weight: 600;
+      padding: 0.5em 0;
+
+      &.active, &:hover {
+        color: $blue;
+        fill: $blue;
+        transition: none;
+      }
+    }
+
+    span {
+      display: inline-flex;
+      padding-right: 7px;
+    }
+  }
+}
+
+.log-rows {
+  display: table;
+  width: 100%;
+}
+
+.log-row {
+  color: #525f7f;
+  display: table-row;
+  font-size: $body-font-size-normal;
+  position: relative;
+
+  code {
+    background: none;
+    font-size: $body-font-size-small;
+
+    &.errored {
+      background: $red;
+      color: white;
+      padding: 2px 4px;
+    }
+  }
+
+  &--header {
+    background: #F6F9FC;
+    color: $gray--darkest;
+    font-size: $body-font-size-small;
+    font-weight: 700;
+    text-transform: uppercase;
+  }
+
+  &:hover {
+    color: $gray--darkest;
+  }
+
+  &:last-child {
+    .log-cell {
+      border-bottom: 1px solid $border-gray;
+    }
+  }
+}
+
+.log-cell {
+  border-top: 1px solid $border-gray;
+  display: table-cell;
+  line-height: 22px;
+  padding: 9px 14px;
+  position: relative;
+  vertical-align: top;
+  white-space: nowrap;
+
+  &:last-child {
+    text-align: right;
+  }
+
+  &--shrink {
+    width: 1px;
+  }
+}
+
+.log-pagination {
+  margin: 1em 0;
+  text-align: right;
+}

app/templates/admin.hbs

@@ -0,0 +1,21 @@
+<div class="container">
+  <div class="admin-sidebar">
+    <ul>
+      <li>
+        {{#link-to "admin.index"}}
+          {{svg/sprite-icon icon="user-48" style="solid-dark-gray"}}
+          <span>Admin</span>
+        {{/link-to}}
+      </li>
+      <li>
+        {{#link-to "admin.github-events"}}
+          {{svg/sprite-icon icon="github-48" style="solid-dark-gray"}}
+          <span>GitHub Events</span>
+        {{/link-to}}
+      </li>
+    </ul>
+  </div>
+  <div class="admin-main">
+    {{outlet}}
+  </div>
+</div>