compass-connections package is a React component that is currently responsible for both handling part of the connection flow logic, but also rendering the connection UI in some cases, more specifically in single connection flow + autoconnect flow. This means that not only we are bundling unnecessary UI with compass-web package, we are also showing unexpected UI elements that are compass-specific and shouldn't show up in DE. There is also a separate instance of the connection form that is part of the sidebar code that we also would bundle currently with compass-web even when it's not necessary.

While we are planning a bigger restructuring of the connections logic in compass-connections that will remove more of the antipatterns along the restructuring (COMPASS-7397), we need to already account for compass-web scenarios, so as another mid-step we want to split compass-connections in two parts: one a component provider that would actually be the source of truth for useConnections hook state and another that will include the UI and will be reading the state passed through context, we should also move the connection UI from the sidebar to the same place where all the other connection UI lives and make sure it's reading the same state.