diff --git a/changelog/11680.txt b/changelog/11680.txt new file mode 100644 index 000000000000..3e8b919b1c9b --- /dev/null +++ b/changelog/11680.txt @@ -0,0 +1,3 @@ +```release-note:improvement +ui: Update partials to components +``` \ No newline at end of file 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 + * + * ``` + * + * @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 new file mode 100644 index 000000000000..e2f45efc28e2 --- /dev/null +++ b/ui/app/components/cluster-info.js @@ -0,0 +1,27 @@ +import { inject as service } from '@ember/service'; +import Component from '@glimmer/component'; + +/** + * @module ClusterInfo + * + * @example + * ```js + * + * ``` + * + * @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 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/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/components/auth-info.hbs b/ui/app/templates/components/auth-info.hbs index 0c4d0f1fc099..5d2b37741479 100644 --- a/ui/app/templates/components/auth-info.hbs +++ b/ui/app/templates/components/auth-info.hbs @@ -2,16 +2,16 @@