From dd833d9a3649402e23ced070121e0d0c131f610e Mon Sep 17 00:00:00 2001
From: Valeriia Ruban <valeriia.ruban@hashicorp.com>
Date: Wed, 21 Feb 2024 09:56:53 -0800
Subject: [PATCH] =?UTF-8?q?feat:=20add=20alert=20to=20link=20to=20hcp=20mo?=
 =?UTF-8?q?dal=20to=20ask=20a=20user=20refresh=20a=20page;=20up=E2=80=A6?=
 =?UTF-8?q?=20(#20682)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

feat: add alert to link to hcp modal to ask a user refresh a page; updated document link
---
 .../consul-ui/app/components/link-to-hcp-modal/index.hbs    | 5 ++++-
 .../consul-ui/app/components/link-to-hcp-modal/index.scss   | 4 ++++
 .../tests/integration/components/link-to-hcp-modal-test.js  | 6 ++++++
 3 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/ui/packages/consul-ui/app/components/link-to-hcp-modal/index.hbs b/ui/packages/consul-ui/app/components/link-to-hcp-modal/index.hbs
index 312a16b7ffc7..623049fdf16f 100644
--- a/ui/packages/consul-ui/app/components/link-to-hcp-modal/index.hbs
+++ b/ui/packages/consul-ui/app/components/link-to-hcp-modal/index.hbs
@@ -20,7 +20,7 @@
                                |G|>
         <G.Legend>Select cluster access mode before linking</G.Legend>
         <G.HelperText>Control the level of access that HCP Consul Central has to your linked cluster.
-          <Hds::Link::Inline @href="https://developer.hashicorp.com/consul/docs/security/acl" @isHrefExternal={{true}}
+          <Hds::Link::Inline @href="https://developer.hashicorp.com/hcp/docs/consul/concepts/cluster-permissions" @isHrefExternal={{true}}
                              @color="secondary">Learn more
           </Hds::Link::Inline>
         </G.HelperText>
@@ -89,6 +89,9 @@
           {{/if}}
         </div>
       {{/if}}
+      <Hds::Alert class="link-to-hcp-modal__refresh-page-alert" @type="compact" data-test-link-to-hcp-modal-refresh-page-alert as |A|>
+        <A.Description>After you link your cluster to HCP, close this modal and refresh the page.</A.Description>
+      </Hds::Alert>
     </M.Body>
     <M.Footer as |F|>
       <Hds::ButtonSet>
diff --git a/ui/packages/consul-ui/app/components/link-to-hcp-modal/index.scss b/ui/packages/consul-ui/app/components/link-to-hcp-modal/index.scss
index 9850cac56bfc..75af67613d42 100644
--- a/ui/packages/consul-ui/app/components/link-to-hcp-modal/index.scss
+++ b/ui/packages/consul-ui/app/components/link-to-hcp-modal/index.scss
@@ -7,6 +7,10 @@
   &__no-acls-alert {
     margin-bottom: 16px;
   }
+  &__refresh-page-alert {
+    margin-top: 16px;
+    margin-bottom: 8px;
+  }
   &__generate-token {
     display: flex;
     flex-direction: column;
diff --git a/ui/packages/consul-ui/tests/integration/components/link-to-hcp-modal-test.js b/ui/packages/consul-ui/tests/integration/components/link-to-hcp-modal-test.js
index 746317bfddc5..f7ed600d0e33 100644
--- a/ui/packages/consul-ui/tests/integration/components/link-to-hcp-modal-test.js
+++ b/ui/packages/consul-ui/tests/integration/components/link-to-hcp-modal-test.js
@@ -14,6 +14,7 @@ import { BlockingEventSource as RealEventSource } from 'consul-ui/utils/dom/even
 import { ACCESS_LEVEL } from 'consul-ui/components/link-to-hcp-modal';
 
 const modalSelector = '[data-test-link-to-hcp-modal]';
+const modalRefreshPageAlertSelector = '[data-test-link-to-hcp-modal-refresh-page-alert]';
 const modalNoACLsAlertSelector = '[data-test-link-to-hcp-modal-no-acls-alert]';
 const modalOptionReadOnlySelector = '#accessMode-readonly';
 const modalOptionReadOnlyErrorSelector = '[data-test-link-to-hcp-modal-access-level-options-error]';
@@ -88,6 +89,7 @@ module('Integration | Component | link-to-hcp-modal', function (hooks) {
 
     assert.dom(modalSelector).exists({ count: 1 });
     assert.dom(`${modalSelector} ${modalNoACLsAlertSelector}`).doesNotExist();
+    assert.dom(`${modalSelector} ${modalRefreshPageAlertSelector}`).isVisible();
 
     // select read-only
     await click(`${modalSelector} ${modalOptionReadOnlySelector}`);
@@ -186,6 +188,8 @@ module('Integration | Component | link-to-hcp-modal', function (hooks) {
 
     assert.dom(modalSelector).exists({ count: 1 });
     assert.dom(`${modalSelector} ${modalNoACLsAlertSelector}`).doesNotExist();
+    assert.dom(`${modalSelector} ${modalRefreshPageAlertSelector}`).isVisible();
+
     // select read-only
     await click(`${modalSelector} ${modalOptionReadOnlySelector}`);
 
@@ -213,6 +217,8 @@ module('Integration | Component | link-to-hcp-modal', function (hooks) {
 
     assert.dom(modalSelector).exists({ count: 1 });
     assert.dom(`${modalSelector} ${modalNoACLsAlertSelector}`).isVisible();
+    assert.dom(`${modalSelector} ${modalRefreshPageAlertSelector}`).isVisible();
+
     // select read-only
     await click(`${modalSelector} ${modalOptionReadOnlySelector}`);