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/routes/dashboard/conversation/labels/LabelBox.vue

@@ -30,6 +30,7 @@
               v-if="showSearchDropdownLabel"
               :account-labels="accountLabels"
               :selected-labels="savedLabels"
+              :allow-creation="isAdmin"
               @add="addLabelToConversation"
               @remove="removeLabelFromConversation"
             />
@@ -47,7 +48,14 @@ import Spinner from 'shared/components/Spinner';
 import LabelDropdown from 'shared/components/ui/label/LabelDropdown';
 import AddLabel from 'shared/components/ui/dropdown/AddLabel';
 import { mixin as clickaway } from 'vue-clickaway';
+import adminMixin from 'dashboard/mixins/isAdmin';
+import eventListenerMixins from 'shared/mixins/eventListenerMixins';
 import conversationLabelMixin from 'dashboard/mixins/conversation/labelMixin';
+import {
+  buildHotKeys,
+  isEscape,
+  isActiveElementTypeable,
+} from 'shared/helpers/KeyboardHelpers';
 
 export default {
   components: {
@@ -56,7 +64,7 @@ export default {
     AddLabel,
   },
 
-  mixins: [clickaway, conversationLabelMixin],
+  mixins: [clickaway, conversationLabelMixin, adminMixin, eventListenerMixins],
   props: {
     conversationId: {
       type: Number,
@@ -84,6 +92,17 @@ 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>

app/javascript/dashboard/routes/dashboard/settings/labels/AddLabel.vue

@@ -65,6 +65,12 @@ import { getRandomColor } from 'dashboard/helper/labelColor';
 
 export default {
   mixins: [alertMixin, validationMixin],
+  props: {
+    prefillTitle: {
+      type: String,
+      default: '',
+    },
+  },
   data() {
     return {
       color: '#000',
@@ -81,6 +87,7 @@ export default {
   },
   mounted() {
     this.color = getRandomColor();
+    this.title = this.prefillTitle.toLowerCase();
   },
   methods: {
     onClose() {