From e1c5cae376076864dda46e2e7e2cc8c0f35b5120 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Thu, 4 Jun 2020 19:27:25 +0100
Subject: [PATCH 1/3] Workflow UI update

---
 packages/builder/src/budibase.css             |   7 +-
 .../workflow/SetupPanel/SetupPanel.svelte     | 158 +++++++++++++-----
 .../SetupPanel/WorkflowBlockSetup.svelte      |  20 ++-
 .../WorkflowList/CreateWorkflowModal.svelte   |   2 +-
 .../WorkflowList/WorkflowList.svelte          |  41 +++--
 .../WorkflowPanel/WorkflowPanel.svelte        |  11 +-
 packages/builder/src/global.css               |   4 +
 .../[application]/frontend/_layout.svelte     |  38 -----
 .../[application]/workflow/_layout.svelte     |  19 ++-
 9 files changed, 187 insertions(+), 113 deletions(-)

diff --git a/packages/builder/src/budibase.css b/packages/builder/src/budibase.css
index 910a795cd2..3d880cbfa2 100644
--- a/packages/builder/src/budibase.css
+++ b/packages/builder/src/budibase.css
@@ -76,15 +76,14 @@
 }
 
 .budibase__input {
-    width: 100%;
-    max-width: 250px;
     height: 35px;
+    width: 220px;
     border-radius: 3px;
     border: 1px solid var(--grey-dark);
     text-align: left;
     color: var(--ink);
-    font-size: 16px;
-    padding-left: 5px;
+    font-size: 14px;
+    padding-left: 12px;
 }
 
 .uk-text-right {
diff --git a/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte b/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
index 7d681a9ac0..ad35af33b9 100644
--- a/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
@@ -60,7 +60,7 @@
     </span>
     {#if !workflowBlock}
       <span
-        class="hoverable"
+        class="test-tab"
         class:selected={selectedTab === 'TEST'}
         on:click={() => (selectedTab = 'TEST')}>
         Test
@@ -86,36 +86,42 @@
   {#if selectedTab === 'SETUP'}
     {#if workflowBlock}
       <WorkflowBlockSetup {workflowBlock} />
-      <button class="workflow-button hoverable" on:click={deleteWorkflowBlock}>
-        Delete Block
-      </button>
+      <div class="buttons">
+        <button class="delete-workflow-button hoverable" on:click={deleteWorkflowBlock}>
+          Delete Block
+        </button>
+      </div>
     {:else if $workflowStore.currentWorkflow}
-      <div class="panel-body">
-        <label class="uk-form-label">Workflow: {workflow.name}</label>
-        <div class="uk-margin config-item">
-          <label class="uk-form-label">Name</label>
-          <div class="uk-form-controls">
-            <input
-              type="text"
-              class="budibase__input"
-              bind:value={workflow.name} />
+      <div class="panel">
+        <div class="panel-body">
+          <div class="block-label">Workflow: {workflow.name}</div>
+          <div class="config-item">
+            <label>Name</label>
+            <div class="form">
+              <input
+                type="text"
+                class="budibase_input"
+                bind:value={workflow.name} />
+            </div>
+          </div>
+          <div class="config-item">
+            <label class="uk-form-label">User Access</label>
+            <div class="access-levels">
+              {#each ACCESS_LEVELS as { name, key }}
+                <span class="access-level">
+                  <label>{name}</label>
+                  <input class="uk-checkbox" type="checkbox" />
+                </span>
+              {/each}
+            </div>
           </div>
         </div>
-        <div class="uk-margin config-item">
-          <label class="uk-form-label">User Access</label>
-          <div class="access-levels">
-            {#each ACCESS_LEVELS as { name, key }}
-              <span class="access-level">
-                <label>{name}</label>
-                <input class="uk-checkbox" type="checkbox" />
-              </span>
-            {/each}
-          </div>
+        <div class="buttons">
+          <button class="delete-workflow-button" on:click={deleteWorkflow}>
+            Delete Workflow
+          </button>
         </div>
       </div>
-      <button class="workflow-button hoverable" on:click={deleteWorkflow}>
-        Delete Workflow
-      </button>
     {/if}
   {/if}
 </section>
@@ -125,53 +131,118 @@
     display: flex;
     flex-direction: column;
     height: 100%;
+    justify-content: space-between;
   }
 
   .panel-body {
     flex: 1;
   }
 
+  .panel {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
   header {
     font-size: 20px;
-    font-weight: bold;
+    font-weight: 700;
     display: flex;
     align-items: center;
-    margin-bottom: 20px;
+    margin-bottom: 18px;
+    color: var(--ink);
   }
 
   .selected {
-    color: var(--font);
+    color: var(--ink);
+  }
+
+  .block-label {
+    font-weight: 500;
+    font-size: 14px;
+    color: var(--ink);
+    margin: 0px 0px 16px 0px;
   }
 
   .config-item {
-    padding: 20px;
+    margin: 0px 0px 4px 0px;
+    padding: 12px;
     background: var(--light-grey);
   }
 
+  .budibase_input {
+    height: 35px;
+    width: 220px;
+    border-radius: 3px;
+    border: 1px solid var(--grey-dark);
+    text-align: left;
+    color: var(--ink);
+    font-size: 14px;
+    padding-left: 12px;
+}
+
   header > span {
-    color: var(--dark-grey);
+    color: var(--ink-lighter);
     margin-right: 20px;
   }
 
+  .form {
+    margin-top: 12px;
+  }
+
   label {
     font-weight: 500;
     font-size: 14px;
-    color: var(--font);
+    color: var(--ink);
+  }
+
+  .buttons {
+    position: absolute;
+    bottom: 10px;
+  }
+
+  .delete-workflow-button {
+    cursor: pointer;
+    border: 1px solid var(--red);
+    border-radius: 3px;
+    width: 260px;
+    padding: 8px 16px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: var(--white);
+    color: var(--red);
+    font-size: 14px;
+    font-weight: 500;
+    transition: all 2ms;
+    align-self: flex-end;
+    margin-bottom: 10px;
+  }
+
+  .delete-workflow-button:hover {
+    background: var(--red);
+    border: 1px solid var(--red);
+    color: var(--white);
   }
 
   .workflow-button {
-    font-family: Roboto;
+    cursor: pointer;
+    border: 1px solid var(--grey-dark);
+    border-radius: 3px;
     width: 100%;
-    border: solid 1px #f2f2f2;
-    border-radius: 2px;
-    background: var(--white);
-    height: 32px;
-    font-size: 12px;
+    padding: 8px 16px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: white;
+    color: var(--ink);
+    font-size: 14px;
     font-weight: 500;
+    transition: all 2ms;
   }
 
   .workflow-button:hover {
-    background: var(--light-grey);
+    background: var(--grey-light);
   }
 
   .access-level {
@@ -183,14 +254,15 @@
 
   .access-level label {
     font-weight: normal;
+    color: var(--ink);
   }
 
   .test-result {
     border: none;
     width: 100%;
-    border-radius: 2px;
+    border-radius: 3px;
     height: 32px;
-    font-size: 12px;
+    font-size: 14px;
     font-weight: 500;
     color: var(--white);
     text-align: center;
@@ -198,10 +270,10 @@
   }
 
   .passed {
-    background: #84c991;
+    background: #84C991;
   }
 
   .failed {
-    background: var(--coral);
+    background: var(--red);
   }
 </style>
diff --git a/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte b/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte
index 08bf2d72db..1c275c0dff 100644
--- a/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte
@@ -15,12 +15,12 @@
 
 <label class="uk-form-label">{workflowBlock.type}: {workflowBlock.name}</label>
 {#each workflowParams as [parameter, type]}
-  <div class="uk-margin block-field">
+  <div class="block-field">
     <label class="uk-form-label">{parameter}</label>
     <div class="uk-form-controls">
       {#if Array.isArray(type)}
         <select
-          class="budibase__input"
+          class="budibase_input"
           bind:value={workflowBlock.args[parameter]}>
           {#each type as option}
             <option value={option}>{option}</option>
@@ -67,10 +67,22 @@
 <style>
   .block-field {
     border-radius: 3px;
-    background: var(--light-grey);
-    padding: 20px;
+    background: var(--grey-light);
+    padding: 12px;
+    margin: 0px 0px 4px 0px;
   }
 
+  .budibase_input {
+    height: 35px;
+    width: 220px;
+    border-radius: 3px;
+    border: 1px solid var(--grey-dark);
+    text-align: left;
+    color: var(--ink);
+    font-size: 14px;
+    padding-left: 12px;
+}
+
   label {
     text-transform: capitalize;
     font-size: 14px;
diff --git a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/CreateWorkflowModal.svelte b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/CreateWorkflowModal.svelte
index 687c2ec370..66683182b8 100644
--- a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/CreateWorkflowModal.svelte
+++ b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/CreateWorkflowModal.svelte
@@ -35,7 +35,7 @@
     <i class="ri-information-line" />
     Learn about workflows
   </a>
-  <ActionButton alert on:click={onClosed}>Cancel</ActionButton>
+  <ActionButton secondary on:click={onClosed}>Cancel</ActionButton>
   <ActionButton disabled={!valid} on:click={createWorkflow}>Save</ActionButton>
 </footer>
 
diff --git a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte
index e6182a807d..2aa685ac2e 100644
--- a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte
+++ b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte
@@ -38,6 +38,7 @@
 
 <section>
   <button class="new-workflow-button hoverable" on:click={newWorkflow}>
+    <i class="icon ri-add-circle-fill" />
     Create New Workflow
   </button>
   <ul>
@@ -87,12 +88,13 @@
   }
 
   .workflow-item {
-    padding: 20px;
     display: flex;
-    align-items: center;
     border-radius: 3px;
-    height: 32px;
-    font-weight: 500;
+    padding-left: 12px; 
+    align-items: center;
+    height: 40px;
+    margin-bottom: 4px;
+    color: var(--ink);
   }
 
   .workflow-item i {
@@ -102,25 +104,36 @@
 
   .workflow-item:hover {
     cursor: pointer;
-    background: var(--secondary);
+    background: var(--grey-light);
   }
 
   .workflow-item.selected {
-    background: var(--secondary);
+    background: var(--blue-light);
   }
-
+  
   .new-workflow-button {
-    font-family: Roboto;
+    cursor: pointer;
+    border: 1px solid var(--grey-dark);
+    border-radius: 3px;
     width: 100%;
-    border: solid 1px #f2f2f2;
-    border-radius: 2px;
-    background: var(--white);
-    height: 32px;
-    font-size: 12px;
+    padding: 8px 16px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: white;
+    color: var(--ink);
+    font-size: 14px;
     font-weight: 500;
+    transition: all 2ms;
   }
 
   .new-workflow-button:hover {
-    background: var(--light-grey);
+    background: var(--grey-light);
+  }
+
+  .icon {
+    color: var(--ink);
+    font-size: 16px;
+    margin-right: 4px;
   }
 </style>
diff --git a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowPanel.svelte b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowPanel.svelte
index b057177cae..986afdd6e0 100644
--- a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowPanel.svelte
+++ b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowPanel.svelte
@@ -33,8 +33,9 @@
 
 <style>
   header {
-    font-size: 20px;
-    font-weight: bold;
+    font-size: 18px;
+    font-weight: 700;
+    background: none;
     display: flex;
     align-items: center;
     margin-bottom: 20px;
@@ -45,6 +46,10 @@
   }
 
   span:not(.selected) {
-    color: var(--dark-grey);
+    color: var(--ink-lighter);
+  }
+
+    span:not(.selected):hover {
+    color: var(--ink);
   }
 </style>
diff --git a/packages/builder/src/global.css b/packages/builder/src/global.css
index 8f3f2ecd56..7259111c63 100644
--- a/packages/builder/src/global.css
+++ b/packages/builder/src/global.css
@@ -16,6 +16,10 @@
     --grey-medium: #e8e8ef;
     --grey-dark: #E6E6E6;
 
+    --red: #E26D69;
+    --red-light:#FFE6E6;
+    --red-dark: #800400;
+
     --primary100: #0055ff;
     --primary80: rgba(0, 85, 255, 0.8);
     --primary60: #rgba(0, 85, 255, 0.6);
diff --git a/packages/builder/src/pages/[application]/frontend/_layout.svelte b/packages/builder/src/pages/[application]/frontend/_layout.svelte
index 9acdfe70fc..c232df095e 100644
--- a/packages/builder/src/pages/[application]/frontend/_layout.svelte
+++ b/packages/builder/src/pages/[application]/frontend/_layout.svelte
@@ -106,44 +106,6 @@
     overflow-y: hidden;
   }
 
-  .components-nav-page {
-    font-size: 13px;
-    color: var(--ink);
-    padding-left: 20px;
-    margin-top: 20px;
-    font-weight: 600;
-    opacity: 0.4;
-    letter-spacing: 1px;
-  }
-
-  .components-nav-header {
-    font-size: 13px;
-    color: var(--ink);
-    margin-top: 20px;
-    font-weight: 600;
-    opacity: 0.4;
-    letter-spacing: 1px;
-  }
-
-  .nav-header {
-    display: flex;
-    flex-direction: column;
-    margin-top: 20px;
-  }
-
-  .nav-items-container {
-    padding: 1rem 0rem 0rem 0rem;
-  }
-
-  .nav-group-header {
-    display: flex;
-    padding: 0px 20px 0px 20px;
-    font-size: 0.9rem;
-    font-weight: bold;
-    justify-content: space-between;
-    align-items: center;
-    min-height: 0;
-  }
 
   .nav-group-header > div:nth-child(1) {
     padding: 0rem 0.5rem 0rem 0rem;
diff --git a/packages/builder/src/pages/[application]/workflow/_layout.svelte b/packages/builder/src/pages/[application]/workflow/_layout.svelte
index acaf2350ee..96a0dcbb2f 100644
--- a/packages/builder/src/pages/[application]/workflow/_layout.svelte
+++ b/packages/builder/src/pages/[application]/workflow/_layout.svelte
@@ -5,13 +5,17 @@
 
 <div class="root">
   <div class="nav">
-    <WorkflowPanel />
+    <div class="inner">
+      <WorkflowPanel />
+    </div>
   </div>
   <div class="content">
     <slot />
   </div>
   <div class="nav">
-    <SetupPanel />
+    <div class="inner">
+      <SetupPanel />
+    </div>
   </div>
 </div>
 
@@ -24,7 +28,7 @@
   .root {
     height: 100%;
     display: flex;
-    background: #fafafa;
+    background: var(--grey-light);
   }
 
   .content {
@@ -33,10 +37,13 @@
   }
 
   .nav {
-    padding: 20px;
     overflow: auto;
-    width: 275px;
-    border: 1px solid var(--medium-grey);
+    width: 300px;
+    border-right: 1px solid var(--grey);
     background: var(--white);
   }
+
+  .inner {
+    padding: 20px;
+  }
 </style>

From 06542e4244e4f890fc47488f702c0ef906d50431 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Thu, 4 Jun 2020 19:30:44 +0100
Subject: [PATCH 2/3] formatting

---
 packages/builder/src/components/start/AppList.svelte  |  1 -
 .../components/workflow/SetupPanel/SetupPanel.svelte  |  8 +++++---
 .../workflow/SetupPanel/WorkflowBlockSetup.svelte     |  2 +-
 .../WorkflowPanel/WorkflowList/WorkflowList.svelte    |  4 ++--
 .../workflow/WorkflowPanel/WorkflowPanel.svelte       |  2 +-
 .../src/pages/[application]/frontend/_layout.svelte   |  1 -
 packages/builder/src/pages/index.svelte               | 11 +++++------
 7 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/packages/builder/src/components/start/AppList.svelte b/packages/builder/src/components/start/AppList.svelte
index e09e2f2fb7..07501777a5 100644
--- a/packages/builder/src/components/start/AppList.svelte
+++ b/packages/builder/src/components/start/AppList.svelte
@@ -33,5 +33,4 @@
   .root {
     margin: 20px 80px;
   }
-
 </style>
diff --git a/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte b/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
index ad35af33b9..893ed46a88 100644
--- a/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
@@ -87,7 +87,9 @@
     {#if workflowBlock}
       <WorkflowBlockSetup {workflowBlock} />
       <div class="buttons">
-        <button class="delete-workflow-button hoverable" on:click={deleteWorkflowBlock}>
+        <button
+          class="delete-workflow-button hoverable"
+          on:click={deleteWorkflowBlock}>
           Delete Block
         </button>
       </div>
@@ -179,7 +181,7 @@
     color: var(--ink);
     font-size: 14px;
     padding-left: 12px;
-}
+  }
 
   header > span {
     color: var(--ink-lighter);
@@ -270,7 +272,7 @@
   }
 
   .passed {
-    background: #84C991;
+    background: #84c991;
   }
 
   .failed {
diff --git a/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte b/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte
index 1c275c0dff..42ebb307fa 100644
--- a/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte
@@ -81,7 +81,7 @@
     color: var(--ink);
     font-size: 14px;
     padding-left: 12px;
-}
+  }
 
   label {
     text-transform: capitalize;
diff --git a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte
index 2aa685ac2e..6111742ea6 100644
--- a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte
+++ b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte
@@ -90,7 +90,7 @@
   .workflow-item {
     display: flex;
     border-radius: 3px;
-    padding-left: 12px; 
+    padding-left: 12px;
     align-items: center;
     height: 40px;
     margin-bottom: 4px;
@@ -110,7 +110,7 @@
   .workflow-item.selected {
     background: var(--blue-light);
   }
-  
+
   .new-workflow-button {
     cursor: pointer;
     border: 1px solid var(--grey-dark);
diff --git a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowPanel.svelte b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowPanel.svelte
index 986afdd6e0..f1a1357978 100644
--- a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowPanel.svelte
+++ b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowPanel.svelte
@@ -49,7 +49,7 @@
     color: var(--ink-lighter);
   }
 
-    span:not(.selected):hover {
+  span:not(.selected):hover {
     color: var(--ink);
   }
 </style>
diff --git a/packages/builder/src/pages/[application]/frontend/_layout.svelte b/packages/builder/src/pages/[application]/frontend/_layout.svelte
index c232df095e..78ade02904 100644
--- a/packages/builder/src/pages/[application]/frontend/_layout.svelte
+++ b/packages/builder/src/pages/[application]/frontend/_layout.svelte
@@ -106,7 +106,6 @@
     overflow-y: hidden;
   }
 
-
   .nav-group-header > div:nth-child(1) {
     padding: 0rem 0.5rem 0rem 0rem;
     vertical-align: bottom;
diff --git a/packages/builder/src/pages/index.svelte b/packages/builder/src/pages/index.svelte
index 13990a6fa5..e54102db1e 100644
--- a/packages/builder/src/pages/index.svelte
+++ b/packages/builder/src/pages/index.svelte
@@ -46,10 +46,10 @@
 <div class="welcome">Welcome to Budibase</div>
 
 <div class="banner">
-  <img src="/_builder/assets/rocket.jpg" alt="rocket">
-   <div class="banner-content">
-      Every accomplishment starts with a decision to try.
-    </div>
+  <img src="/_builder/assets/rocket.jpg" alt="rocket" />
+  <div class="banner-content">
+    Every accomplishment starts with a decision to try.
+  </div>
 </div>
 <div class="app-section-header">
   <div class="app-section-title">Your Web Apps</div>
@@ -70,7 +70,6 @@
 {/await}
 
 <style>
-
   .welcome {
     font-size: 42px;
     color: var(--ink);
@@ -93,7 +92,7 @@
     height: 250px;
     width: 100%;
     border-radius: 5px;
-}
+  }
 
   .banner-content {
     position: absolute;

From 43856e968ebd8b78921d90e52f2899231d882868 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Thu, 4 Jun 2020 20:23:46 +0100
Subject: [PATCH 3/3] moving workflow button

---
 .../workflow/SetupPanel/SetupPanel.svelte          | 13 +++++++++++++
 .../WorkflowPanel/WorkflowList/WorkflowList.svelte | 14 --------------
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte b/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
index 893ed46a88..456505a4a8 100644
--- a/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
@@ -45,6 +45,15 @@
   function testWorkflow() {
     testResult = "PASSED"
   }
+
+  async function saveWorkflow() {
+    const workflow = $workflowStore.currentWorkflow.workflow
+    await workflowStore.actions.save({
+      instanceId: $backendUiStore.selectedDatabase._id,
+      workflow,
+    })
+    notifier.success(`Workflow ${workflow.name} saved.`)
+  }
 </script>
 
 <section>
@@ -87,6 +96,9 @@
     {#if workflowBlock}
       <WorkflowBlockSetup {workflowBlock} />
       <div class="buttons">
+        <button class="workflow-button hoverable" on:click={saveWorkflow}>
+          Save Workflow
+        </button>
         <button
           class="delete-workflow-button hoverable"
           on:click={deleteWorkflowBlock}>
@@ -241,6 +253,7 @@
     font-size: 14px;
     font-weight: 500;
     transition: all 2ms;
+    margin-bottom: 10px;
   }
 
   .workflow-button:hover {
diff --git a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte
index 6111742ea6..7ba022fb78 100644
--- a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte
+++ b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte
@@ -25,15 +25,6 @@
   onMount(() => {
     workflowStore.actions.fetch($backendUiStore.selectedDatabase._id)
   })
-
-  async function saveWorkflow() {
-    const workflow = $workflowStore.currentWorkflow.workflow
-    await workflowStore.actions.save({
-      instanceId: $backendUiStore.selectedDatabase._id,
-      workflow,
-    })
-    notifier.success(`Workflow ${workflow.name} saved.`)
-  }
 </script>
 
 <section>
@@ -52,11 +43,6 @@
       </li>
     {/each}
   </ul>
-  {#if $workflowStore.currentWorkflow}
-    <button class="new-workflow-button hoverable" on:click={saveWorkflow}>
-      Save Workflow
-    </button>
-  {/if}
 </section>
 
 <style>