UI: Make resultant-acl banner dismissable (#25106)

changelog/25106.txt

@@ -0,0 +1,3 @@
+```release-note:bug
+ui: Allows users to dismiss the resultant-acl banner.
+```

ui/app/components/resultant-acl-banner.hbs

@@ -3,23 +3,31 @@
   SPDX-License-Identifier: BUSL-1.1
 ~}}
 
-<Hds::Alert @type="inline" @color="critical" data-test-resultant-acl-banner as |A|>
-  <A.Title>Resultant ACL check failed</A.Title>
-  <A.Description>
-    {{if
-      @isEnterprise
-      "You do not have access to resources in this namespace."
-      "Links might be shown that you don't have access to. Contact your administrator to update your policy."
-    }}
-  </A.Description>
-  {{#if @isEnterprise}}
-    <A.Link::Standalone
-      @icon="arrow-right"
-      @iconPosition="trailing"
-      @text={{concat "Log into " this.ns " namespace"}}
-      @route="vault.cluster.logout"
-      @query={{this.queryParams}}
-      data-test-resultant-acl-reauthenticate
-    />
-  {{/if}}
-</Hds::Alert>
+{{#unless this.hideBanner}}
+  <Hds::Alert
+    @type="inline"
+    @color="critical"
+    @onDismiss={{fn (mut this.hideBanner) true}}
+    data-test-resultant-acl-banner
+    as |A|
+  >
+    <A.Title>Resultant ACL check failed</A.Title>
+    <A.Description>
+      {{if
+        @isEnterprise
+        "You do not have access to resources in this namespace."
+        "Links might be shown that you don't have access to. Contact your administrator to update your policy."
+      }}
+    </A.Description>
+    {{#if @isEnterprise}}
+      <A.Link::Standalone
+        @icon="arrow-right"
+        @iconPosition="trailing"
+        @text={{concat "Log into " this.ns " namespace"}}
+        @route="vault.cluster.logout"
+        @query={{this.queryParams}}
+        data-test-resultant-acl-reauthenticate
+      />
+    {{/if}}
+  </Hds::Alert>
+{{/unless}}

ui/app/components/resultant-acl-banner.js

@@ -5,10 +5,12 @@
 
 import { service } from '@ember/service';
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 
 export default class ResultantAclBannerComponent extends Component {
   @service namespace;
   @service router;
+  @tracked hideBanner = false;
 
   get ns() {
     return this.namespace.path || 'root';

ui/tests/integration/components/resultant-acl-banner-test.js

@@ -5,7 +5,7 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'vault/tests/helpers';
-import { render } from '@ember/test-helpers';
+import { click, render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 
 module('Integration | Component | resultant-acl-banner', function (hooks) {
@@ -44,4 +44,11 @@ module('Integration | Component | resultant-acl-banner', function (hooks) {
       .dom('[data-test-resultant-acl-reauthenticate]')
       .hasText('Log into root namespace', 'Shows reauth link with default namespace');
   });
+
+  test('it goes away when dismiss button clicked', async function (assert) {
+    await render(hbs`<ResultantAclBanner />`);
+    assert.dom('[data-test-resultant-acl-banner]').exists('Shows banner initially');
+    await click('.hds-dismiss-button');
+    assert.dom('[data-test-resultant-acl-banner]').doesNotExist('Hides banner after dismiss');
+  });
 });