fix: 🐛 Add missing code block description (#3277)

* fix: 🐛 Add missing code block description

* feat: 🎸 Add autocomplete on empty lines

addons/core/translations/resources/en-us.yaml

@@ -611,6 +611,7 @@ role:
     title: Grant
     title_plural: Grants
     description: Grants are permissions which allow roles to take actions and access resources.
+    codeblock-description: Select "{editGrantsTitle}" to add or modify grants. Select "{addGrantTemplatesTitle}" to add in templates.
     actions:
       create: New Grant
   grant-templates:
@@ -725,7 +726,7 @@ role:
         invalid-field-for-type: Invalid output field "{field}" for type "{type}"
     editor:
       title: Grant Editor
-      description: Add each new grant string on a different line
+      description: Add each new grant string on a different line. Press Ctrl+Space to get suggestions.
     string-formats:
       title_plural: String formats
       syntax: Syntax

ui/admin/app/components/form/role/edit-grants/index.js

@@ -10,6 +10,7 @@ import { tracked } from '@glimmer/tracking';
 import {
   autocompletion,
   completionKeymap,
+  startCompletion,
   keymap,
   EditorView,
   linter,
@@ -180,6 +181,10 @@ export default class FormRoleEditGrantsComponent extends Component {
         if (update.docChanged) {
           this.grantStringsText = update.state.doc.toString();
         }
+        // Trigger autocomplete when we're on an empty line
+        if (line.text === '') {
+          startCompletion(update.view);
+        }
       }
     }),
     linter(this.linterSource),

ui/admin/app/components/form/role/grants/index.hbs

@@ -5,7 +5,15 @@
 
 <Hds::Layout::Flex as |F|>
   <F.Item @basis='66%'>
-    <Hds::CodeBlock class='grant-codeblock' @value={{this.grants}} />
+    <Hds::CodeBlock class='grant-codeblock' @value={{this.grants}} as |CB|>
+      <CB.Description>{{t
+          'resources.role.grant.codeblock-description'
+          editGrantsTitle=(t 'resources.role.edit-grants.title')
+          addGrantTemplatesTitle=(t
+            'resources.role.grant-templates.actions.add-grant-templates'
+          )
+        }}</CB.Description>
+    </Hds::CodeBlock>
   </F.Item>
 </Hds::Layout::Flex>