Merge pull request #1589 from code-corps/add-project-menu-switching

joshsmith · web-flow · commit a33aa20b29f6 · 2018-01-01T16:01:42.000-05:00
Add project menu switching
diff --git a/app/components/project-switcher-menu.js b/app/components/project-switcher-menu.js
@@ -0,0 +1,5 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  classNames: ['project-switcher-menu']
+});
diff --git a/app/components/project-switcher.js b/app/components/project-switcher.js
@@ -0,0 +1,20 @@
+import Component from '@ember/component';
+import { set } from '@ember/object';
+
+export default Component.extend({
+  classNames: ['project-switcher', 'dropdown'],
+  classNameBindings: ['hidden:menu-hidden:menu-visible'],
+  hidden: true,
+
+  actions: {
+    hide() {
+      document.body.setAttribute('style', null);
+      set(this, 'hidden', true);
+    },
+
+    show() {
+      document.body.setAttribute('style', 'overflow: hidden;');
+      set(this, 'hidden', false);
+    }
+  }
+});
diff --git a/app/models/user.js b/app/models/user.js
@@ -29,6 +29,7 @@ export default Model.extend({
 
   categories: hasMany('category', { async: true }),
   githubAppInstallations: hasMany('github-app-installation', { async: true }),
+  organizations: hasMany('organization', { async: true }),
   projectUsers: hasMany('project-user', { async: true }),
   stripeConnectSubscriptions: hasMany('stripe-connect-subscription', { async: true }),
   stripePlatformCard: belongsTo('stripe-platform-card', { async: true }),
diff --git a/app/styles/app.scss b/app/styles/app.scss
@@ -149,8 +149,9 @@
 @import "components/project-join-modal";
 @import "components/project-list";
 @import "components/project-long-description";
-@import "components/project-users";
 @import "components/project-menu";
+@import "components/project-switcher-menu";
+@import "components/project-users";
 
 //
 // COMPONENTS - PROJECT CARDS
diff --git a/app/styles/components/project-switcher-menu.scss b/app/styles/components/project-switcher-menu.scss
@@ -0,0 +1,100 @@
+.sheet {
+  background: none;
+  border-radius: none;
+  box-shadow: none;
+  padding: 0;
+}
+
+.project-menu {
+  animation: slide 0.25s forwards;
+  position: fixed;
+  top: 0;
+  right: -1000px;
+  bottom: 0;
+  left: 0;
+  z-index: 999999;
+  right: -1000px;
+}
+
+.project-menu-wrapper {
+  background: white;
+  position: absolute;
+  top: 0; right: 0; bottom: 0;
+}
+
+.project-menu-content {
+  height: 100%;
+  overflow: scroll;
+  width: 280px;
+}
+
+.project-switcher-menu {
+  padding: 5px 0;
+  text-align: left;
+
+  ul {
+    border-bottom: 1px solid $border-gray;
+    padding-bottom: 5px;
+    margin-bottom: 3px;
+
+    &:last-child {
+      border-bottom: none;
+      padding-bottom: 0;
+      margin-bottom: 0;
+    }
+  }
+
+  li {
+    display: block;
+    float: none;
+    padding: 1px 5px;
+  }
+
+  a {
+    align-items: center;
+    border: none;
+    color: $gray;
+    display: flex;
+    font-weight: 500;
+    padding: 2px;
+
+    &:hover, &.active {
+      background: $blue--background;
+      color: $blue;
+
+      .project-switcher-menu__new__icon {
+        border-color: $blue;
+        color: $blue;
+      }
+    }
+  }
+
+  img {
+    margin-right: 5px;
+  }
+
+  &__new {
+    &__icon {
+      align-items: center;
+      border: 1px dashed $gray--lighter;
+      border-radius: 2px;
+      color: $gray--lighter;
+      display: inline-flex;
+      height: 25px;
+      justify-content: center;
+      margin-right: 5px;
+      width: 25px;
+    }
+  }
+}
+
+li.project-switcher-menu__option--title {
+  color: $text--lighter;
+  font-size: $body-font-size-small;
+  font-weight: 600;
+  padding: 5px;
+}
+
+@keyframes slide {
+  100% { right: 0; }
+}
diff --git a/app/styles/components/user-menu.scss b/app/styles/components/user-menu.scss
@@ -24,7 +24,7 @@
 }
 
 .user-menu a {
-  padding: 5px 0 2px 0;
+  padding: 5px 10px 2px 10px;
 }
 
 .user-menu__avatar {
diff --git a/app/styles/layout/_header.scss b/app/styles/layout/_header.scss
@@ -80,7 +80,6 @@
     &.header-navigation__icon-link {
       color: $gray;
       font-size: 24px;
-      margin: 0 5px;
       padding: 4px 10px;
     }
 
diff --git a/app/templates/application.hbs b/app/templates/application.hbs
@@ -4,6 +4,8 @@
 
 {{svg/sprite-map}}
 
+<div id="project-menu"></div>
+
 {{! do we have to wrap the whole app with #drag-zone?
 isn't this here mainly for updating a user's image? }}
 {{#drag-zone}}
diff --git a/app/templates/components/navigation-menu.hbs b/app/templates/components/navigation-menu.hbs
@@ -26,9 +26,19 @@
     {{#if session.isAuthenticated}}
       <nav class="header-navigation--right">
         <ul class="header-navigation__options">
+          {{#if currentUser.user.organizations}}
+            <li>
+              {{project-switcher
+                user=currentUser.user
+              }}
+            </li>
+          {{/if}}
           <li>{{#link-to "conversations" data-test-conversations-link class="header-navigation__icon-link"}}{{fa-icon "comments"}}{{/link-to}}</li>
         </ul>
-        {{user-menu user=currentUser.user class="header-navigation__options" }}
+        {{user-menu
+          user=currentUser.user
+          class="header-navigation__options"
+        }}
       </nav>
     {{else}}
       <nav class="header-navigation--right">
diff --git a/app/templates/components/project-switcher-menu.hbs b/app/templates/components/project-switcher-menu.hbs
@@ -0,0 +1,33 @@
+{{#modal-dialog
+   containerClassNames="sheet"
+   targetAttachment="none"
+   translucentOverlay=true
+}}
+  <div data-test-project-menu class="project-menu">
+    <div class="project-menu-wrapper">
+      <div class="project-menu-content">
+        <div class="project-switcher-menu">
+          {{#each user.organizations as |organization|}}
+            <ul>
+              <li data-test-organization class="project-switcher-menu__option--title">{{organization.name}}</li>
+              {{#each organization.projects as |project|}}
+                {{#unless project.isNew}}
+                  <li data-test-project>
+                    {{#link-to 'project' project.organization.slug project.slug}}
+                      <img data-test-icon class="icon icon--tiny" width="25" height="25" src="{{project.iconThumbUrl}}" /> {{project.title}}
+                    {{/link-to}}
+                  </li>
+                {{/unless}}
+              {{/each}}
+              {{#if (can 'manage organization' organization)}}
+                <li data-test-new-project class="project-switcher-menu__new">
+                  {{#link-to 'projects.new' organization.slug}}<span class="project-switcher-menu__new__icon">{{fa-icon "plus"}}</span> New project{{/link-to}}
+                </li>
+              {{/if}}
+            </ul>
+          {{/each}}
+        </div>
+      </div>
+    </div>
+  </div>
+{{/modal-dialog}}
diff --git a/app/templates/components/project-switcher.hbs b/app/templates/components/project-switcher.hbs
@@ -0,0 +1,9 @@
+{{#click-outside action=(action "hide")}}
+  <a data-test-menu-link class="header-navigation__icon-link" {{action "show"}}>
+    {{fa-icon "folder"}}
+  </a>
+{{/click-outside}}
+
+{{#unless hidden}}
+  {{project-switcher-menu user=user}}
+{{/unless}}
diff --git a/mirage/models/user.js b/mirage/models/user.js
@@ -2,8 +2,9 @@ import { Model, belongsTo, hasMany } from 'ember-cli-mirage';
 
 export default Model.extend({
   githubAppInstallations: hasMany('github-app-installation'),
-  projectUsers: hasMany(),
-  sluggedRoute: belongsTo(),
+  organizations: hasMany('organization'),
+  projectUsers: hasMany('project-user'),
+  sluggedRoute: belongsTo('slugged-route'),
   stripeConnectSubscriptions: hasMany('stripe-connect-subscription'),
   stripePlatformCard: belongsTo('stripe-platform-card'),
   stripePlatformCustomer: belongsTo('stripe-platform-customer'),
diff --git a/tests/acceptance/navigation-test.js b/tests/acceptance/navigation-test.js
@@ -104,3 +104,24 @@ test('Logged in, from user menu can log out', function(assert) {
     assert.ok(indexPage.navMenu.signInLink.isVisible, 'Page contains sign in link.');
   });
 });
+
+test('Logged in, user with organizations can navigate to projects', function(assert) {
+  assert.expect(1);
+
+  let user = server.create('user');
+  let organization = server.create('organization', { owner: user });
+  let project = server.create('project', { organization });
+  server.create('project-user', { project, role: 'owner', user });
+  authenticateSession(this.application, { user_id: user.id });
+
+  indexPage.visit();
+  andThen(function() {
+    indexPage.navMenu.projectSwitcher.menuLink.click();
+  });
+  andThen(function() {
+    indexPage.navMenu.projectSwitcher.projectSwitcherMenu.menu.projects(0).icon.click();
+  });
+  andThen(function() {
+    assert.equal(currentRouteName(), 'project.index');
+  });
+});
diff --git a/tests/integration/components/navigation-menu-test.js b/tests/integration/components/navigation-menu-test.js
@@ -110,3 +110,37 @@ test('it renders elements for the onboarding menu correctly when on project.than
   assert.notOk(page.onboarding.progressBar.isVisible, 'Onboarding progress bar is not rendered.');
   assert.ok(page.onboarding.finishSigningUp.isVisible, 'The link to finish signing up is rendered.');
 });
+
+test('it renders the project switcher menu when the user has organizations', function(assert) {
+  assert.expect(1);
+
+  stubService(this, 'current-user', {
+    user: {
+      organizations: [
+        {
+          id: 1
+        }
+      ]
+    }
+  });
+  stubService(this, 'session', { isAuthenticated: true });
+
+  renderPage();
+
+  assert.ok(page.projectSwitcher.isVisible, 'The project switcher is rendered.');
+});
+
+test('it does not render the project switcher menu when the user has no organizations', function(assert) {
+  assert.expect(1);
+
+  stubService(this, 'current-user', {
+    user: {
+      organizations: []
+    }
+  });
+  stubService(this, 'session', { isAuthenticated: true });
+
+  renderPage();
+
+  assert.notOk(page.projectSwitcher.isVisible, 'The project switcher is not rendered.');
+});
diff --git a/tests/integration/components/project-switcher-menu-test.js b/tests/integration/components/project-switcher-menu-test.js
@@ -0,0 +1,71 @@
+import { set } from '@ember/object';
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+import PageObject from 'ember-cli-page-object';
+import component from 'code-corps-ember/tests/pages/components/project-switcher-menu';
+import { Ability } from 'ember-can';
+
+let page = PageObject.create(component);
+
+function renderPage() {
+  page.render(hbs`{{project-switcher-menu user=user}}`);
+}
+
+let user = {
+  organizations: [
+    {
+      name: 'Test organization',
+      projects: [
+        {
+          iconThumbUrl: 'http://lorempixel.com/25/25/',
+          isNew: false,
+          title: 'Test project'
+        }
+      ]
+    }
+  ]
+};
+
+moduleForComponent('project-switcher-menu', 'Integration | Component | project switcher menu', {
+  integration: true,
+  beforeEach() {
+    page.setContext(this);
+  },
+  afterEach() {
+    page.removeContext();
+  }
+});
+
+test('it renders the links', function(assert) {
+  assert.expect(5);
+
+  set(this, 'user', user);
+
+  renderPage();
+
+  assert.equal(page.menu.organizations().count, 1, 'One organization renders.');
+  assert.equal(page.menu.projects().count, 1, 'One project renders.');
+  assert.equal(page.menu.organizations(0).text, user.organizations[0].name, 'The organization name is correct.');
+  assert.equal(page.menu.projects(0).text, user.organizations[0].projects[0].title, 'The project title is correct.');
+  assert.equal(page.menu.projects(0).icon.url, user.organizations[0].projects[0].iconThumbUrl, 'The project icon URL is correct.');
+});
+
+test('it renders the new project link if the user can manage', function(assert) {
+  set(this, 'user', user);
+  this.register('ability:organization', Ability.extend({ canManage: true }));
+
+  renderPage();
+
+  assert.ok(page.menu.newProjectLink.isVisible, 'The new project link renders.');
+});
+
+test('it does not render the new project link if the user cannot manage', function(assert) {
+  assert.expect(1);
+
+  set(this, 'user', user);
+  this.register('ability:organization', Ability.extend({ canManage: false }));
+
+  renderPage();
+
+  assert.notOk(page.menu.newProjectLink.isVisible, 'The new project link does not render.');
+});
diff --git a/tests/integration/components/project-switcher-test.js b/tests/integration/components/project-switcher-test.js
diff --git a/tests/pages/components/navigation-menu.js b/tests/pages/components/navigation-menu.js
diff --git a/tests/pages/components/project-switcher-menu.js b/tests/pages/components/project-switcher-menu.js
diff --git a/tests/pages/components/project-switcher.js b/tests/pages/components/project-switcher.js
diff --git a/tests/unit/models/user-test.js b/tests/unit/models/user-test.js

Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,7 @@`
`24`	`24`	`}`
`25`	`25`
`26`	`26`	`.user-menu a {`
`27`		`- padding: 5px 0 2px 0;`
	`27`	`+ padding: 5px 10px 2px 10px;`
`28`	`28`	`}`
`29`	`29`
`30`	`30`	`.user-menu__avatar {`
Original file line number	Diff line number	Diff line change
`@@ -80,7 +80,6 @@`
`80`	`80`	`&.header-navigation__icon-link {`
`81`	`81`	`color: $gray;`
`82`	`82`	`font-size: 24px;`
`83`		`- margin: 0 5px;`
`84`	`83`	`padding: 4px 10px;`
`85`	`84`	`}`
`86`	`85`