Skip to content

Handle URL changes

Chris Martin requested to merge cmart/exosphere:issue-113 into master

Fixes #113 (closed) and #242 (closed).

This MR introduces URL-awareness to the Exosphere web application. You can test it right now on https://try-dev.exosphere.app.

  • URL and page title are now updated based on the current view.
    • The path encodes the view that the user is on, and the query string encodes the view parameters (like currently-selected filter options and currently-populated form fields).
    • When user navigates to an entirely new view, we pushUrl to the browser, which adds an entry to the history stack. When a parameters change in current view, we replaceUrl, which
    • I have not encoded every view parameter, like passwords for security reasons, also things like "is this pop-up menu popped open or not".
  • When a user enters a URL, Exosphere attempts to parse it, and if it matches a view, we try to show that view.
    • This means that users can now share deep URLs to specific views within the Exosphere application.
    • It also means that when someone reloads the page or restarts their browser, Exosphere should end up back on the same view where it left off.
  • We intercept and handle browser back/forward button presses, which means I accidentally also implemented #242 (closed). (oops!?)

Along the way, I changed ProjectIdentifier to a project UUID (instead of a combination of project name and Keystone URL). I think this is neater overall.

The URL-awareness in Elm cannot handle file:// URLs, so I had to do some ugly things to keep the local Electron app working. We're going to deprecate Electron soon, so the ugliness will eventually go away.

To Build

  • mapping of ViewState to page title, this should be easy peasy
  • mapping of ViewState to Url, so that when view state changes the URL can be updated
  • mapping of Url to ViewState, so that when URL changes the view state can be updated
  • Consider using project UUID as identifier in project-specific views, instead of project name + keystone URL
  • Some tests for URL building/parsing? if needed
  • make it work in Electron (go back to Browser.element, not Browser.application)
  • Sometimes, should we pushUrl rather than replaceUrl so that the browser back button means something inside of Exosphere?
  • HTML <base tag needs to be modified on deployment to try and try-dev, do this in gitlab-ci.yml
  • Handle onUrlChange which is fired for browser back/forward events
  • http://app.exosphere.localhost:8000/projects/f477d7139ced4da384dab42001a7ea3c/images doesn't result in an API call to request images?
  • Support URL path base/prefix for when Exosphere is not served at the path root

To do before/during merge

  • Set Nginx configuration of try.exosphere.app to look like try-dev.exosphere.app

How to Test

  • Go to try-dev.exosphere.app. Browse around in the app, confirm that URL and page title changes
  • Look at the browser history stack, try back and forward buttons, confirm that views change as expected
  • Copy a "deep URL" from a specific view, close your tab, open a new one, paste it, and confirm you see that view
  • Ensure Electron app still works

Screenshots

image

Edited by Chris Martin

Merge request reports