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/shared/components/ui/label/LabelDropdown.vue

@@ -1,8 +1,11 @@
 <template>
   <div class="dropdown-search-wrap">
-    <h4 class="text-block-title">
-      {{ $t('CONTACT_PANEL.LABELS.LABEL_SELECT.TITLE') }}
-    </h4>
+    <div class="dropdown-title-container">
+      <h4 class="text-block-title">
+        {{ $t('CONTACT_PANEL.LABELS.LABEL_SELECT.TITLE') }}
+      </h4>
+      <hotkey>L</hotkey>
+    </div>
     <div class="search-wrap">
       <input
         ref="searchbar"
@@ -28,6 +31,31 @@
         <div v-if="noResult" class="no-result">
           {{ $t('CONTACT_PANEL.LABELS.LABEL_SELECT.NO_RESULT') }}
         </div>
+        <div v-if="allowCreation && shouldShowCreate" class="new-label">
+          <woot-button
+            size="small"
+            variant="clear"
+            color-scheme="secondary"
+            icon="add"
+            is-expanded
+            class="button-new-label"
+            :is-disabled="hasExactMatchInResults"
+            @click="showCreateModal"
+          >
+            {{ createLabelPlaceholder }}
+            {{ parsedSearch }}
+          </woot-button>
+
+          <woot-modal
+            :show.sync="createModalVisible"
+            :on-close="hideCreateModal"
+          >
+            <add-label-modal
+              :prefill-title="parsedSearch"
+              @close="hideCreateModal"
+            />
+          </woot-modal>
+        </div>
       </div>
     </div>
   </div>
@@ -35,9 +63,16 @@
 
 <script>
 import LabelDropdownItem from './LabelDropdownItem';
+import Hotkey from 'dashboard/components/base/Hotkey';
+import AddLabelModal from 'dashboard/routes/dashboard/settings/labels/AddLabel';
+import { picoSearch } from '@scmmishra/pico-search';
+import { sanitizeLabel } from 'shared/helpers/sanitizeData';
+
 export default {
   components: {
     LabelDropdownItem,
+    AddLabelModal,
+    Hotkey,
   },
 
   props: {
@@ -49,23 +84,49 @@ export default {
       type: Array,
       default: () => [],
     },
+    allowCreation: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   data() {
     return {
       search: '',
+      createModalVisible: false,
     };
   },
 
   computed: {
+    createLabelPlaceholder() {
+      const label = this.$t('CONTACT_PANEL.LABELS.LABEL_SELECT.CREATE_LABEL');
+      return this.search ? `${label}:` : label;
+    },
+
     filteredActiveLabels() {
-      return this.accountLabels.filter(label => {
-        return label.title.toLowerCase().includes(this.search.toLowerCase());
+      if (!this.search) return this.accountLabels;
+
+      return picoSearch(this.accountLabels, this.search, ['title'], {
+        threshold: 0.9,
       });
     },
 
     noResult() {
-      return this.filteredActiveLabels.length === 0 && this.search !== '';
+      return this.filteredActiveLabels.length === 0;
+    },
+
+    hasExactMatchInResults() {
+      return this.filteredActiveLabels.some(
+        label => label.title === this.search
+      );
+    },
+
+    shouldShowCreate() {
+      return this.allowCreation && this.filteredActiveLabels.length < 3;
+    },
+
+    parsedSearch() {
+      return sanitizeLabel(this.search);
     },
   },
 
@@ -97,11 +158,35 @@ export default {
         this.onAdd(label);
       }
     },
+
+    showCreateModal() {
+      this.createModalVisible = true;
+    },
+
+    hideCreateModal() {
+      this.createModalVisible = false;
+    },
   },
 };
 </script>
 
 <style lang="scss" scoped>
+.dropdown-title-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--space-smaller);
+
+  .text-block-title {
+    flex-grow: 1;
+    margin: 0;
+  }
+
+  .hotkey {
+    flex-shrink: 0;
+  }
+}
+
 .dropdown-search-wrap {
   display: flex;
   flex-direction: column;
@@ -124,7 +209,7 @@ export default {
     }
 
     input:focus {
-      border: 1px solid var(--w-500);
+      outline: 1px solid var(--color-border-dark);
     }
   }
 
