backport of commit 9c44587

ui/packages/consul-ui/app/helpers/policy/typeof.js

@@ -6,6 +6,7 @@
 import { helper } from '@ember/component/helper';
 import { get } from '@ember/object';
 const MANAGEMENT_ID = '00000000-0000-0000-0000-000000000001';
+const READ_ONLY_ID = '00000000-0000-0000-0000-000000000002';
 export function typeOf(params, hash) {
   const item = params[0];
   const template = get(item, 'template');
@@ -18,6 +19,8 @@ export function typeOf(params, hash) {
       return 'policy-node-identity';
     case get(item, 'ID') === MANAGEMENT_ID:
       return 'policy-management';
+    case get(item, 'ID') === READ_ONLY_ID:
+      return 'read-only';
     default:
       return 'policy';
   }

ui/packages/consul-ui/app/templates/dc/acls/policies/edit.hbs

@@ -75,15 +75,26 @@ as |dc partition nspace id item create|}}
             </dl>
         </div>
   {{/if}}
-  {{#if (eq (policy/typeof item) 'policy-management')}}
-    <Hds::Alert @type="inline" @icon="star-fill" class="mb-3 mt-2" as |A|>
-      <A.Title>Management</A.Title>
-      <A.Description>This global-management token is built into Consul's policy system. You can apply this special policy to tokens for full access. This policy is not editable or removeable, but can be ignored by not applying it to any tokens.</A.Description>
-      <A.Link::Standalone @text='Learn more'
-                          @href="{{env 'CONSUL_DOCS_URL'}}/guides/acl.html#builtin-policies"
-                          @icon='docs-link'
-                          @iconPosition='trailing' />
-    </Hds::Alert>
+  {{#if (or (eq (policy/typeof item) 'policy-management') (eq (policy/typeof item) 'read-only'))}}
+    {{#if (eq (policy/typeof item) 'policy-management')}}
+      <Hds::Alert @type="inline" @icon="star-fill" class="mb-3 mt-2" as |A|>
+        <A.Title>Management</A.Title>
+        <A.Description>This global-management token is built into Consul's policy system. You can apply this special policy to tokens for full access. This policy is not editable or removeable, but can be ignored by not applying it to any tokens.</A.Description>
+        <A.Link::Standalone @text='Learn more'
+                            @href="{{env 'CONSUL_DOCS_URL'}}/guides/acl.html#builtin-policies"
+                            @icon='docs-link'
+                            @iconPosition='trailing' />
+      </Hds::Alert>
+    {{else}}
+      <Hds::Alert @type="inline" @icon="star-fill" class="mb-3 mt-2" as |A|>
+        <A.Title>Read-only</A.Title>
+        <A.Description>This global-read-only token is built into Consul's policy system. You can apply this special policy to tokens for full access. This policy is not editable or removeable, but can be ignored by not applying it to any tokens.</A.Description>
+        <A.Link::Standalone @text='Learn more'
+                            @href="{{env 'CONSUL_DOCS_URL'}}/guides/acl.html#builtin-policies"
+                            @icon='docs-link'
+                            @iconPosition='trailing' />
+      </Hds::Alert>
+    {{/if}}
     <div class="definition-table">
       <dl>
         <dt>Name</dt>

ui/packages/consul-ui/tests/acceptance/dc/acls/policies/view-read-only.feature

@@ -0,0 +1,20 @@
+@setupApplicationTest
+Feature: dc / acls / policies / view read-only policy: Readonly management policy
+  Background:
+    Given 1 datacenter model with the value "datacenter"
+    And 1 policy model from yaml
+    ---
+      ID: 00000000-0000-0000-0000-000000000002
+    ---
+  Scenario:
+    When I visit the policy page for yaml
+    ---
+      dc: datacenter
+      policy: 00000000-0000-0000-0000-000000000002
+    ---
+    Then the url should be /datacenter/acls/policies/00000000-0000-0000-0000-000000000002
+    Then I see the text "View Policy" in "h1"
+    Then I don't see confirmDelete
+    Then I don't see cancel
+    And I see tokens
+

ui/packages/consul-ui/tests/integration/helpers/policy/typeof-test.js

@@ -12,11 +12,11 @@ module('Integration | Helper | policy/typeof', function (hooks) {
   setupRenderingTest(hooks);
 
   // Replace this with your real tests.
-  test('it renders', async function (assert) {
-    this.set('inputValue', '1234');
+  test('it render read-only cluster', async function (assert) {
+    this.set('inputValue', { ID: '00000000-0000-0000-0000-000000000002' });
 
     await render(hbs`{{policy/typeof inputValue}}`);
 
-    assert.equal(this.element.textContent.trim(), 'role');
+    assert.equal(this.element.textContent.trim(), 'read-only');
   });
 });