FAQ | This is a LIVE service | Changelog

Skip to content

Add API auth, asset list, delete, zero view state, infinite scrolling and fix nav links

Testing notes: the IAR backend needs to be running on http://localhost:8000/ and the lookupproxy needs to be running on http://localhost:8080/. Configure both backends to use the experimental OAuth2 endpoint and cut-and-paste the token into AssetForm.js. This will become less involved when the asset create/edit form is refactored to use redux.

PR #9 inadvertently introduced a bug where no routes were rendered in many cases. This manifested itself as the navigation links on the sidebar having no effect.

The root cause was a desire to have the application routing be testable in a different router. (In the test suite case, a MemoryRouter.) To this end the routes were broken out into sub components.

This has the unfortunate side-effect that the tests were only ever run with a router populated with just the expected routes and so errors in route matching were silently ignored.

Retain testability by breaking out all the routes into a single "AppRoutes" component which may be used within a MemoryRouter in the test-suite. This now lets tests check routes are correctly followed when all application routes are present.

Collecting all the routes together in one place also increases readability.

Take the opportunity to add a catch all "Not Found" route which provides some feedback on an invalid URL beyond a simple empty page.

Closes #29 (closed).

add authorisation headers to API requests

Add redux-api-middleware which interprets specially formatted "RSAA" actions as calls to a HTTP API. Add some custom middleware which takes the token from the redux state and adds it to the authorisation headers of this HTTP response. For the moment we simply log the user out if the token is invalid or times out.

For a more sophisticated UI, we might want to look at https://github.com/esbenp/redux-refresh-token to automate the refresh of the token. This will require support in the consent app to provide an "early fail" UI or "is UI-less login possible" endpoint in order to provide a seamless experience.

Closes #25 (closed).

fetch asset list from API and allow deletion

Use redux-api-middleware to allow fetching assets from the API and deleting them.

Separate out the AssetList table into a separate AssetTable container which has the table headings encapsulated within it.

Connect up components to the redux state in order to provide functionality. This makes the AssetList component particularly compact.

Currently the API is hard-wired to be at http://localhost:8080/.

Closes #12 (closed).

add infinite scrolling support

Re-factor the asset list loading to support the notion of extending the current set of assets. Instead of storing the full asset resources, store a summary and stash the full resources in an assetsByUrl object. This will allow the asset edit form to retrieve an asset without having to perform an extra fetch. (Or, similarly, let's it populate the form while the request is in flight.)

The asset list in the redux store is now viewed as a partial list of assets which may be extended via the getMoreAssets action. The first load of the asset list is therefore just a special case of dispatching getMoreAssets with the asset list being empty.

The AssetList component is now completely pure. The AssetTable component simply renders the current list of assets and the AssetList makes use of a new GetMoreAssets component. This component will dispatch the getMoreAssets action when it becomes visible.

In this way, initial asset list load and subsequent loads when one reaches the bottom of the list are no-longer separate cases. An empty asset list will have the GetMoreAssets component visible.

Closes #6 (closed).

add "zero view" for when there are no assets in the result

Add a special ZeroAssetsRow component which is used to indicate that no assets are in the returned query. This is only displayed if a load is not currently in progress to avoid a flash of content.

Closes #22 (closed).

add confirmation of asset deletion

Add new action 'confirmDelete' which is dispatched with an asset URL and the user is asked to confirm deletion of the asset. Managed via a deleteConfirmation object in the redux store which stores the URL of the asset currently being considered for deletion.

Add a DeleteConfirmationDialog component which shows a dialog when there is an asset being considered for deletion and deletes the asset if the user provides confirmation.

Closes #24 (closed).

Merge request reports

Loading