Skip to content

Add frequently visited projects and groups to global search modal default view

What does this MR do and why?

This adds frequently visited projects and groups to the global search modal's default view.

This is largely a reimplementation of the existing context switcher in the navigation sidebar, which will be removed in a later iteration towards #415811 (closed).

I've broken this up into logical commits in an attempt to make this easier to review. I decided it wasn't worth breaking this into separate merge requests, as I think the context of these changes would be lost, making reviews less useful/meaningful.

Commits

Implement frequently visited item component

This is a simple, could-be-functional component. It's what each project/group will look like in the search modal.

Implement frequently visited items container

This component implements the behaviour common to frequently visited groups and projects, that will be shown in the search modal's default view.

It reuses the same backing store as the existing context switcher in the navigation sidebar, so the two should show the same information.

One difference is that this implementation re-reads what's in local storage each time it's shown, whereas the context switcher does not.

The next commit will implement the project- and group-specific components, which will use this component.

Implement the frequently visited projects

This provides project-specific details for the frequent items component.

Implement the frequently visited groups

This provides group-specific details for the frequent items component.

Add frequently visited items to search modal

This adds the components built in the previous commits to the global search modal's default view.

Part of #409522 (closed).

Only show remove button on focus or hover

The extra CSS isn't ideal, but our utility classes aren't powerful enough to support this use case.

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

State Before After
Logged in, no items logged_in__no_context logged_in_no_items
Logged in, has items logged_in__no_context logged_in_items
Logged in, has items, hovered n/a logged_in_removing
Logged out
NO CHANGE
logged_out__no_context logged_out

Removing items

simplescreenrecorder-2023-08-11_19.01.19

How to set up and validate locally

  1. Open the global search modal on any page by pressing the search icon in the navigation sidebar, or pressing /.
  2. See frequently visited projects/groups.
  3. Verify removing items works.
  4. Run echo "Feature.enable(:super_sidebar_logged_out) | bundle exec rails c
  5. Log out of the GDK instance
  6. Visit http://gdk.test:3000/explore, or any public page
  7. Verify frequent projects/groups are not shown in search modal

If you don't have any frequent projects/groups listed

  1. Back up any existing localStorage values you have under these keys, just in case!
  2. Run the below code in the browser console.
  3. Reload the page.
  4. Follow the steps above.
(() => {
  localStorage.setItem(`${gon.current_username}/frequent-projects`, '[{"id":2,"name":"Gitlab Shell","namespace":"Gitlab Org / Gitlab Shell","webUrl":"/gitlab-org/gitlab-shell","avatarUrl":null,"frequency":30,"lastAccessedOn":1687193007468},{"id":6,"name":"Flight","namespace":"Flightjs / Flight","webUrl":"/flightjs/Flight","avatarUrl":null,"frequency":20,"lastAccessedOn":1690535996582},{"id":1,"name":"Gitlab Test","namespace":"Gitlab Org / Gitlab Test","webUrl":"/gitlab-org/gitlab-test","avatarUrl":null,"frequency":230,"lastAccessedOn":1691481460136}]');
  
  localStorage.setItem(`${gon.current_username}/frequent-groups`, '[{"id":2,"name":"Gitlab.org","namespace":"Gitlab.org","webUrl":"/gitlab-org","avatarUrl":null,"frequency":30,"lastAccessedOn":1687193007468},{"id":6,"name":"Flightjs","namespace":"Flightjs","webUrl":"/flightjs","avatarUrl":null,"frequency":20,"lastAccessedOn":1690535996582}]');
})();

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 Mark Florian

Merge request reports