From bf5e52ae7174bf1218f8c2976c9c7bdd51421e90 Mon Sep 17 00:00:00 2001
From: Seyi Adebajo <sadebajo@linkedin.com>
Date: Mon, 2 Apr 2018 16:27:46 -0700
Subject: [PATCH 01/10] minor updates to dataset-aclacces container type
 annotation. removes unneeded else in if template helper

---
 wherehows-web/app/components/dataset-aclaccess.ts             | 4 ++--
 wherehows-web/app/styles/components/{ => avatar}/_avatar.scss | 0
 wherehows-web/app/templates/components/dataset-aclaccess.hbs  | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)
 rename wherehows-web/app/styles/components/{ => avatar}/_avatar.scss (100%)

diff --git a/wherehows-web/app/components/dataset-aclaccess.ts b/wherehows-web/app/components/dataset-aclaccess.ts
index 61c4bf6c46..b08afd1ba4 100644
--- a/wherehows-web/app/components/dataset-aclaccess.ts
+++ b/wherehows-web/app/components/dataset-aclaccess.ts
@@ -1,6 +1,6 @@
 import Component from '@ember/component';
 import { get, set } from '@ember/object';
-import { gte } from '@ember/object/computed';
+import ComputedProperty, { gte } from '@ember/object/computed';
 import { TaskInstance, TaskProperty } from 'ember-concurrency';
 import { action } from 'ember-decorators/object';
 import { IAccessControlAccessTypeOption } from 'wherehows-web/typings/api/datasets/aclaccess';
