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,4 +1,5 @@
-<div class='container'>
+{{#d-section pageClass="about"}}
+  <div class='container'>
     <div class='contents clearfix body-page'>
 
       <ul class="nav-pills">
@@ -94,4 +95,5 @@
       {{/if}}
 
     </div>
-</div>
+  </div>
+{{/d-section}}

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

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

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

@@ -1,4 +1,5 @@
-<div class="search row clearfix">
+{{#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}}
 
@@ -21,30 +22,30 @@
       {{d-button icon="list" class="bulk-select" title="topics.bulk.toggle" action="toggleBulkSelect"}}
       {{bulk-select-button selected=selected action="search"}}
     {{/if}}
-</div>
+  </div>
 
-{{#if bulkSelectEnabled}}
+  {{#if bulkSelectEnabled}}
     <div class='fps-select'>
       <a {{action "selectAll"}}>{{i18n "search.select_all"}}</a>
       <a {{action "clearAll"}}>{{i18n "search.clear_all"}}</a>
     </div>
-{{/if}}
+  {{/if}}
 
-{{#if invalidSearch}}
+  {{#if invalidSearch}}
     <div class='fps-invalid'>
       {{i18n "search.too_short"}}
     </div>
-{{/if}}
+  {{/if}}
 
-{{#if context}}
+  {{#if context}}
     <div class='fps-search-context'>
       <label>
         {{input type="checkbox" name="searchContext" checked=searchContextEnabled}} {{searchContextDescription}}
       </label>
     </div>
-{{/if}}
+  {{/if}}
 
-{{#conditional-loading-spinner condition=loading}}
+  {{#conditional-loading-spinner condition=loading}}
 
     {{#unless hasResults}}
       <h3>
@@ -129,4 +130,5 @@
       </h3>
     {{/if}}
 
-{{/conditional-loading-spinner}}
+  {{/conditional-loading-spinner}}
+{{/d-section}}

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

@@ -1,7 +1,9 @@
-{{bread-crumbs categories=categories}}
+{{#d-section bodyClass="navigation-topics" scrollTop="false"}}
+  {{bread-crumbs categories=categories}}
 
-{{navigation-bar navItems=navItems filterMode=filterMode}}
+  {{navigation-bar navItems=navItems filterMode=filterMode}}
 
-{{#if canCreateTopic}}
+  {{#if canCreateTopic}}
     <button id="create-topic" class='btn btn-default' {{action "createTopic"}}><i class='fa fa-plus'></i>{{i18n 'topic.create'}}</button>
-{{/if}}
+  {{/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,4 +1,5 @@
-<div class="container list-container">
+{{#d-section pageClass="tags"}}
+  <div class="container list-container">
     <div class="row">
       <div class="full-width">
         <div id='list-area'>
@@ -6,4 +7,5 @@
         </div>
       </div>
     </div>
-</div>
+  </div>
+{{/d-section}}

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

@@ -1,4 +1,5 @@
-{{#if canInviteToForum}}
+{{#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'>
         <h2>{{i18n 'user.invited.title'}}</h2>
@@ -106,4 +107,5 @@
         {{/if}}
       </section>
     {{/load-more}}
-{{/if}}
+  {{/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}}
+  {{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,4 +1,5 @@
-<div class='top-section stats-section'>
+{{#d-section pageClass="user-summary"}}
+  <div class='top-section stats-section'>
     <h3 class='stats-title'>{{i18n "user.summary.stats"}}</h3>
     <ul>
       <li>
@@ -37,9 +38,9 @@
           {{user-stat value=model.likes_received label="user.summary.likes_received"}}
       </li>
     </ul>
-</div>
+  </div>
 
-<div class='top-section'>
+  <div class='top-section'>
     <div class='top-sub-section replies-section pull-left'>
       <h3 class='stats-title'>{{i18n "user.summary.top_replies"}}</h3>
       {{#if model.replies.length}}
@@ -90,9 +91,9 @@
         <p>{{i18n "user.summary.no_topics"}}</p>
       {{/if}}
     </div>
-</div>
+  </div>
 
-<div class='top-section'>
+  <div class='top-section'>
     <div class='top-sub-section links-section pull-left'>
       <h3 class='stats-title'>{{i18n "user.summary.top_links"}}</h3>
       {{#if model.links.length}}
@@ -133,9 +134,9 @@
         <p>{{i18n "user.summary.no_replies"}}</p>
       {{/if}}
     </div>
-</div>
+  </div>
 
-<div class='top-section'>
+  <div class='top-section'>
     <div class='top-sub-section likes-section pull-left'>
       <h3 class='stats-title'>{{i18n "user.summary.most_liked_by"}}</h3>
       {{#if model.most_liked_by_users.length}}
@@ -170,9 +171,9 @@
         <p>{{i18n "user.summary.no_likes"}}</p>
       {{/if}}
     </div>
-</div>
+  </div>
 
-<div class='top-section badges-section'>
+  <div class='top-section badges-section'>
     <h3 class='stats-title'>{{i18n "user.summary.top_badges"}}</h3>
     {{#each model.badges as |badge|}}
       {{badge-card badge=badge count=badge.count navigateOnClick="true" username=user.username_lower}}
@@ -182,4 +183,5 @@
     {{#if moreBadges}}
       <p>{{#link-to "user.badges" user class="more"}}{{i18n "user.summary.more_badges"}}{{/link-to}}</p>
     {{/if}}
-</div>
+  </div>
+{{/d-section}}

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

@@ -1,4 +1,5 @@
-{{#load-more selector=".directory tbody tr" action="loadMore"}}
+{{#d-section pageClass="users"}}
+  {{#load-more selector=".directory tbody tr" action="loadMore"}}
     <div class="container">
       <div class='directory'>
 
@@ -41,4 +42,5 @@
 
       </div>
     </div>
-{{/load-more}}
+  {{/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 => {