Migrate `createViewWithBodyClass` helper to components

app/assets/javascripts/discourse/components/d-section.js.es6

@@ -0,0 +1,45 @@
+import DiscourseURL from 'discourse/lib/url';
+
+// Can add a body class from within a component, also will scroll to the top automatically.
+export default Ember.Component.extend({
+  tagName: 'section',
+
+  _scrollTop() {
+    if (Ember.testing) { return; }
+    $(document).scrollTop(0);
+  },
+
+  didInsertElement() {
+    this._super();
+
+    const pageClass = this.get('pageClass');
+    if (pageClass) {
+      $('body').addClass(`${pageClass}-page`);
+    }
+
+    const bodyClass = this.get('bodyClass');
+    if (bodyClass) {
+      $('body').addClass(bodyClass);
+    }
+
+    if (this.get('scrollTop') === "false") {
+      return;
+    }
+
+    if (DiscourseURL.isJumpScheduled()) { return; }
+    Ember.run.scheduleOnce('afterRender', this, this._scrollTop);
+  },
+
+  willDestroyElement() {
+    this._super();
+    const pageClass = this.get('pageClass');
+    if (pageClass) {
+      $('body').removeClass(`${pageClass}-page`);
+    }
+
+    const bodyClass = this.get('bodyClass');
+    if (bodyClass) {
+      $('body').removeClass(bodyClass);
+    }
+  }
+});

app/assets/javascripts/discourse/lib/create-view.js.es6

@@ -1,15 +0,0 @@
-import { on } from 'ember-addons/ember-computed-decorators';
-
-export function createViewWithBodyClass(body_class) {
-  return Ember.View.extend({
-    @on("didInsertElement")
-    addBodyClass() {
-      $('body').addClass(body_class);
-    },
-
-    @on("willDestroyElement")
-    removeBodyClass() {
-      $('body').removeClass(body_class);
-    }
-  });
-}

app/assets/javascripts/discourse/templates/about.hbs

