Disabling License Banners

changelog/19116.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Allows license-banners to be dismissed. Saves preferences in localStorage.
+```

ui/app/components/license-banners.js

@@ -1,3 +1,11 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import isAfter from 'date-fns/isAfter';
+import differenceInDays from 'date-fns/differenceInDays';
+import localStorage from 'vault/lib/local-storage';
+
 /**
  * @module LicenseBanners
  * LicenseBanners components are used to display Vault-specific license expiry messages
@@ -9,11 +17,24 @@
  * @param {string} expiry - RFC3339 date timestamp
  */
 
-import Component from '@glimmer/component';
-import isAfter from 'date-fns/isAfter';
-import differenceInDays from 'date-fns/differenceInDays';
-
 export default class LicenseBanners extends Component {
+  @service version;
+
+  @tracked currentVersion = this.version.version;
+  @tracked warningDismissed;
+  @tracked expiredDismissed;
+
+  constructor() {
+    super(...arguments);
+    // If nothing is saved in localStorage or the user has updated their Vault version, show the license banners.
+    const localStorageLicenseBannerObject = localStorage.getItem('licenseBanner');
+    if (!localStorageLicenseBannerObject || localStorageLicenseBannerObject.version !== this.currentVersion) {
+      localStorage.setItem('licenseBanner', { dismissType: '', version: this.currentVersion });
+      return;
+    }
+    this.setDismissType(localStorageLicenseBannerObject.dismissType);
+  }
+
   get licenseExpired() {
     if (!this.args.expiry) return false;
     return isAfter(new Date(), new Date(this.args.expiry));
@@ -24,4 +45,25 @@ export default class LicenseBanners extends Component {
     if (!this.args.expiry) return 99;
     return differenceInDays(new Date(this.args.expiry), new Date());
   }
+
+  @action
+  dismissBanner(dismissAction) {
+    // dismissAction is either 'dismiss-warning' or 'dismiss-expired'
+    const updatedLocalStorageObject = { dismissType: dismissAction, version: this.currentVersion };
+    localStorage.setItem('licenseBanner', updatedLocalStorageObject);
+    this.setDismissType(dismissAction);
+  }
+
+  setDismissType(dismissType) {
+    // reset tracked properties to false
+    this.warningDismissed = this.expiredDismissed = false;
+    if (dismissType === 'dismiss-warning') {
+      this.warningDismissed = true;
+    } else if (dismissType === 'dismiss-expired') {
+      this.expiredDismissed = true;
+    } else {
+      // if dismissType is empty do nothing.
+      return;
+    }
+  }
 }

ui/app/templates/components/license-banners.hbs

@@ -1,4 +1,4 @@
-{{#if this.licenseExpired}}
+{{#if (and this.licenseExpired (not this.expiredDismissed))}}
   <div class="license-banner-wrapper" data-test-license-banner data-test-license-banner-expired>
     <AlertBanner
       @type="danger"
@@ -13,9 +13,17 @@
         <Icon @name="learn-link" />
         Read documentation
       </DocLink>
+      <button
+        type="button"
+        class="close-button"
+        {{on "click" (fn this.dismissBanner "dismiss-expired")}}
+        data-test-dismiss-expired
+      >
+        <Icon @name="x" aria-label="dismiss license expired warning" />
+      </button>
     </AlertBanner>
   </div>
-{{else if (lte this.licenseExpiringInDays 30)}}
+{{else if (and (lte this.licenseExpiringInDays 30) (not this.warningDismissed))}}
   <div class="license-banner-wrapper" data-test-license-banner data-test-license-banner-warning>
     <AlertBanner
       @type="warning"
@@ -34,6 +42,14 @@
         <Icon @name="learn-link" />
         Read documentation
       </DocLink>
+      <button
+        type="button"
+        class="close-button"
+        {{on "click" (fn this.dismissBanner "dismiss-warning")}}
+        data-test-dismiss-warning
+      >
+        <Icon @name="x" aria-label="dismiss license expire soon warning" />
+      </button>
     </AlertBanner>
   </div>
 {{/if}}

ui/tests/integration/components/license-banners-test.js

@@ -1,39 +1,99 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render } from '@ember/test-helpers';
+import { render, click } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import subDays from 'date-fns/subDays';
 import addDays from 'date-fns/addDays';
 import formatRFC3339 from 'date-fns/formatRFC3339';
 
+const YESTERDAY = subDays(new Date(), 1);
+const NEXT_MONTH = addDays(new Date(), 30);
+
 module('Integration | Component | license-banners', function (hooks) {
   setupRenderingTest(hooks);
 
+  hooks.beforeEach(function () {
+    localStorage.removeItem('licenseBanner');
+  });
+
   test('it does not render if no expiry', async function (assert) {
+    assert.expect(1);
     await render(hbs`<LicenseBanners />`);
     assert.dom('[data-test-license-banner]').doesNotExist('License banner does not render');
   });
 
   test('it renders an error if expiry is before now', async function (assert) {
-    const yesterday = subDays(new Date(), 1);
-    this.set('expiry', formatRFC3339(yesterday));
+    assert.expect(2);
+    this.set('expiry', formatRFC3339(YESTERDAY));
     await render(hbs`<LicenseBanners @expiry={{this.expiry}} />`);
     assert.dom('[data-test-license-banner-expired]').exists('Expired license banner renders');
     assert.dom('.message-title').hasText('License expired', 'Shows correct title on alert');
   });
 
   test('it renders a warning if expiry is within 30 days', async function (assert) {
-    const nextMonth = addDays(new Date(), 30);
-    this.set('expiry', formatRFC3339(nextMonth));
+    assert.expect(2);
+    this.set('expiry', formatRFC3339(NEXT_MONTH));
     await render(hbs`<LicenseBanners @expiry={{this.expiry}} />`);
     assert.dom('[data-test-license-banner-warning]').exists('Warning license banner renders');
     assert.dom('.message-title').hasText('Vault license expiring', 'Shows correct title on alert');
   });
 
   test('it does not render a banner if expiry is outside 30 days', async function (assert) {
+    assert.expect(1);
     const outside30 = addDays(new Date(), 32);
     this.set('expiry', formatRFC3339(outside30));
     await render(hbs`<LicenseBanners @expiry={{this.expiry}} />`);
     assert.dom('[data-test-license-banner]').doesNotExist('License banner does not render');
   });
+
+  test('it does not render the expired banner if it has been dismissed', async function (assert) {
+    assert.expect(3);
+    this.set('expiry', formatRFC3339(YESTERDAY));
+    await render(hbs`<LicenseBanners @expiry={{this.expiry}} />`);
+    await click('[data-test-dismiss-expired]');
+    assert.dom('[data-test-license-banner-expired]').doesNotExist('Expired license banner does not render');
+
+    await render(hbs`<LicenseBanners @expiry={{this.expiry}} />`);
+    const localStorageObject = JSON.parse(localStorage.getItem('licenseBanner'));
+    assert.strictEqual(localStorageObject.dismissType, 'dismiss-expired');
+    assert
+      .dom('[data-test-license-banner-expired]')
+      .doesNotExist('The expired banner still does not render after a re-render.');
+  });
+
+  test('it does not render the warning banner if it has been dismissed', async function (assert) {
+    assert.expect(3);
+    this.set('expiry', formatRFC3339(NEXT_MONTH));
+    await render(hbs`<LicenseBanners @expiry={{this.expiry}} />`);
+    await click('[data-test-dismiss-warning]');
+    assert.dom('[data-test-license-banner-warning]').doesNotExist('Warning license banner does not render');
+
+    await render(hbs`<LicenseBanners @expiry={{this.expiry}} />`);
+    const localStorageObject = JSON.parse(localStorage.getItem('licenseBanner'));
+    assert.strictEqual(localStorageObject.dismissType, 'dismiss-warning');
+    assert
+      .dom('[data-test-license-banner-warning]')
+      .doesNotExist('The warning banner still does not render after a re-render.');
+  });
+
+  test('it renders a banner if the vault license has changed', async function (assert) {
+    assert.expect(2);
+    this.version = this.owner.lookup('service:version');
+    this.version.version = '1.12.1+ent';
+
+    this.set('expiry', formatRFC3339(NEXT_MONTH));
+    await render(hbs`<LicenseBanners @expiry={{this.expiry}} />`);
+    await click('[data-test-dismiss-warning]');
+
+    const localStorageObjectEarlierVersion = JSON.parse(localStorage.getItem('licenseBanner'));
+    this.version.version = '1.13.1+ent';
+    await render(hbs`<LicenseBanners @expiry={{this.expiry}} />`);
+
+    const localStorageObjectLaterVersion = JSON.parse(localStorage.getItem('licenseBanner'));
+    assert
+      .dom('[data-test-license-banner-warning]')
+      .exists('The warning banner shows even though we have dismissed it earlier.');
+
+    assert.notEqual(localStorageObjectEarlierVersion.version, localStorageObjectLaterVersion.version);
+  });
 });