Harmony 1978 - Add/create label from jobs page of workflow ui

services/harmony/app/frontends/labels.ts

@@ -14,7 +14,7 @@ import { keysToLowerCase } from '../util/object';
  * @param req - The request sent by the client
  * @param res - The response to send to the client
  * @param next - The next function in the call chain
- * @returns Resolves when the request is complete
+ * @returns Resolves when the request is complete, returning labels on success
  */
 export async function addJobLabels(
   req: HarmonyRequest, res: Response, next: NextFunction,
@@ -28,7 +28,7 @@ export async function addJobLabels(
     });
 
     res.status(201);
-    res.send('OK');
+    res.send({ labels: req.body.label });
   } catch (e) {
     req.context.logger.error(e);
     next(e);

services/harmony/app/frontends/workflow-ui.ts

@@ -102,21 +102,27 @@ function parseQuery( /* eslint-disable @typescript-eslint/no-explicit-any */
     tableQuery.allowUsers = !(requestQuery.disallowuser === 'on');
     tableQuery.allowProviders = !(requestQuery.disallowprovider === 'on');
     const selectedOptions: { field: string, dbValue: string, value: string }[] = JSON.parse(requestQuery.tablefilter);
+
     const validStatusSelections = selectedOptions
       .filter(option => option.field === 'status' && Object.values<string>(statusEnum).includes(option.dbValue));
     const statusValues = validStatusSelections.map(option => option.dbValue);
+
     const validServiceSelections = selectedOptions
       .filter(option => option.field === 'service' && serviceNames.includes(option.dbValue));
     const serviceValues = validServiceSelections.map(option => option.dbValue);
+
     const validUserSelections = selectedOptions
       .filter(option => isAdminAccess && /^user: [A-Za-z0-9\.\_]{4,30}$/.test(option.value));
     const userValues = validUserSelections.map(option => option.value.split('user: ')[1]);
+
     const validLabelSelections = selectedOptions
       .filter(option => /^label: .{1,100}$/.test(option.value));
-    const labelValues = validLabelSelections.map(option => option.value.split('label: ')[1].toLowerCase());
+    const labelValues = validLabelSelections.map(option => option.dbValue || option.value.split('label: ')[1].toLowerCase());
+
     const validProviderSelections = selectedOptions
       .filter(option => /^provider: [A-Za-z0-9_]{1,100}$/.test(option.value));
     const providerValues = validProviderSelections.map(option => option.value.split('provider: ')[1].toLowerCase());
+
     if ((statusValues.length + serviceValues.length + userValues.length + providerValues.length) > maxFilters) {
       throw new RequestValidationError(`Maximum amount of filters (${maxFilters}) was exceeded.`);
     }
@@ -209,6 +215,9 @@ function jobRenderingFunctions(logger: Logger, requestQuery: Record<string, any>
         return this.request;
       }
     },
+    jobLabels(): string {
+      return  JSON.stringify(this.labels || []);
+    },
     jobLabelsDisplay(): string {
       return this.labels.map((label) => {
         const labelText = truncateString(label, 30);

services/harmony/app/middleware/label.ts

@@ -23,13 +23,6 @@ export default async function handleLabelParameter(
   // If 'label' exists, convert it to an array (if not already) and assign it to 'label' in the body
   if (label) {
     const labels = parseMultiValueParameter(label);
-    for (const lbl of labels) {
-      if (lbl.indexOf(',') > -1) {
-        res.status(400);
-        res.send('Labels cannot contain commas');
-        return;
-      }
-    }
     const normalizedLabels = labels.map(normalizeLabel);
     for (const lbl of normalizedLabels) {
       if (lbl === '') {

services/harmony/app/models/job.ts

@@ -499,11 +499,11 @@ export class Job extends DBRecord implements JobRecord {
     includeLabels = false,
   ): Promise<{ data: Job[]; pagination: ILengthAwarePagination }> {
     let query;
-
+    const labelDelimiter = '*&%$#';
     if (includeLabels) {
       if (constraints.labels) { // Requesting to limit the jobs based on the provided labels
         query = tx(Job.table)
-          .select(`${Job.table}.*`, tx.raw(`STRING_AGG(${LABELS_TABLE}.value, ',' order by value) AS label_values`))
+          .select(`${Job.table}.*`, tx.raw(`STRING_AGG(${LABELS_TABLE}.value, '${labelDelimiter}' order by value) AS label_values`))
           .leftOuterJoin(`${JOBS_LABELS_TABLE}`, `${Job.table}.jobID`, '=', `${JOBS_LABELS_TABLE}.job_id`)
           .leftOuterJoin(`${LABELS_TABLE}`, `${JOBS_LABELS_TABLE}.label_id`, '=', `${LABELS_TABLE}.id`)
           // Subquery that filters to get the list of jobIDs that match any of the provided labels
@@ -524,7 +524,7 @@ export class Job extends DBRecord implements JobRecord {
           .modify((queryBuilder) => modifyQuery(queryBuilder, constraints));
       } else {
         query = tx(Job.table)
-          .select(`${Job.table}.*`, tx.raw(`STRING_AGG(${LABELS_TABLE}.value, ',' order by value) AS label_values`))
+          .select(`${Job.table}.*`, tx.raw(`STRING_AGG(${LABELS_TABLE}.value, '${labelDelimiter}' order by value) AS label_values`))
           .leftOuterJoin(`${JOBS_LABELS_TABLE}`, `${Job.table}.jobID`, '=', `${JOBS_LABELS_TABLE}.job_id`)
           .leftOuterJoin(`${LABELS_TABLE}`, `${JOBS_LABELS_TABLE}.label_id`, '=', `${LABELS_TABLE}.id`)
           .where(setTableNameForWhereClauses(Job.table, constraints.where))
@@ -550,7 +550,7 @@ export class Job extends DBRecord implements JobRecord {
     const jobs: Job[] = items.data.map((j: JobWithLabels) => {
       const job = new Job(j);
       if (includeLabels && j.label_values) {
-        job.labels = j.label_values.split(',');
+        job.labels = j.label_values.split(labelDelimiter);
       } else {
         job.labels = [];
       }

services/harmony/app/models/label.ts

@@ -31,10 +31,10 @@ export function checkLabel(label: string): string {
  * Trim the whitespace from the beginning/end of a label and convert it to lowercase
  *
  * @param label - the label to normalize
- * @returns - label converted to lowercase with leading/trailing whitespace trimmed and commas removed
+ * @returns - label converted to lowercase with leading/trailing whitespace trimmed
  */
 export function normalizeLabel(label: string): string {
-  return label.trim().toLowerCase().replaceAll(',', '');
+  return label.trim().toLowerCase();
 }
 
 /**

services/harmony/app/views/workflow-ui/jobs/index.mustache.html

@@ -41,15 +41,16 @@
                     <!-- job state change links will go here -->
                      {{^isAdminRoute}}
                      {{#jobs.length}}
-                     {{#labels.length}}
                     <li id="label-nav-item" class="nav-item dropstart d-none">
                         <a id="label-dropdown-a" class="nav-link dropdown-toggle py-0 px-2" data-bs-toggle="dropdown" data-bs-auto-close="outside" href="#" role="button" aria-expanded="false">label</a>
-                        <ul class="dropdown-menu mt-2">
-                            <li class="mx-2 mb-2">
-                                <input type="text" class="form-control" id="label-search" placeholder="label name">
+                        <ul id="label-dropdown-menu" class="dropdown-menu mt-2">
+                            <li class="mx-2">
+                                <input type="text" class="form-control" id="label-search" placeholder="label name" maxlength="255">
                             </li>
-                            <li id="no-match-li" class="fw-light text-center fs-6" style="display: none;"><i>no matches</i></li>
-                            <li>
+                            <li id="no-match-li" class="fw-light text-center fs-6 mx-2 mt-2" style="display: none;">
+                                <a href="#" id="create-label-link">Create Label</a>
+                            </li>
+                            <li id="labels-li" style="display: none;">
                                 <ul id="labels-list">
                                 {{#labels}}
                                 <li class="label-li"><a class="dropdown-item label-item text-truncate" name="{{.}}" data-value="{{.}}" href="#">{{.}}</a></li>
@@ -58,7 +59,6 @@
                             </li>
                         </ul>
                     </li>
-                    {{/labels.length}}
                     {{/jobs.length}}
                     {{/isAdminRoute}}
                 </ul>

services/harmony/app/views/workflow-ui/request-preview.mustache.html

@@ -4,7 +4,7 @@
             data-truncated="{{jobRequestIsTruncated}}"></i>
         <span title="{{jobRequest}}" class="text-muted job-url-text">{{jobRequestDisplay}}</span>
     </div>
-    <div class="ml-1" id="job-labels-display-{{jobID}}" data-labels="{{labels}}">
+    <div class="ml-1" id="job-labels-display-{{jobID}}" data-labels="{{jobLabels}}">
         {{{jobLabelsDisplay}}}
     </div>
 </div>

services/harmony/public/css/workflow-ui/default.css

@@ -74,4 +74,16 @@
 
 .label-li {
     max-width: 200px;
+}
+
+#label-dropdown-menu {
+    max-width: 40vw;
+}
+
+#create-label-link {
+    word-wrap: break-word;
+}
+
+.toast, .toast-container {
+    z-index: 1021;
 }

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

@@ -26,7 +26,7 @@ if (isAdminRoute) {
 params.dateKind = document.getElementById('dateKindUpdated').checked ? 'updatedAt' : 'createdAt';
 params.sortGranules = document.getElementById('sort-granules').value;
 
-jobsTable.init(params);
+const tagInputPromise = jobsTable.init(params);
 
 const jobStatusLinks = new JobsStatusChangeLinks();
 jobStatusLinks.init('job-state-links-container', 'job-selected');
@@ -35,5 +35,5 @@ toasts.init();
 
 const labelDropdown = document.getElementById('label-dropdown-a');
 if (labelDropdown) {
-  labels.init();
+  labels.init(tagInputPromise);
 }

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
@@ -9,12 +9,13 @@ let statuses = [];
 
 /**
  * Build the jobs filter with filter facets like 'status' and 'user'.
-  * @param {string} currentUser - the current Harmony user
-  * @param {string[]} services - service names from services.yml
-  * @param {string[]} providers - array of provider ids
-  * @param {string[]} labels - known job labels
-  * @param {boolean} isAdminRoute - whether the current page is /admin/...
-  * @param {object[]} tableFilter - initial tags that will populate the input
+ * @param {string} currentUser - the current Harmony user
+ * @param {string[]} services - service names from services.yml
+ * @param {string[]} providers - array of provider ids
+ * @param {string[]} labels - known job labels
+ * @param {boolean} isAdminRoute - whether the current page is /admin/...
+ * @param {object[]} tableFilter - initial tags that will populate the input
+ * @returns the tag input instance
  */
 function initFilter(currentUser, services, providers, labels, isAdminRoute, tableFilter) {
   const filterInput = document.querySelector('input[name="tableFilter"]');
@@ -33,14 +34,15 @@ 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((label) => ({ value: `label: ${label}`, dbValue: label, field: 'label' }));
+  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' });
   }
   const allowedValues = allowedList.map((t) => t.value);
   const tagInput = new Tagify(filterInput, {
     whitelist: allowedList,
+    delimiters: null, // prevent characters like "," from triggering input submission
     validate(tag) {
       if (allowedValues.includes(tag.value)
         || /^provider: [A-Za-z0-9_]{1,100}$/.test(tag.value)
@@ -60,9 +62,26 @@ 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);
+
+  return tagInput;
 }
 
 /**
@@ -231,17 +250,27 @@ const jobsTable = {
    * tzOffsetMinutes - offset from UTC
    * dateKind - updatedAt or createdAt
    * sortGranules - sort the rows ascending ('asc') or descending ('desc')
+   * @returns the tag input instance
    */
   async init(params) {
     PubSub.subscribe(
       'row-state-change',
       async () => loadRows(params),
     );
     formatDates('.date-td');
-    initFilter(params.currentUser, params.services, params.providers, params.labels, params.isAdminRoute, params.tableFilter);
+    const tagInput = initFilter(
+      params.currentUser,
+      params.services,
+      params.providers,
+      params.labels,
+      params.isAdminRoute,
+      params.tableFilter,
+    );
     initCopyHandler('.copy-request');
     initSelectHandler('.select-job');
     initSelectAllHandler();
+
+    return tagInput;
   },
 
   /**