@@ -1,3 +1,4 @@
+{{#d-section pageClass="about"}}
   <div class='container'>
     <div class='contents clearfix body-page'>
 
@@ -95,3 +96,4 @@
 
     </div>
   </div>
+{{/d-section}}

app/assets/javascripts/discourse/templates/badges/index.hbs

@@ -1,3 +1,4 @@
+{{#d-section pageClass="badges"}}
   <div class='container badges'>
     <h1>{{i18n 'badges.title'}}</h1>
 
@@ -15,3 +16,4 @@
       {{/each}}
     </div>
   </div>
+{{/d-section}}

app/assets/javascripts/discourse/templates/full-page-search.hbs

@@ -1,3 +1,4 @@
+{{#d-section pageClass="search" class="search-container"}}
   <div class="search row clearfix">
     {{search-text-field value=searchTerm class="full-page-search input-xxlarge search no-blur" action="search" hasAutofocus=hasAutofocus}}
     {{d-button action="search" icon="search" class="btn-primary" disabled=searching}}
@@ -130,3 +131,4 @@
     {{/if}}
 
   {{/conditional-loading-spinner}}
+{{/d-section}}

app/assets/javascripts/discourse/templates/navigation/default.hbs

@@ -1,3 +1,4 @@
+{{#d-section bodyClass="navigation-topics" scrollTop="false"}}
   {{bread-crumbs categories=categories}}
 
   {{navigation-bar navItems=navItems filterMode=filterMode}}
@@ -5,3 +6,4 @@
   {{#if canCreateTopic}}
     <button id="create-topic" class='btn btn-default' {{action "createTopic"}}><i class='fa fa-plus'></i>{{i18n 'topic.create'}}</button>
   {{/if}}
+{{/d-section}}

app/assets/javascripts/discourse/templates/preferences.hbs

@@ -1,4 +1,4 @@
-<section class='user-content user-preferences'>
+{{#d-section pageClass="user-preferences" class="user-content user-preferences"}}
 
   <form class="form-horizontal">
 
@@ -367,4 +367,4 @@
       </div>
     {{/if}}
   </form>
-</section>
+{{/d-section}}

app/assets/javascripts/discourse/templates/tags.hbs

@@ -1,3 +1,4 @@
+{{#d-section pageClass="tags"}}
   <div class="container list-container">
     <div class="row">
       <div class="full-width">
@@ -7,3 +8,4 @@
       </div>
     </div>
   </div>
+{{/d-section}}

app/assets/javascripts/discourse/templates/user-invited-show.hbs

@@ -1,3 +1,4 @@
+{{#d-section pageClass="user-invites"}}
   {{#if canInviteToForum}}
     {{#load-more class="paginated-topics-list" selector=".paginated-topics-list .user-invite-list tr" action="loadMore"}}
       <section class='user-content'>
@@ -107,3 +108,4 @@
       </section>
     {{/load-more}}
   {{/if}}
+{{/d-section}}

app/assets/javascripts/discourse/templates/user/activity.hbs

@@ -1,4 +1,4 @@
-<section class='user-navigation'>
+{{#d-section pageClass="user-activity" class="user-nagivation" scrollTop="false"}}
   {{#mobile-nav class='activity-nav' desktopClass='action-list activity-list nav-stacked' currentPath=currentPath}}
     <li class='no-glyph'>
       {{#link-to 'userActivity.index'}}{{i18n 'user.filters.all'}}{{/link-to}}
@@ -31,10 +31,8 @@
       {{d-button action="exportUserArchive" label="user.download_archive" icon="download"}}
     </div>
   {{/if}}
-
+{{/d-section}}
-</section>
 
 <section class='user-right'>
   {{outlet}}
 </section>
-

app/assets/javascripts/discourse/templates/user/badges.hbs

@@ -1,5 +1,5 @@
-<section class='user-content user-badges-list'>
+{{#d-section pageClass="user-badges" class="user-content user-badges-list"}}
   {{#each sortedBadges as |ub|}}
     {{badge-card badge=ub.badge count=ub.count navigateOnClick="true" username=username}}
   {{/each}}
-</section>
+{{/d-section}}

app/assets/javascripts/discourse/templates/user/messages.hbs

@@ -1,4 +1,4 @@
-<section class='user-navigation'>
+{{#d-section class="user-navigation" pageClass="user-messages"}}
   {{#unless site.mobileView}}
     {{#if showNewPM}}
       {{d-button class="btn-primary new-private-message" action="composePrivateMessage" icon="envelope" label="user.new_private_message"}}
@@ -37,8 +37,7 @@
     {{/if}}
     {{/each}}
   {{/mobile-nav}}
-
+{{/d-section}}
-</section>
 
 <section class='user-right messages'>
 

app/assets/javascripts/discourse/templates/user/notifications.hbs

@@ -1,4 +1,4 @@
-<section class='user-navigation'>
+{{#d-section pageClass="user-notifications" class="user-notifications"}}
   {{#mobile-nav class='notifications-nav' desktopClass='notification-list action-list nav-stacked' currentPath=application.currentPath}}
     <li class='no-glyph'>
       {{#link-to 'userNotifications.index'}}{{i18n 'user.filters.all'}}{{/link-to}}
@@ -26,7 +26,7 @@
                icon='check'
                disabled=allNotificationsRead}}
   {{/if}}
-</section>
+{{/d-section}}
 
 <section class='user-right'>
   {{#load-more class="notification-history user-stream" selector=".user-stream .notification" action="loadMore"}}

app/assets/javascripts/discourse/templates/user/summary.hbs

@@ -1,3 +1,4 @@
+{{#d-section pageClass="user-summary"}}
   <div class='top-section stats-section'>
     <h3 class='stats-title'>{{i18n "user.summary.stats"}}</h3>
     <ul>
@@ -183,3 +184,4 @@
       <p>{{#link-to "user.badges" user class="more"}}{{i18n "user.summary.more_badges"}}{{/link-to}}</p>
     {{/if}}
   </div>
+{{/d-section}}

app/assets/javascripts/discourse/templates/users.hbs

@@ -1,3 +1,4 @@
+{{#d-section pageClass="users"}}
   {{#load-more selector=".directory tbody tr" action="loadMore"}}
     <div class="container">
       <div class='directory'>
@@ -42,3 +43,4 @@
       </div>
     </div>
   {{/load-more}}
+{{/d-section}}

app/assets/javascripts/discourse/views/about.js.es6

@@ -1,3 +0,0 @@
-import { createViewWithBodyClass } from 'discourse/lib/create-view';
-
-export default createViewWithBodyClass('about-page');

app/assets/javascripts/discourse/views/badges-index.js.es6

@@ -1,4 +0,0 @@
-import ScrollTop from 'discourse/mixins/scroll-top';
-import { createViewWithBodyClass } from 'discourse/lib/create-view';
-
-export default createViewWithBodyClass('badges-page').extend(ScrollTop);

app/assets/javascripts/discourse/views/full-page-search.js.es6

@@ -1,5 +0,0 @@
-import { createViewWithBodyClass } from 'discourse/lib/create-view';
-
-export default createViewWithBodyClass('search-page').extend({
-  classNames: ['search-container']
-});

app/assets/javascripts/discourse/views/navigation-default.js.es6

@@ -1,3 +0,0 @@
-import { createViewWithBodyClass } from 'discourse/lib/create-view';
-
-export default createViewWithBodyClass('navigation-topics');

app/assets/javascripts/discourse/views/preferences.js.es6

@@ -1,6 +0,0 @@
-import { createViewWithBodyClass } from 'discourse/lib/create-view';
-
-export default createViewWithBodyClass('user-preferences-page').extend({
-  templateName: 'user/preferences',
-  classNames: ['user-preferences']
-});

app/assets/javascripts/discourse/views/tags.js.es6

@@ -1,3 +0,0 @@
-import { createViewWithBodyClass } from 'discourse/lib/create-view';
-
-export default createViewWithBodyClass('tags-page');

app/assets/javascripts/discourse/views/user-activity.js.es6

@@ -1,3 +0,0 @@
-import { createViewWithBodyClass } from 'discourse/lib/create-view';
-
-export default createViewWithBodyClass('user-activity-page');

app/assets/javascripts/discourse/views/user-badges.js.es6

@@ -1,4 +0,0 @@
-import ScrollTop from 'discourse/mixins/scroll-top';
-import { createViewWithBodyClass } from 'discourse/lib/create-view';
-
-export default createViewWithBodyClass('user-badges-page').extend(ScrollTop);

app/assets/javascripts/discourse/views/user-invited-show.js.es6

@@ -1,3 +0,0 @@
-import { createViewWithBodyClass } from 'discourse/lib/create-view';
-
-export default createViewWithBodyClass('user-invites-page');

app/assets/javascripts/discourse/views/user-messages.js.es6

@@ -1,3 +0,0 @@
-import { createViewWithBodyClass } from 'discourse/lib/create-view';
-
-export default createViewWithBodyClass('user-messages-page');

app/assets/javascripts/discourse/views/user-notifications.js.es6

@@ -1,3 +0,0 @@
-import { createViewWithBodyClass } from 'discourse/lib/create-view';
-
-export default createViewWithBodyClass('user-notifications-page');

app/assets/javascripts/discourse/views/user-summary.js.es6

@@ -1,3 +0,0 @@
-import { createViewWithBodyClass } from 'discourse/lib/create-view';
-
-export default createViewWithBodyClass('user-summary-page');

app/assets/javascripts/discourse/views/users.js.es6

@@ -1,3 +0,0 @@
-import { createViewWithBodyClass } from 'discourse/lib/create-view';
-
-export default createViewWithBodyClass('users-page');

test/javascripts/acceptance/about-test.js.es6

@@ -4,6 +4,7 @@ acceptance("About");
 test("viewing", () => {
   visit("/about");
   andThen(() => {
+    ok($('body.about-page').length, "has body class");
     ok(exists('.about.admins .user-info'), 'has admins');
     ok(exists('.about.moderators .user-info'), 'has moderators');
     ok(exists('.about.stats tr td'), 'has stats');

test/javascripts/acceptance/badges-test.js.es6

@@ -5,6 +5,7 @@ acceptance("Badges");
 test("Visit Badge Pages", () => {
   visit("/badges");
   andThen(() => {
+    ok($('body.badges-page').length, "has body class");
     ok(exists('.badge-groups .badge-card'), "has a list of badges");
   });
 

test/javascripts/acceptance/preferences-test.js.es6

@@ -5,6 +5,7 @@ test("update some fields", () => {
   visit("/users/eviltrout/preferences");
 
   andThen(() => {
+    ok($('body.user-preferences-page').length, "has the body class");
     equal(currentURL(), '/users/eviltrout/preferences', "it doesn't redirect");
     ok(exists('.user-preferences'), 'it shows the preferences');
   });

test/javascripts/acceptance/search-full-test.js.es6

@@ -43,6 +43,8 @@ test("perform various searches", assert => {
   visit("/search");
 
   andThen(() => {
+    ok($('body.search-page').length, "has body class");
+    ok(exists('.search-container'), "has container class");
     assert.ok(find('input.search').length > 0);
     assert.ok(find('.fps-topic').length === 0);
   });

test/javascripts/acceptance/tags-test.js.es6

@@ -0,0 +1,11 @@
+import { acceptance } from "helpers/qunit-helpers";
+acceptance("Tags", { loggedIn: true });
+
+test("list the tags", () => {
+  visit("/tags");
+
+  andThen(() => {
+    ok($('body.tags-page').length, "has the body class");
+    ok(exists('.tag-eviltrout'), "shows the evil trout tag");
+  });
+});

test/javascripts/acceptance/topic-discovery-test.js.es6

@@ -4,6 +4,7 @@ acceptance("Topic Discovery");
 test("Visit Discovery Pages", () => {
   visit("/");
   andThen(() => {
+    ok($('body.navigation-topics').length, "has the default navigation");
     ok(exists(".topic-list"), "The list of topics was rendered");
     ok(exists('.topic-list .topic-list-item'), "has topics");
   });

test/javascripts/acceptance/user-anonymous-test.js.es6

@@ -24,6 +24,9 @@ test("Root URL", () => {
 
 test("Filters", () => {
   visit("/users/eviltrout/activity");
+  andThen(() => {
+    ok($('body.user-activity-page').length, "has the body class");
+  });
   hasStream();
 
   visit("/users/eviltrout/activity/topics");
@@ -33,6 +36,14 @@ test("Filters", () => {
   hasStream();
 });
 
+test("Badges", () => {
+  visit("/users/eviltrout/badges");
+  andThen(() => {
+    ok($('body.user-badges-page').length, "has the body class");
+    ok(exists(".user-badges-list .badge-card"), "shows a badge");
+  });
+});
+
 test("Restricted Routes", () => {
   visit("/users/eviltrout/preferences");
 

test/javascripts/acceptance/user-test.js.es6

@@ -1,17 +1,32 @@
 import { acceptance } from "helpers/qunit-helpers";
-import { hasStream } from 'acceptance/user-anonymous-test';
 
 acceptance("User", {loggedIn: true});
 
-test("Pending", () => {
+test("Invites", () => {
-  visit("/users/eviltrout/activity/pending");
+  visit("/users/eviltrout/invited/pending");
-  hasStream();
+  andThen(() => {
+    ok($('body.user-invites-page').length, "has the body class");
+  });
+});
+
+test("Messages", () => {
+  visit("/users/eviltrout/messages");
+  andThen(() => {
+    ok($('body.user-messages-page').length, "has the body class");
+  });
+});
+
+test("Notifications", () => {
+  visit("/users/eviltrout/notifications");
+  andThen(() => {
+    ok($('body.user-notifications-page').length, "has the body class");
+  });
 });
 
 test("Root URL - Viewing Self", () => {
   visit("/users/eviltrout");
   andThen(() => {
+    ok($('body.user-summary-page').length, "has the body class");
     equal(currentPath(), 'user.summary', "it defaults to summary");
   });
 });
-

test/javascripts/acceptance/users-test.js.es6

@@ -4,6 +4,7 @@ acceptance("User Directory");
 test("Visit Page", function() {
   visit("/users");
   andThen(() => {
+    ok($('body.users-page').length, "has the body class");
     ok(exists('.directory table tr'), "has a list of users");
   });
 });

test/javascripts/helpers/create-pretender.js.es6

@@ -56,6 +56,13 @@ export default function() {
       return response(json);
     });
 
+    this.get('/tags', () => {
+      return response({ tags: [{
+        id: 'eviltrout',
+        count: 1
+      }] });
+    });
+
     this.get('/users/eviltrout.json', () => {
       const json = fixturesByUrl['/users/eviltrout.json'];
       if (loggedIn()) {
@@ -76,6 +83,20 @@ export default function() {
       });
     });
 
+    this.get('/users/eviltrout/invited_count.json', () => {
+      return response({
+        "counts": { "pending": 1, "redeemed": 0, "total": 0 }
+      });
+    });
+
+    this.get('/users/eviltrout/invited.json', () => {
+      return response({ "invites": [ {id: 1} ] });
+    });
+
+    this.get('/topics/private-messages/eviltrout.json', () => {
+      return response({ topic_list: { topics: [] } });
+    });
+
     this.get('/clicks/track', success);
 
     this.get('/search', request => {