fix: limit the number of rendered validation errors in the overview list

josdejong · Nov 12, 2022 · b0ae546 · b0ae546
1 parent b771c61
commit b0ae546
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/src/lib/components/controls/ValidationErrorsOverview.svelte b/src/lib/components/controls/ValidationErrorsOverview.svelte
@@ -11,10 +11,14 @@
   import { stringifyJSONPath } from '../../utils/pathUtils.js'
   import type { ValidationError } from '../../types'
   import { stripRootObject } from '$lib/utils/pathUtils.js'
+  import { MAX_VALIDATION_ERRORS } from '$lib/constants'
+  import { limit } from '$lib/utils/arrayUtils'
 
   export let validationErrors: ValidationError[]
   export let selectError: (error: ValidationError) => void
 
+  $: count = validationErrors.length
+
   let expanded = true
 
   function collapse() {
@@ -28,10 +32,10 @@
 
 {#if !isEmpty(validationErrors)}
   <div class="jse-validation-errors-overview">
-    {#if expanded || validationErrors.length === 1}
+    {#if expanded || count === 1}
       <table>
         <tbody>
-          {#each validationErrors as validationError, index}
+          {#each limit(validationErrors, MAX_VALIDATION_ERRORS) as validationError, index}
             <tr
               class="jse-validation-error"
               on:click={() => {
@@ -62,6 +66,15 @@
               </td>
             </tr>
           {/each}
+
+          {#if count > MAX_VALIDATION_ERRORS}
+            <tr class="jse-validation-error">
+              <td />
+              <td />
+              <td>(and {count - MAX_VALIDATION_ERRORS} more errors)</td>
+              <td />
+            </tr>
+          {/if}
         </tbody>
       </table>
     {:else}
@@ -72,7 +85,7 @@
               <Icon data={faExclamationTriangle} />
             </td>
             <td>
-              {validationErrors.length} validation errors
+              {count} validation errors
               <div class="jse-validation-errors-expand">
                 <Icon data={faAngleRight} />
               </div>

diff --git a/src/lib/constants.ts b/src/lib/constants.ts
@@ -10,6 +10,7 @@ export const AUTO_SCROLL_SPEED_NORMAL = 400 // pixels per second
 export const AUTO_SCROLL_SPEED_FAST = 1200 // pixels per second
 export const MAX_SEARCH_RESULTS = 1000
 export const ARRAY_SECTION_SIZE = 100
+export const MAX_VALIDATION_ERRORS = 100
 export const MAX_CHARACTERS_TEXT_PREVIEW = 20000
 export const DEFAULT_VISIBLE_SECTIONS: Section[] = [{ start: 0, end: ARRAY_SECTION_SIZE }]
 export const MAX_VALIDATABLE_SIZE = 100 * 1024 * 1024 // 1 MB