Skip to content

Refresh popovers: Update 'Show more' styles

Administrator requested to merge tr/refresh/show-more-popovers into main

Created by: umpox

FilteredConnection Summary updates

  • Updates styling for summary text and 'show more' button in FilteredConnection
  • Updating loading styling in FilteredConnection
  • Refactors ConnectionNodes to functional component and splits out utils for hooks usage and readability improvements

Example 1: Compact FilteredConnection: Branch/Tag/Commit selector

https://user-images.githubusercontent.com/9516420/118284758-ac2cad00-b4c8-11eb-8cd8-edc91d1ece83.mov

Example 2: NonCompact FilteredConnection: Extensions List

https://user-images.githubusercontent.com/9516420/118286072-ffebc600-b4c9-11eb-8773-0a94b99c7304.mov

Notes

  1. The PR includes a refactor to ConnectionNodes to a functional component. It is not a large refactor, but, as this has required moving some code around, it is worth hiding whitespace changes in the diff to make it easier to see exact changes.

Making almost any logic changes in FilteredConnection results in major regressions in different parts of the app. I think we should maintain the logic of this component as much as possible until we can refactor this into new components. Due to this, there are some slight differences to the design.

  1. There was no design to display the summary above the list, I'll check if this was intended or not, but it is not feasible to remove this without an extensive refactor. It is used to display 'No [type] found' messages after search input and, more significantly, it is required on longer versions of FilteredComponent where the message may not easily be visible at the bottom.
  2. The designs specify that the 'Show more' button (and the summary section) should now appear but be disabled if it has no use. This isn't feasible without a major refactor as large parts of the app rely on this section not showing to maintain a consistent UI.

Merge request reports