@@ -59,7 +59,7 @@ export default class DatasetAclAccess extends Component {
    * @type {ComputedProperty<boolean>}
    * @memberof DatasetAclAccess
    */
-  hasValidExpiration = gte('selectedDate', minSelectableExpirationDate.getTime());
+  hasValidExpiration: ComputedProperty<boolean> = gte('selectedDate', minSelectableExpirationDate.getTime());
 
   /**
    * External task to remove the logged in user from the related dataset's acl
diff --git a/wherehows-web/app/styles/components/_avatar.scss b/wherehows-web/app/styles/components/avatar/_avatar.scss
similarity index 100%
rename from wherehows-web/app/styles/components/_avatar.scss
rename to wherehows-web/app/styles/components/avatar/_avatar.scss
diff --git a/wherehows-web/app/templates/components/dataset-aclaccess.hbs b/wherehows-web/app/templates/components/dataset-aclaccess.hbs
index 5011b26e6e..04e0b80509 100644
--- a/wherehows-web/app/templates/components/dataset-aclaccess.hbs
+++ b/wherehows-web/app/templates/components/dataset-aclaccess.hbs
@@ -84,7 +84,7 @@
             {{moment-format calendar.center 'MMMM YYYY'}}
 
             <p>
-              {{if hasValidExpiration (concat "Expires in " (moment-from-now calendar.selected)) ""}}
+              {{if hasValidExpiration (concat "Expires in " (moment-from-now calendar.selected))}}
             </p>
 
           </div>

From c25305d6275e3aeff056d10dc0afaf7eaa537193 Mon Sep 17 00:00:00 2001
From: Seyi Adebajo <sadebajo@linkedin.com>
Date: Tue, 3 Apr 2018 09:21:02 -0700
Subject: [PATCH 02/10] creates avatar components and initital layout

---
 .../app/components/avatars/avatar-item.ts     |  5 ++++
 .../avatars/stacked-avatars-list.ts           |  5 ++++
 wherehows-web/app/styles/components/_all.scss |  2 +-
 .../app/styles/components/avatar/_all.scss    |  1 +
 .../components/nacho/_nacho-breadcrumbs.scss  |  8 +++++--
 .../components/avatars/avatar-item.hbs        |  1 +
 .../avatars/stacked-avatars-list.hbs          | 23 +++++++++++++++++++
 7 files changed, 42 insertions(+), 3 deletions(-)
 create mode 100644 wherehows-web/app/components/avatars/avatar-item.ts
 create mode 100644 wherehows-web/app/components/avatars/stacked-avatars-list.ts
 create mode 100644 wherehows-web/app/styles/components/avatar/_all.scss
 create mode 100644 wherehows-web/app/templates/components/avatars/avatar-item.hbs
 create mode 100644 wherehows-web/app/templates/components/avatars/stacked-avatars-list.hbs

diff --git a/wherehows-web/app/components/avatars/avatar-item.ts b/wherehows-web/app/components/avatars/avatar-item.ts
new file mode 100644
index 0000000000..1b7adf9225
--- /dev/null
+++ b/wherehows-web/app/components/avatars/avatar-item.ts
@@ -0,0 +1,5 @@
+import Component from '@ember/component';
+
+export default class extends Component {
+  tagName = '';
+}
diff --git a/wherehows-web/app/components/avatars/stacked-avatars-list.ts b/wherehows-web/app/components/avatars/stacked-avatars-list.ts
new file mode 100644
index 0000000000..d8bc294403
--- /dev/null
+++ b/wherehows-web/app/components/avatars/stacked-avatars-list.ts
@@ -0,0 +1,5 @@
+import Component from '@ember/component';
+
+export default class extends Component {
+  classNames = ['avatar-container'];
+}
diff --git a/wherehows-web/app/styles/components/_all.scss b/wherehows-web/app/styles/components/_all.scss
index 170ee92982..7cbcb5afdc 100644
--- a/wherehows-web/app/styles/components/_all.scss
+++ b/wherehows-web/app/styles/components/_all.scss
@@ -1,6 +1,6 @@
-@import 'avatar';
 @import 'navbar';
 @import 'hero';
+@import 'avatar/all';
 @import 'dataset-author/all';
 @import 'dataset-compliance/all';
 @import 'browse-nav/all';
diff --git a/wherehows-web/app/styles/components/avatar/_all.scss b/wherehows-web/app/styles/components/avatar/_all.scss
new file mode 100644
index 0000000000..50653a8266
--- /dev/null
+++ b/wherehows-web/app/styles/components/avatar/_all.scss
@@ -0,0 +1 @@
+@import 'avatar';
diff --git a/wherehows-web/app/styles/components/nacho/_nacho-breadcrumbs.scss b/wherehows-web/app/styles/components/nacho/_nacho-breadcrumbs.scss
index 8ac122466a..9f4d55e91c 100644
--- a/wherehows-web/app/styles/components/nacho/_nacho-breadcrumbs.scss
+++ b/wherehows-web/app/styles/components/nacho/_nacho-breadcrumbs.scss
@@ -26,7 +26,9 @@ $secondary-border-color: set-color(white, base);
   text-overflow: ellipsis,
   white-space: nowrap,
   display: block
-)) @include restyle-define(grain, (
+));
+
+@include restyle-define(grain, (
   restyle-var(primary-border-color): $primary-border-color,
   restyle-var(secondary-border-color): $secondary-border-color,
   float: left,
@@ -59,7 +61,9 @@ $secondary-border-color: set-color(white, base);
     margin-top: -50px,
     left: 100%,
   )
-)) .nacho-breadcrumbs {
+));
+
+.nacho-breadcrumbs {
   @include restyle(breadcrumbs);
 
   &__crumb {
diff --git a/wherehows-web/app/templates/components/avatars/avatar-item.hbs b/wherehows-web/app/templates/components/avatars/avatar-item.hbs
new file mode 100644
index 0000000000..1745e9eb0a
--- /dev/null
+++ b/wherehows-web/app/templates/components/avatars/avatar-item.hbs
@@ -0,0 +1 @@
+<img src="{{avatar.imageUrl}}" alt="{{avatar.title}}" class="{{avatarClass}}">
diff --git a/wherehows-web/app/templates/components/avatars/stacked-avatars-list.hbs b/wherehows-web/app/templates/components/avatars/stacked-avatars-list.hbs
new file mode 100644
index 0000000000..3846514751
--- /dev/null
+++ b/wherehows-web/app/templates/components/avatars/stacked-avatars-list.hbs
@@ -0,0 +1,23 @@
+{{#if hasBlock}}
+
+    {{yield
+            (hash
+                    avatars=avatars
+                    avatarRollup=avatarRollup
+            )
+    }}
+
+{{else}}
+
+    {{#each avatars as |avatar|}}
+        {{avatars/avatar-item
+                avatar=avatar
+                avatarClass="stacked-avatar"
+        }}
+    {{/each}}
+
+    {{#if avatarRollup}}
+        <span class="avatar-rollup">{{avatartRollup.length}}+</span>
+    {{/if}}
+
+{{/if}}
\ No newline at end of file

From bf4a9a1f06d3ca204bccc9cfc1809d52cd54fc22 Mon Sep 17 00:00:00 2001
From: Seyi Adebajo <sadebajo@linkedin.com>
Date: Wed, 4 Apr 2018 10:48:47 -0700
Subject: [PATCH 03/10] adds avatar interfaces ,components and styling.
 replaces scrolling avatar view with modal interface

---
 .../app/components/avatars/avatar-image.ts    |  33 ++++++
 .../app/components/avatars/avatar-item.ts     |   5 -
 .../app/components/avatars/avatar-metadata.ts |  27 +++++
 .../app/components/avatars/avatars-detail.ts  |  28 +++++
 .../app/components/avatars/rollup-avatars.ts  |  52 +++++++++
 .../avatars/stacked-avatars-list.ts           |  58 +++++++++-
 .../app/styles/components/avatar/_all.scss    |   1 +
 .../app/styles/components/avatar/_avatar.scss | 109 ++++++++++++++++++
 .../components/avatar/_avatars-detail.scss    |  77 +++++++++++++
 .../components/avatars/avatar-image.hbs       |   1 +
 .../components/avatars/avatar-item.hbs        |   1 -
 .../components/avatars/avatar-metadata.hbs    |   6 +
 .../components/avatars/avatars-detail.hbs     |  16 +++
 .../components/avatars/rollup-avatars.hbs     |  27 +++++
 .../avatars/stacked-avatars-list.hbs          |  47 +++++---
 wherehows-web/app/typings/app/avatars.d.ts    |  13 +++
 16 files changed, 479 insertions(+), 22 deletions(-)
 create mode 100644 wherehows-web/app/components/avatars/avatar-image.ts
 delete mode 100644 wherehows-web/app/components/avatars/avatar-item.ts
 create mode 100644 wherehows-web/app/components/avatars/avatar-metadata.ts
 create mode 100644 wherehows-web/app/components/avatars/avatars-detail.ts
 create mode 100644 wherehows-web/app/components/avatars/rollup-avatars.ts
 create mode 100644 wherehows-web/app/styles/components/avatar/_avatars-detail.scss
 create mode 100644 wherehows-web/app/templates/components/avatars/avatar-image.hbs
 delete mode 100644 wherehows-web/app/templates/components/avatars/avatar-item.hbs
 create mode 100644 wherehows-web/app/templates/components/avatars/avatar-metadata.hbs
 create mode 100644 wherehows-web/app/templates/components/avatars/avatars-detail.hbs
 create mode 100644 wherehows-web/app/templates/components/avatars/rollup-avatars.hbs
 create mode 100644 wherehows-web/app/typings/app/avatars.d.ts

diff --git a/wherehows-web/app/components/avatars/avatar-image.ts b/wherehows-web/app/components/avatars/avatar-image.ts
new file mode 100644
index 0000000000..6c791f5d76
--- /dev/null
+++ b/wherehows-web/app/components/avatars/avatar-image.ts
@@ -0,0 +1,33 @@
+import Component from '@ember/component';
+import ComputedProperty, { alias } from '@ember/object/computed';
+import { computed, get } from '@ember/object';
+import { IAvatar } from 'wherehows-web/typings/app/avatars';
+
+export default class AvatarImage extends Component {
+  tagName = 'img';
+
+  classNames = ['avatar'];
+
+  attributeBindings = ['src', 'alt:name'];
+
+  /**
+   * The avatar object to render
+   * @type {IAvatar}
+   */
+  avatar: IAvatar;
+
+  /**
+   * Returns the image url for the avatar
+   * @type {ComputedProperty<string>}
+   */
+  src: ComputedProperty<string | void> = computed('avatar.imageUrl', function(this: AvatarImage): string | void {
+    //@ts-ignore dot notation property access
+    return get(this, 'avatar.imageUrl');
+  });
+
+  /**
+   * Aliases the name property on the related avatar
+   * @type {ComputedProperty<IAvatar['name']>}
+   */
+  name: ComputedProperty<IAvatar['name']> = alias('avatar.name');
+}
diff --git a/wherehows-web/app/components/avatars/avatar-item.ts b/wherehows-web/app/components/avatars/avatar-item.ts
deleted file mode 100644
index 1b7adf9225..0000000000
--- a/wherehows-web/app/components/avatars/avatar-item.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import Component from '@ember/component';
-
-export default class extends Component {
-  tagName = '';
-}
diff --git a/wherehows-web/app/components/avatars/avatar-metadata.ts b/wherehows-web/app/components/avatars/avatar-metadata.ts
new file mode 100644
index 0000000000..cf8142611f
--- /dev/null
+++ b/wherehows-web/app/components/avatars/avatar-metadata.ts
@@ -0,0 +1,27 @@
+import Component from '@ember/component';
+import { IAvatar } from 'wherehows-web/typings/app/avatars';
+import { action } from 'ember-decorators/object';
+
+export default class extends Component {
+  tagName: 'span';
+
+  classNames = ['avatar-metadata'];
+
+  /**
+   * Reference to avatar containing metadata
+   * @type {IAvatar}
+   */
+  avatar: IAvatar;
+
+  /**
+   * Sends email to avatar
+   */
+  @action
+  emailAvatar() {}
+
+  /**
+   * Slacks avatar
+   */
+  @action
+  slackAvatar() {}
+}
diff --git a/wherehows-web/app/components/avatars/avatars-detail.ts b/wherehows-web/app/components/avatars/avatars-detail.ts
new file mode 100644
index 0000000000..d14065bf5e
--- /dev/null
+++ b/wherehows-web/app/components/avatars/avatars-detail.ts
@@ -0,0 +1,28 @@
+import Component from '@ember/component';
+import { get } from '@ember/object';
+import { action } from 'ember-decorators/object';
+
+enum Key {
+  Escape = 27
+}
+
+export default class extends Component {
+  containerClassNames = ['avatars-detail-modal'];
+
+  /**
+   * External action to close detail interface
+   */
+  onClose: () => void;
+
+  /**
+   * Handles key up event on interface
+   * @param {KeyboardEvent} { key, which }
+   */
+  @action
+  onKeyUp({ key, which }: KeyboardEvent) {
+    // if escape key, close modal
+    if (which === Key.Escape || key === 'Escape') {
+      get(this, 'onClose')();
+    }
+  }
+}
diff --git a/wherehows-web/app/components/avatars/rollup-avatars.ts b/wherehows-web/app/components/avatars/rollup-avatars.ts
new file mode 100644
index 0000000000..f7d7bd5975
--- /dev/null
+++ b/wherehows-web/app/components/avatars/rollup-avatars.ts
@@ -0,0 +1,52 @@
+import Component from '@ember/component';
+import { IAvatar } from 'wherehows-web/typings/app/avatars';
+import { set, get, computed } from '@ember/object';
+import ComputedProperty from '@ember/object/computed';
+import { action } from 'ember-decorators/object';
+
+export default class extends Component {
+  tagName = 'span';
+
+  classNames = ['avatar-rollup'];
+
+  constructor() {
+    super(...arguments);
+
+    this.avatars || (this.avatars = []);
+  }
+
+  /**
+   * References the full list of avatars
+   * @type {Array<IAvatar>}
+   */
+  avatars: Array<IAvatar>;
+
+  /**
+   * Flag indicating if the avatars detail view should be rendered
+   * @type {boolean}
+   */
+  isShowingAvatars = false;
+
+  /**
+   * Returns the text to be shown in the avatar detail page header
+   * @type {ComputedProperty<string>}
+   */
+  header: ComputedProperty<string> = computed('avatars.length', function(): string {
+    return `${get(this, 'avatars').length} users`;
+  });
+
+  /**
+   * Handles the component click event
+   */
+  click() {
+    set(this, 'isShowingAvatars', true);
+  }
+
+  /**
+   * Updates the flag indicating if the view should be rendered
+   */
+  @action
+  dismissAvatars() {
+    set(this, 'isShowingAvatars', false);
+  }
+}
diff --git a/wherehows-web/app/components/avatars/stacked-avatars-list.ts b/wherehows-web/app/components/avatars/stacked-avatars-list.ts
index d8bc294403..0e18663f39 100644
--- a/wherehows-web/app/components/avatars/stacked-avatars-list.ts
+++ b/wherehows-web/app/components/avatars/stacked-avatars-list.ts
@@ -1,5 +1,61 @@
 import Component from '@ember/component';
