ui: When certain menus are selected reset either nspace/partition (#11479)

For our dc, nspace and partition 'bucket' menus, sometimes when selecting one 'bucket' we need to reset a different 'bucket' back to the one that your token has by default (or the default if not). For example when switching to a different partition whilst you are in a non-default namespace of another partition, we need to switch you to the token default namespace of the partition you are switching to.

.changelog/11479.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: When switching partitions reset the namespace back to the tokens default namespace or default
+```

ui/packages/consul-partitions/app/components/consul/partition/selector/index.hbs

@@ -1,5 +1,8 @@
 {{#if (can "use partitions")}}
   {{#if (can "choose partitions" dc=@dc)}}
+{{#let
+  (or @partition 'default')
+as |partition|}}
       <li
         class="partitions"
         data-test-partition-menu
@@ -9,7 +12,7 @@
             @position="left"
           as |components api|>
             <BlockSlot @name="trigger">
-              {{@partition}}
+              {{partition}}
             </BlockSlot>
             <BlockSlot @name="menu">
               {{#let components.MenuItem components.MenuSeparator as |MenuItem MenuSeparator|}}
@@ -24,10 +27,10 @@
                 />
               {{#each (reject-by 'DeletedAt' @partitions) as |item|}}
                 <MenuItem
-                  class={{if (eq @partition item.Name) 'is-active'}}
+                  class={{if (eq partition item.Name) 'is-active'}}
                   @href={{href-to '.' params=(hash
                     partition=item.Name
-                    nspace=(if (gt @nspace.length 0) @nspace undefined)
+                    nspace=undefined
                   )}}
                 >
                   <BlockSlot @name="label">
@@ -55,8 +58,9 @@
       class="partition"
       aria-label="Admin Partition"
     >
-      {{@partition}}
+      {{partition}}
     </li>
+{{/let}}
   {{/if}}
 {{/if}}
 

ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs

@@ -38,7 +38,11 @@
                     (if item.Local ' is-local')
                     (if item.Primary ' is-primary')
                   }}
-                  @href={{href-to '.' params=(hash dc=item.Name)}}
+                  @href={{href-to '.' params=(hash
+                    dc=item.Name
+                    partition=undefined
+                    nspace=(if (gt @nspace.length 0) @nspace undefined)
+                  )}}
                 >
                   <BlockSlot @name="label">
                     {{item.Name}}

ui/packages/consul-ui/app/locations/fsm-with-optional.js

@@ -206,29 +206,19 @@ export default class FSMWithOptionalLocation {
         withOptional = false;
         break;
     }
-    const router = this.router._routerMicrolib;
+    if(this.router.currentRouteName.startsWith('docs.')) {
-    let url;
+      // If we are in docs, then add a default dc as there won't be one in the
-    try {
+      // URL
-      url = router.generate(routeName, ...params, {
+      params.unshift(env('CONSUL_DATACENTER_PRIMARY'));
-        queryParams: {},
+      if(routeName.startsWith('dc')) {
-      });
+        // if its an app URL replace it with debugging instead of linking
-    } catch(e) {
+        return `console://${routeName} <= ${JSON.stringify(params)}`;
-      if(
-        !(this.router.currentRouteName.startsWith('docs') &&
-          e.message.startsWith('There is no route named ')
-        )
-      ) {
-        if(this.router.currentRouteName.startsWith('docs') && routeName.startsWith('dc')) {
-          params.unshift('dc-1');
-          url = router.generate(routeName, ...params, {
-            queryParams: {},
-          });
-        } else {
-          throw e;
-        }
       }
-      return `console://${routeName} <= ${JSON.stringify(params)}`;
     }
+    const router = this.router._routerMicrolib;
+    const url = router.generate(routeName, ...params, {
+      queryParams: {},
+    });
     return this.formatURL(url, hash, withOptional);
   }
 
@@ -241,13 +231,23 @@ export default class FSMWithOptionalLocation {
       console.log(`location.transitionTo: ${url.substr(10)}`);
       return true;
     }
+    const previousOptional = Object.entries(this.optionalParams());
     const transitionURL = this.getURLForTransition(url);
     if (this._previousURL === transitionURL) {
-      // probably an optional parameter change
+      // probably an optional parameter change as the Ember URLs are the same
+      // whereas the entire URL is different
       this.dispatch('push', url);
       return Promise.resolve();
       // this.setURL(url);
     } else {
+      const currentOptional = this.optionalParams();
+      if(previousOptional.some(([key, value]) => currentOptional[key] !== value)) {
+        // an optional parameter change and a normal param change as the Ember
+        // URLs are different and we know the optional params changed
+        // TODO: Consider changing the above previousURL === transitionURL to
+        // use the same 'check the optionalParams' approach
+        this.dispatch('push', url);
+      }
       // use ember to transition, which will eventually come around to use location.setURL
       return this.container.lookup('router:main').transitionTo(transitionURL);
     }

ui/packages/consul-ui/app/templates/application.hbs

@@ -60,8 +60,8 @@ as |source|>
 
 {{! Make sure we guess and default to the right params when not found }}
 {{#let
-  (if (can "use partitions") (or route.params.partition notfound.partition token.Partition 'default') 'default')
+  (if (can "use partitions") (or route.params.partition notfound.partition token.Partition '') '')
-  (if (can "use nspaces") (or route.params.nspace notfound.nspace token.Namespace 'default') 'default')
+  (if (can "use nspaces") (or route.params.nspace notfound.nspace token.Namespace '') '')
 as |partition nspace|}}
 
 {{! Make sure we have enough to show the app chrome}}
@@ -69,7 +69,6 @@ as |partition nspace|}}
 <DataSource
   @src={{uri '/*/*/*/datacenters'}}
 as |dcs|>
-
 {{! Once we have a list of DCs make sure the DC we are asking for exists }}
 {{! If not use the DC that the UI is running in }}
 {{#let
@@ -103,7 +102,7 @@ as |dcs|>
   dcs.data
 
 as |dc dcs|}}
-  {{#if (and (gt dc.Name.length 0) dcs nspace partition)}}
+  {{#if (and (gt dc.Name.length 0) dcs)}}
 
     {{! figure out our current DC and convert it to a model }}
     <DataSource

ui/packages/consul-ui/lib/startup/templates/body.html.js

@@ -64,13 +64,7 @@ ${
   function(get, obj) {
     Object.entries(obj).forEach(([key, value]) => {
       if(get(key)) {
-        const appName = '${appName}';
+        document.write(\`\\x3Cscript data-app-name="${appName}" data-${appName}-routing src="${rootURL}assets/\${value}/routes.js">\\x3C/script>\`);
-        const appNameJS = appName.split('-').map((item, i) => i ? \`\${item.substr(0, 1).toUpperCase()}\${item.substr(1)}\` : item).join('');
-        const $script = document.createElement('script');
-        $script.setAttribute('data-app-name', '${appName}');
-        $script.setAttribute('data-${appName}-routing', '');
-        $script.setAttribute('src', \`${rootURL}assets/\${value}/routes.js\`);
-        document.body.appendChild($script);
       }
     });
   }