@@ -143,9 +228,30 @@ export default {
       display: flex;
       justify-content: center;
       color: var(--s-700);
-      padding: var(--space-smaller) var(--space-one);
+      padding: var(--space-normal) var(--space-one);
       font-weight: var(--font-weight-medium);
-      font-size: var(--font-size-small);
+      font-size: var(--font-size-mini);
+    }
+
+    .new-label {
+      display: flex;
+      padding-top: var(--space-smaller);
+      border-top: 1px solid var(--s-100);
+
+      .button-new-label {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        align-items: center;
+
+        .icon {
+          min-width: 0;
+        }
+      }
+
+      .search-term {
+        color: var(--s-700);
+      }
     }
   }
 }

app/javascript/shared/helpers/KeyboardHelpers.js

@@ -106,6 +106,11 @@ export const hasPressedCommandPlusKKey = e => {
   return e.metaKey && e.keyCode === 75;
 };
 
+/**
+ * Returns a string representation of the hotkey pattern based on the provided event object.
+ * @param {KeyboardEvent} e - The keyboard event object.
+ * @returns {string} - The hotkey pattern string.
+ */
 export const buildHotKeys = e => {
   const key = e.key.toLowerCase();
   if (['shift', 'meta', 'alt', 'control'].includes(key)) {
@@ -127,3 +132,30 @@ export const buildHotKeys = e => {
   hotKeyPattern += key;
   return hotKeyPattern;
 };
+
+/**
+ * Determines whether the active element is typeable.
+ *
+ * @param {KeyboardEvent} e - The keyboard event object.
+ * @returns {boolean} `true` if the active element is typeable, `false` otherwise.
+ *
+ * @example
+ * document.addEventListener('keydown', e => {
+ *   if (isActiveElementTypeable(e)) {
+ *     handleTypeableElement(e);
+ *   }
+ * });
+ */
+export const isActiveElementTypeable = e => {
+  /** @type {HTMLElement | null} */
+  // @ts-ignore
+  const activeElement = e.target || document.activeElement;
+
+  return !!(
+    activeElement?.tagName === 'INPUT' ||
+    activeElement?.tagName === 'NINJA-KEYS' ||
+    activeElement?.tagName === 'TEXTAREA' ||
+    activeElement?.contentEditable === 'true' ||
+    activeElement?.className?.includes('ProseMirror')
+  );
+};

app/javascript/shared/helpers/sanitizeData.js

@@ -0,0 +1,22 @@
+export const labelSanitizePattern = /[^a-zA-Z0-9_-]/g;
+export const spacesPattern = /\s+/g;
+
+/**
+ * Sanitizes a label by removing unwanted characters and replacing spaces with hyphens.
+ *
+ * @param {string | undefined | null} label - The label to sanitize.
+ * @returns {string} The sanitized label.
+ *
+ * @example
+ * const label = 'My Label 123';
+ * const sanitizedLabel = sanitizeLabel(label); // 'my-label-123'
+ */
+export const sanitizeLabel = (label = '') => {
+  if (!label) return '';
+
+  return label
+    .trim()
+    .toLowerCase()
+    .replace(spacesPattern, '-')
+    .replace(labelSanitizePattern, '');
+};

app/javascript/shared/helpers/specs/KeyboardHelpers.spec.js

@@ -4,6 +4,7 @@ import {
   hasPressedShift,
   hasPressedCommand,
   buildHotKeys,
+  isActiveElementTypeable,
 } from '../KeyboardHelpers';
 
 describe('#KeyboardHelpers', () => {
@@ -39,3 +40,37 @@ describe('#KeyboardHelpers', () => {
     });
   });
 });
