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|>
Select cluster access mode before linking
Control the level of access that HCP Consul Central has to your linked cluster.
- Learn more
@@ -89,6 +89,9 @@
{{/if}}
{{/if}}
+
+ After you link your cluster to HCP, close this modal and refresh the page.
+
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}`);