Return to full dashboard by pressing Esc

When the user is in the detail view of the hashboard,
allow user to press `Esc` to return to the full view.

app/assets/javascripts/lib/utils/keycodes.js

+// `e.keyCode` is deprecated, these values should be migrated
+// See: https://gitlab.com/gitlab-org/gitlab/-/issues/216102
+
 export const BACKSPACE_KEY_CODE = 8;
 export const ENTER_KEY_CODE = 13;
 export const ESC_KEY_CODE = 27;

app/assets/javascripts/lib/utils/keys.js

+/* eslint-disable @gitlab/require-i18n-strings */
+
+export const ESC_KEY = 'Escape';
+export const ESC_KEY_IE11 = 'Esc'; // https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

app/assets/javascripts/monitoring/components/dashboard.vue

@@ -19,6 +19,7 @@ import {
 import DashboardPanel from './dashboard_panel.vue';
 import { s__ } from '~/locale';
 import createFlash from '~/flash';
+import { ESC_KEY, ESC_KEY_IE11 } from '~/lib/utils/keys';
 import CustomMetricsFormFields from '~/custom_metrics/components/custom_metrics_form_fields.vue';
 import { mergeUrlParams, redirectTo, updateHistory } from '~/lib/utils/url_utility';
 import invalidUrl from '~/lib/utils/invalid_url';
@@ -248,6 +249,10 @@ export default {
       logsPath: this.logsPath,
       currentEnvironmentName: this.currentEnvironmentName,
     });
+    window.addEventListener('keyup', this.onKeyup);
+  },
+  destroyed() {
+    window.removeEventListener('keyup', this.onKeyup);
   },
   mounted() {
     if (!this.hasMetrics) {
@@ -371,13 +376,19 @@ export default {
     onGoBack() {
       this.clearExpandedPanel();
     },
+    onKeyup(event) {
+      const { key } = event;
+      if (key === ESC_KEY || key === ESC_KEY_IE11) {
+        this.clearExpandedPanel();
+      }
+    },
   },
   addMetric: {
     title: s__('Metrics|Add metric'),
     modalId: 'add-metric',
   },
   i18n: {
-    goBackLabel: s__('Metrics|Go back'),
+    goBackLabel: s__('Metrics|Go back (Esc)'),
   },
 };
 </script>

changelogs/unreleased/214882-esc-key-handler.yml

+---
+title: When viewing a single panel, return to a full dashboard by pressing the Escape
+  key
+merge_request: 30126
+author:
+type: added

locale/gitlab.pot

@@ -13138,7 +13138,7 @@ msgstr ""
 msgid "Metrics|For grouping similar metrics"
 msgstr ""
 
-msgid "Metrics|Go back"
+msgid "Metrics|Go back (Esc)"
 msgstr ""
 
 msgid "Metrics|Invalid time range, please verify."

spec/frontend/monitoring/components/dashboard_spec.js

 import { shallowMount, mount } from '@vue/test-utils';
 import Tracking from '~/tracking';
+import { ESC_KEY, ESC_KEY_IE11 } from '~/lib/utils/keys';
 import { GlModal, GlDropdownItem, GlDeprecatedButton } from '@gitlab/ui';
 import VueDraggable from 'vuedraggable';
 import MockAdapter from 'axios-mock-adapter';
@@ -248,6 +249,8 @@ describe('Dashboard', () => {
       let group;
       let panel;
 
+      const mockKeyup = key => window.dispatchEvent(new KeyboardEvent('keyup', { key }));
+
       const MockPanel = {
         template: `<div><slot name="topLeft"/></div>`,
       };
@@ -265,6 +268,9 @@ describe('Dashboard', () => {
           group,
           panel,
         });
+
+        jest.spyOn(store, 'dispatch');
+
         return wrapper.vm.$nextTick();
       });
 
@@ -289,17 +295,30 @@ describe('Dashboard', () => {
       });
 
       it('restores full dashboard by clicking `back`', () => {
-        const backBtn = wrapper.find({ ref: 'goBackBtn' });
-        expect(backBtn.exists()).toBe(true);
-
-        jest.spyOn(store, 'dispatch');
-        backBtn.vm.$emit('click');
+        wrapper.find({ ref: 'goBackBtn' }).vm.$emit('click');
 
         expect(store.dispatch).toHaveBeenCalledWith(
           'monitoringDashboard/clearExpandedPanel',
           undefined,
         );
       });
+
+      it('restores dashboard from full screen by typing the Escape key', () => {
+        mockKeyup(ESC_KEY);
+        expect(store.dispatch).toHaveBeenCalledWith(
+          `monitoringDashboard/clearExpandedPanel`,
+          undefined,
+        );
+      });
+
+      it('restores dashboard from full screen by typing the Escape key on IE11', () => {
+        mockKeyup(ESC_KEY_IE11);
+
+        expect(store.dispatch).toHaveBeenCalledWith(
+          `monitoringDashboard/clearExpandedPanel`,
+          undefined,
+        );
+      });
     });
   });