Display View JSON validation feedback in UploadViewModal (#1011)

* Display view JSON validation feedback in UploadViewModal. * Disallow pointer events on Collapse svg arrow to prevent conflict when used inside of Modal * Update test
NASA-AMMOS · Nov 27, 2023 · c12528c · c12528c
1 parent 257d678
commit c12528c
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 4 deletions.
diff --git a/e2e-tests/tests/plan.test.ts b/e2e-tests/tests/plan.test.ts
@@ -178,6 +178,8 @@ test.describe.serial('Plan', () => {
     await expect(page.locator('.modal-content .error')).toBeVisible();
     await expect(page.locator('.modal .st-button:has-text("Upload View")')).toBeDisabled();
     await expect(page.locator('.modal')).toBeVisible();
+    // Expect validation error collapse to be visible
+    await expect(page.locator('.modal-content .collapse')).toBeVisible();
     await page.locator('.modal .st-button:has-text("Cancel")').click();
   });
 

diff --git a/src/components/Collapse.svelte b/src/components/Collapse.svelte
@@ -107,6 +107,7 @@
     height: 9px;
     margin-right: 2px;
     overflow: hidden;
+    pointer-events: none;
     width: 9px;
   }
 

diff --git a/src/components/modals/UploadViewModal.svelte b/src/components/modals/UploadViewModal.svelte
@@ -1,17 +1,19 @@
 <svelte:options immutable={true} />
 
 <script lang="ts">
+  import CheckmarkIcon from '@nasa-jpl/stellar/icons/check.svg?component';
   import { createEventDispatcher } from 'svelte';
   import type { ViewDefinition } from '../../types/view';
   import effects from '../../utilities/effects';
   import { tooltip } from '../../utilities/tooltip';
+  import Collapse from '../Collapse.svelte';
   import Modal from './Modal.svelte';
   import ModalContent from './ModalContent.svelte';
   import ModalFooter from './ModalFooter.svelte';
   import ModalHeader from './ModalHeader.svelte';
 
-  export let height: number | string = 150;
-  export let width: number | string = 380;
+  export let height: number | string = 450;
+  export let width: number | string = 550;
 
   const dispatch = createEventDispatcher();
 
@@ -33,6 +35,7 @@
 
   function onClick() {
     fileInput.value = '';
+    errors = [];
   }
 
   function onKeydown(event: KeyboardEvent) {
@@ -54,7 +57,7 @@
 
 <Modal {height} {width}>
   <ModalHeader on:close>Upload View JSON</ModalHeader>
-  <ModalContent style="padding:0">
+  <ModalContent style="overflow: auto; padding: 0">
     <fieldset>
       <label for="name">View Name</label>
       <input bind:value={viewName} autocomplete="off" class="st-input w-100" name="name" required />
@@ -71,8 +74,30 @@
         bind:files
         on:click={onClick}
         on:change={onChange}
-        use:tooltip={{ content: errors.join(', '), placement: 'bottom' }}
+        use:tooltip={{ content: errors.length ? 'Invalid view' : '', placement: 'bottom' }}
       />
+      {#if errors.length}
+        <Collapse
+          title={`Validation Errors (${errors.length})`}
+          defaultExpanded={false}
+          className="upload-view-modal-collapse"
+          padContent={false}
+        >
+          {#each errors as error}
+            <div>
+              <pre>
+                {error}
+              </pre>
+            </div>
+          {/each}
+        </Collapse>
+      {/if}
+      {#if fileInput?.value && !errors.length}
+        <div class="st-typography-label valid-json">
+          <CheckmarkIcon />
+          View JSON valid
+        </div>
+      {/if}
     </fieldset>
   </ModalContent>
   <ModalFooter>
@@ -89,6 +114,32 @@
   .error {
     background-color: var(--st-input-error-background-color);
     border: 1px solid var(--st-red);
+  }
+
+  :global(.upload-view-modal-collapse .collapse-header .title),
+  :global(.upload-view-modal-collapse .collapse-icon svg) {
     color: var(--st-red);
   }
+
+  :global(.upload-view-modal-collapse) {
+    padding-bottom: 16px;
+  }
+
+  pre {
+    background: var(--st-gray-10);
+    border: 1px solid var(--st-gray-20);
+    border-radius: 4px;
+    height: unset;
+    margin: 2px 16px;
+    padding: 8px;
+    white-space: unset;
+    word-break: break-word;
+    word-wrap: normal;
+  }
+
+  .valid-json {
+    color: #0eaf0a;
+    display: flex;
+    gap: 2px;
+  }
 </style>