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