Skip to content

Remove duplicate empty state check

What does this MR do and why?

Related to #403187 (closed)

When we render https://gitlab.com/dashboard/groups and https://gitlab.com/explore/groups we perform an expensive backend query to determine if groups exist. If there are groups we perform an async fetch to pull the first page of groups to render. Effectively performing the same query twice before rendering a group list.

This MR moves the empty state into Vue and removes the @groups.empty? call so we only make the expensive query once.

Screenshots or screen recordings

Groups dashboard

Empty state

Before After
Screenshot_2023-08-11_at_1.56.11_PM Screenshot_2023-08-11_at_10.57.58_AM

No search results

No changes, expected to look the same

Before After
Screenshot_2023-08-11_at_1.58.21_PM Screenshot_2023-08-11_at_1.59.14_PM

Explore groups

Empty state

Before After
Screenshot_2023-08-11_at_1.56.48_PM Screenshot_2023-08-11_at_10.58.13_AM

No search results

No changes, expected to look the same

Before After
Screenshot_2023-08-11_at_1.57.27_PM Screenshot_2023-08-11_at_1.59.28_PM

How to set up and validate locally

  1. To simulate the API returning no groups change app/controllers/dashboard/groups_controller.rb#L12-15 and app/controllers/explore/groups_controller.rb#L9-18 to:
def index
  respond_to do |format|
    format.html
    format.json do
      render json: []
    end
  end
end
  1. Navigate to /dashboard/groups and /explore/groups

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 Alex Pooley

Merge request reports