From 1bf7671493ffdabc5e1652079bd14ff6a8b4a63f Mon Sep 17 00:00:00 2001
From: Arnav Palnitkar <arnav@hashicorp.com>
Date: Thu, 20 May 2021 15:37:07 -0700
Subject: [PATCH 1/5] Update cluster status partial to component

---
 ui/app/components/cluster-info.js             | 15 +++++++++++++
 ui/app/components/status-menu.js              | 11 +---------
 .../cluster-info.hbs}                         | 22 +++++++++----------
 ui/app/templates/components/status-menu.hbs   |  8 ++++++-
 ui/app/templates/partials/status/user.hbs     |  3 ---
 5 files changed, 34 insertions(+), 25 deletions(-)
 create mode 100644 ui/app/components/cluster-info.js
 rename ui/app/templates/{partials/status/cluster.hbs => components/cluster-info.hbs} (90%)
 delete mode 100644 ui/app/templates/partials/status/user.hbs

diff --git a/ui/app/components/cluster-info.js b/ui/app/components/cluster-info.js
new file mode 100644
index 000000000000..998b6462ac1b
--- /dev/null
+++ b/ui/app/components/cluster-info.js
@@ -0,0 +1,15 @@
+import { inject as service } from '@ember/service';
+import { reads } from '@ember/object/computed';
+import Component from '@ember/component';
+
+export default Component.extend({
+  auth: service(),
+  store: service(),
+  version: service(),
+
+  transitionToRoute: function() {
+    this.router.transitionTo(...arguments);
+  },
+
+  currentToken: reads('auth.currentToken'),
+});
diff --git a/ui/app/components/status-menu.js b/ui/app/components/status-menu.js
index 8ec26c7c1a12..59bfc2bcf98b 100644
--- a/ui/app/components/status-menu.js
+++ b/ui/app/components/status-menu.js
@@ -1,5 +1,5 @@
 import { inject as service } from '@ember/service';
-import { alias, reads } from '@ember/object/computed';
+import { alias } from '@ember/object/computed';
 import Component from '@ember/component';
 import { computed } from '@ember/object';
 
