From f88973a265284eb4db5ba4f40ff2a9cf80d7ef79 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Thu, 9 Feb 2023 14:49:54 -0700
Subject: [PATCH 01/20] work in progress: got the expired banner set with
 license check

---
 ui/app/components/license-banners.js          | 41 +++++++++++++--
 .../templates/components/license-banners.hbs  | 51 ++++++++++---------
 2 files changed, 64 insertions(+), 28 deletions(-)

diff --git a/ui/app/components/license-banners.js b/ui/app/components/license-banners.js
index 91f4d2b15044..4e7a5cb67bfa 100644
--- a/ui/app/components/license-banners.js
+++ b/ui/app/components/license-banners.js
@@ -1,6 +1,14 @@
+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
+ * LicenseBanners components are used to display Vault-specific license expiry messages.
  *
  * @example
  * ```js
@@ -9,11 +17,27 @@
  * @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 dismissLicenseExpired = false;
+  @tracked localStorageLicenseBannerState = localStorage.getItem('licenseBannerState');
+
+  constructor() {
+    super(...arguments);
+    if (!this.localStorageLicenseBannerState) {
+      localStorage.setItem('licenseBannerState', { dismiss: false, version: this.currentVersion });
+    } else {
+      if (
+        this.localStorageLicenseBannerState.version === this.currentVersion &&
+        this.localStorageLicenseBannerState.dismiss
+      ) {
+        this.dismissLicenseExpired = true;
+      }
+    }
+  }
+
   get licenseExpired() {
     if (!this.args.expiry) return false;
     return isAfter(new Date(), new Date(this.args.expiry));
@@ -24,4 +48,11 @@ export default class LicenseBanners extends Component {
     if (!this.args.expiry) return 99;
     return differenceInDays(new Date(this.args.expiry), new Date());
   }
+
+  @action
+  dismissLicenseExpiredBanner() {
+    const updatedObject = { dismiss: true, version: this.currentVersion };
+    localStorage.setItem('licenseBannerState', updatedObject);
+    this.dismissLicenseExpired = true;
+  }
 }
diff --git a/ui/app/templates/components/license-banners.hbs b/ui/app/templates/components/license-banners.hbs
index 8c043d37e34c..501804f71a2f 100644
--- a/ui/app/templates/components/license-banners.hbs
+++ b/ui/app/templates/components/license-banners.hbs
@@ -1,4 +1,5 @@
-{{#if this.licenseExpired}}
+{{!-- {{#if this.licenseExpired}} --}}
+{{#unless this.dismissLicenseExpired}}
   <div class="license-banner-wrapper" data-test-license-banner data-test-license-banner-expired>
     <AlertBanner
       @type="danger"
@@ -13,27 +14,31 @@
         <Icon @name="learn-link" />
         Read documentation
       </DocLink>
+      <button type="button" class="close-button" {{on "click" this.dismissLicenseExpiredBanner}}>
+        <Icon @name="x" aria-label="dismiss license expired warning" />
+      </button>
     </AlertBanner>
   </div>
-{{else if (lte this.licenseExpiringInDays 30)}}
-  <div class="license-banner-wrapper" data-test-license-banner data-test-license-banner-warning>
-    <AlertBanner
-      @type="warning"
-      @title="Vault license expiring"
-      @message="Your Vault license will expire in {{this.licenseExpiringInDays}} days at {{date-format
-        @expiry
-        'hh:mm:ss a'
-      }} on {{date-format @expiry 'MMM d, yyyy'}}. {{if
-        @autoloaded
-        'Add a new license to your configuration.'
-        'Keep in mind that your next license will need to be autoloaded'
-      }}"
-      class="message-marginless"
-    >
-      <DocLink @path="/vault/tutorials/enterprise/hashicorp-enterprise-license">
-        <Icon @name="learn-link" />
-        Read documentation
-      </DocLink>
-    </AlertBanner>
-  </div>
-{{/if}}
\ No newline at end of file
+{{/unless}}
+{{!-- {{else if (lte this.licenseExpiringInDays 30)}} --}}
+<div class="license-banner-wrapper" data-test-license-banner data-test-license-banner-warning>
+  <AlertBanner
+    @type="warning"
+    @title="Vault license expiring"
+    @message="Your Vault license will expire in {{this.licenseExpiringInDays}} days at {{date-format
+      @expiry
+      'hh:mm:ss a'
+    }} on {{date-format @expiry 'MMM d, yyyy'}}. {{if
+      @autoloaded
+      'Add a new license to your configuration.'
+      'Keep in mind that your next license will need to be autoloaded'
+    }}"
+    class="message-marginless"
+  >
+    <DocLink @path="/vault/tutorials/enterprise/hashicorp-enterprise-license">
+      <Icon @name="learn-link" />
+      Read documentation
+    </DocLink>
+  </AlertBanner>
+</div>
+{{!-- {{/if}} --}}
\ No newline at end of file

From f64bd76aa155ea43c08ed95827e1c76096d99880 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Thu, 9 Feb 2023 17:01:54 -0700
Subject: [PATCH 02/20] wip: got the logic for both banners, need to test and
 write tests

---
 ui/app/components/license-banners.js          | 41 +++++---
 .../templates/components/license-banners.hbs  | 93 ++++++++++---------
 2 files changed, 76 insertions(+), 58 deletions(-)

diff --git a/ui/app/components/license-banners.js b/ui/app/components/license-banners.js
index 4e7a5cb67bfa..d2a54b496f51 100644
--- a/ui/app/components/license-banners.js
+++ b/ui/app/components/license-banners.js
@@ -21,21 +21,29 @@ export default class LicenseBanners extends Component {
   @service version;
 
   @tracked currentVersion = this.version.version;
-  @tracked dismissLicenseExpired = false;
   @tracked localStorageLicenseBannerState = localStorage.getItem('licenseBannerState');
+  @tracked dismissType = 'none';
 
+  // dismissType options = [both, warning, expired, none]
   constructor() {
     super(...arguments);
-    if (!this.localStorageLicenseBannerState) {
-      localStorage.setItem('licenseBannerState', { dismiss: false, version: this.currentVersion });
-    } else {
-      if (
-        this.localStorageLicenseBannerState.version === this.currentVersion &&
-        this.localStorageLicenseBannerState.dismiss
-      ) {
-        this.dismissLicenseExpired = true;
-      }
+    if (
+      !this.localStorageLicenseBannerState ||
+      this.localStorageLicenseBannerState.version !== this.currentVersion
+    ) {
+      localStorage.setItem('licenseBannerState', { dismissType: 'none', version: this.currentVersion });
     }
+
+    this.dismissType = !this.localStorageLicenseBannerState?.dismissType
+      ? 'none'
+      : this.localStorageLicenseBannerState.dismissType;
+  }
+
+  get showWarning() {
+    return this.dismissType === 'both' || this.dismissType === 'dismiss-warning' ? false : true;
+  }
+  get showExpired() {
+    return this.dismissType === 'both' || this.dismissType === 'dismiss-expired' ? false : true;
   }
 
   get licenseExpired() {
@@ -50,9 +58,14 @@ export default class LicenseBanners extends Component {
   }
 
   @action
-  dismissLicenseExpiredBanner() {
-    const updatedObject = { dismiss: true, version: this.currentVersion };
-    localStorage.setItem('licenseBannerState', updatedObject);
-    this.dismissLicenseExpired = true;
+  dismissBanner(bannerType) {
+    const updatedLicenseBannerState =
+      this.dismissType === 'none'
+        ? { dismissType: bannerType, version: this.currentVersion }
+        : { dismissType: 'both', version: this.currentVersion };
+
+    localStorage.setItem('licenseBannerState', updatedLicenseBannerState);
+
+    this.dismissType = this.dismissType === 'none' ? bannerType : 'both';
   }
 }
diff --git a/ui/app/templates/components/license-banners.hbs b/ui/app/templates/components/license-banners.hbs
index 501804f71a2f..4d114a836e4f 100644
--- a/ui/app/templates/components/license-banners.hbs
+++ b/ui/app/templates/components/license-banners.hbs
@@ -1,44 +1,49 @@
-{{!-- {{#if this.licenseExpired}} --}}
-{{#unless this.dismissLicenseExpired}}
-  <div class="license-banner-wrapper" data-test-license-banner data-test-license-banner-expired>
-    <AlertBanner
-      @type="danger"
-      @title="License expired"
-      @message="Your Vault license expired on {{date-format
-        @expiry
-        'MMM d, yyyy'
-      }}. Add a new license to your configuration and restart Vault."
-      class="message-marginless"
-    >
-      <DocLink @path="/vault/tutorials/enterprise/hashicorp-enterprise-license">
-        <Icon @name="learn-link" />
-        Read documentation
-      </DocLink>
-      <button type="button" class="close-button" {{on "click" this.dismissLicenseExpiredBanner}}>
-        <Icon @name="x" aria-label="dismiss license expired warning" />
-      </button>
-    </AlertBanner>
-  </div>
-{{/unless}}
-{{!-- {{else if (lte this.licenseExpiringInDays 30)}} --}}
-<div class="license-banner-wrapper" data-test-license-banner data-test-license-banner-warning>
-  <AlertBanner
-    @type="warning"
-    @title="Vault license expiring"
-    @message="Your Vault license will expire in {{this.licenseExpiringInDays}} days at {{date-format
-      @expiry
-      'hh:mm:ss a'
-    }} on {{date-format @expiry 'MMM d, yyyy'}}. {{if
-      @autoloaded
-      'Add a new license to your configuration.'
-      'Keep in mind that your next license will need to be autoloaded'
-    }}"
-    class="message-marginless"
-  >
-    <DocLink @path="/vault/tutorials/enterprise/hashicorp-enterprise-license">
-      <Icon @name="learn-link" />
-      Read documentation
-    </DocLink>
-  </AlertBanner>
-</div>
-{{!-- {{/if}} --}}
\ No newline at end of file
+{{#if this.licenseExpired}}
+  {{#if this.showExpired}}
+    <div class="license-banner-wrapper" data-test-license-banner data-test-license-banner-expired>
+      <AlertBanner
+        @type="danger"
+        @title="License expired"
+        @message="Your Vault license expired on {{date-format
+          @expiry
+          'MMM d, yyyy'
+        }}. Add a new license to your configuration and restart Vault."
+        class="message-marginless"
+      >
+        <DocLink @path="/vault/tutorials/enterprise/hashicorp-enterprise-license">
+          <Icon @name="learn-link" />
+          Read documentation
+        </DocLink>
+        <button type="button" class="close-button" {{on "click" (fn this.dismissBanner "dismiss-expired")}}>
+          <Icon @name="x" aria-label="dismiss license expired warning" />
+        </button>
+      </AlertBanner>
+    </div>
+  {{/if}}
+{{else if (lte this.licenseExpiringInDays 30)}}
+  {{#if this.showWarning}}
+    <div class="license-banner-wrapper" data-test-license-banner data-test-license-banner-warning>
+      <AlertBanner
+        @type="warning"
+        @title="Vault license expiring"
+        @message="Your Vault license will expire in {{this.licenseExpiringInDays}} days at {{date-format
+          @expiry
+          'hh:mm:ss a'
+        }} on {{date-format @expiry 'MMM d, yyyy'}}. {{if
+          @autoloaded
+          'Add a new license to your configuration.'
+          'Keep in mind that your next license will need to be autoloaded'
+        }}"
+        class="message-marginless"
+      >
+        <DocLink @path="/vault/tutorials/enterprise/hashicorp-enterprise-license">
+          <Icon @name="learn-link" />
+          Read documentation
+        </DocLink>
+        <button type="button" class="close-button" {{on "click" (fn this.dismissBanner "dismiss-warning")}}>
+          <Icon @name="x" aria-label="dismiss license expire soon warning" />
+        </button>
+      </AlertBanner>
+    </div>
+  {{/if}}
+{{/if}}
\ No newline at end of file

From a2f37bb3e8081a8ba067db09827227f8531223d6 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Thu, 9 Feb 2023 17:12:21 -0700
Subject: [PATCH 03/20] add notes

---
 ui/app/components/license-banners.js | 29 +++++++++++++++-------------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/ui/app/components/license-banners.js b/ui/app/components/license-banners.js
index d2a54b496f51..ab4cba8e353e 100644
--- a/ui/app/components/license-banners.js
+++ b/ui/app/components/license-banners.js
@@ -8,7 +8,7 @@ import localStorage from 'vault/lib/local-storage';
 
 /**
  * @module LicenseBanners
- * LicenseBanners components are used to display Vault-specific license expiry messages.
+ * LicenseBanners components are used to display Vault-specific license expiry messages
  *
  * @example
  * ```js