+
+describe('isActiveElementTypeable', () => {
+  it('should return true if the active element is an input element', () => {
+    const event = { target: document.createElement('input') };
+    const result = isActiveElementTypeable(event);
+    expect(result).toBe(true);
+  });
+
+  it('should return true if the active element is a textarea element', () => {
+    const event = { target: document.createElement('textarea') };
+    const result = isActiveElementTypeable(event);
+    expect(result).toBe(true);
+  });
+
+  it('should return true if the active element is a contentEditable element', () => {
+    const element = document.createElement('div');
+    element.contentEditable = 'true';
+    const event = { target: element };
+    const result = isActiveElementTypeable(event);
+    expect(result).toBe(true);
+  });
+
+  it('should return false if the active element is not typeable', () => {
+    const event = { target: document.createElement('div') };
+    const result = isActiveElementTypeable(event);
+    expect(result).toBe(false);
+  });
+
+  it('should return false if the active element is null', () => {
+    const event = { target: null };
+    const result = isActiveElementTypeable(event);
+    expect(result).toBe(false);
+  });
+});

app/javascript/shared/helpers/specs/sanitizeData.spec.js

@@ -0,0 +1,44 @@
+import { sanitizeLabel } from '../sanitizeData';
+
+describe('sanitizeLabel', () => {
+  it('should return an empty string when given an empty string', () => {
+    const label = '';
+    const sanitizedLabel = sanitizeLabel(label);
+    expect(sanitizedLabel).toEqual('');
+  });
+
+  it('should remove leading and trailing whitespace', () => {
+    const label = '  My Label  ';
+    const sanitizedLabel = sanitizeLabel(label);
+    expect(sanitizedLabel).toEqual('my-label');
+  });
+
+  it('should convert all characters to lowercase', () => {
+    const label = 'My Label';
+    const sanitizedLabel = sanitizeLabel(label);
+    expect(sanitizedLabel).toEqual('my-label');
+  });
+
+  it('should replace spaces with hyphens', () => {
+    const label = 'My Label 123';
+    const sanitizedLabel = sanitizeLabel(label);
+    expect(sanitizedLabel).toEqual('my-label-123');
+  });
+
+  it('should remove any characters that are not alphanumeric, underscore, or hyphen', () => {
+    const label = 'My_Label!123';
+    const sanitizedLabel = sanitizeLabel(label);
+    expect(sanitizedLabel).toEqual('my_label123');
+  });
+
+  it('should handle null and undefined input', () => {
+    const nullLabel = null;
+    const undefinedLabel = undefined;
+
+    // @ts-ignore - intentionally passing null and undefined to test
+    const sanitizedNullLabel = sanitizeLabel(nullLabel);
+    const sanitizedUndefinedLabel = sanitizeLabel(undefinedLabel);
+    expect(sanitizedNullLabel).toEqual('');
+    expect(sanitizedUndefinedLabel).toEqual('');
+  });
+});

app/javascript/shared/mixins/eventListenerMixins.js

@@ -1,4 +1,4 @@
-import { isEscape } from '../helpers/KeyboardHelpers';
+import { isActiveElementTypeable, isEscape } from '../helpers/KeyboardHelpers';
 
 export default {
   mounted() {
@@ -9,13 +9,9 @@ export default {
   },
   methods: {
     onKeyDownHandler(e) {
-      const isEventFromAnInputBox =
-        e.target?.tagName === 'INPUT' || e.target?.tagName === 'TEXTAREA';
-      const isEventFromProseMirror = e.target?.className?.includes(
-        'ProseMirror'
-      );
+      const isTypeable = isActiveElementTypeable(e);
 
-      if (isEventFromAnInputBox || isEventFromProseMirror) {
+      if (isTypeable) {
         if (isEscape(e)) {
           e.target.blur();
         }