Implement progress tracker with websockets

[omnipresent07]

Short description explaining the high-level reason for the new issue.

The backend API exposes websockets now as part of this PR https://github.com/cfpb/hmda-platform/pull/3779 . The front end can open a websocket at the time of the upload to better track when the submission is completed.

[meissadia]

• [x] Direct users to the latest step that needs action
• [x] Remove "verified" from the EditsNav if they did not trigger those edits
• [x] Remove "verified" from the SubmissionNav if they did not trigger those edits
• [ ] Simulate progress

[meissadia]

Hitting a blocker with Websockets:

• When running locally, unsecured websocket connections succeed ws://
• When deployed to DEV, the frontend cannot make an unsecured connection ws:// from a secure domain https://
• Deployed to DEV with secure sockets wss:// but the connection immediate fails, so this may not be supported by the Platform?

[meissadia]

I've been investigating setting the authorization header as part of the websocket connection request but it does not appear to be supported by web browsers.

Options

• Send bearer token as a cookie https://stackoverflow.com/a/48618910
  • Pro: Might work
  • Con: Backend would need modification to look for token in an unexpected place
• Send headers onOpen https://stackoverflow.com/a/59796300
  • Pro: Would allows us to securely send our auth info
  • Con: Would require adjustment on the backend to support a modified auth flow
• Misuse the protocol parameter of the websocket to send the auth token https://stackoverflow.com/a/44314168
  • Pro: Simple to implement on the Frontend
  • Con: Would this be sent in the open? Is it secure?
  • Con: Backend would need modification to look for the auth token in an unexpected place
• Configure separate auth token generation for websocket connections https://stackoverflow.com/a/52749848
  • Pro: Might actually work
  • Con: Would require the development of a new backend service
  • Con: Complex integration needed on both ends
• Send token as a URL parameter https://stackoverflow.com/a/42596786
  • Con: Token could be intercepted and abused

[meissadia]

Re: failed connection in DEV; onclose code 1006

• https://stackoverflow.com/questions/19304157/getting-the-reason-why-websockets-closed-with-close-code-1006
• Already have proxy_read_timeout and proxy_send_timeout extended in NGINX, issue persists

Request Upgrade

http://nginx.org/en/docs/http/websocket.html https://www.nginx.com/blog/websocket-nginx/ https://github.com/grafana/grafana/issues/36929#issuecomment-954706911

• We've applied to the config to send the upgrade requests, issue persists

[lchen-2101]

set token with cookie to authenticate already works without changes to the backend; so the first option works, the cookie name is X-Authorization-Token, so below snippet will work before constructing the ws connection

document.cookie = `X-Authorization-Token=${AccessToken.get()}; path=/;`

[meissadia]

This associate Github issue was closed on HMDA Platform but it's not clear if anything was done to correct the underlying problem. This should be tested/validated as part of pre-rollout activities.

https://github.com/cfpb/hmda-platform/issues/4406