diff --git a/ui/packages/consul-ui/app/components/consul/node/agentless-notice/index.js b/ui/packages/consul-ui/app/components/consul/node/agentless-notice/index.js index 3bcba47b50..cc7996ae81 100644 --- a/ui/packages/consul-ui/app/components/consul/node/agentless-notice/index.js +++ b/ui/packages/consul-ui/app/components/consul/node/agentless-notice/index.js @@ -1,20 +1,34 @@ import Component from '@glimmer/component'; import { action } from '@ember/object'; -import { trackedInLocalStorage } from 'ember-tracked-local-storage'; +import { tracked } from '@glimmer/tracking'; + +const DISMISSED_VALUE = 'true'; export default class AgentlessNotice extends Component { - @trackedInLocalStorage({ defaulValue: 'false' }) consulNodesAgentlessNoticeDismissed; + storageKey = 'consul-nodes-agentless-notice-dismissed'; + @tracked hasDismissedNotice = false; + + constructor(owner, args) { + super(owner, args); + + if (this.args.dc) { + this.storageKey = `consul-nodes-agentless-notice-dismissed-${this.args.dc}`; + } + + if (window.localStorage.getItem(this.storageKey) === DISMISSED_VALUE) { + this.hasDismissedNotice = true; + } + } get isVisible() { const { items, filteredItems } = this.args; - return ( - this.consulNodesAgentlessNoticeDismissed !== 'true' && items.length > filteredItems.length - ); + return !this.hasDismissedNotice && items.length > filteredItems.length; } @action dismissAgentlessNotice() { - this.consulNodesAgentlessNoticeDismissed = 'true'; + window.localStorage.setItem(this.storageKey, DISMISSED_VALUE); + this.hasDismissedNotice = true; } } diff --git a/ui/packages/consul-ui/app/templates/dc/nodes/index.hbs b/ui/packages/consul-ui/app/templates/dc/nodes/index.hbs index d43b35f90c..f319ad0d52 100644 --- a/ui/packages/consul-ui/app/templates/dc/nodes/index.hbs +++ b/ui/packages/consul-ui/app/templates/dc/nodes/index.hbs @@ -60,7 +60,7 @@ {{/if}} - + { + const localStore = {}; + + sinon.stub(window.localStorage, 'getItem').callsFake((key) => localStore[key]); + sinon.stub(window.localStorage, 'setItem').callsFake((key, value) => (localStore[key] = value)); + }); test('it does not display the notice if the filtered nodes are the same as the regular nodes', async function (assert) { this.set('nodes', [ @@ -26,7 +33,7 @@ module('Integration | Component | consul node agentless-notice', function (hooks await render( hbs`` ); - + assert.true(window.localStorage.getItem.called); assert .dom('[data-test-node-agentless-notice]') .doesNotExist( @@ -59,5 +66,43 @@ module('Integration | Component | consul node agentless-notice', function (hooks assert .dom('[data-test-node-agentless-notice]') .doesNotExist('The agentless notice be dismissed'); + assert.true( + window.localStorage.setItem.calledOnceWith('consul-nodes-agentless-notice-dismissed', 'true'), + "Set the key in localstorage to 'true'" + ); + }); + + test('it does not display if the localstorage key is already set to true', async function (assert) { + this.set('nodes', [ + { + Meta: { + 'synthetic-node': false, + }, + }, + ]); + + this.set('filteredNodes', [ + { + Meta: { + 'synthetic-node': false, + }, + }, + ]); + + window.localStorage.setItem('consul-nodes-agentless-notice-dismissed-dc2', 'true'); + + await render( + hbs`` + ); + + assert.true( + window.localStorage.getItem.calledOnceWith('consul-nodes-agentless-notice-dismissed-dc2') + ); + + assert + .dom('[data-test-node-agentless-notice]') + .doesNotExist( + "The agentless notice should not display if the local storage key has already been set to 'true'" + ); }); }); diff --git a/ui/yarn.lock b/ui/yarn.lock index 24a3f492ad..a1b3fb4c01 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -9247,17 +9247,6 @@ ember-text-measurer@^0.6.0: ember-cli-babel "^7.19.0" ember-cli-htmlbars "^4.3.1" -ember-tracked-local-storage@^1.1.1: - version "1.1.1" - resolved "https://registry.yarnpkg.com/ember-tracked-local-storage/-/ember-tracked-local-storage-1.1.1.tgz#16104ce5bddc6d055049af094c7e223ff2f61520" - integrity sha512-0n4EBdbFyIJWqtbhmEf+iAFRvUD6p+s3kL9WLD2GJOimfKjcbe2ybmNUT6Qdj3ge5vqQgh59mJejJg/PEP2R0w== - dependencies: - "@glimmer/tracking" "^1.0.1" - ember-auto-import "^1.6.0" - ember-cli-babel "^7.22.1" - ember-cli-htmlbars "^5.3.1" - macro-decorators "^0.1.2" - "ember-truth-helpers@^2.1.0 || ^3.0.0", ember-truth-helpers@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/ember-truth-helpers/-/ember-truth-helpers-3.0.0.tgz#86766bdca4ac9b86bce3d262dff2aabc4a0ea384" @@ -12626,11 +12615,6 @@ lru-cache@^6.0.0: dependencies: yallist "^4.0.0" -macro-decorators@^0.1.2: - version "0.1.2" - resolved "https://registry.yarnpkg.com/macro-decorators/-/macro-decorators-0.1.2.tgz#1d5cf1276d343371040af192901947f2a0af03c1" - integrity sha512-BV5XPmCm9kPSMtgfZiv0vTjOooe5pTIPIVkdoqbC49H1B7z22KB39H50R2ZNclZDQlmVyviLozRatKnOYZkwzg== - magic-string@^0.25.7: version "0.25.7" resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051"