From f3990b70e2a6ebf81dd1ff1d0f876112e5eba95e Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Tue, 19 Oct 2021 16:44:30 +0100
Subject: [PATCH] Disable action if SMTP has not been setup

---
 .../FlowChart/ActionModal.svelte              | 61 +++++++++++++++----
 1 file changed, 49 insertions(+), 12 deletions(-)
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte
index b076a8da86..664bc80041 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte
@@ -1,11 +1,26 @@
 <script>
-  import { ModalContent, Layout, Detail, Body, Icon } from "@budibase/bbui"
+  import {
+    ModalContent,
+    Layout,
+    Detail,
+    Body,
+    Icon,
+    Tooltip,
+  } from "@budibase/bbui"
   import { automationStore } from "builderStore"
+  import { admin } from "stores/portal"
   import { externalActions } from "./ExternalActions"
 
   export let blockIdx
   export let blockComplete
 
+  const disabled = {
+    SEND_EMAIL_SMTP: {
+      disabled: $admin.checklist.smtp.checked,
+      message: "Please configure SMTP",
+    },
+  }
+
   let selectedAction
   let actionVal
   let actions = Object.entries($automationStore.blockDefinitions.ACTION)
@@ -55,6 +70,7 @@
   }}
 >
   <Body size="XS">Select an app or event.</Body>
+
   <Layout noPadding>
     <Body size="S">Apps</Body>
 
@@ -85,24 +101,46 @@
 
     <div class="item-list">
       {#each Object.entries(internal) as [idx, action]}
-        <div
-          class="item"
-          class:selected={selectedAction === action.name}
-          on:click={() => selectAction(action)}
-        >
-          <div class="item-body">
-            <Icon name={action.icon} />
-            <span class="icon-spacing">
-              <Body size="XS">{action.name}</Body></span
+        {#if disabled[idx] && !disabled[idx].disabled}
+          <Tooltip text={disabled[idx].message} direction="bottom">
+            <div
+              class="item"
+              class:selected={selectedAction === action.name}
+              class:disabled={disabled[idx]}
+              on:click={() => selectAction(action)}
             >
+              <div class="item-body">
+                <Icon name={action.icon} />
+                <span class="icon-spacing">
+                  <Body size="XS">{action.name}</Body></span
+                >
+              </div>
+            </div>
+          </Tooltip>
+        {:else}
+          <div
+            class="item"
+            class:selected={selectedAction === action.name}
+            on:click={() => selectAction(action)}
+          >
+            <div class="item-body">
+              <Icon name={action.icon} />
+              <span class="icon-spacing">
+                <Body size="XS">{action.name}</Body></span
+              >
+            </div>
           </div>
-        </div>
+        {/if}
       {/each}
     </div>
   </Layout>
 </ModalContent>
 
 <style>
+  .disabled {
+    opacity: 0.3;
+    pointer-events: none;
+  }
   .icon-spacing {
     margin-left: var(--spacing-m);
   }
@@ -118,7 +156,6 @@
 
   .item {
     cursor: pointer;
-    display: grid;
     grid-gap: var(--spectrum-alias-grid-margin-xsmall);
     padding: var(--spectrum-alias-item-padding-s);
     background: var(--spectrum-alias-background-color-secondary);
