From fd148aad86df34b08a388b4c306e9347ef04cbe5 Mon Sep 17 00:00:00 2001
From: Phil Renaud <phil.renaud@hashicorp.com>
Date: Wed, 17 Aug 2022 14:44:22 -0400
Subject: [PATCH] Variables-specific keyboard commands (#14165)

* Variables-specific keyboard commands

* Auto-focus the edit button when landing on a variable page, if its available
---
 ui/app/components/variable-paths.hbs          | 11 ++++++++++-
 ui/app/services/keyboard.js                   |  5 +++++
 ui/app/templates/components/gutter-menu.hbs   |  2 +-
 ui/app/templates/variables/variable/index.hbs | 12 ++++++++++++
 4 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/ui/app/components/variable-paths.hbs b/ui/app/components/variable-paths.hbs
index e4aea29bd..2d96754d9 100644
--- 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
index 1a9e077ec..78a6cc5af 100644
--- 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
index 215680212..561dea7dc 100644
--- 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
index 4919b8c24..68ded16aa 100644
--- 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"}}