Add an empty state when groups search yields no results

Problem

The following discussion from !98380 (merged) should be addressed:

  • @katiemacoy started a discussion: (+1 comment)

    follow up

    It would be good to have a message or empty state when there are no results

    Screen_Shot_2022-09-22_at_11.21.58

Proposal

A message has already been added when there are no results, but we can add empty state illustrations, as well, in this case the no search results illustration:

Group + projects tab Shared projects Archived projects
groups No_search_results_-_shared_projects No_search_results_-_archived

SVG

Figma

Implementation guide

  1. Add empty_search_illustration key with value of image_path('illustrations/empty-state/empty-search-md.svg') to app/helpers/groups_helper.rb#L148
  2. In https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/javascripts/groups/init_overview_tabs.js get emptySearchIllustration from data attributes and pass it in provide.
  3. In app/assets/javascripts/groups/components/app.vue add emptySearchIllustration to inject array and then pass as svg-path prop to <gl-empty-state> on line 246
Edited by Peter Hegman