show quota errors when deployments fail

packages/builder/src/components/deploy/DeploymentHistory.svelte

@@ -2,7 +2,7 @@
   import { onMount, onDestroy } from "svelte"
   import Spinner from "components/common/Spinner.svelte"
   import { slide } from "svelte/transition"
-  import { Heading, Body, Button, Modal } from "@budibase/bbui"
+  import { Heading, Body, Button, Modal, ModalContent } from "@budibase/bbui"
   import api from "builderStore/api"
   import { notifier } from "builderStore/store/notifications"
   import CreateWebhookDeploymentModal from "./CreateWebhookDeploymentModal.svelte"
@@ -31,6 +31,8 @@
   export let appId
 
   let modal
+  let errorReasonModal
+  let errorReason
   let poll
   let deployments = []
   let deploymentUrl = `https://${appId}.app.budi.live/${appId}`
@@ -38,10 +40,35 @@
   const formatDate = (date, format) =>
     Intl.DateTimeFormat("en-GB", DATE_OPTIONS[format]).format(date)
 
+  // Required to check any updated deployment statuses between polls
+  function checkIncomingDeploymentStatus(current, incoming) {
+    for (let incomingDeployment of incoming) {
+      if (incomingDeployment.status === DeploymentStatus.FAILURE) {
+        const currentDeployment = current.find(
+          deployment => deployment._id === incomingDeployment._id
+        )
+
+        // We have just been notified of an ongoing deployments failure
+        if (
+          !currentDeployment ||
+          currentDeployment.status === DeploymentStatus.PENDING
+        ) {
+          showErrorReasonModal(incomingDeployment.err)
+        }
+      }
+    }
+  }
+
   async function fetchDeployments() {
     try {
       const response = await api.get(`/api/deployments`)
-      deployments = await response.json()
+      const json = await response.json()
+
+      if (deployments.length > 0) {
+        checkIncomingDeploymentStatus(deployments, json)
+      }
+
+      deployments = json
     } catch (err) {
       console.error(err)
       clearInterval(poll)
@@ -49,6 +76,11 @@
     }
   }
 
+  function showErrorReasonModal(err) {
+    errorReason = err
+    errorReasonModal.show()
+  }
+
   onMount(() => {
     fetchDeployments()
     poll = setInterval(fetchDeployments, POLL_INTERVAL)
@@ -86,11 +118,15 @@
               <Spinner size="10" />
             {/if}
             <div class={`deployment-status ${deployment.status}`}>
-              {deployment.status}
+              <span>
+                {deployment.status}
+                {#if deployment.status === DeploymentStatus.FAILURE}
+                  <i
+                    class="ri-information-line"
+                    on:click={() => showErrorReasonModal(deployment.err)} />
+                {/if}
+              </span>
             </div>
-            {#if deployment.status === DeploymentStatus.FAILURE}
-              <span>{deployment.err}</span>
-            {/if}
           </div>
         </article>
       {/each}
@@ -100,6 +136,14 @@
 <Modal bind:this={modal} width="30%">
   <CreateWebhookDeploymentModal />
 </Modal>
+<Modal bind:this={errorReasonModal} width="30%">
+  <ModalContent
+    title="Deployment Error"
+    confirmText="OK"
+    showCancelButton={false}>
+    {errorReason}
+  </ModalContent>
+</Modal>
 
 <style>
   .deployment:nth-child(odd) {
@@ -198,5 +242,11 @@
   .FAILURE {
     color: var(--red);
     background: var(--red-light);
+    cursor: pointer;
+  }
+
+  i {
+    position: relative;
+    top: 2px;
   }
 </style>

packages/standard-components/src/RichText.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { RichText } from '@budibase/bbui'
+  import { RichText } from "@budibase/bbui"
 
   export let _bb
 
@@ -16,29 +16,19 @@
   // Need to determine what options we want to expose.
 
   let options = {
-    "modules": {
-      "toolbar": [
+    modules: {
+      toolbar: [
         [
           {
-            "header": [
-              1,
-              2,
-              3,
-              false
-            ]
-          }
+            header: [1, 2, 3, false],
+          },
         ],
-        [
-          "bold",
-          "italic",
-          "underline",
-          "strike"
-        ]
-      ]
+        ["bold", "italic", "underline", "strike"],
+      ],
     },
-    "placeholder": "Type something...",
-    "theme": "snow"
+    placeholder: "Type something...",
+    theme: "snow",
   }
 </script>
-  
-  <RichText bind:content {options} />
+
+<RichText bind:content {options} />