Variables-specific keyboard commands (#14165)

* Variables-specific keyboard commands * Auto-focus the edit button when landing on a variable page, if its available
hashicorp · Aug 17, 2022 · fd148aa · fd148aa
1 parent 3bf5633
commit fd148aa
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 2 deletions.
diff --git a/ui/app/components/variable-paths.hbs b/ui/app/components/variable-paths.hbs
@@ -13,7 +13,12 @@
   <tbody>
     {{#each this.folders as |folder|}}
       <tr data-test-folder-row {{on "click" (fn this.handleFolderClick folder.data.absolutePath)}}>
-        <td colspan="3">
+        <td colspan="3"
+          {{keyboard-shortcut 
+            enumerated=true
+            action=(fn this.handleFolderClick folder.data.absolutePath)
+          }}
+        >
           <span>
             <FlightIcon @name="folder" />
             <LinkTo @route="variables.path" @model={{folder.data.absolutePath}} @query={{hash namespace="*"}}>
@@ -29,6 +34,10 @@
         data-test-file-row
         {{on "click" (fn this.handleFileClick file)}}
         class={{if (can "read variable" path=file.absoluteFilePath namespace=file.variable.namespace) "" "inaccessible"}}
+        {{keyboard-shortcut 
+          enumerated=true
+          action=(fn this.handleFileClick file)
+        }}
       >
         <td>
           <FlightIcon @name="file-text" />

diff --git a/ui/app/services/keyboard.js b/ui/app/services/keyboard.js
@@ -72,6 +72,7 @@ export default class KeyboardService extends Service {
   defaultPatterns = {
     'Go to Jobs': ['g', 'j'],
     'Go to Storage': ['g', 'r'],
+    'Go to Variables': ['g', 'v'],
     'Go to Servers': ['g', 's'],
     'Go to Clients': ['g', 'c'],
     'Go to Topology': ['g', 't'],
@@ -100,6 +101,10 @@ export default class KeyboardService extends Service {
         action: () => this.router.transitionTo('csi.volumes'),
         rebindable: true,
       },
+      {
+        label: 'Go to Variables',
+        action: () => this.router.transitionTo('variables'),
+      },
       {
         label: 'Go to Servers',
         action: () => this.router.transitionTo('servers'),

diff --git a/ui/app/templates/components/gutter-menu.hbs b/ui/app/templates/components/gutter-menu.hbs
@@ -70,7 +70,7 @@
           </LinkTo>
         </li>
         {{#if (can "list variables")}}
-        <li>
+        <li {{keyboard-shortcut menuLevel=true pattern=(array "g" "v") }}>
           <LinkTo
             @route="variables"
             @activeClass="is-active"

diff --git a/ui/app/templates/variables/variable/index.hbs b/ui/app/templates/variables/variable/index.hbs
@@ -3,6 +3,11 @@
     <FlightIcon @name="file-text" />
     {{this.model.path}}
     <Toggle
+      {{keyboard-shortcut 
+        label="Toggle View (JSON/List)"
+        pattern=(array "j")
+        action=(action this.toggleView)
+      }}
       data-test-memory-toggle
       @isActive={{eq this.view "json"}}
       @onToggle={{action this.toggleView}}
@@ -14,6 +19,7 @@
       {{#if (can "write variable" path=this.model.path namespace=this.model.namespace)}}
       <div class="two-step-button">
         <LinkTo
+          {{autofocus}}
           data-test-edit-button
           class="button is-info is-inverted is-small"
           @model={{this.model}}
@@ -87,6 +93,12 @@
               class="show-hide-values button is-borderless is-compact"
               type="button"
               {{on "click" (action this.toggleRowVisibility row.model)}}
+              {{keyboard-shortcut 
+                label="Toggle Variable Visibility"
+                pattern=(array "v")
+                action=(action this.toggleRowVisibility row.model)
+              }}
+
             >
               <FlightIcon
                 @name={{if row.model.isVisible "eye" "eye-off"}}