HARMONY-1978: Trim labels that are too long

services/harmony/public/js/workflow-ui/jobs/jobs-table.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-param-reassign */
-import { formatDates, initCopyHandler } from '../table.js';
+import { formatDates, initCopyHandler, trimForDisplay } from '../table.js';
 import PubSub from '../../pub-sub.js';
 
 // all of the currently selected job IDs
@@ -34,10 +34,7 @@ function initFilter(currentUser, services, providers, labels, isAdminRoute, tabl
   allowedList.push(...serviceList);
   const providerList = providers.map((provider) => ({ value: `provider: ${provider}`, dbValue: provider, field: 'provider' }));
   allowedList.push(...providerList);
-  const labelList = labels.map((l) => {
-    const lDisplay = l.length < 15 ? l : `${l.slice(0, 12)}...`;
-    return ({ value: `label: ${lDisplay}`, dbValue: l, field: 'label', searchBy: l });
-  });
+  const labelList = labels.map((label) => ({ value: `label: ${trimForDisplay(label, 30)}`, dbValue: label, field: 'label', searchBy: label }));
   allowedList.push(...labelList);
   if (isAdminRoute) {
     allowedList.push({ value: `user: ${currentUser}`, dbValue: currentUser, field: 'user' });
@@ -64,6 +61,21 @@ function initFilter(currentUser, services, providers, labels, isAdminRoute, tabl
       enabled: 0,
       closeOnSelect: true,
     },
+    templates: {
+      tag(tagData) {
+        return `<tag title="${tagData.dbValue}"
+            contenteditable='false'
+            spellcheck='false'
+            tabIndex="${this.settings.a11y.focusableTags ? 0 : -1}"
+            class="${this.settings.classNames.tag}"
+            ${this.getAttributes(tagData)}>
+          <x title='' class="${this.settings.classNames.tagX}" role='button' aria-label='remove tag'></x>
+          <div>
+              <span class="${this.settings.classNames.tagText}">${trimForDisplay(tagData.value.split(': ')[1], 20)}</span>
+          </div>
+        </tag>`;
+      },
+    },
   });
   const initialTags = JSON.parse(tableFilter);
   tagInput.addTags(initialTags);

services/harmony/public/js/workflow-ui/labels.js

@@ -2,6 +2,7 @@
 import jobsTable from './jobs/jobs-table.js';
 import toasts from './toasts.js';
 import PubSub from '../pub-sub.js';
+import { trimForDisplay } from './table.js';
 
 // eslint-disable-next-line import/no-mutable-exports
 let labelsModule;
@@ -22,7 +23,7 @@ async function handleLabelsResponse(res, insertNew, successMessage, tagInput) {
     if (insertNew) {
       const label = (await res.json()).labels[0];
       labelsModule.insertNewLabelAlphabetically(label);
-      const newTag = { value: `label: ${label}`, dbValue: label, field: 'label' };
+      const newTag = { value: `label: ${trimForDisplay(label, 30)}`, dbValue: label, field: 'label', searchBy: label };
       tagInput.whitelist.push(newTag);
     }
     toasts.showUpper(successMessage);

services/harmony/public/js/workflow-ui/table.js

@@ -76,11 +76,25 @@ async function initCopyHandler(selector) {
   });
 }
 
+/**
+ * If the string is longer than n, trim it to n-3 and add ellipsis
+ * @param {string} str - the string to trim if it exceeds n
+ * @param {*} n - trim to n chars and append ...
+ * @returns trimmed string
+ */
+function trimForDisplay(str, n) {
+  if (!str) {
+    return '';
+  }
+  return str.length < n ? str : `${str.slice(0, n - 3)}...`;
+}
+
 /**
  * Utility for commonly used table logic.
  */
 export {
   formatDates,
   initTooltips,
   initCopyHandler,
+  trimForDisplay,
 };