Migrating Grafana’s template variables from AngularJS to React: A tale of failures and wins

Grafana's migration from AngularJS to React, particularly focusing on the templating system, was a complex endeavor that involved several strategies and challenges. Initially, the migration process faced difficulties with state mutations and polymorphism in the old system, leading to attempts like the proxy and top-down approaches that ultimately proved inadequate. A successful transition was achieved through a feature toggle approach, allowing for the separation of the new React/Redux system and facilitating the migration of UI components. This shift introduced architectural benefits, such as a clear separation between UI and state, while also presenting new challenges, such as testing thunks and managing plugin communication. Despite these hurdles, the transition improved code quality and facilitated future developments, leading to a more maintainable and scalable system.