Rework the base JavaScript foundation for pages and main UI elements.

Review Request #10718 — Created Sept. 19, 2019 and submitted

Review Board

Back in Review Board 2.5, we began working toward a better standard for
how JavaScript-backed pages are defined, by way of RB.PageView,
RB.Page, and RB.PageManager objects. PageManager was responsible
for managing pages, but didn't really help with their construction (and
wasn't always used). RB.Page and RB.PageView were empty by default,
built for future expansion, but not very helpful up until now.

Over time, we started introducing concepts like full-page content mode
(used in places like the dashboard, where we want the main page content
to always be on-screen) and an action panel that overlays the sidebar.
These were implemented in the subclasses that needed them, making it
harder for new pages to leverage the capabilities.

This change fleshes out the base classes, giving them more consistent
responsibility over the page. RB.PageView now sets up the
RB.HeaderView (instead of leaving that to the template) and handles
the full-page content mode sizing and layout logic. It also takes care
of hiding and later showing the sidebar and content areas once initial
layout is complete, helping provide a smooth initial load of the page.

On a template level, we're now standardizing how page classes are set
up. Templates can provide the following blocks:

  • js-page-view-type: The RB.PageView class or subclass for the page.
  • js-page-view-options: A dictionary of options to pass to the view.
  • js-page-model-type: The RB.Page class or subclass for the page.
  • js-page-model-attrs: A dictionary of attributes for the model.
  • js-page-model-options: A dictionary of options for the model (useful
    for passing {parse: true}.

These get passed into a new RB.PageManager.setupPage() function, which
takes care of instantiating and setting the page in RB.PageManager.
As more pages make use of this, we'll be able to provide smarter desktop
and mobile page management.

For now, there will be conflicts with some pages. For instance, the
datagrid pages manually instantiate a subclass of RB.PageView, meaning
we'll end up with two of these. The code tries to work around this, and
warns to the console with advice. Upcoming changes will begin moving
pages over to all the new page and sidebar capabilities.

Tested all the current pages that provide a PageView subclass in both
desktop and mobile mode, making sure they work correctly and that there
aren't any JavaScript errors.

Updated some pages (which will be posted in an upcoming change) and tested
their behavior as well.

Description From Last Updated

Col: 17 Do not use 'new' for side effects.

Checks run (1 failed, 1 succeeded)
flake8 passed.
JSHint failed.


  1. Ship It!
Review request changed

Status: Closed (submitted)

Change Summary:

Pushed to release-4.0.x (49ad43b)