feat: add alert to link to hcp modal to ask a user refresh a page; up… (#20682)

feat: add alert to link to hcp modal to ask a user refresh a page; updated document link

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>

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;

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