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>

app/javascript/dashboard/i18n/locale/en/contact.json

@@ -33,7 +33,8 @@
       "LABEL_SELECT": {
         "TITLE": "Add Labels",
         "PLACEHOLDER": "Search labels",
-        "NO_RESULT": "No labels found"
+        "NO_RESULT": "No labels found",
+        "CREATE_LABEL": "Create new label"
       }
     },
     "MERGE_CONTACT": "Merge contact",

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() {

app/javascript/dashboard/store/modules/labels.js

@@ -45,7 +45,10 @@ export const actions = {
     commit(types.SET_LABEL_UI_FLAG, { isFetching: true });
     try {
       const response = await LabelsAPI.get(true);
-      commit(types.SET_LABELS, response.data.payload);
+      const sortedLabels = response.data.payload.sort((a, b) =>
+        a.title.localeCompare(b.title)
+      );
+      commit(types.SET_LABELS, sortedLabels);
     } catch (error) {
       // Ignore error
     } finally {