@@ -22,11 +22,11 @@ export default class LicenseBanners extends Component {
 
   @tracked currentVersion = this.version.version;
   @tracked localStorageLicenseBannerState = localStorage.getItem('licenseBannerState');
-  @tracked dismissType = 'none';
+  @tracked dismissType = 'none'; // dismissType options: [both, dismiss-warning, dismiss-expired, none]
 
-  // dismissType options = [both, warning, expired, none]
   constructor() {
     super(...arguments);
+    // if nothing saved in localStorage or the user has updated their version show both license banners
     if (
       !this.localStorageLicenseBannerState ||
       this.localStorageLicenseBannerState.version !== this.currentVersion
@@ -34,18 +34,12 @@ export default class LicenseBanners extends Component {
       localStorage.setItem('licenseBannerState', { dismissType: 'none', version: this.currentVersion });
     }
 
+    // set tracked property dismissType from either the local storage object or 'none' if one does not exist.
     this.dismissType = !this.localStorageLicenseBannerState?.dismissType
       ? 'none'
       : this.localStorageLicenseBannerState.dismissType;
   }
 
-  get showWarning() {
-    return this.dismissType === 'both' || this.dismissType === 'dismiss-warning' ? false : true;
-  }
-  get showExpired() {
-    return this.dismissType === 'both' || this.dismissType === 'dismiss-expired' ? false : true;
-  }
-
   get licenseExpired() {
     if (!this.args.expiry) return false;
     return isAfter(new Date(), new Date(this.args.expiry));
@@ -57,15 +51,24 @@ export default class LicenseBanners extends Component {
     return differenceInDays(new Date(this.args.expiry), new Date());
   }
 
+  get showWarning() {
+    return this.dismissType === 'dismiss-expired' || this.dismissType === 'none' ? true : false;
+  }
+
+  get showExpired() {
+    return this.dismissType === 'dismiss-warning' || this.dismissType === 'none' ? true : false;
+  }
+
   @action
   dismissBanner(bannerType) {
-    const updatedLicenseBannerState =
+    // bannerType is either 'dismiss-warning' or 'dismiss-expired'
+    const updatedLocalStorageObject =
       this.dismissType === 'none'
         ? { dismissType: bannerType, version: this.currentVersion }
         : { dismissType: 'both', version: this.currentVersion };
 
-    localStorage.setItem('licenseBannerState', updatedLicenseBannerState);
-
+    localStorage.setItem('licenseBannerState', updatedLocalStorageObject);
+    // update tracked property so showWarning and showExpired are updated causing the template to hide the appropriate banner.
     this.dismissType = this.dismissType === 'none' ? bannerType : 'both';
   }
 }

From 378aec4b144c0d1c862d2e36ebb167db284aa760 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Fri, 10 Feb 2023 10:23:25 -0700
Subject: [PATCH 04/20] prep for test writing

---
 ui/app/components/license-banners.js          | 30 +++++++++----------
 .../templates/components/license-banners.hbs  | 14 +++++++--
 2 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/ui/app/components/license-banners.js b/ui/app/components/license-banners.js
index ab4cba8e353e..1d2f604c8a52 100644
--- a/ui/app/components/license-banners.js
+++ b/ui/app/components/license-banners.js
@@ -21,23 +21,23 @@ export default class LicenseBanners extends Component {
   @service version;
 
   @tracked currentVersion = this.version.version;
-  @tracked localStorageLicenseBannerState = localStorage.getItem('licenseBannerState');
-  @tracked dismissType = 'none'; // dismissType options: [both, dismiss-warning, dismiss-expired, none]
+  @tracked localStorageLicenseBannerObject = localStorage.getItem('licenseBanner');
+  @tracked dismissType = 'none'; // dismissType options: both, dismiss-warning, dismiss-expired, none
 
   constructor() {
     super(...arguments);
-    // if nothing saved in localStorage or the user has updated their version show both license banners
+    // if nothing is saved in localStorage, or the user has updated their Vault version show the license banners
     if (
-      !this.localStorageLicenseBannerState ||
-      this.localStorageLicenseBannerState.version !== this.currentVersion
+      !this.localStorageLicenseBannerObject ||
+      this.localStorageLicenseBannerObject.version !== this.currentVersion
     ) {
-      localStorage.setItem('licenseBannerState', { dismissType: 'none', version: this.currentVersion });
+      localStorage.setItem('licenseBanner', { dismissType: 'none', version: this.currentVersion });
     }
 
-    // set tracked property dismissType from either the local storage object or 'none' if one does not exist.
-    this.dismissType = !this.localStorageLicenseBannerState?.dismissType
+    // update tracked property to equal either dismissType from localStorage or 'none' if the local storage object does not exists.
+    this.dismissType = !this.localStorageLicenseBannerObject?.dismissType
       ? 'none'
-      : this.localStorageLicenseBannerState.dismissType;
+      : this.localStorageLicenseBannerObject.dismissType;
   }
 
   get licenseExpired() {
@@ -60,15 +60,15 @@ export default class LicenseBanners extends Component {
   }
 
   @action
-  dismissBanner(bannerType) {
-    // bannerType is either 'dismiss-warning' or 'dismiss-expired'
+  dismissBanner(dismissAction) {
+    // dismissAction is either 'dismiss-warning' or 'dismiss-expired'
     const updatedLocalStorageObject =
       this.dismissType === 'none'
-        ? { dismissType: bannerType, version: this.currentVersion }
+        ? { dismissType: dismissAction, version: this.currentVersion }
         : { dismissType: 'both', version: this.currentVersion };
 
-    localStorage.setItem('licenseBannerState', updatedLocalStorageObject);
-    // update tracked property so showWarning and showExpired are updated causing the template to hide the appropriate banner.
-    this.dismissType = this.dismissType === 'none' ? bannerType : 'both';
+    localStorage.setItem('licenseBanner', updatedLocalStorageObject);
+    // update tracked property so showWarning and showExpired are updated.
+    this.dismissType = this.dismissType === 'none' ? dismissAction : 'both';
   }
 }
diff --git a/ui/app/templates/components/license-banners.hbs b/ui/app/templates/components/license-banners.hbs
index 4d114a836e4f..edc31950adcf 100644
--- a/ui/app/templates/components/license-banners.hbs
+++ b/ui/app/templates/components/license-banners.hbs
@@ -14,7 +14,12 @@
           <Icon @name="learn-link" />
           Read documentation
         </DocLink>
-        <button type="button" class="close-button" {{on "click" (fn this.dismissBanner "dismiss-expired")}}>
+        <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>
@@ -40,7 +45,12 @@
           <Icon @name="learn-link" />
           Read documentation
         </DocLink>
-        <button type="button" class="close-button" {{on "click" (fn this.dismissBanner "dismiss-warning")}}>
+        <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>

From 37f9855b7e2458617810fb54db44c2bd42b40e43 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Fri, 10 Feb 2023 11:49:19 -0700
Subject: [PATCH 05/20] test coverage

---
 ui/app/components/license-banners.js          |  2 +
 .../components/license-banners-test.js        | 70 +++++++++++++++++--
 2 files changed, 67 insertions(+), 5 deletions(-)

diff --git a/ui/app/components/license-banners.js b/ui/app/components/license-banners.js
index 1d2f604c8a52..456dafcb5913 100644
--- a/ui/app/components/license-banners.js
+++ b/ui/app/components/license-banners.js
@@ -32,6 +32,8 @@ export default class LicenseBanners extends Component {
       this.localStorageLicenseBannerObject.version !== this.currentVersion
     ) {
       localStorage.setItem('licenseBanner', { dismissType: 'none', version: this.currentVersion });
+      this.dismissType = 'none';
+      return;
     }
 
     // update tracked property to equal either dismissType from localStorage or 'none' if the local storage object does not exists.
diff --git a/ui/tests/integration/components/license-banners-test.js b/ui/tests/integration/components/license-banners-test.js
index 8fceba13f1e9..255ea5a47038 100644
--- a/ui/tests/integration/components/license-banners-test.js
+++ b/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);
+  });
 });

