[EPIC] Remove Circular Dependencies

[desi]

What is this about?

Circular dependencies in our codebase are a significant impediment to performance, developer velocity, and maintainability. This Epic aims to address and systematically eliminate all circular dependencies, ensuring a cleaner and more modular architecture. This initiative will involve identifying and prioritizing problematic areas, creating actionable plans, and implementing changes such that we can remove the circular dependencies from the codebase.

Key benefits of this effort include:

• Faster load times and improved runtime performance for users
• Reduced bundle size and better tree-shaking capabilities
• Enables hot module reloading in development
• Enhanced developer experience and reduced onboarding complexity
• More maintainable codebase
• The previous effort to enable React.lazy on the Routes will hopefully give a performance benefit, once circular dependencies are gone

Primary Outcome/Benefits:

• By removing all circular dependencies, the codebase will become more modular, performant, and easier to maintain. This will directly support our goals of improving client performance, reducing technical debt, and fostering a robust and scalable architecture.

Risks and Considerations

• Potential for large merge conflicts due to the scope of refactoring
• Runtime improvements might be less significant than anticipated, though other benefits justify this effort
• Coordination across teams and repositories may require additional effort
• It's possible that this will not boost React.lazy performance

Supporting Information

• Circular dependency visualization diagrams (attached).

  • Full Visualization as of Jan 13th, 2025 include TypeImports which we can ignore but to do so we have to run the visualization differently
    • 
  • UI Folder visualization as of Jan 13th, 2025
    • 

• Slack thread on Extension UI start metrics: Slack Link

• Slack thread on monitoring Circular Deps: Slack Link

Tools and commands for dependency analysis:
Install graphviz
yarn dlx madge@8.0.0 --circular --extensions ts,js,jsx,tsx --image madge.svg ./

[Original bug - 22450] (#22450)

TODO

We will need to continue to add subtasks to this epic as we determine how to move forward with removing circular dependencies. The subtasks present now as of Jan 16th, 2025 are not sufficient to get us to 0 circular dependencies.

Scenario

No response

Design

No response

Technical Details

No response

Threat Modeling Framework

No response

Acceptance Criteria

• Visualization and reporting of all circular dependencies.
• Prioritization of areas to address based on performance and developer impact.
• Implementation of solutions to break circular dependencies.
• Quality gates to prevent new circular dependencies from being introduced.
• Validation of performance improvements through metrics such as load times, bundle size, and developer feedback.
• See Subtasks below

Stakeholder review needed before the work gets merged

• Engineering (needed in most cases)
• Design
• Product
• QA (automation tests are required to pass before merging PRs but not all changes are covered by automation tests - please review if QA is needed beyond automation tests)
• Security
• Legal
• Marketing
• Management (please specify)
• Other (please specify)

References

No response