Backport 1.2.1: ui namespace fixes (#7251)

* ancestorKeysForKey always returns an array (#6205)

* clear namespaces on logout and properly render nested namespaces in the namepace picker (#7186)

* reset namespace cache when a user logs out

* fix issue where if you log in to a namespace with an initial /, nested namespaces would not show up in the navigation

* set an empty list of namespaces instead of ignoring error

* add tests for namespace bugs

* use this consistently in template

ui/app/components/key-value-header.js

@@ -47,7 +47,7 @@ export default Component.extend({
     const showCurrent = this.get('showCurrent');
     const ancestors = utils.ancestorKeysForKey(baseKey);
     const parts = utils.keyPartsForKey(baseKey);
-    if (!ancestors) {
+    if (ancestors.length === 0) {
       crumbs.push({
         label: baseKey,
         text: this.stripTrailingSlash(baseKey),

ui/app/components/namespace-picker.js

@@ -126,7 +126,8 @@ export default Component.extend({
   // gets set as  'lastMenuLeaves' in the ember concurrency task above
   menuLeaves: computed('namespacePath', 'namespaceTree', function() {
     let ns = this.get('namespacePath');
-    let leaves = ancestorKeysForKey(ns) || [];
+    ns = ns.replace(/^\//, '');
+    let leaves = ancestorKeysForKey(ns);
     leaves.push(ns);
     leaves = this.maybeAddRoot(leaves);
 

ui/app/lib/key-utils.js

@@ -35,7 +35,7 @@ function ancestorKeysForKey(key) {
     parentKey = parentKeyForKey(parentKey);
   }
 
-  return ancestors.length ? ancestors : null;
+  return ancestors;
 }
 
 export default {

ui/app/mixins/with-nav-to-nearest-ancestor.js

@@ -15,7 +15,7 @@ export default Mixin.create({
   navToNearestAncestor: task(function*(key) {
     let ancestors = utils.ancestorKeysForKey(key);
     let errored = false;
-    let nearest = ancestors && ancestors.pop();
+    let nearest = ancestors.pop();
     while (nearest) {
       try {
         let transition = this.transitionToRoute('vault.cluster.secrets.backend.list', nearest);

ui/app/routes/vault/cluster/logout.js

@@ -9,19 +9,21 @@ export default Route.extend(ModelBoundaryRoute, {
   flashMessages: service(),
   console: service(),
   permissions: service(),
+  namespaceService: service('namespace'),
 
   modelTypes: computed(function() {
     return ['secret', 'secret-engine'];
   }),
 
   beforeModel() {
-    this.get('auth').deleteCurrentToken();
-    this.get('controlGroup').deleteTokens();
-    this.get('console').set('isOpen', false);
-    this.get('console').clearLog(true);
+    this.auth.deleteCurrentToken();
+    this.controlGroup.deleteTokens();
+    this.namespaceService.reset();
+    this.console.set('isOpen', false);
+    this.console.clearLog(true);
     this.clearModelCache();
     this.replaceWith('vault.cluster');
-    this.get('flashMessages').clearMessages();
-    this.get('permissions').reset();
+    this.flashMessages.clearMessages();
+    this.permissions.reset();
   },
 });

ui/app/services/namespace.js

@@ -33,9 +33,10 @@ export default Service.extend({
           namespace: userRoot,
         },
       });
+      let keys = ns.data.keys || [];
       this.set(
         'accessibleNamespaces',
-        ns.data.keys.map(n => {
+        keys.map(n => {
           let fullNS = n;
           // if the user's root isn't '', then we need to construct
           // the paths so they connect to the user root to the list
@@ -51,4 +52,8 @@ export default Service.extend({
       //do nothing here
     }
   }).drop(),
+
+  reset() {
+    this.set('accessibleNamespaces', null);
+  },
 });

ui/app/templates/components/namespace-link.hbs

@@ -1,16 +1,18 @@
-{{#link-to "vault.cluster.secrets" (query-params namespace=normalizedNamespace)
-  class=(concat "is-block " class)
-}}
+<LinkTo
+  @params={{array "vault.cluster.secrets" (query-params namespace=this.normalizedNamespace)}}
+  class={{concat "is-block " class}}
+  data-test-namespace-link={{this.normalizedNamespace}}
+  >
   {{#if (has-block)}}
     {{yield}}
   {{else}}
     <div class="level is-mobile">
-      <span class="level-left">{{namespaceDisplay}}</span>
+      <span class="level-left">{{this.namespaceDisplay}}</span>
       <span class="level-right">
         <button type="button" class="button is-ghost icon">
           <Chevron @isButton={{true}} class="has-text-grey" />
         </button>
       </span>
     </div>
   {{/if}}
-{{/link-to}}
+</LinkTo>

ui/app/templates/components/namespace-picker.hbs

@@ -9,6 +9,7 @@
       <D.trigger
         @tagName="button"
         @class="button is-transparent namespace-picker-trigger has-current-color"
+        data-test-namespace-toggle
         >
         {{yield}}
         {{#if namespaceDisplay}}
@@ -44,7 +45,7 @@
         <header class="current-namespace">
           <h5 class="list-header">Current namespace</h5>
           <div class="level is-mobile namespace-link">
-            <span class="level-left">{{if namespacePath (concat namespacePath "/") "root"}}</span>
+            <span class="level-left" data-test-current-namespace>{{if namespacePath (concat namespacePath "/") "root"}}</span>
             <span class="level-right">
               <Icon @glyph="check-circle-outline" class="has-text-success" />
             </span>
@@ -65,7 +66,7 @@
                 {{if (and isAdding (eq leaf changedLeaf)) "leaf-panel-adding"}}
                 {{if (and (not isAdding) (eq leaf changedLeaf)) "leaf-panel-exiting"}}
               ">{{~#each-in (get namespaceTree leaf) as |leafName|}}
-                  <NamespaceLink @targetNamespace={{concat leaf "/" leafName}} @class="namespace-link" @showLastSegment={{true}} />
+              <NamespaceLink @targetNamespace={{concat leaf "/" leafName}} @class="namespace-link" @showLastSegment={{true}} />
                 {{/each-in~}}</div>
           {{/each}}
         </div>

ui/tests/acceptance/enterprise-namespaces-test.js

@@ -0,0 +1,63 @@
+import { click, currentRouteName, currentURL, visit } from '@ember/test-helpers';
+import { module, test } from 'qunit';
+import { setupApplicationTest } from 'ember-qunit';
+import { create } from 'ember-cli-page-object';
+
+import consoleClass from 'vault/tests/pages/components/console/ui-panel';
+import authPage from 'vault/tests/pages/auth';
+import logout from 'vault/tests/pages/logout';
+
+const shell = create(consoleClass);
+
+const createNS = async name => {
+  await shell.runCommands(`write sys/namespaces/${name} -force`);
+};
+
+const switchToNS = async name => {
+  await click('[data-test-namespace-toggle]');
+  await click(`[data-test-namespace-link="${name}"]`);
+  await click('[data-test-namespace-toggle]');
+};
+
+module('Acceptance | Enterprise | namespaces', function(hooks) {
+  setupApplicationTest(hooks);
+
+  hooks.beforeEach(function() {
+    return authPage.login();
+  });
+
+  test('it clears namespaces when you log out', async function(assert) {
+    let ns = 'foo';
+    await createNS(ns);
+    await shell.runCommands(`write -field=client_token auth/token/create policies=default`);
+    let token = shell.lastLogOutput;
+    await logout.visit();
+    await authPage.login(token);
+    assert.dom('[data-test-namespace-toggle]').doesNotExist('does not show the namespace picker');
+    await logout.visit();
+  });
+
+  test('it shows nested namespaces if you log in with a namspace starting with a /', async function(assert) {
+    let nses = ['beep', 'boop', 'bop'];
+    for (let [i, ns] of nses.entries()) {
+      await createNS(ns);
+      // this is usually triggered when creating a ns in the form, here we'll trigger a reload of the
+      // namespaces manually
+      await this.owner.lookup('service:namespace').findNamespacesForUser.perform();
+      if (i === nses.length - 1) {
+        break;
+      }
+      // the namespace path will include all of the namespaces up to this point
+      let targetNamespace = nses.slice(0, i + 1).join('/');
+      await switchToNS(targetNamespace);
+    }
+    await logout.visit();
+    await authPage.visit({ with: 'token', namespace: '/beep/boop' });
+    await authPage.tokenInput('root').submit();
+    await click('[data-test-namespace-toggle]');
+    assert.dom('[data-test-current-namespace]').hasText('/beep/boop/', 'current namespace begins with a /');
+    assert
+      .dom('[data-test-namespace-link="beep/boop/bop"]')
+      .exists('renders the link to the nested namespace');
+  });
+});