From 956b74487aa67ba8dde3899188d4c884e369b36c Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Fri, 10 Feb 2023 11:51:09 -0700
Subject: [PATCH 06/20] add changelog

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

diff --git a/changelog/19116.txt b/changelog/19116.txt
new file mode 100644
index 000000000000..5dfcd9ecfada
--- /dev/null
+++ b/changelog/19116.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Allows license-banners to be dismissed. Saves preferences in localStorage.
+```
\ No newline at end of file

From 095c065ee1a5b03f877ac02b1918407b19b45777 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Fri, 10 Feb 2023 12:18:06 -0700
Subject: [PATCH 07/20] clean up

---
 ui/app/components/license-banners.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/ui/app/components/license-banners.js b/ui/app/components/license-banners.js
index 456dafcb5913..c82d161d7063 100644
--- a/ui/app/components/license-banners.js
+++ b/ui/app/components/license-banners.js
@@ -18,6 +18,7 @@ import localStorage from 'vault/lib/local-storage';
  */
 
 export default class LicenseBanners extends Component {
+  // ARG TODO: we would never show both!
   @service version;
 
   @tracked currentVersion = this.version.version;
@@ -26,7 +27,7 @@ export default class LicenseBanners extends Component {
 
   constructor() {
     super(...arguments);
-    // if nothing is saved in localStorage, or the user has updated their Vault version show the license banners
+    // if nothing is saved in localStorage or the user has updated their Vault version, show the license banners
     if (
       !this.localStorageLicenseBannerObject ||
       this.localStorageLicenseBannerObject.version !== this.currentVersion
@@ -36,10 +37,8 @@ export default class LicenseBanners extends Component {
       return;
     }
 
-    // update tracked property to equal either dismissType from localStorage or 'none' if the local storage object does not exists.
-    this.dismissType = !this.localStorageLicenseBannerObject?.dismissType
-      ? 'none'
-      : this.localStorageLicenseBannerObject.dismissType;
+    // otherwise dismissType should equal the dismissType recorded in localStorage
+    this.dismissType = this.localStorageLicenseBannerObject.dismissType;
   }
 
   get licenseExpired() {
@@ -64,6 +63,9 @@ export default class LicenseBanners extends Component {
   @action
   dismissBanner(dismissAction) {
     // dismissAction is either 'dismiss-warning' or 'dismiss-expired'
+
+    // update localStorage dismissType. If it was none before replace it with the passed in dismissAction (to hide either the warning or expired banner).
+
     const updatedLocalStorageObject =
       this.dismissType === 'none'
         ? { dismissType: dismissAction, version: this.currentVersion }

From 31ec22961e3f2142cb2228ccb9ebd87e9fdee011 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Mon, 13 Feb 2023 10:40:44 -0700
Subject: [PATCH 08/20] clarify dismissTypes and conditionals

---
 ui/app/components/license-banners.js          |  55 ++++-----
 .../templates/components/license-banners.hbs  | 108 +++++++++---------
 2 files changed, 76 insertions(+), 87 deletions(-)

diff --git a/ui/app/components/license-banners.js b/ui/app/components/license-banners.js
index c82d161d7063..cfdfe115e10d 100644
--- a/ui/app/components/license-banners.js
+++ b/ui/app/components/license-banners.js
@@ -18,27 +18,22 @@ import localStorage from 'vault/lib/local-storage';
  */
 
 export default class LicenseBanners extends Component {
-  // ARG TODO: we would never show both!
   @service version;
 
-  @tracked currentVersion = this.version.version;
-  @tracked localStorageLicenseBannerObject = localStorage.getItem('licenseBanner');
-  @tracked dismissType = 'none'; // dismissType options: both, dismiss-warning, dismiss-expired, none
+  @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
-    if (
-      !this.localStorageLicenseBannerObject ||
-      this.localStorageLicenseBannerObject.version !== this.currentVersion
-    ) {
-      localStorage.setItem('licenseBanner', { dismissType: 'none', version: this.currentVersion });
-      this.dismissType = 'none';
+    // If nothing is saved in localStorage or the user has updated their Vault version, show the license banners.
+    const localStorageLicenseBannerObject = localStorage.getItem('licenseBanner');
+    const currentVersion = this.version.version;
+
+    if (!localStorageLicenseBannerObject || localStorageLicenseBannerObject.version !== currentVersion) {
+      localStorage.setItem('licenseBanner', { dismissType: '', version: currentVersion });
       return;
     }
-
-    // otherwise dismissType should equal the dismissType recorded in localStorage
-    this.dismissType = this.localStorageLicenseBannerObject.dismissType;
+    this.setDismissType(localStorageLicenseBannerObject.dismissType);
   }
 
   get licenseExpired() {
@@ -52,27 +47,25 @@ export default class LicenseBanners extends Component {
     return differenceInDays(new Date(this.args.expiry), new Date());
   }
 
-  get showWarning() {
-    return this.dismissType === 'dismiss-expired' || this.dismissType === 'none' ? true : false;
-  }
-
-  get showExpired() {
-    return this.dismissType === 'dismiss-warning' || this.dismissType === 'none' ? true : false;
-  }
-
   @action
   dismissBanner(dismissAction) {
     // dismissAction is either 'dismiss-warning' or 'dismiss-expired'
+    const updatedLocalStorageObject = { dismissType: dismissAction, version: this.currentVersion };
+    localStorage.setItem('licenseBanner', updatedLocalStorageObject);
 
-    // update localStorage dismissType. If it was none before replace it with the passed in dismissAction (to hide either the warning or expired banner).
-
-    const updatedLocalStorageObject =
-      this.dismissType === 'none'
-        ? { dismissType: dismissAction, version: this.currentVersion }
-        : { dismissType: 'both', version: this.currentVersion };
+    this.setDismissType(dismissAction);
+  }
 
-    localStorage.setItem('licenseBanner', updatedLocalStorageObject);
-    // update tracked property so showWarning and showExpired are updated.
-    this.dismissType = this.dismissType === 'none' ? dismissAction : 'both';
+  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;
+    }
   }
 }
diff --git a/ui/app/templates/components/license-banners.hbs b/ui/app/templates/components/license-banners.hbs
index edc31950adcf..bfad9a632d58 100644
--- a/ui/app/templates/components/license-banners.hbs
+++ b/ui/app/templates/components/license-banners.hbs
@@ -1,59 +1,55 @@
-{{#if this.licenseExpired}}
-  {{#if this.showExpired}}
-    <div class="license-banner-wrapper" data-test-license-banner data-test-license-banner-expired>
-      <AlertBanner
-        @type="danger"
-        @title="License expired"
-        @message="Your Vault license expired on {{date-format
-          @expiry
-          'MMM d, yyyy'
-        }}. Add a new license to your configuration and restart Vault."
-        class="message-marginless"
+{{#if (and this.licenseExpired (not this.expiredDismissed))}}
+  <div class="license-banner-wrapper" data-test-license-banner data-test-license-banner-expired>
+    <AlertBanner
+      @type="danger"
+      @title="License expired"
+      @message="Your Vault license expired on {{date-format
+        @expiry
+        'MMM d, yyyy'
+      }}. Add a new license to your configuration and restart Vault."
+      class="message-marginless"
+    >
+      <DocLink @path="/vault/tutorials/enterprise/hashicorp-enterprise-license">
+        <Icon @name="learn-link" />
+        Read documentation
+      </DocLink>
+      <button
+        type="button"
+        class="close-button"
+        {{on "click" (fn this.dismissBanner "dismiss-expired")}}
+        data-test-dismiss-expired
       >
-        <DocLink @path="/vault/tutorials/enterprise/hashicorp-enterprise-license">
-          <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>
-  {{/if}}
-{{else if (lte this.licenseExpiringInDays 30)}}
-  {{#if this.showWarning}}
-    <div class="license-banner-wrapper" data-test-license-banner data-test-license-banner-warning>
-      <AlertBanner
-        @type="warning"
-        @title="Vault license expiring"
-        @message="Your Vault license will expire in {{this.licenseExpiringInDays}} days at {{date-format
-          @expiry
-          'hh:mm:ss a'
-        }} on {{date-format @expiry 'MMM d, yyyy'}}. {{if
-          @autoloaded
-          'Add a new license to your configuration.'
-          'Keep in mind that your next license will need to be autoloaded'
-        }}"
-        class="message-marginless"
+        <Icon @name="x" aria-label="dismiss license expired warning" />
+      </button>
+    </AlertBanner>
+  </div>
+{{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"
+      @title="Vault license expiring"
+      @message="Your Vault license will expire in {{this.licenseExpiringInDays}} days at {{date-format
+        @expiry
+        'hh:mm:ss a'
+      }} on {{date-format @expiry 'MMM d, yyyy'}}. {{if
+        @autoloaded
+        'Add a new license to your configuration.'
+        'Keep in mind that your next license will need to be autoloaded'
+      }}"
+      class="message-marginless"
+    >
+      <DocLink @path="/vault/tutorials/enterprise/hashicorp-enterprise-license">
+        <Icon @name="learn-link" />
+        Read documentation
+      </DocLink>
+      <button
+        type="button"
+        class="close-button"
+        {{on "click" (fn this.dismissBanner "dismiss-warning")}}
+        data-test-dismiss-warning
       >
-        <DocLink @path="/vault/tutorials/enterprise/hashicorp-enterprise-license">
-          <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}}
+        <Icon @name="x" aria-label="dismiss license expire soon warning" />
+      </button>
+    </AlertBanner>
+  </div>
 {{/if}}
\ No newline at end of file

From c34012c57547bd7820d297b3e6310d68179a04c8 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Mon, 13 Feb 2023 10:55:58 -0700
Subject: [PATCH 09/20] updates

---
 ui/app/components/license-banners.js | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/ui/app/components/license-banners.js b/ui/app/components/license-banners.js
index cfdfe115e10d..4d9797fcf558 100644
--- a/ui/app/components/license-banners.js
+++ b/ui/app/components/license-banners.js
@@ -20,6 +20,7 @@ import localStorage from 'vault/lib/local-storage';
 export default class LicenseBanners extends Component {
   @service version;
 
+  @tracked currentVersion = this.version.version;
   @tracked warningDismissed;
   @tracked expiredDismissed;
 
@@ -27,10 +28,8 @@ export default class LicenseBanners extends Component {
     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');
-    const currentVersion = this.version.version;
-
-    if (!localStorageLicenseBannerObject || localStorageLicenseBannerObject.version !== currentVersion) {
-      localStorage.setItem('licenseBanner', { dismissType: '', version: currentVersion });
+    if (!localStorageLicenseBannerObject || localStorageLicenseBannerObject.version !== this.currentVersion) {
+      localStorage.setItem('licenseBanner', { dismissType: '', version: this.currentVersion });
       return;
     }
     this.setDismissType(localStorageLicenseBannerObject.dismissType);
@@ -52,7 +51,6 @@ export default class LicenseBanners extends Component {
     // dismissAction is either 'dismiss-warning' or 'dismiss-expired'
     const updatedLocalStorageObject = { dismissType: dismissAction, version: this.currentVersion };
     localStorage.setItem('licenseBanner', updatedLocalStorageObject);
-
     this.setDismissType(dismissAction);
   }
 

From 5fa1db3fb26adbda2f335ee598f12fc85af5b682 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Mon, 13 Feb 2023 11:11:38 -0700
Subject: [PATCH 10/20] update comment

---
 ui/app/components/license-banners.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/app/components/license-banners.js b/ui/app/components/license-banners.js
index 4d9797fcf558..e42aa7d2cbda 100644
--- a/ui/app/components/license-banners.js
+++ b/ui/app/components/license-banners.js
@@ -26,7 +26,7 @@ export default class LicenseBanners extends Component {
 
   constructor() {
     super(...arguments);
-    // If nothing is saved in localStorage or the user has updated their Vault version, show the license banners.
+    // If nothing is saved in localStorage or the user has updated their Vault version, do not dismiss any of the banners.
     const localStorageLicenseBannerObject = localStorage.getItem('licenseBanner');
     if (!localStorageLicenseBannerObject || localStorageLicenseBannerObject.version !== this.currentVersion) {
       localStorage.setItem('licenseBanner', { dismissType: '', version: this.currentVersion });

From 2dd9d405756bae01796229ce9d5141d08c6645d0 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Mon, 13 Feb 2023 11:18:03 -0700
Subject: [PATCH 11/20] update comment

---
 ui/app/components/license-banners.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ui/app/components/license-banners.js b/ui/app/components/license-banners.js
index e42aa7d2cbda..1763e388368d 100644
--- a/ui/app/components/license-banners.js
+++ b/ui/app/components/license-banners.js
@@ -32,6 +32,7 @@ export default class LicenseBanners extends Component {
       localStorage.setItem('licenseBanner', { dismissType: '', version: this.currentVersion });
       return;
     }
+    // if dismissType has previously been saved in localStorage, update tracked properties.
     this.setDismissType(localStorageLicenseBannerObject.dismissType);
   }
 

From ab9d86ea306a0521f44828ceb6f1ef40f20ecaff Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Mon, 13 Feb 2023 12:04:07 -0700
Subject: [PATCH 12/20] address pr comments

---
 ui/app/components/license-banners.js | 24 ++++++++----------------
 1 file changed, 8 insertions(+), 16 deletions(-)

diff --git a/ui/app/components/license-banners.js b/ui/app/components/license-banners.js
index 1763e388368d..8182d7a3d3c7 100644
--- a/ui/app/components/license-banners.js
+++ b/ui/app/components/license-banners.js
@@ -20,20 +20,18 @@ import localStorage from 'vault/lib/local-storage';
 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, do not dismiss any of the banners.
-    const localStorageLicenseBannerObject = localStorage.getItem('licenseBanner');
-    if (!localStorageLicenseBannerObject || localStorageLicenseBannerObject.version !== this.currentVersion) {
-      localStorage.setItem('licenseBanner', { dismissType: '', version: this.currentVersion });
-      return;
-    }
-    // if dismissType has previously been saved in localStorage, update tracked properties.
-    this.setDismissType(localStorageLicenseBannerObject.dismissType);
+    // do not dismiss any banners if the user has updated their version
+    const dismissedBanner = localStorage.getItem(`dismiss-license-banner-${this.currentVersion}`); // returns either dismiss-warning or dismiss-expired
+    this.setDismissType(dismissedBanner);
+  }
+
+  get currentVersion() {
+    return this.version.version;
   }
 
   get licenseExpired() {
@@ -50,21 +48,15 @@ export default class LicenseBanners extends Component {
   @action
   dismissBanner(dismissAction) {
     // dismissAction is either 'dismiss-warning' or 'dismiss-expired'
-    const updatedLocalStorageObject = { dismissType: dismissAction, version: this.currentVersion };
-    localStorage.setItem('licenseBanner', updatedLocalStorageObject);
+    localStorage.setItem(`dismiss-license-banner-${this.currentVersion}`, dismissAction);
     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;
     }
   }
 }

From 699a72aa02eeb8d2e1ad5d00fc8cbe229c12ebef Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Mon, 13 Feb 2023 12:43:19 -0700
Subject: [PATCH 13/20] update test

---
 .../components/license-banners-test.js        | 23 +++++++++----------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/ui/tests/integration/components/license-banners-test.js b/ui/tests/integration/components/license-banners-test.js
index 255ea5a47038..ff0fc69e9602 100644
--- a/ui/tests/integration/components/license-banners-test.js
+++ b/ui/tests/integration/components/license-banners-test.js
@@ -13,7 +13,8 @@ module('Integration | Component | license-banners', function (hooks) {
   setupRenderingTest(hooks);
 
   hooks.beforeEach(function () {
-    localStorage.removeItem('licenseBanner');
+    this.version = this.owner.lookup('service:version');
+    this.version.version = '1.13.1+ent';
   });
 
   test('it does not render if no expiry', async function (assert) {
@@ -54,11 +55,12 @@ module('Integration | Component | license-banners', function (hooks) {
     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');
+    const localStorageResult = JSON.parse(localStorage.getItem(`dismiss-license-banner-1.13.1+ent`));
+    assert.strictEqual(localStorageResult, 'dismiss-expired');
     assert
       .dom('[data-test-license-banner-expired]')
       .doesNotExist('The expired banner still does not render after a re-render.');
+    localStorage.removeItem(`dismiss-license-banner-1.13.1+ent`);
   });
 
   test('it does not render the warning banner if it has been dismissed', async function (assert) {
@@ -69,31 +71,28 @@ module('Integration | Component | license-banners', function (hooks) {
     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');
+    const localStorageResult = JSON.parse(localStorage.getItem(`dismiss-license-banner-1.13.1+ent`));
+    assert.strictEqual(localStorageResult, 'dismiss-warning');
     assert
       .dom('[data-test-license-banner-warning]')
       .doesNotExist('The warning banner still does not render after a re-render.');
+    localStorage.removeItem(`dismiss-license-banner-1.13.1+ent`);
   });
 
   test('it renders a banner if the vault license has changed', async function (assert) {
-    assert.expect(2);
-    this.version = this.owner.lookup('service:version');
+    assert.expect(1);
     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);
+    localStorage.removeItem(`dismiss-license-banner-1.12.1+ent`);
+    localStorage.removeItem(`dismiss-license-banner-1.13.1+ent`);
   });
 });

From a6ff9405dcb645b7875d8b09f7b25880290bf6fd Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Mon, 13 Feb 2023 12:50:28 -0700
Subject: [PATCH 14/20] small naming change

---
 ui/app/components/license-banners.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/ui/app/components/license-banners.js b/ui/app/components/license-banners.js
index 8182d7a3d3c7..c56966f0313a 100644
--- a/ui/app/components/license-banners.js
+++ b/ui/app/components/license-banners.js
@@ -27,7 +27,7 @@ export default class LicenseBanners extends Component {
     super(...arguments);
     // do not dismiss any banners if the user has updated their version
     const dismissedBanner = localStorage.getItem(`dismiss-license-banner-${this.currentVersion}`); // returns either dismiss-warning or dismiss-expired
-    this.setDismissType(dismissedBanner);
+    this.updateDismissType(dismissedBanner);
   }
 
   get currentVersion() {
@@ -47,12 +47,13 @@ export default class LicenseBanners extends Component {
 
   @action
   dismissBanner(dismissAction) {
-    // dismissAction is either 'dismiss-warning' or 'dismiss-expired'
+    // updates localStorage and then updates the template by calling updateDismissType
     localStorage.setItem(`dismiss-license-banner-${this.currentVersion}`, dismissAction);
     this.setDismissType(dismissAction);
   }
 
-  setDismissType(dismissType) {
+  updateDismissType(dismissType) {
+    // updates tracked properties to update template
     if (dismissType === 'dismiss-warning') {
       this.warningDismissed = true;
     } else if (dismissType === 'dismiss-expired') {

From 2a43b9586e7016373e6415f49daa43951d28aa15 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Mon, 13 Feb 2023 12:56:42 -0700
Subject: [PATCH 15/20] small naming changes

---
 ui/app/components/license-banners.js               |  8 ++++----
 ui/app/templates/components/license-banners.hbs    | 14 ++------------
 .../integration/components/license-banners-test.js |  4 ++--
 3 files changed, 8 insertions(+), 18 deletions(-)

diff --git a/ui/app/components/license-banners.js b/ui/app/components/license-banners.js
index c56966f0313a..2aeea556d900 100644
--- a/ui/app/components/license-banners.js
+++ b/ui/app/components/license-banners.js
@@ -26,7 +26,7 @@ export default class LicenseBanners extends Component {
   constructor() {
     super(...arguments);
     // do not dismiss any banners if the user has updated their version
-    const dismissedBanner = localStorage.getItem(`dismiss-license-banner-${this.currentVersion}`); // returns either dismiss-warning or dismiss-expired
+    const dismissedBanner = localStorage.getItem(`dismiss-license-banner-${this.currentVersion}`); // returns either warning or expired
     this.updateDismissType(dismissedBanner);
   }
 
@@ -49,14 +49,14 @@ export default class LicenseBanners extends Component {
   dismissBanner(dismissAction) {
     // updates localStorage and then updates the template by calling updateDismissType
     localStorage.setItem(`dismiss-license-banner-${this.currentVersion}`, dismissAction);
-    this.setDismissType(dismissAction);
+    this.updateDismissType(dismissAction);
   }
 
   updateDismissType(dismissType) {
     // updates tracked properties to update template
-    if (dismissType === 'dismiss-warning') {
+    if (dismissType === 'warning') {
       this.warningDismissed = true;
-    } else if (dismissType === 'dismiss-expired') {
+    } else if (dismissType === 'expired') {
       this.expiredDismissed = true;
     }
   }
diff --git a/ui/app/templates/components/license-banners.hbs b/ui/app/templates/components/license-banners.hbs
index bfad9a632d58..0c9c09c60eec 100644
--- a/ui/app/templates/components/license-banners.hbs
+++ b/ui/app/templates/components/license-banners.hbs
@@ -13,12 +13,7 @@
         <Icon @name="learn-link" />
         Read documentation
       </DocLink>
-      <button
-        type="button"
-        class="close-button"
-        {{on "click" (fn this.dismissBanner "dismiss-expired")}}
-        data-test-dismiss-expired
-      >
+      <button type="button" class="close-button" {{on "click" (fn this.dismissBanner "expired")}} data-test-dismiss-expired>
         <Icon @name="x" aria-label="dismiss license expired warning" />
       </button>
     </AlertBanner>
@@ -42,12 +37,7 @@
         <Icon @name="learn-link" />
         Read documentation
       </DocLink>
-      <button
-        type="button"
-        class="close-button"
-        {{on "click" (fn this.dismissBanner "dismiss-warning")}}
-        data-test-dismiss-warning
-      >
+      <button type="button" class="close-button" {{on "click" (fn this.dismissBanner "warning")}} data-test-dismiss-warning>
         <Icon @name="x" aria-label="dismiss license expire soon warning" />
       </button>
     </AlertBanner>
diff --git a/ui/tests/integration/components/license-banners-test.js b/ui/tests/integration/components/license-banners-test.js
index ff0fc69e9602..d44a315276b1 100644
--- a/ui/tests/integration/components/license-banners-test.js
+++ b/ui/tests/integration/components/license-banners-test.js
@@ -56,7 +56,7 @@ module('Integration | Component | license-banners', function (hooks) {
 
     await render(hbs`<LicenseBanners @expiry={{this.expiry}} />`);
     const localStorageResult = JSON.parse(localStorage.getItem(`dismiss-license-banner-1.13.1+ent`));
-    assert.strictEqual(localStorageResult, 'dismiss-expired');
+    assert.strictEqual(localStorageResult, 'expired');
     assert
       .dom('[data-test-license-banner-expired]')
       .doesNotExist('The expired banner still does not render after a re-render.');
@@ -72,7 +72,7 @@ module('Integration | Component | license-banners', function (hooks) {
 
     await render(hbs`<LicenseBanners @expiry={{this.expiry}} />`);
     const localStorageResult = JSON.parse(localStorage.getItem(`dismiss-license-banner-1.13.1+ent`));
-    assert.strictEqual(localStorageResult, 'dismiss-warning');
+    assert.strictEqual(localStorageResult, 'warning');
     assert
       .dom('[data-test-license-banner-warning]')
       .doesNotExist('The warning banner still does not render after a re-render.');

From 3a4e34f2a1b58f4cd38f6f56ac75d16f98f4899d Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Mon, 13 Feb 2023 14:21:20 -0700
Subject: [PATCH 16/20] clean localStorage

---
 ui/app/components/license-banners.js            |  2 ++
 ui/app/lib/local-storage.js                     |  9 +++++++++
 .../components/license-banners-test.js          | 17 +++++++++++++----
 3 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/ui/app/components/license-banners.js b/ui/app/components/license-banners.js
index 2aeea556d900..2839a3a29421 100644
--- a/ui/app/components/license-banners.js
+++ b/ui/app/components/license-banners.js
@@ -47,6 +47,8 @@ export default class LicenseBanners extends Component {
 
   @action
   dismissBanner(dismissAction) {
+    // if a client's version changed their old localStorage key will still exists.
+    localStorage.cleanUpStorage('dismiss-license-banner', `dismiss-license-banner-${this.currentVersion}`);
     // updates localStorage and then updates the template by calling updateDismissType
     localStorage.setItem(`dismiss-license-banner-${this.currentVersion}`, dismissAction);
     this.updateDismissType(dismissAction);
diff --git a/ui/app/lib/local-storage.js b/ui/app/lib/local-storage.js
index 86556835c7f8..de091c750031 100644
--- a/ui/app/lib/local-storage.js
+++ b/ui/app/lib/local-storage.js
@@ -15,4 +15,13 @@ export default {
   keys() {
     return Object.keys(window.localStorage);
   },
+
+  cleanUpStorage(string, keyToKeep) {
+    const relevantKeys = this.keys().filter((str) => str.startsWith(string));
+    relevantKeys.forEach((key) => {
+      if (key !== keyToKeep) {
+        localStorage.removeItem(key);
+      }
+    });
+  },
 };
diff --git a/ui/tests/integration/components/license-banners-test.js b/ui/tests/integration/components/license-banners-test.js
index d44a315276b1..918a5770f873 100644
--- a/ui/tests/integration/components/license-banners-test.js
+++ b/ui/tests/integration/components/license-banners-test.js
@@ -79,10 +79,9 @@ module('Integration | Component | license-banners', function (hooks) {
     localStorage.removeItem(`dismiss-license-banner-1.13.1+ent`);
   });
 
-  test('it renders a banner if the vault license has changed', async function (assert) {
-    assert.expect(1);
+  test('it renders a banner if the vault license has changed meep', async function (assert) {
+    assert.expect(3);
     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]');
@@ -92,7 +91,17 @@ module('Integration | Component | license-banners', function (hooks) {
       .dom('[data-test-license-banner-warning]')
       .exists('The warning banner shows even though we have dismissed it earlier.');
 
-    localStorage.removeItem(`dismiss-license-banner-1.12.1+ent`);
+    await click('[data-test-dismiss-warning]');
+    const localStorageResultNewVersion = JSON.parse(
+      localStorage.getItem(`dismiss-license-banner-1.13.1+ent`)
+    );
+    const localStorageResultOldVersion = JSON.parse(
+      localStorage.getItem(`dismiss-license-banner-1.12.1+ent`)
+    );
+    // check that localStorage was cleaned and no longer contains the old license storage key
+    assert.strictEqual(localStorageResultOldVersion, null);
+    assert.strictEqual(localStorageResultNewVersion, 'warning');
+    // if debugging this tests remember to clear localStorage if the test was not run to completion.
     localStorage.removeItem(`dismiss-license-banner-1.13.1+ent`);
   });
 });

From a5a731c62caeaea42f0d4e7c1d50da5e4e512ec5 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Mon, 13 Feb 2023 14:24:44 -0700
Subject: [PATCH 17/20] comment clean up

---
 ui/tests/integration/components/license-banners-test.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/tests/integration/components/license-banners-test.js b/ui/tests/integration/components/license-banners-test.js
index 918a5770f873..532a2885c969 100644
--- a/ui/tests/integration/components/license-banners-test.js
+++ b/ui/tests/integration/components/license-banners-test.js
@@ -98,10 +98,10 @@ module('Integration | Component | license-banners', function (hooks) {
     const localStorageResultOldVersion = JSON.parse(
       localStorage.getItem(`dismiss-license-banner-1.12.1+ent`)
     );
-    // check that localStorage was cleaned and no longer contains the old license storage key
+    // Check that localStorage was cleaned and no longer contains the old license storage key.
     assert.strictEqual(localStorageResultOldVersion, null);
     assert.strictEqual(localStorageResultNewVersion, 'warning');
-    // if debugging this tests remember to clear localStorage if the test was not run to completion.
+    // If debugging this test remember to clear localStorage if the test was not run to completion.
     localStorage.removeItem(`dismiss-license-banner-1.13.1+ent`);
   });
 });

From ced67406ef2bbb3380d8a2fd872050db25daa438 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Mon, 13 Feb 2023 14:25:44 -0700
Subject: [PATCH 18/20] another comment clean up

---
 ui/tests/integration/components/license-banners-test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/tests/integration/components/license-banners-test.js b/ui/tests/integration/components/license-banners-test.js
index 532a2885c969..1919b5351056 100644
--- a/ui/tests/integration/components/license-banners-test.js
+++ b/ui/tests/integration/components/license-banners-test.js
@@ -98,7 +98,7 @@ module('Integration | Component | license-banners', function (hooks) {
     const localStorageResultOldVersion = JSON.parse(
       localStorage.getItem(`dismiss-license-banner-1.12.1+ent`)
     );
-    // Check that localStorage was cleaned and no longer contains the old license storage key.
+    // Check that localStorage was cleaned and no longer contains the old version storage key.
     assert.strictEqual(localStorageResultOldVersion, null);
     assert.strictEqual(localStorageResultNewVersion, 'warning');
     // If debugging this test remember to clear localStorage if the test was not run to completion.

From 06882d62ddfa6512e1e4b219d5ca617d31a5ed96 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Mon, 13 Feb 2023 14:27:55 -0700
Subject: [PATCH 19/20] remove meep

---
 ui/tests/integration/components/license-banners-test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/tests/integration/components/license-banners-test.js b/ui/tests/integration/components/license-banners-test.js
index 1919b5351056..d2159a7613bb 100644
--- a/ui/tests/integration/components/license-banners-test.js
+++ b/ui/tests/integration/components/license-banners-test.js
@@ -79,7 +79,7 @@ module('Integration | Component | license-banners', function (hooks) {
     localStorage.removeItem(`dismiss-license-banner-1.13.1+ent`);
   });
 
-  test('it renders a banner if the vault license has changed meep', async function (assert) {
+  test('it renders a banner if the vault license has changed', async function (assert) {
     assert.expect(3);
     this.version.version = '1.12.1+ent';
     this.set('expiry', formatRFC3339(NEXT_MONTH));

From c9c54ffcea65a5c90563afa3cab5529d81eec1aa Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Tue, 14 Feb 2023 09:33:53 -0700
Subject: [PATCH 20/20] add test coverage for new method in localStorage

---
 ui/app/lib/local-storage.js             |  3 +-
 ui/tests/unit/lib/local-storage-test.js | 47 +++++++++++++++++++++++++
 2 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 ui/tests/unit/lib/local-storage-test.js

diff --git a/ui/app/lib/local-storage.js b/ui/app/lib/local-storage.js
index de091c750031..5447118e3281 100644
--- a/ui/app/lib/local-storage.js
+++ b/ui/app/lib/local-storage.js
@@ -17,8 +17,9 @@ export default {
   },
 
   cleanUpStorage(string, keyToKeep) {
+    if (!string) return;
     const relevantKeys = this.keys().filter((str) => str.startsWith(string));
-    relevantKeys.forEach((key) => {
+    relevantKeys?.forEach((key) => {
       if (key !== keyToKeep) {
         localStorage.removeItem(key);
       }
diff --git a/ui/tests/unit/lib/local-storage-test.js b/ui/tests/unit/lib/local-storage-test.js
new file mode 100644
index 000000000000..9d22fb3fe07a
--- /dev/null
+++ b/ui/tests/unit/lib/local-storage-test.js
@@ -0,0 +1,47 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+import LocalStorage from 'vault/lib/local-storage';
+
+module('Unit | lib | local-storage', function (hooks) {
+  setupTest(hooks);
+
+  hooks.beforeEach(function () {
+    window.localStorage.clear();
+  });
+
+  test('it does not error if nothing is in local storage', async function (assert) {
+    assert.expect(1);
+    assert.strictEqual(
+      LocalStorage.cleanUpStorage('something', 'something-key'),
+      undefined,
+      'returns undefined and does not throw an error when method is called and nothing exist in localStorage.'
+    );
+  });
+
+  test('it does not remove anything in localStorage that does not start with the string or we have specified to keep.', async function (assert) {
+    assert.expect(3);
+    LocalStorage.setItem('string-key-remove', 'string-key-remove-value');
+    LocalStorage.setItem('beep-boop-bop-key', 'beep-boop-bop-value');
+    LocalStorage.setItem('string-key', 'string-key-value');
+    const storageLengthBefore = window.localStorage.length;
+    LocalStorage.cleanUpStorage('string', 'string-key');
+    const storageLengthAfter = window.localStorage.length;
+    assert.strictEqual(
+      storageLengthBefore - storageLengthAfter,
+      1,
+      'the method should only remove one key from localStorage.'
+    );
+    assert.strictEqual(
+      LocalStorage.getItem('string-key'),
+      'string-key-value',
+      'the key we asked to keep still exists in localStorage.'
+    );
+    assert.strictEqual(
+      LocalStorage.getItem('string-key-remove'),
+      null,
+      'the key we did not specify to keep was removed from localStorage.'
+    );
+    // clear storage
+    window.localStorage.clear();
+  });
+});