Save agentless node notice dismissal per dc

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;
   }
 }

ui/packages/consul-ui/app/templates/dc/nodes/index.hbs

@@ -60,7 +60,7 @@
                 {{/if}}
               </BlockSlot>
               <BlockSlot @name='content'>
-                <Consul::Node::AgentlessNotice @items={{items}} @filteredItems={{filtered}} />
+                <Consul::Node::AgentlessNotice @items={{items}} @filteredItems={{filtered}} @dc={{route.params.dc}} />
                 <DataCollection
                   @type='node'
                   @sort={{sort.value}}

ui/packages/consul-ui/package.json

@@ -158,7 +158,6 @@
     "ember-stargate": "^0.2.0",
     "ember-string-fns": "^1.4.0",
     "ember-test-selectors": "^5.0.0",
-    "ember-tracked-local-storage": "^1.1.1",
     "ember-truth-helpers": "^3.0.0",
     "eslint": "^7.17.0",
     "eslint-config-prettier": "^7.1.0",

ui/packages/consul-ui/tests/integration/components/consul/node/agentless-notice-test.js

@@ -2,9 +2,16 @@ import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
 import { click, render } from '@ember/test-helpers';
+import sinon from 'sinon';
 
 module('Integration | Component | consul node agentless-notice', function (hooks) {
   setupRenderingTest(hooks);
+  hooks.beforeEach(() => {
+    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`<Consul::Node::AgentlessNotice @items={{this.nodes}} @filteredItems={{this.filteredNodes}} />`
     );
-
+    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`<Consul::Node::AgentlessNotice @items={{this.nodes}} @filteredItems={{this.filteredNodes}} @dc="dc2" />`
+    );
+
+    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'"
+      );
   });
 });

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"