feat: pass validation severity into UI (#416)

Pass validation severity into UI, see discussion #369 and issues #148 and #150
josdejong · Mar 27, 2024 · 6cd6af9 · 6cd6af9
1 parent abf0468
commit 6cd6af9
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 13 deletions.
diff --git a/src/lib/components/controls/ValidationErrorsOverview.scss b/src/lib/components/controls/ValidationErrorsOverview.scss
@@ -3,8 +3,6 @@
 .jse-validation-errors-overview {
   font-family: $font-family-mono;
   font-size: $font-size-mono;
-  background: $message-warning-background;
-  color: $message-warning-color;
   overflow: auto;
   max-height: $errors-overview-max-height;
 
@@ -15,8 +13,26 @@
     tr {
       cursor: pointer;
 
+      &.jse-validation-error {
+        background: $message-error-background;
+        color: $message-error-color;
+      }
+
+      &.jse-validation-warning {
+        background: $message-warning-background;
+        color: $message-warning-color;
+        &:hover {
+          filter: brightness(105%);
+        }
+      }
+
+      &.jse-validation-info {
+        background: $message-info-background;
+        color: $message-info-color;
+      }
+
       &:hover {
-        background-color: rgba(255, 255, 255, 0.1);
+        filter: brightness(110%);
       }
 
       td {
@@ -55,4 +71,4 @@
       }
     }
   }
-}
+}
diff --git a/src/lib/components/controls/ValidationErrorsOverview.svelte b/src/lib/components/controls/ValidationErrorsOverview.svelte
@@ -9,7 +9,7 @@
   import { isEmpty } from 'lodash-es'
   import Icon from 'svelte-awesome'
   import { stringifyJSONPath } from '$lib/utils/pathUtils.js'
-  import type { ValidationError } from '$lib/types.js'
+  import { ValidationSeverity, type ValidationError } from '$lib/types.js'
   import { MAX_VALIDATION_ERRORS } from '$lib/constants.js'
   import { limit } from '$lib/utils/arrayUtils.js'
 
@@ -27,6 +27,17 @@
   function expand() {
     expanded = true
   }
+
+  function getValidationClass(errors: ValidationError[]): string {
+    if (errors.some(e => e.severity === ValidationSeverity.error)) {
+      return 'error';
+    } else if (errors.some(e => e.severity === ValidationSeverity.warning)) {
+      return 'warning';
+    } else if (errors.some(e => e.severity === ValidationSeverity.info)) {
+      return 'info';
+    }
+    return '';
+  }
 </script>
 
 {#if !isEmpty(validationErrors)}
@@ -36,7 +47,7 @@
         <tbody>
           {#each limit(validationErrors, MAX_VALIDATION_ERRORS) as validationError, index}
             <tr
-              class="jse-validation-error"
+            class="jse-validation-{validationError.severity}"
               on:click={() => {
                 // trigger on the next tick to prevent the editor not getting focus
                 setTimeout(() => selectError(validationError))
@@ -79,7 +90,7 @@
     {:else}
       <table class="jse-validation-errors-overview-collapsed">
         <tbody>
-          <tr class="jse-validation-error" on:click={expand}>
+          <tr class="jse-validation-{getValidationClass(validationErrors)}" on:click={expand}>
             <td class="jse-validation-error-icon">
               <Icon data={faExclamationTriangle} />
             </td>

diff --git a/src/lib/components/modes/textmode/TextMode.svelte b/src/lib/components/modes/textmode/TextMode.svelte
@@ -633,7 +633,7 @@
   }
 
   function toRichValidationError(validationError: ValidationError): RichValidationError {
-    const { path, message } = validationError
+    const { path, message, severity } = validationError
     const { line, column, from, to } = findTextLocation(normalization.escapeValue(text), path)
 
     return {
@@ -643,7 +643,7 @@
       from,
       to,
       message,
-      severity: ValidationSeverity.warning,
+      severity,
       actions: []
     }
   }

diff --git a/src/lib/components/modes/treemode/ValidationErrorIcon.scss b/src/lib/components/modes/treemode/ValidationErrorIcon.scss
@@ -9,5 +9,27 @@ button.jse-validation-error {
   vertical-align: top;
   display: inline-flex;
 
-  color: $warning-color;
+  color: $error-color;
+}
+
+button.jse-validation-info {
+  @include jsoneditor-button;
+
+  padding: 0;
+  margin: 0;
+  vertical-align: top;
+  display: inline-flex;
+
+  color: $info-color;
 }
+
+button.jse-validation-warning {
+  @include jsoneditor-button;
+
+  padding: 0;
+  margin: 0;
+  vertical-align: top;
+  display: inline-flex;
+
+  color: $warning-color;
+}
diff --git a/src/lib/components/modes/treemode/ValidationErrorIcon.svelte b/src/lib/components/modes/treemode/ValidationErrorIcon.svelte
@@ -19,7 +19,7 @@
 
 <button
   type="button"
-  class="jse-validation-error"
+  class="jse-validation-{validationError.severity}"
   on:click={onExpand}
   use:tooltip={{ text, ...absolutePopupContext }}
 >

diff --git a/src/lib/themes/defaults.scss b/src/lib/themes/defaults.scss
@@ -42,6 +42,7 @@ $text-readonly: var(--jse-text-readonly, #8d8d8d);
 $text-color-inverse: var(--jse-text-color-inverse, $white);
 $error-color: var(--jse-error-color, #ee5341);
 $warning-color: var(--jse-warning-color, #fdc539);
+$info-color: var(--jse-info-color, #4f91ff);
 
 /* main, menu, modal */
 $main-border: var(--jse-main-border, (1px solid #d7d7d7));

diff --git a/src/routes/examples/custom_validation/+page.svelte b/src/routes/examples/custom_validation/+page.svelte
@@ -56,7 +56,7 @@
 
       // check whether the team consists of exactly four members
       if (json.team.length !== 4) {
-        errors.push({ path: ['team'], message: 'A team must have 4 members', severity: 'warning' })
+        errors.push({ path: ['team'], message: 'A team must have 4 members', severity: 'error' })
       }
 
       // check whether there is at least one adult member in the team
@@ -67,7 +67,7 @@
         errors.push({
           path: ['team'],
           message: 'A team must have at least one adult person (age >= 18)',
-          severity: 'warning'
+          severity: 'info'
         })
       }
     } else {