Skip to content

Search: Add aggregation panel mock UI

Warren Gifford requested to merge vk/add-aggregation-panel-mock-ui into main

Created by: vovakulikov

Closes https://github.com/sourcegraph/sourcegraph/issues/39954 Closes https://github.com/sourcegraph/sourcegraph/issues/40088

RFC Figma designs

Background

New aggregation UI on the search result page

Standard UI Simple UI mode
Screenshot 2022-08-12 at 14 33 21 Screenshot 2022-08-12 at 14 38 24

This PR adds mock (no data) UI for aggregation panel UI on the search result page.

For reviewers

In order to make it change as simple as possible and put all parts of this UI in just one single file. Further steps around codebase quality will be addressed in follow issue about refactoring search-ui components API here https://github.com/sourcegraph/sourcegraph/issues/40285

Follow-ups

  • Refactor search UI components API in order to decouple UI and business logic in reusable search UI components https://github.com/sourcegraph/sourcegraph/issues/40285
  • The sidebar panel is stored in the search-ui package. Currently, chart UI components are stored in the web package. Because of this, PR introduces a cyclic link since we import chart UI into search from web and the web package imports search-ui for the search result page. Webpack can handle this, and this is how it works at the moment, but we should move chart UI into Wildcard (or another separate package) to resolve this problem in our codebase https://github.com/sourcegraph/sourcegraph/issues/40136. Update: this issue has been resolved

Test plan

  • Go to the search result page
  • See that nothing is changed and the side panel layout looks correct for mobile and desktop
  • Turn on the global feature flag search-aggregation-filters.
  • See that you can see mock UI for the aggregation panel, panel should look properly for mobile and desktop

App preview:

Check out the client app preview documentation to learn more.

Merge request reports

Loading