[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

@@ -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>

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;

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');