Update compliance frameworks create & edit to use modals

Problem to solve

Currently compliance frameworks &3156 (closed) has three separate pages: List, Create & Edit. This means that for every Create or Edit action, the user is redirected, the page is refreshed and the List loads again, creating page flashes and more loading time. A more ~performance oriented approach would be to make the compliance framework UI fully dynamic without reloads - allowing us to make full use of GraphQL caching for maximum speed. This is similar to how the Delete action already works.

Screen recording

List, Create & Edit Delete
Kapture_2021-03-10_at_13.47.51 Kapture_2021-03-10_at_13.52.32

Benchmarks

For Create & Edit saving, redirecting and then loading the List again takes over 2.3 seconds. Compared to Delete which only needs a network request at ±310ms and is non-blocking.

Create (2306ms) Delete (310ms)
image image

Proposed solution

Use a GlModal for the Create & Edit actions, similar to merge request approvals. Benefits:

  • Fully dynamic UI, page would only load once so no more waiting for redirects
  • Faster using GraphQL caching, we'd only need to mutate / query one resource at a time vs reloading the entire App & list
  • Stateful application, with a single state we've cached the frameworks and Edit can load instantly for increased ~performance

Downsides:

  • Clicking outside the modal would close the modal, which could be disruptive.

Implementation plan

Rough frontend plan:

  1. Add a single GlModal on the compliance frameworks app
  2. Open the modal on Create & Edit actions with the compliance framework's data
  3. Remove the redirect from the Create & Edit form components
  4. Update the apollo cache when a new framework is created / updated
  5. Remove the HAML pages for Create & Edit

I estimate the weight at 2

Edited by Jiaan Louw