chor: adds informative error message when acls disabled and read-only… (#20600)

* adds informative error message when acls disabled and read-only selected

* adds alert to the modal when there is no acls enabled

ui/packages/consul-ui/app/components/link-to-hcp-modal/index.hbs

@@ -10,6 +10,12 @@
       Link to HCP Consul Central
     </M.Header>
     <M.Body>
+      {{#if (not (can "read acls"))}}
+        <Hds::Alert class="link-to-hcp-modal__no-acls-alert" @type="inline" @color="critical" data-test-link-to-hcp-modal-no-acls-alert as |A|>
+          <A.Title>ACLs are disabled on this cluster.</A.Title>
+          <A.Description>The cluster can only be linked with read/write access.</A.Description>
+        </Hds::Alert>
+      {{/if}}
       <Hds::Form::Radio::Group data-test-link-to-hcp-modal-access-level-options @layout="vertical" @name="accessMode" as
                                |G|>
         <G.Legend>Select cluster access mode before linking</G.Legend>
@@ -33,8 +39,11 @@
             with the “builtin/global-read-only” policy in the next step.
           </F.HelperText>
         </G.Radio::Field>
+        {{#if (and this.isReadOnlyAccessLevelSelected (not (can "read acls")))}}
+          <G.Error data-test-link-to-hcp-modal-access-level-options-error>ACLs are disabled on this cluster and are required for read-only access.</G.Error>
+        {{/if}}
       </Hds::Form::Radio::Group>
-      {{#if (and this.isReadOnlyAccessLevelSelected (can "create tokens"))}}
+      {{#if (and this.isReadOnlyAccessLevelSelected (can "read acls") (can "create tokens"))}}
         <div class="link-to-hcp-modal__generate-token">
           {{#if  globalReadonlyPolicy.data}}
             <p class="hds-typography-display-100 hds-font-weight-medium font-family-sans-display">

ui/packages/consul-ui/app/components/link-to-hcp-modal/index.scss

@@ -4,6 +4,9 @@
  */
 
 .link-to-hcp-modal {
+  &__no-acls-alert {
+    margin-bottom: 16px;
+  }
   &__generate-token {
     display: flex;
     flex-direction: column;

ui/packages/consul-ui/tests/integration/components/link-to-hcp-modal-test.js

@@ -14,7 +14,9 @@ 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 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]';
 const modalGenerateTokenCardSelector = '[data-test-link-to-hcp-modal-generate-token-card]';
 const modalGenerateTokenCardValueSelector =
   '[data-test-link-to-hcp-modal-generate-token-card-value]';
@@ -60,6 +62,9 @@ module('Integration | Component | link-to-hcp-modal', function (hooks) {
           if (permission === 'create tokens') {
             return true;
           }
+          if (permission === 'read acls') {
+            return true;
+          }
         }
       }
     );
@@ -85,6 +90,8 @@ module('Integration | Component | link-to-hcp-modal', function (hooks) {
                                      @partition="-" />`);
 
     assert.dom(modalSelector).exists({ count: 1 });
+    assert.dom(`${modalSelector} ${modalNoACLsAlertSelector}`).doesNotExist();
+
     // select read-only
     await click(`${modalSelector} ${modalOptionReadOnlySelector}`);
 
@@ -181,6 +188,7 @@ module('Integration | Component | link-to-hcp-modal', function (hooks) {
                                      @partition="-" />`);
 
     assert.dom(modalSelector).exists({ count: 1 });
+    assert.dom(`${modalSelector} ${modalNoACLsAlertSelector}`).doesNotExist();
     // select read-only
     await click(`${modalSelector} ${modalOptionReadOnlySelector}`);
 
@@ -189,4 +197,31 @@ module('Integration | Component | link-to-hcp-modal', function (hooks) {
     // Missed policy alert is visible
     assert.dom(`${modalSelector} ${modalGenerateTokenMissedPolicyAlertSelector}`).isVisible();
   });
+
+  test('it shows an error wher read-only selected and acls are disabled', async function (assert) {
+    this.owner.register(
+      'service:abilities',
+      class Stub extends Service {
+        can(permission) {
+          if (permission === 'read acls') {
+            return false;
+          }
+        }
+      }
+    );
+
+    await render(hbs`<LinkToHcpModal @dc="dc-1"
+                                     @nspace="default"
+                                     @partition="-" />`);
+
+    assert.dom(modalSelector).exists({ count: 1 });
+    assert.dom(`${modalSelector} ${modalNoACLsAlertSelector}`).isVisible();
+    // select read-only
+    await click(`${modalSelector} ${modalOptionReadOnlySelector}`);
+
+    // when read-only selected and no policy, it doesn't show the generate token button
+    assert.dom(`${modalSelector} ${modalGenerateTokenButtonSelector}`).doesNotExist();
+    // No acls enabled error is presented
+    assert.dom(`${modalSelector} ${modalOptionReadOnlyErrorSelector}`).isVisible();
+  });
 });