Implement nav bar for internal users

[Cruikshanks]

https://eaflood.atlassian.net/browse/WATER-4155

So, pass-through authentication should be all sorted. We can now read the cookie passed in by the legacy UI, and confirm the user is authenticated and authorised to access a page. We pass auth, user and scope details to the global context so all view templates have access to this information. We also have our first use of this; deciding whether to display the header links to Change password and Sign out.

The final piece that all our pages should handle is the nav bar. This is where internal users can switch between Search, Bill runs and Manage assuming they have the right permissions.

This change implements the nav bar.

---

Notes

Add new permission object to auth credentials

All users get to see the search nav bar option. But the 'Bill runs', 'Digitize' and 'Manage' options are determined by what roles they have. We don't want to pollute our Nunjucks templates with anything more than if/else. So, somewhere in the app we need to work out which options a user has access to.

We could have done it in the controllers and passed the result to the view via the context there. But that means repeating the same logic lots of times (or at least calling the same logic from lots of places).

We'll need to know this for most requests. So, we could determine the permissions in our ViewsPlugin global context builder. But it seems inconsistent to pull most details about the user from the auth object in the request but then work out this final piece in the views plugin.

So, we came to the conclusion that this should sit in the AuthService and be returned as part of the credentials object that gets added to all requests by Hapi.

Mark option as active

One feature to note is the UI expects to highlight one of the nav bar options when on a page. The legacy service had its own ViewContext plugin that created the global context from a variety of sources. Which nav bar item to highlight was one of them and they chose to set this in the config options of a route, along with the page title.

We think it's clearer if data relevant to a page is route-dependent, all the data should come from the controller. For example

  return h.view('info.njk', {
    pageTitle: 'Info',
    activeNavBar: 'bill-runs',
    ...pageData
  })

That way we know there are only 2 sources; the global context and the context we define in a controller.

Screenshot of nav bar

[Beckyrose200]