Handle URL changes
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, wereplaceUrl
, 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
toUrl
, so that when view state changes the URL can be updated -
mapping of Url
toViewState
, 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
, notBrowser.application
) -
Sometimes, should we pushUrl
rather thanreplaceUrl
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
Edited by Chris Martin