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