Skip to content

Add search and sort to group overview tabs

Peter Hegman requested to merge 23466-convert-groups-overview-tabs-to-vue-3 into master

What does this MR do and why?

Related to #23466 (closed)

Follow-up to !95850 (merged) and !97316 (merged). We are in the process of migrating the group overview tabs from HAML/jQuery to Vue. This MR adds searching and sorting functionality.

Screenshots or screen recordings

Desktop

Before - Feature flag disabled Before - feature flag enabled After - feature flag enabled
Screen_Shot_2022-09-21_at_10.20.08_AM Screen_Shot_2022-09-21_at_10.23.21_AM Screen_Shot_2022-09-21_at_10.17.46_AM

Mobile

Before - Feature flag disabled Before - feature flag enabled After - feature flag enabled
Screen_Shot_2022-09-21_at_10.20.43_AM Screen_Shot_2022-09-21_at_10.23.52_AM Screen_Shot_2022-09-21_at_10.19.04_AM

How to set up and validate locally

  1. Enable group_overview_tabs_vue feature flag
    • bin/rails console
    • Feature.enable(:group_overview_tabs_vue)
  2. Go to a group overview. e.g http://gdk.test:3000/flightjs
  3. Make note of the group ID
  4. (Optional) Create a bunch of projects to test search, sort, and pagination
    • bin/rails console
    • user = User.find_by_id(1)
    • group = Group.find_by_id(<group_id>)
    • 50.times { FactoryBot.create(:project, namespace: group, creator: user) }

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Peter Hegman

Merge request reports