Render errors and warnings from blocks in the UI rather than erroring

datalab-org · Feb 18, 2024 · 6990bac · 6990bac
1 parent 2e33699
commit 6990bac
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 0 deletions.
diff --git a/webapp/src/components/datablocks/DataBlockBase.vue b/webapp/src/components/datablocks/DataBlockBase.vue
@@ -40,6 +40,31 @@
       :style="{ 'max-height': contentMaxHeight }"
       class="datablock-content"
     >
+      <!-- Show any warnings or errors reported by the block -->
+      <div
+        class="alert alert-danger d-flex align-items-center ml-3"
+        role="alert"
+        v-if="block.errors"
+      >
+        <ul class="fa-ul">
+          <li v-for="(error, index) in block.errors" :key="index">
+            <font-awesome-icon class="fa-li" icon="exclamation-circle" />
+            {{ error }}
+          </li>
+        </ul>
+      </div>
+      <div
+        class="alert alert-warning d-flex align-items-center ml-3"
+        role="alert"
+        v-if="block.warnings"
+      >
+        <ul class="fa-ul">
+          <li v-for="(warning, index) in block.warnings" :key="index">
+            <font-awesome-icon class="fa-li" icon="exclamation-triangle" />
+            {{ warning }}
+          </li>
+        </ul>
+      </div>
       <slot></slot>
       <TinyMceInline v-model="BlockDescription"></TinyMceInline>
     </div>

diff --git a/webapp/src/main.js b/webapp/src/main.js
@@ -33,6 +33,7 @@ import {
   faQuestionCircle,
   faLink,
   faUnlink,
+  faExclamationTriangle,
   faExclamationCircle,
   faListOl,
   faSearch,
@@ -69,6 +70,7 @@ library.add(
   faHdd,
   faLink,
   faUnlink,
+  faExclamationTriangle,
   faExclamationCircle,
   faListOl,
   faSearch,