UI: [VAULT-19783] Set up root token warning modal (#23277)

changelog/23277.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Add warning message to the namespace picker warning users about the behavior when logging in with a root token.
+```

ui/app/components/dashboard/vault-version-title.js

@@ -25,10 +25,4 @@ export default class DashboardVaultVersionTitle extends Component {
       ? `Vault v${this.version.version.slice(0, this.version.version.indexOf('+'))}`
       : `Vault v${this.version.version}`;
   }
-
-  get namespaceDisplay() {
-    if (this.namespace.inRootNamespace) return 'root';
-    const parts = this.namespace.path?.split('/');
-    return parts[parts.length - 1];
-  }
 }

ui/app/controllers/vault/cluster/auth.js

@@ -2,7 +2,6 @@
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
  */
-
 import { inject as service } from '@ember/service';
 import { alias } from '@ember/object/computed';
 import Controller, { inject as controller } from '@ember/controller';
@@ -67,6 +66,7 @@ export default Controller.extend({
     }
     transition.followRedirects().then(() => {
       if (isRoot) {
+        this.auth.set('isRootToken', true);
         this.flashMessages.warning(
           'You have logged in with a root token. As a security precaution, this root token will not be stored by your browser and you will need to re-authenticate after the window is closed or refreshed.'
         );

ui/app/services/auth.js

@@ -36,6 +36,7 @@ export default Service.extend({
   expirationCalcTS: null,
   isRenewing: false,
   mfaErrors: null,
+  isRootToken: false,
 
   get tokenExpired() {
     const expiration = this.tokenExpirationDate;

ui/app/services/namespace.js

@@ -6,6 +6,7 @@
 import { alias, equal } from '@ember/object/computed';
 import Service, { inject as service } from '@ember/service';
 import { task } from 'ember-concurrency';
+import { computed } from '@ember/object';
 
 const ROOT_NAMESPACE = '';
 export default Service.extend({
@@ -20,6 +21,13 @@ export default Service.extend({
 
   inRootNamespace: equal('path', ROOT_NAMESPACE),
 
+  currentNamespace: computed('inRootNamespace', 'path', function () {
+    if (this.inRootNamespace) return 'root';
+
+    const parts = this.path?.split('/');
+    return parts[parts.length - 1];
+  }),
+
   setNamespace(path) {
     if (!path) {
       this.set('path', '');

ui/app/templates/components/dashboard/vault-version-title.hbs

@@ -3,7 +3,7 @@
     <h1 class="title is-3" data-test-dashboard-card-header="Vault version">
       {{this.versionHeader}}
       {{#if @version.isEnterprise}}
-        <Hds::Badge @text={{this.namespaceDisplay}} @icon="org" data-test-badge-namespace />
+        <Hds::Badge @text={{this.namespace.currentNamespace}} @icon="org" data-test-badge-namespace />
       {{/if}}
     </h1>
   </p.levelLeft>

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

@@ -2,7 +2,6 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: BUSL-1.1
 ~}}
-
 <ExternalLink
   @href={{this.namespaceLink}}
   @sameTab={{true}}

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

@@ -32,6 +32,15 @@
         </div>
       </div>
       <div class="namespace-list {{if this.isAnimating 'animated-list'}}">
+        {{#if this.auth.isRootToken}}
+          <div class="has-left-margin-s has-right-margin-s">
+            <span><Icon @name="alert-triangle-fill" class="has-text-highlight" /></span>
+            <span class="is-size-8 has-text-semibold">
+              You are logged in with a root token and will have to reauthenticate when switching namespaces.
+            </span>
+          </div>
+        {{/if}}
+
         <div class="is-mobile level-left">
           {{#unless this.isUserRootNamespace}}
             <NamespaceLink

ui/app/templates/vault/cluster.hbs

@@ -2,7 +2,6 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: BUSL-1.1
 ~}}
-
 <Sidebar::Nav::Cluster />
 {{! Only show license banners for Enterprise }}
 {{#if this.activeCluster.version.isEnterprise}}