feat: multiple UX improvements to labels (#7358)

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>

app/javascript/dashboard/components/base/Hotkey.vue

@@ -0,0 +1,25 @@
+<template>
+  <kbd class="hotkey">
+    <slot />
+  </kbd>
+</template>
+
+<style lang="scss">
+kbd.hotkey {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  user-select: none;
+  justify-content: center;
+  padding: var(--space-micro);
+  min-width: var(--space-normal);
+  font-size: var(--font-size-micro);
+  border-radius: var(--space-smaller);
+  background-color: var(--color-background);
+  border: 1px solid var(--color-border);
+  text-transform: uppercase;
+  color: var(--color-body);
+  letter-spacing: var(--space-micro);
+  line-height: var(--font-size-micro);
+}
+</style>

app/javascript/dashboard/components/widgets/LabelSelector.vue

@@ -20,6 +20,7 @@
           v-if="showSearchDropdownLabel"
           :account-labels="allLabels"
           :selected-labels="selectedLabels"
+          :allow-creation="isAdmin"
           @add="addItem"
           @remove="removeItem"
         />
@@ -30,8 +31,15 @@
 
 <script>
 import AddLabel from 'shared/components/ui/dropdown/AddLabel';
+import eventListenerMixins from 'shared/mixins/eventListenerMixins';
 import LabelDropdown from 'shared/components/ui/label/LabelDropdown';
 import { mixin as clickaway } from 'vue-clickaway';
+import adminMixin from 'dashboard/mixins/isAdmin';
+import {
+  buildHotKeys,
+  isEscape,
+  isActiveElementTypeable,
+} from 'shared/helpers/KeyboardHelpers';
 
 export default {
   components: {
@@ -39,7 +47,7 @@ export default {
     LabelDropdown,
   },
 
-  mixins: [clickaway],
+  mixins: [clickaway, adminMixin, eventListenerMixins],
 
   props: {
     allLabels: {
@@ -80,6 +88,18 @@ export default {
     closeDropdownLabel() {
       this.showSearchDropdownLabel = false;
     },
+
+    handleKeyEvents(e) {
+      const keyPattern = buildHotKeys(e);
+
+      if (keyPattern === 'l' && !isActiveElementTypeable(e)) {
+        this.toggleLabels();
+        e.preventDefault();
+      } else if (isEscape(e) && this.showSearchDropdownLabel) {
+        this.closeDropdownLabel();
+        e.preventDefault();
+      }
+    },
   },
 };
 </script>