Skip to content

Implement gitlab-ui component for sorting Releases

Release notes

Frontend implementation of sorting on the Release page.

Problem to solve

As a user, I want sort releases in the UI, so I can quickly reorganize existing releases in the UI.

Intended users

User experience goal

The user should be able to use the sorting component to reorganize releases.

Proposal

👁 SEE PROTOTYPES ON FIGMA 👁

  • In the Releases page, users should see a sorting component on top of the Releases list.
  • Users should be to select the field on which they would like to sort the list by clicking the dropdown part of the sorting component:
    • The default sorting option should be by Release date (released_at).
      • Note: upcoming releases should be displayed on the top of the list.
    • Clicking the component opens a dropdown, showing the options:
      • Created date (created_at)
      • Released date(released_at)
    • Selecting one of the options should reorganize the list.
    • A loading state (component:skeleton-loader) should be displayed while the content is loaded on the list.
  • Users should be able to sort in ascending or descending order by clicking the direction button:
    • The default sorting option should be descending: most recent dates to the oldest/earliest dates. The most recent/latest dates will be at the top of the list.
    • Clicking the direction button should reorganize the list.
    • A loading state (component:skeleton-loader) should be displayed while the content is loaded on the list.

Further details

The component should meet Pajamas guidelines: https://design.gitlab.com/components/sorting/

We have a GitLab UI sorting component that we can utilize for this: https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-sorting--default

According to Pajamas, the sorting component is not completely ready and still needs to go over some steps in order to be integrated back into GitLab.

This sorting component only give us the UI for sorting options and some amount of state management. We'll still need to actually implement sorting on the release page.

If a release page is paginated with a large number of releases, we'll need to be sure to address pagination while sorting. For instance, if sorting by create_at from oldest to newest, we'll need to take the last item from the last pagination page and display it as the first item on the first page. This can change dynamically as the user tries different sort options. However, since a sorted list of releases will be returned from the backend API, that should greatly reduce the amount of frontend logic that will need to be implemented.

Right now we only have two date types in a release created_at and released_at.

Estimation

Total MRs: 1

  • Frontend MR to make a request to the server to get releases in a sort order, additionally enabling sorting for release pages that are paginated, once the API is created on the backend.

Permissions and Security

  • Add expected impact to members with no access (0)
  • Add expected impact to Guest (10) members
  • Add expected impact to Reporter (20) members
  • Add expected impact to Developer (30) members
  • Add expected impact to Maintainer (40) members
  • Add expected impact to Owner (50) members

Documentation

Yes, this will need an update to the Release documentation page.

Availability & Testing

What does success look like, and how can we measure that?

What is the type of buyer?

Is this a cross-stage feature?

No.

Links / references

Edited by Nicole Williams