From a30a7e6bdf46ebfc492cb5a4cdab865f1262f946 Mon Sep 17 00:00:00 2001
From: Phil Renaud <phil.renaud@hashicorp.com>
Date: Tue, 17 Jan 2023 12:08:41 -0500
Subject: [PATCH] [ui] Keyboard shortcuts for widening and narrowing task
 sidebar (#15807)

* keyboard-commands helper to add widen and narrow commands

* Percy flake fix
---
 ui/app/components/task-context-sidebar.hbs |  5 +++++
 ui/app/components/task-context-sidebar.js  | 12 ++++++++++++
 ui/tests/acceptance/task-logs-test.js      |  5 ++++-
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/ui/app/components/task-context-sidebar.hbs b/ui/app/components/task-context-sidebar.hbs
index a8dd65f5e..e594e20c4 100644
--- a/ui/app/components/task-context-sidebar.hbs
+++ b/ui/app/components/task-context-sidebar.hbs
@@ -89,6 +89,11 @@
 			type="button"
 			{{on "click" this.toggleWide}}
 		>
+			{{#if this.wide}}
+				{{keyboard-commands (array this.narrowCommand)}}
+			{{else}}
+				{{keyboard-commands (array this.widenCommand)}}
+			{{/if}}
 			{{x-icon (if this.wide "arrow-right" "arrow-left")}}
 		</button>
 	</div>
diff --git a/ui/app/components/task-context-sidebar.js b/ui/app/components/task-context-sidebar.js
index 38491094c..1b9a35695 100644
--- a/ui/app/components/task-context-sidebar.js
+++ b/ui/app/components/task-context-sidebar.js
@@ -16,6 +16,18 @@ export default class TaskContextSidebarComponent extends Component {
     },
   ];
 
+  narrowCommand = {
+    label: 'Narrow Sidebar',
+    pattern: ['ArrowRight', 'ArrowRight'],
+    action: () => this.toggleWide(),
+  };
+
+  widenCommand = {
+    label: 'Widen Sidebar',
+    pattern: ['ArrowLeft', 'ArrowLeft'],
+    action: () => this.toggleWide(),
+  };
+
   @tracked wide = false;
   @action toggleWide() {
     this.wide = !this.wide;
diff --git a/ui/tests/acceptance/task-logs-test.js b/ui/tests/acceptance/task-logs-test.js
index 0f53c0ebe..5d12a92e7 100644
--- a/ui/tests/acceptance/task-logs-test.js
+++ b/ui/tests/acceptance/task-logs-test.js
@@ -85,7 +85,10 @@ module('Acceptance | task logs', function (hooks) {
       .dom('.task-context-sidebar h1.title')
       .includesText(task.state, 'Task state is correctly displayed');
     await percySnapshot(assert, {
-      percyCSS: '.allocation-row td { display: none; }',
+      percyCSS: `
+        .allocation-row td { display: none; }
+        .task-events table td:nth-child(1) { color: transparent; }
+      `,
     });
 
     await click('.sidebar button.close');