From 6990bac640730bd8b9ad3bc704129865fbe0dd31 Mon Sep 17 00:00:00 2001
From: Matthew Evans <git@ml-evs.science>
Date: Fri, 16 Feb 2024 00:26:32 +0000
Subject: [PATCH] Render errors and warnings from blocks in the UI rather than
 erroring

---
 .../components/datablocks/DataBlockBase.vue   | 25 +++++++++++++++++++
 webapp/src/main.js                            |  2 ++
 2 files changed, 27 insertions(+)

diff --git a/webapp/src/components/datablocks/DataBlockBase.vue b/webapp/src/components/datablocks/DataBlockBase.vue
index af26591e9..1fd215c19 100644
--- 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
index 651d3dceb..ce6603c35 100644
--- 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,