+import { get, getProperties, computed } from '@ember/object';
+import ComputedProperty from '@ember/object/computed';
+import { IAvatar } from 'wherehows-web/typings/app/avatars';
 
-export default class extends Component {
+/**
+ * Specifies the default maximum number of images to render before the more button
+ * @type {number}
+ */
+const defaultMavAvatarLength = 6;
+
+export default class StackedAvatarsList extends Component {
   classNames = ['avatar-container'];
+
+  constructor() {
+    super(...arguments);
+
+    this.avatars || (this.avatars = []);
+  }
+
+  /**
+   * The list of avatar objects to render
+   * @type {Array<IAvatar>}
+   */
+  avatars: Array<IAvatar>;
+
+  /**
+   * Calculates the max number of avatars to render
+   * @type {ComputedProperty<number>}
+   * @memberof StackedAvatarsList
+   */
+  maxAvatarLength: ComputedProperty<number> = computed('avatars.length', function(this: StackedAvatarsList): number {
+    const { length } = get(this, 'avatars');
+    return length ? Math.min(length, defaultMavAvatarLength) : defaultMavAvatarLength;
+  });
+
+  /**
+   * Build the list of avatars to render based on the max number
+   * @type {ComputedProperty<StackedAvatarsList['avatars']>}
+   * @memberof StackedAvatarsList
+   */
+  maxAvatars: ComputedProperty<StackedAvatarsList['avatars']> = computed('maxAvatarLength', function(
+    this: StackedAvatarsList
+  ): StackedAvatarsList['avatars'] {
+    const { avatars, maxAvatarLength } = getProperties(this, ['avatars', 'maxAvatarLength']);
+
+    return avatars.slice(0, maxAvatarLength);
+  });
+
+  /**
+   * Determines the list of avatars that have not been rendered after the max has been ascertained
+   * @type {ComputedProperty<StackedAvatarsList['avatars']>}
+   * @memberof StackedAvatarsList
+   */
+  rollupAvatars: ComputedProperty<StackedAvatarsList['avatars']> = computed('maxAvatars', function(
+    this: StackedAvatarsList
+  ): StackedAvatarsList['avatars'] {
+    const { avatars, maxAvatarLength } = getProperties(this, ['avatars', 'maxAvatarLength']);
+    return avatars.slice(maxAvatarLength);
+  });
 }
diff --git a/wherehows-web/app/styles/components/avatar/_all.scss b/wherehows-web/app/styles/components/avatar/_all.scss
index 50653a8266..303ae252f3 100644
--- a/wherehows-web/app/styles/components/avatar/_all.scss
+++ b/wherehows-web/app/styles/components/avatar/_all.scss
@@ -1 +1,2 @@
 @import 'avatar';
+@import 'avatars-detail';
diff --git a/wherehows-web/app/styles/components/avatar/_avatar.scss b/wherehows-web/app/styles/components/avatar/_avatar.scss
index a5136eefbb..7c4bffd299 100644
--- a/wherehows-web/app/styles/components/avatar/_avatar.scss
+++ b/wherehows-web/app/styles/components/avatar/_avatar.scss
@@ -3,3 +3,112 @@ $avatar-size: 18px;
 .user-avatar {
   @include round-image($avatar-size);
 }
+
+.avatar-container {
+  display: flex;
+  justify-content: flex-end;
+
+  &:hover {
+    .avatar-item--stacked {
+      margin-left: item-spacing(7) / 2;
+      transition-duration: 167ms;
+      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+      transition-delay: 0s;
+    }
+  }
+
+  &__list {
+    list-style-type: none;
+  }
+}
+
+.avatar-item {
+  display: inline;
+
+  &--stacked {
+    transition-duration: 167ms;
+    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
+    transition-delay: 0s;
+    position: relative;
+
+    &:nth-of-type(1n + 2) {
+      margin-left: -(item-spacing(7) / 2);
+    }
+
+    &__meta {
+      position: absolute;
+      left: 0;
+      opacity: 0;
+    }
+
+    &:hover {
+      .avatar-item--stacked__meta {
+        transition-duration: 167ms;
+        transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+        transition-delay: 0s;
+        opacity: 1;
+      }
+    }
+  }
+}
+
+.avatar {
+  @include round-image(item-spacing(7));
+  box-sizing: border-box;
+  background-clip: content-box;
+  border: 2px solid transparent;
+
+  &--stacked {
+    border: 2px solid white;
+    transition-duration: 167ms;
+    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
+    transition-delay: 0s;
+
+    &:nth-of-type(1n + 2) {
+      margin-left: -(item-spacing(7) / 2);
+    }
+  }
+}
+
+.avatar-rollup {
+  @include round-image(item-spacing(7));
+  box-sizing: border-box;
+  background-clip: content-box;
+  border: 1px solid get-color(black, 0.5);
+  font-weight: 400;
+  color: get-color(black, 0.5);
+  font-size: 15px;
+  display: inline-block;
+  background: white;
+  text-align: center;
+  z-index: 2;
+  line-height: item-spacing(7);
+}
+
+.avatar-meta-action {
+  background-color: transparent;
+  border: 0;
+  border-radius: 2px;
+  box-sizing: border-box;
+  color: get-color(black, 0.7);
+  cursor: pointer;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: item-spacing(0 2);
+  text-align: center;
+  text-decoration: none;
+  vertical-align: middle;
+
+  &:hover {
+    background-color: get-color(black, 0.05);
+    transition-duration: 167ms;
+    transition-property: background-color, box-shadow, color;
+    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+}
+
+.avatar-metadata {
+  max-width: item-spacing(7) * 2;
+}
diff --git a/wherehows-web/app/styles/components/avatar/_avatars-detail.scss b/wherehows-web/app/styles/components/avatar/_avatars-detail.scss
new file mode 100644
index 0000000000..a301a59f2b
--- /dev/null
+++ b/wherehows-web/app/styles/components/avatar/_avatars-detail.scss
@@ -0,0 +1,77 @@
+.avatars-detail-modal {
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 12px 18px 1px rgba(0, 0, 0, 0.2);
+  position: relative;
+  border-radius: 2px;
+  background-color: white;
+  max-height: calc(100vh - 64px);
+  min-height: item-spacing(7);
+  width: 520px;
+  overflow-y: scroll;
+  overflow-x: hidden;
+
+  &__header {
+    padding: item-spacing(4 4);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+    top: 0;
+    left: 0;
+    width: 100%;
+    min-height: 48px;
+  }
+
+  &__close {
+    font-weight: fw(normal, 2);
+    font-size: 48px;
+    background-color: transparent;
+    text-align: center;
+    text-decoration: none;
+    vertical-align: middle;
+    cursor: pointer;
+    box-sizing: border-box;
+    color: get-color(black, 0.7);
+    border: 0;
+  }
+}
+
+.avatars-detail-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: z('modal');
+  display: flex;
+  height: 100vh;
+  width: 100vw;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(41, 39, 36, 0.75);
+}
+
+.avatar-detail-container {
+  margin: 0;
+  padding: item-spacing(0 0 0 3);
+  width: 100%;
+}
+
+.avatar-detail {
+  display: flex;
+  align-items: center;
+
+  &__entity {
+    flex-grow: 1;
+  }
+
+  &__meta {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 10;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+  }
+
+  &:last-of-type {
+    .avatar-detail__meta {
+      border: 0;
+    }
+  }
+}
diff --git a/wherehows-web/app/templates/components/avatars/avatar-image.hbs b/wherehows-web/app/templates/components/avatars/avatar-image.hbs
new file mode 100644
index 0000000000..fb5c4b157d
--- /dev/null
+++ b/wherehows-web/app/templates/components/avatars/avatar-image.hbs
@@ -0,0 +1 @@
+{{yield}}
\ No newline at end of file
diff --git a/wherehows-web/app/templates/components/avatars/avatar-item.hbs b/wherehows-web/app/templates/components/avatars/avatar-item.hbs
deleted file mode 100644
index 1745e9eb0a..0000000000
--- a/wherehows-web/app/templates/components/avatars/avatar-item.hbs
+++ /dev/null
@@ -1 +0,0 @@
-<img src="{{avatar.imageUrl}}" alt="{{avatar.title}}" class="{{avatarClass}}">
diff --git a/wherehows-web/app/templates/components/avatars/avatar-metadata.hbs b/wherehows-web/app/templates/components/avatars/avatar-metadata.hbs
new file mode 100644
index 0000000000..0957b5247f
--- /dev/null
+++ b/wherehows-web/app/templates/components/avatars/avatar-metadata.hbs
@@ -0,0 +1,6 @@
+{{yield (hash
+            userName=avatar.userName
+            email=avatar.email
+            emailAvatar=(action "emailAvatar")
+            slackAvatar=(action "slackAvatar")
+        )}}
\ No newline at end of file
diff --git a/wherehows-web/app/templates/components/avatars/avatars-detail.hbs b/wherehows-web/app/templates/components/avatars/avatars-detail.hbs
new file mode 100644
index 0000000000..8fef474059
--- /dev/null
+++ b/wherehows-web/app/templates/components/avatars/avatars-detail.hbs
@@ -0,0 +1,16 @@
+{{#modal-dialog
+    overlayClass="avatars-detail-modal-overlay"
+    containerClassNames=containerClassNames
+    onClose=onClose
+}}
+  <header class="avatars-detail-modal__header">
+    <h2>
+      {{header}}
+    </h2>
+    <button class="avatars-detail-modal__close" onclick={{action onClose}}>&times;</button>
+  </header>
+
+  <section class="avatars-detail-modal__content">
+    {{yield}}
+  </section>
+{{/modal-dialog}}
\ No newline at end of file
diff --git a/wherehows-web/app/templates/components/avatars/rollup-avatars.hbs b/wherehows-web/app/templates/components/avatars/rollup-avatars.hbs
new file mode 100644
index 0000000000..19812c759f
--- /dev/null
+++ b/wherehows-web/app/templates/components/avatars/rollup-avatars.hbs
@@ -0,0 +1,27 @@
+{{yield}}
+
+{{#if isShowingAvatars}}
+  {{#avatars/avatars-detail
+      header=header
+      onClose=(action "dismissAvatars")}}
+
+    <ul class="avatar-detail-container">
+      {{#each avatars as |avatar|}}
+        <li class="avatar-detail">
+
+          <div class="avatar-detail__entity">
+            <img src="{{avatar.imageUrl}}" alt="{{avatar.name}}" class="avatar">
+          </div>
+
+          <div class="avatar-detail__meta">
+            <h4>{{avatar.name}}</h4>
+            <p>@email{{avatar.email}}</p>
+            <p>#slack{{avatar.userName}}</p>
+          </div>
+
+        </li>
+      {{/each}}
+    </ul>
+
+  {{/avatars/avatars-detail}}
+{{/if}}
\ No newline at end of file
diff --git a/wherehows-web/app/templates/components/avatars/stacked-avatars-list.hbs b/wherehows-web/app/templates/components/avatars/stacked-avatars-list.hbs
index 3846514751..08c280e1ad 100644
--- a/wherehows-web/app/templates/components/avatars/stacked-avatars-list.hbs
+++ b/wherehows-web/app/templates/components/avatars/stacked-avatars-list.hbs
@@ -1,23 +1,40 @@
 {{#if hasBlock}}
 
-    {{yield
-            (hash
-                    avatars=avatars
-                    avatarRollup=avatarRollup
-            )
-    }}
+  {{yield
+      (hash
+          image=(component "avatars/avatar-image")
+          meta=(component "avatars/avatar-metadata")
+          maxAvatars=maxAvatars
+          rollupAvatars=rollupAvatars
+      )
+  }}
 
 {{else}}
 
-    {{#each avatars as |avatar|}}
-        {{avatars/avatar-item
-                avatar=avatar
-                avatarClass="stacked-avatar"
-        }}
-    {{/each}}
+  <ul class="avatar-container__list">
+    {{#each maxAvatars as |avatar|}}
+      <li class="avatar-item avatar-item--stacked">
 
-    {{#if avatarRollup}}
-        <span class="avatar-rollup">{{avatartRollup.length}}+</span>
-    {{/if}}
+        {{avatars/avatar-image avatar=avatar class="avatar--stacked"}}
+
+        {{#avatars/avatar-metadata class="avatar-item--stacked__meta" avatar=avatar as |aviMeta|}}
+          {{#if aviMeta.email}}
+            <button {{action meta.emailAvatar}} class="avatar-meta-action">@ {{meta.email}}</button>
+          {{/if}}
+
+          {{#if aviMeta.userName}}
+            <button {{action meta.slackAvatar}} class="avatar-meta-action"># {{meta.userName}}</button>
+          {{/if}}
+        {{/avatars/avatar-metadata}}
+
+      </li>
+    {{/each}}
+  </ul>
+
+  {{#if rollupAvatars}}
+    {{#avatars/rollup-avatars avatars=avatars}}
+      {{rollupAvatars.length}}+
+    {{/avatars/rollup-avatars}}
+  {{/if}}
 
 {{/if}}
\ No newline at end of file
diff --git a/wherehows-web/app/typings/app/avatars.d.ts b/wherehows-web/app/typings/app/avatars.d.ts
new file mode 100644
index 0000000000..a886351869
--- /dev/null
+++ b/wherehows-web/app/typings/app/avatars.d.ts
@@ -0,0 +1,13 @@
+/**
+ * Describes the interface for an avatar object
+ * @interface IAvatar
+ */
+interface IAvatar {
+  imageUrl: string;
+  email: null | string;
+  // Handle for the avatar
+  userName: string;
+  name: string;
+}
+
+export { IAvatar };

From 8de05625a59fffb68e6c7a7f6ce1a98518ab8dc6 Mon Sep 17 00:00:00 2001
From: Seyi Adebajo <sadebajo@linkedin.com>
Date: Wed, 4 Apr 2018 11:29:52 -0700
Subject: [PATCH 04/10] creates dataset container for owner list. modifies
 typings for IAvatar interface

---
 .../datasets/containers/dataset-owner-list.ts | 58 +++++++++++++++++++
 .../containers/dataset-owner-list.hbs         |  1 +
 .../app/templates/datasets/dataset.hbs        |  2 +-
 wherehows-web/app/typings/app/avatars.d.ts    |  6 +-
 4 files changed, 63 insertions(+), 4 deletions(-)
 create mode 100644 wherehows-web/app/components/datasets/containers/dataset-owner-list.ts
 create mode 100644 wherehows-web/app/templates/components/datasets/containers/dataset-owner-list.hbs

diff --git a/wherehows-web/app/components/datasets/containers/dataset-owner-list.ts b/wherehows-web/app/components/datasets/containers/dataset-owner-list.ts
new file mode 100644
index 0000000000..2bfb68381a
--- /dev/null
+++ b/wherehows-web/app/components/datasets/containers/dataset-owner-list.ts
@@ -0,0 +1,58 @@
+import Component from '@ember/component';
+import { get, set, computed } from '@ember/object';
+import ComputedProperty from '@ember/object/computed';
+import { IAvatar } from 'wherehows-web/typings/app/avatars';
+import { IOwner, IOwnerResponse } from 'wherehows-web/typings/api/datasets/owners';
+import { task } from 'ember-concurrency';
+import { readDatasetOwnersByUrn } from 'wherehows-web/utils/api/datasets/owners';
+import { arrayMap } from 'wherehows-web/utils/array';
+import { getAvatarProps } from 'wherehows-web/constants/avatars/avatars';
+
+export default class DatasetOwnerListContainer extends Component {
+  constructor() {
+    super(...arguments);
+
+    this.owners || (this.owners = []);
+  }
+
+  /**
+   * Urn for the related dataset
+   * @type {string}
+   * @memberof DatasetOwnerListContainer
+   */
+  urn: string;
+
+  /**
+   * The owners for the dataset
+   * @type {Array<IOwner>}
+   * @memberof DatasetOwnerListContainer
+   */
+  owners: Array<IOwner>;
+
+  /**
+   * Lists the avatar objects based off the dataset owners
+   * @type {ComputedProperty<Array<IAvatar>>}
+   * @memberof DatasetOwnerListContainer
+   */
+  avatars: ComputedProperty<Array<IAvatar>> = computed('owners', function(): Array<IAvatar> {
+    return arrayMap(getAvatarProps)(get(this, 'owners'));
+  });
+
+  didInsertElement() {
+    get(this, 'getOwnersTask').perform();
+  }
+
+  didUpdateAttrs() {
+    get(this, 'getOwnersTask').perform();
+  }
+
+  /**
+   * Reads the owners for this dataset
+   * @type {Task<Promise<Array<IOwnerResponse>>, () => TaskInstance<Promise<IOwnerResponse>>>}
+   */
+  getOwnersTask = task(function*(this: DatasetOwnerListContainer): IterableIterator<Promise<IOwnerResponse>> {
+    const { owners = [] }: IOwnerResponse = yield readDatasetOwnersByUrn(get(this, 'urn'));
+
+    set(this, 'owners', owners);
+  }).restartable();
+}
diff --git a/wherehows-web/app/templates/components/datasets/containers/dataset-owner-list.hbs b/wherehows-web/app/templates/components/datasets/containers/dataset-owner-list.hbs
new file mode 100644
index 0000000000..c12d1e4fc3
--- /dev/null
+++ b/wherehows-web/app/templates/components/datasets/containers/dataset-owner-list.hbs
@@ -0,0 +1 @@
+{{avatars/stacked-avatars-list avatars=avatars}}
\ No newline at end of file
diff --git a/wherehows-web/app/templates/datasets/dataset.hbs b/wherehows-web/app/templates/datasets/dataset.hbs
index 578c6d9758..076289ed00 100644
--- a/wherehows-web/app/templates/datasets/dataset.hbs
+++ b/wherehows-web/app/templates/datasets/dataset.hbs
@@ -46,7 +46,7 @@
       </div>
     </div>
 
-    {{dataset-owner-list owners=owners datasetName=model.nativeName}}
+    {{datasets/containers/dataset-owner-list urn=encodedUrn}}
   </div>
 
   {{#ivy-tabs selection=tabSelected as |tabs|}}
diff --git a/wherehows-web/app/typings/app/avatars.d.ts b/wherehows-web/app/typings/app/avatars.d.ts
index a886351869..1d04dbd662 100644
--- a/wherehows-web/app/typings/app/avatars.d.ts
+++ b/wherehows-web/app/typings/app/avatars.d.ts
@@ -4,10 +4,10 @@
  */
 interface IAvatar {
   imageUrl: string;
-  email: null | string;
+  email?: null | string;
   // Handle for the avatar
-  userName: string;
-  name: string;
+  userName?: string;
+  name?: string;
 }
 
 export { IAvatar };

From 6048d340b7b807f5a762bbfa2f5b4c28be785bdb Mon Sep 17 00:00:00 2001
From: Seyi Adebajo <sadebajo@linkedin.com>
Date: Wed, 4 Apr 2018 11:30:41 -0700
Subject: [PATCH 05/10] adds avatars constants module

---
 .../app/constants/avatars/avatars.ts          | 33 +++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 wherehows-web/app/constants/avatars/avatars.ts

diff --git a/wherehows-web/app/constants/avatars/avatars.ts b/wherehows-web/app/constants/avatars/avatars.ts
new file mode 100644
index 0000000000..c6261fe0da
--- /dev/null
+++ b/wherehows-web/app/constants/avatars/avatars.ts
@@ -0,0 +1,33 @@
+import { IAvatar } from 'wherehows-web/typings/app/avatars';
+import { avatar } from 'wherehows-web/constants/application';
+import { pick } from 'lodash';
+
+/**
+ * Defines a partial interface for an object that can be narrowed into an avatar
+ */
+type PartAvatar = Partial<IAvatar>;
+
+const { url: avatarUrl } = avatar;
+
+/**
+ * Default image url if an avatar url cannot be determined
+ * @type {string}
+ */
+const defaultAvatarImage = '/assets/assets/images/default_avatar.png';
+
+/**
+ * Takes a PartAvatar object and build an object confirming to an IAvatar
+ * @param {PartAvatar} object
+ * @return {IAvatar}
+ */
+const getAvatarProps = (object: PartAvatar): IAvatar => {
+  const props = pick(object, ['email', 'userName', 'name']);
+  const imageUrl = props.userName ? avatarUrl.replace('[username]', props.userName) : defaultAvatarImage;
+
+  return {
+    imageUrl,
+    ...props
+  };
+};
+
+export { getAvatarProps };

From d47f298dbe6d4ad1d6bef23d02ba9ee1137887fa Mon Sep 17 00:00:00 2001
From: Seyi Adebajo <sadebajo@linkedin.com>
Date: Wed, 4 Apr 2018 14:54:05 -0700
Subject: [PATCH 06/10] fixes issue with emailing and slacking an owner.
 extracts owner filter functions into constants module. refactors base style
 on body.

---
 .../app/components/avatars/avatar-metadata.ts | 13 +++-------
 .../app/components/dataset-authors.ts         | 12 ++++-----
 .../datasets/containers/dataset-owner-list.ts |  3 ++-
 wherehows-web/app/constants/datasets/owner.ts | 26 ++++++++++++++++++-
 wherehows-web/app/styles/base/_base.scss      |  6 ++++-
 .../app/styles/base/_typography.scss          |  1 -
 .../app/styles/components/avatar/_avatar.scss |  1 +
 .../components/avatars/avatar-metadata.hbs    |  3 +--
 .../avatars/stacked-avatars-list.hbs          |  8 ++++--
 9 files changed, 49 insertions(+), 24 deletions(-)

diff --git a/wherehows-web/app/components/avatars/avatar-metadata.ts b/wherehows-web/app/components/avatars/avatar-metadata.ts
index cf8142611f..6311694dad 100644
--- a/wherehows-web/app/components/avatars/avatar-metadata.ts
+++ b/wherehows-web/app/components/avatars/avatar-metadata.ts
@@ -1,6 +1,5 @@
 import Component from '@ember/component';
 import { IAvatar } from 'wherehows-web/typings/app/avatars';
-import { action } from 'ember-decorators/object';
 
 export default class extends Component {
   tagName: 'span';
@@ -14,14 +13,8 @@ export default class extends Component {
   avatar: IAvatar;
 
   /**
-   * Sends email to avatar
+   * Slack team ID
+   * @type {string}
    */
-  @action
-  emailAvatar() {}
-
-  /**
-   * Slacks avatar
-   */
-  @action
-  slackAvatar() {}
+  team = 'T06BYN8F7';
 }
diff --git a/wherehows-web/app/components/dataset-authors.ts b/wherehows-web/app/components/dataset-authors.ts
index d52f9d8a2a..e8783f1a65 100644
--- a/wherehows-web/app/components/dataset-authors.ts
+++ b/wherehows-web/app/components/dataset-authors.ts
@@ -14,9 +14,11 @@ import {
   updateOwner,
   minRequiredConfirmedOwners,
   validConfirmedOwners,
-  isRequiredMinOwnersNotConfirmed
+  isRequiredMinOwnersNotConfirmed,
+  isConfirmedOwner,
+  isSystemGeneratedOwner
 } from 'wherehows-web/constants/datasets/owner';
-import { OwnerIdType, OwnerSource, OwnerType } from 'wherehows-web/utils/api/datasets/owners';
+import { OwnerSource, OwnerType } from 'wherehows-web/utils/api/datasets/owners';
 import Notifications, { NotificationEvent } from 'wherehows-web/services/notifications';
 
 /**
@@ -101,7 +103,7 @@ export default class DatasetAuthors extends Component {
    * @type {ComputedProperty<Array<IOwner>>}
    * @memberof DatasetAuthors
    */
-  confirmedOwners: ComputedProperty<Array<IOwner>> = filter('owners', ({ source }) => source === OwnerSource.Ui);
+  confirmedOwners: ComputedProperty<Array<IOwner>> = filter('owners', isConfirmedOwner);
 
   /**
    * Intersection of confirmed owners and suggested owners
@@ -129,9 +131,7 @@ export default class DatasetAuthors extends Component {
    * @type {ComputedProperty<Array<IOwner>>}
    * @memberof DatasetAuthors
    */
-  systemGeneratedOwners: ComputedProperty<Array<IOwner>> = filter('owners', function({ source, idType }: IOwner) {
-    return source !== OwnerSource.Ui && idType === OwnerIdType.User;
-  });
+  systemGeneratedOwners: ComputedProperty<Array<IOwner>> = filter('owners', isSystemGeneratedOwner);
 
   /**
    * Invokes the external action as a dropping task
diff --git a/wherehows-web/app/components/datasets/containers/dataset-owner-list.ts b/wherehows-web/app/components/datasets/containers/dataset-owner-list.ts
index 2bfb68381a..6aa0c9c5e2 100644
--- a/wherehows-web/app/components/datasets/containers/dataset-owner-list.ts
+++ b/wherehows-web/app/components/datasets/containers/dataset-owner-list.ts
@@ -7,6 +7,7 @@ import { task } from 'ember-concurrency';
 import { readDatasetOwnersByUrn } from 'wherehows-web/utils/api/datasets/owners';
 import { arrayMap } from 'wherehows-web/utils/array';
 import { getAvatarProps } from 'wherehows-web/constants/avatars/avatars';
+import { confirmedOwners } from 'wherehows-web/constants/datasets/owner';
 
 export default class DatasetOwnerListContainer extends Component {
   constructor() {
@@ -53,6 +54,6 @@ export default class DatasetOwnerListContainer extends Component {
   getOwnersTask = task(function*(this: DatasetOwnerListContainer): IterableIterator<Promise<IOwnerResponse>> {
     const { owners = [] }: IOwnerResponse = yield readDatasetOwnersByUrn(get(this, 'urn'));
 
-    set(this, 'owners', owners);
+    set(this, 'owners', confirmedOwners(owners));
   }).restartable();
 }
diff --git a/wherehows-web/app/constants/datasets/owner.ts b/wherehows-web/app/constants/datasets/owner.ts
index eb884423a0..b20bbf076e 100644
--- a/wherehows-web/app/constants/datasets/owner.ts
+++ b/wherehows-web/app/constants/datasets/owner.ts
@@ -129,6 +129,27 @@ const isValidConfirmedOwner = ({ confirmedBy, type, idType, isActive }: IOwner):
  */
 const validConfirmedOwners = arrayFilter(isValidConfirmedOwner);
 
+/**
+ * Checks if an owner has been confirmed by a user, i.e. OwnerSource.Ui
+ * @param {IOwner} { source }
+ * @returns {boolean}
+ */
+const isConfirmedOwner = ({ source }: IOwner): boolean => source === OwnerSource.Ui;
+
+/**
+ * Takes a list of owners and returns those that are confirmed
+ * @type {(array: Array<IOwner>) => Array<IOwner>}
+ */
+const confirmedOwners = arrayFilter(isConfirmedOwner);
+
+/**
+ * Checks that an owner is a system generated owner
+ * @param {IOwner} { source, idType }
+ * @returns {boolean}
+ */
+const isSystemGeneratedOwner = ({ source, idType }: IOwner): boolean =>
+  source !== OwnerSource.Ui && idType === OwnerIdType.User;
+
 /**
  * Checks that the required minimum number of confirmed users is met with the type Owner and idType User
  * @param {Array<IOwner>} owners the list of owners to check
@@ -145,5 +166,8 @@ export {
   isRequiredMinOwnersNotConfirmed,
   ownerAlreadyExists,
   updateOwner,
-  confirmOwner
+  confirmOwner,
+  isConfirmedOwner,
+  confirmedOwners,
+  isSystemGeneratedOwner
 };
diff --git a/wherehows-web/app/styles/base/_base.scss b/wherehows-web/app/styles/base/_base.scss
index cd484c6353..a656e26885 100644
--- a/wherehows-web/app/styles/base/_base.scss
+++ b/wherehows-web/app/styles/base/_base.scss
@@ -14,6 +14,8 @@ body {
   padding-top: $nav-min-height;
   padding-bottom: $nav-min-height;
   background-color: set-color(white, base);
+  overflow-y: scroll;
+  overflow-x: hidden;
 }
 
 /**
@@ -22,7 +24,9 @@ body {
  * making all elements inheriting from the root box-sizing value
  * See: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
  */
-*, *::before, *::after {
+*,
+*::before,
+*::after {
   box-sizing: inherit;
 }
 
diff --git a/wherehows-web/app/styles/base/_typography.scss b/wherehows-web/app/styles/base/_typography.scss
index 5c70081754..c95f3216c6 100644
--- a/wherehows-web/app/styles/base/_typography.scss
+++ b/wherehows-web/app/styles/base/_typography.scss
@@ -4,7 +4,6 @@
 body {
   color: $text-color;
   font: normal 300 150% / 1.4 $text-font-stack;
-  overflow-y: scroll;
 }
 
 h1,
diff --git a/wherehows-web/app/styles/components/avatar/_avatar.scss b/wherehows-web/app/styles/components/avatar/_avatar.scss
index 7c4bffd299..031bfdbd5c 100644
--- a/wherehows-web/app/styles/components/avatar/_avatar.scss
+++ b/wherehows-web/app/styles/components/avatar/_avatar.scss
@@ -39,6 +39,7 @@ $avatar-size: 18px;
       position: absolute;
       left: 0;
       opacity: 0;
+      z-index: z(dropdown);
     }
 
     &:hover {
diff --git a/wherehows-web/app/templates/components/avatars/avatar-metadata.hbs b/wherehows-web/app/templates/components/avatars/avatar-metadata.hbs
index 0957b5247f..a6dbe706b8 100644
--- a/wherehows-web/app/templates/components/avatars/avatar-metadata.hbs
+++ b/wherehows-web/app/templates/components/avatars/avatar-metadata.hbs
@@ -1,6 +1,5 @@
 {{yield (hash
             userName=avatar.userName
             email=avatar.email
-            emailAvatar=(action "emailAvatar")
-            slackAvatar=(action "slackAvatar")
+            team=team
         )}}
\ No newline at end of file
diff --git a/wherehows-web/app/templates/components/avatars/stacked-avatars-list.hbs b/wherehows-web/app/templates/components/avatars/stacked-avatars-list.hbs
index 08c280e1ad..8c08c680ac 100644
--- a/wherehows-web/app/templates/components/avatars/stacked-avatars-list.hbs
+++ b/wherehows-web/app/templates/components/avatars/stacked-avatars-list.hbs
@@ -19,11 +19,15 @@
 
         {{#avatars/avatar-metadata class="avatar-item--stacked__meta" avatar=avatar as |aviMeta|}}
           {{#if aviMeta.email}}
-            <button {{action meta.emailAvatar}} class="avatar-meta-action">@ {{meta.email}}</button>
+            <a href="mailto:{{aviMeta.email}}" class="avatar-meta-action" target="_blank">
+              <strong><i class="fa fa-at"></i></strong> {{aviMeta.email}}
+            </a>
           {{/if}}
 
           {{#if aviMeta.userName}}
-            <button {{action meta.slackAvatar}} class="avatar-meta-action"># {{meta.userName}}</button>
+            <a href="slack://user?team={{aviMeta.team}}&id={{aviMeta.userName}}" class="avatar-meta-action">
+              <i class="fa fa-slack"></i> {{aviMeta.userName}}
+            </a>
           {{/if}}
         {{/avatars/avatar-metadata}}
 

From 2db408cdf123daefb28b9f054ce27ec0158c815c Mon Sep 17 00:00:00 2001
From: Seyi Adebajo <sadebajo@linkedin.com>
Date: Wed, 4 Apr 2018 15:32:43 -0700
Subject: [PATCH 07/10] minor styling updates for metadata

---
 wherehows-web/app/styles/components/avatar/_avatar.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/wherehows-web/app/styles/components/avatar/_avatar.scss b/wherehows-web/app/styles/components/avatar/_avatar.scss
index 031bfdbd5c..c9355d2a47 100644
--- a/wherehows-web/app/styles/components/avatar/_avatar.scss
+++ b/wherehows-web/app/styles/components/avatar/_avatar.scss
@@ -37,7 +37,7 @@ $avatar-size: 18px;
 
     &__meta {
       position: absolute;
-      left: 0;
+      right: 0;
       opacity: 0;
       z-index: z(dropdown);
     }
@@ -93,12 +93,12 @@ $avatar-size: 18px;
   box-sizing: border-box;
   color: get-color(black, 0.7);
   cursor: pointer;
-  max-width: 100%;
+  width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   padding: item-spacing(0 2);
-  text-align: center;
+  display: block;
   text-decoration: none;
   vertical-align: middle;
 

From 30563ce42a1442dc1caecc0626f0ebcd85d0f8bf Mon Sep 17 00:00:00 2001
From: Seyi Adebajo <sadebajo@linkedin.com>
Date: Wed, 4 Apr 2018 16:57:01 -0700
Subject: [PATCH 08/10] replaces dom elements with metadata component. adds
 name property to avatar-metadata component

---
 .../components/avatar/_avatars-detail.scss    |  1 +
 .../components/avatars/avatar-metadata.hbs    |  1 +
 .../components/avatars/rollup-avatars.hbs     | 20 ++++++++++++++-----
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/wherehows-web/app/styles/components/avatar/_avatars-detail.scss b/wherehows-web/app/styles/components/avatar/_avatars-detail.scss
index a301a59f2b..011a868a6f 100644
--- a/wherehows-web/app/styles/components/avatar/_avatars-detail.scss
+++ b/wherehows-web/app/styles/components/avatar/_avatars-detail.scss
@@ -67,6 +67,7 @@
     flex-direction: column;
     flex-grow: 10;
     border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+    max-width: 100%;
   }
 
   &:last-of-type {
diff --git a/wherehows-web/app/templates/components/avatars/avatar-metadata.hbs b/wherehows-web/app/templates/components/avatars/avatar-metadata.hbs
index a6dbe706b8..e6269f0084 100644
--- a/wherehows-web/app/templates/components/avatars/avatar-metadata.hbs
+++ b/wherehows-web/app/templates/components/avatars/avatar-metadata.hbs
@@ -1,5 +1,6 @@
 {{yield (hash
             userName=avatar.userName
             email=avatar.email
+            name=avatar.name
             team=team
         )}}
\ No newline at end of file
diff --git a/wherehows-web/app/templates/components/avatars/rollup-avatars.hbs b/wherehows-web/app/templates/components/avatars/rollup-avatars.hbs
index 19812c759f..0da8caf929 100644
--- a/wherehows-web/app/templates/components/avatars/rollup-avatars.hbs
+++ b/wherehows-web/app/templates/components/avatars/rollup-avatars.hbs
@@ -13,11 +13,21 @@
             <img src="{{avatar.imageUrl}}" alt="{{avatar.name}}" class="avatar">
           </div>
 
-          <div class="avatar-detail__meta">
-            <h4>{{avatar.name}}</h4>
-            <p>@email{{avatar.email}}</p>
-            <p>#slack{{avatar.userName}}</p>
-          </div>
+          {{#avatars/avatar-metadata class="avatar-detail__meta" avatar=avatar as |aviMeta|}}
+            <h4>{{aviMeta.name}}</h4>
+
+            {{#if aviMeta.email}}
+              <a href="mailto:{{aviMeta.email}}" class="avatar-meta-action" target="_blank">
+                <strong><i class="fa fa-at"></i></strong> {{aviMeta.email}}
+              </a>
+            {{/if}}
+
+            {{#if aviMeta.userName}}
+              <a href="slack://user?team={{aviMeta.team}}&id={{aviMeta.userName}}" class="avatar-meta-action">
+                <i class="fa fa-slack"></i> {{aviMeta.userName}}
+              </a>
+            {{/if}}
+          {{/avatars/avatar-metadata}}
 
         </li>
       {{/each}}

From 5feac621bec8dd909727c6ddf513d6eebddb1fe3 Mon Sep 17 00:00:00 2001
From: Seyi Adebajo <sadebajo@linkedin.com>
Date: Wed, 4 Apr 2018 23:32:21 -0700
Subject: [PATCH 09/10] updates styling on avatar modal

---
 .../app/components/avatars/rollup-avatars.ts        | 13 ++++++++++++-
 .../styles/components/avatar/_avatars-detail.scss   | 12 +++++++++---
 wherehows-web/app/typings/untyped-js-module.d.ts    |  6 ++++++
 wherehows-web/package.json                          |  1 +
 wherehows-web/yarn.lock                             |  6 ++++++
 5 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/wherehows-web/app/components/avatars/rollup-avatars.ts b/wherehows-web/app/components/avatars/rollup-avatars.ts
index f7d7bd5975..addd401f66 100644
--- a/wherehows-web/app/components/avatars/rollup-avatars.ts
+++ b/wherehows-web/app/components/avatars/rollup-avatars.ts
@@ -3,6 +3,7 @@ import { IAvatar } from 'wherehows-web/typings/app/avatars';
 import { set, get, computed } from '@ember/object';
 import ComputedProperty from '@ember/object/computed';
 import { action } from 'ember-decorators/object';
+import { singularize, pluralize } from 'ember-inflector';
 
 export default class extends Component {
   tagName = 'span';
@@ -13,6 +14,7 @@ export default class extends Component {
     super(...arguments);
 
     this.avatars || (this.avatars = []);
+    this.avatarType || (this.avatarType = 'entity');
   }
 
   /**
@@ -27,12 +29,21 @@ export default class extends Component {
    */
   isShowingAvatars = false;
 
+  /**
+   * The type of avatars being shown
+   * @type {string}
+   */
+  avatarType: string;
+
   /**
    * Returns the text to be shown in the avatar detail page header
    * @type {ComputedProperty<string>}
    */
   header: ComputedProperty<string> = computed('avatars.length', function(): string {
-    return `${get(this, 'avatars').length} users`;
+    const count = get(this, 'avatars').length;
+    const suffix = get(this, 'avatarType');
+
+    return `${count} ${count > 1 ? pluralize(suffix) : singularize(suffix)}`;
   });
 
   /**
diff --git a/wherehows-web/app/styles/components/avatar/_avatars-detail.scss b/wherehows-web/app/styles/components/avatar/_avatars-detail.scss
index 011a868a6f..b45f99f48f 100644
--- a/wherehows-web/app/styles/components/avatar/_avatars-detail.scss
+++ b/wherehows-web/app/styles/components/avatar/_avatars-detail.scss
@@ -6,12 +6,16 @@
   max-height: calc(100vh - 64px);
   min-height: item-spacing(7);
   width: 520px;
-  overflow-y: scroll;
-  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+
+  &__header,
+  &__content {
+    display: flex;
+  }
 
   &__header {
     padding: item-spacing(4 4);
-    display: flex;
     justify-content: space-between;
     align-items: center;
     border-bottom: 1px solid rgba(0, 0, 0, 0.15);
@@ -52,6 +56,8 @@
   margin: 0;
   padding: item-spacing(0 0 0 3);
   width: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 
 .avatar-detail {
diff --git a/wherehows-web/app/typings/untyped-js-module.d.ts b/wherehows-web/app/typings/untyped-js-module.d.ts
index 3435ffa195..1336f8e04c 100644
--- a/wherehows-web/app/typings/untyped-js-module.d.ts
+++ b/wherehows-web/app/typings/untyped-js-module.d.ts
@@ -33,6 +33,12 @@ declare module 'ember-simple-auth/services/session' {
   }
 }
 
+declare module 'ember-inflector' {
+  const singularize: (arg: string) => string;
+  const pluralize: (arg: string) => string;
+  export { singularize, pluralize };
+}
+
 declare module 'wherehows-web/utils/datasets/compliance-policy' {
   export const isPolicyExpectedShape: (policy: object) => boolean;
 }
diff --git a/wherehows-web/package.json b/wherehows-web/package.json
index a98f1520db..a1b5c481d4 100644
--- a/wherehows-web/package.json
+++ b/wherehows-web/package.json
@@ -60,6 +60,7 @@
     "ember-export-application-global": "^2.0.0",
     "ember-fetch": "^3.4.4",
     "ember-font-awesome": "^4.0.0-rc.2",
+    "ember-inflector": "^2.2.0",
     "ember-load-initializers": "^1.0.0",
     "ember-math-helpers": "^2.4.0",
     "ember-metrics": "^0.12.1",
diff --git a/wherehows-web/yarn.lock b/wherehows-web/yarn.lock
index 2fbfde0913..a6612c1c22 100644
--- a/wherehows-web/yarn.lock
+++ b/wherehows-web/yarn.lock
@@ -3431,6 +3431,12 @@ ember-inflector@^2.0.0:
   dependencies:
     ember-cli-babel "^6.0.0"
 
+ember-inflector@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/ember-inflector/-/ember-inflector-2.2.0.tgz#edd273dfd1a29be27f14b195e2f0ed70e812d9e0"
+  dependencies:
+    ember-cli-babel "^6.0.0"
+
 ember-load-initializers@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/ember-load-initializers/-/ember-load-initializers-1.0.0.tgz#4919eaf06f6dfeca7e134633d8c05a6c9921e6e7"

From 031990ebc1a1e06758387490f236479c14f3359d Mon Sep 17 00:00:00 2001
From: Seyi Adebajo <sadebajo@linkedin.com>
Date: Thu, 5 Apr 2018 00:13:12 -0700
Subject: [PATCH 10/10] updated avatar detail header

---
 wherehows-web/app/styles/components/avatar/_avatar.scss         | 1 +
 .../app/templates/components/avatars/stacked-avatars-list.hbs   | 2 +-
 .../components/datasets/containers/dataset-owner-list.hbs       | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/wherehows-web/app/styles/components/avatar/_avatar.scss b/wherehows-web/app/styles/components/avatar/_avatar.scss
index c9355d2a47..db43288942 100644
--- a/wherehows-web/app/styles/components/avatar/_avatar.scss
+++ b/wherehows-web/app/styles/components/avatar/_avatar.scss
@@ -84,6 +84,7 @@ $avatar-size: 18px;
   text-align: center;
   z-index: 2;
   line-height: item-spacing(7);
+  cursor: pointer;
 }
 
 .avatar-meta-action {
diff --git a/wherehows-web/app/templates/components/avatars/stacked-avatars-list.hbs b/wherehows-web/app/templates/components/avatars/stacked-avatars-list.hbs
index 8c08c680ac..a576b1abf4 100644
--- a/wherehows-web/app/templates/components/avatars/stacked-avatars-list.hbs
+++ b/wherehows-web/app/templates/components/avatars/stacked-avatars-list.hbs
@@ -36,7 +36,7 @@
   </ul>
 
   {{#if rollupAvatars}}
-    {{#avatars/rollup-avatars avatars=avatars}}
+    {{#avatars/rollup-avatars avatars=avatars avatarType=avatarType}}
       {{rollupAvatars.length}}+
     {{/avatars/rollup-avatars}}
   {{/if}}
diff --git a/wherehows-web/app/templates/components/datasets/containers/dataset-owner-list.hbs b/wherehows-web/app/templates/components/datasets/containers/dataset-owner-list.hbs
index c12d1e4fc3..f75229c5e3 100644
--- a/wherehows-web/app/templates/components/datasets/containers/dataset-owner-list.hbs
+++ b/wherehows-web/app/templates/components/datasets/containers/dataset-owner-list.hbs
@@ -1 +1 @@
-{{avatars/stacked-avatars-list avatars=avatars}}
\ No newline at end of file
+{{avatars/stacked-avatars-list avatars=avatars avatarType="owner"}}
\ No newline at end of file