From db501fb10a21abf1bbbdaa21ba26197e67580286 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Mon, 10 Jul 2023 09:30:15 +0100
Subject: [PATCH] Enabled collaboration behaviour in the automation section

---
 .../builderStore/store/automation/index.js    | 36 +++++++++++++++++++
 .../builder/src/builderStore/websocket.js     | 12 ++++++-
 .../AutomationPanel/AutomationList.svelte     |  9 +++--
 .../AutomationPanel/AutomationPanel.svelte    |  2 +-
 .../builder/app/[application]/_layout.svelte  |  2 +-
 .../[application]/automation/_layout.svelte   |  4 +++
 .../server/src/api/controllers/automation.ts  |  4 +++
 packages/server/src/websockets/builder.ts     | 15 ++++++++
 packages/shared-core/src/constants.ts         |  1 +
 9 files changed, 79 insertions(+), 6 deletions(-)

diff --git a/packages/builder/src/builderStore/store/automation/index.js b/packages/builder/src/builderStore/store/automation/index.js
index 9e5516c512..9f29f61803 100644
--- a/packages/builder/src/builderStore/store/automation/index.js
+++ b/packages/builder/src/builderStore/store/automation/index.js
@@ -3,6 +3,7 @@ import { API } from "api"
 import { cloneDeep } from "lodash/fp"
 import { generate } from "shortid"
 import { selectedAutomation } from "builderStore"
+import { automationStore } from "builderStore"
 
 const initialAutomationState = {
   automations: [],
@@ -248,4 +249,39 @@ const automationActions = store => ({
     }
     await store.actions.save(newAutomation)
   },
+  replace: async (automationId, automation) => {
+    if (!automationId) {
+      return
+    }
+    if (!automation) {
+      store.update(state => {
+        // Remove the automation
+        state.automations = state.automations.filter(
+          x => x._id !== automationId
+        )
+        // Select a new automation if required
+        if (automationId === state.selectedAutomationId) {
+          store.actions.select(state.automations[0]?._id)
+        }
+        return state
+      })
+    } else {
+      const index = get(store).automations.findIndex(
+        x => x._id === automation._id
+      )
+      if (index === -1) {
+        // Automation addition
+        store.update(state => ({
+          ...state,
+          automations: [...state.automations, automation],
+        }))
+      } else {
+        // Automation update
+        store.update(state => {
+          state.automations[index] = automation
+          return state
+        })
+      }
+    }
+  },
 })
diff --git a/packages/builder/src/builderStore/websocket.js b/packages/builder/src/builderStore/websocket.js
index 87195bed25..6121831c38 100644
--- a/packages/builder/src/builderStore/websocket.js
+++ b/packages/builder/src/builderStore/websocket.js
@@ -1,5 +1,10 @@
 import { createWebsocket } from "@budibase/frontend-core"
-import { userStore, store, deploymentStore } from "builderStore"
+import {
+  userStore,
+  store,
+  deploymentStore,
+  automationStore,
+} from "builderStore"
 import { datasources, tables } from "stores/backend"
 import { get } from "svelte/store"
 import { auth } from "stores/portal"
@@ -67,5 +72,10 @@ export const createBuilderWebsocket = appId => {
     }
   )
 
+  // Automations
+  socket.onOther(BuilderSocketEvent.AutomationChange, ({ id, automation }) => {
+    automationStore.actions.replace(id, automation)
+  })
+
   return socket
 }
diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationList.svelte b/packages/builder/src/components/automation/AutomationPanel/AutomationList.svelte
index 80d65a5cb6..9620dfe86c 100644
--- a/packages/builder/src/components/automation/AutomationPanel/AutomationList.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/AutomationList.svelte
@@ -1,6 +1,10 @@
 <script>
   import { onMount } from "svelte"
-  import { automationStore, selectedAutomation } from "builderStore"
+  import {
+    automationStore,
+    selectedAutomation,
+    userSelectedResourceMap,
+  } from "builderStore"
   import NavItem from "components/common/NavItem.svelte"
   import EditAutomationPopover from "./EditAutomationPopover.svelte"
   import { notifications } from "@budibase/bbui"
@@ -23,11 +27,11 @@
 <div class="automations-list">
   {#each $automationStore.automations.sort(aut => aut.name) as automation, idx}
     <NavItem
-      border={idx > 0}
       icon="ShareAndroid"
       text={automation.name}
       selected={automation._id === selectedAutomationId}
       on:click={() => selectAutomation(automation._id)}
+      selectedBy={$userSelectedResourceMap[automation._id]}
     >
       <EditAutomationPopover {automation} />
     </NavItem>
@@ -40,6 +44,5 @@
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
-    margin: 0 calc(-1 * var(--spacing-xl));
   }
 </style>
diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
index 85e6a5faa3..fc52b7323a 100644
--- a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
@@ -11,8 +11,8 @@
 <Panel title="Automations" borderRight>
   <Layout paddingX="L" paddingY="XL" gap="S">
     <Button cta on:click={modal.show}>Add automation</Button>
-    <AutomationList />
   </Layout>
+  <AutomationList />
 </Panel>
 
 <Modal bind:this={modal}>
diff --git a/packages/builder/src/pages/builder/app/[application]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
index e6c79335a9..e7f5102e44 100644
--- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
@@ -228,7 +228,7 @@
   .top-nav {
     flex: 0 0 60px;
     background: var(--background);
-    padding: 0 var(--spacing-xl);
+    padding-left: var(--spacing-xl);
     display: grid;
     grid-template-columns: 1fr auto 1fr;
     flex-direction: row;
diff --git a/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte
index 74dfe671ab..0afe257e60 100644
--- a/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte
@@ -8,6 +8,10 @@
   import { onDestroy, onMount } from "svelte"
   import { syncURLToState } from "helpers/urlStateSync"
   import * as routify from "@roxi/routify"
+  import { store } from "builderStore"
+
+  $: automationId = $selectedAutomation?._id
+  $: store.actions.websocket.selectResource(automationId)
 
   // Keep URL and state in sync for selected screen ID
   const stopSyncing = syncURLToState({
diff --git a/packages/server/src/api/controllers/automation.ts b/packages/server/src/api/controllers/automation.ts
index be7af7b075..25d915e995 100644
--- a/packages/server/src/api/controllers/automation.ts
+++ b/packages/server/src/api/controllers/automation.ts
@@ -24,6 +24,7 @@ import {
 import { getActionDefinitions as actionDefs } from "../../automations/actions"
 import sdk from "../../sdk"
 import { db as dbCore } from "@budibase/backend-core"
+import { builderSocket } from "../../websockets"
 
 async function getActionDefinitions() {
   return removeDeprecated(await actionDefs())
@@ -107,6 +108,7 @@ export async function create(ctx: BBContext) {
       ...response,
     },
   }
+  builderSocket?.emitAutomationUpdate(ctx, automation)
 }
 
 export function getNewSteps(oldAutomation: Automation, automation: Automation) {
@@ -187,6 +189,7 @@ export async function update(ctx: BBContext) {
       _id: response.id,
     },
   }
+  builderSocket?.emitAutomationUpdate(ctx, automation)
 }
 
 export async function fetch(ctx: BBContext) {
@@ -215,6 +218,7 @@ export async function destroy(ctx: BBContext) {
   await cleanupAutomationMetadata(automationId)
   ctx.body = await db.remove(automationId, ctx.params.rev)
   await events.automation.deleted(oldAutomation)
+  builderSocket?.emitAutomationDeletion(ctx, automationId)
 }
 
 export async function logSearch(ctx: BBContext) {
diff --git a/packages/server/src/websockets/builder.ts b/packages/server/src/websockets/builder.ts
index cff42ce178..b3d40b5f72 100644
--- a/packages/server/src/websockets/builder.ts
+++ b/packages/server/src/websockets/builder.ts
@@ -10,6 +10,7 @@ import {
   ContextUser,
   Screen,
   App,
+  Automation,
 } from "@budibase/types"
 import { gridSocket } from "./index"
 import { clearLock, updateLock } from "../utilities/redis"
@@ -156,4 +157,18 @@ export default class BuilderSocket extends BaseSocket {
       user: ctx.user,
     })
   }
+
+  emitAutomationUpdate(ctx: any, automation: Automation) {
+    this.emitToRoom(ctx, ctx.appId, BuilderSocketEvent.AutomationChange, {
+      id: automation._id,
+      automation,
+    })
+  }
+
+  emitAutomationDeletion(ctx: any, id: string) {
+    this.emitToRoom(ctx, ctx.appId, BuilderSocketEvent.AutomationChange, {
+      id,
+      automation: null,
+    })
+  }
 }
diff --git a/packages/shared-core/src/constants.ts b/packages/shared-core/src/constants.ts
index ce6b8d94fa..f367fd2d67 100644
--- a/packages/shared-core/src/constants.ts
+++ b/packages/shared-core/src/constants.ts
@@ -90,6 +90,7 @@ export enum BuilderSocketEvent {
   AppMetadataChange = "AppMetadataChange",
   SelectResource = "SelectResource",
   AppPublishChange = "AppPublishChange",
+  AutomationChange = "AutomationChange",
 }
 
 export const SocketSessionTTL = 60