Search: Decouple search UI sidebar filters components
There are no commits yet
Push commits to the source branch or add previously merged commits to review them.
Created by: vovakulikov
Closes https://github.com/sourcegraph/sourcegraph/issues/40285
DO NOT MERGE IT. THIS IS A HIGHLY EXPERIMENTAL CHANGE. IT REQUIRES MASSIVE MANUAL TESTING
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 />
<SearchStreamingResult />
- webapp page that directly uses <SearchSidebar />
componentBecause 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)
This PR decouples search UI components and creates two different versions of the sidebar
This allows us to change filters in one panel and don't think about all other consumers. This idea has a few downsides
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)Check out the client app preview documentation to learn more.
Push commits to the source branch or add previously merged commits to review them.