From ec2cc96aac91c9eb47d99894b3bfee9185ae73e7 Mon Sep 17 00:00:00 2001
From: anlinguist <an.linguist@gmail.com>
Date: Thu, 14 Mar 2024 11:19:04 -0600
Subject: [PATCH 1/2] feat(validation): pass validation severity into UI, see
 discussion #369 and issue # 148

---
 .../controls/ValidationErrorsOverview.scss    | 19 ++++++++++++---
 .../controls/ValidationErrorsOverview.svelte  |  4 ++--
 .../components/modes/textmode/TextMode.svelte |  2 +-
 .../modes/treemode/ValidationErrorIcon.scss   | 24 ++++++++++++++++++-
 .../modes/treemode/ValidationErrorIcon.svelte |  2 +-
 src/lib/themes/defaults.scss                  |  1 +
 6 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/controls/ValidationErrorsOverview.scss b/src/lib/components/controls/ValidationErrorsOverview.scss
index cf4b6ade..57476fe0 100644
--- 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;
 
@@ -16,7 +14,7 @@
       cursor: pointer;
 
       &:hover {
-        background-color: rgba(255, 255, 255, 0.1);
+        filter: brightness(110%);
       }
 
       td {
@@ -56,3 +54,18 @@
     }
   }
 }
+
+.error {
+  background: $message-error-background;
+  color: $message-error-color;
+}
+
+.warning {
+  background: $message-warning-background;
+  color: $message-warning-color;
+}
+
+.info {
+  background: $message-info-background;
+  color: $message-info-color;
+}
\ No newline at end of file
diff --git a/src/lib/components/controls/ValidationErrorsOverview.svelte b/src/lib/components/controls/ValidationErrorsOverview.svelte
index 66615382..f2438c81 100644
--- a/src/lib/components/controls/ValidationErrorsOverview.svelte
+++ b/src/lib/components/controls/ValidationErrorsOverview.svelte
@@ -36,7 +36,7 @@
         <tbody>
           {#each limit(validationErrors, MAX_VALIDATION_ERRORS) as validationError, index}
             <tr
-              class="jse-validation-error"
+            class="jse-validation-error {validationError.severity}"
               on:click={() => {
                 // trigger on the next tick to prevent the editor not getting focus
                 setTimeout(() => selectError(validationError))
@@ -77,7 +77,7 @@
         </tbody>
       </table>
     {:else}
-      <table class="jse-validation-errors-overview-collapsed">
+      <table class="jse-validation-errors-overview-collapsed {validationErrors[0].severity}">
         <tbody>
           <tr class="jse-validation-error" on:click={expand}>
             <td class="jse-validation-error-icon">
diff --git a/src/lib/components/modes/textmode/TextMode.svelte b/src/lib/components/modes/textmode/TextMode.svelte
index 122b896a..170019f0 100644
--- a/src/lib/components/modes/textmode/TextMode.svelte
+++ b/src/lib/components/modes/textmode/TextMode.svelte
@@ -643,7 +643,7 @@
       from,
       to,
       message,
-      severity: ValidationSeverity.warning,
+      severity: validationError.severity,
       actions: []
     }
   }
diff --git a/src/lib/components/modes/treemode/ValidationErrorIcon.scss b/src/lib/components/modes/treemode/ValidationErrorIcon.scss
index bc2b68c8..d01a090f 100644
--- 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;
+}
\ No newline at end of file
diff --git a/src/lib/components/modes/treemode/ValidationErrorIcon.svelte b/src/lib/components/modes/treemode/ValidationErrorIcon.svelte
index 73c5671c..342e6724 100644
--- 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
index b2d9e514..31c4d1cd 100644
--- 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));

From eb01da1789bf75c6ef1fb516549e37fb5f0319d2 Mon Sep 17 00:00:00 2001
From: anlinguist <an.linguist@gmail.com>
Date: Tue, 26 Mar 2024 23:30:24 -0600
Subject: [PATCH 2/2] feat: use jse-validation- prefix, other minor fixes

---
 .../controls/ValidationErrorsOverview.scss    | 33 ++++++++++---------
 .../controls/ValidationErrorsOverview.svelte  | 19 ++++++++---
 .../components/modes/textmode/TextMode.svelte |  4 +--
 .../examples/custom_validation/+page.svelte   |  4 +--
 4 files changed, 37 insertions(+), 23 deletions(-)

diff --git a/src/lib/components/controls/ValidationErrorsOverview.scss b/src/lib/components/controls/ValidationErrorsOverview.scss
index 57476fe0..5905d3e7 100644
--- a/src/lib/components/controls/ValidationErrorsOverview.scss
+++ b/src/lib/components/controls/ValidationErrorsOverview.scss
@@ -13,6 +13,24 @@
     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 {
         filter: brightness(110%);
       }
@@ -53,19 +71,4 @@
       }
     }
   }
-}
-
-.error {
-  background: $message-error-background;
-  color: $message-error-color;
-}
-
-.warning {
-  background: $message-warning-background;
-  color: $message-warning-color;
-}
-
-.info {
-  background: $message-info-background;
-  color: $message-info-color;
 }
\ No newline at end of file
diff --git a/src/lib/components/controls/ValidationErrorsOverview.svelte b/src/lib/components/controls/ValidationErrorsOverview.svelte
index f2438c81..fced3763 100644
--- 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 {validationError.severity}"
+            class="jse-validation-{validationError.severity}"
               on:click={() => {
                 // trigger on the next tick to prevent the editor not getting focus
                 setTimeout(() => selectError(validationError))
@@ -77,9 +88,9 @@
         </tbody>
       </table>
     {:else}
-      <table class="jse-validation-errors-overview-collapsed {validationErrors[0].severity}">
+      <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
index 170019f0..54b9ca9b 100644
--- 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: validationError.severity,
+      severity,
       actions: []
     }
   }
diff --git a/src/routes/examples/custom_validation/+page.svelte b/src/routes/examples/custom_validation/+page.svelte
index b67ef166..9a1b0b63 100644
--- 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 {