Skip to content

Search: Decouple search UI sidebar filters components

Administrator requested to merge vk/decouple-search-ui-panel into main

Created by: vovakulikov

Closes https://github.com/sourcegraph/sourcegraph/issues/40285

Background

Prior to this PR, we had the following structure around the side panel UI

  • search-ui/
    • <SearchSidebar /> - a god-like component that requires all needed props for each filter panel that this sidebar has.
  • vs-code/ -<SearchSidebarView /> - a wrapper around <SearchSidebar /> that mocks all useless for vs-code integration props and dependencies for <SearchSidebar />
  • 'web'
    • <SearchStreamingResult /> - webapp page that directly uses <SearchSidebar /> component

Because in this structure, <SearchSidebar /> is a very stateful component that uses a lot of internal global Zustand state, we had to come up with tweaks around mocking these global stores and required props for the VSCode integration sidebar. This leads to unnecessary complexity, and most importantly, this leads to the situation that whenever you update the sidebar, you have to think about how you would support this in all consumers of this component. This isn't always a straightforward thing to do (vs code has a different architecture around platform context and doesn't support all filters variety that we have in the web app)

Solution

This PR decouples search UI components and creates two different versions of the sidebar

  • VSCode integration sidebar
  • web app integration sidebar

This allows us to change filters in one panel and don't think about all other consumers. This idea has a few downsides

  • We need to explicitly and/remove filter panels for each consumer (this actually is an advantage and disadvantage of this solution)
  • At the moment, search-ui building blocks still have a lot of complexity and non-optimal public API (but I hope we will improve it shortly after we decide on high-level component composition)

Test plan

  • Make sure that all filters panel work properly in both VSCode integration and web app pages
  • Make sure that new side panels don't have any visual regressions in both standard and simple UI modes

App preview:

Check out the client app preview documentation to learn more.

Merge request reports