Bug/DES-2671: Fix a race condition caused by async template loading

[jarosenb]

Overview:

It's possible for angularJS to force a page refresh under certain conditions. It seems to trigger if the route changes while a controller is fetching data. This was causing weird interactions with react-router, with (to my best guess) this sequence of events occurring:

1. The page loads and angular/react components begin rendering
2. The notification bell element begins fetching its template from {% static 'scripts/notifications/html/badge.html' %}
3. WHILE this fetch is occurring, react-router finishes initializing and triggers a redirect. This can happen if the user visits a deprecated page and we need to point them to the correct URL.
4. angular detects the change to the browser location and triggers a page reload using this logic:

if (!startsWith(newUrl, appBaseNoFile)) {
  // If we are navigating outside of the app then force a reload
  $window.location.href = newUrl;
  return;
}

This is a race condition, since angular only subscribes to URL change detection while the template is being fetched. The solution is to refactor the notification bell as a component and include it in the bundle, so that the async data fetching behavior never runs.

PR Status:

• Ready.
• Work in Progress.
• Hold.

Related Jira tickets:

• DES-2671

Summary of Changes:

Use an angularJS component for the notification bell instead of loading the template asynchronously.

Testing Steps:

1. Visit the dev site and confirm that the notification bell renders as expected.

UI Photos:

Notes: