• 
      

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

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

    Information

    Review Board
    release-4.0.x
    f2b416e...

    Reviewers

    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.