Add a new, flexible UI for adding and configuring integrations.

Review Request #10431 — Created Feb. 26, 2019 and submitted

Information

Djblets
release-1.0.x

Reviewers

The old integrations UI worked alright when we only had a few
integrations available, but didn't scale well. It was harder to visually
separate the configurations from the available integrations, and really
hard to see at a glance how many configurations you had in total. It
also only worked in the Django administration UI, meaning it wasn't
usable in, say, RBCommons or Splat Team Admin UIs.

This change completely redoes the UI for integrations, while at the same
time making it suitable for use outside of the Django administration UI.
Now, configurations are presented as a config forms list, showing an
icon for the integration, the configuration name, integration name, and
the enabled/disabled state.

Above the list is a button for adding an integration, which pops up a
tile-based menu of all integration options. Down the road, this can be
expanded to allow searching or filtering based on categories, but for
now it provides a good way of quickly seeing what's available.

The new UI has been built on top of the new config forms work, providing
a consistent appearance wherever it's embedded.

Tested adding new integrations via the popup.

Tested editing existing integrations.

Tested the integrations popup on various screen sizes, including very
large and very small screens.

Tested that the integration state was reflected in the list item.

Tested custom URL namespaces, and that they're respected everywhere.

Summary ID
Add a new, flexible UI for adding and configuring integrations.
The old integrations UI worked alright when we only had a few integrations available, but didn't scale well. It was harder to visually separate the configurations from the available integrations, and really hard to see at a glance how many configurations you had in total. It also only worked in the Django administration UI, meaning it wasn't usable in, say, RBCommons or Splat Team Admin UIs. This change completely redoes the UI for integrations, while at the same time making it suitable for use outside of the Django administration UI. Now, configurations are presented as a config forms list, showing an icon for the integration, the configuration name, integration name, and the enabled/disabled state. Above the list is a button for adding an integration, which pops up a tile-based menu of all integration options. Down the road, this can be expanded to allow searching or filtering based on categories, but for now it provides a good way of quickly seeing what's available. The new UI has been built on top of the new config forms work, providing a consistent appearance wherever it's embedded.
e44bbed9f54a2337d6aa1045ba4b7aefaa97bdcd

Description From Last Updated

Hmm. I feel like this should have a disclosure triangle thingy.

daviddavid

Can we do this once and save it as an attribute? There are a few places we're using $(window)

daviddavid
david
  1. 
      
  2. Show all issues

    Hmm. I feel like this should have a disclosure triangle thingy.

    1. Can do.

    2. Actually, what I originally was going to do was use the green "+" icon we use for condition fields, standardize on it for adding things. Might go that route instead.

      The problem currently with a disclosure triangle is that it'll look different from all the other ones in Review Board. The ones we use there are defined as rb-icon styles. That'll definitely need fixing... Separate work though. I started playing around with better standards for our button styles, but was tired of the rabbit holes, so maybe later :)

    3. Okay, thinking through this a bit... I'd like to tackle this in another change. There's going to be more changes building upon this UI anyway (delete functionality still needs to be added, for instance).

    4. Sure.

  3. Show all issues

    Can we do this once and save it as an attribute? There are a few places we're using $(window)

    1. It's a pretty rarely-accessed code path. Not sure it's worth holding onto the object forever. Definitely on board with that when we're going to be using it a lot more frequently.

    2. OK.

  4. 
      
david
  1. Ship It!
  2. 
      
chipx86
Review request changed
Status:
Completed
Change Summary:
Pushed to release-1.0.x (5e735a7)