Feat: Pass validation severity into UI

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 @@
  }
  }
  }
-}
+}

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>

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: []
  }
  }

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;
+}

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 }}
 >

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));

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 {