@@ -7,14 +7,9 @@ export default Component.extend({
   currentCluster: service('current-cluster'),
   cluster: alias('currentCluster.cluster'),
   auth: service(),
-  store: service(),
   media: service(),
-  version: service(),
   type: 'cluster',
   itemTag: null,
-  partialName: computed('type', function() {
-    return `partials/status/${this.type}`;
-  }),
   glyphName: computed('type', function() {
     const glyphs = {
       cluster: 'status-indicator',
@@ -22,8 +17,4 @@ export default Component.extend({
     };
     return glyphs[this.type];
   }),
-  activeCluster: computed('auth.activeCluster', function() {
-    return this.store.peekRecord('cluster', this.auth.activeCluster);
-  }),
-  currentToken: reads('auth.currentToken'),
 });
diff --git a/ui/app/templates/partials/status/cluster.hbs b/ui/app/templates/components/cluster-info.hbs
similarity index 90%
rename from ui/app/templates/partials/status/cluster.hbs
rename to ui/app/templates/components/cluster-info.hbs
index 974400cb6bf1..448dc1e8e334 100644
--- a/ui/app/templates/partials/status/cluster.hbs
+++ b/ui/app/templates/components/cluster-info.hbs
@@ -1,7 +1,7 @@
 <div class="popup-menu-content">
   <div class="box">
     {{#unless version.isOSS}}
-      {{#if (and activeCluster.unsealed auth.currentToken)}}
+      {{#if (and cluster.unsealed auth.currentToken)}}
         {{#unless cluster.dr.isSecondary}}
           {{#if (has-permission 'status' routeParams='replication')}}
             <nav class="menu">
@@ -9,13 +9,13 @@
               <ul>
                 {{#if cluster.anyReplicationEnabled}}
                   <li>
-                    <LinkTo @route="vault.cluster.replication.mode.index" @model="dr" @disabled={{not currentToken}} @invokeAction={{action onLinkClick}}>
+                    <LinkTo @route="vault.cluster.replication.mode.index" @model="dr" @disabled={{not currentToken}} @invokeAction={{onLinkClick}}>
                       <ReplicationModeSummary @mode="dr" @display="menu" @cluster={{cluster}} />
                     </LinkTo>
                   </li>
                   <li>
                     {{#if (has-feature "Performance Replication")}}
-                      <LinkTo @route="vault.cluster.replication.mode.index" @model="performance" @disabled={{not currentToken}} @invokeAction={{action onLinkClick}}>
+                      <LinkTo @route="vault.cluster.replication.mode.index" @model="performance" @disabled={{not currentToken}} @invokeAction={{onLinkClick}}>
                         <ReplicationModeSummary @mode="performance" @display="menu" @cluster={{cluster}} @tagName="span" />
                       </LinkTo>
                     {{else}}
@@ -24,7 +24,7 @@
                   </li>
                 {{else}}
                   <li>
-                    <LinkTo @route="vault.cluster.replication" @invokeAction={{action onLinkClick}}>
+                    <LinkTo @route="vault.cluster.replication" @invokeAction={{onLinkClick}}>
                       <div class="level is-mobile">
                         <span class="level-left">Enable</span>
                         <Icon @glyph="plus-circle-outline" @class="has-text-grey-light level-right" />
@@ -38,12 +38,12 @@
           {{/if}}
         {{else}}
           {{#if (has-permission 'status' routeParams='replication')}}
-            <nav class="menu">
+           <nav class="menu">
               <p class="menu-label">Replication</p>
               <ul>
                 {{#if cluster.anyReplicationEnabled}}
                   <li>
-                    <LinkTo @route="vault.cluster.replication-dr-promote.details" @disabled={{not currentToken}} @invokeAction={{action onLinkClick}}>
+                    <LinkTo @route="vault.cluster.replication-dr-promote.details" @disabled={{not currentToken}} @invokeAction={{onLinkClick}}>
                       <ReplicationModeSummary @mode="dr" @display="menu" @cluster={{cluster}} />
                     </LinkTo>
                   </li>
@@ -61,9 +61,9 @@
         </div>
         <ul class="menu-list">
           <li class="action">
-            {{#if activeCluster.unsealed}}
+            {{#if cluster.unsealed}}
               {{#if (and (has-permission 'status' routeParams='seal') (not cluster.dr.isSecondary))}}
-                <LinkTo @route="vault.cluster.settings.seal" @model={{cluster.name}} @invokeAction={{action (queue (action onLinkClick) (action d.actions.close))}}>
+                <LinkTo @route="vault.cluster.settings.seal" @model={{cluster.name}} @invokeAction={{onLinkClick}}>
                   <div class="level is-mobile">
                     <span class="level-left">Unsealed</span>
                     <Icon @glyph="check-circle-outline" class="has-text-success level-right" />
@@ -96,7 +96,7 @@
           <ul class="menu-list">
             {{#if (and version.features (has-permission 'status' routeParams='license') (not cluster.dr.isSecondary))}}
               <li class="action">
-                <LinkTo @route="vault.cluster.license" @model={{activeCluster.name}} @invokeAction={{action (queue (action onLinkClick) (action d.actions.close))}}>
+                <LinkTo @route="vault.cluster.license" @model={{cluster.name}} @invokeAction={{onLinkClick}}>
                   <div class="level is-mobile">
                     <span class="level-left">License</span>
                     <Chevron class="has-text-grey-light level-right" />
@@ -106,7 +106,7 @@
             {{/if}}
             {{#if (and cluster.usingRaft (has-permission 'status' routeParams='raft'))}}
               <li class="action">
-                <LinkTo @route="vault.cluster.storage" @model={{activeCluster.name}} @invokeAction={{onLinkClick}}>
+                <LinkTo @route="vault.cluster.storage" @model={{cluster.name}} @invokeAction={{onLinkClick}}>
                   <div class="level is-mobile">
                     <span class="level-left">Raft Storage</span>
                     <Chevron class="has-text-grey-light level-right" />
@@ -119,7 +119,7 @@
         {{#if ( and (has-permission 'metrics' routeParams='activity') (not cluster.dr.isSecondary) auth.currentToken)}}
           <ul class="menu-list">
             <li class="action">
-              <LinkTo @route="vault.cluster.metrics" @invokeAction={{action (queue (action onLinkClick) (action d.actions.close))}}>
+              <LinkTo @route="vault.cluster.metrics" @invokeAction={{onLinkClick}}>
                 <div class="level is-mobile">
                   <span class="level-left">Metrics</span>
                   <Chevron class="has-text-grey-light level-right" />
diff --git a/ui/app/templates/components/status-menu.hbs b/ui/app/templates/components/status-menu.hbs
index 2f9292d5ef1e..5df2dfdb4ea5 100644
--- a/ui/app/templates/components/status-menu.hbs
+++ b/ui/app/templates/components/status-menu.hbs
@@ -7,6 +7,12 @@
     <Chevron @direction="down" class="has-text-white is-status-chevron"/>
   </d.trigger>
   <d.content @class={{concat "status-menu-content status-menu-content-" type}}>
-    {{partial partialName}}
+    {{#if (eq type "user")}}
+      {{#if (and cluster.name auth.currentToken)}}
+        <AuthInfo @activeClusterName={{cluster.name}} @onLinkClick={{action onLinkClick}} />
+      {{/if}}
+    {{else}}
+        <ClusterInfo @cluster={{cluster}} />
+    {{/if}}
   </d.content>
 </BasicDropdown>
diff --git a/ui/app/templates/partials/status/user.hbs b/ui/app/templates/partials/status/user.hbs
deleted file mode 100644
index 3e17ed1ba7a5..000000000000
--- a/ui/app/templates/partials/status/user.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-{{#if (and cluster.name auth.currentToken)}}
-  <AuthInfo @activeClusterName={{cluster.name}} @onLinkClick={{action onLinkClick}} />
-{{/if}}

From b5789be0782ca00961bb36df118d1d86ddec6cdb Mon Sep 17 00:00:00 2001
From: Arnav Palnitkar <arnav@hashicorp.com>
Date: Thu, 20 May 2021 15:52:34 -0700
Subject: [PATCH 2/5] Added changelog

---
 changelog/11680.txt | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 changelog/11680.txt

diff --git a/changelog/11680.txt b/changelog/11680.txt
new file mode 100644
index 000000000000..24a3a4269999
--- /dev/null
+++ b/changelog/11680.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Updated cluster status partial to component
+```
\ No newline at end of file

From acbf9663f7ea90f6f203082171e36c05ec8d4fe8 Mon Sep 17 00:00:00 2001
From: Arnav Palnitkar <arnav@hashicorp.com>
Date: Mon, 24 May 2021 14:01:47 -0700
Subject: [PATCH 3/5] Close menu when link is clicked

---
 ui/app/components/cluster-info.js           | 12 ++++++++++++
 ui/app/templates/components/status-menu.hbs |  2 +-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/ui/app/components/cluster-info.js b/ui/app/components/cluster-info.js
index 998b6462ac1b..f65b0f050b25 100644
--- a/ui/app/components/cluster-info.js
+++ b/ui/app/components/cluster-info.js
@@ -2,10 +2,22 @@ import { inject as service } from '@ember/service';
 import { reads } from '@ember/object/computed';
 import Component from '@ember/component';
 
+/**
+ * @module ClusterInfo
+ *
+ * @example
+ * ```js
+ * <ClusterInfo @cluster={{cluster}} @onLinkClick={{action}} />
+ * ```
+ *
+ * @param {object} cluster - details of the current cluster, passed from the parent.
+ * @param {Function} onLinkClick - parent action which determines the behavior on link click
+ */
 export default Component.extend({
   auth: service(),
   store: service(),
   version: service(),
+  cluster: null,
 
   transitionToRoute: function() {
     this.router.transitionTo(...arguments);
diff --git a/ui/app/templates/components/status-menu.hbs b/ui/app/templates/components/status-menu.hbs
index 5df2dfdb4ea5..85b9a52f1d6b 100644
--- a/ui/app/templates/components/status-menu.hbs
+++ b/ui/app/templates/components/status-menu.hbs
@@ -12,7 +12,7 @@
         <AuthInfo @activeClusterName={{cluster.name}} @onLinkClick={{action onLinkClick}} />
       {{/if}}
     {{else}}
-        <ClusterInfo @cluster={{cluster}} />
+        <ClusterInfo @cluster={{cluster}}  @onLinkClick={{action (queue (action onLinkClick) (action d.actions.close))}} />
     {{/if}}
   </d.content>
 </BasicDropdown>

From f42fbfb2c35f4f6a9827b6f482d15f3490cf4cff Mon Sep 17 00:00:00 2001
From: Arnav Palnitkar <arnav@hashicorp.com>
Date: Tue, 25 May 2021 13:29:45 -0700
Subject: [PATCH 4/5] Upgraded to glimmer components

---
 ui/app/components/auth-info.js               | 90 +++++++++++---------
 ui/app/components/cluster-info.js            | 19 ++---
 ui/app/templates/components/auth-info.hbs    | 30 +++----
 ui/app/templates/components/cluster-info.hbs | 50 +++++------
 4 files changed, 98 insertions(+), 91 deletions(-)

diff --git a/ui/app/components/auth-info.js b/ui/app/components/auth-info.js
index 76a2c0e5e278..9f77ebc28d9a 100644
--- a/ui/app/components/auth-info.js
+++ b/ui/app/components/auth-info.js
@@ -1,42 +1,54 @@
+import Component from '@glimmer/component';
 import { inject as service } from '@ember/service';
-import { or, alias } from '@ember/object/computed';
-import Component from '@ember/component';
 import { run } from '@ember/runloop';
-
-export default Component.extend({
-  auth: service(),
-  wizard: service(),
-  router: service(),
-  version: service(),
-
-  transitionToRoute: function() {
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+/**
+ * @module AuthInfo
+ *
+ * @example
+ * ```js
+ * <AuthInfo @activeClusterName={{cluster.name}} @onLinkClick={{action "onLinkClick"}} />
+ * ```
+ *
+ * @param {string} activeClusterName - name of the current cluster, passed from the parent.
+ * @param {Function} onLinkClick - parent action which determines the behavior on link click
+ */
+export default class AuthInfoComponent extends Component {
+  @service auth;
+  @service wizard;
+  @service router;
+
+  @tracked
+  fakeRenew = false;
+
+  get isRenewing() {
+    return this.fakeRenew || this.auth.isRenewing;
+  }
+
+  transitionToRoute() {
     this.router.transitionTo(...arguments);
-  },
-
-  classNames: 'user-menu auth-info',
-
-  isRenewing: or('fakeRenew', 'auth.isRenewing'),
-
-  canExpire: alias('auth.allowExpiration'),
-
-  isOSS: alias('version.isOSS'),
-
-  actions: {
-    restartGuide() {
-      this.wizard.restartGuide();
-    },
-    renewToken() {
-      this.set('fakeRenew', true);
-      run.later(() => {
-        this.set('fakeRenew', false);
-        this.auth.renew();
-      }, 200);
-    },
-
-    revokeToken() {
-      this.auth.revokeCurrentToken().then(() => {
-        this.transitionToRoute('vault.cluster.logout');
-      });
-    },
-  },
-});
+  }
+
+  @action
+  restartGuide() {
+    this.wizard.restartGuide();
+  }
+
+  @action
+  renewToken() {
+    this.fakeRenew = true;
+    run.later(() => {
+      this.fakeRenew = false;
+      this.auth.renew();
+    }, 200);
+  }
+
+  @action
+  revokeToken() {
+    this.auth.revokeCurrentToken().then(() => {
+      this.transitionToRoute('vault.cluster.logout');
+    });
+  }
+}
diff --git a/ui/app/components/cluster-info.js b/ui/app/components/cluster-info.js
index f65b0f050b25..4238d21217bf 100644
--- a/ui/app/components/cluster-info.js
+++ b/ui/app/components/cluster-info.js
@@ -1,6 +1,5 @@
 import { inject as service } from '@ember/service';
-import { reads } from '@ember/object/computed';
-import Component from '@ember/component';
+import Component from '@glimmer/component';
 
 /**
  * @module ClusterInfo
@@ -13,15 +12,11 @@ import Component from '@ember/component';
  * @param {object} cluster - details of the current cluster, passed from the parent.
  * @param {Function} onLinkClick - parent action which determines the behavior on link click
  */
-export default Component.extend({
-  auth: service(),
-  store: service(),
-  version: service(),
-  cluster: null,
+export default class ClusterInfoComponent extends Component {
+  @service auth;
+  @service version;
 
-  transitionToRoute: function() {
+  transitionToRoute() {
     this.router.transitionTo(...arguments);
-  },
-
-  currentToken: reads('auth.currentToken'),
-});
+  }
+}
diff --git a/ui/app/templates/components/auth-info.hbs b/ui/app/templates/components/auth-info.hbs
index 0c4d0f1fc099..5459b082ed52 100644
--- a/ui/app/templates/components/auth-info.hbs
+++ b/ui/app/templates/components/auth-info.hbs
@@ -2,16 +2,16 @@
 <div class="popup-menu-content">
   <div class="box">
     <div class="menu-label">
-      {{auth.authData.displayName}}
+      {{this.auth.authData.displayName}}
     </div>
     <nav class="menu">
       <ul class="menu-list">
-        {{#if canExpire}}
-          <li class="action">
+        {{#if this.auth.allowExpiration }}
+         <li class="action">
             <AlertBanner @type="warning" @message="We've stopped auto-renewing your token due to inactivity.
-                It will expire in {{date-from-now auth.tokenExpirationDate interval=1000 hideSuffix=true}}.
-                On {{date-format auth.tokenExpirationDate 'MMMM Do yyyy, h:mm:ss a'}}" />
-          </li>
+                It will expire in {{date-from-now this.auth.tokenExpirationDate interval=1000 hideSuffix=true}}.
+                On {{date-format this.auth.tokenExpirationDate 'MMMM Do yyyy, h:mm:ss a'}}" />
+          </li> 
         {{/if}}
         <li class="action">
           <button type="button" class="link" onclick={{action "restartGuide"}}>
@@ -19,21 +19,21 @@
           </button>
         </li>
         <li class="action">
-          <CopyButton @clipboardText={{auth.currentToken}} class="link" @buttonType="button" @success={{action (set-flash-message 'Token copied!')}}>
+          <CopyButton @clipboardText={{this.auth.currentToken}} class="link" @buttonType="button" @success={{action (set-flash-message 'Token copied!')}}>
             Copy token
           </CopyButton>
         </li>
-        {{#if (is-before (now interval=1000) auth.tokenExpirationDate)}}
-          {{#if auth.authData.renewable}}
+        {{#if (is-before (now interval=1000) this.auth.tokenExpirationDate)}}
+          {{#if this.auth.authData.renewable}}
             <li class="action">
-              <button type="button" {{action "renewToken"}} class="link button {{if isRenewing 'is-loading'}}">
+              <button type="button" {{action "renewToken"}} class="link button {{if this.isRenewing 'is-loading'}}">
                 Renew token
               </button>
             </li>
             <li class="action">
               <c.Message
-                @id={{get auth 'authData.displayName'}}
-                @title={{concat "Revoke " (get auth 'authData.displayName') "?"}}
+                @id={{get this.auth 'authData.displayName'}}
+                @title={{concat "Revoke " (get this.auth 'authData.displayName') "?"}}
                 @onConfirm={{action "revokeToken"}}
                 @message="You will not be able to log in again with this token."
                 @triggerText="Revoke token"
@@ -43,8 +43,8 @@
           {{else}}
             <li class="action text-right">
               <c.Message
-                @id={{get auth 'authData.displayName'}}
-                @title={{concat "Revoke " (get auth 'authData.displayName') "?"}}
+                @id={{get this.auth 'authData.displayName'}}
+                @title={{concat "Revoke " (get this.auth 'authData.displayName') "?"}}
                 @onConfirm={{action "revokeToken"}}
                 @message="You will not be able to log in again with this token."
                 @triggerText="Revoke token"
@@ -54,7 +54,7 @@
           {{/if}}
         {{/if}}
         <li class="action">
-          <LinkTo @route="vault.cluster.logout" @model={{activeClusterName}} @id="logout" class="is-destroy" @invokeAction={{onLinkClick}}>
+          <LinkTo @route="vault.cluster.logout" @model={{@activeClusterName}} @id="logout" class="is-destroy" @invokeAction={{@onLinkClick}}>
             Sign out
           </LinkTo>
         </li>
diff --git a/ui/app/templates/components/cluster-info.hbs b/ui/app/templates/components/cluster-info.hbs
index 448dc1e8e334..e1fc6e45c532 100644
--- a/ui/app/templates/components/cluster-info.hbs
+++ b/ui/app/templates/components/cluster-info.hbs
@@ -1,30 +1,30 @@
 <div class="popup-menu-content">
   <div class="box">
-    {{#unless version.isOSS}}
-      {{#if (and cluster.unsealed auth.currentToken)}}
-        {{#unless cluster.dr.isSecondary}}
+    {{#unless this.version.isOSS}}
+      {{#if (and @cluster.unsealed this.auth.currentToken)}}
+        {{#unless @cluster.dr.isSecondary}}
           {{#if (has-permission 'status' routeParams='replication')}}
             <nav class="menu">
               <p class="menu-label">Replication</p>
               <ul>
-                {{#if cluster.anyReplicationEnabled}}
+                {{#if @cluster.anyReplicationEnabled}}
                   <li>
-                    <LinkTo @route="vault.cluster.replication.mode.index" @model="dr" @disabled={{not currentToken}} @invokeAction={{onLinkClick}}>
-                      <ReplicationModeSummary @mode="dr" @display="menu" @cluster={{cluster}} />
+                    <LinkTo @route="vault.cluster.replication.mode.index" @model="dr" @disabled={{not this.auth.currentToken}} @invokeAction={{@onLinkClick}}>
+                      <ReplicationModeSummary @mode="dr" @display="menu" @cluster={{@cluster}} />
                     </LinkTo>
                   </li>
                   <li>
                     {{#if (has-feature "Performance Replication")}}
-                      <LinkTo @route="vault.cluster.replication.mode.index" @model="performance" @disabled={{not currentToken}} @invokeAction={{onLinkClick}}>
-                        <ReplicationModeSummary @mode="performance" @display="menu" @cluster={{cluster}} @tagName="span" />
+                      <LinkTo @route="vault.cluster.replication.mode.index" @model="performance" @disabled={{not this.auth.currentToken}} @invokeAction={{@onLinkClick}}>
+                        <ReplicationModeSummary @mode="performance" @display="menu" @cluster={{@cluster}} @tagName="span" />
                       </LinkTo>
                     {{else}}
-                      <ReplicationModeSummary @mode="performance" @display="menu" @cluster={{cluster}} @class="menu-item" />
+                      <ReplicationModeSummary @mode="performance" @display="menu" @cluster={{@cluster}} @class="menu-item" />
                     {{/if}}
                   </li>
                 {{else}}
                   <li>
-                    <LinkTo @route="vault.cluster.replication" @invokeAction={{onLinkClick}}>
+                    <LinkTo @route="vault.cluster.replication" @invokeAction={{@onLinkClick}}>
                       <div class="level is-mobile">
                         <span class="level-left">Enable</span>
                         <Icon @glyph="plus-circle-outline" @class="has-text-grey-light level-right" />
@@ -41,10 +41,10 @@
            <nav class="menu">
               <p class="menu-label">Replication</p>
               <ul>
-                {{#if cluster.anyReplicationEnabled}}
+                {{#if @cluster.anyReplicationEnabled}}
                   <li>
-                    <LinkTo @route="vault.cluster.replication-dr-promote.details" @disabled={{not currentToken}} @invokeAction={{onLinkClick}}>
-                      <ReplicationModeSummary @mode="dr" @display="menu" @cluster={{cluster}} />
+                    <LinkTo @route="vault.cluster.replication-dr-promote.details" @disabled={{not this.auth.currentToken}} @invokeAction={{@onLinkClick}}>
+                      <ReplicationModeSummary @mode="dr" @display="menu" @cluster={{@cluster}} />
                     </LinkTo>
                   </li>
                 {{/if}}
@@ -61,9 +61,9 @@
         </div>
         <ul class="menu-list">
           <li class="action">
-            {{#if cluster.unsealed}}
-              {{#if (and (has-permission 'status' routeParams='seal') (not cluster.dr.isSecondary))}}
-                <LinkTo @route="vault.cluster.settings.seal" @model={{cluster.name}} @invokeAction={{onLinkClick}}>
+            {{#if @cluster.unsealed}}
+              {{#if (and (has-permission 'status' routeParams='seal') (not @cluster.dr.isSecondary))}}
+                <LinkTo @route="vault.cluster.settings.seal" @model={{@cluster.name}} @invokeAction={{@onLinkClick}}>
                   <div class="level is-mobile">
                     <span class="level-left">Unsealed</span>
                     <Icon @glyph="check-circle-outline" class="has-text-success level-right" />
@@ -88,15 +88,15 @@
           </li>
         </ul>
         {{#if (and (or
-        (and version.features (has-permission 'status' routeParams='license'))
-        (and cluster.usingRaft (has-permission 'status' routeParams='raft'))
+        (and this.version.features (has-permission 'status' routeParams='license'))
+        (and @cluster.usingRaft (has-permission 'status' routeParams='raft'))
         )
-        (not cluster.dr.isSecondary))
+        (not @cluster.dr.isSecondary))
         }}
           <ul class="menu-list">
-            {{#if (and version.features (has-permission 'status' routeParams='license') (not cluster.dr.isSecondary))}}
+            {{#if (and this.version.features (has-permission 'status' routeParams='license') (not @cluster.dr.isSecondary))}}
               <li class="action">
-                <LinkTo @route="vault.cluster.license" @model={{cluster.name}} @invokeAction={{onLinkClick}}>
+                <LinkTo @route="vault.cluster.license" @model={{@cluster.name}} @invokeAction={{@onLinkClick}}>
                   <div class="level is-mobile">
                     <span class="level-left">License</span>
                     <Chevron class="has-text-grey-light level-right" />
@@ -104,9 +104,9 @@
                 </LinkTo>
               </li>
             {{/if}}
-            {{#if (and cluster.usingRaft (has-permission 'status' routeParams='raft'))}}
+            {{#if (and @cluster.usingRaft (has-permission 'status' routeParams='raft'))}}
               <li class="action">
-                <LinkTo @route="vault.cluster.storage" @model={{cluster.name}} @invokeAction={{onLinkClick}}>
+                <LinkTo @route="vault.cluster.storage" @model={{@cluster.name}} @invokeAction={{@onLinkClick}}>
                   <div class="level is-mobile">
                     <span class="level-left">Raft Storage</span>
                     <Chevron class="has-text-grey-light level-right" />
@@ -116,10 +116,10 @@
             {{/if}}
           </ul>
         {{/if}}
-        {{#if ( and (has-permission 'metrics' routeParams='activity') (not cluster.dr.isSecondary) auth.currentToken)}}
+        {{#if ( and (has-permission 'metrics' routeParams='activity') (not @cluster.dr.isSecondary) this.auth.currentToken)}}
           <ul class="menu-list">
             <li class="action">
-              <LinkTo @route="vault.cluster.metrics" @invokeAction={{onLinkClick}}>
+              <LinkTo @route="vault.cluster.metrics" @invokeAction={{@onLinkClick}}>
                 <div class="level is-mobile">
                   <span class="level-left">Metrics</span>
                   <Chevron class="has-text-grey-light level-right" />

From 7e08a3a1699eb22136b934a531683bd18ac59c93 Mon Sep 17 00:00:00 2001
From: Arnav Palnitkar <arnav@hashicorp.com>
Date: Wed, 26 May 2021 11:45:03 -0700
Subject: [PATCH 5/5] Fixed indentations Added back activeCluster Updated
 changelog

---
 changelog/11680.txt                          |  2 +-
 ui/app/components/cluster-info.js            |  5 +++++
 ui/app/templates/components/auth-info.hbs    |  2 +-
 ui/app/templates/components/cluster-info.hbs | 10 +++++-----
 4 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/changelog/11680.txt b/changelog/11680.txt
index 24a3a4269999..3e8b919b1c9b 100644
--- a/changelog/11680.txt
+++ b/changelog/11680.txt
@@ -1,3 +1,3 @@
 ```release-note:improvement
-ui: Updated cluster status partial to component
+ui: Update partials to components
 ```
\ No newline at end of file
diff --git a/ui/app/components/cluster-info.js b/ui/app/components/cluster-info.js
index 4238d21217bf..e2f45efc28e2 100644
--- a/ui/app/components/cluster-info.js
+++ b/ui/app/components/cluster-info.js
@@ -14,8 +14,13 @@ import Component from '@glimmer/component';
  */
 export default class ClusterInfoComponent extends Component {
   @service auth;
+  @service store;
   @service version;
 
+  get activeCluster() {
+    return this.store.peekRecord('cluster', this.auth.activeCluster);
+  }
+
   transitionToRoute() {
     this.router.transitionTo(...arguments);
   }
diff --git a/ui/app/templates/components/auth-info.hbs b/ui/app/templates/components/auth-info.hbs
index 5459b082ed52..5d2b37741479 100644
--- a/ui/app/templates/components/auth-info.hbs
+++ b/ui/app/templates/components/auth-info.hbs
@@ -7,7 +7,7 @@
     <nav class="menu">
       <ul class="menu-list">
         {{#if this.auth.allowExpiration }}
-         <li class="action">
+          <li class="action">
             <AlertBanner @type="warning" @message="We've stopped auto-renewing your token due to inactivity.
                 It will expire in {{date-from-now this.auth.tokenExpirationDate interval=1000 hideSuffix=true}}.
                 On {{date-format this.auth.tokenExpirationDate 'MMMM Do yyyy, h:mm:ss a'}}" />
diff --git a/ui/app/templates/components/cluster-info.hbs b/ui/app/templates/components/cluster-info.hbs
index e1fc6e45c532..c2a28a49cbd4 100644
--- a/ui/app/templates/components/cluster-info.hbs
+++ b/ui/app/templates/components/cluster-info.hbs
@@ -1,7 +1,7 @@
 <div class="popup-menu-content">
   <div class="box">
     {{#unless this.version.isOSS}}
-      {{#if (and @cluster.unsealed this.auth.currentToken)}}
+      {{#if (and this.activeCluster.unsealed this.auth.currentToken)}}
         {{#unless @cluster.dr.isSecondary}}
           {{#if (has-permission 'status' routeParams='replication')}}
             <nav class="menu">
@@ -38,7 +38,7 @@
           {{/if}}
         {{else}}
           {{#if (has-permission 'status' routeParams='replication')}}
-           <nav class="menu">
+            <nav class="menu">
               <p class="menu-label">Replication</p>
               <ul>
                 {{#if @cluster.anyReplicationEnabled}}
@@ -61,7 +61,7 @@
         </div>
         <ul class="menu-list">
           <li class="action">
-            {{#if @cluster.unsealed}}
+            {{#if this.activeCluster.unsealed}}
               {{#if (and (has-permission 'status' routeParams='seal') (not @cluster.dr.isSecondary))}}
                 <LinkTo @route="vault.cluster.settings.seal" @model={{@cluster.name}} @invokeAction={{@onLinkClick}}>
                   <div class="level is-mobile">
@@ -96,7 +96,7 @@
           <ul class="menu-list">
             {{#if (and this.version.features (has-permission 'status' routeParams='license') (not @cluster.dr.isSecondary))}}
               <li class="action">
-                <LinkTo @route="vault.cluster.license" @model={{@cluster.name}} @invokeAction={{@onLinkClick}}>
+                <LinkTo @route="vault.cluster.license" @model={{this.activeCluster.name}} @invokeAction={{@onLinkClick}}>
                   <div class="level is-mobile">
                     <span class="level-left">License</span>
                     <Chevron class="has-text-grey-light level-right" />
@@ -106,7 +106,7 @@
             {{/if}}
             {{#if (and @cluster.usingRaft (has-permission 'status' routeParams='raft'))}}
               <li class="action">
-                <LinkTo @route="vault.cluster.storage" @model={{@cluster.name}} @invokeAction={{@onLinkClick}}>
+                <LinkTo @route="vault.cluster.storage" @model={{this.activeCluster.name}} @invokeAction={{@onLinkClick}}>
                   <div class="level is-mobile">
                     <span class="level-left">Raft Storage</span>
                     <Chevron class="has-text-grey-light level-right" />