Repeat the new namespace pattern for region

ui/app/controllers/application.js

@@ -13,10 +13,7 @@ export default Controller.extend({
     region: 'region',
   },
 
-  region: 'global',
-
-  syncRegionService: forwardRegion('region', 'system.activeRegion'),
-  syncRegionParam: forwardRegion('system.activeRegion', 'region'),
+  region: null,
 
   error: null,
 
@@ -53,13 +50,3 @@ export default Controller.extend({
     }
   }),
 });
-
-function forwardRegion(source, destination) {
-  return observer(source, function() {
-    const newRegion = this.get(source);
-    const currentRegion = this.get(destination);
-    if (currentRegion !== newRegion) {
-      this.set(destination, newRegion);
-    }
-  });
-}

ui/app/routes/application.js

@@ -1,6 +1,6 @@
 import { inject as service } from '@ember/service';
-import Route from '@ember/routing/route';
 import { next } from '@ember/runloop';
+import Route from '@ember/routing/route';
 import { AbortError } from 'ember-data/adapters/errors';
 import RSVP from 'rsvp';
 
@@ -20,23 +20,35 @@ export default Route.extend({
     }
   },
 
-  beforeModel() {
-    return RSVP.all([this.get('system.regions'), this.get('system.namespaces')]);
+  afterSetup(fn) {
+    this._afterSetups || (this._afterSetups = []);
+    this._afterSetups.push(fn);
   },
 
-  syncToController(controller) {
-    const region = this.get('system.activeRegion');
+  beforeModel(transition) {
+    return RSVP.all([this.get('system.regions'), this.get('system.namespaces')]).then(promises => {
+      const queryParam = transition.queryParams.region;
+      const activeRegion = this.get('system.activeRegion');
 
-    // The run next is necessary to let the controller figure
-    // itself out before updating QPs.
-    // See: https://github.com/emberjs/ember.js/issues/5465
-    next(() => {
-      controller.set('region', region || 'global');
+      if (!queryParam && activeRegion) {
+        this.afterSetup(controller => {
+          controller.set('region', activeRegion);
+        });
+      } else if (queryParam && queryParam !== activeRegion) {
+        this.set('system.activeRegion', queryParam);
+      }
+
+      return promises;
     });
   },
 
   setupController(controller) {
-    this.syncToController(controller);
+    next(() => {
+      (this._afterSetups || []).forEach(fn => {
+        fn(controller);
+      });
+      this._afterSetups = [];
+    });
     return this._super(...arguments);
   },