Better format error messages on the metadata page

app/components/workflow-metadata/index.js

@@ -141,7 +141,7 @@ export default class WorkflowMetadata extends Component {
         target: ENV.APP.rootElement,
         type: 'error',
         title: 'Form Validation Error',
-        html: this.validationErrorMsg(metadataSchema.getErrors()),
+        html: metadataSchema.getErrorMessage(),
       });
       return;
     }

app/services/metadata-schema.js

@@ -118,7 +118,7 @@ export default class MetadataSchemaService extends Service {
 
     if (readonly && readonly.length > 0) {
       /**
-       * For each key in the data object, if they are marked as "read only",
+       * For each key in the data object, if they are marked as "read only"
        * set the field's 'readonly' to true, and 'toolbarSticky' to false iff the
        * key refers to an array
        */
@@ -183,6 +183,41 @@ export default class MetadataSchemaService extends Service {
     return this.validator.errors;
   }
 
+  /**
+   * Turn a property returned by something like Ajv into its title.
+   * Ideally this would be looked up in the schema instead, but the general case is complicated.
+   */
+  getPropertyTitle(property) {
+    // ab-cd -> abCd
+    let title = property.replace(/-\w/g, (s) => s.charAt(1).toUpperCase());
+
+    // Clean out non-word characters
+    title = property.replace(/\W/g, '');
+
+    // Turn into words
+    title = title.replace(/[A-Z]/g, (s) => ' ' + s).trim();
+
+    // Capitalize first word
+    title = title.charAt(0).toUpperCase() + title.slice(1);
+
+    return title;
+  }
+
+  /**
+   * Return a human readable message describing validation errorss.
+   */
+  getErrorMessage() {
+    return this.validator.errors
+      .map((error) => {
+        if (error.keyword === 'required') {
+          return 'Missing required metadata: ' + this.getPropertyTitle(error.params.missingProperty);
+        } else {
+          return error.message;
+        }
+      })
+      .join(', ');
+  }
+
   /**
    * Get all unique field names across a set of schema. This includes any unique field
    * in schema referenced in the 'allOf' validation sections, unless otherwise specified.

tests/acceptance/nih-submission-test.js

@@ -453,7 +453,7 @@ module('Acceptance | submission', function (hooks) {
     await click('.alpaca-form-button-Next');
 
     await waitFor('#swal2-content');
-    assert.dom('#swal2-content').includesText("should have required property 'author'");
+    assert.dom('#swal2-content').includesText('Missing required metadata: Author');
 
     // Some reason, setting the document query to a variable before clicking works,
     // but calling the query selector in the click does not work
@@ -592,7 +592,7 @@ module('Acceptance | submission', function (hooks) {
     await click('.alpaca-form-button-Next');
 
     await waitFor('#swal2-content');
-    assert.dom('#swal2-content').includesText("should have required property 'author'");
+    assert.dom('#swal2-content').includesText('Missing required metadata: Author');
 
     const confirmBtn = '.swal2-confirm';
     assert.ok(confirmBtn, 'No SweetAlert OK button found');