From 9ec21fe10de70e49c9d25dde375a204efe42ea76 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Thu, 5 Sep 2024 01:16:33 +0200
Subject: [PATCH 01/36] [#341] Added icon for `procedures` plugin.

---
 platypush/backend/http/webapp/src/assets/icons.json | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/platypush/backend/http/webapp/src/assets/icons.json b/platypush/backend/http/webapp/src/assets/icons.json
index ae0568c4d3..fd58b5f7bc 100644
--- a/platypush/backend/http/webapp/src/assets/icons.json
+++ b/platypush/backend/http/webapp/src/assets/icons.json
@@ -89,6 +89,9 @@
   "ping": {
     "class": "fas fa-server"
   },
+  "procedures": {
+    "class": "fas fa-gears"
+  },
   "torrent": {
     "class": "fa fa-magnet"
   },

From bbc70fe6e6beca61dbc97444b0baa6677342b39a Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Thu, 5 Sep 2024 01:17:35 +0200
Subject: [PATCH 02/36] [UI] The main module should load the config dir and
 main file paths at startup.

---
 platypush/backend/http/webapp/src/App.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/platypush/backend/http/webapp/src/App.vue b/platypush/backend/http/webapp/src/App.vue
index 004394f17f..bbeea48a9b 100644
--- a/platypush/backend/http/webapp/src/App.vue
+++ b/platypush/backend/http/webapp/src/App.vue
@@ -49,6 +49,8 @@ export default {
   data() {
     return {
       config: {},
+      configDir: null,
+      configFile: null,
       userAuthenticated: false,
       connected: false,
       pwaInstallEvent: null,
@@ -85,7 +87,11 @@ export default {
     },
 
     async initConfig() {
-      this.config = await this.request('config.get', {}, 60000, false)
+      this.config = await this.request('config.get', {}, 60000, false);
+      [this.configDir, this.configFile] = await Promise.all([
+        this.request('config.get_config_dir'),
+        this.request('config.get_config_file'),
+      ])
       this.userAuthenticated = true
     },
 

From 3249053eb0c9fc725e637d116580aa10d0e44d92 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Thu, 5 Sep 2024 01:19:26 +0200
Subject: [PATCH 03/36] [UI] Added support for custom HTML and data in
 `Autocomplete` component.

---
 .../src/components/elements/Autocomplete.vue  | 30 ++++++++++++-------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/platypush/backend/http/webapp/src/components/elements/Autocomplete.vue b/platypush/backend/http/webapp/src/components/elements/Autocomplete.vue
index 71f8605283..ad6c10ec6c 100644
--- a/platypush/backend/http/webapp/src/components/elements/Autocomplete.vue
+++ b/platypush/backend/http/webapp/src/components/elements/Autocomplete.vue
@@ -20,12 +20,14 @@
       <div
         class="item"
         :class="{ active: i === curIndex }"
-        :key="item"
-        :data-item="item"
+        :key="getItemText(item)"
+        :data-item="getItemText(item)"
         v-for="(item, i) in visibleItems"
         @click="onItemSelect(item)">
-        <span class="matching" v-if="value?.length">{{ item.substr(0, value.length) }}</span>
-        <span class="normal">{{ item.substr(value?.length || 0) }}</span>
+        <span v-html="item.prefix" v-if="item.prefix"></span>
+        <span class="matching" v-if="value?.length">{{ getItemText(item).substr(0, value.length) }}</span>
+        <span class="normal">{{ getItemText(item).substr(value?.length || 0) }}</span>
+        <span v-html="item.suffix" v-if="item.suffix"></span>
       </div>
     </div>
   </div>
@@ -33,7 +35,6 @@
 
 <script>
 export default {
-  name: "Autocomplete",
   emits: ["input"],
   props: {
     items: {
@@ -78,6 +79,10 @@ export default {
   },
 
   computed: {
+    itemsText() {
+      return this.items.map((item) => this.getItemText(item))
+    },
+
     visibleItems() {
       if (!this.value?.length)
         return this.items
@@ -87,7 +92,7 @@ export default {
         return this.showResultsWhenBlank ? this.items : []
 
       return this.items.filter(
-        (item) => item.substr(0, val.length).toUpperCase() === val
+        (item) => this.getItemText(item).substr(0, val.length).toUpperCase() === val
       )
     },
 
@@ -97,6 +102,10 @@ export default {
   },
 
   methods: {
+    getItemText(item) {
+      return item.text || item
+    },
+
     selectNextItem() {
       this.curIndex++
       this.normalizeIndex()
@@ -117,7 +126,8 @@ export default {
         this.curIndex = this.visibleItems.length - 1
 
       // Scroll to the element
-      const el = this.$el.querySelector("[data-item='" + this.visibleItems[this.curIndex] + "']")
+      const curText = this.getItemText(this.visibleItems[this.curIndex])
+      const el = this.$el.querySelector(`[data-item='${curText}']`)
       if (el)
         el.scrollIntoView({
           block: "start",
@@ -130,7 +140,7 @@ export default {
       if (!this.value)
         return false
 
-      return this.items.indexOf(this.value) >= 0
+      return this.itemsText.indexOf(this.value) >= 0
     },
 
     onFocus() {
@@ -144,7 +154,7 @@ export default {
         this.visible = false
 
       e.stopPropagation()
-      this.$emit("input", val)
+      this.$emit("input", val.text || val)
       this.curIndex = -1
       this.visible = true
     },
@@ -158,7 +168,7 @@ export default {
     },
 
     onItemSelect(item) {
-      this.$emit("input", item)
+      this.$emit("input", item.text || item)
       this.$nextTick(() => {
         if (this.valueIsInItems()) {
           this.visible = false

From dd2ea2092efc6b0d581bdbd98ec7263f8a63b813 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Thu, 5 Sep 2024 01:20:13 +0200
Subject: [PATCH 04/36] [UI] Added more color settings.

---
 .../http/webapp/src/style/themes/light.scss   | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/platypush/backend/http/webapp/src/style/themes/light.scss b/platypush/backend/http/webapp/src/style/themes/light.scss
index 6e7ae9a2ad..92dbf90f26 100644
--- a/platypush/backend/http/webapp/src/style/themes/light.scss
+++ b/platypush/backend/http/webapp/src/style/themes/light.scss
@@ -8,6 +8,7 @@ $default-bg-6: #e4eae8 !default;
 $default-bg-7: #e4e4e4 !default;
 $ok-fg: #17ad17 !default;
 $error-fg: #ad1717 !default;
+$error-fg-2: red !default;
 $error-bg: #ffaaa2 !default;
 $tile-bg: linear-gradient(90deg, rgba(9,174,128,1) 0%, rgba(71,226,179,1) 120%);
 $tile-fg: white;
@@ -16,6 +17,7 @@ $tile-hover-bg: linear-gradient(90deg, rgba(41,216,159,1) 0%, rgba(9,188,138,1)
 $default-fg: black !default;
 $default-fg-2: #23513a !default;
 $default-fg-3: #195331b3 !default;
+$inverse-fg: white !default;
 $header-bg: linear-gradient(0deg, #c0e8e4, #e4f8f4) !default;
 $header-bg-2: linear-gradient(90deg, #f3f3f3, white) !default;
 $no-items-color: #555555;
@@ -67,9 +69,12 @@ $border-shadow-bottom-right: 2.5px 2.5px 3px 0 $default-shadow-color;
 $border-shadow: 0 0 3px 3px #c0c0c0 !default;
 $header-shadow: 0px 1px 3px 1px #bbb !default;
 $group-shadow: 3px -2px 6px 1px #98b0a0;
-$primary-btn-shadow: 1px 1px 0.5px 0.75px #32b64640 !default;
 $search-bar-shadow: 1px 1px 1px 1px #ddd !default;
 
+//// Buttons
+$submit-btn-bg: #ebffeb;
+$primary-btn-shadow: 1px 1px 0.5px 0.75px #32b64640 !default;
+
 //// Modals
 $modal-header-bg: #e0e0e0 !default;
 $modal-header-border: 1px solid #ccc !default;
@@ -180,3 +185,15 @@ $code-dark-bg: rgb(11, 11, 13) !default;
 $code-dark-fg: rgb(243, 243, 250) !default;
 $code-light-bg: #f2f0e9 !default;
 $code-light-fg: #090909 !default;
+
+//// Sections
+$section-shadow: 0 3px 3px 0 rgba(187,187,187,0.75), 0 3px 3px 0 rgba(187,187,187,0.75);
+$doc-bg: linear-gradient(#effbe3, #e0ecdb);
+$doc-shadow: 0 1px 3px 1px #d7d3c0, inset 0 1px 1px 0 #d7d3c9;
+$output-bg: #151515;
+$output-shadow: $doc-shadow;
+
+//// Titles
+$title-bg: #eee;
+$title-border: 1px solid #ddd;
+$title-shadow: 0 3px 3px 0 rgba(187,187,187,0.75);

From 68e3cc51e4736d72756a2b79487018723f57035c Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Thu, 5 Sep 2024 01:20:43 +0200
Subject: [PATCH 05/36] [UI] Added shink, expand and unfold animations.

---
 .../http/webapp/src/style/animations.scss     | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/platypush/backend/http/webapp/src/style/animations.scss b/platypush/backend/http/webapp/src/style/animations.scss
index 4d2ef72b82..70507a8fb2 100644
--- a/platypush/backend/http/webapp/src/style/animations.scss
+++ b/platypush/backend/http/webapp/src/style/animations.scss
@@ -14,6 +14,30 @@
    -webkit-animation-name: fadeOut;
 }
 
+.expand {
+   animation-duration: 0.5s;
+   -webkit-animation-duration: 0.5s;
+   animation-fill-mode: both;
+   animation-name: expand;
+   -webkit-animation-name: expand;
+}
+
+.shrink {
+   animation-duration: 0.5s;
+   -webkit-animation-duration: 0.5s;
+   animation-fill-mode: both;
+   animation-name: shrink;
+   -webkit-animation-name: shrink;
+}
+
+.unfold {
+   animation-duration: 0.5s;
+   -webkit-animation-duration: 0.5s;
+   animation-fill-mode: both;
+   animation-name: unfold;
+   -webkit-animation-name: unfold;
+}
+
 @keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
@@ -27,6 +51,21 @@
    }
 }
 
+@keyframes expand {
+   0% {transform: scale(0);}
+   100% {transform: scale(1);}
+}
+
+@keyframes shrink {
+   0% {transform: scale(1);}
+   100% {transform: scale(0);}
+}
+
+@keyframes unfold {
+   0% {transform: scale(0, 1);}
+   100% {transform: scale(1, 1);}
+}
+
 .glow {
    animation-duration: 2s;
    -webkit-animation-duration: 2s;

From d623b3d1b8d8c415b7d1d373fde3c065adc3c539 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Thu, 5 Sep 2024 01:21:13 +0200
Subject: [PATCH 06/36] [UI] Added default styles for monospace content and
 draggable elements.

---
 .../http/webapp/src/style/components.scss     | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/platypush/backend/http/webapp/src/style/components.scss b/platypush/backend/http/webapp/src/style/components.scss
index 0b046bdcd9..c7d37a9f5a 100644
--- a/platypush/backend/http/webapp/src/style/components.scss
+++ b/platypush/backend/http/webapp/src/style/components.scss
@@ -1,3 +1,6 @@
+$floating-btn-size: 4em;
+$monospace-font: 'Hack', 'Fira Code', 'Noto Sans Mono', 'Ubuntu Mono', 'Recursive', 'Inconsolata', 'Consolas', 'Courier New', monospace;
+
 button, .btn, .btn-default {
   border: $default-border-3;
   cursor: pointer;
@@ -11,8 +14,9 @@ button, .btn, .btn-default {
   }
 
   &:hover {
-    background: $hover-bg;
-    border: 1px solid $default-hover-fg;
+    color: $default-hover-fg;
+    // background: $hover-bg;
+    // border: 1px solid $default-hover-fg;
   }
 
   .icon {
@@ -27,6 +31,14 @@ button, .btn, .btn-default {
   }
 }
 
+[draggable] {
+  cursor: grab !important;
+}
+
+.dragged {
+  opacity: 0.5 !important;
+}
+
 input[type=text], input[type=password] {
   border: $default-border-3;
   border-radius: 1em;
@@ -125,5 +137,9 @@ $nav-height: 2.5em;
   }
 }
 
+code {
+  font-family: $monospace-font;
+}
+
 // Tabs
 $tab-height: 3.5em;

From b74b8aa1546dac717cd8900144fd89a781de1279 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Thu, 5 Sep 2024 01:22:19 +0200
Subject: [PATCH 07/36] [#341] Added procedure entity icon.

---
 .../http/webapp/src/components/panels/Entities/meta.json  | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/meta.json b/platypush/backend/http/webapp/src/components/panels/Entities/meta.json
index e7f5362b6b..881e9bd11d 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/meta.json
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/meta.json
@@ -287,6 +287,14 @@
     }
   },
 
+  "procedure": {
+    "name": "Procedure",
+    "name_plural": "Procedures",
+    "icon": {
+      "class": "fas fa-cogs"
+    }
+  },
+
   "weight_sensor": {
     "name": "Sensor",
     "name_plural": "Sensors",

From e17abc34c1e5ed4c256beb8be4ebd0be5966efd7 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Thu, 5 Sep 2024 01:28:47 +0200
Subject: [PATCH 08/36] [UI] Several improvements on the Modal component.

- Don't propagate `close` events. This prevents underlying modals from
  being closed on cascade when the current modal is closed.

- Added logic to filter out <ESC> keystrokes that have already targeted
  the outermost open modal, so underlying modals won't be closed.

- Added `:before-close` property. This is a callback that can optionally
  be passed to the component and it will run some custom logic before
  the modal is closed. If it returns false then the modal will stay
  open.
---
 .../http/webapp/src/components/Modal.vue      | 86 ++++++++++++++-----
 1 file changed, 65 insertions(+), 21 deletions(-)

diff --git a/platypush/backend/http/webapp/src/components/Modal.vue b/platypush/backend/http/webapp/src/components/Modal.vue
index f0cd6ef152..931f80f400 100644
--- a/platypush/backend/http/webapp/src/components/Modal.vue
+++ b/platypush/backend/http/webapp/src/components/Modal.vue
@@ -1,7 +1,11 @@
 <template>
-  <div class="modal-container fade-in" :id="id" :class="{hidden: !isVisible}"
-    :style="{'--z-index': zIndex}" @click="close">
-    <div class="modal" :class="$attrs.class">
+  <div class="modal-container fade-in"
+       :class="{hidden: !isVisible}"
+       :id="id"
+       :style="{'--z-index': zIndex}" 
+       ref="container"
+       @click.stop="close">
+    <div class="modal" :class="$attrs.class" ref="modal">
       <div class="content" :style="{'--width': width, '--height': height}" @click.stop>
         <div class="header" :class="{uppercase: uppercase}" v-if="title">
           <div class="title" v-text="title" v-if="title" />
@@ -9,11 +13,11 @@
             <button v-for="(button, index) in buttons"
                     :key="index"
                     :title="button.title"
-                    @click="button.action">
+                    @click.stop="button.action">
               <i :class="button.icon" />
             </button>
 
-            <button title="Close" alt="Close" @click="close">
+            <button title="Close" alt="Close" @click.stop="close">
               <i class="fas fa-xmark" />
             </button>
           </div>
@@ -27,6 +31,8 @@
 </template>
 
 <script>
+import { bus } from "@/bus";
+
 export default {
   name: "Modal",
   emits: ['close', 'open'],
@@ -90,9 +96,10 @@ export default {
 
   data() {
     return {
-      timeoutId: undefined,
-      prevVisible: this.visible,
+      ignoreEscape: false,
       isVisible: this.visible,
+      prevVisible: this.visible,
+      timeoutId: undefined,
     }
   },
 
@@ -103,12 +110,16 @@ export default {
   },
 
   methods: {
-    close() {
+    close(event) {
       if (this.beforeClose && !this.beforeClose())
         return
 
+      if (event)
+        event.preventDefault()
+
       this.prevVisible = this.isVisible
       this.isVisible = false
+      bus.emit('modal-close')
     },
 
     hide() {
@@ -131,28 +142,61 @@ export default {
         this.show()
     },
 
+    onEscape() {
+      if (!this.isVisible || this.ignoreEscape)
+        return
+
+      const myZIndex = parseInt(getComputedStyle(this.$refs.container).zIndex)
+      const maxZIndex = Math.max(
+        ...Array.from(
+          document.querySelectorAll('.modal-container:not(.hidden)')
+        ).map((modal) =>
+          parseInt(getComputedStyle(modal).zIndex)
+        )
+      )
+
+      // Close only if it's the outermost modal
+      if (myZIndex === maxZIndex)
+        this.close()
+    },
+
     onKeyUp(event) {
       event.stopPropagation()
       if (event.key === 'Escape') {
-        this.close()
+        this.onEscape()
       }
     },
+
+    onModalCloseMessage() {
+      if (!this.isVisible)
+        return
+
+      this.ignoreEscape = true
+      setTimeout(() => this.ignoreEscape = false, 100)
+    },
+
+    visibleHndl(visible) {
+      if (!visible)
+        this.$emit('close')
+      else
+        this.$emit('open')
+    },
+  },
+
+  watch: {
+    visible(value) {
+      this.visibleHndl(value)
+      this.isVisible = value
+    },
+
+    isVisible(value) {
+      this.visibleHndl(value)
+    },
   },
 
   mounted() {
-    const self = this
-    const visibleHndl = (visible) => {
-      if (!visible)
-        self.$emit('close')
-      else
-        self.$emit('open')
-
-      self.isVisible = visible
-    }
-
     document.body.addEventListener('keyup', this.onKeyUp)
-    this.$watch(() => this.visible, visibleHndl)
-    this.$watch(() => this.isVisible, visibleHndl)
+    bus.on('modal-close', this.onModalCloseMessage)
   },
 
   unmounted() {

From 485a1db3d3e0547a3e62900c3df1696ef0f87da3 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Thu, 5 Sep 2024 01:31:32 +0200
Subject: [PATCH 09/36] [UI] Several improvements to the FloatingButton
 component.

- Added support for multiple element classes.

- Added `glow` property.

- Added support for absolute initial positioning.

- Added dynamic button size.

- Added FloatingButtons component to support groups of floating buttons.
---
 .../components/elements/FloatingButton.vue    | 87 +++++++++++++++++--
 .../components/elements/FloatingButtons.vue   | 50 +++++++++++
 2 files changed, 128 insertions(+), 9 deletions(-)
 create mode 100644 platypush/backend/http/webapp/src/components/elements/FloatingButtons.vue

diff --git a/platypush/backend/http/webapp/src/components/elements/FloatingButton.vue b/platypush/backend/http/webapp/src/components/elements/FloatingButton.vue
index a3b7ad5ad4..cb7f29479d 100644
--- a/platypush/backend/http/webapp/src/components/elements/FloatingButton.vue
+++ b/platypush/backend/http/webapp/src/components/elements/FloatingButton.vue
@@ -1,7 +1,8 @@
 <template>
-  <div class="floating-btn" :class="className">
+  <div class="floating-btn" :class="classes">
     <button type="button"
             class="btn btn-primary"
+            :class="glow ? 'with-glow' : ''"
             :disabled="disabled"
             :title="title"
             @click="$emit('click', $event)">
@@ -14,7 +15,6 @@
 import Icon from "@/components/elements/Icon";
 
 export default {
-  name: "FloatingButton",
   components: {Icon},
   emits: ["click"],
 
@@ -35,11 +35,49 @@ export default {
     title: {
       type: String,
     },
+    left: {
+      type: Boolean,
+      default: false,
+    },
+    right: {
+      type: Boolean,
+      default: true,
+    },
+    top: {
+      type: Boolean,
+      default: false,
+    },
+    bottom: {
+      type: Boolean,
+      default: true,
+    },
+    glow: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   computed: {
-    className() {
-      return this.class
+    classes() {
+      const classes = {}
+
+      if (this.left) {
+        classes.left = true
+      } else {
+        classes.right = true
+      }
+
+      if (this.top) {
+        classes.top = true
+      } else {
+        classes.bottom = true
+      }
+
+      if (this.class?.length) {
+        classes[this.class] = true
+      }
+
+      return classes
     }
   }
 }
@@ -48,15 +86,32 @@ export default {
 <style lang="scss" scoped>
 .floating-btn {
   position: absolute;
-  bottom: 0;
-  right: 0;
-  margin: auto 1em 1em auto;
+
+  &.left {
+    left: 0;
+    margin-left: 1em;
+  }
+
+  &.right {
+    right: 0;
+    margin-right: 1em;
+  }
+
+  &.top {
+    top: 0;
+    margin-top: 1em;
+  }
+
+  &.bottom {
+    bottom: 0;
+    margin-bottom: 1em;
+  }
 
   button {
     background: $tile-bg !important;
     color: $tile-fg !important;
-    width: 4em;
-    height: 4em;
+    width: $floating-btn-size;
+    height: $floating-btn-size;
     border-radius: 2em;
     border: none !important;
     padding: 0;
@@ -72,6 +127,20 @@ export default {
       color: $disabled-fg !important;
       cursor: not-allowed;
     }
+
+    &.with-glow {
+      &:not(:disabled) {
+        @extend .glow;
+        background: $default-bg-3 !important;
+        color: $ok-fg !important;
+        box-shadow: 0 0 1px 1px $selected-fg !important;
+
+        &:hover {
+          box-shadow: 0 0 1px 1px $active-glow-bg-2 !important;
+          color: $play-btn-fg !important;
+        }
+      }
+    }
   }
 
   :deep(button) {
diff --git a/platypush/backend/http/webapp/src/components/elements/FloatingButtons.vue b/platypush/backend/http/webapp/src/components/elements/FloatingButtons.vue
new file mode 100644
index 0000000000..1a548f4dd7
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/elements/FloatingButtons.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="floating-btns" :class="{direction: direction}">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  emits: ["click"],
+  props: {
+    direction: {
+      type: String,
+      default: "row",
+    },
+
+    size: {
+      type: String,
+      default: "4em",
+    },
+  },
+
+  computed: {
+    buttons() {
+      return this.$el.querySelectorAll(".floating-btn")
+    },
+  },
+
+  mounted() {
+    const buttons = Array.from(this.buttons)
+    let offset = 0
+    buttons.forEach((button, index) => {
+      const size = button.offsetWidth
+      const styleOffset = `calc(${offset}px + (${index} * 1em))`
+      if (this.direction === "row") {
+        if (!parseFloat(getComputedStyle(button).left))
+          button.style.left = styleOffset
+        else
+          button.style.right = styleOffset
+      } else {
+        if (!parseFloat(getComputedStyle(button).top))
+          button.style.top = styleOffset
+        else
+          button.style.bottom = styleOffset
+      }
+
+      offset += size
+    })
+  },
+}
+</script>

From b0d9a95331b919256568e5be7b7c0b2addc3e81b Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Thu, 5 Sep 2024 01:32:51 +0200
Subject: [PATCH 10/36] [UI] Added `title` propery to `EditButton` component.

---
 .../src/components/elements/EditButton.vue      | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/platypush/backend/http/webapp/src/components/elements/EditButton.vue b/platypush/backend/http/webapp/src/components/elements/EditButton.vue
index f24bdde683..e7748ddea5 100644
--- a/platypush/backend/http/webapp/src/components/elements/EditButton.vue
+++ b/platypush/backend/http/webapp/src/components/elements/EditButton.vue
@@ -1,7 +1,9 @@
 <template>
   <button class="edit-btn"
-    @click="proxy($event)" @touch="proxy($event)" @input="proxy($event)"
-  >
+          :title="title"
+          @click="proxy($event)"
+          @touch="proxy($event)"
+          @input="proxy($event)">
     <i class="fas fa-pen-to-square" />
   </button>
 </template>
@@ -9,6 +11,13 @@
 <script>
 export default {
   emits: ['input', 'click', 'touch'],
+  props: {
+    title: {
+      type: String,
+      default: 'Edit',
+    },
+  },
+
   methods: {
     proxy(e) {
       this.$emit(e.type, e)
@@ -26,8 +35,8 @@ export default {
   border: 1px solid rgba(0, 0, 0, 0);
 
   &:hover {
-    background: $hover-bg;
-    border: 1px solid $selected-fg;
+    color: $default-hover-fg;
+    border: none;
   }
 }
 </style>

From cc621cdca62a71db8843459391a3d47209d2b8ae Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Thu, 5 Sep 2024 01:35:05 +0200
Subject: [PATCH 11/36] [UI] Support both string and objects on the `Response`
 component.

---
 .../webapp/src/components/Action/Response.vue | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/platypush/backend/http/webapp/src/components/Action/Response.vue b/platypush/backend/http/webapp/src/components/Action/Response.vue
index e1bf0c6561..55ff647fff 100644
--- a/platypush/backend/http/webapp/src/components/Action/Response.vue
+++ b/platypush/backend/http/webapp/src/components/Action/Response.vue
@@ -31,8 +31,13 @@ export default {
   name: 'Response',
   mixins: [Utils],
   props: {
-    response: String,
-    error: String,
+    response: {
+      type: [String, Object],
+    },
+
+    error: {
+      type: [String, Object],
+    },
   },
 
   computed: {
@@ -57,4 +62,14 @@ export default {
 
 <style lang="scss" scoped>
 @import "common";
+
+.response {
+  .buttons {
+    button:hover {
+      color: $default-hover-fg;
+      background: none;
+      border: none;
+    }
+  }
+}
 </style>

From 4e5c7409086c61a6ee28eefd8a111fd0c95770d7 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Thu, 5 Sep 2024 01:37:11 +0200
Subject: [PATCH 12/36] [File UI] Added support for custom line positioning in
 file editor.

- Adds the ability to select lines from the editor, which in turn will
  highlight them.

- Adds the ability to load a file and scroll at a specific line if the
  URL has with the `line` argument.

- Adds the ability to maximize the file editor modal.
---
 .../webapp/src/components/File/Editor.vue     | 96 ++++++++++++++++++-
 .../src/components/File/EditorModal.vue       | 90 +++++++++++++----
 2 files changed, 160 insertions(+), 26 deletions(-)

diff --git a/platypush/backend/http/webapp/src/components/File/Editor.vue b/platypush/backend/http/webapp/src/components/File/Editor.vue
index 8b6e3df88b..143d0fd763 100644
--- a/platypush/backend/http/webapp/src/components/File/Editor.vue
+++ b/platypush/backend/http/webapp/src/components/File/Editor.vue
@@ -9,10 +9,15 @@
 
       <div class="editor-body">
         <div class="line-numbers" ref="lineNumbers">
-          <span class="line-number" v-for="n in lines" :key="n" v-text="n" />
+          <span class="line-number"
+                :class="{selected: selectedLine === n}"
+                v-for="n in lines"
+                :key="n"
+                @click="selectedLine = selectedLine === n ? null : n"
+                v-text="n" />
         </div>
 
-        <pre ref="pre"><code ref="content" v-html="displayedContent" /></pre>
+        <pre ref="pre"><code ref="content" v-html="displayedContent" /><div class="selected-line" ref="selectedLine" v-if="selectedLine != null" /></pre>
         <textarea ref="textarea" v-model="content" @scroll="syncScroll" @input.stop />
       </div>
 
@@ -54,6 +59,11 @@ export default {
       default: false,
     },
 
+    line: {
+      type: [String, Number],
+      default: null,
+    },
+
     withSave: {
       type: Boolean,
       default: true,
@@ -71,6 +81,7 @@ export default {
       initialContentHash: 0,
       loading: false,
       saving: false,
+      selectedLine: null,
       type: null,
     }
   },
@@ -139,6 +150,12 @@ export default {
       } finally {
         this.loading = false
       }
+
+      if (this.selectedLine) {
+        setTimeout(() => {
+          this.scrollToLine(this.selectedLine)
+        }, 1000)
+      }
     },
 
     async saveFile() {
@@ -190,6 +207,17 @@ export default {
       })
     },
 
+    scrollToLine(line) {
+      const offset = (line - 1) * parseFloat(getComputedStyle(this.$refs.pre).lineHeight)
+      this.$refs.textarea.scrollTo({
+        top: offset,
+        left: 0,
+        behavior: 'smooth',
+      })
+
+      return offset
+    },
+
     highlightContent() {
       this.highlighting = true
 
@@ -243,7 +271,7 @@ export default {
     },
 
     reset() {
-      this.setUrlArgs({file: null})
+      this.setUrlArgs({file: null, line: null})
       this.removeBeforeUnload()
       this.removeKeyListener()
     },
@@ -276,9 +304,36 @@ export default {
         this.highlightedContent = this.content
       }
     },
+
+    selectedLine(line) {
+      line = parseInt(line)
+      if (isNaN(line)) {
+        return
+      }
+
+      const textarea = this.$refs.textarea
+      const lines = this.content.split('\n')
+      const cursor = lines.slice(0, line - 1).join('\n').length + 1
+
+      textarea.setSelectionRange(cursor, cursor)
+      textarea.focus()
+      this.setUrlArgs({line})
+      this.$nextTick(() => {
+        const offset = this.scrollToLine(line)
+        this.$refs.selectedLine.style.top = `${offset}px`
+      })
+    },
   },
 
   mounted() {
+    const args = this.getUrlArgs()
+    const line = parseInt(this.line || args.line || 0)
+    if (line) {
+      if (!isNaN(line)) {
+        this.selectedLine = line
+      }
+    }
+
     this.loadFile()
     this.addBeforeUnload()
     this.addKeyListener()
@@ -332,8 +387,10 @@ $line-numbers-width: 2.5em;
   }
 
   .editor-body {
+    font-family: $monospace-font;
+
     pre, textarea, code, .line-numbers {
-      font-family: 'Fira Code', 'Noto Sans Mono', 'Inconsolata', 'Courier New', monospace;
+      font-family: $monospace-font;
       position: absolute;
       top: 0;
       height: 100%;
@@ -341,6 +398,10 @@ $line-numbers-width: 2.5em;
       white-space: pre;
     }
 
+    pre, textarea, code {
+      background: transparent;
+    }
+
     .line-numbers {
       width: $line-numbers-width;
       background: $tab-bg;
@@ -356,6 +417,15 @@ $line-numbers-width: 2.5em;
         width: 100%;
         text-align: right;
         padding-right: 0.25em;
+        cursor: pointer;
+
+        &:hover {
+          background: $hover-bg;
+        }
+
+        &.selected {
+          background: $selected-bg;
+        }
       }
     }
 
@@ -372,16 +442,32 @@ $line-numbers-width: 2.5em;
       background: transparent;
       overflow-wrap: normal;
       overflow-x: scroll;
-      z-index: 1;
+      z-index: 2;
       color: rgba(0, 0, 0, 0);
       caret-color: black;
       border: none;
       outline: none;
     }
+
+    .selected-line {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 1.5em;
+      background: rgba(110, 255, 160, 0.25);
+    }
   }
 
   :deep(.floating-btn) {
     z-index: 5;
   }
+
+  // Fix for some hljs styles that render white text on white background
+  :deep(code) {
+    .hljs-subst {
+      color: $selected-fg !important;
+    }
+  }
 }
 </style>
diff --git a/platypush/backend/http/webapp/src/components/File/EditorModal.vue b/platypush/backend/http/webapp/src/components/File/EditorModal.vue
index 2891912c2b..3e05db3b2b 100644
--- a/platypush/backend/http/webapp/src/components/File/EditorModal.vue
+++ b/platypush/backend/http/webapp/src/components/File/EditorModal.vue
@@ -8,6 +8,7 @@
           <FileEditor ref="fileEditor"
                       :file="file"
                       :is-new="isNew"
+                      :line="line"
                       @save="$emit('save', $event)"
                       v-if="file" />
         </div>
@@ -26,10 +27,11 @@
 import ConfirmDialog from "@/components/elements/ConfirmDialog";
 import FileEditor from "./Editor";
 import Modal from "@/components/Modal";
+import Utils from '@/Utils'
 
 export default {
   emits: ['close', 'open', 'save'],
-  mixins: [Modal],
+  mixins: [Modal, Utils],
   components: {
     ConfirmDialog,
     FileEditor,
@@ -47,6 +49,11 @@ export default {
       default: false,
     },
 
+    line: {
+      type: [String, Number],
+      default: null,
+    },
+
     withSave: {
       type: Boolean,
       default: true,
@@ -113,15 +120,28 @@ export default {
 
     onClose() {
       this.$refs.fileEditor.reset()
+      this.setUrlArgs({ maximized: null })
       this.$emit('close')
     },
   },
+
+  watch: {
+    maximized() {
+      this.setUrlArgs({ maximized: this.maximized })
+    },
+  },
+
+  mounted() {
+    this.maximized = !!this.getUrlArgs().maximized
+  },
 }
 </script>
 
 <style lang="scss" scoped>
 @import "src/style/items";
 
+$maximized-modal-header-height: 2.75em;
+
 .file-editor-root {
   .file-editor-modal {
     :deep(.modal) {
@@ -133,45 +153,73 @@ export default {
 
       .modal-body {
         width: 100%;
-        height: 50em;
         min-width: 30em;
         max-height: calc(100vh - 2em);
       }
+
+      .content {
+        @extend .expand;
+      }
     }
 
     &:not(.maximized) {
-      :deep(.body) {
-        @include until($tablet) {
-          width: calc(100vw - 2em);
-        }
+      :deep(.modal) {
+        .body {
+          @include until($tablet) {
+            width: calc(100vw - 2em);
+          }
 
-        @include from($tablet) {
-          width: 40em;
-          max-width: 100%;
-        }
+          @include from($tablet) {
+            width: 40em;
+            max-width: 100%;
+          }
 
-        @include from($desktop) {
-          width: 100%;
-          min-width: 50em;
+          @include from($desktop) {
+            width: 100%;
+            min-width: 50em;
+          }
+
+          .modal-body {
+            height: 50em;
+          }
         }
       }
     }
 
     &.maximized {
-      :deep(.body) {
-        width: 100vw;
-        height: 100vh;
+      :deep(.modal) {
+        width: calc(100vw - 2em);
+        height: calc(100vh - 2em);
+
+        .content, .modal-body {
+          width: 100%;
+          height: 100%;
+          max-height: 100%;
+        }
+
+        .header {
+          height: $maximized-modal-header-height;
+        }
+
+        .body {
+          height: calc(100% - #{$maximized-modal-header-height});
+          max-height: 100%;
+        }
       }
     }
   }
 
   .confirm-dialog-container {
     :deep(.modal) {
-      .content {
-        .body {
-          min-width: 30em;
-          max-width: 100%;
-        }
+      width: 35em !important;
+      height: 9em !important;
+      max-width: 100%;
+      max-height: 100%;
+
+      .body {
+        width: 100% !important;
+        height: 100% !important;
+        justify-content: center;
       }
     }
   }

From 44e319e7caeb5becceb6cbbe24abdf8aab8f0e70 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Thu, 5 Sep 2024 01:40:26 +0200
Subject: [PATCH 13/36] [UI] Listen for keyup, keydown and touch events on
 NameEditor.

---
 .../webapp/src/components/elements/NameEditor.vue     | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/platypush/backend/http/webapp/src/components/elements/NameEditor.vue b/platypush/backend/http/webapp/src/components/elements/NameEditor.vue
index 1d1ec251ef..f88892609b 100644
--- a/platypush/backend/http/webapp/src/components/elements/NameEditor.vue
+++ b/platypush/backend/http/webapp/src/components/elements/NameEditor.vue
@@ -1,10 +1,15 @@
 <template>
   <form @submit.prevent="submit" class="name-editor">
-    <input type="text" v-model="text" :disabled="disabled" ref="input">
+    <input type="text"
+           :disabled="disabled"
+           v-model="text"
+           @keydown="proxy"
+           @keyup="proxy"
+           ref="input">
     <button type="submit">
       <i class="fas fa-circle-check" />
     </button>
-    <button class="cancel" @click="$emit('cancel')" @touch="$emit('cancel')">
+    <button class="cancel" @click="$emit('cancel')">
       <i class="fas fa-ban" />
     </button>
     <slot />
@@ -13,7 +18,7 @@
 
 <script>
 export default {
-  emits: ['input', 'cancel'],
+  emits: ['input', 'cancel', 'keyup', 'keydown'],
   props: {
     value: {
       type: String,

From 1316af9553cdbcb619b4433ba50eea3911fd3ea8 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Thu, 5 Sep 2024 01:41:04 +0200
Subject: [PATCH 14/36] [UI] Added general-purpose drag-and-drop components.

This is to bridge the gap between pointer-based and touch-based devices
and provide a drag-and-drop implementation that exposes a consistent API
for both the interfaces.

These components work by wrapping an underlying draggable/droppable DOM
element and proxying the event handlers consistently when drag/touch
events are detected.

This allows to listen to high-level drag/drop events even on touch-based
interface based on touch start/move/end events.

Example usage:

```vue
<template>
  <div class="draggable" ref="draggable">
    I can be dragged.
  </div>

  <div class="droppable" ref="droppable">
    Drop elements here.
  </div>

  <Draggable :element="$refs.draggable"
             @drag="console.log('The element is being dragged')"
             @drop="console.log('The element is been dropped')" />

  <Droppable :element="$refs.droppable"
             @dragenter="console.log('Entering')"
             @dragleave="console.log('Leaving')"
             @dragover="console.log('Dragging over')"
             @drop="console.log('Dropped!')" />
</template>

<style lang="scss" scoped>
.draggable {
  &.dragged {
    opacity: 0.5;
  }
}

.droppable {
  &.active {
    border: 1px solid green;
  }

  &.selected {
    background: yellow;
  }
}
</style>
```
---
 .../src/components/elements/Draggable.vue     | 416 ++++++++++++++++++
 .../src/components/elements/Droppable.vue     | 174 ++++++++
 2 files changed, 590 insertions(+)
 create mode 100644 platypush/backend/http/webapp/src/components/elements/Draggable.vue
 create mode 100644 platypush/backend/http/webapp/src/components/elements/Droppable.vue

diff --git a/platypush/backend/http/webapp/src/components/elements/Draggable.vue b/platypush/backend/http/webapp/src/components/elements/Draggable.vue
new file mode 100644
index 0000000000..feb37e1899
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/elements/Draggable.vue
@@ -0,0 +1,416 @@
+<template>
+  <div class="dragged"
+       :class="{ hidden: !draggingVisible }"
+       :style="{ top: `${top}px`, left: `${left}px` }">
+    <div class="content"
+         v-html="element?.outerHTML || '...'"
+         v-if="draggingVisible" />
+  </div>
+</template>
+
+<script>
+export default {
+  emits: [
+    'contextmenu',
+    'drag',
+    'drop',
+  ],
+
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+
+    element: {
+      type: Object,
+    },
+
+    touchDragStartThreshold: {
+      type: Number,
+      default: 500,
+    },
+
+    touchDragMoveCancelDistance: {
+      type: Number,
+      default: 10,
+    },
+
+    value: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  data() {
+    return {
+      dragging: false,
+      draggingHTML: null,
+      eventsHandlers: {
+        contextmenu: this.onContextMenu,
+        drag: this.onDrag,
+        dragend: this.onDragEnd,
+        dragstart: this.onDragStart,
+        drop: this.onDrop,
+        touchcancel: this.onDrop,
+        touchend: this.onTouchEnd,
+        touchmove: this.onTouchMove,
+        touchstart: this.onTouchStart,
+      },
+      initialCursorOffset: null,
+      left: 0,
+      top: 0,
+      touchDragStartTimer: null,
+      touchScrollDirection: [0, 0],
+      touchScrollSpeed: 10,
+      touchScrollTimer: null,
+      touchStart: null,
+      touchOverElement: null,
+    }
+  },
+
+  computed: {
+    draggingVisible() {
+      return this.dragging && this.touchStart
+    },
+
+    shouldScroll() {
+      return this.touchScrollDirection[0] || this.touchScrollDirection[1]
+    },
+  },
+
+  methods: {
+    onContextMenu(event) {
+      // If the element is disabled, or there's no touch start event, then we should
+      // emit the contextmenu event as usual.
+      if (this.disabled || !this.touchStart) {
+        this.$emit('contextmenu', event)
+        return
+      }
+
+      // Otherwise, if a touch start event was registered, then we should prevent the
+      // context menu event from being emitted, as it's most likely a long touch event
+      // that should trigger the drag event.
+      event.preventDefault()
+      event.stopPropagation()
+      this.onDragStart(event)
+    },
+
+    onDragStart(event) {
+      if (this.disabled) {
+        return
+      }
+
+      this.dragging = true
+      this.draggingHTML = this.$slots.default?.()?.el?.outerHTML
+      event.value = this.value
+
+      if (event.dataTransfer) {
+        event.dataTransfer.dropEffect = 'move'
+        event.dataTransfer.effectAllowed = 'move'
+        event.dataTransfer.setData('application/json', JSON.stringify(this.value))
+      }
+
+      this.cancelTouchDragStart()
+      this.$emit('drag', event)
+    },
+
+    onDragEnd(event) {
+      if (this.disabled) {
+        return
+      }
+
+      this.reset()
+      this.$emit('drop', event)
+    },
+
+    onTouchStart(event) {
+      if (this.disabled) {
+        return
+      }
+
+      const touch = event.touches?.[0]
+      if (!touch) {
+        return
+      }
+
+      this.touchStart = [touch.clientX, touch.clientY]
+      this.cancelTouchDragStart()
+      this.touchDragStartTimer = setTimeout(() => {
+        this.onDragStart(event)
+      }, this.touchDragStartThreshold)
+    },
+
+    onTouchMove(event) {
+      if (this.disabled) {
+        return
+      }
+
+      const touch = event.touches?.[0]
+      if (!(touch && this.touchStart)) {
+        return
+      }
+
+      // If we received a touch move event, and there's a touch drag start timer,
+      // then most likely the user is not trying to drag the element, but just scrolling.
+      // In this case, we should cancel the drag start timer.
+      if (this.touchDragStartTimer) {
+        const distance = Math.hypot(
+          touch.clientX - this.touchStart[0],
+          touch.clientY - this.touchStart[1]
+        )
+
+        if (distance > this.touchDragMoveCancelDistance) {
+          this.reset()
+          return
+        }
+
+        this.onDragStart(event)
+      }
+
+      event.preventDefault()
+      const { clientX, clientY } = touch
+      this.left = clientX
+      this.top = clientY
+      this.left = clientX - this.touchStart[0]
+      this.top = clientY - this.touchStart[1]
+      this.touchScroll(event)
+
+      // Get droppable element under the touch, excluding the current dragged element
+      let droppable = document.elementsFromPoint(clientX, clientY).filter(
+        el => el.dataset?.droppable && !el.classList.contains('dragged')
+      )?.[0]
+
+      if (!droppable) {
+        this.touchOverElement = null
+        return
+      }
+
+      this.dispatchEvent('dragenter', droppable)
+      this.touchOverElement = droppable
+    },
+
+    touchScroll(event) {
+      if (this.disabled) {
+        return
+      }
+
+      const parent = this.getScrollableParent()
+      if (!parent) {
+        return
+      }
+
+      const touch = event.touches?.[0]
+      if (!touch) {
+        return
+      }
+
+      const { clientX, clientY } = touch
+      const rect = parent.getBoundingClientRect()
+      const touchOffset = [
+        (clientX - rect.left) / rect.width,
+        (clientY - rect.top) / rect.height
+      ]
+
+      const scrollDirection = [0, 0]
+
+      if (touchOffset[0] < 0) {
+        scrollDirection[0] = -1
+      } else if (touchOffset[0] > 1) {
+        scrollDirection[0] = 1
+      }
+
+      if (touchOffset[1] < 0) {
+        scrollDirection[1] = -1
+      } else if (touchOffset[1] > 1) {
+        scrollDirection[1] = 1
+      }
+
+      this.handleTouchScroll(scrollDirection, parent)
+    },
+
+    onTouchEnd(event) {
+      if (this.disabled) {
+        return
+      }
+
+      const droppable = this.touchOverElement
+      if (droppable) {
+        this.dispatchEvent('drop', droppable)
+      }
+
+      this.onDragEnd(event)
+    },
+
+    onDrop(event) {
+      if (this.disabled) {
+        return
+      }
+
+      this.reset()
+      this.$emit('drop', event)
+    },
+
+    handleTouchScroll(value, parent) {
+      this.touchScrollDirection = value
+      if (!(value[0] || value[1])) {
+        this.cancelScroll()
+        return
+      }
+
+      if (this.touchScrollTimer) {
+        return
+      }
+
+      this.touchScrollTimer = setInterval(() => {
+        if (!parent) {
+          return
+        }
+
+        const [x, y] = value
+        parent.scrollBy(x * this.touchScrollSpeed, y * this.touchScrollSpeed)
+      }, 1000 / 60)
+    },
+
+    getScrollableParent() {
+      let parent = this.element?.parentElement
+      while (parent) {
+        if (
+          parent.scrollHeight > parent.clientHeight ||
+          parent.scrollWidth > parent.clientWidth
+        ) {
+          const style = window.getComputedStyle(parent)
+          if (['scroll', 'auto'].includes(style.overflowY) || ['scroll', 'auto'].includes(style.overflowX)) {
+            return parent
+          }
+        }
+
+        parent = parent.parentElement
+      }
+      return null
+    },
+
+    dispatchEvent(type, droppable) {
+      droppable.dispatchEvent(
+        new DragEvent(
+          type, {
+            target: {
+              ...droppable,
+              value: this.value,
+            }
+          }
+        )
+      )
+    },
+
+    cancelScroll() {
+      this.touchScrollDirection = [0, 0]
+
+      if (this.touchScrollTimer) {
+        clearInterval(this.touchScrollTimer)
+        this.touchScrollTimer = null
+      }
+    },
+
+    cancelTouchDragStart() {
+      if (this.touchDragStartTimer) {
+        clearTimeout(this.touchDragStartTimer)
+        this.touchDragStartTimer = null
+      }
+    },
+
+    reset() {
+      this.cancelTouchDragStart()
+      this.cancelScroll()
+      this.dragging = false
+      this.touchStart = null
+      this.touchOverElement = null
+      this.left = 0
+      this.top = 0
+      this.initialCursorOffset = null
+    },
+
+    installHandlers() {
+      console.debug('Installing drag handlers on', this.element)
+      this.element?.setAttribute('draggable', true)
+      Object.entries(this.eventsHandlers).forEach(([event, handler]) => {
+        this.element?.addEventListener(event, handler)
+      })
+    },
+
+    uninstallHandlers() {
+      console.debug('Uninstalling drag handlers from', this.element)
+      this.element?.setAttribute('draggable', false)
+      Object.entries(this.eventsHandlers).forEach(([event, handler]) => {
+        this.element?.removeEventListener(event, handler)
+      })
+    },
+  },
+
+  watch: {
+    dragging() {
+      if (this.dragging) {
+        this.element?.classList.add('dragged')
+        this.$nextTick(() => {
+          if (!this.touchStart) {
+            return
+          }
+
+          this.initialCursorOffset = [
+            this.element?.offsetLeft - this.touchStart[0],
+            this.element?.offsetTop - this.touchStart[1]
+          ]
+        })
+      } else {
+        this.element?.classList.remove('dragged')
+      }
+    },
+
+    disabled(value) {
+      if (value) {
+        this.reset()
+        this.uninstallHandlers()
+      } else {
+        this.installHandlers()
+      }
+    },
+
+    element() {
+      this.uninstallHandlers()
+      this.installHandlers()
+    },
+
+    touchOverElement(value, oldValue) {
+      if (value === oldValue) {
+        return
+      }
+
+      if (oldValue) {
+        this.dispatchEvent('dragleave', oldValue)
+      }
+
+      if (value) {
+        this.dispatchEvent('dragenter', value)
+      }
+    },
+  },
+
+  mounted() {
+    this.installHandlers()
+  },
+
+  unmounted() {
+    this.uninstallHandlers()
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.dragged {
+  position: absolute;
+  max-width: 100%;
+  max-height: 100%;
+  transform: scale(0.5);
+  z-index: 1000;
+}
+</style>
diff --git a/platypush/backend/http/webapp/src/components/elements/Droppable.vue b/platypush/backend/http/webapp/src/components/elements/Droppable.vue
new file mode 100644
index 0000000000..530a177ea5
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/elements/Droppable.vue
@@ -0,0 +1,174 @@
+<template>
+  <div class="droppable" />
+</template>
+
+<script>
+export default {
+  emits: [
+    'dragenter',
+    'dragleave',
+    'dragover',
+    'drop',
+  ],
+
+  props: {
+    element: {
+      type: Object,
+    },
+
+    active: {
+      type: Boolean,
+      default: false,
+    },
+
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      eventsHandlers: {
+        dragenter: this.onDragEnter,
+        dragleave: this.onDragLeave,
+        dragover: this.onDragOver,
+        drop: this.onDrop,
+      },
+      selected: false,
+    }
+  },
+
+  methods: {
+    onDragEnter(event) {
+      if (this.disabled || this.selected) {
+        return
+      }
+
+      this.selected = true
+      this.$emit('dragenter', event)
+    },
+
+    onDragLeave(event) {
+      if (this.disabled || !this.selected) {
+        return
+      }
+
+      const rect = this.element.getBoundingClientRect()
+      if (
+        event.clientX >= rect.left &&
+        event.clientX <= rect.right &&
+        event.clientY >= rect.top &&
+        event.clientY <= rect.bottom
+      ) {
+        return
+      }
+
+      this.selected = false
+      this.$emit('dragleave', event)
+    },
+
+    onDragOver(event) {
+      if (this.disabled) {
+        return
+      }
+
+      event.preventDefault()
+      this.selected = true
+      this.$emit('dragover', event)
+    },
+
+    onDrop(event) {
+      if (this.disabled) {
+        return
+      }
+
+      this.selected = false
+      this.$emit('drop', event)
+    },
+
+    installHandlers() {
+      const el = this.element
+      if (!el) {
+        return
+      }
+
+      console.debug('Installing drop handlers on', this.element)
+      if (el.dataset) {
+        el.dataset.droppable = true;
+      }
+
+      if (el.addEventListener) {
+        Object.entries(this.eventsHandlers).forEach(([event, handler]) => {
+          el.addEventListener(event, handler)
+        })
+      }
+    },
+
+    uninstallHandlers() {
+      const el = this.element
+      if (!el) {
+        return
+      }
+
+      console.debug('Uninstalling drop handlers from', this.element)
+      if (el.dataset?.droppable) {
+        delete el.dataset.droppable;
+      }
+
+      if (el.removeEventListener) {
+        Object.entries(this.eventsHandlers).forEach(([event, handler]) => {
+          el.removeEventListener(event, handler)
+        })
+      }
+    },
+  },
+
+  watch: {
+    active() {
+      if (this.active) {
+        this.element?.classList.add('active')
+      } else {
+        this.element?.classList.remove('active')
+      }
+    },
+
+    disabled: {
+      handler() {
+        if (this.disabled) {
+          this.element?.classList.add('disabled')
+        } else {
+          this.element?.classList.remove('disabled')
+        }
+      },
+    },
+
+    element: {
+      handler() {
+        this.uninstallHandlers()
+        this.installHandlers()
+      },
+    },
+
+    selected: {
+      handler(value, oldValue) {
+        if (value && !oldValue) {
+          this.element?.classList.add('selected')
+        } else if (!value && oldValue) {
+          this.element?.classList.remove('selected')
+        }
+      },
+    },
+  },
+
+  mounted() {
+    this.$nextTick(() => {
+      this.installHandlers()
+    })
+  },
+
+  unmounted() {
+    this.uninstallHandlers()
+  },
+}
+</script>

From 1133c6019af765d4800e52d7ec7d59301240af0f Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Thu, 5 Sep 2024 01:56:49 +0200
Subject: [PATCH 15/36] [UI] Added general-purpose entity icon editor
 component.

---
 .../components/panels/Entities/IconEditor.vue | 260 ++++++++++++++++++
 .../src/components/panels/Entities/Modal.vue  | 122 ++------
 2 files changed, 276 insertions(+), 106 deletions(-)
 create mode 100644 platypush/backend/http/webapp/src/components/panels/Entities/IconEditor.vue

diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/IconEditor.vue b/platypush/backend/http/webapp/src/components/panels/Entities/IconEditor.vue
new file mode 100644
index 0000000000..a547fb0e68
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/IconEditor.vue
@@ -0,0 +1,260 @@
+<template>
+  <form class="icon-editor"
+        @submit="onIconEdit(newIcon, $event)"
+        @click.stop>
+    <div class="row item">
+      <div class="title">
+        Icon
+        <EditButton title="Edit Icon"
+                    @click.stop="editIcon = true"
+                    v-if="!editIcon" />
+      </div>
+      <div class="value icon-canvas">
+        <span class="icon-editor" v-if="editIcon">
+          <span class="icon-edit-form" v-if="newIcon != null">
+            <span class="icon-container">
+              <img :src="currentIcon.url" v-if="currentIcon?.url" />
+              <i :class="currentIcon.class" :style="{color: currentIcon.color}" v-else />
+            </span>
+
+            <NameEditor :value="currentIcon.url || currentIcon.class"
+                        :disabled="loading"
+                        @keyup="newIcon = $event.target.value?.trim()"
+                        @input="onIconEdit(newIcon)"
+                        @cancel="editIcon = false">
+              <button type="button"
+                      title="Reset"
+                      @click.stop="onIconEdit(null, $event)">
+                <i class="fas fa-rotate-left" />
+              </button>
+            </NameEditor>
+          </span>
+
+          <span class="help">
+            Supported: image URLs or
+            <a href="https://fontawesome.com/icons" target="_blank">FontAwesome icon classes</a>.
+          </span>
+        </span>
+
+        <Icon v-bind="currentIcon" v-else />
+      </div>
+    </div>
+
+    <div class="row item">
+      <div class="title">
+        Icon color
+      </div>
+      <div class="value icon-color-picker">
+        <input type="color"
+               :value="currentIcon.color"
+               @input.stop
+               @change.stop="onIconColorEdit">
+        <button type="button"
+                title="Reset"
+                @click.stop="onIconColorEdit(null)">
+          <i class="fas fa-rotate-left" />
+        </button>
+      </div>
+    </div>
+  </form>
+</template>
+
+<script>
+import EditButton from "@/components/elements/EditButton";
+import Icon from "@/components/elements/Icon";
+import NameEditor from "@/components/elements/NameEditor";
+import Utils from "@/Utils";
+import meta from './meta.json';
+
+export default {
+  components: {
+    EditButton,
+    Icon,
+    NameEditor,
+  },
+  mixins: [Utils],
+  emits: ['change', 'input'],
+  props: {
+    entity: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      editIcon: false,
+      loading: false,
+      newIcon: null,
+      newColor: null,
+    }
+  },
+
+  computed: {
+    currentIcon() {
+      return {
+        ...((meta[this.entity.type] || {})?.icon || {}),
+        ...(this.entity.meta?.icon || {}),
+        ...(this.newIcon ? this.iconObj(this.newIcon) : {}),
+        ...(this.newColor?.length ? {color: this.newColor} : {}),
+      }
+    },
+  },
+
+  methods: {
+    async edit(icon, event) {
+      const req = {
+        [this.entity.id]: {icon},
+      }
+      this.loading = true
+
+      if (event)
+        event.stopPropagation()
+
+      try {
+        const entity = (await this.request('entities.set_meta', req))[0]
+        icon = entity?.meta?.icon
+        if (icon) {
+          this.$emit('input', icon)
+        }
+      } finally {
+        this.loading = false
+        this.editIcon = false
+      }
+    },
+
+    async onIconEdit(newIcon, event) {
+      const icon = {
+        ...this.currentIcon,
+        ...(this.iconObj(newIcon) || {}),
+      }
+
+      await this.edit(icon, event)
+    },
+
+    async onIconColorEdit(event) {
+      const color = event?.target?.value
+      const icon = {
+        ...this.currentIcon,
+        ...(color?.length ? {color} : {color: null}),
+      }
+
+      this.newColor = color
+      await this.edit(icon, event)
+    },
+
+    iconObj(iconStr) {
+      if (!iconStr?.length)
+        return {
+          ...this.currentIcon,
+          url: this.entity.meta?.icon?.url,
+          class: this.entity.meta?.icon?.class,
+        }
+
+      if (iconStr.startsWith('http'))
+        return {url: iconStr}
+
+      return {class: iconStr}
+    },
+  },
+
+  watch: {
+    editIcon() {
+      this.newIcon = (this.entity.meta?.icon?.['class'] || this.entity.meta?.icon?.url)?.trim()
+    },
+
+    newIcon() {
+      this.$emit('change', this.currentIcon)
+    },
+
+    newColor() {
+      this.$emit('change', this.currentIcon)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import "common";
+
+.icon-editor {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .item {
+    display: flex;
+    align-items: center;
+    padding-bottom: 0.5em;
+
+    @include until($tablet) {
+      flex-direction: column;
+      justify-content: center;
+    }
+
+    .title {
+      width: 10em;
+
+      @include until($tablet) {
+        width: 100%;
+      }
+    }
+
+    .value {
+      display: inline-flex;
+      flex: 1;
+      justify-content: flex-end;
+
+      @include until($tablet) {
+        width: 100%;
+        justify-content: flex-start;
+      }
+    }
+
+    .icon-editor {
+      align-items: flex-end;
+
+      @include until($tablet) {
+        align-items: flex-start;
+      }
+
+      .icon-container {
+        margin-right: 0.5em;
+      }
+
+      img {
+        max-width: 2em;
+        max-height: 2em;
+      }
+    }
+  }
+
+  .icon-canvas {
+    display: inline-flex;
+    align-items: center;
+
+    @include until($tablet) {
+      .icon-container {
+        justify-content: left;
+      }
+    }
+
+    @include from($tablet) {
+      .icon-container {
+        justify-content: right;
+        margin-right: 0.5em;
+      }
+    }
+  }
+
+  button {
+    border: none;
+    background: none;
+    padding: 0 0.5em;
+  }
+
+  .help {
+    font-size: 0.75em;
+  }
+}
+</style>
diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/Modal.vue b/platypush/backend/http/webapp/src/components/panels/Entities/Modal.vue
index fd704d6933..94323f2444 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/Modal.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/Modal.vue
@@ -20,40 +20,7 @@
     </div>
 
     <div class="table-row">
-      <div class="title">
-        Icon
-        <EditButton @click="editIcon = true" v-if="!editIcon" />
-      </div>
-      <div class="value icon-canvas">
-        <span class="icon-editor" v-if="editIcon">
-          <NameEditor :value="entity.meta?.icon?.class || entity.meta?.icon?.url" @input="onIconEdit"
-            @cancel="editIcon = false" :disabled="loading">
-            <button type="button" title="Reset" @click="onIconEdit(null)"
-                @touch="onIconEdit(null)">
-              <i class="fas fa-rotate-left" />
-            </button>
-          </NameEditor>
-          <span class="help">
-            Supported: image URLs or
-            <a href="https://fontawesome.com/icons" target="_blank">FontAwesome icon classes</a>.
-          </span>
-        </span>
-
-        <Icon v-bind="entity?.meta?.icon || {}" v-else />
-      </div>
-    </div>
-
-    <div class="table-row">
-      <div class="title">
-        Icon color
-      </div>
-      <div class="value icon-color-picker">
-        <input type="color" :value="entity.meta?.icon?.color" @change="onIconColorEdit">
-        <button type="button" title="Reset" @click="onIconColorEdit(null)"
-            @touch="onIconColorEdit(null)">
-          <i class="fas fa-rotate-left" />
-        </button>
-      </div>
+      <IconEditor :entity="entity" @input="onIconEdit" />
     </div>
 
     <div class="table-row">
@@ -206,14 +173,13 @@
 
 <script>
 import Modal from "@/components/Modal";
-import Icon from "@/components/elements/Icon";
+import IconEditor from "./IconEditor";
 import ConfirmDialog from "@/components/elements/ConfirmDialog";
 import EditButton from "@/components/elements/EditButton";
 import EntityIcon from "./EntityIcon"
 import NameEditor from "@/components/elements/NameEditor";
 import Utils from "@/Utils";
 import Entity from "./Entity";
-import meta from './meta.json';
 
 // These fields have a different rendering logic than the general-purpose one
 const specialFields = [
@@ -233,9 +199,14 @@ const specialFields = [
 ]
 
 export default {
-  name: "EntityModal",
   components: {
-    Entity, EntityIcon, Modal, EditButton, NameEditor, Icon, ConfirmDialog
+    ConfirmDialog,
+    EditButton,
+    Entity,
+    EntityIcon,
+    IconEditor,
+    Modal,
+    NameEditor,
   },
   mixins: [Utils],
   emits: ['input', 'loading', 'entity-update'],
@@ -276,7 +247,6 @@ export default {
     return {
       loading: false,
       editName: false,
-      editIcon: false,
       configCollapsed: true,
       childrenCollapsed: true,
       extraInfoCollapsed: true,
@@ -308,47 +278,14 @@ export default {
       }
     },
 
-    async onIconEdit(newIcon) {
-      this.loading = true
-
-      try {
-        const icon = {url: null, class: null}
-        if (newIcon?.length) {
-          if (newIcon.startsWith('http'))
-            icon.url = newIcon
-          else
-            icon.class = newIcon
-        } else {
-          icon.url = (meta[this.entity.type] || {})?.icon?.url
-          icon.class = (meta[this.entity.type] || {})?.icon?.['class']
+    onIconEdit(icon) {
+      this.$emit(
+        'input',
+        {
+          ...this.entity,
+          meta: {...this.entity.meta, icon},
         }
-
-        const req = {}
-        req[this.entity.id] = {icon: icon}
-        await this.request('entities.set_meta', req)
-      } finally {
-        this.loading = false
-        this.editIcon = false
-      }
-    },
-
-    async onIconColorEdit(event) {
-      this.loading = true
-
-      try {
-        const icon = this.entity.meta?.icon || {}
-        if (event)
-          icon.color = event.target.value
-        else
-          icon.color = null
-
-        const req = {}
-        req[this.entity.id] = {icon: icon}
-        await this.request('entities.set_meta', req)
-      } finally {
-        this.loading = false
-        this.editIcon = false
-      }
+      )
     },
 
     stringify(value) {
@@ -419,39 +356,12 @@ export default {
     }
   }
 
-  .icon-canvas {
-    display: inline-flex;
-    align-items: center;
-
-    @include until($tablet) {
-      .icon-container {
-        justify-content: left;
-      }
-    }
-
-    @include from($tablet) {
-      .icon-container {
-        justify-content: right;
-        margin-right: 0.5em;
-      }
-    }
-  }
-
-  .icon-editor {
-    display: flex;
-    flex-direction: column;
-  }
-
   button {
     border: none;
     background: none;
     padding: 0 0.5em;
   }
 
-  .help {
-    font-size: 0.75em;
-  }
-
   .delete-entity-container {
     color: $error-fg;
     cursor: pointer;

From bbfc5b32e644213aba4a318e863c3d7396d339c1 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Thu, 5 Sep 2024 02:00:52 +0200
Subject: [PATCH 16/36] [UI] Added integration icons to the ActionEditor
 autocomplete.

---
 .../src/components/Action/ActionEditor.vue    | 29 ++++++++++++++++---
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/platypush/backend/http/webapp/src/components/Action/ActionEditor.vue b/platypush/backend/http/webapp/src/components/Action/ActionEditor.vue
index aeb01799b4..ecf3fc453c 100644
--- a/platypush/backend/http/webapp/src/components/Action/ActionEditor.vue
+++ b/platypush/backend/http/webapp/src/components/Action/ActionEditor.vue
@@ -82,6 +82,7 @@
                         :selected-arg="selectedArg"
                         :selected-argdoc="selectedArgdoc"
                         @add="addArg"
+                        @input="emitInput({name: action.name, args: $event})"
                         @select="selectArgdoc"
                         @remove="removeArg"
                         @arg-edit="action.args[$event.name].value = $event.value"
@@ -193,11 +194,26 @@ export default {
     },
 
     autocompleteItems() {
-      if (this.getPluginName(this.action.name) in this.plugins) {
-        return Object.keys(this.actions).sort()
+      let plugin = this.getPluginName(this.action.name)
+      let items = []
+
+      if (plugin in this.plugins) {
+        items = Object.keys(this.actions).sort()
+      } else {
+        plugin = undefined
+        items = Object.keys(this.plugins).sort().map((pluginName) => `${pluginName}.`)
       }
 
-      return Object.keys(this.plugins).sort().map((pluginName) => `${pluginName}.`)
+      return items.map((item) => {
+        const iconName = plugin || item.replace(/\.+$/, '')
+        return {
+          prefix: `
+            <img src="https://static.platypush.tech/icons/${iconName}-64.png"
+                 style="width: 1em; height: 1em; margin-right: 0.75em"
+                 class="plugin-icon" />`,
+          text: item,
+        }
+      })
     },
 
     actionInput() {
@@ -547,7 +563,12 @@ export default {
 
   async mounted() {
     await this.refresh()
-    await this.onValueChanged()
+    this.onValueChanged()
+  },
+
+  unmounted() {
+    this.actionDocsCache = {}
+    this.setUrlArgs({action: undefined})
   },
 }
 </script>

From 15cf611c95354f16ace4ef2b911ad9601933b89e Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Thu, 5 Sep 2024 02:02:44 +0200
Subject: [PATCH 17/36] [#341] [UI] Implemented support for procedure entities.

- Added UI panel.

- Added support for entity types.

- Enhanced ability to edit procedures.

- Added ability to create, rename, edit, duplicate and delete stored
  procedures.

- Added support for YAML dumps of non-Python procedures.

- Added support for visualizing Python procedures directly in their
  source files.
---
 .../src/components/Action/ActionArgs.vue      |  29 +-
 .../src/components/Action/ActionTile.vue      | 318 ++++---
 .../src/components/Action/ActionsList.vue     | 222 +++++
 .../src/components/Action/ActionsListItem.vue | 210 +++++
 .../webapp/src/components/Action/vars.scss    |  16 +-
 .../http/webapp/src/components/Nav.vue        |   5 +-
 .../components/Procedure/ProcedureDump.vue    |  91 ++
 .../components/Procedure/ProcedureEditor.vue  | 847 +++++++++++++++---
 .../Procedure/ProcedureEditorModal.vue        | 126 +++
 .../src/components/panels/Entities/Index.vue  |   1 +
 .../components/panels/Entities/Procedure.vue  | 707 +++++++++++++++
 .../components/panels/Procedures/Index.vue    | 310 +++++++
 12 files changed, 2624 insertions(+), 258 deletions(-)
 create mode 100644 platypush/backend/http/webapp/src/components/Action/ActionsList.vue
 create mode 100644 platypush/backend/http/webapp/src/components/Action/ActionsListItem.vue
 create mode 100644 platypush/backend/http/webapp/src/components/Procedure/ProcedureDump.vue
 create mode 100644 platypush/backend/http/webapp/src/components/Procedure/ProcedureEditorModal.vue
 create mode 100644 platypush/backend/http/webapp/src/components/panels/Entities/Procedure.vue
 create mode 100644 platypush/backend/http/webapp/src/components/panels/Procedures/Index.vue

diff --git a/platypush/backend/http/webapp/src/components/Action/ActionArgs.vue b/platypush/backend/http/webapp/src/components/Action/ActionArgs.vue
index d6c2f8bc6e..593bd0bbda 100644
--- a/platypush/backend/http/webapp/src/components/Action/ActionArgs.vue
+++ b/platypush/backend/http/webapp/src/components/Action/ActionArgs.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="args-body">
+  <div class="args-body" @keydown="onKeyDown">
     <div class="args-list"
          v-if="Object.keys(action.args).length || action.supportsExtraArgs">
       <!-- Supported action arguments -->
@@ -77,9 +77,11 @@ export default {
     'arg-edit',
     'extra-arg-name-edit',
     'extra-arg-value-edit',
+    'input',
     'remove',
     'select',
   ],
+
   props: {
     action: Object,
     loading: Boolean,
@@ -88,6 +90,18 @@ export default {
     selectedArgdoc: String,
   },
 
+  computed: {
+    allArgs() {
+      return {
+        ...this.action.args,
+        ...this.action.extraArgs.reduce((acc, arg) => {
+          acc[arg.name] = arg
+          return acc
+        }, {}),
+      }
+    },
+  },
+
   methods: {
     onArgAdd() {
       this.$emit('add')
@@ -124,6 +138,19 @@ export default {
     onSelect(arg) {
       this.$emit('select', arg)
     },
+
+    onKeyDown(event) {
+      if (event.key === 'Enter' && !(event.shiftKey || event.ctrlKey || event.altKey || event.metaKey))
+        this.onEnter(event)
+    },
+
+    onEnter(event) {
+      if (!event.target.tagName.match(/input|textarea/i))
+        return
+
+      event.preventDefault()
+      this.$emit('input', this.allArgs)
+    },
   },
 }
 </script>
diff --git a/platypush/backend/http/webapp/src/components/Action/ActionTile.vue b/platypush/backend/http/webapp/src/components/Action/ActionTile.vue
index 3ae00f50e3..65d9266994 100644
--- a/platypush/backend/http/webapp/src/components/Action/ActionTile.vue
+++ b/platypush/backend/http/webapp/src/components/Action/ActionTile.vue
@@ -1,55 +1,99 @@
 <template>
-  <div class="action-tile"
-       :class="{drag: draggable && dragging}"
-       :draggable="draggable"
-       @dragstart="onDragStart"
-       @dragend="onDragEnd"
-       @click="$refs.actionEditor.show">
-    <div class="action-delete" title="Remove" v-if="withDelete" @click.stop="$emit('delete')">
-      <i class="icon fas fa-xmark" />
-    </div>
+  <div class="action-tile-container">
+    <div class="action-tile"
+         ref="tile"
+         @click="$refs.actionEditor.show">
+      <div class="action-delete"
+           title="Remove"
+           v-if="withDelete && !readOnly"
+           @click.stop="$emit('delete')">
+        <i class="icon fas fa-xmark" />
+      </div>
 
-    <div class="action-name" v-if="name?.length">
-      {{ name }}
-    </div>
-
-    <div class="new-action" v-else>
-      <i class="icon fas fa-plus" />&nbsp; Add Action
-    </div>
-
-    <div class="action-args" v-if="Object.keys(value.args || {})?.length">
-      <div class="arg" v-for="(arg, name) in value.args" :key="name">
-        <div class="arg-name">
+      <div class="action-name" v-if="name?.length">
+        <span class="icon">
+          <ExtensionIcon :name="name.split('.')[0]" size="1.5em" />
+        </span>
+        <span class="name">
           {{ name }}
-        </div>
+        </span>
+      </div>
 
-        <div class="arg-value">
-          {{ arg }}
+      <div class="new-action" v-else>
+        <i class="icon fas fa-plus" />&nbsp; Add Action
+      </div>
+
+      <div class="action-args" v-if="Object.keys(value.args || {})?.length">
+        <div class="arg" v-for="(arg, name) in value.args" :key="name">
+          <div class="arg-name">
+            {{ name }}
+          </div>
+
+          <div class="arg-value">
+            {{ arg }}
+          </div>
         </div>
       </div>
     </div>
-  </div>
 
-  <div class="action-editor-container">
-    <Modal ref="actionEditor" title="Edit Action">
-      <ActionEditor :value="value" with-save @input="onInput"
-                    v-if="this.$refs.actionEditor?.$data?.isVisible" />
-    </Modal>
+    <Draggable :element="tile"
+               :disabled="readOnly"
+               :value="value"
+               @drag="$emit('drag', $event)"
+               @drop="$emit('drop', $event)"
+               v-if="draggable" />
+
+    <Droppable :element="tile"
+               :disabled="readOnly"
+               @dragenter="$emit('dragenter', $event)"
+               @dragleave="$emit('dragleave', $event)"
+               @dragover="$emit('dragover', $event)"
+               @drop="$emit('drop', $event)"
+               v-if="draggable" />
+
+    <div class="action-editor-container">
+      <Modal ref="actionEditor" title="Edit Action">
+        <ActionEditor :value="value"
+                      :with-save="!readOnly"
+                      @input="onInput"
+                      v-if="this.$refs.actionEditor?.$data?.isVisible" />
+      </Modal>
+    </div>
   </div>
 </template>
 
 <script>
 import ActionEditor from "@/components/Action/ActionEditor"
-import Modal from "@/components/Modal";
+import Draggable from "@/components/elements/Draggable"
+import Droppable from "@/components/elements/Droppable"
+import ExtensionIcon from "@/components/elements/ExtensionIcon"
+import Modal from "@/components/Modal"
 
 export default {
-  emits: ['input', 'delete', 'drag', 'drop'],
+  emits: [
+    'delete',
+    'drag',
+    'dragenter',
+    'dragleave',
+    'dragover',
+    'drop',
+    'input',
+  ],
+
   components: {
     ActionEditor,
+    Draggable,
+    Droppable,
+    ExtensionIcon,
     Modal,
   },
 
   props: {
+    draggable: {
+      type: Boolean,
+      default: true,
+    },
+
     value: {
       type: Object,
       default: () => ({
@@ -65,7 +109,7 @@ export default {
       default: false,
     },
 
-    draggable: {
+    readOnly: {
       type: Boolean,
       default: false,
     },
@@ -73,7 +117,7 @@ export default {
 
   data() {
     return {
-      dragging: false,
+      tile: null,
     }
   },
 
@@ -84,20 +128,11 @@ export default {
   },
 
   methods: {
-    onDragStart(event) {
-      this.dragging = true
-      event.dataTransfer.dropEffect = 'move'
-      event.dataTransfer.effectAllowed = 'move'
-      event.dataTransfer.setData('application/json', JSON.stringify(this.value))
-      this.$emit('drag')
-    },
-
-    onDragEnd() {
-      this.dragging = false
-      this.$emit('drop')
-    },
-
     onInput(value) {
+      if (!value || this.readOnly) {
+        return
+      }
+
       this.$emit('input', {
         ...this.value,
         name: value.action,
@@ -109,118 +144,135 @@ export default {
       this.$refs.actionEditor.close()
     },
   },
+
+  mounted() {
+    this.tile = this.$refs.tile
+  },
 }
 </script>
 
 <style lang="scss" scoped>
 @import "common";
 
-.action-tile {
-  min-width: 20em;
-  background: $tile-bg;
-  color: $tile-fg;
-  display: flex;
-  flex-direction: column;
-  padding: 0.5em 1em;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  content: "";
+.action-tile-container {
   position: relative;
-  border-radius: 1em;
-  cursor: pointer;
 
-  &:hover {
-    background: $tile-hover-bg;
-  }
-
-  &.drag {
-    opacity: 0.5;
-  }
-
-  .action-delete {
-    width: 1.5em;
-    height: 1.5em;
-    font-size: 1.25em;
-    position: absolute;
-    top: 0.25em;
-    right: 0;
-    opacity: 0.7;
-    transition: opacity 0.25s ease-in-out;
-
-    &:hover {
-      opacity: 1;
-    }
-  }
-
-  .action-name {
-    font-size: 1.1em;
-    font-weight: bold;
-    font-family: monospace;
-  }
-
-  .new-action {
-    font-style: italic;
-  }
-
-  .action-args {
+  .action-tile {
+    min-width: 20em;
+    background: $tile-bg;
+    color: $tile-fg;
     display: flex;
     flex-direction: column;
-    margin-top: 0.5em;
+    padding: 0.5em 1em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    content: "";
+    position: relative;
+    border-radius: 1em;
+    cursor: pointer;
 
-    .arg {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      margin-bottom: 0.5em;
+    &:hover {
+      background: $tile-hover-bg;
+    }
 
-      .arg-name {
-        font-weight: bold;
-        margin-right: 0.5em;
-      }
+    &.selected {
+      background: $tile-hover-bg;
+    }
 
-      .arg-value {
-        font-family: monospace;
-        font-size: 0.9em;
-        flex: 1;
+    .action-delete {
+      width: 1.5em;
+      height: 1.5em;
+      font-size: 1.25em;
+      position: absolute;
+      top: 0.25em;
+      right: 0;
+      opacity: 0.7;
+      transition: opacity 0.25s ease-in-out;
+      cursor: pointer;
+
+      &:hover {
+        opacity: 1;
       }
     }
-  }
-}
 
-.action-editor-container {
-  :deep(.modal-container) {
-    @include until($tablet) {
-      .modal {
-        width: calc(100vw - 1em);
+    .action-name {
+      display: inline-flex;
+      font-size: 1.1em;
+      font-weight: bold;
+      font-family: monospace;
+      align-items: center;
 
-        .content {
-          width: 100%;
+      .icon {
+        width: 1.5em;
+        height: 1.5em;
+        margin-right: 0.75em;
+      }
+    }
 
-          .body {
-            width: 100%;
-          }
+    .new-action {
+      font-style: italic;
+    }
+
+    .action-args {
+      display: flex;
+      flex-direction: column;
+      margin-top: 0.5em;
+
+      .arg {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-bottom: 0.5em;
+
+        .arg-name {
+          font-weight: bold;
+          margin-right: 0.5em;
+        }
+
+        .arg-value {
+          font-family: monospace;
+          font-size: 0.9em;
+          flex: 1;
         }
       }
     }
+  }
 
-    .content .body {
-      width: 80vw;
-      height: 80vh;
-      max-width: 800px;
-      padding: 0;
-    }
+  .action-editor-container {
+    :deep(.modal-container) {
+      @include until($tablet) {
+        .modal {
+          width: calc(100vw - 1em);
 
-    .tabs {
-      margin-top: 0;
-    }
+          .content {
+            width: 100%;
 
-    .action-editor {
-      height: 100%;
-    }
+            .body {
+              width: 100%;
+            }
+          }
+        }
+      }
 
-    form {
-      height: calc(100% - $tab-height);
-      overflow: auto;
+      .content .body {
+        width: 80vw;
+        height: 80vh;
+        max-width: 800px;
+        padding: 0;
+      }
+
+      .tabs {
+        margin-top: 0;
+      }
+
+      .action-editor {
+        height: 100%;
+      }
+
+      form {
+        height: calc(100% - $tab-height);
+        overflow: auto;
+      }
     }
   }
 }
diff --git a/platypush/backend/http/webapp/src/components/Action/ActionsList.vue b/platypush/backend/http/webapp/src/components/Action/ActionsList.vue
new file mode 100644
index 0000000000..c224fa6961
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/Action/ActionsList.vue
@@ -0,0 +1,222 @@
+<template>
+  <div class="actions" :class="{dragging: dragItem != null}">
+    <div class="row item action" v-for="(action, index) in actions" :key="index">
+      <ActionsListItem :value="action"
+                       :active="dragItem != null"
+                       :read-only="readOnly"
+                       :spacer-bottom="visibleBottomSpacers[index]"
+                       :spacer-top="visibleTopSpacers[index]"
+                       :ref="`action-tile-${index}`"
+                       @delete="deleteAction(index)"
+                       @drag="dragItem = index"
+                       @dragend.prevent="dragItem = null"
+                       @dragenterspacer.prevent="dropIndex = index"
+                       @dragleavespacer.prevent="dropIndex = undefined"
+                       @dragover.prevent="onTileDragOver($event, index)"
+                       @dragoverspacer.prevent="dropIndex = index"
+                       @drop="onDrop(index)"
+                       @input="editAction($event, index)" />
+    </div>
+
+    <div class="row item action">
+      <ActionTile :value="newAction"
+                  :draggable="false"
+                  @input="addAction"
+                  v-if="!readOnly" />
+    </div>
+  </div>
+</template>
+
+<script>
+import ActionsListItem from "./ActionsListItem"
+import ActionTile from "./ActionTile"
+import Utils from "@/Utils"
+
+export default {
+  mixins: [Utils],
+  emits: ['input'],
+  components: {
+    ActionsListItem,
+    ActionTile,
+  },
+
+  props: {
+    value: {
+      type: Object,
+      default: () => ({
+        name: undefined,
+        actions: [],
+      }),
+    },
+
+    readOnly: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      actions: [],
+      dragItem: undefined,
+      dropIndex: undefined,
+      newAction: {},
+      spacerElements: {},
+      visibleTopSpacers: {},
+      visibleBottomSpacers: {},
+    }
+  },
+
+  computed: {
+    hasChanges() {
+      return JSON.stringify(this.value) !== JSON.stringify(this.actions)
+    },
+  },
+
+  methods: {
+    onDrop(index) {
+      if (this.dragItem == null || this.readOnly)
+        return
+
+      this.actions.splice(
+        index, 0, this.actions.splice(this.dragItem, 1)[0]
+      )
+
+      this.dragItem = null
+      this.dropIndex = null
+    },
+
+    onTileDragOver(event, index) {
+      if (this.dragItem == null || this.readOnly || this.dragItem === index)
+        return
+
+      const dragOverTile = this.$refs[`action-tile-${index}`]?.[0]
+      const dragOverTileEl = dragOverTile?.$el?.nextSibling
+      if (!dragOverTileEl)
+        return
+
+      const rootTop = this.$el.getBoundingClientRect().top
+      const cursorY = event.clientY - rootTop
+      const dragOverTilePos = {
+        top: dragOverTileEl.offsetTop,
+        bottom: dragOverTileEl.offsetTop + dragOverTileEl.offsetHeight,
+      }
+
+      const dragOverTileSectionHeight = (dragOverTilePos.bottom - dragOverTilePos.top) / 3
+      let cursorTileSection = null
+
+      if (cursorY < dragOverTilePos.top + dragOverTileSectionHeight) {
+        cursorTileSection = 'top'
+      } else if (cursorY < dragOverTilePos.bottom - dragOverTileSectionHeight) {
+        cursorTileSection = 'middle'
+      } else {
+        cursorTileSection = 'bottom'
+      }
+
+      if (cursorTileSection === 'middle') {
+        this.dropIndex = null
+        return
+      }
+
+      if (cursorTileSection === 'top' && index < this.dragItem) {
+        this.dropIndex = index
+      } else if (cursorTileSection === 'bottom' && index > this.dragItem) {
+        if (index === this.actions.length - 1) {
+          this.dropIndex = index + 1
+        } else {
+          this.dropIndex = index
+        }
+      }
+    },
+
+    editAction(action, index) {
+      this.actions[index] = action
+    },
+
+    addAction(action) {
+      this.actions.push(action)
+    },
+
+    deleteAction(index) {
+      this.actions.splice(index, 1)
+    },
+
+    resetSpacers() {
+      this.visibleTopSpacers = Object.keys(this.actions).reduce((acc, index) => {
+        acc[index] = true
+        return acc
+      }, {})
+
+      this.visibleBottomSpacers = {[this.actions.length - 1]: true}
+      this.syncSpacers()
+    },
+
+    syncSpacers() {
+      this.$nextTick(() => {
+        this.spacerElements = Object.keys(this.actions).reduce((acc, index) => {
+          acc[index] = this.$refs[`dropTarget_${index}`]?.[0]
+          return acc
+        }, {})
+      })
+    },
+
+    syncValue() {
+      if (!this.value || !this.hasChanges)
+        return
+
+      this.actions = this.value
+    },
+  },
+
+  watch: {
+    actions: {
+      deep: true,
+      handler(value) {
+        this.$emit('input', value)
+        this.resetSpacers()
+      },
+    },
+
+    dragItem(value) {
+      if (value == null || this.readOnly) {
+        this.resetSpacers()
+      } else {
+        this.visibleTopSpacers = Object.keys(this.actions).reduce((acc, index) => {
+          acc[index] = this.dragItem > index
+          return acc
+        }, {})
+
+        this.visibleBottomSpacers = Object.keys(this.actions).reduce((acc, index) => {
+          acc[index] = this.dragItem < index
+          return acc
+        }, {})
+
+        this.syncSpacers()
+      }
+    },
+
+    value: {
+      immediate: true,
+      deep: true,
+      handler() {
+        this.syncValue()
+      },
+    },
+  },
+
+  mounted() {
+    this.syncValue()
+    this.resetSpacers()
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+$spacer-height: 1em;
+
+.actions {
+  .action {
+    margin: 0;
+  }
+}
+</style>
diff --git a/platypush/backend/http/webapp/src/components/Action/ActionsListItem.vue b/platypush/backend/http/webapp/src/components/Action/ActionsListItem.vue
new file mode 100644
index 0000000000..61cbc1e1f0
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/Action/ActionsListItem.vue
@@ -0,0 +1,210 @@
+<template>
+  <div class="row item action" :class="{ dragging }">
+    <div class="spacer-wrapper" :class="{ hidden: !spacerTop }">
+      <div class="spacer"
+           :class="{ active }"
+           ref="dropTargetTop">
+        <div class="droppable-wrapper">
+          <div class="droppable-container">
+            <div class="droppable-frame">
+              <div class="droppable" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <Droppable :element="$refs.dropTargetTop"
+                 :disabled="readOnly"
+                 @dragend.prevent="onDrop"
+                 @dragenter.prevent="$emit('dragenterspacer', $event)"
+                 @dragleave.prevent="$emit('dragleavespacer', $event)"
+                 @dragover.prevent="$emit('dragoverspacer', $event)"
+                 @drop="$emit('drop', $event)" />
+    </div>
+
+    <div class="spacer" v-if="dragging" />
+
+    <ActionTile :value="value"
+                :draggable="!readOnly"
+                :read-only="readOnly"
+                :with-delete="!readOnly"
+                @contextmenu="$emit('contextmenu', $event)"
+                @drag="onDragStart"
+                @dragend.prevent="onDragEnd"
+                @dragover.prevent="$emit('dragover', $event)"
+                @drop="onDrop"
+                @input="$emit('input', $event)"
+                @delete="$emit('delete', $event)" />
+
+    <div class="spacer" v-if="dragging" />
+
+    <div class="spacer-wrapper" :class="{ hidden: !spacerBottom }">
+      <div class="spacer" :class="{ active }" ref="dropTargetBottom">
+        <div class="droppable-wrapper">
+          <div class="droppable-container">
+            <div class="droppable-frame">
+              <div class="droppable" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <Droppable :element="$refs.dropTargetBottom"
+                 :disabled="readOnly"
+                 @dragend.prevent="onDrop"
+                 @dragenter.prevent="$emit('dragenterspacer', $event)"
+                 @dragleave.prevent="$emit('dragleavespacer', $event)"
+                 @dragover.prevent="$emit('dragoverspacer', $event)"
+                 @drop="onDrop" />
+    </div>
+  </div>
+</template>
+
+<script>
+import ActionTile from "@/components/Action/ActionTile"
+import Droppable from "@/components/elements/Droppable"
+import Utils from "@/Utils"
+
+export default {
+  mixins: [Utils],
+  emits: [
+    'contextmenu',
+    'delete',
+    'drag',
+    'dragend',
+    'dragenter',
+    'dragenterspacer',
+    'dragleave',
+    'dragleavespacer',
+    'dragover',
+    'dragoverspacer',
+    'drop',
+    'input',
+  ],
+
+  components: {
+    ActionTile,
+    Droppable,
+  },
+
+  props: {
+    active: {
+      type: Boolean,
+      default: false,
+    },
+
+    readOnly: {
+      type: Boolean,
+      default: false,
+    },
+
+    spacerBottom: {
+      type: Boolean,
+      default: false,
+    },
+
+    spacerTop: {
+      type: Boolean,
+      default: true,
+    },
+
+    value: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      dragging: false,
+      dragItem: undefined,
+      dropIndex: undefined,
+      newAction: {},
+      spacerElements: {},
+      visibleTopSpacers: {},
+      visibleBottomSpacers: {},
+    }
+  },
+
+  methods: {
+    onDragStart(event) {
+      this.dragging = true
+      this.$emit('drag', event)
+    },
+
+    onDragEnd(event) {
+      this.dragging = false
+      this.$emit('dragend', event)
+    },
+
+    onDrop(event) {
+      this.dragging = false
+      this.$emit('drop', event)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+$spacer-height: 1em;
+
+.action {
+  margin: 0;
+
+  .spacer {
+    height: $spacer-height;
+
+    &.active {
+      border-top: 1px dashed transparent;
+      border-bottom: 1px dashed transparent;
+
+      .droppable-frame {
+        border: 1px dashed $selected-fg;
+        border-radius: 0.5em;
+      }
+    }
+
+    &.selected {
+      height: 5em;
+      padding: 0.5em 0;
+
+      .droppable-frame {
+        height: 100%;
+        margin: 0.5em 0;
+        padding: 0.1em;
+        border: 2px dashed $ok-fg;
+      }
+
+      .droppable {
+        height: 100%;
+        background: $play-btn-fg;
+        border: none;
+        box-shadow: none;
+        border-radius: 1em;
+        opacity: 0.5;
+      }
+    }
+  }
+
+  .droppable-wrapper,
+  .droppable-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+  }
+
+  .droppable-container {
+    .droppable-frame {
+      width: 100%;
+      height: 1px;
+      opacity: 0.5;
+    }
+
+    .droppable {
+      width: 100%;
+      opacity: 0.8;
+    }
+  }
+}
+</style>
diff --git a/platypush/backend/http/webapp/src/components/Action/vars.scss b/platypush/backend/http/webapp/src/components/Action/vars.scss
index a49e74d737..5a79e3e542 100644
--- a/platypush/backend/http/webapp/src/components/Action/vars.scss
+++ b/platypush/backend/http/webapp/src/components/Action/vars.scss
@@ -1,15 +1,7 @@
-$section-shadow: 0 3px 3px 0 rgba(187,187,187,0.75), 0 3px 3px 0 rgba(187,187,187,0.75);
-$title-bg: #eee;
-$title-border: 1px solid #ddd;
-$title-shadow: 0 3px 3px 0 rgba(187,187,187,0.75);
-$extra-params-btn-bg: #eee;
-$doc-shadow: 0 1px 3px 1px #d7d3c0, inset 0 1px 1px 0 #d7d3c9;
-$output-bg: #151515;
-$output-shadow: $doc-shadow;
-$response-fg: white;
-$error-fg: red;
-$doc-bg: linear-gradient(#effbe3, #e0ecdb);
-$procedure-submit-btn-bg: #ebffeb;
+$extra-params-btn-bg: $title-bg;
+$response-fg: $inverse-fg;
+$error-fg: $error-fg-2;
+$procedure-submit-btn-bg: $submit-btn-bg;
 $section-title-bg: rgba(0, 0, 0, .04);
 $params-desktop-width: 30em;
 $params-tablet-width: 20em;
diff --git a/platypush/backend/http/webapp/src/components/Nav.vue b/platypush/backend/http/webapp/src/components/Nav.vue
index d7ad1e8a7e..08d5375909 100644
--- a/platypush/backend/http/webapp/src/components/Nav.vue
+++ b/platypush/backend/http/webapp/src/components/Nav.vue
@@ -117,7 +117,7 @@ export default {
 
   computed: {
     specialPlugins() {
-      return ['execute', 'entities', 'file']
+      return ['execute', 'entities', 'file', 'procedures']
     },
 
     panelNames() {
@@ -131,6 +131,7 @@ export default {
 
       let panelNames = Object.keys(this.panels).sort()
       panelNames = prepend(panelNames, 'file')
+      panelNames = prepend(panelNames, 'procedures')
       panelNames = prepend(panelNames, 'execute')
       panelNames = prepend(panelNames, 'entities')
       return panelNames
@@ -156,6 +157,8 @@ export default {
         return 'Execute'
       if (name === 'file')
         return 'Files'
+      if (name === 'procedures')
+        return 'Procedures'
 
       return name
     },
diff --git a/platypush/backend/http/webapp/src/components/Procedure/ProcedureDump.vue b/platypush/backend/http/webapp/src/components/Procedure/ProcedureDump.vue
new file mode 100644
index 0000000000..93ec603e13
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/Procedure/ProcedureDump.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="procedure-dump">
+    <Loading v-if="loading" />
+
+    <div class="dump-container" v-else>
+      <CopyButton :text="yaml?.trim()" />
+      <pre><code v-html="highlightedYAML" /></pre>
+    </div>
+  </div>
+</template>
+
+<script>
+import 'highlight.js/lib/common'
+import 'highlight.js/styles/stackoverflow-dark.min.css'
+import hljs from "highlight.js"
+
+import CopyButton from "@/components/elements/CopyButton"
+import Loading from "@/components/Loading";
+import Utils from "@/Utils"
+
+export default {
+  mixins: [Utils],
+  components: {
+    CopyButton,
+    Loading
+  },
+
+  props: {
+    procedure: {
+      type: Object,
+      required: true
+    }
+  },
+
+  data() {
+    return {
+      loading: false,
+      yaml: null,
+    }
+  },
+
+  computed: {
+    highlightedYAML() {
+      return hljs.highlight(
+        '# You can copy this code in a YAML configuration file\n' +
+        '# if you prefer to store this procedure in a file.\n' +
+        this.yaml || '',
+        {language: 'yaml'}
+      ).value
+    },
+  },
+
+  methods: {
+    async refresh() {
+      this.loading = true
+      try {
+        this.yaml = await this.request('procedures.to_yaml', {procedure: this.procedure})
+      } finally {
+        this.loading = false
+      }
+    }
+  },
+
+  mounted() {
+    this.refresh()
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.procedure-dump {
+  width: 100%;
+  height: 100%;
+  background: #181818;
+
+  .dump-container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    padding: 1em;
+    overflow: auto;
+  }
+
+  pre {
+    margin: 0;
+    padding: 0;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+  }
+}
+</style>
diff --git a/platypush/backend/http/webapp/src/components/Procedure/ProcedureEditor.vue b/platypush/backend/http/webapp/src/components/Procedure/ProcedureEditor.vue
index bb4a792609..6a0e910e12 100644
--- a/platypush/backend/http/webapp/src/components/Procedure/ProcedureEditor.vue
+++ b/platypush/backend/http/webapp/src/components/Procedure/ProcedureEditor.vue
@@ -1,73 +1,227 @@
 <template>
-  <div class="procedure-editor-container"
-       :class="{dragging: dragItem != null}">
-    <div class="procedure-editor">
-      <form autocomplete="off" @submit.prevent="executeAction">
-        <div class="name-editor-container" v-if="withName">
-          <div class="row item">
-            <div class="name">
-              <label>
-                <i class="icon fas fa-pen-to-square" />
-                Name
-              </label>
-            </div>
+  <div class="procedure-editor-container">
+    <main>
+      <div class="procedure-editor">
+        <form class="procedure-edit-form" autocomplete="off" @submit.prevent="executeAction">
+          <input type="submit" style="display: none" />
 
-            <div class="value">
-              <input type="text" v-model="newValue.name" />
+          <div class="name-editor-container" v-if="withName">
+            <div class="row item">
+              <div class="name">
+                <label>
+                  <i class="icon fas fa-pen-to-square" />
+                  Name
+                </label>
+              </div>
+
+              <div class="value">
+                <input type="text"
+                       v-model="newValue.name"
+                       ref="nameInput"
+                       :disabled="readOnly" />
+              </div>
             </div>
           </div>
+
+          <div class="icon-editor-container"
+               v-if="Object.keys(newValue?.meta?.icon || {}).length">
+            <IconEditor :entity="newValue"
+                        @input="onIconChange"
+                        @change="onIconChange" />
+          </div>
+
+          <div class="args-editor-container" v-if="showArgs">
+            <h3>
+              <i class="icon fas fa-code" />&nbsp;
+              Arguments
+            </h3>
+
+            <div class="args" ref="args">
+              <div class="row item" v-for="(arg, index) in newValue.args" :key="index">
+                <input type="text"
+                       placeholder="Argument Name"
+                       :value="arg"
+                       :disabled="readOnly"
+                       @input="onArgInput($event.target.value?.trim(), index)"
+                       @blur="onArgEdit(arg, index)" />
+              </div>
+
+              <div class="row item new-arg" v-if="!readOnly">
+                <input type="text"
+                       placeholder="New Argument"
+                       ref="newArgInput" 
+                       v-model="newArg"
+                       @blur="onNewArg" />
+              </div>
+            </div>
+          </div>
+
+          <div class="actions-container">
+            <h3 v-if="showArgs">
+              <i class="icon fas fa-play" />&nbsp;
+              Actions
+            </h3>
+
+            <ActionsList :value="newValue.actions"
+                         :read-only="readOnly"
+                         @input="newValue.actions = $event" />
+          </div>
+
+          <!-- Structured response container -->
+          <div class="response-container" v-if="response || error">
+            <Response :response="response" :error="error" />
+          </div>
+        </form>
+      </div>
+
+      <div class="args-modal-container" ref="argsModalContainer" v-if="showArgsModal">
+        <Modal title="Run Arguments"
+               :visible="true"
+               ref="argsModal"
+               @close="onRunArgsModalClose">
+          <form class="args" @submit.prevent="executeWithArgs">
+            <div class="row item" v-for="value, arg in runArgs" :key="arg">
+              <span class="arg-name">
+                <span v-if="newValue.args?.includes(arg)">
+                  {{ arg }}
+                </span>
+
+                <span v-else>
+                  <input type="text"
+                         placeholder="New Argument"
+                         :value="arg"
+                         @input="onEditRunArgName($event, arg)">
+                </span>
+
+                <span class="mobile">
+                  &nbsp;=&nbsp;
+                </span>
+              </span>
+
+              <span class="arg-value">
+                <span class="from tablet">
+                  &nbsp;=&nbsp;
+                </span>
+
+                <input type="text"
+                       placeholder="Argument Value"
+                       :ref="`run-arg-value-${arg}`"
+                       v-model="runArgs[arg]" />
+              </span>
+            </div>
+
+            <div class="row item new-arg">
+              <span class="arg-name">
+                <input type="text"
+                       placeholder="New Argument"
+                       ref="newRunArgName"
+                       v-model="newRunArg[0]"
+                       @blur="onNewRunArgName" />
+
+                <span class="mobile">
+                  &nbsp;=&nbsp;
+                </span>
+              </span>
+              <span class="arg-value">
+                <span class="from tablet">
+                  &nbsp;=&nbsp;
+                </span>
+
+                <input type="text"
+                       placeholder="Argument Value"
+                       v-model="newRunArg[1]" />
+              </span>
+            </div>
+
+            <input type="submit" style="display: none" />
+            <FloatingButton icon-class="fa fa-play"
+                            title="Run Procedure"
+                            :disabled="newValue.actions?.length === 0 || running"
+                            @click="executeWithArgs" />
+          </form>
+        </Modal>
+      </div>
+
+      <div class="confirm-dialog-container">
+        <ConfirmDialog ref="confirmClose" @input="forceClose">
+          This procedure has unsaved changes. Are you sure you want to close it?
+        </ConfirmDialog>
+      </div>
+
+      <div class="confirm-dialog-container">
+        <ConfirmDialog ref="confirmOverwrite" @input="forceSave">
+          A procedure with the same name already exists. Do you want to overwrite it?
+        </ConfirmDialog>
+      </div>
+
+      <div class="spacer" />
+
+      <div class="floating-buttons">
+        <div class="buttons left">
+          <FloatingButtons direction="row">
+              <FloatingButton icon-class="fa fa-code"
+                              left glow
+                              title="Export to YAML"
+                              @click="showYAML = true" />
+              <FloatingButton icon-class="fa fa-copy"
+                              left glow
+                              title="Duplicate Procedure"
+                              @click="duplicate"
+                              v-if="newValue.name?.length && newValue.actions?.length" />
+          </FloatingButtons>
         </div>
 
-        <div class="actions">
-          <div class="row item" v-for="(action, index) in newValue.actions" :key="index">
-            <div class="drop-target-container"
-                 :class="{active: dropIndex === index}"
-                 v-if="dragItem != null && dragItem > index"
-                 @dragover.prevent="dropIndex = index"
-                 @dragenter.prevent="dropIndex = index"
-                 @dragleave.prevent="dropIndex = undefined"
-                 @dragend.prevent="dropIndex = undefined"
-                 @drop="onDrop(index)">
-              <div class="drop-target" />
-            </div>
-
-            <div class="separator" v-else-if="dragItem != null && dragItem === index" />
-
-            <ActionTile :value="action"
-                        draggable with-delete
-                        @drag="dragItem = index"
-                        @drop="dragItem = undefined"
-                        @input="editAction($event, index)"
-                        @delete="deleteAction(index)" />
-
-            <div class="drop-target-container"
-                 :class="{active: dropIndex === index}"
-                 @dragover.prevent="dropIndex = index"
-                 @dragenter.prevent="dropIndex = index"
-                 @dragleave.prevent="dropIndex = undefined"
-                 @dragend.prevent="dropIndex = undefined"
-                 @drop="onDrop(index)"
-                 v-if="dragItem != null && dragItem < index">
-              <div class="drop-target" />
-            </div>
-
-            <div class="separator" v-else-if="dragItem != null && dragItem === index" />
-          </div>
-
-          <div class="row item">
-            <ActionTile :value="newAction" @input="addAction" />
-          </div>
+        <div class="buttons right">
+          <FloatingButtons direction="row">
+              <FloatingButton icon-class="fa fa-save"
+                              right glow
+                              title="Save Procedure"
+                              :disabled="!hasChanges"
+                              @click="save"
+                              v-if="showSave" />
+              <FloatingButton icon-class="fa fa-play"
+                              right glow
+                              title="Run Procedure"
+                              :disabled="newValue.actions?.length === 0 || running"
+                              @click="executeAction" />
+          </FloatingButtons>
         </div>
+      </div>
+    </main>
 
-        <!-- Structured response container -->
-        <Response :response="response" :error="error" />
-      </form>
+    <div class="duplicate-editor-container" v-if="duplicateValue != null">
+      <Modal title="Duplicate Procedure"
+             ref="duplicateModal"
+             :visible="true"
+             :before-close="(() => $refs.duplicateEditor?.checkCanClose())"
+             @close="duplicateValue = null">
+        <ProcedureEditor :value="duplicateValue"
+                         :with-name="true"
+                         :with-save="true"
+                         :modal="() => $refs.duplicateModal"
+                         ref="duplicateEditor"
+                         @input="duplicateValue = null" />
+      </Modal>
+    </div>
+
+    <div class="dump-modal-container" v-if="showYAML">
+      <Modal title="Procedure Dump"
+             :visible="true"
+             @close="showYAML = false">
+        <ProcedureDump :procedure="newValue" />
+      </Modal>
     </div>
   </div>
 </template>
 
 <script>
-import ActionTile from "@/components/Action/ActionTile"
+import ActionsList from "@/components/Action/ActionsList"
+import ConfirmDialog from "@/components/elements/ConfirmDialog";
+import FloatingButton from "@/components/elements/FloatingButton";
+import FloatingButtons from "@/components/elements/FloatingButtons";
+import IconEditor from "@/components/panels/Entities/IconEditor";
+import Modal from "@/components/Modal";
+import ProcedureDump from "./ProcedureDump";
 import Response from "@/components/Action/Response"
 import Utils from "@/Utils"
 
@@ -75,7 +229,13 @@ export default {
   mixins: [Utils],
   emits: ['input'],
   components: {
-    ActionTile,
+    ActionsList,
+    ConfirmDialog,
+    FloatingButton,
+    FloatingButtons,
+    IconEditor,
+    Modal,
+    ProcedureDump,
     Response,
   },
 
@@ -85,6 +245,11 @@ export default {
       default: false,
     },
 
+    withSave: {
+      type: Boolean,
+      default: false,
+    },
+
     value: {
       type: Object,
       default: () => ({
@@ -92,23 +257,134 @@ export default {
         actions: [],
       }),
     },
+
+    readOnly: {
+      type: Boolean,
+      default: false,
+    },
+
+    modal: {
+      type: [Object, Function],
+    },
   },
 
   data() {
     return {
-      loading: false,
-      running: false,
-      response: undefined,
+      confirmOverwrite: false,
+      duplicateValue: null,
       error: undefined,
-      actions: [],
-      newValue: {...this.value},
+      loading: false,
       newAction: {},
-      dragItem: undefined,
-      dropIndex: undefined,
+      newArg: null,
+      newRunArg: [null, null],
+      newValue: {},
+      response: undefined,
+      running: false,
+      runArgs: {},
+      shouldForceClose: false,
+      showArgsModal: false,
+      showYAML: false,
     }
   },
 
+  computed: {
+    floatingButtons() {
+      return this.$el.querySelector('.floating-btns')
+    },
+
+    hasChanges() {
+      if (!this.newValue?.name?.length)
+        return false
+
+      if (!this.newValue?.actions?.length)
+        return false
+
+      return JSON.stringify(this.value) !== JSON.stringify(this.newValue)
+    },
+
+    modal_() {
+      if (this.readOnly)
+        return null
+
+      return typeof this.modal === 'function' ? this.modal() : this.modal
+    },
+
+    shouldConfirmClose() {
+      return this.hasChanges && !this.readOnly && this.withSave && !this.shouldForceClose
+    },
+
+    showArgs() {
+      return !this.readOnly || this.newValue.args?.length
+    },
+
+    showSave() {
+      return this.withSave && !this.readOnly
+    },
+  },
+
   methods: {
+    async save() {
+      if (!this.hasChanges)
+        return
+
+      this.loading = true
+      try {
+        const overwriteOk = await this.overwriteOk()
+        if (!overwriteOk)
+          return
+
+        const actions = this.newValue.actions.map((action) => {
+          const a = {...action}
+          if ('name' in a) {
+            a.action = a.name
+            delete a.name
+          }
+
+          return a
+        })
+
+        const args = {...this.newValue, actions}
+        if (this.value?.name?.length && this.value.name !== this.newValue.name) {
+          args.old_name = this.value.name
+        }
+
+        await this.request('procedures.save', args)
+        this.$emit('input', this.newValue)
+        this.notify({
+          text: 'Procedure saved successfully',
+          image: {
+            icon: 'check',
+          }
+        })
+      } finally {
+        this.loading = false
+      }
+    },
+
+    async forceSave() {
+      this.confirmOverwrite = true
+      await this.save()
+    },
+
+    async overwriteOk() {
+      if (this.confirmOverwrite) {
+        this.confirmOverwrite = false
+        return true
+      }
+
+      const procedures = await this.request('procedures.status', {publish: false})
+      if (
+        this.value.name?.length &&
+        this.value.name !== this.newValue.name &&
+        procedures[this.newValue.name]
+      ) {
+        this.$refs.confirmOverwrite?.open()
+        return false
+      }
+
+      return true
+    },
+
     onResponse(response) {
       this.response = (
         typeof response === 'string' ? response : JSON.stringify(response, null, 2)
@@ -118,50 +394,248 @@ export default {
     },
 
     onError(error) {
+      if (error.message)
+        error = error.message
+
       this.response = undefined
       this.error = error
     },
 
     onDone() {
       this.running = false
+      this.runArgs = {}
     },
 
-    emitInput() {
-      this.$emit('input', this.newValue)
-    },
+    async executeAction() {
+      if (!this.newValue.actions?.length) {
+        this.notify({
+          text: 'No actions to execute',
+          warning: true,
+          image: {
+            icon: 'exclamation-triangle',
+          }
+        })
 
-    onDrop(index) {
-      if (this.dragItem === undefined)
         return
+      }
 
-      this.newValue.actions.splice(
-        index, 0, this.newValue.actions.splice(this.dragItem, 1)[0]
-      )
-
-      this.emitInput()
-    },
-
-    executeAction() {
-      if (!this.value.actions?.length)
+      if (this.newValue.args?.length && !Object.keys(this.runArgs).length) {
+        this.showArgsModal = true
         return
+      }
 
       this.running = true
-      this.execute(this.value.actions).then(this.onResponse).catch(this.onError).finally(this.onDone)
+      try {
+        const procedure = {
+          actions: this.newValue.actions.map((action) => {
+            const a = {...action}
+            if ('name' in a) {
+              a.action = a.name
+              delete a.name
+            }
+
+            return a
+          }),
+
+          args: this.runArgs,
+        }
+
+        const response = await this.request('procedures.exec', {procedure})
+        this.onResponse(response)
+      } catch (e) {
+        console.error(e)
+        this.onError(e)
+      } finally {
+        this.onDone()
+      }
+    },
+
+    async executeWithArgs() {
+      this.$refs.argsModal?.close()
+      Object.entries(this.runArgs).forEach(([arg, value]) => {
+        if (!value?.length)
+          this.runArgs[arg] = null
+
+        try {
+          this.runArgs[arg] = JSON.parse(value)
+        } catch (e) {
+          // ignore
+        }
+      })
+
+      await this.executeAction()
+    },
+
+    duplicate() {
+      const name = `${this.newValue.name || ''}__copy`
+      this.duplicateValue = {
+        ...this.newValue,
+        ...{
+          meta: {
+            ...(this.newValue.meta || {}),
+            icon: {...(this.newValue.meta?.icon || {})},
+          }
+        },
+        id: null,
+        external_id: name,
+        name: name,
+      }
     },
 
     editAction(action, index) {
       this.newValue.actions[index] = action
-      this.emitInput()
     },
 
     addAction(action) {
       this.newValue.actions.push(action)
-      this.emitInput()
     },
 
     deleteAction(index) {
       this.newValue.actions.splice(index, 1)
-      this.emitInput()
+    },
+
+    onArgInput(arg, index) {
+      this.newValue.args[index] = arg
+    },
+
+    onArgEdit(arg, index) {
+      arg = arg?.trim()
+      const isDuplicate = !!(
+        this.newValue.args?.filter(
+          (a, i) => a === arg && i !== index
+        ).length
+      )
+
+      if (!arg?.length || isDuplicate) {
+        this.newValue.args.splice(index, 1)
+
+        if (index === this.newValue.args.length) {
+          setTimeout(() => this.$refs.newArgInput?.focus(), 50)
+        } else {
+          const nextInput = this.$refs.args.children[index]?.querySelector('input[type=text]')
+          setTimeout(() => {
+            nextInput?.focus()
+            nextInput?.select()
+          }, 50)
+        }
+      }
+    },
+
+    onNewArg(event) {
+      const value = event.target.value?.trim()
+      if (!value?.length) {
+        return
+      }
+
+      if (!this.newValue.args) {
+        this.newValue.args = []
+      }
+
+      if (!this.newValue.args.includes(value)) {
+        this.newValue.args.push(value)
+      }
+
+      this.newArg = null
+      setTimeout(() => this.$refs.newArgInput?.focus(), 50)
+    },
+
+    onNewRunArgName() {
+      const arg = this.newRunArg[0]?.trim()
+      const value = this.newRunArg[1]?.trim()
+      if (!arg?.length) {
+        return
+      }
+
+      this.runArgs[arg] = value
+      this.newRunArg = [null, null]
+      this.$nextTick(() => this.$refs[`run-arg-value-${arg}`]?.[0]?.focus())
+    },
+
+    onEditRunArgName(event, arg) {
+      const newArg = event.target.value?.trim()
+      if (newArg === arg) {
+        return
+      }
+
+      if (newArg?.length) {
+        this.runArgs[newArg] = this.runArgs[arg]
+      }
+
+      delete this.runArgs[arg]
+      this.$nextTick(
+        () => this.$el.querySelector(`.args-modal-container .args input[type=text][value="${newArg}"]`)?.focus()
+      )
+    },
+
+    onIconChange(icon) {
+      this.newValue.meta.icon = icon
+    },
+
+    onRunArgsModalClose() {
+      this.showArgsModal = false
+      this.$nextTick(() => {
+        this.runArgs = {}
+      })
+    },
+
+    checkCanClose() {
+      if (!this.shouldConfirmClose)
+        return true
+
+      this.$refs.confirmClose?.open()
+      return false
+    },
+
+    forceClose() {
+      this.shouldForceClose = true
+      this.$nextTick(() => {
+        if (!this.modal_)
+          return
+
+        let modal = this.modal_
+        if (typeof modal === 'function') {
+          modal = modal()
+        }
+
+        try {
+          modal?.close()
+        } catch (e) {
+          console.warn('Failed to close modal', e)
+        }
+
+        this.reset()
+      })
+    },
+
+    beforeUnload(e) {
+      if (this.shouldConfirmClose) {
+        e.preventDefault()
+        e.returnValue = ''
+      }
+    },
+
+    addBeforeUnload() {
+      window.addEventListener('beforeunload', this.beforeUnload)
+    },
+
+    removeBeforeUnload() {
+      window.removeEventListener('beforeunload', this.beforeUnload)
+    },
+
+    reset() {
+      this.removeBeforeUnload()
+    },
+
+    syncValue() {
+      if (!this.value)
+        return
+
+      this.newValue = {
+        ...this.value,
+        actions: this.value.actions?.map(a => ({...a})),
+        args: [...(this.value?.args || [])],
+        meta: {...(this.value?.meta || {})},
+      }
     },
   },
 
@@ -169,66 +643,217 @@ export default {
     value: {
       immediate: true,
       deep: true,
-      handler(value) {
-        this.newValue = {...value}
+      handler() {
+        this.syncValue()
       },
     },
+
+    newValue: {
+      deep: true,
+      handler(value) {
+        if (this.withSave)
+          return
+
+        this.$emit('input', value)
+      },
+    },
+
+    showArgsModal(value) {
+      if (value) {
+        this.runArgs = this.newValue.args?.reduce((acc, arg) => {
+          acc[arg] = null
+          return acc
+        }, {})
+
+        this.$nextTick(() => {
+          this.$el.querySelector('.args-modal-container .args input[type=text]')?.focus()
+        })
+      }
+    },
+  },
+
+  mounted() {
+    this.addBeforeUnload()
+    this.syncValue()
+    this.$nextTick(() => {
+      if (this.withName)
+        this.$refs.nameInput?.focus()
+    })
+  },
+
+  unmouted() {
+    this.reset()
   },
 }
 </script>
 
 <style lang="scss" scoped>
+$floating-btns-height: 3em;
+
 .procedure-editor-container {
   display: flex;
   flex-direction: column;
   padding-top: 0.75em;
+  position: relative;
+  max-height: 75vh;
+
+  main {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+  }
 
   .procedure-editor {
     width: 100%;
+    height: calc(100% - #{$floating-btns-height});
+    overflow: auto;
+    padding: 0 1em;
+
+    .procedure-edit-form {
+      padding-bottom: calc(#{$floating-btns-height} + 1em);
+    }
   }
 
-  .actions {
-    .item {
-      margin-bottom: 0.75em;
-    }
+  h3 {
+    font-size: 1.2em;
+  }
 
-    .drop-target-container {
-      width: 100%;
-      height: 0.75em;
+  .name-editor-container {
+    .row {
       display: flex;
+      border-bottom: 1px solid $default-shadow-color;
       align-items: center;
+      justify-content: space-between;
+      padding-bottom: 0.5em;
+      margin-bottom: 0.5em;
 
-      &.active {
-        .drop-target {
-          height: 0.5em;
-          background: $tile-bg;
-          border: none;
-          opacity: 0.75;
+      @include until($tablet) {
+        flex-direction: column;
+        align-items: flex-start;
+      }
+
+      @include from($tablet) {
+        flex-direction: row;
+      }
+
+      .name {
+        margin-right: 0.5em;
+      }
+
+      .value {
+        flex: 1;
+
+        @include until($tablet) {
+          width: 100%;
+        }
+
+        input {
+          width: 100%;
         }
       }
+    }
+  }
 
-      .drop-target {
-        width: 100%;
-        height: 2px;
-        border: 1px solid $default-fg-2;
-        border-radius: 0.25em;
-        padding: 0 0.5em;
+  .icon-editor-container {
+    border-bottom: 1px solid $default-shadow-color;
+    margin-bottom: 0.5em;
+  }
+
+  .spacer {
+    width: 100%;
+    height: calc(#{$floating-btns-height} + 1em);
+    flex-grow: 1;
+  }
+
+  .args-editor-container {
+    .args {
+      margin-bottom: 1em;
+
+      .item {
+        padding-bottom: 0.5em;
       }
     }
   }
 
-  &.dragging {
-    padding-top: 0;
+  :deep(.args-modal-container) {
+    .modal-container .modal {
+      width: 50em;
 
-    .actions {
-      .item {
-        margin-bottom: 0;
+      .body {
+        padding: 1em;
       }
+    }
 
-      .separator {
-        height: 0.75em;
+    .args {
+      position: relative;
+      padding-bottom: calc(#{$floating-btn-size} + 2em);
+
+      .row {
+        display: flex;
+        align-items: center;
+        margin-bottom: 0.5em;
+
+        @include until($tablet) {
+          flex-direction: column;
+          align-items: flex-start;
+          border-bottom: 1px solid $default-shadow-color;
+          padding-bottom: 0.5em;
+        }
+
+        .arg-name {
+          @extend .col-s-12;
+          @extend .col-m-5;
+          font-weight: bold;
+
+          input {
+            width: 100%;
+
+            @include until($tablet) {
+              width: calc(100% - 2em);
+            }
+          }
+        }
+
+        .arg-value {
+          @extend .col-s-12;
+          @extend .col-m-7;
+          flex: 1;
+
+          input[type=text] {
+            width: 95%;
+          }
+        }
       }
     }
   }
+
+  :deep(.floating-buttons) {
+    width: 100%;
+    height: $floating-btns-height;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    background: $default-bg-5;
+    box-shadow: $border-shadow-top;
+    display: flex;
+    justify-content: space-between;
+
+    .buttons {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      padding: 0 1em;
+      position: relative;
+    }
+  }
+
+  :deep(.dump-modal-container) {
+    .body {
+      max-width: 47em;
+    }
+  }
 }
 </style>
diff --git a/platypush/backend/http/webapp/src/components/Procedure/ProcedureEditorModal.vue b/platypush/backend/http/webapp/src/components/Procedure/ProcedureEditorModal.vue
new file mode 100644
index 0000000000..3a01f1f82e
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/Procedure/ProcedureEditorModal.vue
@@ -0,0 +1,126 @@
+<template>
+  <div class="procedure-editor-modal-container">
+    <Modal :title="title || value.name"
+           :visible="visible"
+           :uppercase="!value.name"
+           :before-close="(() => $refs.editor?.checkCanClose())"
+           ref="editorModal"
+           @close="$emit('close')">
+      <ProcedureEditor :procedure="value"
+                       :read-only="isReadOnly"
+                       :with-name="!isReadOnly"
+                       :with-save="!isReadOnly"
+                       :value="value"
+                       :modal="isReadOnly ? null : (() => $refs.editorModal)"
+                       ref="editor"
+                       @input="$emit('input', $event)" />
+    </Modal>
+  </div>
+</template>
+
+<script>
+import Modal from "@/components/Modal";
+import ProcedureEditor from "@/components/Procedure/ProcedureEditor"
+
+export default {
+  mixins: [Modal, ProcedureEditor],
+  emits: ['close', 'input'],
+  components: {
+    Modal,
+    ProcedureEditor,
+  },
+
+  data: function() {
+    return {
+      args: {},
+      defaultIconClass: 'fas fa-cogs',
+      extraArgs: {},
+      collapsed_: true,
+      infoCollapsed: false,
+      lastError: null,
+      lastResponse: null,
+      newArgName: '',
+      newArgValue: '',
+      runCollapsed: false,
+      showConfirmDelete: false,
+      showFileEditor: false,
+      showProcedureEditor: false,
+    }
+  },
+
+  computed: {
+    isReadOnly() {
+      return this.value.procedure_type && this.value.procedure_type !== 'db'
+    },
+  },
+
+  methods: {
+    // Proxy and delegate the Modal's methods
+    open() {
+      this.$refs.editorModal.open()
+    },
+
+    close() {
+      this.$refs.editorModal.close()
+    },
+
+    show() {
+      this.$refs.editorModal.show()
+    },
+
+    hide() {
+      this.$refs.editorModal.hide()
+    },
+
+    toggle() {
+      this.$refs.editorModal.toggle()
+    },
+  },
+
+  watch: {
+    collapsed: {
+      immediate: true,
+      handler(value) {
+        this.collapsed_ = value
+      },
+    },
+
+    selected: {
+      immediate: true,
+      handler(value) {
+        this.collapsed_ = value
+      },
+    },
+
+    showProcedureEditor(value) {
+      if (!value) {
+        this.$refs.editor?.reset()
+      }
+    },
+  },
+
+  mounted() {
+    this.collapsed_ = !this.selected
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.procedure-editor-modal-container {
+  cursor: default;
+
+  :deep(.modal-container) {
+    .body {
+      padding: 0;
+
+      @include until($tablet) {
+        width: calc(100vw - 2em);
+      }
+
+      @include from($tablet) {
+        width: 50em;
+      }
+    }
+  }
+}
+</style>
diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue b/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue
index 38ebcb6e7a..95747aedc1 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue
@@ -535,6 +535,7 @@ export default {
         max-height: calc(100vh - #{$header-height} - #{$main-margin});
       }
 
+      width: 100%;
       display: flex;
       flex-direction: column;
       flex-grow: 1;
diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/Procedure.vue b/platypush/backend/http/webapp/src/components/panels/Entities/Procedure.vue
new file mode 100644
index 0000000000..988d266411
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/Procedure.vue
@@ -0,0 +1,707 @@
+<template>
+  <div class="entity procedure-container">
+    <div class="head" :class="{collapsed: collapsed_}" @click="onHeaderClick">
+      <div class="icon">
+        <EntityIcon :entity="value" :icon="icon" :loading="loading" />
+      </div>
+
+      <div class="label">
+        <div class="name" v-text="value.name" />
+      </div>
+
+      <div class="value-and-toggler">
+        <div class="value">
+          <button class="btn btn-primary head-run-btn"
+                  title="Run Procedure"
+                  :disabled="loading"
+                  @click.stop="run"
+                  v-if="collapsed_">
+            <i class="fas fa-play" />
+          </button>
+        </div>
+
+        <div class="collapse-toggler" @click.stop="collapsed_ = !collapsed_">
+          <i class="fas" :class="{'fa-chevron-down': collapsed_, 'fa-chevron-up': !collapsed_}" />
+        </div>
+      </div>
+    </div>
+
+    <div class="body" v-if="!collapsed_" @click.stop>
+      <section class="run">
+        <header :class="{collapsed: runCollapsed}" @click="runCollapsed = !runCollapsed">
+          <span class="col-10">
+            <i class="fas fa-play" />&nbsp; Run
+          </span>
+          <span class="col-2 buttons">
+            <button type="button"
+                    class="btn btn-primary"
+                    :disabled="loading"
+                    :title="runCollapsed ? 'Expand' : 'Collapse'">
+              <i class="fas" :class="{'fa-chevron-down': runCollapsed, 'fa-chevron-up': !runCollapsed}" />
+            </button>
+          </span>
+        </header>
+
+        <div class="run-body" v-if="!runCollapsed">
+          <form @submit.prevent="run">
+            <div class="args" v-if="value.args?.length">
+              Arguments
+              <div class="row arg" v-for="(arg, index) in value.args || []" :key="index">
+                <input type="text"
+                       class="argname"
+                       :value="arg"
+                       :disabled="true" />&nbsp;=
+                <input type="text"
+                       class="argvalue"
+                       placeholder="Value"
+                       :disabled="loading"
+                       @input="updateArg(arg, $event)" />
+              </div>
+            </div>
+
+            <div class="extra args">
+              Extra Arguments
+              <div class="row arg" v-for="(value, name) in extraArgs" :key="name">
+                <input type="text"
+                       class="argname"
+                       placeholder="Name"
+                       :value="name"
+                       :disabled="loading"
+                       @blur="updateExtraArgName(name, $event)" />&nbsp;=
+                <input type="text"
+                       placeholder="Value"
+                       class="argvalue"
+                       :value="value"
+                       :disabled="loading"
+                       @input="updateExtraArgValue(arg, $event)" />
+              </div>
+
+              <div class="row add-arg">
+                <input type="text"
+                       class="argname"
+                       placeholder="Name"
+                       v-model="newArgName"
+                       :disabled="loading"
+                       ref="newArgName"
+                       @blur="addExtraArg" />&nbsp;=
+                <input type="text"
+                       class="argvalue"
+                       placeholder="Value"
+                       v-model="newArgValue"
+                       :disabled="loading"
+                       @blur="addExtraArg" />
+              </div>
+            </div>
+
+            <div class="row run-container">
+              <button type="submit"
+                      class="btn btn-primary"
+                      :disabled="loading"
+                      title="Run Procedure">
+                <i class="fas fa-play" />
+              </button>
+            </div>
+          </form>
+
+          <div class="response-container" v-if="lastResponse || lastError">
+            <Response :response="lastResponse" :error="lastError" />
+          </div>
+        </div>
+      </section>
+
+      <section class="info">
+        <header :class="{collapsed: infoCollapsed}" @click="infoCollapsed = !infoCollapsed">
+          <span class="col-10">
+            <i class="fas fa-info-circle" />&nbsp; Info
+          </span>
+          <span class="col-2 buttons">
+            <button type="button"
+                    class="btn btn-primary"
+                    :disabled="loading"
+                    :title="infoCollapsed ? 'Expand' : 'Collapse'">
+              <i class="fas" :class="{'fa-chevron-down': infoCollapsed, 'fa-chevron-up': !infoCollapsed}" />
+            </button>
+          </span>
+        </header>
+
+        <div class="info-body" v-if="!infoCollapsed">
+          <div class="item">
+            <div class="label">Type</div>
+            <div class="value">
+              <i :class="procedureTypeIconClass" />&nbsp;
+              {{ value.procedure_type }}
+            </div>
+          </div>
+
+          <div class="item actions" v-if="value?.actions?.length">
+            <div class="label">Actions</div>
+            <div class="value">
+              <div class="item">
+                <button type="button"
+                        class="btn btn-primary"
+                        title="Edit Actions"
+                        :disabled="loading"
+                        @click="showProcedureEditor = !showProcedureEditor">
+                  <span v-if="isReadOnly && !showProcedureEditor">
+                    <i class="fas fa-eye" />&nbsp; View
+                  </span>
+                  <span v-else-if="!isReadOnly && !showProcedureEditor">
+                    <i class="fas fa-edit" />&nbsp; Edit
+                  </span>
+                  <span v-else>
+                    <i class="fas fa-times" />&nbsp; Close
+                  </span>
+                </button>
+              </div>
+
+              <div class="item delete" v-if="!isReadOnly">
+                <button type="button"
+                        title="Delete Procedure"
+                        :disabled="loading"
+                        @click="showConfirmDelete = true">
+                  <i class="fas fa-trash" />&nbsp; Delete
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <div class="item" v-if="value.source">
+            <div class="label">Path</div>
+            <div class="value">
+              <a :href="$route.path" @click.prevent="showFileEditor = true">
+                {{ displayPath }}
+              </a>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+
+    <div class="file-editor-container" v-if="showFileEditor && value.source">
+      <FileEditor :file="value.source"
+                  :line="value.line"
+                  :visible="true"
+                  :uppercase="false"
+                  @close="showFileEditor = false" />
+    </div>
+
+    <ProcedureEditor :procedure="value"
+                     :read-only="isReadOnly"
+                     :with-name="!isReadOnly"
+                     :with-save="!isReadOnly"
+                     :value="value"
+                     :visible="showProcedureEditor"
+                     @input="onUpdate"
+                     @close="showProcedureEditor = false"
+                     ref="editor"
+                     v-if="value?.actions?.length && showProcedureEditor" />
+
+    <div class="confirm-delete-container">
+      <ConfirmDialog :visible="true"
+                     @input="remove"
+                     @close="showConfirmDelete = false"
+                     v-if="showConfirmDelete">
+        Are you sure you want to delete the procedure <b>{{ value.name }}</b>?
+      </ConfirmDialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import ConfirmDialog from "@/components/elements/ConfirmDialog";
+import EntityMixin from "./EntityMixin"
+import EntityIcon from "./EntityIcon"
+import FileEditor from "@/components/File/EditorModal";
+import ProcedureEditor from "@/components/Procedure/ProcedureEditorModal"
+import Response from "@/components/Action/Response"
+
+export default {
+  components: {
+    ConfirmDialog,
+    EntityIcon,
+    FileEditor,
+    ProcedureEditor,
+    Response,
+  },
+  mixins: [EntityMixin],
+  emits: ['delete', 'input', 'loading'],
+
+  props: {
+    collapseOnHeaderClick: {
+      type: Boolean,
+      default: false,
+    },
+
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data: function() {
+    return {
+      args: {},
+      defaultIconClass: 'fas fa-cogs',
+      extraArgs: {},
+      collapsed_: true,
+      infoCollapsed: false,
+      lastError: null,
+      lastResponse: null,
+      newArgName: '',
+      newArgValue: '',
+      runCollapsed: false,
+      showConfirmDelete: false,
+      showFileEditor: false,
+      showProcedureEditor: false,
+    }
+  },
+
+  computed: {
+    icon() {
+      const defaultClass = this.defaultIconClass
+      const currentClass = this.value.meta?.icon?.['class']
+      let iconClass = currentClass
+      if (!currentClass || currentClass === defaultClass) {
+        iconClass = this.procedureTypeIconClass || defaultClass
+      }
+
+      return {
+        ...(this.value.meta?.icon || {}),
+        class: iconClass,
+      }
+    },
+
+    isReadOnly() {
+      return this.value.procedure_type !== 'db'
+    },
+
+    allArgs() {
+      return Object.entries({...this.args, ...this.extraArgs})
+        .map(([key, value]) => [key?.trim(), value])
+        .filter(
+          ([key, value]) => (
+            key?.length
+            && value != null
+            && (
+              typeof value !== 'string'
+              || value?.trim()?.length > 0
+            )
+          )
+        ).reduce((acc, [key, value]) => {
+          acc[key] = value
+          return acc
+        }, {})
+    },
+
+    displayPath() {
+      let src = this.value.source
+      if (!src?.length) {
+        return null
+      }
+
+      const configDir = this.$root.configDir
+      if (configDir) {
+        src = src.replace(new RegExp(`^${configDir}/`), '')
+      }
+
+      const line = parseInt(this.value.line)
+      if (!isNaN(line)) {
+        src += `:${line}`
+      }
+
+      return src
+    },
+
+    procedureTypeIconClass() {
+      if (this.value.procedure_type === 'python')
+        return 'fab fa-python'
+
+      if (this.value.procedure_type === 'config')
+        return 'fas fa-rectangle-list'
+
+      return this.defaultIconClass
+    },
+  },
+
+  methods: {
+    async run() {
+      this.$emit('loading', true)
+      try {
+        this.lastResponse = await this.request(`procedure.${this.value.name}`, this.allArgs)
+        this.lastError = null
+        this.notify({
+          text: 'Procedure executed successfully',
+          image: {
+            icon: 'play',
+          }
+        })
+      } catch (e) {
+        this.lastResponse = null
+        this.lastError = e
+        this.notify({
+          text: 'Failed to execute procedure',
+          error: true,
+          image: {
+            icon: 'exclamation-triangle',
+          }
+        })
+      } finally {
+        this.$emit('loading', false)
+      }
+    },
+
+    async remove() {
+      this.$emit('loading', true)
+      try {
+        await this.request('procedures.delete', {name: this.value.name})
+        this.$emit('loading', false)
+        this.$emit('delete')
+        this.notify({
+          text: 'Procedure deleted successfully',
+          image: {
+            icon: 'trash',
+          }
+        })
+      } finally {
+        this.$emit('loading', false)
+      }
+    },
+
+    onHeaderClick(event) {
+      if (this.collapseOnHeaderClick) {
+        event.stopPropagation()
+        this.collapsed_ = !this.collapsed_
+      }
+    },
+
+    onUpdate(value) {
+      if (!this.isReadOnly) {
+        this.$emit('input', value)
+        this.$nextTick(() => this.$refs.editor?.close())
+      }
+    },
+
+    updateArg(arg, event) {
+      let value = event.target.value
+      if (!value?.length) {
+        delete this.args[arg]
+      }
+
+      try {
+        value = JSON.parse(value)
+      } catch (e) {
+        // Do nothing
+      }
+
+      this.args[arg] = value
+    },
+
+    updateExtraArgName(oldName, event) {
+      let newName = event.target.value?.trim()
+      if (newName === oldName) {
+        return
+      }
+
+      if (newName?.length) {
+        if (oldName) {
+          this.extraArgs[newName] = this.extraArgs[oldName]
+        } else {
+          this.extraArgs[newName] = ''
+        }
+      } else {
+        this.focusNewArgName()
+      }
+
+      if (oldName) {
+        delete this.extraArgs[oldName]
+      }
+    },
+
+    updateExtraArgValue(arg, event) {
+      let value = event.target.value
+      if (!value?.length) {
+        delete this.extraArgs[arg]
+        return
+      }
+
+      this.extraArgs[arg] = this.deserializeValue(value)
+    },
+
+    addExtraArg() {
+      let name = this.newArgName?.trim()
+      let value = this.newArgValue
+      if (!name?.length || !value?.length) {
+        return
+      }
+
+      this.extraArgs[name] = this.deserializeValue(value)
+      this.newArgName = ''
+      this.newArgValue = ''
+      this.focusNewArgName()
+    },
+
+    deserializeValue(value) {
+      try {
+        return JSON.parse(value)
+      } catch (e) {
+        return value
+      }
+    },
+
+    focusNewArgName() {
+      this.$nextTick(() => this.$refs.newArgName.focus())
+    },
+  },
+
+  watch: {
+    collapsed: {
+      immediate: true,
+      handler(value) {
+        this.collapsed_ = value
+      },
+    },
+
+    selected: {
+      immediate: true,
+      handler(value) {
+        this.collapsed_ = value
+      },
+    },
+
+    showProcedureEditor(value) {
+      if (!value) {
+        this.$refs.editor?.reset()
+      }
+    },
+  },
+
+  mounted() {
+    this.collapsed_ = !this.selected
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import "common";
+
+$icon-width: 2em;
+
+.procedure-container {
+  .body {
+    padding-bottom: 0;
+    cursor: default;
+  }
+
+  section {
+    header {
+      background: $tab-bg;
+      display: flex;
+      align-items: center;
+      font-size: 1.1em;
+      font-weight: bold;
+      margin: 1em -0.5em 0.5em -0.5em;
+      padding: 0.25em 1em 0.25em 0.5em;
+      border-top: 1px solid $default-shadow-color;
+      box-shadow: $border-shadow-bottom;
+      cursor: pointer;
+
+      &:hover {
+        background: $header-bg;
+      }
+
+      &.collapsed {
+        margin-bottom: -0.1em;
+      }
+
+      .buttons {
+        display: flex;
+        justify-content: flex-end;
+      }
+
+      button.btn {
+        background: none;
+        border: none;
+        color: initial;
+
+        &:hover {
+          color: $default-hover-fg;
+        }
+      }
+    }
+
+    &:first-of-type header {
+      margin-top: -0.5em;
+
+      &.collapsed {
+        margin-bottom: -1em;
+      }
+    }
+  }
+
+  .head {
+    &:not(.collapsed) {
+      background: $selected-bg;
+      border-bottom: 1px solid $default-shadow-color;
+    }
+
+    .icon, .collapse-toggler {
+      width: $icon-width;
+    }
+
+    .label, .value-and-toggler {
+      min-width: calc(((100% - (2 * $icon-width)) / 2) - 1em);
+      max-width: calc(((100% - (2 * $icon-width)) / 2) - 1em);
+    }
+
+    .label {
+      margin-left: 1em;
+    }
+
+    .value-and-toggler {
+      text-align: right;
+    }
+  }
+
+  form {
+    width: 100%;
+
+    .row {
+      width: 100%;
+      input[type=text] {
+        width: 100%;
+      }
+    }
+
+    .args {
+      .arg {
+        margin-bottom: 0.25em;
+        padding-bottom: 0.25em;
+        border-bottom: 1px solid $default-shadow-color;
+      }
+
+      .argname {
+        font-weight: bold;
+      }
+
+      @include until($tablet) {
+        .argname {
+          width: calc(100% - 2em) !important;
+        }
+
+        .argvalue {
+          width: 100% !important;
+        }
+      }
+
+      @include from($tablet) {
+        display: flex;
+        flex-wrap: wrap;
+
+        .argname {
+          width: calc(35% - 2em) !important;
+        }
+
+        .argvalue {
+          width: 65% !important;
+        }
+      }
+    }
+
+    .run-container {
+      display: flex;
+      justify-content: center;
+      font-size: 1.5em;
+      margin-top: 0.5em;
+
+      button {
+        padding: 0 1em;
+        text-align: center;
+        border-radius: 0.5em;
+      }
+    }
+  }
+
+  .info-body {
+    .item {
+      display: flex;
+      padding: 0.5em 0.25em;
+
+      @include until($tablet) {
+        border-bottom: 1px solid $default-shadow-color;
+      }
+
+      &.delete {
+        justify-content: center;
+
+        button {
+          width: 100%;
+          color: $error-fg;
+          padding: 0;
+
+          &:hover {
+            color: $default-hover-fg;
+          }
+        }
+      }
+    }
+
+    .label {
+      font-weight: bold;
+
+      @include until($tablet) {
+        width: 100%;
+      }
+
+      @include from($tablet) {
+        width: 33.3333%;
+      }
+    }
+
+    .value {
+      @include until($tablet) {
+        width: 100%;
+      }
+
+      @include from($tablet) {
+        width: 66.6667%;
+      }
+
+      a {
+        width: 100%;
+      }
+    }
+
+    .actions {
+      @include until($tablet) {
+        flex-direction: column;
+      }
+
+      .item {
+        border-bottom: none;
+      }
+
+      button {
+        width: 100%;
+        height: 2.5em;
+        padding: 0;
+        border-radius: 1em;
+
+        &:hover {
+          color: $default-hover-fg;
+        }
+      }
+    }
+  }
+
+  .head-run-btn {
+    background: none;
+    border: none;
+    font-size: 1.25em;
+
+    &:hover {
+      background: none;
+      color: $default-hover-fg-2;
+    }
+  }
+}
+</style>
diff --git a/platypush/backend/http/webapp/src/components/panels/Procedures/Index.vue b/platypush/backend/http/webapp/src/components/panels/Procedures/Index.vue
new file mode 100644
index 0000000000..dca048a5f2
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/panels/Procedures/Index.vue
@@ -0,0 +1,310 @@
+<template>
+  <div class="procedures-container">
+    <header>
+      <input type="search"
+             class="filter"
+             title="Filter procedures"
+             placeholder="🔎"
+             v-model="filter" />
+    </header>
+
+    <main>
+      <Loading v-if="loading" />
+
+      <NoItems v-else-if="!Object.keys(procedures || {}).length">
+        No Procedures Configured
+      </NoItems>
+
+      <div class="procedures-list" v-else>
+        <div class="procedures items">
+          <div class="item" v-for="procedure in displayedProcedures" :key="procedure.name">
+            <Procedure :value="procedure"
+                       :selected="selectedProcedure === procedure.name"
+                       :collapseOnHeaderClick="true"
+                       @click="toggleProcedure(procedure)"
+                       @input="updateProcedure(procedure)"
+                       @delete="() => delete procedures[procedure.name]" />
+          </div>
+        </div>
+
+        <ProcedureEditor :value="newProcedure"
+                         title="Add Procedure"
+                         :with-name="true"
+                         :with-save="true"
+                         :read-only="false"
+                         :visible="showNewProcedureEditor"
+                         @input="updateProcedure(newProcedure)"
+                         @close="resetNewProcedure"
+                         v-if="showNewProcedureEditor" />
+      </div>
+
+      <FloatingButton icon-class="fa fa-plus"
+                      text="Add Procedure"
+                      @click="showNewProcedureEditor = true" />
+    </main>
+  </div>
+</template>
+
+<script>
+import Loading from "@/components/Loading";
+import FloatingButton from "@/components/elements/FloatingButton";
+import NoItems from "@/components/elements/NoItems";
+import Procedure from "@/components/panels/Entities/Procedure"
+import ProcedureEditor from "@/components/Procedure/ProcedureEditorModal"
+import Utils from "@/Utils";
+
+export default {
+  components: {
+    FloatingButton,
+    Loading,
+    NoItems,
+    Procedure,
+    ProcedureEditor,
+  },
+
+  mixins: [Utils],
+  props: {
+    pluginName: {
+      type: String,
+    },
+
+    config: {
+      type: Object,
+      default: () => {},
+    },
+  },
+
+  data() {
+    return {
+      filter: '',
+      loading: false,
+      newProcedure: null,
+      newProcedureTemplate: {
+        name: '',
+        actions: [],
+        meta: {
+          icon: {
+            class: 'fas fa-cogs',
+            url: null,
+            color: null,
+          },
+        },
+      },
+      procedures: {},
+      selectedProcedure: null,
+      showConfirmClose: false,
+      showNewProcedureEditor: false,
+    }
+  },
+
+  computed: {
+    displayedProcedures() {
+      return Object.values(this.procedures)
+        .filter(procedure => procedure.name.toLowerCase().includes(this.filter.toLowerCase()))
+    },
+  },
+
+  methods: {
+    mergeArgs(oldObj, newObj) {
+      return {
+        ...Object.fromEntries(
+          Object.entries(oldObj || {}).map(([key, value]) => {
+            const newValue = newObj?.[key]
+            if (newValue != null) {
+              if (typeof value === 'object' && !Array.isArray(value))
+                return [key, this.mergeArgs(value, newValue)]
+
+              return [key, newValue]
+            }
+
+            return [key, value]
+          })
+        ),
+
+        ...Object.fromEntries(
+          Object.entries(newObj || {}).filter(([key]) => oldObj?.[key] == null)
+        ),
+      }
+    },
+
+    updateProcedure(procedure) {
+      if (!procedure?.name?.length)
+        return
+
+      const curProcedure = this.procedures[procedure.name]
+      this.procedures[procedure.name] = {
+        ...this.mergeArgs(curProcedure, procedure),
+        name: procedure?.meta?.name_override || procedure.name,
+      }
+
+      this.showNewProcedureEditor = false
+    },
+
+    async refresh() {
+      const args = this.getUrlArgs()
+      if (args.filter)
+        this.filter = args.filter
+
+      this.loading = true
+      try {
+        this.procedures = await this.request('procedures.status')
+      } finally {
+        this.loading = false
+      }
+    },
+
+    onEntityUpdate(msg) {
+      const entity = msg?.entity
+      if (entity?.plugin !== this.pluginName || !entity?.name?.length)
+        return
+
+      this.updateProcedure(entity)
+    },
+
+    onEntityDelete(msg) {
+      const entity = msg?.entity
+      if (entity?.plugin !== this.pluginName)
+        return
+
+      if (this.selectedProcedure === entity.name)
+        this.selectedProcedure = null
+
+      if (this.procedures[entity.name])
+        delete this.procedures[entity.name]
+    },
+
+    resetNewProcedure() {
+      this.showNewProcedureEditor = false
+      this.newProcedure = JSON.parse(JSON.stringify(this.newProcedureTemplate))
+    },
+
+    toggleProcedure(procedure) {
+      this.selectedProcedure =
+        this.selectedProcedure === procedure.name ?
+        null : procedure.name
+    },
+  },
+
+  watch: {
+    filter() {
+      if (!this.filter?.length)
+        this.setUrlArgs({ filter: null })
+      else
+        this.setUrlArgs({ filter: this.filter })
+    },
+
+    showNewProcedureEditor(val) {
+      if (!val)
+        this.resetNewProcedure()
+    },
+  },
+
+  async mounted() {
+    this.resetNewProcedure()
+    await this.refresh()
+
+    this.subscribe(
+      this.onEntityUpdate,
+      'on-procedure-entity-update',
+      'platypush.message.event.entities.EntityUpdateEvent'
+    )
+
+    this.subscribe(
+      this.onEntityDelete,
+      'on-procedure-entity-delete',
+      'platypush.message.event.entities.EntityDeleteEvent'
+    )
+  },
+
+  unmounted() {
+    this.unsubscribe('on-procedure-entity-update')
+    this.unsubscribe('on-procedure-entity-delete')
+    this.setUrlArgs({ filter: null })
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import "src/style/items";
+
+$header-height: 3em;
+
+.procedures-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+
+  header {
+    width: 100%;
+    height: $header-height;
+    background: $tab-bg;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-bottom: 1px solid $default-shadow-color;
+
+    input.filter {
+      max-width: 600px;
+
+      @include until($tablet) {
+        width: calc(100% - 2em);
+      }
+
+      @include from($tablet) {
+        width: 600px;
+      }
+    }
+  }
+
+  main {
+    width: 100%;
+    height: calc(100% - #{$header-height});
+    overflow: auto;
+    margin-bottom: 2em;
+  }
+
+  .procedures-list {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    background: $default-bg-6;
+    flex-grow: 1;
+    justify-content: center;
+  }
+
+  .procedures {
+    @include until($tablet) {
+      width: 100%;
+    }
+
+    @include from($tablet) {
+      width: calc(100% - 2em);
+      margin-top: 1em;
+      border-radius: 1em;
+    }
+
+    max-width: 800px;
+    background: $default-bg-2;
+    display: flex;
+    flex-direction: column;
+    margin-bottom: auto;
+    box-shadow: $border-shadow-bottom-right;
+
+    .item {
+      padding: 0;
+
+      &:first-child {
+        border-top-left-radius: 1em;
+        border-top-right-radius: 1em;
+      }
+
+      &:last-child {
+        border-bottom-left-radius: 1em;
+        border-bottom-right-radius: 1em;
+      }
+    }
+  }
+}
+</style>

From 0bc714d0e36b8c9d4f1f4044dd72ddd96a4146da Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Tue, 10 Sep 2024 22:41:35 +0200
Subject: [PATCH 18/36] [UI] Added fold animation.

---
 .../backend/http/webapp/src/style/animations.scss | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/platypush/backend/http/webapp/src/style/animations.scss b/platypush/backend/http/webapp/src/style/animations.scss
index 70507a8fb2..c5b5c4abe6 100644
--- a/platypush/backend/http/webapp/src/style/animations.scss
+++ b/platypush/backend/http/webapp/src/style/animations.scss
@@ -30,6 +30,14 @@
    -webkit-animation-name: shrink;
 }
 
+.fold {
+   animation-duration: 0.5s;
+   -webkit-animation-duration: 0.5s;
+   animation-fill-mode: both;
+   animation-name: fold;
+   -webkit-animation-name: fold;
+}
+
 .unfold {
    animation-duration: 0.5s;
    -webkit-animation-duration: 0.5s;
@@ -61,8 +69,13 @@
    100% {transform: scale(0);}
 }
 
+@keyframes fold {
+   0% {transform: scale(1, 1);}
+   100% {transform: scale(1, 0);}
+}
+
 @keyframes unfold {
-   0% {transform: scale(0, 1);}
+   0% {transform: scale(1, 0);}
    100% {transform: scale(1, 1);}
 }
 

From 6eb8b7954dcd0bbeecff10264961bc30e624cac1 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Tue, 10 Sep 2024 22:41:53 +0200
Subject: [PATCH 19/36] [UI] Added styles for tiles.

---
 .../http/webapp/src/style/themes/light.scss        | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/platypush/backend/http/webapp/src/style/themes/light.scss b/platypush/backend/http/webapp/src/style/themes/light.scss
index 92dbf90f26..1a88de9b6c 100644
--- a/platypush/backend/http/webapp/src/style/themes/light.scss
+++ b/platypush/backend/http/webapp/src/style/themes/light.scss
@@ -10,9 +10,6 @@ $ok-fg: #17ad17 !default;
 $error-fg: #ad1717 !default;
 $error-fg-2: red !default;
 $error-bg: #ffaaa2 !default;
-$tile-bg: linear-gradient(90deg, rgba(9,174,128,1) 0%, rgba(71,226,179,1) 120%);
-$tile-fg: white;
-$tile-hover-bg: linear-gradient(90deg, rgba(41,216,159,1) 0%, rgba(9,188,138,1) 70%);
 
 $default-fg: black !default;
 $default-fg-2: #23513a !default;
@@ -197,3 +194,14 @@ $output-shadow: $doc-shadow;
 $title-bg: #eee;
 $title-border: 1px solid #ddd;
 $title-shadow: 0 3px 3px 0 rgba(187,187,187,0.75);
+
+//// Tiles
+$tile-bg: linear-gradient(90deg, rgba(9,174,128,1) 0%, rgba(71,226,179,1) 120%);
+$tile-bg-2: linear-gradient(270deg, rgb(71, 226, 179) 0%, rgb(81, 186, 210) 120%);
+$tile-bg-3: linear-gradient(90deg, rgb(9, 174, 43) 0%, rgb(71, 226, 179) 120%);
+$tile-fg: white;
+$tile-hover-bg: linear-gradient(90deg, rgba(41,216,159,1) 0%, rgba(9,188,138,1) 70%);
+$tile-hover-bg-2: linear-gradient(90deg, rgb(71, 226, 179) 0%, rgb(81, 186, 210) 120%);
+$tile-hover-bg-3: linear-gradient(90deg, rgb(41, 216, 63) 0%, rgb(9, 188, 138) 120%);
+$tile-keyword-fg: #f8ff00;
+$tile-code-fg: #2a5ab7;

From 202cff093fdb472243765b8e563156ceac2b3b6d Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Tue, 10 Sep 2024 22:42:50 +0200
Subject: [PATCH 20/36] [UI] Modals should react on escape only if the
 container element is present.

---
 platypush/backend/http/webapp/src/components/Modal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/platypush/backend/http/webapp/src/components/Modal.vue b/platypush/backend/http/webapp/src/components/Modal.vue
index 931f80f400..a3df10fddf 100644
--- a/platypush/backend/http/webapp/src/components/Modal.vue
+++ b/platypush/backend/http/webapp/src/components/Modal.vue
@@ -143,7 +143,7 @@ export default {
     },
 
     onEscape() {
-      if (!this.isVisible || this.ignoreEscape)
+      if (!this.isVisible || this.ignoreEscape || !this.$refs.container)
         return
 
       const myZIndex = parseInt(getComputedStyle(this.$refs.container).zIndex)

From 471ec1370cbf57ec536ede5c5ad4f6c3480291e4 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Tue, 10 Sep 2024 22:53:14 +0200
Subject: [PATCH 21/36] [Procedure Editor] Added support for conditions and
 nested blocks.

---
 .../src/components/Action/ActionTile.vue      |  13 +
 .../src/components/Action/ActionsBlock.vue    | 195 ++++++
 .../src/components/Action/ActionsList.vue     | 623 ++++++++++++++----
 .../src/components/Action/ActionsListItem.vue | 172 ++---
 .../webapp/src/components/Action/AddTile.vue  |  57 ++
 .../src/components/Action/ConditionBlock.vue  | 219 ++++++
 .../src/components/Action/ConditionEditor.vue | 104 +++
 .../src/components/Action/ConditionTile.vue   | 216 ++++++
 .../src/components/Action/EndBlockTile.vue    |  64 ++
 .../webapp/src/components/Action/ListItem.vue | 206 ++++++
 .../webapp/src/components/Action/Mixin.vue    |  36 +
 .../components/Procedure/ProcedureEditor.vue  |  56 +-
 .../webapp/src/components/elements/Tile.vue   | 175 +++++
 .../components/panels/Entities/IconEditor.vue |   7 +-
 .../components/panels/Entities/Procedure.vue  |   8 +
 15 files changed, 1881 insertions(+), 270 deletions(-)
 create mode 100644 platypush/backend/http/webapp/src/components/Action/ActionsBlock.vue
 create mode 100644 platypush/backend/http/webapp/src/components/Action/AddTile.vue
 create mode 100644 platypush/backend/http/webapp/src/components/Action/ConditionBlock.vue
 create mode 100644 platypush/backend/http/webapp/src/components/Action/ConditionEditor.vue
 create mode 100644 platypush/backend/http/webapp/src/components/Action/ConditionTile.vue
 create mode 100644 platypush/backend/http/webapp/src/components/Action/EndBlockTile.vue
 create mode 100644 platypush/backend/http/webapp/src/components/Action/ListItem.vue
 create mode 100644 platypush/backend/http/webapp/src/components/Action/Mixin.vue
 create mode 100644 platypush/backend/http/webapp/src/components/elements/Tile.vue

diff --git a/platypush/backend/http/webapp/src/components/Action/ActionTile.vue b/platypush/backend/http/webapp/src/components/Action/ActionTile.vue
index 65d9266994..e2bdca33d7 100644
--- a/platypush/backend/http/webapp/src/components/Action/ActionTile.vue
+++ b/platypush/backend/http/webapp/src/components/Action/ActionTile.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="action-tile-container">
     <div class="action-tile"
+         :class="{ new: isNew }"
          ref="tile"
          @click="$refs.actionEditor.show">
       <div class="action-delete"
@@ -122,6 +123,10 @@ export default {
   },
 
   computed: {
+    isNew() {
+      return !this.readOnly && !this.name?.length
+    },
+
     name() {
       return this.value.name || this.value.action
     },
@@ -179,6 +184,14 @@ export default {
       background: $tile-hover-bg;
     }
 
+    &.new {
+      background: $tile-bg-3;
+
+      &:hover {
+        background: $tile-hover-bg-3;
+      }
+    }
+
     .action-delete {
       width: 1.5em;
       height: 1.5em;
diff --git a/platypush/backend/http/webapp/src/components/Action/ActionsBlock.vue b/platypush/backend/http/webapp/src/components/Action/ActionsBlock.vue
new file mode 100644
index 0000000000..d5f5084872
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/Action/ActionsBlock.vue
@@ -0,0 +1,195 @@
+<template>
+  <div class="actions-block" :class="{ hover }">
+    <slot name="before" />
+
+    <div class="actions-list-container" ref="actionsListContainer">
+      <button class="collapse-button"
+              @click="collapsed_ = !collapsed_"
+              v-if="isCollapsed">
+        <i class="fas fa-ellipsis-h" />
+      </button>
+
+      <div class="actions-list" :class="actionListClasses">
+        <ActionsList :value="value[key]"
+                     :dragging="dragging"
+                     :has-else="hasElse"
+                     :indent="indent"
+                     :parent="value"
+                     :read-only="readOnly"
+                     @add-else="$emit('add-else')"
+                     @collapse="collapsed_ = !collapsed_"
+                     @drag="$emit('drag', $event)"
+                     @dragend="$emit('dragend', $event); hover = false"
+                     @dragenter="$emit('dragenter', $event)"
+                     @dragleave="$emit('dragleave', $event); hover = false"
+                     @dragover="$emit('dragover', $event)"
+                     @drop="$emit('drop', $event); hover = false"
+                     @input="$emit('input', $event); hover = false" />
+      </div>
+    </div>
+
+    <slot name="after" />
+
+    <Droppable :element="$refs.actionsListContainer"
+               @dragenter="onDragEnter"
+               @dragleave="onDragLeave"
+               @drop="hover = false"
+               v-if="!readOnly" />
+  </div>
+</template>
+
+<script>
+import { defineAsyncComponent } from "vue"
+import Droppable from "@/components/elements/Droppable"
+import Mixin from "./Mixin"
+
+export default {
+  name: 'ActionsBlock',
+  mixins: [Mixin],
+  emits: [
+    'add-else',
+    'drag',
+    'dragend',
+    'dragenter',
+    'dragleave',
+    'dragover',
+    'drop',
+    'input',
+  ],
+
+  components: {
+    // Handle indirect circular dependency
+    ActionsList: defineAsyncComponent(() => import('./ActionsList')),
+    Droppable,
+  },
+
+  props: {
+    value: {
+      type: Object,
+      required: true,
+    },
+
+    collapsed: {
+      type: Boolean,
+      default: false,
+    },
+
+    dragging: {
+      type: Boolean,
+      default: false,
+    },
+
+    indent: {
+      type: Number,
+      default: 0,
+    },
+
+    readOnly: {
+      type: Boolean,
+      default: false,
+    },
+
+    hasElse: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  computed: {
+    actionListClasses() {
+      return {
+        hidden: this.isCollapsed,
+        fold: this.folding,
+        unfold: this.unfolding,
+      }
+    },
+
+    condition() {
+      return this.getCondition(this.key)
+    },
+
+    isCollapsed() {
+      const transitioning = this.hover || this.folding || this.unfolding
+      if (transitioning) {
+        return false
+      }
+
+      if (this.collapsed_) {
+        return true
+      }
+
+      return this.collapsed
+    },
+
+    key() {
+      return this.getKey(this.value)
+    },
+  },
+
+  data() {
+    return {
+      collapsed_: false,
+      folding: false,
+      hover: false,
+      hoverTimeout: null,
+      unfolding: false,
+    }
+  },
+
+  watch: {
+    collapsed_(value) {
+      if (value) {
+        this.folding = true
+        setTimeout(() => {
+          this.folding = false
+        }, 300)
+      } else {
+        this.unfolding = true
+        setTimeout(() => {
+          this.unfolding = false
+        }, 300)
+      }
+    },
+  },
+
+  methods: {
+    onDragEnter() {
+      if (this.hoverTimeout) {
+        return
+      }
+
+      this.hoverTimeout = setTimeout(() => {
+        this.hover = true
+      }, 500)
+    },
+
+    onDragLeave() {
+      if (this.hoverTimeout) {
+        clearTimeout(this.hoverTimeout)
+        this.hoverTimeout = null
+      }
+
+      this.hover = false
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.actions-block {
+  .collapse-button {
+    width: 100%;
+    background: none !important;
+    margin-left: 1em;
+    font-size: 0.85em;
+    text-align: left;
+    border: none;
+  }
+
+  &.hover {
+    .collapse-button {
+      color: $default-hover-fg;
+    }
+  }
+}
+</style>
diff --git a/platypush/backend/http/webapp/src/components/Action/ActionsList.vue b/platypush/backend/http/webapp/src/components/Action/ActionsList.vue
index c224fa6961..84a9371b9c 100644
--- a/platypush/backend/http/webapp/src/components/Action/ActionsList.vue
+++ b/platypush/backend/http/webapp/src/components/Action/ActionsList.vue
@@ -1,28 +1,57 @@
 <template>
-  <div class="actions" :class="{dragging: dragItem != null}">
-    <div class="row item action" v-for="(action, index) in actions" :key="index">
-      <ActionsListItem :value="action"
-                       :active="dragItem != null"
-                       :read-only="readOnly"
-                       :spacer-bottom="visibleBottomSpacers[index]"
-                       :spacer-top="visibleTopSpacers[index]"
-                       :ref="`action-tile-${index}`"
-                       @delete="deleteAction(index)"
-                       @drag="dragItem = index"
-                       @dragend.prevent="dragItem = null"
-                       @dragenterspacer.prevent="dropIndex = index"
-                       @dragleavespacer.prevent="dropIndex = undefined"
-                       @dragover.prevent="onTileDragOver($event, index)"
-                       @dragoverspacer.prevent="dropIndex = index"
-                       @drop="onDrop(index)"
-                       @input="editAction($event, index)" />
+  <div class="actions-list">
+    <div class="indent-spacers" v-if="indent > 0">
+      <div class="indent-spacer" @click="onCollapse">
+        <div class="left side" />
+        <div class="right side" />
+      </div>
     </div>
 
-    <div class="row item action">
-      <ActionTile :value="newAction"
-                  :draggable="false"
-                  @input="addAction"
-                  v-if="!readOnly" />
+    <div class="actions" :class="{dragging: isDragging}">
+      <div class="row item action"
+           v-for="(action, index) in newValue"
+           :key="index">
+        <ConditionBlock v-bind="componentsData[index].props"
+                        v-on="componentsData[index].on"
+                        :collapsed="collapsedBlocks[index]"
+                        :dragging="isDragging"
+                        :has-else="!!elses[index + 1]"
+                        @add-else="addElse"
+                        v-if="conditions[index]" />
+
+        <ConditionBlock v-bind="componentsData[index].props"
+                        v-on="componentsData[index].on"
+                        :collapsed="collapsedBlocks[index]"
+                        :dragging="isDragging"
+                        :is-else="true"
+                        v-else-if="elses[index]" />
+
+        <ActionsListItem v-bind="componentsData[index].props"
+                         v-on="componentsData[index].on"
+                         v-else-if="isAction(action) && !collapsed" />
+      </div>
+
+      <div class="row item action add-action-container" v-if="!readOnly && !collapsed">
+        <ListItem :active="isDragging"
+                  :readOnly="false"
+                  :spacerBottom="false"
+                  :spacerTop="!newValue.length"
+                  :value="newAction"
+                  @drop="onDrop(0, $event)">
+          <ActionTile :value="newAction"
+                      :draggable="false"
+                      @input="addAction" />
+        </ListItem>
+      </div>
+
+      <div class="row item action add-if-container" v-if="!readOnly && !collapsed">
+        <AddTile icon="fas fa-question" title="Add Condition" @click="addCondition" />
+      </div>
+
+      <div class="row item action add-else-container"
+           v-if="!readOnly && !collapsed && parent && getCondition(parent) && !hasElse">
+        <AddTile icon="fas fa-question" title="Add Else" @click="$emit('add-else')" />
+      </div>
     </div>
   </div>
 </template>
@@ -30,17 +59,68 @@
 <script>
 import ActionsListItem from "./ActionsListItem"
 import ActionTile from "./ActionTile"
+import AddTile from "./AddTile"
+import ConditionBlock from "./ConditionBlock"
+import ListItem from "./ListItem"
+import Mixin from "./Mixin"
 import Utils from "@/Utils"
 
 export default {
-  mixins: [Utils],
-  emits: ['input'],
+  name: 'ActionsList',
+  mixins: [Mixin, Utils],
+  emits: [
+    'add-else',
+    'change',
+    'collapse',
+    'drag',
+    'dragend',
+    'dragenter',
+    'dragleave',
+    'dragover',
+    'drop',
+    'input',
+    'reset',
+  ],
+
   components: {
     ActionsListItem,
     ActionTile,
+    AddTile,
+    ConditionBlock,
+    ListItem,
   },
 
   props: {
+    collapsed: {
+      type: Boolean,
+      default: false,
+    },
+
+    dragging: {
+      type: Boolean,
+      default: false,
+    },
+
+    indent: {
+      type: Number,
+      default: 0,
+    },
+
+    hasElse: {
+      type: Boolean,
+      default: false,
+    },
+
+    parent: {
+      type: Object,
+      default: null,
+    },
+
+    readOnly: {
+      type: Boolean,
+      default: false,
+    },
+
     value: {
       type: Object,
       default: () => ({
@@ -48,112 +128,399 @@ export default {
         actions: [],
       }),
     },
-
-    readOnly: {
-      type: Boolean,
-      default: false,
-    },
   },
 
   data() {
     return {
-      actions: [],
-      dragItem: undefined,
-      dropIndex: undefined,
+      newValue: [],
+      dragIndices: undefined,
+      initialValue: undefined,
       newAction: {},
       spacerElements: {},
-      visibleTopSpacers: {},
-      visibleBottomSpacers: {},
     }
   },
 
   computed: {
+    collapsedBlocks() {
+      return this.newValue.reduce((acc, action, index) => {
+        if (!this.isActionsBlock(action)) {
+          return acc
+        }
+
+        if (!this.isDragging) {
+          acc[index] = this.collapsed
+          return acc
+        }
+
+        if (this.elses[index]) {
+          acc[index] = this.dragBlockIndex === index - 1
+        } else {
+          acc[index] = this.dragBlockIndex === index
+        }
+
+        return acc
+      }, {})
+    },
+
+    componentsData() {
+      return this.newValue.map((action, index) => {
+        let data = {
+          props: {
+            value: action,
+            active: this.isDragging,
+            readOnly: this.readOnly,
+            ref: `action-tile-${index}`,
+            spacerBottom: this.visibleBottomSpacers[index],
+            spacerTop: this.visibleTopSpacers[index],
+          },
+
+          on: {
+            delete: () => this.deleteAction(index),
+            drag: (event) => this.onDragStart(index, event),
+            dragend: (event) => this.onDragEnd(event),
+            dragenter: (event) => this.onDragEnter(index, event),
+            dragleave: (event) => this.onDragLeave(index, event),
+            dragover: (event) => this.onDragOver(event),
+            drop: (event) => {
+              try {
+                this.onDrop(index, event)
+              } finally {
+                this.isDragging = false
+              }
+            },
+            input: (value) => this.editAction(value, index),
+          }
+        }
+
+        if (this.isActionsBlock(action)) {
+          data.props.indent = this.indent + 1
+        }
+
+        return data
+      })
+    },
+
+    conditions() {
+      return this.newValue?.reduce?.((acc, action, index) => {
+        const condition = this.getCondition(action)
+        if (condition) {
+          acc[index] = {
+            condition,
+            actions: action[Object.keys(action)[0]],
+          }
+        }
+
+        return acc
+      }, {}) || {}
+    },
+
+    dragBlockIndex() {
+      if (this.dragIndex == null) {
+        return
+      }
+
+      // Return an index only if the dragged item is the actual actions block
+      // and not one of its children.
+      if (!(this.dragIndices?.length === 1 && this.dragIndices[0] === this.dragIndex)) {
+        return
+      }
+
+      // Return an index only if the dragged item is an actions block.
+      if (!this.isActionsBlock(this.newValue[this.dragIndex])) {
+        return
+      }
+
+      return this.dragIndex
+    },
+
+    isDragging: {
+      get() {
+        return this.dragging || (this.dragIndices?.length || 0) > 0
+      },
+      set(value) {
+        if (!value) {
+          this.dragIndices = null
+        }
+      },
+    },
+
+    elses() {
+      return this.newValue?.reduce?.((acc, action, index) => {
+        if (this.isElse(action) && this.conditions[index - 1]) {
+          acc[index] = action[Object.keys(action)[0]]
+        }
+
+        return acc
+      }, {}) || {}
+    },
+
     hasChanges() {
-      return JSON.stringify(this.value) !== JSON.stringify(this.actions)
+      return this.newStringValue !== this.stringValue
+    },
+
+    stringValue() {
+      return JSON.stringify(this.value)
+    },
+
+    newStringValue() {
+      return JSON.stringify(this.newValue)
+    },
+
+    dragIndex() {
+      if (!this.isDragging) {
+        return
+      }
+
+      return this.dragIndices?.[0]
+    },
+
+    visibleTopSpacers() {
+      const dragIndex = this.dragIndex
+      return this.newValue.reduce((acc, tile, index) => {
+        acc[index] = (
+          !this.isElse(tile) && (
+            dragIndex == null ||
+            dragIndex > index || (
+              dragIndex === index &&
+              this.dragIndices.length > 1
+            )
+          )
+        )
+
+        return acc
+      }, {})
+    },
+
+    visibleBottomSpacers() {
+      const dragIndex = this.dragIndex
+      return this.newValue.reduce((acc, _, index) => {
+        acc[index] = (
+          (
+            dragIndex != null && (
+              dragIndex < index || (
+                dragIndex === index &&
+                this.dragIndices.length > 1
+              )
+            )
+          ) || (
+            dragIndex == null &&
+            index === this.newValue.length - 1
+          )
+        )
+
+        return acc
+      }, {})
     },
   },
 
   methods: {
-    onDrop(index) {
-      if (this.dragItem == null || this.readOnly)
+    onDragStart(index, event) {
+      if (this.readOnly)
         return
 
-      this.actions.splice(
-        index, 0, this.actions.splice(this.dragItem, 1)[0]
+      if (Array.isArray(event)) {
+        event = [index, ...event]
+      } else {
+        event = [index]
+      }
+
+      this.dragIndices = event
+      this.$emit('drag', event)
+    },
+
+    onDragEnd() {
+      this.isDragging = false
+      this.$emit('dragend')
+    },
+
+    onDragEnter(index, event) {
+      if (!this.isDragging || this.readOnly) {
+        return
+      }
+
+      event.stopPropagation()
+      this.$emit('dragenter', index)
+    },
+
+    onDragLeave(index, event) {
+      if (!this.isDragging || this.readOnly) {
+        return
+      }
+
+      event.stopPropagation()
+      this.$emit('dragleave', index)
+    },
+
+    onDragOver(event) {
+      this.$emit('dragover', event)
+    },
+
+    onDrop(dropIndex, event) {
+      if (!this.isDragging || event == null || dropIndex == null || this.readOnly) {
+        return
+      }
+
+      event.stopPropagation()
+
+      if (!event.detail?.length) {
+        event = new CustomEvent(
+          'drop', {
+            bubbles: false,
+            cancelable: true,
+            detail: [dropIndex],
+          }
+        )
+      } else {
+        event = new CustomEvent(
+          'drop', {
+            bubbles: false,
+            cancelable: true,
+            detail: [dropIndex, ...event.detail],
+          }
+        )
+      }
+
+      if (this.indent > 0) {
+        // If the current drop location is within a nested block, then we need to
+        // bubble up the drop event to the parent block, until we reach the top block.
+        this.$emit('drop', event)
+        return
+      }
+
+      // If we are at the root level, then we have the full picture of the underlying
+      // data structure, and we can perform the drop operation directly.
+      const dropIndices = event.detail
+      const dragIndex = this.dragIndices.slice(-1)[0]
+      dropIndex = event.detail.slice(-1)[0]
+
+      // Get the parent blocks of the dragged and dropped items.
+      const dragParent = this.getParentBlock(this.dragIndices)
+      const dropParent = this.getParentBlock(dropIndices)
+      if (!(dragParent && dropParent)) {
+        return
+      }
+
+      const dragItem = dragParent?.[dragIndex]
+      const dropItem = dropParent?.[dropIndex]
+      if (!dragItem) {
+        return
+      }
+
+      // If the dragged item is a condition, then we need to update the else block as well.
+      const draggedItems = (
+        this.getCondition(dragItem) && this.isElse(dragParent[dragIndex + 1]) ? 2 : 1
       )
 
-      this.dragItem = null
-      this.dropIndex = null
+      // If the drop location is an else block, then the target needs to be the next
+      // slot, or we'll break the if-else chain.
+      if (this.isElse(dropItem)) {
+        dropIndex += 1
+      }
+
+      dropParent.splice(
+        dropIndex, 0, ...dragParent.splice(dragIndex, draggedItems)
+      )
+
+      // Emit the drop event to the parent block, so that it can update its
+      // view of the data structure.
+      this.$emit('input', this.newValue)
     },
 
-    onTileDragOver(event, index) {
-      if (this.dragItem == null || this.readOnly || this.dragItem === index)
-        return
+    onCollapse() {
+      this.$emit('collapse')
+    },
 
-      const dragOverTile = this.$refs[`action-tile-${index}`]?.[0]
-      const dragOverTileEl = dragOverTile?.$el?.nextSibling
-      if (!dragOverTileEl)
-        return
-
-      const rootTop = this.$el.getBoundingClientRect().top
-      const cursorY = event.clientY - rootTop
-      const dragOverTilePos = {
-        top: dragOverTileEl.offsetTop,
-        bottom: dragOverTileEl.offsetTop + dragOverTileEl.offsetHeight,
+    getParentBlock(indices) {
+      indices = [...indices]
+      let parent = this.newValue
+      while (parent && indices.length > 1) {
+        parent = parent[indices.shift()]
       }
 
-      const dragOverTileSectionHeight = (dragOverTilePos.bottom - dragOverTilePos.top) / 3
-      let cursorTileSection = null
-
-      if (cursorY < dragOverTilePos.top + dragOverTileSectionHeight) {
-        cursorTileSection = 'top'
-      } else if (cursorY < dragOverTilePos.bottom - dragOverTileSectionHeight) {
-        cursorTileSection = 'middle'
-      } else {
-        cursorTileSection = 'bottom'
-      }
-
-      if (cursorTileSection === 'middle') {
-        this.dropIndex = null
-        return
-      }
-
-      if (cursorTileSection === 'top' && index < this.dragItem) {
-        this.dropIndex = index
-      } else if (cursorTileSection === 'bottom' && index > this.dragItem) {
-        if (index === this.actions.length - 1) {
-          this.dropIndex = index + 1
-        } else {
-          this.dropIndex = index
+      if (parent) {
+        const blockKey = this.getKey(parent)
+        if (blockKey) {
+          parent = parent[blockKey]
         }
       }
+
+      return parent
     },
 
-    editAction(action, index) {
-      this.actions[index] = action
+    editAction(event, index) {
+      if (event?.target && event.stopPropagation) {
+        // If the event is a native event, then we need to stop the propagation,
+        // otherwise the event will be caught by the parent element. If the parent
+        // is a modal, then the modal will be closed, making it impossible to edit
+        // text fields in the action tiles.
+        event.stopPropagation()
+        return
+      }
+
+      this.newValue[index] = event
+      this.$emit('input', this.newValue)
     },
 
     addAction(action) {
-      this.actions.push(action)
+      this.newValue.push(action)
+    },
+
+    addCondition() {
+      this.newValue.push({ 'if ${True}': [] })
+      this.$nextTick(() => {
+        const newTile = this.$refs[`action-tile-${this.newValue.length - 1}`]?.[0]
+        if (!newTile) {
+          return
+        }
+
+        const newTileElement = newTile.$el?.querySelector('.tile')
+        if (!newTileElement) {
+          return
+        }
+
+        newTileElement.click()
+        this.$nextTick(() => {
+          const conditionEditor = newTile.$el?.querySelector('.condition-editor-container')
+          if (!conditionEditor) {
+            return
+          }
+
+          const input = conditionEditor.querySelector('input[type="text"]')
+          if (!input) {
+            return
+          }
+
+          input.value = ''
+          input.focus()
+        })
+      })
+    },
+
+    addElse() {
+      this.newValue.push({ 'else': [] })
     },
 
     deleteAction(index) {
-      this.actions.splice(index, 1)
-    },
+      // If the action is a condition, then we need to also remove the else block
+      const items = (
+        this.getCondition(this.newValue[index]) && this.isElse(this.newValue?.[index + 1])
+      ) ? 2 : 1
 
-    resetSpacers() {
-      this.visibleTopSpacers = Object.keys(this.actions).reduce((acc, index) => {
-        acc[index] = true
-        return acc
-      }, {})
-
-      this.visibleBottomSpacers = {[this.actions.length - 1]: true}
-      this.syncSpacers()
+      const el = this.$refs[`action-tile-${index}`]?.[0]?.$el
+      if (el) {
+        el.classList.add('shrink')
+        setTimeout(() => {
+          el.classList.remove('shrink')
+          this.newValue.splice(index, items)
+        }, 300)
+      } else {
+        this.newValue.splice(index, items)
+      }
     },
 
     syncSpacers() {
       this.$nextTick(() => {
-        this.spacerElements = Object.keys(this.actions).reduce((acc, index) => {
+        this.spacerElements = Object.keys(this.newValue).reduce((acc, index) => {
           acc[index] = this.$refs[`dropTarget_${index}`]?.[0]
           return acc
         }, {})
@@ -164,35 +531,21 @@ export default {
       if (!this.value || !this.hasChanges)
         return
 
-      this.actions = this.value
+      this.newValue = this.value
     },
   },
 
   watch: {
-    actions: {
+    newValue: {
       deep: true,
       handler(value) {
         this.$emit('input', value)
-        this.resetSpacers()
+        this.syncSpacers()
       },
     },
 
-    dragItem(value) {
-      if (value == null || this.readOnly) {
-        this.resetSpacers()
-      } else {
-        this.visibleTopSpacers = Object.keys(this.actions).reduce((acc, index) => {
-          acc[index] = this.dragItem > index
-          return acc
-        }, {})
-
-        this.visibleBottomSpacers = Object.keys(this.actions).reduce((acc, index) => {
-          acc[index] = this.dragItem < index
-          return acc
-        }, {})
-
-        this.syncSpacers()
-      }
+    dragIndices() {
+      this.syncSpacers()
     },
 
     value: {
@@ -206,17 +559,57 @@ export default {
 
   mounted() {
     this.syncValue()
-    this.resetSpacers()
+    this.syncSpacers()
   },
 }
 </script>
 
 <style lang="scss" scoped>
-$spacer-height: 1em;
+.actions-list {
+  display: flex;
+  flex-direction: row;
 
-.actions {
-  .action {
-    margin: 0;
+  .actions {
+    flex: 1;
+
+    .action {
+      margin: 0;
+    }
+
+    .add-action-container {
+      margin-bottom: 0.5em;
+    }
+  }
+
+  .spacer {
+    height: 1em;
+  }
+
+  .indent-spacers {
+    display: flex;
+    flex-direction: row;
+
+    .indent-spacer {
+      width: 1.5em;
+      height: 100%;
+      margin: 0;
+      cursor: pointer;
+
+      .side {
+        width: 0.75em;
+        height: 100%;
+
+        &.left {
+          border-right: 1px solid $selected-fg;
+        }
+      }
+
+      &:hover {
+        .side.left {
+          border-right: 1px solid $tile-code-fg;
+        }
+      }
+    }
   }
 }
 </style>
diff --git a/platypush/backend/http/webapp/src/components/Action/ActionsListItem.vue b/platypush/backend/http/webapp/src/components/Action/ActionsListItem.vue
index 61cbc1e1f0..ba3979efcf 100644
--- a/platypush/backend/http/webapp/src/components/Action/ActionsListItem.vue
+++ b/platypush/backend/http/webapp/src/components/Action/ActionsListItem.vue
@@ -1,68 +1,25 @@
 <template>
-  <div class="row item action" :class="{ dragging }">
-    <div class="spacer-wrapper" :class="{ hidden: !spacerTop }">
-      <div class="spacer"
-           :class="{ active }"
-           ref="dropTargetTop">
-        <div class="droppable-wrapper">
-          <div class="droppable-container">
-            <div class="droppable-frame">
-              <div class="droppable" />
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <Droppable :element="$refs.dropTargetTop"
-                 :disabled="readOnly"
-                 @dragend.prevent="onDrop"
-                 @dragenter.prevent="$emit('dragenterspacer', $event)"
-                 @dragleave.prevent="$emit('dragleavespacer', $event)"
-                 @dragover.prevent="$emit('dragoverspacer', $event)"
-                 @drop="$emit('drop', $event)" />
-    </div>
-
-    <div class="spacer" v-if="dragging" />
-
+  <ListItem class="action"
+            :active="active"
+            :dragging="dragging"
+            :spacer-bottom="spacerBottom"
+            :spacer-top="spacerTop"
+            :value="value"
+            v-on="componentsData.on">
     <ActionTile :value="value"
                 :draggable="!readOnly"
                 :read-only="readOnly"
                 :with-delete="!readOnly"
+                v-on="componentsData.on"
                 @contextmenu="$emit('contextmenu', $event)"
-                @drag="onDragStart"
-                @dragend.prevent="onDragEnd"
-                @dragover.prevent="$emit('dragover', $event)"
-                @drop="onDrop"
-                @input="$emit('input', $event)"
+                @drag.stop="onDragStart"
                 @delete="$emit('delete', $event)" />
-
-    <div class="spacer" v-if="dragging" />
-
-    <div class="spacer-wrapper" :class="{ hidden: !spacerBottom }">
-      <div class="spacer" :class="{ active }" ref="dropTargetBottom">
-        <div class="droppable-wrapper">
-          <div class="droppable-container">
-            <div class="droppable-frame">
-              <div class="droppable" />
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <Droppable :element="$refs.dropTargetBottom"
-                 :disabled="readOnly"
-                 @dragend.prevent="onDrop"
-                 @dragenter.prevent="$emit('dragenterspacer', $event)"
-                 @dragleave.prevent="$emit('dragleavespacer', $event)"
-                 @dragover.prevent="$emit('dragoverspacer', $event)"
-                 @drop="onDrop" />
-    </div>
-  </div>
+  </ListItem>
 </template>
 
 <script>
 import ActionTile from "@/components/Action/ActionTile"
-import Droppable from "@/components/elements/Droppable"
+import ListItem from "@/components/Action/ListItem"
 import Utils from "@/Utils"
 
 export default {
@@ -73,18 +30,15 @@ export default {
     'drag',
     'dragend',
     'dragenter',
-    'dragenterspacer',
     'dragleave',
-    'dragleavespacer',
     'dragover',
-    'dragoverspacer',
     'drop',
     'input',
   ],
 
   components: {
     ActionTile,
-    Droppable,
+    ListItem,
   },
 
   props: {
@@ -117,94 +71,56 @@ export default {
   data() {
     return {
       dragging: false,
-      dragItem: undefined,
-      dropIndex: undefined,
-      newAction: {},
-      spacerElements: {},
-      visibleTopSpacers: {},
-      visibleBottomSpacers: {},
     }
   },
 
+  computed: {
+    componentsData() {
+      return {
+        on: {
+          dragend: this.onDragEnd,
+          dragover: this.onDragOver,
+          drop: this.onDrop,
+          input: this.onInput,
+        }
+      }
+    },
+  },
+
   methods: {
     onDragStart(event) {
+      if (this.readOnly) {
+        return
+      }
+
       this.dragging = true
       this.$emit('drag', event)
     },
 
     onDragEnd(event) {
+      event.stopPropagation()
       this.dragging = false
       this.$emit('dragend', event)
     },
 
+    onDragOver(event) {
+      event.stopPropagation()
+      this.$emit('dragover', event)
+    },
+
     onDrop(event) {
+      if (this.readOnly) {
+        return
+      }
+
+      event.stopPropagation()
       this.dragging = false
       this.$emit('drop', event)
     },
+
+    onInput(value) {
+      this.$emit('input', value)
+    },
   },
 }
 </script>
-
-<style lang="scss" scoped>
-$spacer-height: 1em;
-
-.action {
-  margin: 0;
-
-  .spacer {
-    height: $spacer-height;
-
-    &.active {
-      border-top: 1px dashed transparent;
-      border-bottom: 1px dashed transparent;
-
-      .droppable-frame {
-        border: 1px dashed $selected-fg;
-        border-radius: 0.5em;
-      }
-    }
-
-    &.selected {
-      height: 5em;
-      padding: 0.5em 0;
-
-      .droppable-frame {
-        height: 100%;
-        margin: 0.5em 0;
-        padding: 0.1em;
-        border: 2px dashed $ok-fg;
-      }
-
-      .droppable {
-        height: 100%;
-        background: $play-btn-fg;
-        border: none;
-        box-shadow: none;
-        border-radius: 1em;
-        opacity: 0.5;
-      }
-    }
-  }
-
-  .droppable-wrapper,
-  .droppable-container {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-  }
-
-  .droppable-container {
-    .droppable-frame {
-      width: 100%;
-      height: 1px;
-      opacity: 0.5;
-    }
-
-    .droppable {
-      width: 100%;
-      opacity: 0.8;
-    }
-  }
-}
-</style>
diff --git a/platypush/backend/http/webapp/src/components/Action/AddTile.vue b/platypush/backend/http/webapp/src/components/Action/AddTile.vue
new file mode 100644
index 0000000000..24caaf58d1
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/Action/AddTile.vue
@@ -0,0 +1,57 @@
+<template>
+  <div class="add-tile-container">
+    <Tile class="add"
+          :draggable="false"
+          :read-only="true"
+          @click="$emit('click')">
+      <div class="add-tile">
+        <span class="icon">
+          <i :class="icon" />
+        </span>
+        <span class="name">
+          {{ title }}
+        </span>
+      </div>
+    </Tile>
+  </div>
+</template>
+
+<script>
+import Tile from "@/components/elements/Tile"
+
+export default {
+  emits: ['click'],
+  components: { Tile },
+
+  props: {
+    icon: {
+      type: String,
+      default: 'fas fa-plus',
+    },
+
+    title: {
+      type: String,
+      required: true,
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import "common";
+
+.add-tile-container {
+  position: relative;
+  margin: 0.5em 0;
+
+  .icon {
+    width: 1.5em;
+    height: 1.5em;
+    margin-right: 0.75em;
+  }
+
+  .name {
+    font-style: italic;
+  }
+}
+</style>
diff --git a/platypush/backend/http/webapp/src/components/Action/ConditionBlock.vue b/platypush/backend/http/webapp/src/components/Action/ConditionBlock.vue
new file mode 100644
index 0000000000..d0f6f6e0cc
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/Action/ConditionBlock.vue
@@ -0,0 +1,219 @@
+<template>
+  <div class="condition-block">
+    <ActionsBlock :value="value"
+                  :collapsed="collapsed"
+                  :dragging="isDragging"
+                  :has-else="hasElse"
+                  :indent="indent"
+                  :read-only="readOnly"
+                  @input="onActionsChange"
+                  @add-else="$emit('add-else')"
+                  @drag="$emit('drag', $event)"
+                  @dragend="$emit('dragend', $event)"
+                  @dragenter="$emit('dragenter', $event)"
+                  @dragleave="$emit('dragleave', $event)"
+                  @dragover="$emit('dragover', $event)"
+                  @drop="$emit('drop', $event)">
+      <template #before>
+        <ConditionTile :value="condition"
+                       v-bind="conditionTileConf.props"
+                       v-on="conditionTileConf.on"
+                       @input.prevent.stop
+                       :spacer-top="spacerTop"
+                       :spacer-bottom="false"
+                       v-if="condition && !isElse" />
+
+        <ConditionTile value="else"
+                       v-bind="conditionTileConf.props"
+                       v-on="conditionTileConf.on"
+                       :is-else="true"
+                       :spacer-top="spacerTop"
+                       :spacer-bottom="false"
+                       v-else-if="isElse" />
+      </template>
+
+      <template #after>
+        <EndBlockTile value="end if"
+                      icon="fas fa-question"
+                      :active="active"
+                      :spacer-bottom="spacerBottom"
+                      @drop="onDrop"
+                      v-if="isElse || !hasElse" />
+      </template>
+    </ActionsBlock>
+  </div>
+</template>
+
+<script>
+import ActionsBlock from "./ActionsBlock"
+import ConditionTile from "./ConditionTile"
+import EndBlockTile from "./EndBlockTile"
+import Mixin from "./Mixin"
+
+export default {
+  name: 'ConditionBlock',
+  mixins: [Mixin],
+  emits: [
+    'add-else',
+    'delete',
+    'drag',
+    'dragend',
+    'dragenter',
+    'dragleave',
+    'dragover',
+    'drop',
+    'input',
+  ],
+
+  components: {
+    ActionsBlock,
+    ConditionTile,
+    EndBlockTile,
+  },
+
+  props: {
+    value: {
+      type: Object,
+      required: true,
+    },
+
+    active: {
+      type: Boolean,
+      default: false,
+    },
+
+    collapsed: {
+      type: Boolean,
+      default: false,
+    },
+
+    dragging: {
+      type: Boolean,
+      default: false,
+    },
+
+    hasElse: {
+      type: Boolean,
+      default: false,
+    },
+
+    indent: {
+      type: Number,
+      default: 0,
+    },
+
+    isElse: {
+      type: Boolean,
+      default: false,
+    },
+
+    readOnly: {
+      type: Boolean,
+      default: false,
+    },
+
+    spacerBottom: {
+      type: Boolean,
+      default: false,
+    },
+
+    spacerTop: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      dragging_: false,
+    }
+  },
+
+  computed: {
+    condition() {
+      return this.getCondition(this.key)
+    },
+
+    conditionTileConf() {
+      return {
+        props: {
+          active: this.active,
+          readOnly: this.readOnly,
+          spacerBottom: this.spacerBottom,
+          spacerTop: this.spacerTop,
+        },
+
+        on: {
+          change: this.onConditionChange,
+          delete: (event) => this.$emit('delete', event),
+          drag: this.onDragStart,
+          dragend: this.onDragEnd,
+          dragenterspacer: (event) => this.$emit('dragenter', event),
+          dragleavespacer: (event) => this.$emit('dragleave', event),
+          dragover: (event) => this.$emit('dragover', event),
+          dragoverspacer: (event) => this.$emit('dragoverspacer', event),
+          drop: this.onDrop,
+        },
+      }
+    },
+
+    isDragging() {
+      return this.dragging_ || this.dragging
+    },
+
+    key() {
+      return this.getKey(this.value)
+    },
+  },
+
+  methods: {
+    onActionsChange(value) {
+      if (!this.key || this.readOnly) {
+        return
+      }
+
+      this.$emit('input', { [this.key]: value })
+    },
+
+    onConditionChange(condition) {
+      if (!this.key || this.readOnly || !condition?.length) {
+        return
+      }
+
+      condition = `if \${${condition.trim()}}`
+      this.$emit('input', { [condition]: this.value[this.key] })
+    },
+
+    onDragStart(event) {
+      if (this.readOnly) {
+        return
+      }
+
+      this.dragging_ = true
+      this.$emit('drag', event)
+    },
+
+    onDragEnd(event) {
+      this.dragging_ = false
+      this.$emit('dragend', event)
+    },
+
+    onDrop(event) {
+      if (this.readOnly) {
+        return
+      }
+
+      this.dragging_ = false
+      this.$emit('drop', event)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+:deep(.condition-block) {
+  .end-if-container {
+    margin-bottom: 1em;
+  }
+}
+</style>
diff --git a/platypush/backend/http/webapp/src/components/Action/ConditionEditor.vue b/platypush/backend/http/webapp/src/components/Action/ConditionEditor.vue
new file mode 100644
index 0000000000..583a8fbc1a
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/Action/ConditionEditor.vue
@@ -0,0 +1,104 @@
+<template>
+  <form class="condition-editor" @submit.prevent.stop="onSubmit">
+    <label for="condition">
+      Condition
+      <input type="text"
+             name="condition"
+             autocomplete="off"
+             :autofocus="true"
+             :value="value"
+             ref="text"
+             @input.stop="onInput" />
+    </label>
+
+    <label>
+      <button type="submit" :disabled="!hasChanges">
+        <i class="fas fa-check" />&nbsp;Save
+      </button>
+    </label>
+  </form>
+</template>
+
+<script>
+export default {
+  emits: [
+    'input',
+  ],
+
+  props: {
+    value: {
+      type: String,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      hasChanges: false,
+    }
+  },
+
+  methods: {
+    onSubmit(event) {
+      const value = this.$refs.text.value.trim()
+      if (!value.length) {
+        return
+      }
+
+      event.target.value = value
+      this.$emit('input', event)
+    },
+
+    onInput(event) {
+      const value = '' + event.target.value
+      if (!value?.trim()?.length) {
+        this.hasChanges = false
+      } else {
+        this.hasChanges = value !== this.value
+      }
+
+      this.$nextTick(() => {
+        this.$refs.text.value = value
+      })
+    },
+  },
+
+  watch: {
+    value() {
+      this.hasChanges = false
+    },
+  },
+
+  mounted() {
+    this.$nextTick(() => {
+      this.$refs.text.focus()
+    })
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import "common";
+
+.condition-editor {
+  min-width: 40em;
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  label {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: 1em;
+
+    input[type="text"] {
+      width: 100%;
+      margin-left: 1em;
+    }
+  }
+}
+</style>
diff --git a/platypush/backend/http/webapp/src/components/Action/ConditionTile.vue b/platypush/backend/http/webapp/src/components/Action/ConditionTile.vue
new file mode 100644
index 0000000000..c88bf4c0ed
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/Action/ConditionTile.vue
@@ -0,0 +1,216 @@
+<template>
+  <ListItem class="condition-tile"
+            :value="value"
+            :active="active"
+            :read-only="readOnly"
+            :spacer-bottom="spacerBottom"
+            :spacer-top="spacerTop"
+            v-on="dragListeners"
+            @input="$emit('input', $event)">
+    <div class="drag-spacer" v-if="dragging && !spacerTop">&nbsp;</div>
+
+    <Tile v-bind="tileConf.props"
+          v-on="tileConf.on"
+          :draggable="!readOnly"
+          @click.stop="showConditionEditor = true"
+          v-if="!isElse">
+      <div class="tile-name">
+        <span class="icon">
+          <i class="fas fa-question" />
+        </span>
+        <span class="name">
+          <span class="keyword">if</span> [
+          <span class="code" v-text="value" /> ]
+          <span class="keyword">then</span>
+        </span>
+      </div>
+    </Tile>
+
+    <Tile v-bind="tileConf.props"
+          v-on="tileConf.on"
+          :draggable="false"
+          :read-only="true"
+          @click="$emit('click')"
+          v-else>
+      <div class="tile-name">
+        <span class="icon">
+          <i class="fas fa-question" />
+        </span>
+        <span class="name">
+          <span class="keyword">else</span>
+        </span>
+      </div>
+    </Tile>
+
+    <div class="condition-editor-container" v-if="showConditionEditor && !readOnly">
+      <Modal title="Edit Condition"
+             :visible="true"
+             @close="showConditionEditor = false">
+        <ConditionEditor :value="value"
+                         ref="conditionEditor"
+                         @input.prevent.stop="onConditionChange"
+                         v-if="showConditionEditor" />
+      </Modal>
+    </div>
+  </ListItem>
+</template>
+
+<script>
+import ConditionEditor from "./ConditionEditor"
+import ListItem from "./ListItem"
+import Modal from "@/components/Modal"
+import Tile from "@/components/elements/Tile"
+
+export default {
+  emits: [
+    'change',
+    'click',
+    'delete',
+    'drag',
+    'dragend',
+    'dragenter',
+    'dragleave',
+    'dragover',
+    'drop',
+    'input',
+  ],
+
+  components: {
+    ConditionEditor,
+    ListItem,
+    Modal,
+    Tile,
+  },
+
+  props: {
+    value: {
+      type: String,
+      required: true,
+    },
+
+    active: {
+      type: Boolean,
+      default: false,
+    },
+
+    isElse: {
+      type: Boolean,
+      default: false,
+    },
+
+    readOnly: {
+      type: Boolean,
+      default: false,
+    },
+
+    spacerBottom: {
+      type: Boolean,
+      default: true,
+    },
+
+    spacerTop: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  computed: {
+    dragListeners() {
+      return this.readOnly ? {} : {
+          drag: this.onDragStart,
+          dragend: this.onDragEnd,
+          dragenter: (event) => this.$emit('dragenter', event),
+          dragleave: (event) => this.$emit('dragleave', event),
+          dragover: (event) => this.$emit('dragover', event),
+          drop: this.onDrop,
+      }
+    },
+
+    tileConf() {
+      return {
+        props: {
+          value: this.value,
+          class: 'keyword',
+          readOnly: this.readOnly,
+          withDelete: !this.readOnly,
+        },
+
+        on: {
+          ...this.dragListeners,
+          delete: () => this.$emit('delete'),
+          input: this.onInput,
+        },
+      }
+    },
+  },
+
+  data() {
+    return {
+      dragging: false,
+      showConditionEditor: false,
+    }
+  },
+
+  methods: {
+    onConditionChange(event) {
+      this.showConditionEditor = false
+      if (this.readOnly) {
+        return
+      }
+
+      const condition = event.target.value?.trim()
+      if (!condition?.length) {
+        return
+      }
+
+      event.target.value = condition
+      this.$emit('change', condition)
+    },
+
+    onInput(value) {
+      if (!value || this.readOnly) {
+        return
+      }
+
+      this.$emit('input', value)
+    },
+
+    onDragStart(event) {
+      if (this.readOnly) {
+        return
+      }
+
+      this.dragging = true
+      this.$emit('drag', event)
+    },
+
+    onDragEnd(event) {
+      this.dragging = false
+      this.$emit('dragend', event)
+    },
+
+    onDrop(event) {
+      this.dragging = false
+      if (this.readOnly) {
+        return
+      }
+
+      this.$emit('drop', event)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import "common";
+
+.action-tile {
+  .condition {
+    font-style: italic;
+  }
+
+  .drag-spacer {
+    height: 0;
+  }
+}
+</style>
diff --git a/platypush/backend/http/webapp/src/components/Action/EndBlockTile.vue b/platypush/backend/http/webapp/src/components/Action/EndBlockTile.vue
new file mode 100644
index 0000000000..4ae3cee4ab
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/Action/EndBlockTile.vue
@@ -0,0 +1,64 @@
+<template>
+  <ListItem class="end-block-container"
+            :active="active"
+            :value="{}"
+            :read-only="false"
+            :spacer-bottom="spacerBottom"
+            :spacer-top="spacerTop"
+            @dragenter="$emit('dragenter', $event)"
+            @dragleave="$emit('dragleave', $event)"
+            @dragover="$emit('dragover', $event)"
+            @drop="$emit('drop', $event)">
+    <Tile class="keyword" :draggable="false" :read-only="true">
+      <div class="tile-name">
+        <span class="icon">
+          <i class="fas fa-question" />
+        </span>
+        <span class="name">
+          <span class="keyword" v-text="value" />
+        </span>
+      </div>
+    </Tile>
+  </ListItem>
+</template>
+
+<script>
+import ListItem from "./ListItem"
+import Mixin from "./Mixin"
+import Tile from "@/components/elements/Tile"
+
+export default {
+  mixins: [Mixin],
+  components: {
+    ListItem,
+    Tile,
+  },
+
+  props: {
+    value: {
+      type: String,
+      required: true,
+    },
+
+    icon: {
+      type: String,
+      required: true,
+    },
+
+    active: {
+      type: Boolean,
+      default: false,
+    },
+
+    spacerTop: {
+      type: Boolean,
+      default: false,
+    },
+
+    spacerBottom: {
+      type: Boolean,
+      default: false,
+    },
+  },
+}
+</script>
diff --git a/platypush/backend/http/webapp/src/components/Action/ListItem.vue b/platypush/backend/http/webapp/src/components/Action/ListItem.vue
new file mode 100644
index 0000000000..f9354f8696
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/Action/ListItem.vue
@@ -0,0 +1,206 @@
+<template>
+  <div class="row item list-item" :class="itemClass">
+    <div class="spacer-wrapper" :class="{ hidden: !spacerTop }">
+      <div class="spacer" :class="{ active }" ref="dropTargetTop">
+        <div class="droppable-wrapper">
+          <div class="droppable-container">
+            <div class="droppable-frame">
+              <div class="droppable" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <Droppable :element="$refs.dropTargetTop" :disabled="readOnly" v-on="droppableData.top.on" />
+    </div>
+
+    <div class="spacer" v-if="dragging" />
+
+    <slot />
+
+    <div class="spacer" v-if="dragging" />
+
+    <div class="spacer-wrapper" :class="{ hidden: !spacerBottom }">
+      <div class="spacer" :class="{ active }" ref="dropTargetBottom">
+        <div class="droppable-wrapper">
+          <div class="droppable-container">
+            <div class="droppable-frame">
+              <div class="droppable" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <Droppable :element="$refs.dropTargetBottom" :disabled="readOnly" v-on="droppableData.bottom.on" />
+    </div>
+  </div>
+</template>
+
+<script>
+import Droppable from "@/components/elements/Droppable"
+import Utils from "@/Utils"
+
+export default {
+  mixins: [Utils],
+  emits: [
+    'contextmenu',
+    'dragend',
+    'dragenter',
+    'dragleave',
+    'dragover',
+    'drop',
+  ],
+
+  components: {
+    Droppable,
+  },
+
+  props: {
+    active: {
+      type: Boolean,
+      default: false,
+    },
+
+    className: {
+      type: [String, Object],
+      default: '',
+    },
+
+    dragging: {
+      type: Boolean,
+      default: false,
+    },
+
+    readOnly: {
+      type: Boolean,
+      default: false,
+    },
+
+    spacerBottom: {
+      type: Boolean,
+      default: false,
+    },
+
+    spacerTop: {
+      type: Boolean,
+      default: true,
+    },
+
+    value: {
+      type: [String, Object],
+      required: true,
+    },
+  },
+
+  computed: {
+    droppableData() {
+      return ['bottom', 'top'].reduce((acc, key) => {
+        acc[key] = {
+          on: {
+            dragend: this.onDragEnd,
+            dragenter: this.onDragEnter,
+            dragleave: this.onDragLeave,
+            dragover: this.onDragOver,
+            drop: this.onDrop,
+          },
+        }
+
+        return acc
+      }, {})
+    },
+
+    itemClass() {
+      return {
+        dragging: this.dragging,
+        ...(this.className?.trim ? { [this.className]: true } : (this.className || {})),
+      }
+    },
+  },
+
+  methods: {
+    onDragEnd(event) {
+      this.$emit('dragend', event)
+    },
+
+    onDragEnter(event) {
+      this.$emit('dragenter', event)
+    },
+
+    onDragLeave(event) {
+      this.$emit('dragleave', event)
+    },
+
+    onDragOver(event) {
+      this.$emit('dragover', event)
+    },
+
+    onDrop(event) {
+      this.$emit('drop', event)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+$spacer-height: 1em;
+
+.list-item {
+  margin: 0;
+
+  .spacer {
+    height: $spacer-height;
+
+    &.active {
+      border-top: 1px dashed transparent;
+      border-bottom: 1px dashed transparent;
+
+      .droppable-frame {
+        border: 1px dashed $selected-fg;
+        border-radius: 0.5em;
+      }
+    }
+
+    &.selected {
+      height: 5em;
+      padding: 0.5em 0;
+
+      .droppable-frame {
+        height: 100%;
+        margin: 0.5em 0;
+        padding: 0.1em;
+        border: 2px dashed $ok-fg;
+      }
+
+      .droppable {
+        height: 100%;
+        background: $play-btn-fg;
+        border: none;
+        box-shadow: none;
+        border-radius: 1em;
+        opacity: 0.5;
+      }
+    }
+  }
+
+  .droppable-wrapper,
+  .droppable-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+  }
+
+  .droppable-container {
+    .droppable-frame {
+      width: 100%;
+      height: 1px;
+      opacity: 0.5;
+    }
+
+    .droppable {
+      width: 100%;
+      opacity: 0.8;
+    }
+  }
+}
+</style>
diff --git a/platypush/backend/http/webapp/src/components/Action/Mixin.vue b/platypush/backend/http/webapp/src/components/Action/Mixin.vue
new file mode 100644
index 0000000000..48a9eacba0
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/Action/Mixin.vue
@@ -0,0 +1,36 @@
+<script>
+export default {
+  methods: {
+    getCondition(value) {
+      value = this.getKey(value) || value
+      return value?.trim?.()?.match(/^if\s*\$\{(.*)\}\s*$/i)?.[1]?.trim?.()
+    },
+
+    getKey(value) {
+      return this.isKeyword(value) ? Object.keys(value)[0] : null
+    },
+
+    isAction(value) {
+      return typeof value === 'object' && !Array.isArray(value) && (value.action || value.name)
+    },
+
+    isActionsBlock(value) {
+      return this.getCondition(value) || this.isElse(value)
+    },
+
+    isKeyword(value) {
+      return (
+        value &&
+        typeof value === 'object' &&
+        !Array.isArray(value) &&
+        Object.keys(value).length === 1 &&
+        !this.isAction(value)
+      )
+    },
+
+    isElse(value) {
+      return (this.getKey(value) || value)?.toLowerCase?.()?.trim?.() === 'else'
+    },
+  },
+}
+</script>
diff --git a/platypush/backend/http/webapp/src/components/Procedure/ProcedureEditor.vue b/platypush/backend/http/webapp/src/components/Procedure/ProcedureEditor.vue
index 6a0e910e12..1e9558bf5c 100644
--- a/platypush/backend/http/webapp/src/components/Procedure/ProcedureEditor.vue
+++ b/platypush/backend/http/webapp/src/components/Procedure/ProcedureEditor.vue
@@ -64,7 +64,7 @@
 
             <ActionsList :value="newValue.actions"
                          :read-only="readOnly"
-                         @input="newValue.actions = $event" />
+                         @input="onActionsEdit" />
           </div>
 
           <!-- Structured response container -->
@@ -176,7 +176,7 @@
               <FloatingButton icon-class="fa fa-save"
                               right glow
                               title="Save Procedure"
-                              :disabled="!hasChanges"
+                              :disabled="!canSave"
                               @click="save"
                               v-if="showSave" />
               <FloatingButton icon-class="fa fa-play"
@@ -292,14 +292,24 @@ export default {
       return this.$el.querySelector('.floating-btns')
     },
 
-    hasChanges() {
-      if (!this.newValue?.name?.length)
+    canSave() {
+      if (
+        !this.withSave ||
+        this.readOnly ||
+        !this.newValue?.name?.length ||
+        !this.newValue?.actions?.length
+      )
         return false
 
-      if (!this.newValue?.actions?.length)
-        return false
+      return this.valueString !== this.newValueString
+    },
 
-      return JSON.stringify(this.value) !== JSON.stringify(this.newValue)
+    valueString() {
+      return JSON.stringify(this.value)
+    },
+
+    newValueString() {
+      return JSON.stringify(this.newValue)
     },
 
     modal_() {
@@ -310,7 +320,7 @@ export default {
     },
 
     shouldConfirmClose() {
-      return this.hasChanges && !this.readOnly && this.withSave && !this.shouldForceClose
+      return this.canSave && !this.shouldForceClose
     },
 
     showArgs() {
@@ -324,7 +334,7 @@ export default {
 
   methods: {
     async save() {
-      if (!this.hasChanges)
+      if (!this.canSave)
         return
 
       this.loading = true
@@ -468,12 +478,13 @@ export default {
 
     duplicate() {
       const name = `${this.newValue.name || ''}__copy`
+      const duplicate = JSON.parse(JSON.stringify(this.newValue))
       this.duplicateValue = {
-        ...this.newValue,
+        ...duplicate,
         ...{
           meta: {
-            ...(this.newValue.meta || {}),
-            icon: {...(this.newValue.meta?.icon || {})},
+            ...(duplicate.meta || {}),
+            icon: {...(duplicate.meta?.icon || {})},
           }
         },
         id: null,
@@ -482,16 +493,8 @@ export default {
       }
     },
 
-    editAction(action, index) {
-      this.newValue.actions[index] = action
-    },
-
-    addAction(action) {
-      this.newValue.actions.push(action)
-    },
-
-    deleteAction(index) {
-      this.newValue.actions.splice(index, 1)
+    onActionsEdit(actions) {
+      this.newValue.actions = actions
     },
 
     onArgInput(arg, index) {
@@ -630,11 +633,12 @@ export default {
       if (!this.value)
         return
 
+      const value = JSON.parse(JSON.stringify(this.value))
       this.newValue = {
-        ...this.value,
-        actions: this.value.actions?.map(a => ({...a})),
-        args: [...(this.value?.args || [])],
-        meta: {...(this.value?.meta || {})},
+        ...value,
+        actions: value.actions?.map(a => ({...a})),
+        args: [...(value?.args || [])],
+        meta: {...(value?.meta || {})},
       }
     },
   },
diff --git a/platypush/backend/http/webapp/src/components/elements/Tile.vue b/platypush/backend/http/webapp/src/components/elements/Tile.vue
new file mode 100644
index 0000000000..a1d6ef7ef8
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/elements/Tile.vue
@@ -0,0 +1,175 @@
+<template>
+  <div class="tile-container" :class="className">
+    <div class="tile" ref="tile" @click="$emit('click', $event)">
+      <div class="delete"
+           title="Remove"
+           v-if="withDelete"
+           @click.stop="$emit('delete')">
+        <i class="icon fas fa-xmark" />
+      </div>
+
+      <slot />
+    </div>
+
+    <Draggable :element="tile"
+               :disabled="readOnly"
+               :value="value"
+               @drag="$emit('drag', $event)"
+               @drop="$emit('drop', $event)"
+               v-if="draggable" />
+
+    <Droppable :element="tile"
+               @dragenter="$emit('dragenter', $event)"
+               @dragleave="$emit('dragleave', $event)"
+               @dragover="$emit('dragover', $event)"
+               @drop="$emit('drop', $event)"
+               v-if="!readOnly" />
+  </div>
+</template>
+
+<script>
+import Draggable from "@/components/elements/Draggable"
+import Droppable from "@/components/elements/Droppable"
+
+export default {
+  emits: [
+    'click',
+    'delete',
+    'drag',
+    'dragenter',
+    'dragleave',
+    'dragover',
+    'drop',
+  ],
+
+  components: {
+    Draggable,
+    Droppable,
+  },
+
+  props: {
+    className: {
+      type: [String, Object],
+      default: '',
+    },
+
+    draggable: {
+      type: Boolean,
+      default: true,
+    },
+
+    readOnly: {
+      type: Boolean,
+      default: false,
+    },
+
+    value: {
+      type: [Object, String, Number, Boolean, Array],
+    },
+
+    withDelete: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      tile: undefined,
+    }
+  },
+
+  mounted() {
+    this.tile = this.$refs.tile
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.tile-container {
+  position: relative;
+
+  .tile {
+    min-width: 20em;
+    background: $tile-bg;
+    color: $tile-fg;
+    display: flex;
+    flex-direction: column;
+    padding: 0.5em 1em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    content: "";
+    position: relative;
+    border-radius: 1em;
+    cursor: pointer;
+
+    &:hover {
+      background: $tile-hover-bg;
+    }
+
+    &.selected {
+      background: $tile-hover-bg;
+    }
+
+    .delete {
+      width: 1.5em;
+      height: 1.5em;
+      font-size: 1.25em;
+      position: absolute;
+      top: 0.25em;
+      right: 0;
+      opacity: 0.7;
+      transition: opacity 0.25s ease-in-out;
+      cursor: pointer;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+
+  &.keyword {
+    .tile {
+      background: $tile-bg-2;
+
+      &:hover {
+        background: $tile-hover-bg-2;
+      }
+    }
+  }
+
+  &.add {
+    .tile {
+      background: $tile-bg-3;
+
+      &:hover {
+        background: $tile-hover-bg-3;
+      }
+    }
+  }
+}
+
+:deep(.tile) {
+  .tile-name {
+    display: inline-flex;
+    font-size: 1.1em;
+    font-weight: bold;
+    font-family: monospace;
+    align-items: center;
+
+    .icon {
+      width: 1.5em;
+      height: 1.5em;
+      margin-right: 0.75em;
+    }
+  }
+
+  .keyword {
+    color: $tile-keyword-fg;
+  }
+
+  .code {
+    color: $tile-code-fg;
+  }
+}
+</style>
diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/IconEditor.vue b/platypush/backend/http/webapp/src/components/panels/Entities/IconEditor.vue
index a547fb0e68..54ab29fbce 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/IconEditor.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/IconEditor.vue
@@ -160,7 +160,12 @@ export default {
 
   watch: {
     editIcon() {
-      this.newIcon = (this.entity.meta?.icon?.['class'] || this.entity.meta?.icon?.url)?.trim()
+      this.newIcon = (
+        this.entity.meta?.icon?.url ||
+        this.entity.meta?.icon?.['class'] ||
+        this.currentIcon.url ||
+        this.currentIcon.class
+      )?.trim()
     },
 
     newIcon() {
diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/Procedure.vue b/platypush/backend/http/webapp/src/components/panels/Entities/Procedure.vue
index 988d266411..69dac41ca8 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/Procedure.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/Procedure.vue
@@ -133,6 +133,10 @@
             </div>
           </div>
 
+          <div class="item">
+            <IconEditor :entity="value" />
+          </div>
+
           <div class="item actions" v-if="value?.actions?.length">
             <div class="label">Actions</div>
             <div class="value">
@@ -212,6 +216,7 @@ import ConfirmDialog from "@/components/elements/ConfirmDialog";
 import EntityMixin from "./EntityMixin"
 import EntityIcon from "./EntityIcon"
 import FileEditor from "@/components/File/EditorModal";
+import IconEditor from "@/components/panels/Entities/IconEditor";
 import ProcedureEditor from "@/components/Procedure/ProcedureEditorModal"
 import Response from "@/components/Action/Response"
 
@@ -220,6 +225,7 @@ export default {
     ConfirmDialog,
     EntityIcon,
     FileEditor,
+    IconEditor,
     ProcedureEditor,
     Response,
   },
@@ -658,6 +664,8 @@ $icon-width: 2em;
     }
 
     .value {
+      text-align: right;
+
       @include until($tablet) {
         width: 100%;
       }

From daa030ff4c1c072f37243616e659861a4a272d8f Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Tue, 10 Sep 2024 22:54:12 +0200
Subject: [PATCH 22/36] [UI] Improved `Draggable` component events.

`Draggable` components should emit `dragend`, not `drop` events.

`drop` should only be emitted by `Droppable` components, or the receiver
of a component that uses both won't be able to tell if a `drop` event
came from a component being dragged, or from an element where a dragged
element was dropped.
---
 .../src/components/elements/Draggable.vue      | 18 +++++-------------
 1 file changed, 5 insertions(+), 13 deletions(-)

diff --git a/platypush/backend/http/webapp/src/components/elements/Draggable.vue b/platypush/backend/http/webapp/src/components/elements/Draggable.vue
index feb37e1899..34ae4fc6ed 100644
--- a/platypush/backend/http/webapp/src/components/elements/Draggable.vue
+++ b/platypush/backend/http/webapp/src/components/elements/Draggable.vue
@@ -13,6 +13,7 @@ export default {
   emits: [
     'contextmenu',
     'drag',
+    'dragend',
     'drop',
   ],
 
@@ -37,7 +38,7 @@ export default {
     },
 
     value: {
-      type: Object,
+      type: [Object, String, Number, Boolean, Array],
       default: () => ({}),
     },
   },
@@ -51,8 +52,8 @@ export default {
         drag: this.onDrag,
         dragend: this.onDragEnd,
         dragstart: this.onDragStart,
-        drop: this.onDrop,
-        touchcancel: this.onDrop,
+        drop: this.onDragEnd,
+        touchcancel: this.onDragEnd,
         touchend: this.onTouchEnd,
         touchmove: this.onTouchMove,
         touchstart: this.onTouchStart,
@@ -121,7 +122,7 @@ export default {
       }
 
       this.reset()
-      this.$emit('drop', event)
+      this.$emit('dragend', event)
     },
 
     onTouchStart(event) {
@@ -242,15 +243,6 @@ export default {
       this.onDragEnd(event)
     },
 
-    onDrop(event) {
-      if (this.disabled) {
-        return
-      }
-
-      this.reset()
-      this.$emit('drop', event)
-    },
-
     handleTouchScroll(value, parent) {
       this.touchScrollDirection = value
       if (!(value[0] || value[1])) {

From b337bf7a53673395009e1186a3ac85ff2001d7f9 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Thu, 12 Sep 2024 02:02:27 +0200
Subject: [PATCH 23/36] [#341] Added `return` block to `ProcedureEditor`.

---
 .../src/components/Action/ActionsList.vue     | 213 +++++++++++++++---
 .../src/components/Action/ConditionTile.vue   |  14 +-
 ...nditionEditor.vue => ExpressionEditor.vue} |  33 ++-
 .../webapp/src/components/Action/Mixin.vue    |  10 +
 .../src/components/Action/ReturnTile.vue      | 138 ++++++++++++
 5 files changed, 362 insertions(+), 46 deletions(-)
 rename platypush/backend/http/webapp/src/components/Action/{ConditionEditor.vue => ExpressionEditor.vue} (73%)
 create mode 100644 platypush/backend/http/webapp/src/components/Action/ReturnTile.vue

diff --git a/platypush/backend/http/webapp/src/components/Action/ActionsList.vue b/platypush/backend/http/webapp/src/components/Action/ActionsList.vue
index 84a9371b9c..d366e87f6d 100644
--- a/platypush/backend/http/webapp/src/components/Action/ActionsList.vue
+++ b/platypush/backend/http/webapp/src/components/Action/ActionsList.vue
@@ -9,13 +9,12 @@
 
     <div class="actions" :class="{dragging: isDragging}">
       <div class="row item action"
-           v-for="(action, index) in newValue"
+           v-for="(action, index) in visibleActions"
            :key="index">
         <ConditionBlock v-bind="componentsData[index].props"
                         v-on="componentsData[index].on"
                         :collapsed="collapsedBlocks[index]"
                         :dragging="isDragging"
-                        :has-else="!!elses[index + 1]"
                         @add-else="addElse"
                         v-if="conditions[index]" />
 
@@ -26,12 +25,18 @@
                         :is-else="true"
                         v-else-if="elses[index]" />
 
+        <ReturnTile v-bind="componentsData[index].props"
+                    :value="returnValue"
+                    @change="editReturn($event)"
+                    @delete="deleteAction(index)"
+                    v-else-if="isReturn(action)" />
+
         <ActionsListItem v-bind="componentsData[index].props"
                          v-on="componentsData[index].on"
                          v-else-if="isAction(action) && !collapsed" />
       </div>
 
-      <div class="row item action add-action-container" v-if="!readOnly && !collapsed">
+      <div class="row item action add-action-container" v-if="visibleAddButtons.action">
         <ListItem :active="isDragging"
                   :readOnly="false"
                   :spacerBottom="false"
@@ -44,13 +49,24 @@
         </ListItem>
       </div>
 
-      <div class="row item action add-if-container" v-if="!readOnly && !collapsed">
-        <AddTile icon="fas fa-question" title="Add Condition" @click="addCondition" />
+      <div class="add-buttons-expander" v-if="showAddButtonsExpander">
+        <button @click.stop.prevent="collapseAddButtons = !collapseAddButtons">
+          <i class="fas" :class="collapseAddButtons ? 'fa-angle-down' : 'fa-angle-up'" />
+        </button>
       </div>
 
-      <div class="row item action add-else-container"
-           v-if="!readOnly && !collapsed && parent && getCondition(parent) && !hasElse">
-        <AddTile icon="fas fa-question" title="Add Else" @click="$emit('add-else')" />
+      <div class="extra-add-buttons fade-in" v-if="showAddButtons">
+        <div class="row item action add-return-container" v-if="visibleAddButtons.return">
+          <AddTile icon="fas fa-angle-right" title="Add Return" @click="addReturn" />
+        </div>
+
+        <div class="row item action add-if-container" v-if="visibleAddButtons.condition">
+          <AddTile icon="fas fa-question" title="Add Condition" @click="addCondition" />
+        </div>
+
+        <div class="row item action add-else-container" v-if="visibleAddButtons.else">
+          <AddTile icon="fas fa-question" title="Add Else" @click="$emit('add-else')" />
+        </div>
       </div>
     </div>
   </div>
@@ -63,6 +79,7 @@ import AddTile from "./AddTile"
 import ConditionBlock from "./ConditionBlock"
 import ListItem from "./ListItem"
 import Mixin from "./Mixin"
+import ReturnTile from "./ReturnTile"
 import Utils from "@/Utils"
 
 export default {
@@ -88,6 +105,7 @@ export default {
     AddTile,
     ConditionBlock,
     ListItem,
+    ReturnTile,
   },
 
   props: {
@@ -132,6 +150,7 @@ export default {
 
   data() {
     return {
+      collapseAddButtons: true,
       newValue: [],
       dragIndices: undefined,
       initialValue: undefined,
@@ -192,6 +211,14 @@ export default {
           }
         }
 
+        if (
+          this.getCondition(action) &&
+          this.newValue[index + 1] &&
+          this.isElse(this.newValue[index + 1])
+        ) {
+          data.props.hasElse = true
+        }
+
         if (this.isActionsBlock(action)) {
           data.props.indent = this.indent + 1
         }
@@ -274,6 +301,91 @@ export default {
       return this.dragIndices?.[0]
     },
 
+    returnIndex() {
+      const ret = this.newValue?.reduce?.((acc, action, index) => {
+        if (acc >= 0)
+          return acc
+
+        if (this.isReturn(action))
+          return index
+
+        return acc
+      }, -1)
+
+      return ret >= 0 ? ret : null
+    },
+
+    returnValue() {
+      if (this.returnIndex == null)
+        return ''
+
+      const ret = this.newValue[this.returnIndex]
+      if (ret == null)
+        return ''
+
+      let retValue = null
+      if (Array.isArray(ret))
+        retValue = ret.length === 1 ? ret[0].match(/^return\s*(.*)$/)?.[1] : ret
+      else
+        retValue = ret.return
+
+      return retValue || ''
+    },
+
+    showAddButtons() {
+      return (
+        this.newValue.length === 0 || !this.collapseAddButtons
+      )
+    },
+
+    showAddButtonsExpander() {
+      return (
+        !this.readOnly &&
+        this.newValue?.length > 0 &&
+        Object.entries(this.visibleAddButtons).filter(
+          ([key, value]) => value && key != 'action'
+        ).length > 1
+      )
+    },
+
+    stopIndex() {
+      return this.returnIndex
+    },
+
+    visibleActions() {
+      return this.newValue.reduce((acc, action, index) => {
+        if (this.stopIndex != null && index > this.stopIndex)
+          return acc
+
+        if (
+          this.conditions[index] ||
+          this.elses[index] ||
+          this.isAction(action) ||
+          this.isReturn(action)
+        ) {
+          acc[index] = action
+        }
+
+        return acc
+      }, {})
+    },
+
+    visibleAddButtons() {
+      return {
+        action: !this.readOnly && !this.collapsed && this.stopIndex == null,
+        return: !this.readOnly && !this.collapsed && this.stopIndex == null,
+        condition: !this.readOnly && !this.collapsed && this.stopIndex == null,
+        else: (
+          !this.readOnly &&
+          !this.collapsed &&
+          this.parent &&
+          this.getCondition(this.parent) &&
+          !this.hasElse &&
+          this.stopIndex == null
+        ),
+      }
+    },
+
     visibleTopSpacers() {
       const dragIndex = this.dragIndex
       return this.newValue.reduce((acc, tile, index) => {
@@ -361,25 +473,22 @@ export default {
       }
 
       event.stopPropagation()
+      let dropIndices = []
 
       if (!event.detail?.length) {
-        event = new CustomEvent(
-          'drop', {
-            bubbles: false,
-            cancelable: true,
-            detail: [dropIndex],
-          }
-        )
+        dropIndices = [dropIndex]
       } else {
-        event = new CustomEvent(
-          'drop', {
-            bubbles: false,
-            cancelable: true,
-            detail: [dropIndex, ...event.detail],
-          }
-        )
+        dropIndices = [dropIndex, ...event.detail]
       }
 
+      event = new CustomEvent(
+        'drop', {
+          bubbles: false,
+          cancelable: true,
+          detail: dropIndices,
+        }
+      )
+
       if (this.indent > 0) {
         // If the current drop location is within a nested block, then we need to
         // bubble up the drop event to the parent block, until we reach the top block.
@@ -389,7 +498,6 @@ export default {
 
       // If we are at the root level, then we have the full picture of the underlying
       // data structure, and we can perform the drop operation directly.
-      const dropIndices = event.detail
       const dragIndex = this.dragIndices.slice(-1)[0]
       dropIndex = event.detail.slice(-1)[0]
 
@@ -435,12 +543,12 @@ export default {
       let parent = this.newValue
       while (parent && indices.length > 1) {
         parent = parent[indices.shift()]
-      }
 
-      if (parent) {
-        const blockKey = this.getKey(parent)
-        if (blockKey) {
-          parent = parent[blockKey]
+        if (parent) {
+          const blockKey = this.getKey(parent)
+          if (blockKey) {
+            parent = parent[blockKey]
+          }
         }
       }
 
@@ -462,11 +570,29 @@ export default {
     },
 
     addAction(action) {
-      this.newValue.push(action)
+      this.newValue.push(
+        {
+          ...action,
+          action: action.name || action.action,
+        }
+      )
     },
 
     addCondition() {
       this.newValue.push({ 'if ${True}': [] })
+      this.selectLastExprEditor()
+    },
+
+    addReturn() {
+      this.newValue.push({ 'return': null })
+      this.selectLastExprEditor()
+    },
+
+    editReturn(value) {
+      this.newValue[this.returnIndex] = { 'return': value?.length ? value : null }
+    },
+
+    selectLastExprEditor() {
       this.$nextTick(() => {
         const newTile = this.$refs[`action-tile-${this.newValue.length - 1}`]?.[0]
         if (!newTile) {
@@ -480,12 +606,12 @@ export default {
 
         newTileElement.click()
         this.$nextTick(() => {
-          const conditionEditor = newTile.$el?.querySelector('.condition-editor-container')
-          if (!conditionEditor) {
+          const exprEditor = newTile.$el?.querySelector('.expr-editor-container')
+          if (!exprEditor) {
             return
           }
 
-          const input = conditionEditor.querySelector('input[type="text"]')
+          const input = exprEditor.querySelector('input[type="text"]')
           if (!input) {
             return
           }
@@ -611,5 +737,28 @@ export default {
       }
     }
   }
+
+  .add-buttons-expander {
+    width: 100%;
+    height: 1em;
+    margin: -0.5em 0 0.5em 0;
+
+    button {
+      width: 100%;
+      height: 100%;
+      background: none;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: none;
+      margin: 0;
+      padding: 0.5em 0 0 0;
+
+      &:hover {
+        color: $default-hover-fg;
+      }
+    }
+    display: flex;
+  }
 }
 </style>
diff --git a/platypush/backend/http/webapp/src/components/Action/ConditionTile.vue b/platypush/backend/http/webapp/src/components/Action/ConditionTile.vue
index c88bf4c0ed..4493b34c38 100644
--- a/platypush/backend/http/webapp/src/components/Action/ConditionTile.vue
+++ b/platypush/backend/http/webapp/src/components/Action/ConditionTile.vue
@@ -46,17 +46,19 @@
       <Modal title="Edit Condition"
              :visible="true"
              @close="showConditionEditor = false">
-        <ConditionEditor :value="value"
-                         ref="conditionEditor"
-                         @input.prevent.stop="onConditionChange"
-                         v-if="showConditionEditor" />
+        <ExpressionEditor :value="value"
+                          ref="conditionEditor"
+                          @input.prevent.stop="onConditionChange"
+                          v-if="showConditionEditor">
+          Condition
+        </ExpressionEditor>
       </Modal>
     </div>
   </ListItem>
 </template>
 
 <script>
-import ConditionEditor from "./ConditionEditor"
+import ExpressionEditor from "./ExpressionEditor"
 import ListItem from "./ListItem"
 import Modal from "@/components/Modal"
 import Tile from "@/components/elements/Tile"
@@ -76,7 +78,7 @@ export default {
   ],
 
   components: {
-    ConditionEditor,
+    ExpressionEditor,
     ListItem,
     Modal,
     Tile,
diff --git a/platypush/backend/http/webapp/src/components/Action/ConditionEditor.vue b/platypush/backend/http/webapp/src/components/Action/ExpressionEditor.vue
similarity index 73%
rename from platypush/backend/http/webapp/src/components/Action/ConditionEditor.vue
rename to platypush/backend/http/webapp/src/components/Action/ExpressionEditor.vue
index 583a8fbc1a..9b1c71ee42 100644
--- a/platypush/backend/http/webapp/src/components/Action/ConditionEditor.vue
+++ b/platypush/backend/http/webapp/src/components/Action/ExpressionEditor.vue
@@ -1,11 +1,13 @@
 <template>
-  <form class="condition-editor" @submit.prevent.stop="onSubmit">
-    <label for="condition">
-      Condition
+  <form class="expression-editor" @submit.prevent.stop="onSubmit">
+    <label for="expression">
+      <slot />
+
       <input type="text"
-             name="condition"
+             name="expression"
              autocomplete="off"
              :autofocus="true"
+             :placeholder="placeholder"
              :value="value"
              ref="text"
              @input.stop="onInput" />
@@ -28,7 +30,17 @@ export default {
   props: {
     value: {
       type: String,
-      required: true,
+      default: '',
+    },
+
+    allowEmpty: {
+      type: Boolean,
+      default: false,
+    },
+
+    placeholder: {
+      type: String,
+      default: '',
     },
   },
 
@@ -41,7 +53,7 @@ export default {
   methods: {
     onSubmit(event) {
       const value = this.$refs.text.value.trim()
-      if (!value.length) {
+      if (!value.length && !this.allowEmpty) {
         return
       }
 
@@ -52,7 +64,7 @@ export default {
     onInput(event) {
       const value = '' + event.target.value
       if (!value?.trim()?.length) {
-        this.hasChanges = false
+        this.hasChanges = this.allowEmpty
       } else {
         this.hasChanges = value !== this.value
       }
@@ -70,6 +82,11 @@ export default {
   },
 
   mounted() {
+    this.hasChanges = false
+    if (!this.value?.trim()?.length) {
+      this.hasChanges = this.allowEmpty
+    }
+
     this.$nextTick(() => {
       this.$refs.text.focus()
     })
@@ -80,7 +97,7 @@ export default {
 <style lang="scss" scoped>
 @import "common";
 
-.condition-editor {
+.expression-editor {
   min-width: 40em;
   max-width: 100%;
   display: flex;
diff --git a/platypush/backend/http/webapp/src/components/Action/Mixin.vue b/platypush/backend/http/webapp/src/components/Action/Mixin.vue
index 48a9eacba0..4911c9a3d2 100644
--- a/platypush/backend/http/webapp/src/components/Action/Mixin.vue
+++ b/platypush/backend/http/webapp/src/components/Action/Mixin.vue
@@ -31,6 +31,16 @@ export default {
     isElse(value) {
       return (this.getKey(value) || value)?.toLowerCase?.()?.trim?.() === 'else'
     },
+
+    isReturn(value) {
+      if (!value)
+        return false
+
+      if (Array.isArray(value))
+        return value.length === 1 && value[0]?.length && value[0].match(/^return\s*$/i)
+
+      return this.getKey(value) === 'return'
+    },
   },
 }
 </script>
diff --git a/platypush/backend/http/webapp/src/components/Action/ReturnTile.vue b/platypush/backend/http/webapp/src/components/Action/ReturnTile.vue
new file mode 100644
index 0000000000..a4fce9f216
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/Action/ReturnTile.vue
@@ -0,0 +1,138 @@
+<template>
+  <ListItem class="return-tile"
+            :value="value"
+            :active="active"
+            :read-only="readOnly"
+            :spacer-bottom="spacerBottom"
+            :spacer-top="spacerTop"
+            @input="$emit('input', $event)">
+    <Tile v-bind="tileConf.props"
+          v-on="tileConf.on"
+          @click.stop="showExprEditor = true">
+      <div class="tile-name">
+        <span class="icon">
+          <i class="fas fa-angle-right" />
+        </span>
+        <span class="name">
+          <span class="keyword">return</span> <span class="code" v-text="value" />
+        </span>
+      </div>
+    </Tile>
+
+    <div class="expr-editor-container" v-if="showExprEditor && !readOnly">
+      <Modal title="Edit Return"
+             :visible="true"
+             @close="showExprEditor = false">
+        <ExpressionEditor :value="value"
+                          :allow-empty="true"
+                          placeholder="Optional return value"
+                          ref="exprEditor"
+                          @input.prevent.stop="onExprChange"
+                          v-if="showExprEditor">
+          Value or Expression
+        </ExpressionEditor>
+      </Modal>
+    </div>
+  </ListItem>
+</template>
+
+<script>
+import ExpressionEditor from "./ExpressionEditor"
+import ListItem from "./ListItem"
+import Modal from "@/components/Modal"
+import Tile from "@/components/elements/Tile"
+
+export default {
+  emits: [
+    'change',
+    'click',
+    'delete',
+    'input',
+  ],
+
+  components: {
+    ExpressionEditor,
+    ListItem,
+    Modal,
+    Tile,
+  },
+
+  props: {
+    value: {
+      type: String,
+      default: '',
+    },
+
+    active: {
+      type: Boolean,
+      default: false,
+    },
+
+    isElse: {
+      type: Boolean,
+      default: false,
+    },
+
+    readOnly: {
+      type: Boolean,
+      default: false,
+    },
+
+    spacerBottom: {
+      type: Boolean,
+      default: true,
+    },
+
+    spacerTop: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  computed: {
+    tileConf() {
+      return {
+        props: {
+          value: this.value,
+          class: 'keyword',
+          draggable: false,
+          readOnly: this.readOnly,
+          withDelete: !this.readOnly,
+        },
+
+        on: {
+          delete: () => this.$emit('delete'),
+          input: this.onInput,
+        },
+      }
+    },
+  },
+
+  data() {
+    return {
+      showExprEditor: false,
+    }
+  },
+
+  methods: {
+    onExprChange(event) {
+      this.showExprEditor = false
+      if (this.readOnly) {
+        return
+      }
+
+      const expr = event.target.value?.trim()
+      event.target.value = expr
+      this.$emit('change', expr)
+    },
+
+    onInput(value) {
+      if (!value || this.readOnly) {
+        return
+      }
+
+      this.$emit('input', value)
+    },
+  },
+}
+</script>

From 156a6379d00536d645f63fbcda96ca484a0d0ce4 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Fri, 13 Sep 2024 18:19:02 +0200
Subject: [PATCH 24/36] [#341] Added for for/break/continue statements in
 procedure editor.

---
 .../src/components/Action/ActionsBlock.vue    |   6 +
 .../src/components/Action/ActionsList.vue     | 151 +++++++++++--
 .../src/components/Action/BreakTile.vue       |  66 ++++++
 .../src/components/Action/ConditionBlock.vue  |   6 +
 .../src/components/Action/ConditionTile.vue   |   1 -
 .../src/components/Action/ContinueTile.vue    |  66 ++++++
 .../src/components/Action/EndBlockTile.vue    |   2 +-
 .../components/Action/ExpressionEditor.vue    |   4 +-
 .../webapp/src/components/Action/ListItem.vue |   2 +-
 .../src/components/Action/LoopBlock.vue       | 204 +++++++++++++++++
 .../src/components/Action/LoopEditor.vue      | 153 +++++++++++++
 .../webapp/src/components/Action/LoopTile.vue | 212 ++++++++++++++++++
 .../webapp/src/components/Action/Mixin.vue    |  28 ++-
 .../webapp/src/components/Action/Response.vue |   4 +-
 .../src/components/Action/ReturnTile.vue      |   9 +-
 .../components/panels/Entities/Procedure.vue  |   7 +-
 .../backend/http/webapp/src/utils/Text.vue    |  10 +
 17 files changed, 892 insertions(+), 39 deletions(-)
 create mode 100644 platypush/backend/http/webapp/src/components/Action/BreakTile.vue
 create mode 100644 platypush/backend/http/webapp/src/components/Action/ContinueTile.vue
 create mode 100644 platypush/backend/http/webapp/src/components/Action/LoopBlock.vue
 create mode 100644 platypush/backend/http/webapp/src/components/Action/LoopEditor.vue
 create mode 100644 platypush/backend/http/webapp/src/components/Action/LoopTile.vue

diff --git a/platypush/backend/http/webapp/src/components/Action/ActionsBlock.vue b/platypush/backend/http/webapp/src/components/Action/ActionsBlock.vue
index d5f5084872..315bc46a65 100644
--- a/platypush/backend/http/webapp/src/components/Action/ActionsBlock.vue
+++ b/platypush/backend/http/webapp/src/components/Action/ActionsBlock.vue
@@ -14,6 +14,7 @@
                      :dragging="dragging"
                      :has-else="hasElse"
                      :indent="indent"
+                     :is-inside-loop="isInsideLoop"
                      :parent="value"
                      :read-only="readOnly"
                      @add-else="$emit('add-else')"
@@ -84,6 +85,11 @@ export default {
       default: 0,
     },
 
+    isInsideLoop: {
+      type: Boolean,
+      default: false,
+    },
+
     readOnly: {
       type: Boolean,
       default: false,
diff --git a/platypush/backend/http/webapp/src/components/Action/ActionsList.vue b/platypush/backend/http/webapp/src/components/Action/ActionsList.vue
index d366e87f6d..4efbb453f9 100644
--- a/platypush/backend/http/webapp/src/components/Action/ActionsList.vue
+++ b/platypush/backend/http/webapp/src/components/Action/ActionsList.vue
@@ -25,6 +25,24 @@
                         :is-else="true"
                         v-else-if="elses[index]" />
 
+        <LoopBlock v-bind="componentsData[index].props"
+                   v-on="componentsData[index].on"
+                   :collapsed="collapsedBlocks[index]"
+                   :dragging="isDragging"
+                   v-else-if="fors[index]" />
+
+        <BreakTile :active="isDragging"
+                   :readOnly="readOnly"
+                   :spacerTop="componentsData[index].props.spacerTop"
+                   @delete="deleteAction(index)"
+                   v-else-if="isBreak(action)" />
+
+        <ContinueTile :active="isDragging"
+                      :readOnly="readOnly"
+                      :spacerTop="componentsData[index].props.spacerTop"
+                      @delete="deleteAction(index)"
+                      v-else-if="isContinue(action)" />
+
         <ReturnTile v-bind="componentsData[index].props"
                     :value="returnValue"
                     @change="editReturn($event)"
@@ -67,6 +85,18 @@
         <div class="row item action add-else-container" v-if="visibleAddButtons.else">
           <AddTile icon="fas fa-question" title="Add Else" @click="$emit('add-else')" />
         </div>
+
+        <div class="row item action add-for-container" v-if="visibleAddButtons.loop">
+          <AddTile icon="fas fa-arrow-rotate-left" title="Add Loop" @click="addLoop" />
+        </div>
+
+        <div class="row item action add-break-container" v-if="visibleAddButtons.break">
+          <AddTile icon="fas fa-hand" title="Add Break" @click="addBreak" />
+        </div>
+
+        <div class="row item action add-continue-container" v-if="visibleAddButtons.continue">
+          <AddTile icon="fas fa-rotate" title="Add Continue" @click="addContinue" />
+        </div>
       </div>
     </div>
   </div>
@@ -76,8 +106,11 @@
 import ActionsListItem from "./ActionsListItem"
 import ActionTile from "./ActionTile"
 import AddTile from "./AddTile"
+import BreakTile from "./BreakTile"
 import ConditionBlock from "./ConditionBlock"
+import ContinueTile from "./ContinueTile"
 import ListItem from "./ListItem"
+import LoopBlock from "./LoopBlock"
 import Mixin from "./Mixin"
 import ReturnTile from "./ReturnTile"
 import Utils from "@/Utils"
@@ -103,8 +136,11 @@ export default {
     ActionsListItem,
     ActionTile,
     AddTile,
+    BreakTile,
     ConditionBlock,
+    ContinueTile,
     ListItem,
+    LoopBlock,
     ReturnTile,
   },
 
@@ -119,12 +155,17 @@ export default {
       default: false,
     },
 
+    hasElse: {
+      type: Boolean,
+      default: false,
+    },
+
     indent: {
       type: Number,
       default: 0,
     },
 
-    hasElse: {
+    isInsideLoop: {
       type: Boolean,
       default: false,
     },
@@ -187,6 +228,7 @@ export default {
           props: {
             value: action,
             active: this.isDragging,
+            isInsideLoop: !!(this.isInsideLoop || this.getFor(action) || this.getWhile(action)),
             readOnly: this.readOnly,
             ref: `action-tile-${index}`,
             spacerBottom: this.visibleBottomSpacers[index],
@@ -223,6 +265,11 @@ export default {
           data.props.indent = this.indent + 1
         }
 
+        const loop = this.getFor(action)
+        if (loop) {
+          data.props.async = loop.async
+        }
+
         return data
       })
     },
@@ -281,6 +328,16 @@ export default {
       }, {}) || {}
     },
 
+    fors() {
+      return this.newValue?.reduce?.((acc, action, index) => {
+        if (this.getFor(action)) {
+          acc[index] = action
+        }
+
+        return acc
+      }, {}) || {}
+    },
+
     hasChanges() {
       return this.newStringValue !== this.stringValue
     },
@@ -301,18 +358,16 @@ export default {
       return this.dragIndices?.[0]
     },
 
+    breakIndex() {
+      return this.getTileIndex((action) => this.isBreak(action))
+    },
+
+    continueIndex() {
+      return this.getTileIndex((action) => this.isContinue(action))
+    },
+
     returnIndex() {
-      const ret = this.newValue?.reduce?.((acc, action, index) => {
-        if (acc >= 0)
-          return acc
-
-        if (this.isReturn(action))
-          return index
-
-        return acc
-      }, -1)
-
-      return ret >= 0 ? ret : null
+      return this.getTileIndex((action) => this.isReturn(action))
     },
 
     returnValue() {
@@ -349,7 +404,22 @@ export default {
     },
 
     stopIndex() {
-      return this.returnIndex
+      if (this.breakIndex != null)
+        return this.breakIndex
+      if (this.continueIndex != null)
+        return this.continueIndex
+      if (this.returnIndex != null)
+        return this.returnIndex
+
+      return null
+    },
+
+    allowAddButtons() {
+      return (
+        !this.readOnly &&
+        !this.collapsed &&
+        this.stopIndex == null
+      )
     },
 
     visibleActions() {
@@ -360,8 +430,11 @@ export default {
         if (
           this.conditions[index] ||
           this.elses[index] ||
+          this.fors[index] ||
           this.isAction(action) ||
-          this.isReturn(action)
+          this.isReturn(action) ||
+          this.isBreak(action) ||
+          this.isContinue(action)
         ) {
           acc[index] = action
         }
@@ -372,16 +445,23 @@ export default {
 
     visibleAddButtons() {
       return {
-        action: !this.readOnly && !this.collapsed && this.stopIndex == null,
-        return: !this.readOnly && !this.collapsed && this.stopIndex == null,
-        condition: !this.readOnly && !this.collapsed && this.stopIndex == null,
+        action: this.allowAddButtons,
+        return: this.allowAddButtons,
+        condition: this.allowAddButtons,
+        loop: this.allowAddButtons,
         else: (
-          !this.readOnly &&
-          !this.collapsed &&
+          this.allowAddButtons &&
           this.parent &&
           this.getCondition(this.parent) &&
-          !this.hasElse &&
-          this.stopIndex == null
+          !this.hasElse
+        ),
+        break: (
+          this.allowAddButtons &&
+          this.isInsideLoop
+        ),
+        continue: (
+          this.allowAddButtons &&
+          this.isInsideLoop
         ),
       }
     },
@@ -583,6 +663,19 @@ export default {
       this.selectLastExprEditor()
     },
 
+    addLoop() {
+      this.newValue.push({ 'for _ in ${range(10)}': [] })
+      this.selectLastExprEditor()
+    },
+
+    addBreak() {
+      this.newValue.push('break')
+    },
+
+    addContinue() {
+      this.newValue.push('continue')
+    },
+
     addReturn() {
       this.newValue.push({ 'return': null })
       this.selectLastExprEditor()
@@ -606,7 +699,7 @@ export default {
 
         newTileElement.click()
         this.$nextTick(() => {
-          const exprEditor = newTile.$el?.querySelector('.expr-editor-container')
+          const exprEditor = newTile.$el?.querySelector('.editor-container')
           if (!exprEditor) {
             return
           }
@@ -644,6 +737,20 @@ export default {
       }
     },
 
+    getTileIndex(callback) {
+      const ret = this.newValue?.reduce?.((acc, action, index) => {
+        if (acc >= 0)
+          return acc
+
+        if (callback(action))
+          return index
+
+        return acc
+      }, -1)
+
+      return ret >= 0 ? ret : null
+    },
+
     syncSpacers() {
       this.$nextTick(() => {
         this.spacerElements = Object.keys(this.newValue).reduce((acc, index) => {
diff --git a/platypush/backend/http/webapp/src/components/Action/BreakTile.vue b/platypush/backend/http/webapp/src/components/Action/BreakTile.vue
new file mode 100644
index 0000000000..4c4fc1cc89
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/Action/BreakTile.vue
@@ -0,0 +1,66 @@
+<template>
+  <ListItem class="break-tile"
+            value="break"
+            :active="active"
+            :read-only="readOnly"
+            :spacer-bottom="spacerBottom"
+            :spacer-top="spacerTop">
+    <Tile :value="value"
+          class="keyword"
+          :draggable="false"
+          :read-only="readOnly"
+          :with-delete="!readOnly"
+          @click.stop
+          @delete="$emit('delete')">
+      <div class="tile-name">
+        <span class="icon">
+          <i class="fas fa-hand" />
+        </span>
+        <span class="name">
+          <span class="keyword">break</span>
+        </span>
+      </div>
+    </Tile>
+  </ListItem>
+</template>
+
+<script>
+import ListItem from "./ListItem"
+import Tile from "@/components/elements/Tile"
+
+export default {
+  emits: ['delete'],
+
+  components: {
+    ListItem,
+    Tile,
+  },
+
+  props: {
+    value: {
+      type: String,
+      default: 'break',
+    },
+
+    active: {
+      type: Boolean,
+      default: false,
+    },
+
+    readOnly: {
+      type: Boolean,
+      default: false,
+    },
+
+    spacerBottom: {
+      type: Boolean,
+      default: true,
+    },
+
+    spacerTop: {
+      type: Boolean,
+      default: true,
+    },
+  },
+}
+</script>
diff --git a/platypush/backend/http/webapp/src/components/Action/ConditionBlock.vue b/platypush/backend/http/webapp/src/components/Action/ConditionBlock.vue
index d0f6f6e0cc..40fb29189a 100644
--- a/platypush/backend/http/webapp/src/components/Action/ConditionBlock.vue
+++ b/platypush/backend/http/webapp/src/components/Action/ConditionBlock.vue
@@ -4,6 +4,7 @@
                   :collapsed="collapsed"
                   :dragging="isDragging"
                   :has-else="hasElse"
+                  :is-inside-loop="isInsideLoop"
                   :indent="indent"
                   :read-only="readOnly"
                   @input="onActionsChange"
@@ -107,6 +108,11 @@ export default {
       default: false,
     },
 
+    isInsideLoop: {
+      type: Boolean,
+      default: false,
+    },
+
     readOnly: {
       type: Boolean,
       default: false,
diff --git a/platypush/backend/http/webapp/src/components/Action/ConditionTile.vue b/platypush/backend/http/webapp/src/components/Action/ConditionTile.vue
index 4493b34c38..f33f7c7cb8 100644
--- a/platypush/backend/http/webapp/src/components/Action/ConditionTile.vue
+++ b/platypush/backend/http/webapp/src/components/Action/ConditionTile.vue
@@ -21,7 +21,6 @@
         <span class="name">
           <span class="keyword">if</span> [
           <span class="code" v-text="value" /> ]
-          <span class="keyword">then</span>
         </span>
       </div>
     </Tile>
diff --git a/platypush/backend/http/webapp/src/components/Action/ContinueTile.vue b/platypush/backend/http/webapp/src/components/Action/ContinueTile.vue
new file mode 100644
index 0000000000..1df7dc8654
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/Action/ContinueTile.vue
@@ -0,0 +1,66 @@
+<template>
+  <ListItem class="continue-tile"
+            value="continue"
+            :active="active"
+            :read-only="readOnly"
+            :spacer-bottom="spacerBottom"
+            :spacer-top="spacerTop">
+    <Tile :value="value"
+          class="keyword"
+          :draggable="false"
+          :read-only="readOnly"
+          :with-delete="!readOnly"
+          @click.stop
+          @delete="$emit('delete')">
+      <div class="tile-name">
+        <span class="icon">
+          <i class="fas fa-rotate" />
+        </span>
+        <span class="name">
+          <span class="keyword">continue</span>
+        </span>
+      </div>
+    </Tile>
+  </ListItem>
+</template>
+
+<script>
+import ListItem from "./ListItem"
+import Tile from "@/components/elements/Tile"
+
+export default {
+  emits: ['delete'],
+
+  components: {
+    ListItem,
+    Tile,
+  },
+
+  props: {
+    value: {
+      type: String,
+      default: 'continue',
+    },
+
+    active: {
+      type: Boolean,
+      default: false,
+    },
+
+    readOnly: {
+      type: Boolean,
+      default: false,
+    },
+
+    spacerBottom: {
+      type: Boolean,
+      default: true,
+    },
+
+    spacerTop: {
+      type: Boolean,
+      default: true,
+    },
+  },
+}
+</script>
diff --git a/platypush/backend/http/webapp/src/components/Action/EndBlockTile.vue b/platypush/backend/http/webapp/src/components/Action/EndBlockTile.vue
index 4ae3cee4ab..5e3f56f5be 100644
--- a/platypush/backend/http/webapp/src/components/Action/EndBlockTile.vue
+++ b/platypush/backend/http/webapp/src/components/Action/EndBlockTile.vue
@@ -12,7 +12,7 @@
     <Tile class="keyword" :draggable="false" :read-only="true">
       <div class="tile-name">
         <span class="icon">
-          <i class="fas fa-question" />
+          <i :class="icon" />
         </span>
         <span class="name">
           <span class="keyword" v-text="value" />
diff --git a/platypush/backend/http/webapp/src/components/Action/ExpressionEditor.vue b/platypush/backend/http/webapp/src/components/Action/ExpressionEditor.vue
index 9b1c71ee42..bdf9b9661e 100644
--- a/platypush/backend/http/webapp/src/components/Action/ExpressionEditor.vue
+++ b/platypush/backend/http/webapp/src/components/Action/ExpressionEditor.vue
@@ -29,7 +29,7 @@ export default {
 
   props: {
     value: {
-      type: String,
+      type: [String, Number, Boolean, Object, Array],
       default: '',
     },
 
@@ -83,7 +83,7 @@ export default {
 
   mounted() {
     this.hasChanges = false
-    if (!this.value?.trim()?.length) {
+    if (!this.value?.trim?.()?.length) {
       this.hasChanges = this.allowEmpty
     }
 
diff --git a/platypush/backend/http/webapp/src/components/Action/ListItem.vue b/platypush/backend/http/webapp/src/components/Action/ListItem.vue
index f9354f8696..e938f5b187 100644
--- a/platypush/backend/http/webapp/src/components/Action/ListItem.vue
+++ b/platypush/backend/http/webapp/src/components/Action/ListItem.vue
@@ -87,7 +87,7 @@ export default {
     },
 
     value: {
-      type: [String, Object],
+      type: [String, Number, Boolean, Object, Array],
       required: true,
     },
   },
diff --git a/platypush/backend/http/webapp/src/components/Action/LoopBlock.vue b/platypush/backend/http/webapp/src/components/Action/LoopBlock.vue
new file mode 100644
index 0000000000..56c5ecdc7f
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/Action/LoopBlock.vue
@@ -0,0 +1,204 @@
+<template>
+  <div class="loop-block">
+    <ActionsBlock :value="value"
+                  :collapsed="collapsed"
+                  :dragging="isDragging"
+                  :indent="indent"
+                  :is-inside-loop="true"
+                  :read-only="readOnly"
+                  @input="onActionsChange"
+                  @drag="$emit('drag', $event)"
+                  @dragend="$emit('dragend', $event)"
+                  @dragenter="$emit('dragenter', $event)"
+                  @dragleave="$emit('dragleave', $event)"
+                  @dragover="$emit('dragover', $event)"
+                  @drop="$emit('drop', $event)">
+      <template #before>
+        <LoopTile v-bind="loopTileConf.props"
+                  v-on="loopTileConf.on"
+                  @input.prevent.stop
+                  :spacer-top="spacerTop"
+                  :spacer-bottom="false" />
+      </template>
+
+      <template #after>
+        <EndBlockTile value="end for"
+                      icon="fas fa-arrow-rotate-right"
+                      :active="active"
+                      :spacer-bottom="spacerBottom"
+                      @drop="onDrop" />
+      </template>
+    </ActionsBlock>
+  </div>
+</template>
+
+<script>
+import ActionsBlock from "./ActionsBlock"
+import EndBlockTile from "./EndBlockTile"
+import LoopTile from "./LoopTile"
+import Mixin from "./Mixin"
+
+export default {
+  name: 'LoopBlock',
+  mixins: [Mixin],
+  emits: [
+    'delete',
+    'drag',
+    'dragend',
+    'dragenter',
+    'dragleave',
+    'dragover',
+    'drop',
+    'input',
+  ],
+
+  components: {
+    ActionsBlock,
+    LoopTile,
+    EndBlockTile,
+  },
+
+  props: {
+    value: {
+      type: Object,
+      required: true,
+    },
+
+    active: {
+      type: Boolean,
+      default: false,
+    },
+
+    async: {
+      type: Boolean,
+      default: false,
+    },
+
+    collapsed: {
+      type: Boolean,
+      default: false,
+    },
+
+    dragging: {
+      type: Boolean,
+      default: false,
+    },
+
+    indent: {
+      type: Number,
+      default: 0,
+    },
+
+    isInsideLoop: {
+      type: Boolean,
+      default: true,
+    },
+
+    readOnly: {
+      type: Boolean,
+      default: false,
+    },
+
+    spacerBottom: {
+      type: Boolean,
+      default: false,
+    },
+
+    spacerTop: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      dragging_: false,
+    }
+  },
+
+  computed: {
+    loop() {
+      return this.getFor(this.key)
+    },
+
+    loopTileConf() {
+      return {
+        props: {
+          ...this.loop,
+          active: this.active,
+          readOnly: this.readOnly,
+          spacerBottom: this.spacerBottom,
+          spacerTop: this.spacerTop,
+        },
+
+        on: {
+          change: this.onLoopChange,
+          delete: (event) => this.$emit('delete', event),
+          drag: this.onDragStart,
+          dragend: this.onDragEnd,
+          dragenterspacer: (event) => this.$emit('dragenter', event),
+          dragleavespacer: (event) => this.$emit('dragleave', event),
+          dragover: (event) => this.$emit('dragover', event),
+          dragoverspacer: (event) => this.$emit('dragoverspacer', event),
+          drop: this.onDrop,
+        },
+      }
+    },
+
+    isDragging() {
+      return this.dragging_ || this.dragging
+    },
+
+    key() {
+      return this.getKey(this.value)
+    },
+  },
+
+  methods: {
+    onActionsChange(value) {
+      if (!this.key || this.readOnly) {
+        return
+      }
+
+      this.$emit('input', { [this.key]: value })
+    },
+
+    onLoopChange(loop) {
+      const iterable = loop?.iterable?.trim()
+      const iterator = loop?.iterator?.trim()
+      const async_ = loop?.async || false
+
+      if (!this.key || this.readOnly || !iterable?.length || !iterator?.length) {
+        return
+      }
+
+      const keyword = 'for' + (async_ ? 'k' : '')
+      loop = `${keyword} ${iterator} in \${${iterable}}`
+      this.$emit('input', { [loop]: this.value[this.key] })
+    },
+
+    onDragStart(event) {
+      if (this.readOnly) {
+        return
+      }
+
+      this.dragging_ = true
+      this.$emit('drag', event)
+    },
+
+    onDragEnd(event) {
+      this.dragging_ = false
+      this.$emit('dragend', event)
+    },
+
+    onDrop(event) {
+      if (this.readOnly) {
+        return
+      }
+
+      this.dragging_ = false
+      this.$emit('drop', event)
+    },
+  },
+}
+</script>
diff --git a/platypush/backend/http/webapp/src/components/Action/LoopEditor.vue b/platypush/backend/http/webapp/src/components/Action/LoopEditor.vue
new file mode 100644
index 0000000000..d54803a7de
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/Action/LoopEditor.vue
@@ -0,0 +1,153 @@
+<template>
+  <form class="loop-editor" @submit.prevent.stop="onSubmit">
+    for
+    <label for="iterator">
+      <input type="text"
+             name="iterator"
+             autocomplete="off"
+             :autofocus="true"
+             placeholder="Iterator"
+             :value="iterator"
+             ref="iterator"
+             @input.stop="onInput('iterator', $event)" />
+    </label>
+
+    in
+
+    <label for="iterable">
+      <input type="text"
+             name="iterable"
+             autocomplete="off"
+             :autofocus="true"
+             placeholder="Iterable"
+             :value="iterable"
+             ref="iterable"
+             @input.stop="onInput('iterable', $event)" />
+    </label>
+
+    <label class="async">
+      <input class="checkbox"
+             type="checkbox"
+             name="async"
+             :checked="async"
+             @input.stop="onInput('async', $event)" />&nbsp;
+        Run in parallel
+    </label>
+
+    <label>
+      <button type="submit" :disabled="!hasChanges">
+        <i class="fas fa-check" />&nbsp;Save
+      </button>
+    </label>
+  </form>
+</template>
+
+<script>
+export default {
+  emits: [
+    'change',
+    'input',
+  ],
+
+  props: {
+    async: {
+      type: Boolean,
+      default: false,
+    },
+
+    iterable: {
+      type: String,
+      default: '',
+    },
+
+    iterator: {
+      type: String,
+      default: '',
+    },
+  },
+
+  data() {
+    return {
+      hasChanges: true,
+    }
+  },
+
+  methods: {
+    onSubmit() {
+      const iterator = this.$refs.iterator.value.trim()
+      const iterable = this.$refs.iterable.value.trim()
+      if (!iterator.length || !iterable.length) {
+        return
+      }
+
+      this.$emit('change', { iterator, iterable })
+    },
+
+    onInput(target, event) {
+      const value = '' + event.target.value
+      if (!value?.trim()?.length) {
+        this.hasChanges = false
+      } else {
+        if (target === 'iterator') {
+          this.hasChanges = value !== this.iterator
+        }
+
+        if (!this.hasChanges && target === 'iterable') {
+          this.hasChanges = value !== this.iterable
+        }
+
+        if (!this.hasChanges && target === 'async') {
+          this.hasChanges = value !== this.async
+        }
+      }
+
+      this.$nextTick(() => {
+        event.target.value = value
+      })
+    },
+  },
+
+  watch: {
+    value() {
+      this.hasChanges = false
+    },
+  },
+
+  mounted() {
+    this.$nextTick(() => {
+      this.$refs.iterator.focus()
+    })
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import "common";
+
+.loop-editor {
+  min-width: 40em;
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  label {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: 1em;
+
+    input[type="text"] {
+      width: 100%;
+      margin-left: 1em;
+    }
+
+    &.async {
+      justify-content: flex-start;
+      padding-bottom: 0;
+    }
+  }
+}
+</style>
diff --git a/platypush/backend/http/webapp/src/components/Action/LoopTile.vue b/platypush/backend/http/webapp/src/components/Action/LoopTile.vue
new file mode 100644
index 0000000000..475bede105
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/Action/LoopTile.vue
@@ -0,0 +1,212 @@
+<template>
+  <ListItem class="loop-tile"
+            :value="value"
+            :active="active"
+            :read-only="readOnly"
+            :spacer-bottom="spacerBottom"
+            :spacer-top="spacerTop"
+            v-on="dragListeners"
+            @input="$emit('input', $event)">
+    <div class="drag-spacer" v-if="dragging && !spacerTop">&nbsp;</div>
+
+    <Tile v-bind="tileConf.props"
+          v-on="tileConf.on"
+          :draggable="!readOnly"
+          @click.stop="showLoopEditor = true">
+      <div class="tile-name">
+        <span class="icon">
+          <i class="fas fa-arrow-rotate-left" />
+        </span>
+        <span class="name">
+          <span class="keyword">for<span v-if="async">k</span></span>&nbsp;
+          <span class="code" v-text="iterator" />
+          <span class="keyword"> in </span> [
+          <span class="code" v-text="iterable" /> ]
+        </span>
+      </div>
+    </Tile>
+
+    <div class="editor-container" v-if="showLoopEditor && !readOnly">
+      <Modal title="Edit Loop"
+             :visible="true"
+             @close="showLoopEditor = false">
+        <LoopEditor :iterator="iterator"
+                    :iterable="iterable"
+                    :async="async"
+                    ref="loopEditor"
+                    @change="onLoopChange"
+                    v-if="showLoopEditor">
+          Loop
+        </LoopEditor>
+      </Modal>
+    </div>
+  </ListItem>
+</template>
+
+<script>
+import ListItem from "./ListItem"
+import LoopEditor from "./LoopEditor"
+import Modal from "@/components/Modal"
+import Tile from "@/components/elements/Tile"
+
+export default {
+  emits: [
+    'change',
+    'click',
+    'delete',
+    'drag',
+    'dragend',
+    'dragenter',
+    'dragleave',
+    'dragover',
+    'drop',
+    'input',
+  ],
+
+  components: {
+    LoopEditor,
+    ListItem,
+    Modal,
+    Tile,
+  },
+
+  props: {
+    iterator: {
+      type: String,
+      required: true,
+    },
+
+    iterable: {
+      type: String,
+      required: true,
+    },
+
+    active: {
+      type: Boolean,
+      default: false,
+    },
+
+    async: {
+      type: Boolean,
+      default: false,
+    },
+
+    isElse: {
+      type: Boolean,
+      default: false,
+    },
+
+    readOnly: {
+      type: Boolean,
+      default: false,
+    },
+
+    spacerBottom: {
+      type: Boolean,
+      default: true,
+    },
+
+    spacerTop: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  computed: {
+    dragListeners() {
+      return this.readOnly ? {} : {
+          drag: this.onDragStart,
+          dragend: this.onDragEnd,
+          dragenter: (event) => this.$emit('dragenter', event),
+          dragleave: (event) => this.$emit('dragleave', event),
+          dragover: (event) => this.$emit('dragover', event),
+          drop: this.onDrop,
+      }
+    },
+
+    tileConf() {
+      return {
+        props: {
+          value: this.value,
+          class: 'keyword',
+          readOnly: this.readOnly,
+          withDelete: !this.readOnly,
+        },
+
+        on: {
+          ...this.dragListeners,
+          delete: () => this.$emit('delete'),
+          input: this.onInput,
+        },
+      }
+    },
+
+    value() {
+      return `for ${this.iterator} in ${this.iterable}`
+    },
+  },
+
+  data() {
+    return {
+      dragging: false,
+      showLoopEditor: false,
+    }
+  },
+
+  methods: {
+    onLoopChange(event) {
+      this.showLoopEditor = false
+      if (this.readOnly) {
+        return
+      }
+
+      this.$emit('change', event)
+    },
+
+    onInput(value) {
+      if (!value || this.readOnly) {
+        return
+      }
+
+      this.$emit('input', value)
+    },
+
+    onDragStart(event) {
+      if (this.readOnly) {
+        return
+      }
+
+      this.dragging = true
+      this.$emit('drag', event)
+    },
+
+    onDragEnd(event) {
+      this.dragging = false
+      this.$emit('dragend', event)
+    },
+
+    onDrop(event) {
+      this.dragging = false
+      if (this.readOnly) {
+        return
+      }
+
+      this.$emit('drop', event)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import "common";
+
+.action-tile {
+  .condition {
+    font-style: italic;
+  }
+
+  .drag-spacer {
+    height: 0;
+  }
+}
+</style>
diff --git a/platypush/backend/http/webapp/src/components/Action/Mixin.vue b/platypush/backend/http/webapp/src/components/Action/Mixin.vue
index 4911c9a3d2..e4f2cc196e 100644
--- a/platypush/backend/http/webapp/src/components/Action/Mixin.vue
+++ b/platypush/backend/http/webapp/src/components/Action/Mixin.vue
@@ -6,16 +6,42 @@ export default {
       return value?.trim?.()?.match(/^if\s*\$\{(.*)\}\s*$/i)?.[1]?.trim?.()
     },
 
+    getFor(value) {
+      value = this.getKey(value) || value
+      let m = value?.trim?.()?.match(/^for(k?)\s*(.*)\s*in\s*\$\{(.*)\}\s*$/i)
+      if (!m)
+        return null
+
+      return {
+        async: m[1].length > 0,
+        iterator: m[2].trim(),
+        iterable: m[3].trim(),
+      }
+    },
+
     getKey(value) {
       return this.isKeyword(value) ? Object.keys(value)[0] : null
     },
 
+    getWhile(value) {
+      value = this.getKey(value) || value
+      return value?.trim?.()?.match(/^while\s*\$\{(.*)\}\s*$/i)?.[1]?.trim?.()
+    },
+
     isAction(value) {
       return typeof value === 'object' && !Array.isArray(value) && (value.action || value.name)
     },
 
     isActionsBlock(value) {
-      return this.getCondition(value) || this.isElse(value)
+      return this.getCondition(value) || this.isElse(value) || this.getFor(value)
+    },
+
+    isBreak(value) {
+      return value?.toLowerCase?.()?.trim?.() === 'break'
+    },
+
+    isContinue(value) {
+      return value?.toLowerCase?.()?.trim?.() === 'continue'
     },
 
     isKeyword(value) {
diff --git a/platypush/backend/http/webapp/src/components/Action/Response.vue b/platypush/backend/http/webapp/src/components/Action/Response.vue
index 55ff647fff..93f63b96bf 100644
--- a/platypush/backend/http/webapp/src/components/Action/Response.vue
+++ b/platypush/backend/http/webapp/src/components/Action/Response.vue
@@ -32,7 +32,7 @@ export default {
   mixins: [Utils],
   props: {
     response: {
-      type: [String, Object],
+      type: [String, Object, Array, Number, Boolean],
     },
 
     error: {
@@ -51,7 +51,7 @@ export default {
 
     jsonResponse() {
       if (this.isJSON) {
-        return hljs.highlight(this.response, {language: 'json'}).value
+        return hljs.highlight(this.response.toString(), {language: 'json'}).value
       }
 
       return null
diff --git a/platypush/backend/http/webapp/src/components/Action/ReturnTile.vue b/platypush/backend/http/webapp/src/components/Action/ReturnTile.vue
index a4fce9f216..cd9134c27d 100644
--- a/platypush/backend/http/webapp/src/components/Action/ReturnTile.vue
+++ b/platypush/backend/http/webapp/src/components/Action/ReturnTile.vue
@@ -19,7 +19,7 @@
       </div>
     </Tile>
 
-    <div class="expr-editor-container" v-if="showExprEditor && !readOnly">
+    <div class="editor-container" v-if="showExprEditor && !readOnly">
       <Modal title="Edit Return"
              :visible="true"
              @close="showExprEditor = false">
@@ -59,7 +59,7 @@ export default {
 
   props: {
     value: {
-      type: String,
+      type: [String, Number, Boolean, Object, Array],
       default: '',
     },
 
@@ -68,11 +68,6 @@ export default {
       default: false,
     },
 
-    isElse: {
-      type: Boolean,
-      default: false,
-    },
-
     readOnly: {
       type: Boolean,
       default: false,
diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/Procedure.vue b/platypush/backend/http/webapp/src/components/panels/Entities/Procedure.vue
index 69dac41ca8..f02715c964 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/Procedure.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/Procedure.vue
@@ -126,7 +126,7 @@
 
         <div class="info-body" v-if="!infoCollapsed">
           <div class="item">
-            <div class="label">Type</div>
+            <div class="label">Source</div>
             <div class="value">
               <i :class="procedureTypeIconClass" />&nbsp;
               {{ value.procedure_type }}
@@ -323,7 +323,10 @@ export default {
         return 'fab fa-python'
 
       if (this.value.procedure_type === 'config')
-        return 'fas fa-rectangle-list'
+        return 'fas fa-file'
+
+      if (this.value.procedure_type === 'db')
+        return 'fas fa-database'
 
       return this.defaultIconClass
     },
diff --git a/platypush/backend/http/webapp/src/utils/Text.vue b/platypush/backend/http/webapp/src/utils/Text.vue
index 67dfd9d01b..c87ebde287 100644
--- a/platypush/backend/http/webapp/src/utils/Text.vue
+++ b/platypush/backend/http/webapp/src/utils/Text.vue
@@ -37,6 +37,16 @@ export default {
     formatNumber(number) {
       return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
     },
+
+    escapeHTML(value) {
+      return value
+         ?.toString?.()
+         ?.replace?.(/&/g, "&amp;")
+         ?.replace?.(/</g, "&lt;")
+         ?.replace?.(/>/g, "&gt;")
+         ?.replace?.(/"/g, "&quot;")
+         ?.replace?.(/'/g, "&#039;") || ''
+     },
   },
 }
 </script>

From dfbbea93fd0ec3f0d5af5892edea25c9351beebe Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Sun, 15 Sep 2024 02:06:23 +0200
Subject: [PATCH 25/36] [#341] Added UI for `while` loops in procedure editor.

---
 .../src/components/Action/ActionsList.vue     | 57 ++++++++++++++---
 .../src/components/Action/LoopBlock.vue       | 60 ++++++++++++++----
 .../webapp/src/components/Action/LoopTile.vue | 61 ++++++++++++++-----
 .../webapp/src/components/Action/Mixin.vue    |  2 +-
 4 files changed, 141 insertions(+), 39 deletions(-)

diff --git a/platypush/backend/http/webapp/src/components/Action/ActionsList.vue b/platypush/backend/http/webapp/src/components/Action/ActionsList.vue
index 4efbb453f9..faa20209b2 100644
--- a/platypush/backend/http/webapp/src/components/Action/ActionsList.vue
+++ b/platypush/backend/http/webapp/src/components/Action/ActionsList.vue
@@ -29,7 +29,7 @@
                    v-on="componentsData[index].on"
                    :collapsed="collapsedBlocks[index]"
                    :dragging="isDragging"
-                   v-else-if="fors[index]" />
+                   v-else-if="loops[index]" />
 
         <BreakTile :active="isDragging"
                    :readOnly="readOnly"
@@ -86,8 +86,12 @@
           <AddTile icon="fas fa-question" title="Add Else" @click="$emit('add-else')" />
         </div>
 
-        <div class="row item action add-for-container" v-if="visibleAddButtons.loop">
-          <AddTile icon="fas fa-arrow-rotate-left" title="Add Loop" @click="addLoop" />
+        <div class="row item action add-for-container" v-if="visibleAddButtons.for">
+          <AddTile icon="fas fa-arrow-rotate-left" title="Add For Loop" @click="addForLoop" />
+        </div>
+
+        <div class="row item action add-while-container" v-if="visibleAddButtons.while">
+          <AddTile icon="fas fa-arrow-rotate-left" title="Add While Loop" @click="addWhileLoop" />
         </div>
 
         <div class="row item action add-break-container" v-if="visibleAddButtons.break">
@@ -265,9 +269,15 @@ export default {
           data.props.indent = this.indent + 1
         }
 
-        const loop = this.getFor(action)
-        if (loop) {
-          data.props.async = loop.async
+        const forLoop = this.getFor(action)
+        if (forLoop) {
+          data.props.async = forLoop.async
+          data.props.type = 'for'
+        }
+
+        const whileLoop = this.getWhile(action)
+        if (whileLoop) {
+          data.props.type = 'while'
         }
 
         return data
@@ -338,6 +348,23 @@ export default {
       }, {}) || {}
     },
 
+    whiles() {
+      return this.newValue?.reduce?.((acc, action, index) => {
+        if (this.getWhile(action)) {
+          acc[index] = action
+        }
+
+        return acc
+      }, {}) || {}
+    },
+
+    loops() {
+      return [...Object.keys(this.fors), ...Object.keys(this.whiles)].reduce((acc, index) => {
+        acc[index] = this.newValue[index]
+        return acc
+      }, {})
+    },
+
     hasChanges() {
       return this.newStringValue !== this.stringValue
     },
@@ -389,14 +416,17 @@ export default {
 
     showAddButtons() {
       return (
-        this.newValue.length === 0 || !this.collapseAddButtons
+        (this.indent === 0 && this.newValue.length === 0) || !this.collapseAddButtons
       )
     },
 
     showAddButtonsExpander() {
       return (
         !this.readOnly &&
-        this.newValue?.length > 0 &&
+        (
+          this.newValue?.length > 0 ||
+          this.indent > 0
+        ) &&
         Object.entries(this.visibleAddButtons).filter(
           ([key, value]) => value && key != 'action'
         ).length > 1
@@ -431,6 +461,7 @@ export default {
           this.conditions[index] ||
           this.elses[index] ||
           this.fors[index] ||
+          this.whiles[index] ||
           this.isAction(action) ||
           this.isReturn(action) ||
           this.isBreak(action) ||
@@ -448,7 +479,8 @@ export default {
         action: this.allowAddButtons,
         return: this.allowAddButtons,
         condition: this.allowAddButtons,
-        loop: this.allowAddButtons,
+        for: this.allowAddButtons,
+        while: this.allowAddButtons,
         else: (
           this.allowAddButtons &&
           this.parent &&
@@ -663,11 +695,16 @@ export default {
       this.selectLastExprEditor()
     },
 
-    addLoop() {
+    addForLoop() {
       this.newValue.push({ 'for _ in ${range(10)}': [] })
       this.selectLastExprEditor()
     },
 
+    addWhileLoop() {
+      this.newValue.push({ 'while ${True}': [] })
+      this.selectLastExprEditor()
+    },
+
     addBreak() {
       this.newValue.push('break')
     },
diff --git a/platypush/backend/http/webapp/src/components/Action/LoopBlock.vue b/platypush/backend/http/webapp/src/components/Action/LoopBlock.vue
index 56c5ecdc7f..079fcf6404 100644
--- a/platypush/backend/http/webapp/src/components/Action/LoopBlock.vue
+++ b/platypush/backend/http/webapp/src/components/Action/LoopBlock.vue
@@ -22,7 +22,7 @@
       </template>
 
       <template #after>
-        <EndBlockTile value="end for"
+        <EndBlockTile :value="`end ${type}`"
                       icon="fas fa-arrow-rotate-right"
                       :active="active"
                       :spacer-bottom="spacerBottom"
@@ -64,6 +64,11 @@ export default {
       required: true,
     },
 
+    type: {
+      type: String,
+      required: true,
+    },
+
     active: {
       type: Boolean,
       default: false,
@@ -117,8 +122,36 @@ export default {
   },
 
   computed: {
+    changeHandler() {
+      if (this.type === 'for') {
+        return this.onForChange
+      }
+
+      if (this.type === 'while') {
+        return this.onWhileChange
+      }
+
+      return () => {}
+    },
+
+    isDragging() {
+      return this.dragging_ || this.dragging
+    },
+
+    key() {
+      return this.getKey(this.value)
+    },
+
     loop() {
-      return this.getFor(this.key)
+      if (this.type === 'for') {
+        return this.getFor(this.key)
+      }
+
+      if (this.type === 'while') {
+        return {condition: this.getWhile(this.key)}
+      }
+
+      return {}
     },
 
     loopTileConf() {
@@ -129,10 +162,11 @@ export default {
           readOnly: this.readOnly,
           spacerBottom: this.spacerBottom,
           spacerTop: this.spacerTop,
+          type: this.type,
         },
 
         on: {
-          change: this.onLoopChange,
+          change: this.changeHandler,
           delete: (event) => this.$emit('delete', event),
           drag: this.onDragStart,
           dragend: this.onDragEnd,
@@ -144,14 +178,6 @@ export default {
         },
       }
     },
-
-    isDragging() {
-      return this.dragging_ || this.dragging
-    },
-
-    key() {
-      return this.getKey(this.value)
-    },
   },
 
   methods: {
@@ -163,7 +189,7 @@ export default {
       this.$emit('input', { [this.key]: value })
     },
 
-    onLoopChange(loop) {
+    onForChange(loop) {
       const iterable = loop?.iterable?.trim()
       const iterator = loop?.iterator?.trim()
       const async_ = loop?.async || false
@@ -177,6 +203,16 @@ export default {
       this.$emit('input', { [loop]: this.value[this.key] })
     },
 
+    onWhileChange(condition) {
+      condition = condition?.trim()
+      if (!this.key || this.readOnly || !condition?.length) {
+        return
+      }
+
+      const loop = `while \${${condition}}`
+      this.$emit('input', { [loop]: this.value[this.key] })
+    },
+
     onDragStart(event) {
       if (this.readOnly) {
         return
diff --git a/platypush/backend/http/webapp/src/components/Action/LoopTile.vue b/platypush/backend/http/webapp/src/components/Action/LoopTile.vue
index 475bede105..a2799f798d 100644
--- a/platypush/backend/http/webapp/src/components/Action/LoopTile.vue
+++ b/platypush/backend/http/webapp/src/components/Action/LoopTile.vue
@@ -17,12 +17,17 @@
         <span class="icon">
           <i class="fas fa-arrow-rotate-left" />
         </span>
-        <span class="name">
+        <span class="name" v-if="type === 'for'">
           <span class="keyword">for<span v-if="async">k</span></span>&nbsp;
           <span class="code" v-text="iterator" />
           <span class="keyword"> in </span> [
           <span class="code" v-text="iterable" /> ]
         </span>
+
+        <span class="name" v-else-if="type === 'while'">
+          <span class="keyword">while</span> [
+          <span class="code" v-text="condition" /> ]
+        </span>
       </div>
     </Tile>
 
@@ -33,17 +38,23 @@
         <LoopEditor :iterator="iterator"
                     :iterable="iterable"
                     :async="async"
-                    ref="loopEditor"
                     @change="onLoopChange"
-                    v-if="showLoopEditor">
+                    v-if="showLoopEditor && type === 'for'">
           Loop
         </LoopEditor>
+
+        <ExpressionEditor :value="condition"
+                          @input.prevent.stop="onConditionChange"
+                          v-else-if="showLoopEditor && type === 'while'">
+          Loop Condition
+        </ExpressionEditor>
       </Modal>
     </div>
   </ListItem>
 </template>
 
 <script>
+import ExpressionEditor from "./ExpressionEditor"
 import ListItem from "./ListItem"
 import LoopEditor from "./LoopEditor"
 import Modal from "@/components/Modal"
@@ -64,6 +75,7 @@ export default {
   ],
 
   components: {
+    ExpressionEditor,
     LoopEditor,
     ListItem,
     Modal,
@@ -71,16 +83,6 @@ export default {
   },
 
   props: {
-    iterator: {
-      type: String,
-      required: true,
-    },
-
-    iterable: {
-      type: String,
-      required: true,
-    },
-
     active: {
       type: Boolean,
       default: false,
@@ -91,9 +93,16 @@ export default {
       default: false,
     },
 
-    isElse: {
-      type: Boolean,
-      default: false,
+    condition: {
+      type: String,
+    },
+
+    iterator: {
+      type: String,
+    },
+
+    iterable: {
+      type: String,
     },
 
     readOnly: {
@@ -110,6 +119,11 @@ export default {
       type: Boolean,
       default: true,
     },
+
+    type: {
+      type: String,
+      required: true,
+    },
   },
 
   computed: {
@@ -154,6 +168,21 @@ export default {
   },
 
   methods: {
+    onConditionChange(event) {
+      this.showLoopEditor = false
+      if (this.readOnly) {
+        return
+      }
+
+      const condition = event.target.value?.trim()
+      if (!condition?.length) {
+        return
+      }
+
+      event.target.value = condition
+      this.$emit('change', condition)
+    },
+
     onLoopChange(event) {
       this.showLoopEditor = false
       if (this.readOnly) {
diff --git a/platypush/backend/http/webapp/src/components/Action/Mixin.vue b/platypush/backend/http/webapp/src/components/Action/Mixin.vue
index e4f2cc196e..5bf4230b4f 100644
--- a/platypush/backend/http/webapp/src/components/Action/Mixin.vue
+++ b/platypush/backend/http/webapp/src/components/Action/Mixin.vue
@@ -33,7 +33,7 @@ export default {
     },
 
     isActionsBlock(value) {
-      return this.getCondition(value) || this.isElse(value) || this.getFor(value)
+      return this.getCondition(value) || this.isElse(value) || this.getFor(value) || this.getWhile(value)
     },
 
     isBreak(value) {

From e7e76087c0081d0d42a00deeb7c1e842af41789b Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Mon, 16 Sep 2024 03:08:46 +0200
Subject: [PATCH 26/36] [#341] Added support for setting variables in procedure
 editor.

---
 .../src/components/Action/ActionsList.vue     |  45 ++-
 .../src/components/Action/LoopEditor.vue      |   4 +-
 .../webapp/src/components/Action/LoopTile.vue |   3 +-
 .../webapp/src/components/Action/Mixin.vue    |   4 +
 .../components/Action/SetVariablesTile.vue    | 361 ++++++++++++++++++
 5 files changed, 408 insertions(+), 9 deletions(-)
 create mode 100644 platypush/backend/http/webapp/src/components/Action/SetVariablesTile.vue

diff --git a/platypush/backend/http/webapp/src/components/Action/ActionsList.vue b/platypush/backend/http/webapp/src/components/Action/ActionsList.vue
index faa20209b2..46ee92081a 100644
--- a/platypush/backend/http/webapp/src/components/Action/ActionsList.vue
+++ b/platypush/backend/http/webapp/src/components/Action/ActionsList.vue
@@ -31,6 +31,12 @@
                    :dragging="isDragging"
                    v-else-if="loops[index]" />
 
+        <SetVariablesTile v-bind="componentsData[index].props"
+                          v-on="componentsData[index].on"
+                          :collapsed="collapsedBlocks[index]"
+                          :dragging="isDragging"
+                          v-else-if="sets[index]" />
+
         <BreakTile :active="isDragging"
                    :readOnly="readOnly"
                    :spacerTop="componentsData[index].props.spacerTop"
@@ -101,6 +107,10 @@
         <div class="row item action add-continue-container" v-if="visibleAddButtons.continue">
           <AddTile icon="fas fa-rotate" title="Add Continue" @click="addContinue" />
         </div>
+
+        <div class="row item action add-set-container" v-if="visibleAddButtons.set">
+          <AddTile icon="fas fa-square-root-variable" title="Set Variables" @click="addSet" />
+        </div>
       </div>
     </div>
   </div>
@@ -117,6 +127,7 @@ import ListItem from "./ListItem"
 import LoopBlock from "./LoopBlock"
 import Mixin from "./Mixin"
 import ReturnTile from "./ReturnTile"
+import SetVariablesTile from "./SetVariablesTile"
 import Utils from "@/Utils"
 
 export default {
@@ -146,6 +157,7 @@ export default {
     ListItem,
     LoopBlock,
     ReturnTile,
+    SetVariablesTile,
   },
 
   props: {
@@ -280,6 +292,10 @@ export default {
           data.props.type = 'while'
         }
 
+        if (this.isSet(action)) {
+          data.props.value = action.set
+        }
+
         return data
       })
     },
@@ -365,6 +381,16 @@ export default {
       }, {})
     },
 
+    sets() {
+      return this.newValue?.reduce?.((acc, action, index) => {
+        if (this.isSet(action)) {
+          acc[index] = action
+        }
+
+        return acc
+      }, {}) || {}
+    },
+
     hasChanges() {
       return this.newStringValue !== this.stringValue
     },
@@ -463,9 +489,10 @@ export default {
           this.fors[index] ||
           this.whiles[index] ||
           this.isAction(action) ||
-          this.isReturn(action) ||
           this.isBreak(action) ||
-          this.isContinue(action)
+          this.isContinue(action) ||
+          this.isReturn(action) ||
+          this.isSet(action)
         ) {
           acc[index] = action
         }
@@ -481,6 +508,7 @@ export default {
         condition: this.allowAddButtons,
         for: this.allowAddButtons,
         while: this.allowAddButtons,
+        set: this.allowAddButtons,
         else: (
           this.allowAddButtons &&
           this.parent &&
@@ -562,7 +590,7 @@ export default {
         return
       }
 
-      event.stopPropagation()
+      event.stopPropagation?.()
       this.$emit('dragenter', index)
     },
 
@@ -571,7 +599,7 @@ export default {
         return
       }
 
-      event.stopPropagation()
+      event.stopPropagation?.()
       this.$emit('dragleave', index)
     },
 
@@ -584,7 +612,7 @@ export default {
         return
       }
 
-      event.stopPropagation()
+      event.stopPropagation?.()
       let dropIndices = []
 
       if (!event.detail?.length) {
@@ -673,7 +701,7 @@ export default {
         // otherwise the event will be caught by the parent element. If the parent
         // is a modal, then the modal will be closed, making it impossible to edit
         // text fields in the action tiles.
-        event.stopPropagation()
+        event.stopPropagation?.()
         return
       }
 
@@ -713,6 +741,11 @@ export default {
       this.newValue.push('continue')
     },
 
+    addSet() {
+      this.newValue.push({ 'set': {} })
+      this.selectLastExprEditor()
+    },
+
     addReturn() {
       this.newValue.push({ 'return': null })
       this.selectLastExprEditor()
diff --git a/platypush/backend/http/webapp/src/components/Action/LoopEditor.vue b/platypush/backend/http/webapp/src/components/Action/LoopEditor.vue
index d54803a7de..6eb60b7f0c 100644
--- a/platypush/backend/http/webapp/src/components/Action/LoopEditor.vue
+++ b/platypush/backend/http/webapp/src/components/Action/LoopEditor.vue
@@ -29,6 +29,7 @@
       <input class="checkbox"
              type="checkbox"
              name="async"
+             ref="async"
              :checked="async"
              @input.stop="onInput('async', $event)" />&nbsp;
         Run in parallel
@@ -76,11 +77,12 @@ export default {
     onSubmit() {
       const iterator = this.$refs.iterator.value.trim()
       const iterable = this.$refs.iterable.value.trim()
+      const async_ = this.$refs.async.checked
       if (!iterator.length || !iterable.length) {
         return
       }
 
-      this.$emit('change', { iterator, iterable })
+      this.$emit('change', { iterator, iterable, async: async_ })
     },
 
     onInput(target, event) {
diff --git a/platypush/backend/http/webapp/src/components/Action/LoopTile.vue b/platypush/backend/http/webapp/src/components/Action/LoopTile.vue
index a2799f798d..81a2b2416a 100644
--- a/platypush/backend/http/webapp/src/components/Action/LoopTile.vue
+++ b/platypush/backend/http/webapp/src/components/Action/LoopTile.vue
@@ -18,8 +18,7 @@
           <i class="fas fa-arrow-rotate-left" />
         </span>
         <span class="name" v-if="type === 'for'">
-          <span class="keyword">for<span v-if="async">k</span></span>&nbsp;
-          <span class="code" v-text="iterator" />
+          <span class="keyword">for<span v-if="async">k</span></span> <span class="code" v-text="iterator" />
           <span class="keyword"> in </span> [
           <span class="code" v-text="iterable" /> ]
         </span>
diff --git a/platypush/backend/http/webapp/src/components/Action/Mixin.vue b/platypush/backend/http/webapp/src/components/Action/Mixin.vue
index 5bf4230b4f..2bba46f167 100644
--- a/platypush/backend/http/webapp/src/components/Action/Mixin.vue
+++ b/platypush/backend/http/webapp/src/components/Action/Mixin.vue
@@ -67,6 +67,10 @@ export default {
 
       return this.getKey(value) === 'return'
     },
+
+    isSet(value) {
+      return this.getKey(value) === 'set'
+    },
   },
 }
 </script>
diff --git a/platypush/backend/http/webapp/src/components/Action/SetVariablesTile.vue b/platypush/backend/http/webapp/src/components/Action/SetVariablesTile.vue
new file mode 100644
index 0000000000..f8d8a15416
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/Action/SetVariablesTile.vue
@@ -0,0 +1,361 @@
+<template>
+  <ListItem class="set-variables-tile"
+            :class="{active}"
+            :value="value"
+            :active="active"
+            :read-only="readOnly"
+            :spacer-bottom="spacerBottom"
+            :spacer-top="spacerTop"
+            v-on="dragListeners"
+            @input="$emit('input', $event)">
+    <Tile v-bind="tileConf.props"
+          v-on="tileConf.on"
+          :draggable="!readOnly"
+          @click.stop="showEditor = true">
+      <div class="tile-name">
+        <span class="icon">
+          <i class="fas fa-square-root-variable" />
+        </span>
+        <span class="name">
+          <div class="keyword">set</div>
+        </span>
+      </div>
+
+      <div class="variables">
+        <div class="variable" v-for="(value, name) in value" :key="name">
+          <span class="code name" v-text="name" />&nbsp;=
+          <span class="code value" v-text="value" />
+        </div>
+      </div>
+    </Tile>
+
+    <div class="editor-container" v-if="showEditor && !readOnly">
+      <Modal title="Set Variables"
+             :visible="true"
+             @close="showEditor = false">
+        <form class="editor" @submit.prevent="onChange">
+          <div class="variable" v-for="(v, i) in newValue" :key="i">
+            <span class="name">
+              <input type="text"
+                     placeholder="Variable Name"
+                     @blur="onBlur(i)"
+                     @input.prevent.stop
+                     v-model="newValue[i][0]">&nbsp;=
+            </span>
+            <span class="value">
+              <input type="text"
+                     placeholder="Value"
+                     @input.prevent.stop
+                     v-model="newValue[i][1]">
+            </span>
+          </div>
+
+          <div class="variable">
+            <span class="name">
+              <input type="text"
+                     placeholder="Variable Name"
+                     ref="newVarName"
+                     @input.prevent.stop
+                     v-model="newVariable.name">&nbsp;=
+            </span>
+            <span class="value">
+              <input type="text"
+                     placeholder="Value"
+                     ref="newVarValue"
+                     @blur="onBlur(null)"
+                     @input.prevent.stop
+                     v-model="newVariable.value">
+            </span>
+          </div>
+
+          <div class="buttons">
+            <button type="submit" class="btn btn-primary">
+              Save
+            </button>
+          </div>
+        </form>
+      </Modal>
+    </div>
+  </ListItem>
+</template>
+
+<script>
+import ListItem from "./ListItem"
+import Modal from "@/components/Modal"
+import Tile from "@/components/elements/Tile"
+
+export default {
+  emits: [
+    'click',
+    'delete',
+    'drag',
+    'dragend',
+    'dragenter',
+    'dragleave',
+    'dragover',
+    'drop',
+    'input',
+  ],
+
+  components: {
+    ListItem,
+    Modal,
+    Tile,
+  },
+
+  props: {
+    active: {
+      type: Boolean,
+      default: false,
+    },
+
+    readOnly: {
+      type: Boolean,
+      default: false,
+    },
+
+    spacerBottom: {
+      type: Boolean,
+      default: true,
+    },
+
+    spacerTop: {
+      type: Boolean,
+      default: true,
+    },
+
+    value: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  computed: {
+    dragListeners() {
+      return this.readOnly ? {} : {
+          drag: this.onDragStart,
+          dragend: this.onDragEnd,
+          dragenter: (event) => this.$emit('dragenter', event),
+          dragleave: (event) => this.$emit('dragleave', event),
+          dragover: (event) => this.$emit('dragover', event),
+          drop: this.onDrop,
+      }
+    },
+
+    tileConf() {
+      return {
+        props: {
+          value: this.value,
+          class: 'keyword',
+          readOnly: this.readOnly,
+          withDelete: !this.readOnly,
+        },
+
+        on: {
+          ...this.dragListeners,
+          delete: () => this.$emit('delete'),
+          input: this.onInput,
+        },
+      }
+    },
+  },
+
+  data() {
+    return {
+      dragging: false,
+      newValue: [],
+      newVariable: {
+        name: '',
+        value: '',
+      },
+      showEditor: false,
+    }
+  },
+
+  methods: {
+    onChange() {
+      this.showEditor = false
+      if (this.readOnly) {
+        return
+      }
+
+      const variables = this.newValue
+      if (this.newVariable.name?.trim?.()?.length) {
+        variables.push([this.newVariable.name, this.newVariable.value])
+      }
+
+      const args = variables.map(([name, value]) => {
+          name = this.sanitizeName(name)
+          try {
+            value = JSON.parse(value)
+          } catch (e) {
+            value = value?.trim()
+          }
+
+          return [name, value]
+        })
+        .reduce((acc, [name, value]) => {
+          if (!name?.length) {
+            return acc
+          }
+
+          acc[name] = value
+          return acc
+        }, {})
+
+      if (!Object.keys(args).length) {
+        return
+      }
+
+      this.onInput(args)
+    },
+
+    onInput(value) {
+      if (!value || this.readOnly) {
+        return
+      }
+
+      this.$emit('input', {set: value})
+    },
+
+    onBlur(index) {
+      if (this.readOnly) {
+        return
+      }
+
+      if (index != null) {
+        const name = this.sanitizeName(this.newValue[index][0])
+        if (!name?.length) {
+          this.newValue.splice(index, 1)
+        } else {
+          this.newValue[index][0] = name
+        }
+      } else {
+        const name = this.sanitizeName(this.newVariable.name)
+        const value = this.newVariable.value
+
+        if (name?.length) {
+          this.newValue.push([name, value])
+          this.newVariable = {
+            name: '',
+            value: '',
+          }
+
+          this.$nextTick(() => {
+            this.$refs.newVarName?.focus()
+          })
+        }
+      }
+    },
+
+    onDragStart(event) {
+      if (this.readOnly) {
+        return
+      }
+
+      this.dragging = true
+      this.$emit('drag', event)
+    },
+
+    onDragEnd(event) {
+      this.dragging = false
+      this.$emit('dragend', event)
+    },
+
+    onDrop(event) {
+      this.dragging = false
+      if (this.readOnly) {
+        return
+      }
+
+      this.$emit('drop', event)
+    },
+
+    sanitizeName(name) {
+      return name?.trim()?.replace(/[^\w_]/g, '_')
+    },
+
+    syncValue() {
+      this.newValue = Object.entries(this.value)
+    },
+  },
+
+  watch: {
+    showEditor(value) {
+      if (!value) {
+        this.newVariable = {
+          name: '',
+          value: '',
+        }
+      } else {
+        this.$nextTick(() => {
+          this.$refs.newVarName?.focus()
+        })
+      }
+    },
+
+    value: {
+      immediate: true,
+      handler() {
+        this.syncValue()
+      },
+    },
+  },
+
+  mounted() {
+    this.syncValue()
+    this.$nextTick(() => {
+      this.$refs.newVarName?.focus()
+    })
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import "common";
+
+.set-variables-tile {
+  &.active {
+    .spacer {
+      display: none;
+    }
+  }
+
+  .variables {
+    margin-left: 2.5em;
+  }
+
+  .variable {
+    .value {
+      font-style: italic;
+    }
+  }
+
+  .drag-spacer {
+    height: 0;
+  }
+
+  .editor {
+    display: flex;
+    flex-direction: column;
+    padding: 1em;
+
+    .variable {
+      display: flex;
+
+      .value {
+        flex: 1;
+
+        input[type="text"] {
+          width: 100%;
+        }
+      }
+      
+    }
+
+    .buttons {
+      margin: 1em;
+    }
+  }
+}
+</style>

From 6dd1d481d50ee52d238024a650e74fe3ad42547e Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Sat, 21 Sep 2024 20:45:50 +0200
Subject: [PATCH 27/36] [#341] Added support for dynamic context in procedure
 editor components.

---
 .../src/components/Action/ActionArgs.vue      |  42 ++--
 .../src/components/Action/ActionEditor.vue    |  20 +-
 .../src/components/Action/ActionTile.vue      |   8 +
 .../src/components/Action/ActionsBlock.vue    |   1 +
 .../src/components/Action/ActionsList.vue     |  57 +++++
 .../src/components/Action/ActionsListItem.vue |   6 +
 .../src/components/Action/ConditionBlock.vue  |   4 +-
 .../src/components/Action/ConditionTile.vue   |  13 +-
 .../components/Action/ContextAutocomplete.vue | 170 ++++++++++++++
 .../components/Action/ExpressionEditor.vue    |  44 ++--
 .../webapp/src/components/Action/ListItem.vue |   8 +-
 .../src/components/Action/LoopBlock.vue       |  16 +-
 .../src/components/Action/LoopEditor.vue      |  86 ++++---
 .../webapp/src/components/Action/LoopTile.vue |   4 +
 .../webapp/src/components/Action/Mixin.vue    |  36 +++
 .../src/components/Action/ReturnTile.vue      |   4 +
 .../components/Action/SetVariablesTile.vue    |  48 ++--
 .../webapp/src/components/Action/common.scss  |  61 ++---
 .../components/Procedure/ProcedureEditor.vue  |  11 +
 .../src/components/elements/Autocomplete.vue  | 212 ++++++++++--------
 .../webapp/src/mixins/Autocomplete/Props.vue  |  58 +++++
 21 files changed, 694 insertions(+), 215 deletions(-)
 create mode 100644 platypush/backend/http/webapp/src/components/Action/ContextAutocomplete.vue
 create mode 100644 platypush/backend/http/webapp/src/mixins/Autocomplete/Props.vue

diff --git a/platypush/backend/http/webapp/src/components/Action/ActionArgs.vue b/platypush/backend/http/webapp/src/components/Action/ActionArgs.vue
index 593bd0bbda..89accd0ea2 100644
--- a/platypush/backend/http/webapp/src/components/Action/ActionArgs.vue
+++ b/platypush/backend/http/webapp/src/components/Action/ActionArgs.vue
@@ -5,14 +5,15 @@
       <!-- Supported action arguments -->
       <div class="arg" :key="name" v-for="name in Object.keys(action.args)">
         <label>
-          <input type="text"
-                 class="action-arg-value"
-                 :class="{required: action.args[name].required}"
-                 :disabled="running"
-                 :placeholder="name"
-                 :value="action.args[name].value"
-                 @input="onArgEdit(name, $event)"
-                 @focus="onSelect(name)">
+          <ContextAutocomplete :value="action.args[name].value"
+                               :disabled="running"
+                               :items="contextAutocompleteItems"
+                               :placeholder="name"
+                               :quote="true"
+                               :select-on-tab="false"
+                               @input="onArgEdit(name, $event)"
+                               @blur="onSelect(name)"
+                               @focus="onSelect(name)" />
           <span class="required-flag" v-if="action.args[name].required">*</span>
         </label>
 
@@ -36,12 +37,13 @@
                    @input="onExtraArgNameEdit(i, $event.target.value)">
           </label>
           <label class="col-6">
-            <input type="text"
-                   class="action-extra-arg-value"
-                   placeholder="Value"
-                   :disabled="running"
-                   :value="arg.value"
-                   @input="onExtraArgValueEdit(i, $event.target.value)">
+            <ContextAutocomplete :value="arg.value"
+                                 :disabled="running"
+                                 :items="contextAutocompleteItems"
+                                 :quote="true"
+                                 :select-on-tab="false"
+                                 placeholder="Value"
+                                 @input="onExtraArgValueEdit(i, $event.detail)" />
           </label>
           <label class="col-1 buttons">
             <button type="button" class="action-extra-arg-del" title="Remove argument" @click="$emit('remove', i)">
@@ -68,10 +70,16 @@
 
 <script>
 import Argdoc from "./Argdoc"
+import ContextAutocomplete from "./ContextAutocomplete"
+import Mixin from "./Mixin"
 
 export default {
-  name: 'ActionArgs',
-  components: { Argdoc },
+  mixins: [Mixin],
+  components: {
+    Argdoc,
+    ContextAutocomplete,
+  },
+
   emits: [
     'add',
     'arg-edit',
@@ -117,7 +125,7 @@ export default {
     onArgEdit(name, event) {
       this.$emit('arg-edit', {
         name: name,
-        value: event.target.value,
+        value: event.target?.value || event.detail,
       })
     },
 
diff --git a/platypush/backend/http/webapp/src/components/Action/ActionEditor.vue b/platypush/backend/http/webapp/src/components/Action/ActionEditor.vue
index ecf3fc453c..9ff5941a9c 100644
--- a/platypush/backend/http/webapp/src/components/Action/ActionEditor.vue
+++ b/platypush/backend/http/webapp/src/components/Action/ActionEditor.vue
@@ -77,6 +77,7 @@
             </h2>
 
             <ActionArgs :action="action"
+                        :context="context"
                         :loading="loading"
                         :running="running"
                         :selected-arg="selectedArg"
@@ -143,6 +144,11 @@ export default {
   },
 
   props: {
+    context: {
+      type: Object,
+      default: () => ({}),
+    },
+
     value: {
       type: Object,
     },
@@ -391,14 +397,14 @@ export default {
       this.actionDocsCache[this.action.name].html = this.selectedDoc
       this.setUrlArgs({action: this.action.name})
 
-      const firstArg = this.$el.querySelector('.action-arg-value')
-      if (firstArg) {
-        firstArg.focus()
-      } else {
-        this.$nextTick(() => {
+      this.$nextTick(() => {
+        const firstArg = this.$el.querySelector('.args-body input[type=text]')
+        if (firstArg) {
+            firstArg.focus()
+        } else {
           this.actionInput.focus()
-        })
-      }
+        }
+      })
 
       this.response = undefined
       this.error = undefined
diff --git a/platypush/backend/http/webapp/src/components/Action/ActionTile.vue b/platypush/backend/http/webapp/src/components/Action/ActionTile.vue
index e2bdca33d7..fcb7d71d25 100644
--- a/platypush/backend/http/webapp/src/components/Action/ActionTile.vue
+++ b/platypush/backend/http/webapp/src/components/Action/ActionTile.vue
@@ -55,6 +55,7 @@
     <div class="action-editor-container">
       <Modal ref="actionEditor" title="Edit Action">
         <ActionEditor :value="value"
+                      :context="context"
                       :with-save="!readOnly"
                       @input="onInput"
                       v-if="this.$refs.actionEditor?.$data?.isVisible" />
@@ -68,9 +69,11 @@ import ActionEditor from "@/components/Action/ActionEditor"
 import Draggable from "@/components/elements/Draggable"
 import Droppable from "@/components/elements/Droppable"
 import ExtensionIcon from "@/components/elements/ExtensionIcon"
+import Mixin from "./Mixin"
 import Modal from "@/components/Modal"
 
 export default {
+  mixins: [Mixin],
   emits: [
     'delete',
     'drag',
@@ -90,6 +93,11 @@ export default {
   },
 
   props: {
+    context: {
+      type: Object,
+      default: () => ({}),
+    },
+
     draggable: {
       type: Boolean,
       default: true,
diff --git a/platypush/backend/http/webapp/src/components/Action/ActionsBlock.vue b/platypush/backend/http/webapp/src/components/Action/ActionsBlock.vue
index 315bc46a65..8b2240ae7a 100644
--- a/platypush/backend/http/webapp/src/components/Action/ActionsBlock.vue
+++ b/platypush/backend/http/webapp/src/components/Action/ActionsBlock.vue
@@ -11,6 +11,7 @@
 
       <div class="actions-list" :class="actionListClasses">
         <ActionsList :value="value[key]"
+                     :context="context"
                      :dragging="dragging"
                      :has-else="hasElse"
                      :indent="indent"
diff --git a/platypush/backend/http/webapp/src/components/Action/ActionsList.vue b/platypush/backend/http/webapp/src/components/Action/ActionsList.vue
index 46ee92081a..09296ffdac 100644
--- a/platypush/backend/http/webapp/src/components/Action/ActionsList.vue
+++ b/platypush/backend/http/webapp/src/components/Action/ActionsList.vue
@@ -68,6 +68,7 @@
                   :value="newAction"
                   @drop="onDrop(0, $event)">
           <ActionTile :value="newAction"
+                      :context="contexts[Object.keys(contexts).length - 1]"
                       :draggable="false"
                       @input="addAction" />
         </ListItem>
@@ -244,6 +245,7 @@ export default {
           props: {
             value: action,
             active: this.isDragging,
+            context: this.contexts[index],
             isInsideLoop: !!(this.isInsideLoop || this.getFor(action) || this.getWhile(action)),
             readOnly: this.readOnly,
             ref: `action-tile-${index}`,
@@ -314,6 +316,34 @@ export default {
       }, {}) || {}
     },
 
+    contexts() {
+      const commonCtx = {...this.context}
+      const contexts = this.newValue?.reduce?.((acc, action, index) => {
+        acc[index] = this.getContext(action, index, commonCtx)
+        return acc
+      }, {}) || {}
+
+      const nContexts = Object.keys(contexts).length
+      if (nContexts > 0) {
+        contexts[nContexts] = this.getContext(
+          null,
+          nContexts,
+          contexts[nContexts - 1]
+        )
+
+        contexts[nContexts] = {
+          ...this.context,
+          ...commonCtx,
+          ...contexts[nContexts - 1],
+          ...contexts[nContexts],
+        }
+      } else {
+        contexts[0] = {...this.context}
+      }
+
+      return contexts
+    },
+
     dragBlockIndex() {
       if (this.dragIndex == null) {
         return
@@ -678,6 +708,33 @@ export default {
       this.$emit('collapse')
     },
 
+    getContext(action, index, context) {
+      const ctx = {...(context || this.context || {})}
+      if (index > 0) {
+        ctx.output = {
+          source: 'action',
+          action: this.newValue[index - 1],
+        }
+      }
+
+      if (this.isSet(action)) {
+        Object.keys(action.set).forEach((name) => {
+          if (!name?.length) {
+            return
+          }
+
+          context[name] = { source: 'local' }
+        })
+      }
+
+      const iterator = this.getFor(action)?.iterator
+      if (iterator?.length) {
+        context[iterator] = { source: 'for' }
+      }
+
+      return ctx
+    },
+
     getParentBlock(indices) {
       indices = [...indices]
       let parent = this.newValue
diff --git a/platypush/backend/http/webapp/src/components/Action/ActionsListItem.vue b/platypush/backend/http/webapp/src/components/Action/ActionsListItem.vue
index ba3979efcf..2eb92ca465 100644
--- a/platypush/backend/http/webapp/src/components/Action/ActionsListItem.vue
+++ b/platypush/backend/http/webapp/src/components/Action/ActionsListItem.vue
@@ -7,6 +7,7 @@
             :value="value"
             v-on="componentsData.on">
     <ActionTile :value="value"
+                :context="context"
                 :draggable="!readOnly"
                 :read-only="readOnly"
                 :with-delete="!readOnly"
@@ -47,6 +48,11 @@ export default {
       default: false,
     },
 
+    context: {
+      type: Object,
+      default: () => ({}),
+    },
+
     readOnly: {
       type: Boolean,
       default: false,
diff --git a/platypush/backend/http/webapp/src/components/Action/ConditionBlock.vue b/platypush/backend/http/webapp/src/components/Action/ConditionBlock.vue
index 40fb29189a..f89dd9bbbc 100644
--- a/platypush/backend/http/webapp/src/components/Action/ConditionBlock.vue
+++ b/platypush/backend/http/webapp/src/components/Action/ConditionBlock.vue
@@ -2,6 +2,7 @@
   <div class="condition-block">
     <ActionsBlock :value="value"
                   :collapsed="collapsed"
+                  :context="context"
                   :dragging="isDragging"
                   :has-else="hasElse"
                   :is-inside-loop="isInsideLoop"
@@ -37,7 +38,7 @@
         <EndBlockTile value="end if"
                       icon="fas fa-question"
                       :active="active"
-                      :spacer-bottom="spacerBottom"
+                      :spacer-bottom="spacerBottom || dragging_"
                       @drop="onDrop"
                       v-if="isElse || !hasElse" />
       </template>
@@ -144,6 +145,7 @@ export default {
       return {
         props: {
           active: this.active,
+          context: this.context,
           readOnly: this.readOnly,
           spacerBottom: this.spacerBottom,
           spacerTop: this.spacerTop,
diff --git a/platypush/backend/http/webapp/src/components/Action/ConditionTile.vue b/platypush/backend/http/webapp/src/components/Action/ConditionTile.vue
index f33f7c7cb8..17150b6056 100644
--- a/platypush/backend/http/webapp/src/components/Action/ConditionTile.vue
+++ b/platypush/backend/http/webapp/src/components/Action/ConditionTile.vue
@@ -46,10 +46,13 @@
              :visible="true"
              @close="showConditionEditor = false">
         <ExpressionEditor :value="value"
+                          :context="context"
                           ref="conditionEditor"
                           @input.prevent.stop="onConditionChange"
                           v-if="showConditionEditor">
-          Condition
+          <div class="header">
+            Condition
+          </div>
         </ExpressionEditor>
       </Modal>
     </div>
@@ -59,6 +62,7 @@
 <script>
 import ExpressionEditor from "./ExpressionEditor"
 import ListItem from "./ListItem"
+import Mixin from "./Mixin"
 import Modal from "@/components/Modal"
 import Tile from "@/components/elements/Tile"
 
@@ -76,6 +80,7 @@ export default {
     'input',
   ],
 
+  mixins: [Mixin],
   components: {
     ExpressionEditor,
     ListItem,
@@ -213,5 +218,11 @@ export default {
   .drag-spacer {
     height: 0;
   }
+
+  :deep(.expression-editor) {
+    .header {
+      display: block;
+    }
+  }
 }
 </style>
diff --git a/platypush/backend/http/webapp/src/components/Action/ContextAutocomplete.vue b/platypush/backend/http/webapp/src/components/Action/ContextAutocomplete.vue
new file mode 100644
index 0000000000..895ab0e85a
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/Action/ContextAutocomplete.vue
@@ -0,0 +1,170 @@
+<template>
+  <div class="autocomplete-with-context">
+    <Autocomplete
+      v-bind="autocompleteProps"
+      @blur="onBlur"
+      @focus="onFocus"
+      @input="onInput"
+      @select="onSelect"
+      ref="input" />
+
+    <div class="spacer" ref="spacer" />
+  </div>
+</template>
+
+<script>
+import Autocomplete from "@/components/elements/Autocomplete"
+import AutocompleteProps from "@/mixins/Autocomplete/Props"
+
+export default {
+  emits: ["blur", "focus", "input"],
+  components: { Autocomplete },
+  mixins: [AutocompleteProps],
+
+  props: {
+    quote: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  computed: {
+    autocompleteItemsElement() {
+      return this.$refs.input?.$el?.querySelector(".items")
+    },
+
+    autocompleteItemsHeight() {
+      return this.autocompleteItemsElement?.clientHeight || 0
+    },
+
+    autocompleteProps() {
+      return {
+        ...Object.fromEntries(
+          Object.entries(this.$props).filter(([key]) => key !== "quote")
+        ),
+        items: this.items,
+        value: this.value,
+        inputOnBlur: false,
+        inputOnSelect: false,
+        showAllItems: true,
+        showResultsWhenBlank: true,
+      }
+    },
+
+    textInput() {
+      return this.$refs.input?.$refs?.input
+    },
+  },
+
+  methods: {
+    emitInput(value) {
+      this.$emit(
+        "input",
+        new CustomEvent("input", {
+          detail: value,
+          bubbles: true,
+          cancelable: true,
+        })
+      )
+    },
+
+    isWithinQuote(selection) {
+      let ret = false
+      let value = '' + this.value
+      selection = [...selection]
+
+      while (selection[0] > 0) {
+        if (value[selection[0] - 1] === '$' && value[selection[0]] === '{') {
+          ret = true
+          break
+        }
+
+        selection[0]--
+      }
+
+      if (!ret)
+        return false
+
+      ret = false
+      while (selection[1] < value.length) {
+        if (value[selection[1]] === '}') {
+          ret = true
+          break
+        }
+
+        selection[1]++
+      }
+
+      return ret
+    },
+
+    onBlur(event) {
+      this.$emit("blur", event)
+      this.$refs.spacer.style.height = "0"
+    },
+
+    onFocus(event) {
+      this.$emit("focus", event)
+      setTimeout(() => {
+        this.$refs.spacer.style.height = `${this.autocompleteItemsHeight}px`
+      }, 10)
+    },
+
+    onInput(event) {
+      const selection = this.textSelection()
+      this.emitInput(event)
+      this.resetSelection(selection)
+    },
+
+    onSelect(value) {
+      this.$nextTick(() => {
+        const selection = this.textSelection()
+        value = this.quote && !this.isWithinQuote(selection) ? `\${${value}}` : value
+        const newValue = typeof this.value === 'string' ? (
+          this.value.slice(0, selection[0]) +
+          value +
+          this.value.slice(selection[1])
+        ) : value
+
+        this.emitInput(newValue)
+        this.resetSelection([selection[0] + value.length, selection[0] + value.length])
+      })
+    },
+
+    resetSelection(selection) {
+      setTimeout(() => {
+        this.textInput?.focus()
+        this.textInput?.setSelectionRange(selection[0], selection[1])
+      }, 10)
+    },
+
+    textSelection() {
+      return [this.textInput?.selectionStart, this.textInput?.selectionEnd]
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.autocomplete-with-context {
+  .item {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+
+    @include from($tablet) {
+      flex-direction: row;
+    }
+
+    .suffix {
+      display: flex;
+      font-size: 0.9em;
+      color: $disabled-fg;
+
+      @include from($tablet) {
+        margin-left: auto;
+      }
+    }
+  }
+}
+</style>
diff --git a/platypush/backend/http/webapp/src/components/Action/ExpressionEditor.vue b/platypush/backend/http/webapp/src/components/Action/ExpressionEditor.vue
index bdf9b9661e..e8d947bf24 100644
--- a/platypush/backend/http/webapp/src/components/Action/ExpressionEditor.vue
+++ b/platypush/backend/http/webapp/src/components/Action/ExpressionEditor.vue
@@ -3,14 +3,11 @@
     <label for="expression">
       <slot />
 
-      <input type="text"
-             name="expression"
-             autocomplete="off"
-             :autofocus="true"
-             :placeholder="placeholder"
-             :value="value"
-             ref="text"
-             @input.stop="onInput" />
+      <ContextAutocomplete :value="newValue"
+                           :items="contextAutocompleteItems"
+                           :quote="quote"
+                           @input.stop="onInput"
+                           ref="input" />
     </label>
 
     <label>
@@ -22,10 +19,13 @@
 </template>
 
 <script>
+import ContextAutocomplete from "./ContextAutocomplete"
+import Mixin from "./Mixin"
+
 export default {
-  emits: [
-    'input',
-  ],
+  emits: ['input'],
+  mixins: [Mixin],
+  components: { ContextAutocomplete },
 
   props: {
     value: {
@@ -42,17 +42,23 @@ export default {
       type: String,
       default: '',
     },
+
+    quote: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   data() {
     return {
       hasChanges: false,
+      newValue: null,
     }
   },
 
   methods: {
     onSubmit(event) {
-      const value = this.$refs.text.value.trim()
+      const value = this.newValue?.trim()
       if (!value.length && !this.allowEmpty) {
         return
       }
@@ -62,7 +68,10 @@ export default {
     },
 
     onInput(event) {
-      const value = '' + event.target.value
+      if (event?.detail == null)
+        return
+
+      const value = '' + event.detail
       if (!value?.trim()?.length) {
         this.hasChanges = this.allowEmpty
       } else {
@@ -70,7 +79,7 @@ export default {
       }
 
       this.$nextTick(() => {
-        this.$refs.text.value = value
+        this.newValue = value
       })
     },
   },
@@ -83,12 +92,14 @@ export default {
 
   mounted() {
     this.hasChanges = false
+    this.newValue = this.value
+
     if (!this.value?.trim?.()?.length) {
       this.hasChanges = this.allowEmpty
     }
 
     this.$nextTick(() => {
-      this.$refs.text.focus()
+      this.textInput?.focus()
     })
   },
 }
@@ -107,8 +118,7 @@ export default {
   label {
     width: 100%;
     display: flex;
-    flex-direction: row;
-    align-items: center;
+    flex-direction: column;
     justify-content: center;
     padding: 1em;
 
diff --git a/platypush/backend/http/webapp/src/components/Action/ListItem.vue b/platypush/backend/http/webapp/src/components/Action/ListItem.vue
index e938f5b187..3dcff16df9 100644
--- a/platypush/backend/http/webapp/src/components/Action/ListItem.vue
+++ b/platypush/backend/http/webapp/src/components/Action/ListItem.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="row item list-item" :class="itemClass">
     <div class="spacer-wrapper" :class="{ hidden: !spacerTop }">
-      <div class="spacer" :class="{ active }" ref="dropTargetTop">
+      <div class="spacer top" :class="{ active }" ref="dropTargetTop">
         <div class="droppable-wrapper">
           <div class="droppable-container">
             <div class="droppable-frame">
@@ -14,14 +14,14 @@
       <Droppable :element="$refs.dropTargetTop" :disabled="readOnly" v-on="droppableData.top.on" />
     </div>
 
-    <div class="spacer" v-if="dragging" />
+    <div class="spacer top" v-if="dragging" />
 
     <slot />
 
-    <div class="spacer" v-if="dragging" />
+    <div class="spacer bottom" v-if="dragging" />
 
     <div class="spacer-wrapper" :class="{ hidden: !spacerBottom }">
-      <div class="spacer" :class="{ active }" ref="dropTargetBottom">
+      <div class="spacer bottom" :class="{ active }" ref="dropTargetBottom">
         <div class="droppable-wrapper">
           <div class="droppable-container">
             <div class="droppable-frame">
diff --git a/platypush/backend/http/webapp/src/components/Action/LoopBlock.vue b/platypush/backend/http/webapp/src/components/Action/LoopBlock.vue
index 079fcf6404..ac523f328c 100644
--- a/platypush/backend/http/webapp/src/components/Action/LoopBlock.vue
+++ b/platypush/backend/http/webapp/src/components/Action/LoopBlock.vue
@@ -2,6 +2,7 @@
   <div class="loop-block">
     <ActionsBlock :value="value"
                   :collapsed="collapsed"
+                  :context="context_"
                   :dragging="isDragging"
                   :indent="indent"
                   :is-inside-loop="true"
@@ -25,7 +26,7 @@
         <EndBlockTile :value="`end ${type}`"
                       icon="fas fa-arrow-rotate-right"
                       :active="active"
-                      :spacer-bottom="spacerBottom"
+                      :spacer-bottom="spacerBottom || dragging"
                       @drop="onDrop" />
       </template>
     </ActionsBlock>
@@ -134,6 +135,18 @@ export default {
       return () => {}
     },
 
+    context_() {
+      const ctx = {...this.context}
+      const iterator = this.loop?.iterator?.trim()
+      if (iterator?.length) {
+        ctx[iterator] = {
+          source: 'for',
+        }
+      }
+
+      return ctx
+    },
+
     isDragging() {
       return this.dragging_ || this.dragging
     },
@@ -159,6 +172,7 @@ export default {
         props: {
           ...this.loop,
           active: this.active,
+          context: this.context_,
           readOnly: this.readOnly,
           spacerBottom: this.spacerBottom,
           spacerTop: this.spacerTop,
diff --git a/platypush/backend/http/webapp/src/components/Action/LoopEditor.vue b/platypush/backend/http/webapp/src/components/Action/LoopEditor.vue
index 6eb60b7f0c..659ec7191c 100644
--- a/platypush/backend/http/webapp/src/components/Action/LoopEditor.vue
+++ b/platypush/backend/http/webapp/src/components/Action/LoopEditor.vue
@@ -7,7 +7,7 @@
              autocomplete="off"
              :autofocus="true"
              placeholder="Iterator"
-             :value="iterator"
+             :value="newValue.iterator"
              ref="iterator"
              @input.stop="onInput('iterator', $event)" />
     </label>
@@ -15,14 +15,12 @@
     in
 
     <label for="iterable">
-      <input type="text"
-             name="iterable"
-             autocomplete="off"
-             :autofocus="true"
-             placeholder="Iterable"
-             :value="iterable"
-             ref="iterable"
-             @input.stop="onInput('iterable', $event)" />
+      <ContextAutocomplete :value="newValue.iterable"
+                           :items="contextAutocompleteItems"
+                           placeholder="Iterable"
+                           @input.stop="onInput('iterable', $event)"
+                           ref="iterable" />
+
     </label>
 
     <label class="async">
@@ -44,12 +42,13 @@
 </template>
 
 <script>
-export default {
-  emits: [
-    'change',
-    'input',
-  ],
+import ContextAutocomplete from "./ContextAutocomplete"
+import Mixin from "./Mixin"
 
+export default {
+  emits: ['change', 'input'],
+  mixins: [Mixin],
+  components: { ContextAutocomplete },
   props: {
     async: {
       type: Boolean,
@@ -70,6 +69,11 @@ export default {
   data() {
     return {
       hasChanges: true,
+      newValue: {
+        iterator: null,
+        iterable: null,
+        async: null,
+      },
     }
   },
 
@@ -86,7 +90,7 @@ export default {
     },
 
     onInput(target, event) {
-      const value = '' + event.target.value
+      const value = '' + (event.target?.value || event.detail)
       if (!value?.trim()?.length) {
         this.hasChanges = false
       } else {
@@ -104,7 +108,7 @@ export default {
       }
 
       this.$nextTick(() => {
-        event.target.value = value
+        this.newValue[target] = value
       })
     },
   },
@@ -112,10 +116,21 @@ export default {
   watch: {
     value() {
       this.hasChanges = false
+      this.newValue = {
+        iterator: this.iterator,
+        iterable: this.iterable,
+        async: this.async,
+      }
     },
   },
 
   mounted() {
+    this.newValue = {
+      iterator: this.iterator,
+      iterable: this.iterable,
+      async: this.async,
+    }
+
     this.$nextTick(() => {
       this.$refs.iterator.focus()
     })
@@ -126,6 +141,24 @@ export default {
 <style lang="scss" scoped>
 @import "common";
 
+@mixin label {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+
+  input[type="text"] {
+    width: 100%;
+    margin-left: 1em;
+  }
+
+  &.async {
+    justify-content: flex-start;
+    padding-bottom: 0;
+  }
+}
+
 .loop-editor {
   min-width: 40em;
   max-width: 100%;
@@ -134,22 +167,17 @@ export default {
   justify-content: center;
 
   label {
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
+    @include label;
     padding: 1em;
+  }
+}
 
-    input[type="text"] {
-      width: 100%;
-      margin-left: 1em;
-    }
+:deep(label) {
+  @include label;
 
-    &.async {
-      justify-content: flex-start;
-      padding-bottom: 0;
-    }
+  .autocomplete-with-context,
+  .autocomplete {
+    width: 100%;
   }
 }
 </style>
diff --git a/platypush/backend/http/webapp/src/components/Action/LoopTile.vue b/platypush/backend/http/webapp/src/components/Action/LoopTile.vue
index 81a2b2416a..7f5687316d 100644
--- a/platypush/backend/http/webapp/src/components/Action/LoopTile.vue
+++ b/platypush/backend/http/webapp/src/components/Action/LoopTile.vue
@@ -37,12 +37,14 @@
         <LoopEditor :iterator="iterator"
                     :iterable="iterable"
                     :async="async"
+                    :context="context"
                     @change="onLoopChange"
                     v-if="showLoopEditor && type === 'for'">
           Loop
         </LoopEditor>
 
         <ExpressionEditor :value="condition"
+                          :context="context"
                           @input.prevent.stop="onConditionChange"
                           v-else-if="showLoopEditor && type === 'while'">
           Loop Condition
@@ -56,10 +58,12 @@
 import ExpressionEditor from "./ExpressionEditor"
 import ListItem from "./ListItem"
 import LoopEditor from "./LoopEditor"
+import Mixin from "./Mixin"
 import Modal from "@/components/Modal"
 import Tile from "@/components/elements/Tile"
 
 export default {
+  mixins: [Mixin],
   emits: [
     'change',
     'click',
diff --git a/platypush/backend/http/webapp/src/components/Action/Mixin.vue b/platypush/backend/http/webapp/src/components/Action/Mixin.vue
index 2bba46f167..a6edce848f 100644
--- a/platypush/backend/http/webapp/src/components/Action/Mixin.vue
+++ b/platypush/backend/http/webapp/src/components/Action/Mixin.vue
@@ -1,5 +1,41 @@
 <script>
 export default {
+  props: {
+    context: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  computed: {
+    contextAutocompleteItems() {
+      return Object.entries(this.context).reduce((acc, [key, value]) => {
+        let suffix = '<span class="source">from <b>' + (
+          value?.source === 'local'
+          ? 'local context'
+          : value?.source
+        ) + '</b>'
+
+        if (value?.source === 'action' && value?.action?.action)
+          suffix += ` (<i>${value?.action?.action}</i>)`
+
+        suffix += '</span>'
+        acc.push(
+          {
+            text: key,
+            suffix: suffix,
+          }
+        )
+
+        return acc
+      }, [])
+    },
+
+    textInput() {
+      return this.$refs.input?.$refs?.input?.$refs?.input
+    },
+  },
+
   methods: {
     getCondition(value) {
       value = this.getKey(value) || value
diff --git a/platypush/backend/http/webapp/src/components/Action/ReturnTile.vue b/platypush/backend/http/webapp/src/components/Action/ReturnTile.vue
index cd9134c27d..d674705814 100644
--- a/platypush/backend/http/webapp/src/components/Action/ReturnTile.vue
+++ b/platypush/backend/http/webapp/src/components/Action/ReturnTile.vue
@@ -25,6 +25,8 @@
              @close="showExprEditor = false">
         <ExpressionEditor :value="value"
                           :allow-empty="true"
+                          :context="context"
+                          :quote="true"
                           placeholder="Optional return value"
                           ref="exprEditor"
                           @input.prevent.stop="onExprChange"
@@ -39,10 +41,12 @@
 <script>
 import ExpressionEditor from "./ExpressionEditor"
 import ListItem from "./ListItem"
+import Mixin from "./Mixin"
 import Modal from "@/components/Modal"
 import Tile from "@/components/elements/Tile"
 
 export default {
+  mixins: [Mixin],
   emits: [
     'change',
     'click',
diff --git a/platypush/backend/http/webapp/src/components/Action/SetVariablesTile.vue b/platypush/backend/http/webapp/src/components/Action/SetVariablesTile.vue
index f8d8a15416..c70aebdf40 100644
--- a/platypush/backend/http/webapp/src/components/Action/SetVariablesTile.vue
+++ b/platypush/backend/http/webapp/src/components/Action/SetVariablesTile.vue
@@ -1,6 +1,7 @@
 <template>
   <ListItem class="set-variables-tile"
             :class="{active}"
+            :dragging="dragging_"
             :value="value"
             :active="active"
             :read-only="readOnly"
@@ -43,10 +44,12 @@
                      v-model="newValue[i][0]">&nbsp;=
             </span>
             <span class="value">
-              <input type="text"
-                     placeholder="Value"
-                     @input.prevent.stop
-                     v-model="newValue[i][1]">
+              <ContextAutocomplete :value="newValue[i][1]"
+                                   :items="contextAutocompleteItems"
+                                   :quote="true"
+                                   :select-on-tab="false"
+                                   placeholder="Value"
+                                   @input.prevent.stop="newValue[i][1] = $event.detail" />
             </span>
           </div>
 
@@ -59,12 +62,13 @@
                      v-model="newVariable.name">&nbsp;=
             </span>
             <span class="value">
-              <input type="text"
-                     placeholder="Value"
-                     ref="newVarValue"
-                     @blur="onBlur(null)"
-                     @input.prevent.stop
-                     v-model="newVariable.value">
+              <ContextAutocomplete :value="newVariable.value"
+                                   :items="contextAutocompleteItems"
+                                   :quote="true"
+                                   :select-on-tab="false"
+                                   placeholder="Value"
+                                   @input.prevent.stop="newVariable.value = $event.detail"
+                                   @blur="onBlur(null)" />
             </span>
           </div>
 
@@ -80,11 +84,14 @@
 </template>
 
 <script>
+import ContextAutocomplete from "./ContextAutocomplete"
 import ListItem from "./ListItem"
+import Mixin from "./Mixin"
 import Modal from "@/components/Modal"
 import Tile from "@/components/elements/Tile"
 
 export default {
+  mixins: [Mixin],
   emits: [
     'click',
     'delete',
@@ -98,6 +105,7 @@ export default {
   ],
 
   components: {
+    ContextAutocomplete,
     ListItem,
     Modal,
     Tile,
@@ -109,6 +117,11 @@ export default {
       default: false,
     },
 
+    dragging: {
+      type: Boolean,
+      default: false,
+    },
+
     readOnly: {
       type: Boolean,
       default: false,
@@ -162,7 +175,7 @@ export default {
 
   data() {
     return {
-      dragging: false,
+      dragging_: false,
       newValue: [],
       newVariable: {
         name: '',
@@ -253,17 +266,17 @@ export default {
         return
       }
 
-      this.dragging = true
+      this.dragging_ = true
       this.$emit('drag', event)
     },
 
     onDragEnd(event) {
-      this.dragging = false
+      this.dragging_ = false
       this.$emit('dragend', event)
     },
 
     onDrop(event) {
-      this.dragging = false
+      this.dragging_ = false
       if (this.readOnly) {
         return
       }
@@ -315,12 +328,6 @@ export default {
 @import "common";
 
 .set-variables-tile {
-  &.active {
-    .spacer {
-      display: none;
-    }
-  }
-
   .variables {
     margin-left: 2.5em;
   }
@@ -342,6 +349,7 @@ export default {
 
     .variable {
       display: flex;
+      margin-bottom: 1em;
 
       .value {
         flex: 1;
diff --git a/platypush/backend/http/webapp/src/components/Action/common.scss b/platypush/backend/http/webapp/src/components/Action/common.scss
index 2e6a3a3f2f..32f27c8db3 100644
--- a/platypush/backend/http/webapp/src/components/Action/common.scss
+++ b/platypush/backend/http/webapp/src/components/Action/common.scss
@@ -148,42 +148,51 @@ form {
   }
 }
 
-.args-list {
-  padding-top: 0.5em;
-  overflow: auto;
+:deep(.args-body) {
+  .args-list {
+    padding-top: 0.5em;
+    overflow: auto;
 
-  @include until($tablet) {
-    width: 100%;
-  }
-
-  @include from($tablet) {
-    width: $params-tablet-width;
-    margin-right: 1.5em;
-  }
-
-  @include from($desktop) {
-    width: $params-desktop-width;
-  }
-
-  .arg {
-    margin-bottom: .25em;
     @include until($tablet) {
       width: 100%;
     }
 
-    .required-flag {
-      width: 1.25em;
-      font-weight: bold;
-      margin-left: 0.25em;
+    @include from($tablet) {
+      width: $params-tablet-width;
+      margin-right: 1.5em;
     }
 
-    input {
+    @include from($desktop) {
+      width: $params-desktop-width;
+    }
+
+    label {
+      display: flex;
+      align-items: center;
+    }
+
+    .arg {
+      margin-bottom: .25em;
+      @include until($tablet) {
+        width: 100%;
+      }
+
+      .required-flag {
+        width: 1.25em;
+        display: inline-block;
+        font-weight: bold;
+        margin-left: 0.25em;
+        text-align: center;
+      }
+    }
+
+    .autocomplete-with-context {
       width: calc(100% - 1.5em);
     }
-  }
 
-  .action-arg-value {
-    width: 100%;
+    .action-arg-value {
+      width: 100%;
+    }
   }
 }
 
diff --git a/platypush/backend/http/webapp/src/components/Procedure/ProcedureEditor.vue b/platypush/backend/http/webapp/src/components/Procedure/ProcedureEditor.vue
index 1e9558bf5c..f488bc00d3 100644
--- a/platypush/backend/http/webapp/src/components/Procedure/ProcedureEditor.vue
+++ b/platypush/backend/http/webapp/src/components/Procedure/ProcedureEditor.vue
@@ -63,6 +63,7 @@
             </h3>
 
             <ActionsList :value="newValue.actions"
+                         :context="context"
                          :read-only="readOnly"
                          @input="onActionsEdit" />
           </div>
@@ -312,6 +313,16 @@ export default {
       return JSON.stringify(this.newValue)
     },
 
+    context() {
+      return this.newValue?.args?.reduce((acc, arg) => {
+        acc[arg] = {
+          source: 'args',
+        }
+
+        return acc
+      }, {})
+    },
+
     modal_() {
       if (this.readOnly)
         return null
diff --git a/platypush/backend/http/webapp/src/components/elements/Autocomplete.vue b/platypush/backend/http/webapp/src/components/elements/Autocomplete.vue
index ad6c10ec6c..3f6fc9f716 100644
--- a/platypush/backend/http/webapp/src/components/elements/Autocomplete.vue
+++ b/platypush/backend/http/webapp/src/components/elements/Autocomplete.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="autocomplete">
+  <div class="autocomplete" :class="{ 'with-items': showItems }">
     <label :text="label">
       <input
         type="text"
@@ -8,73 +8,43 @@
         :placeholder="placeholder"
         :disabled="disabled"
         :value="value"
-        @focus="onFocus"
-        @input="onInput"
+        @focus.stop="onFocus"
+        @input.stop="onInput"
         @blur="onBlur"
         @keydown="onInputKeyDown"
         @keyup="onInputKeyUp"
        >
     </label>
 
-    <div class="items" v-if="showItems">
+    <div class="items" ref="items" v-if="showItems">
       <div
         class="item"
         :class="{ active: i === curIndex }"
         :key="getItemText(item)"
         :data-item="getItemText(item)"
         v-for="(item, i) in visibleItems"
-        @click="onItemSelect(item)">
-        <span v-html="item.prefix" v-if="item.prefix"></span>
+        @click.stop="onItemSelect(item)">
+        <span class="prefix" v-html="item.prefix" v-if="item.prefix"></span>
         <span class="matching" v-if="value?.length">{{ getItemText(item).substr(0, value.length) }}</span>
         <span class="normal">{{ getItemText(item).substr(value?.length || 0) }}</span>
-        <span v-html="item.suffix" v-if="item.suffix"></span>
+        <span class="suffix" v-html="item.suffix" v-if="item.suffix"></span>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import Props from "@/mixins/Autocomplete/Props"
+
 export default {
-  emits: ["input"],
-  props: {
-    items: {
-      type: Array,
-      required: true,
-    },
-
-    value: {
-      type: String,
-      default: "",
-    },
-
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-
-    autofocus: {
-      type: Boolean,
-      default: false,
-    },
-
-    label: {
-      type: String,
-    },
-
-    placeholder: {
-      type: String,
-    },
-
-    showResultsWhenBlank: {
-      type: Boolean,
-      default: false,
-    },
-  },
+  emits: ["blur", "focus", "input", "select"],
+  mixins: [Props],
 
   data() {
     return {
       visible: false,
-      curIndex: -1,
+      curIndex: null,
+      selectItemTimer: null,
     }
   },
 
@@ -84,7 +54,7 @@ export default {
     },
 
     visibleItems() {
-      if (!this.value?.length)
+      if (!this.value?.length || this.showAllItems)
         return this.items
 
       const val = this.value.toUpperCase()
@@ -103,109 +73,140 @@ export default {
 
   methods: {
     getItemText(item) {
-      return item.text || item
-    },
-
-    selectNextItem() {
-      this.curIndex++
-      this.normalizeIndex()
-    },
-
-    selectPrevItem() {
-      this.curIndex--
-      this.normalizeIndex()
-    },
-
-    normalizeIndex() {
-      // Go to the beginning after reaching the end
-      if (this.curIndex >= this.visibleItems.length)
-        this.curIndex = 0
-
-      // Go to the end after moving back from the start
-      if (this.curIndex < 0)
-        this.curIndex = this.visibleItems.length - 1
-
-      // Scroll to the element
-      const curText = this.getItemText(this.visibleItems[this.curIndex])
-      const el = this.$el.querySelector(`[data-item='${curText}']`)
-      if (el)
-        el.scrollIntoView({
-          block: "start",
-          inline: "nearest",
-          behavior: "smooth",
-        })
+      return item?.text || item
     },
 
     valueIsInItems() {
+      if (this.showAllItems)
+        return true
+
       if (!this.value)
         return false
 
       return this.itemsText.indexOf(this.value) >= 0
     },
 
-    onFocus() {
+    onFocus(e) {
+      this.$emit("focus", e)
       if (this.showResultsWhenBlank || this.value?.length)
         this.visible = true
     },
 
     onInput(e) {
-      let val = e.target.value
+      let val = e.target?.value
+      if (val == null) {
+        e.stopPropagation?.()
+        return
+      }
+
       if (this.valueIsInItems())
         this.visible = false
 
       e.stopPropagation()
       this.$emit("input", val.text || val)
-      this.curIndex = -1
+      this.curIndex = null
       this.visible = true
     },
 
     onBlur(e) {
-      this.onInput(e)
-      this.$nextTick(() => {
-        if (this.valueIsInItems())
+      if (this.inputOnBlur) {
+        this.onInput(e)
+        this.$nextTick(() => {
+          if (this.valueIsInItems()) {
+            this.visible = false
+          }
+        })
+
+        return
+      }
+
+      e.stopPropagation()
+      this.$nextTick(() => this.$refs.input.focus())
+
+      setTimeout(() => {
+        if (this.selectItemTimer) {
+          this.$nextTick(() => this.$refs.input.focus())
+          return
+        }
+
+        this.$emit("blur", e)
+        if (this.valueIsInItems()) {
           this.visible = false
-      })
+        }
+      }, 200)
     },
 
     onItemSelect(item) {
-      this.$emit("input", item.text || item)
+      if (this.selectItemTimer) {
+        clearTimeout(this.selectItemTimer)
+        this.selectItemTimer = null
+      }
+
+      this.selectItemTimer = setTimeout(() => {
+        this.selectItemTimer = null
+      }, 250)
+
+      const text = item.text || item
+      this.$emit("select", text)
+      if (this.inputOnSelect)
+        this.$emit("input", text)
+
       this.$nextTick(() => {
         if (this.valueIsInItems()) {
-          this.visible = false
+          if (this.inputOnSelect) {
+            this.visible = false
+          } else {
+            this.visible = true
+            this.curIndex = this.visibleItems.indexOf(item)
+            if (this.curIndex < 0)
+              this.curIndex = null
+
+            this.$refs.input.focus()
+          }
         }
       })
     },
 
     onInputKeyUp(e) {
-      if (["ArrowUp", "ArrowDown", "Tab", "Enter", "Escape"].indexOf(e.key) >= 0)
+      if (
+        ["ArrowUp", "ArrowDown", "Escape"].indexOf(e.key) >= 0 ||
+        (e.key === "Tab" && this.selectOnTab) ||
+        (e.key === "Enter" && this.curIndex != null)
+      ) {
         e.stopPropagation()
+      }
 
-      if (e.key === "Enter" && this.valueIsInItems()) {
+      if (e.key === "Enter" && this.valueIsInItems() && this.curIndex != null) {
         this.$refs.input.blur()
         this.visible = false
       }
     },
 
     onInputKeyDown(e) {
+      if (!this.showItems)
+        return
+
+      e.stopPropagation()
+
       if (
         e.key === 'ArrowDown' ||
-        (e.key === 'Tab' && !e.shiftKey) ||
+        (e.key === 'Tab' && !e.shiftKey && this.selectOnTab) ||
         (e.key === 'j' && e.ctrlKey)
       ) {
-        this.selectNextItem()
+        this.curIndex = this.curIndex == null ? 0 : this.curIndex + 1
         e.preventDefault()
       } else if (
         e.key === 'ArrowUp' ||
-        (e.key === 'Tab' && e.shiftKey) ||
+        (e.key === 'Tab' && e.shiftKey && this.selectOnTab) ||
         (e.key === 'k' && e.ctrlKey)
       ) {
-        this.selectPrevItem()
+        this.curIndex = this.curIndex == null ? this.visibleItems.length - 1 : this.curIndex - 1
         e.preventDefault()
       } else if (e.key === 'Enter') {
-        if (this.curIndex > -1 && this.visible) {
+        if (this.curIndex != null && this.curIndex >= 0 && this.visible) {
           e.preventDefault()
           this.onItemSelect(this.visibleItems[this.curIndex])
-          this.$refs.input.focus()
+          this.$nextTick(() => this.$refs.input.focus())
         }
       } else if (e.key === 'Escape') {
         this.visible = false
@@ -220,6 +221,33 @@ export default {
     },
   },
 
+  watch: {
+    curIndex() {
+      // Do nothing if the index is not set
+      if (this.curIndex == null)
+        return
+
+      // Go to the beginning after reaching the end
+      if (this.curIndex >= this.visibleItems.length)
+        this.curIndex = 0
+
+      // Go to the end after moving back from the start
+      if (this.curIndex < 0)
+        this.curIndex = this.visibleItems.length - 1
+
+      // Scroll to the element
+      const curText = this.getItemText(this.visibleItems[this.curIndex])
+      const el = this.$el.querySelector(`[data-item='${curText}']`)
+      if (el) {
+        el.scrollIntoView({
+          block: "start",
+          inline: "nearest",
+          behavior: "smooth",
+        })
+      }
+    },
+  },
+
   mounted() {
     document.addEventListener("click", this.onDocumentClick)
     if (this.autofocus)
diff --git a/platypush/backend/http/webapp/src/mixins/Autocomplete/Props.vue b/platypush/backend/http/webapp/src/mixins/Autocomplete/Props.vue
new file mode 100644
index 0000000000..ccac1769e0
--- /dev/null
+++ b/platypush/backend/http/webapp/src/mixins/Autocomplete/Props.vue
@@ -0,0 +1,58 @@
+<script>
+export default {
+  props: {
+    items: {
+      type: Array,
+      required: true,
+    },
+
+    value: {
+      type: [String, Number, Object, Array, Boolean],
+      default: "",
+    },
+
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+
+    autofocus: {
+      type: Boolean,
+      default: false,
+    },
+
+    label: {
+      type: String,
+    },
+
+    placeholder: {
+      type: String,
+    },
+
+    inputOnBlur: {
+      type: Boolean,
+      default: true,
+    },
+
+    inputOnSelect: {
+      type: Boolean,
+      default: true,
+    },
+
+    selectOnTab: {
+      type: Boolean,
+      default: true,
+    },
+
+    showAllItems: {
+      type: Boolean,
+      default: false,
+    },
+
+    showResultsWhenBlank: {
+      type: Boolean,
+      default: false,
+    },
+  },
+}
+</script>

From 0d0665ca7c8cd6849ba827fed5eea82c9ab059cd Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Sun, 22 Sep 2024 01:40:52 +0200
Subject: [PATCH 28/36] [UI] Keep track of the number of stack modals.

---
 platypush/backend/http/webapp/src/App.vue | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/platypush/backend/http/webapp/src/App.vue b/platypush/backend/http/webapp/src/App.vue
index bbeea48a9b..a1675aa330 100644
--- a/platypush/backend/http/webapp/src/App.vue
+++ b/platypush/backend/http/webapp/src/App.vue
@@ -56,6 +56,7 @@ export default {
       pwaInstallEvent: null,
       initialized: false,
       initError: null,
+      stackedModals: 0,
     }
   },
 
@@ -83,7 +84,7 @@ export default {
 
   methods: {
     onNotification(notification) {
-      this.$refs.notifications.create(notification)
+      this.$refs.notifications?.create(notification)
     },
 
     async initConfig() {
@@ -100,7 +101,15 @@ export default {
         this.pwaInstallEvent.prompt()
 
       this.$refs.pwaDialog.close()
-    }
+    },
+
+    onModalClose() {
+      this.stackedModals = Math.max(0, this.stackedModals - 1)
+    },
+
+    onModalOpen() {
+      this.stackedModals++
+    },
   },
 
   async created() {
@@ -136,6 +145,8 @@ export default {
     bus.onNotification(this.onNotification)
     bus.on('connect', () => this.connected = true)
     bus.on('disconnect', () => this.connected = false)
+    bus.on('modal-open', this.onModalOpen)
+    bus.on('modal-close', this.onModalClose)
   },
 }
 </script>

From 839948e4e676bbdf5fd5f9278f4d7e5d4e14c6eb Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Sun, 22 Sep 2024 01:41:52 +0200
Subject: [PATCH 29/36] [UI] Emit one and only one open/close modal event.

---
 .../http/webapp/src/components/Modal.vue      | 43 +++++++++++++------
 1 file changed, 29 insertions(+), 14 deletions(-)

diff --git a/platypush/backend/http/webapp/src/components/Modal.vue b/platypush/backend/http/webapp/src/components/Modal.vue
index a3df10fddf..e2aa119e44 100644
--- a/platypush/backend/http/webapp/src/components/Modal.vue
+++ b/platypush/backend/http/webapp/src/components/Modal.vue
@@ -98,7 +98,6 @@ export default {
     return {
       ignoreEscape: false,
       isVisible: this.visible,
-      prevVisible: this.visible,
       timeoutId: undefined,
     }
   },
@@ -117,9 +116,11 @@ export default {
       if (event)
         event.preventDefault()
 
-      this.prevVisible = this.isVisible
+      if (!this.isVisible)
+        return
+
       this.isVisible = false
-      bus.emit('modal-close')
+      this.visibleHndl(false, true)
     },
 
     hide() {
@@ -127,8 +128,11 @@ export default {
     },
 
     show() {
-      this.prevVisible = this.isVisible
+      if (this.isVisible)
+        return
+
       this.isVisible = true
+      this.visibleHndl(true, false)
     },
 
     open() {
@@ -175,28 +179,40 @@ export default {
       setTimeout(() => this.ignoreEscape = false, 100)
     },
 
-    visibleHndl(visible) {
-      if (!visible)
+    visibleHndl(visible, oldVisible) {
+      if (!this.$el?.classList?.contains('modal-container'))
+        return
+
+      if (!visible && oldVisible) {
         this.$emit('close')
-      else
+        bus.emit('modal-close', this)
+      } else if (visible && !oldVisible) {
         this.$emit('open')
+        bus.emit('modal-open', this)
+      }
     },
   },
 
   watch: {
-    visible(value) {
-      this.visibleHndl(value)
-      this.isVisible = value
+    visible(value, oldValue) {
+      this.visibleHndl(value, oldValue)
+      this.$nextTick(() => this.isVisible = value)
     },
 
-    isVisible(value) {
-      this.visibleHndl(value)
+    isVisible(value, oldValue) {
+      oldValue = oldValue == null ? this.visible : oldValue
+      this.visibleHndl(value, oldValue)
     },
   },
 
   mounted() {
     document.body.addEventListener('keyup', this.onKeyUp)
-    bus.on('modal-close', this.onModalCloseMessage)
+    this.visibleHndl(this.isVisible, this.isVisible ? false : undefined)
+  },
+
+  unmouted() {
+    document.body.removeEventListener('keyup', this.onKeyUp)
+    this.visibleHndl(false, this.isVisible)
   },
 
   unmounted() {
@@ -204,7 +220,6 @@ export default {
   },
 
   updated() {
-    this.prevVisible = this.isVisible
     if (this.isVisible) {
       // Make sure that a newly opened or visible+updated modal always comes to the front
       let maxZIndex = parseInt(getComputedStyle(this.$el).zIndex)

From f6b3d34effd224f378df4ee82f7ee45666177c85 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Sun, 22 Sep 2024 01:43:25 +0200
Subject: [PATCH 30/36] [UI] Better handling of nested modals on the entities
 page.

If a modal was spawned from within an entity in a group, then the whole
group needs to get its zIndex bumped.

Otherwise, the modal component will be "caged" within the scope of the
parent and other entity groups will be rendered above it.
---
 .../src/components/panels/Entities/Index.vue  | 31 ++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue b/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue
index 95747aedc1..ec64ef3528 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue
@@ -28,7 +28,10 @@
       <NoItems v-if="!Object.keys(displayGroups || {})?.length">No entities found</NoItems>
 
       <div class="groups-container" v-else>
-        <div class="group fade-in" v-for="group in displayGroups" :key="group.name">
+        <div class="group fade-in"
+             v-for="group in displayGroups"
+             :key="group.name"
+             :ref="`group-${group.name}`">
           <div class="frame">
             <div class="header">
               <span class="section left">
@@ -386,6 +389,29 @@ export default {
       }
     },
 
+    onModalOpen(modal) {
+      const group = this.getParentGroup(modal.$el)
+      if (!group)
+        return
+
+      group.style.zIndex = '' + (parseInt(group.style.zIndex || 0) + 1)
+    },
+
+    onModalClose(modal) {
+      const group = this.getParentGroup(modal.$el)
+      if (!group)
+        return
+
+      group.style.zIndex = '' + Math.max(0, parseInt(group.style.zIndex || 0) - 1)
+    },
+
+    getParentGroup(element) {
+      let parent = element
+      while (parent && !parent.classList?.contains('group'))
+        parent = parent.parentElement
+      return parent
+    },
+
     loadCachedEntities() {
       const cachedEntities = window.localStorage.getItem('entities')
       if (cachedEntities) {
@@ -427,6 +453,9 @@ export default {
       'platypush.message.event.entities.EntityDeleteEvent'
     )
 
+    bus.on('modal-open', this.onModalOpen)
+    bus.on('modal-close', this.onModalClose)
+
     const hasCachedEntities = this.loadCachedEntities()
     await this.sync(!hasCachedEntities)
     await this.refresh(null, !hasCachedEntities)

From 91c66cdd4830a0557c8fee524a17d5fbc6e2ebe4 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Sun, 22 Sep 2024 02:36:43 +0200
Subject: [PATCH 31/36] [UI] Fixed deprecated usage of the hljs.highlight API.

---
 .../http/webapp/src/components/panels/Extensions/Config.vue   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/platypush/backend/http/webapp/src/components/panels/Extensions/Config.vue b/platypush/backend/http/webapp/src/components/panels/Extensions/Config.vue
index 9061836fb1..02ba691dcc 100644
--- a/platypush/backend/http/webapp/src/components/panels/Extensions/Config.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Extensions/Config.vue
@@ -61,9 +61,9 @@ export default {
       }
 
       return hljs.highlight(
-        'yaml',
         '# Currently loaded configuration\n' +
-        this.curYamlConfig
+        this.curYamlConfig,
+        {language: 'yaml'}
       ).value.trim()
     },
   },

From e5a2127ecb75648fecbd3365aef326fb032bd065 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Sun, 22 Sep 2024 02:39:43 +0200
Subject: [PATCH 32/36] [UI] s/stackoverflow-dark/monokai-sublime/ in
 extensions config page.

The dark blue YAML style used by `stackoverflow-dark` isn't very
readable on black background.
---
 .../http/webapp/src/components/panels/Extensions/Config.vue     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/platypush/backend/http/webapp/src/components/panels/Extensions/Config.vue b/platypush/backend/http/webapp/src/components/panels/Extensions/Config.vue
index 02ba691dcc..a376dae358 100644
--- a/platypush/backend/http/webapp/src/components/panels/Extensions/Config.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Extensions/Config.vue
@@ -13,7 +13,7 @@
 
 <script>
 import 'highlight.js/lib/common'
-import 'highlight.js/styles/stackoverflow-dark.min.css'
+import 'highlight.js/styles/monokai-sublime.min.css'
 import hljs from "highlight.js"
 import CopyButton from "@/components/elements/CopyButton"
 import Utils from "@/Utils";

From 8b621cbf3091c008545b206fb3356125a17f261a Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Sun, 22 Sep 2024 03:43:46 +0200
Subject: [PATCH 33/36] [UI] Propagate `dragend` events from `Tile` components.

---
 .../backend/http/webapp/src/components/Action/ActionTile.vue     | 1 +
 platypush/backend/http/webapp/src/components/elements/Tile.vue   | 1 +
 2 files changed, 2 insertions(+)

diff --git a/platypush/backend/http/webapp/src/components/Action/ActionTile.vue b/platypush/backend/http/webapp/src/components/Action/ActionTile.vue
index fcb7d71d25..75e0c70e0a 100644
--- a/platypush/backend/http/webapp/src/components/Action/ActionTile.vue
+++ b/platypush/backend/http/webapp/src/components/Action/ActionTile.vue
@@ -41,6 +41,7 @@
                :disabled="readOnly"
                :value="value"
                @drag="$emit('drag', $event)"
+               @dragend="$emit('dragend', $event)"
                @drop="$emit('drop', $event)"
                v-if="draggable" />
 
diff --git a/platypush/backend/http/webapp/src/components/elements/Tile.vue b/platypush/backend/http/webapp/src/components/elements/Tile.vue
index a1d6ef7ef8..df07d5ee91 100644
--- a/platypush/backend/http/webapp/src/components/elements/Tile.vue
+++ b/platypush/backend/http/webapp/src/components/elements/Tile.vue
@@ -15,6 +15,7 @@
                :disabled="readOnly"
                :value="value"
                @drag="$emit('drag', $event)"
+               @dragend="$emit('dragend', $event)"
                @drop="$emit('drop', $event)"
                v-if="draggable" />
 

From b6c00292085cd714c96e37f06fde159bf6e4bf82 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Sun, 22 Sep 2024 03:44:36 +0200
Subject: [PATCH 34/36] [UI] Better color schemes for highlighed text.

---
 .../backend/http/webapp/src/components/Action/ActionEditor.vue  | 2 +-
 .../backend/http/webapp/src/components/Action/Response.vue      | 2 +-
 platypush/backend/http/webapp/src/components/File/Editor.vue    | 2 +-
 .../http/webapp/src/components/Procedure/ProcedureDump.vue      | 2 +-
 .../http/webapp/src/components/panels/Extensions/Config.vue     | 2 +-
 .../http/webapp/src/components/panels/Extensions/Install.vue    | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/platypush/backend/http/webapp/src/components/Action/ActionEditor.vue b/platypush/backend/http/webapp/src/components/Action/ActionEditor.vue
index 9ff5941a9c..95238cd397 100644
--- a/platypush/backend/http/webapp/src/components/Action/ActionEditor.vue
+++ b/platypush/backend/http/webapp/src/components/Action/ActionEditor.vue
@@ -117,7 +117,7 @@
 
 <script>
 import 'highlight.js/lib/common'
-import 'highlight.js/styles/stackoverflow-dark.min.css'
+import 'highlight.js/styles/nord.min.css'
 import hljs from "highlight.js"
 import ActionArgs from "./ActionArgs"
 import ActionDoc from "./ActionDoc"
diff --git a/platypush/backend/http/webapp/src/components/Action/Response.vue b/platypush/backend/http/webapp/src/components/Action/Response.vue
index 93f63b96bf..759da9088a 100644
--- a/platypush/backend/http/webapp/src/components/Action/Response.vue
+++ b/platypush/backend/http/webapp/src/components/Action/Response.vue
@@ -23,7 +23,7 @@
 
 <script>
 import 'highlight.js/lib/common'
-import 'highlight.js/styles/stackoverflow-dark.min.css'
+import 'highlight.js/styles/nord.min.css'
 import hljs from "highlight.js"
 import Utils from "@/Utils"
 
diff --git a/platypush/backend/http/webapp/src/components/File/Editor.vue b/platypush/backend/http/webapp/src/components/File/Editor.vue
index 143d0fd763..235e34f23e 100644
--- a/platypush/backend/http/webapp/src/components/File/Editor.vue
+++ b/platypush/backend/http/webapp/src/components/File/Editor.vue
@@ -33,7 +33,7 @@
 <script>
 import axios from 'axios';
 import hljs from 'highlight.js';
-import 'highlight.js/styles/github.css';
+import 'highlight.js/styles/intellij-light.css';
 
 import FloatingButton from "@/components/elements/FloatingButton";
 import Highlighter from "./Highlighter";
diff --git a/platypush/backend/http/webapp/src/components/Procedure/ProcedureDump.vue b/platypush/backend/http/webapp/src/components/Procedure/ProcedureDump.vue
index 93ec603e13..a4a97c7a6a 100644
--- a/platypush/backend/http/webapp/src/components/Procedure/ProcedureDump.vue
+++ b/platypush/backend/http/webapp/src/components/Procedure/ProcedureDump.vue
@@ -11,7 +11,7 @@
 
 <script>
 import 'highlight.js/lib/common'
-import 'highlight.js/styles/stackoverflow-dark.min.css'
+import 'highlight.js/styles/nord.min.css'
 import hljs from "highlight.js"
 
 import CopyButton from "@/components/elements/CopyButton"
diff --git a/platypush/backend/http/webapp/src/components/panels/Extensions/Config.vue b/platypush/backend/http/webapp/src/components/panels/Extensions/Config.vue
index a376dae358..358db6f600 100644
--- a/platypush/backend/http/webapp/src/components/panels/Extensions/Config.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Extensions/Config.vue
@@ -13,7 +13,7 @@
 
 <script>
 import 'highlight.js/lib/common'
-import 'highlight.js/styles/monokai-sublime.min.css'
+import 'highlight.js/styles/night-owl.min.css'
 import hljs from "highlight.js"
 import CopyButton from "@/components/elements/CopyButton"
 import Utils from "@/Utils";
diff --git a/platypush/backend/http/webapp/src/components/panels/Extensions/Install.vue b/platypush/backend/http/webapp/src/components/panels/Extensions/Install.vue
index b118a4f90d..b70ee1a3e1 100644
--- a/platypush/backend/http/webapp/src/components/panels/Extensions/Install.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Extensions/Install.vue
@@ -44,7 +44,7 @@
 
 <script>
 import 'highlight.js/lib/common'
-import 'highlight.js/styles/stackoverflow-dark.min.css'
+import 'highlight.js/styles/nord.min.css'
 import hljs from "highlight.js"
 import CopyButton from "@/components/elements/CopyButton"
 import Loading from "@/components/Loading"

From d1da4803cf482d61005a7886d37823e10e648cca Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Mon, 23 Sep 2024 03:17:20 +0200
Subject: [PATCH 35/36] [#341] Adapted `alarm` UI to the changes to the
 `ProcedureEditor` component.

---
 .../src/components/Action/ActionsList.vue     |  9 +++++
 .../src/components/elements/Dropdown.vue      |  2 +-
 .../src/components/panels/Entities/Alarm.vue  |  9 +++--
 .../panels/Entities/Alarm/AlarmEditor.vue     | 38 ++++++++++++-------
 4 files changed, 40 insertions(+), 18 deletions(-)

diff --git a/platypush/backend/http/webapp/src/components/Action/ActionsList.vue b/platypush/backend/http/webapp/src/components/Action/ActionsList.vue
index 09296ffdac..ee8facceeb 100644
--- a/platypush/backend/http/webapp/src/components/Action/ActionsList.vue
+++ b/platypush/backend/http/webapp/src/components/Action/ActionsList.vue
@@ -146,6 +146,7 @@ export default {
     'drop',
     'input',
     'reset',
+    'update',
   ],
 
   components: {
@@ -921,6 +922,14 @@ export default {
     this.syncValue()
     this.syncSpacers()
   },
+
+  updated() {
+    if (!this.hasChanges) {
+      return
+    }
+
+    this.$emit('update', this.newValue)
+  },
 }
 </script>
 
diff --git a/platypush/backend/http/webapp/src/components/elements/Dropdown.vue b/platypush/backend/http/webapp/src/components/elements/Dropdown.vue
index a4c008f5b4..53150e28b2 100644
--- a/platypush/backend/http/webapp/src/components/elements/Dropdown.vue
+++ b/platypush/backend/http/webapp/src/components/elements/Dropdown.vue
@@ -176,7 +176,7 @@ export default {
 
     toggle(event) {
       event.stopPropagation()
-      this.$emit('click')
+      this.$emit('click', event)
       this.visible ? this.close() : this.open()
     },
 
diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/Alarm.vue b/platypush/backend/http/webapp/src/components/panels/Entities/Alarm.vue
index c6924c28e7..9ccb84de76 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/Alarm.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/Alarm.vue
@@ -370,16 +370,13 @@ $icon-width: 2em;
     cursor: default;
 
     .content {
-      width: 50em;
-      max-width: 90%;
-
       .body {
         width: 100%;
       }
     }
 
     .alarm-running-modal {
-      width: 100%;
+      min-width: 90vw;
       height: 100%;
       display: flex;
       flex-direction: column;
@@ -387,6 +384,10 @@ $icon-width: 2em;
       justify-content: center;
       padding: 1em;
 
+      @include from($tablet) {
+        min-width: 40em;
+      }
+
       .icon {
         font-size: 3.5em;
         color: $selected-fg;
diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/Alarm/AlarmEditor.vue b/platypush/backend/http/webapp/src/components/panels/Entities/Alarm/AlarmEditor.vue
index 64779e2252..e7b377ad3a 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/Alarm/AlarmEditor.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/Alarm/AlarmEditor.vue
@@ -85,7 +85,7 @@
             </span>
           </div>
 
-          <div class="value">
+          <div class="value file-selector">
             <FileSelector :value="editForm.media" @input="editForm.media = $event" />
           </div>
         </div>
@@ -127,7 +127,7 @@
 
             <div class="value">
               <ToggleSwitch :value="editForm.media_repeat"
-                            @input="editForm.media_repeat = $event.target.checked" />
+                            @input="editForm.media_repeat = !!$event.target.checked" />
             </div>
           </label>
         </div>
@@ -208,9 +208,7 @@
           </div>
 
           <div class="value">
-            <ProcedureEditor :value="procedure"
-                             :with-name="false"
-                             @input="onActionsInput($event)" />
+            <ActionsList :value="procedure" @update="onActionsUpdate($event)" />
           </div>
         </div>
       </div>
@@ -219,8 +217,8 @@
 </template>
 
 <script>
-import Loading from "@/components/Loading";
-import ProcedureEditor from "@/components/Procedure/ProcedureEditor"
+import ActionsList from "@/components/Action/ActionsList"
+import Loading from "@/components/Loading"
 import Slider from "@/components/elements/Slider"
 import CronEditor from "@/components/elements/CronEditor"
 import FileSelector from "@/components/elements/FileSelector"
@@ -232,10 +230,10 @@ export default {
   emits: ['input'],
   mixins: [Utils],
   components: {
+    ActionsList,
     CronEditor,
     FileSelector,
     Loading,
-    ProcedureEditor,
     Slider,
     TimeInterval,
     ToggleSwitch,
@@ -262,9 +260,7 @@ export default {
 
   computed: {
     procedure() {
-      return {
-        actions: [...(this.editForm.actions || [])],
-      }
+      return [...(this.editForm.actions || [])]
     },
 
     audioVolume() {
@@ -338,8 +334,12 @@ export default {
       this.editForm.condition_type = type
     },
 
-    onActionsInput(procedure) {
-      this.editForm.actions = procedure.actions
+    onActionsUpdate(actions) {
+      actions = [...(actions ?? [])]
+      if (JSON.stringify(this.editForm.actions) === JSON.stringify(actions))
+        return
+
+      this.editForm.actions = actions
     },
 
     onVolumeChange(event) {
@@ -498,5 +498,17 @@ $header-height: 3.5em;
   input[type=text] {
     min-height: 2em;
   }
+
+  :deep(.file-selector) {
+    .modal {
+      .body {
+        min-width: 95vw;
+
+        @include from($tablet) {
+          min-width: 40em;
+        }
+      }
+    }
+  }
 }
 </style>

From 419c227ff84bef66f422399869e4d44e5f5dd79c Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Mon, 23 Sep 2024 03:19:23 +0200
Subject: [PATCH 36/36] [UI] Don't propagate click events in `FileBrowser`.

That could otherwise close the parent component when `FileBrowser` is
running in a `Modal`.
---
 .../http/webapp/src/components/File/Browser.vue    | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/platypush/backend/http/webapp/src/components/File/Browser.vue b/platypush/backend/http/webapp/src/components/File/Browser.vue
index 15aa162f20..42584f6a81 100644
--- a/platypush/backend/http/webapp/src/components/File/Browser.vue
+++ b/platypush/backend/http/webapp/src/components/File/Browser.vue
@@ -5,7 +5,7 @@
     <div class="nav" ref="nav">
       <div class="path-container">
         <span class="path" v-if="hasHomepage">
-          <span class="token" @click="path = null">
+          <span class="token" @click.stop="path = null">
             <i class="fa fa-home" />
           </span>
 
@@ -17,7 +17,7 @@
         <span class="path"
               v-for="(token, i) in pathTokens"
               :key="i"
-              @click="path = pathTokens.slice(0, i + 1).join('/').slice(1)">
+              @click.stop="path = pathTokens.slice(0, i + 1).join('/').slice(1)">
           <span class="token">
             {{ token }}
           </span>
@@ -30,7 +30,7 @@
       </div>
 
       <div class="btn-container">
-        <Dropdown :style="{'min-width': '11em'}">
+        <Dropdown :style="{'min-width': '11em'}" @click.prevent>
           <DropdownItem icon-class="fa fa-plus" text="New Folder" @input="showCreateDirectory = true" />
           <DropdownItem icon-class="fa fa-file" text="Create File" @input="showCreateFile = true" />
           <DropdownItem icon-class="fa fa-upload" text="Upload" @input="showUpload = true" />
@@ -49,7 +49,7 @@
 
     <div class="items" ref="items" v-else>
       <div class="row item"
-           @click="onBack"
+           @click.stop="onBack"
            v-if="(path?.length && path !== '/') || hasBack">
         <div class="col-10 left side">
           <i class="icon fa fa-folder" />
@@ -59,7 +59,7 @@
 
       <div class="row item"
            ref="selectCurrent"
-           @click="onSelectCurrentDirectory"
+           @click.stop="onSelectCurrentDirectory"
            v-if="hasSelectCurrentDirectory">
         <div class="col-10 left side">
           <i class="icon fa fa-hand-point-right" />
@@ -67,7 +67,7 @@
         </div>
       </div>
 
-      <div class="row item" v-for="(file, i) in filteredFiles" :key="i" @click="onItemSelect(file)">
+      <div class="row item" v-for="(file, i) in filteredFiles" :key="i" @click.stop="onItemSelect(file)">
         <div class="col-10">
           <i class="icon fa" :class="fileIcons[file.path]" />
           <span class="name">
@@ -76,7 +76,7 @@
         </div>
 
         <div class="col-2 actions" v-if="Object.keys(fileActions[file.path] || {})?.length">
-          <Dropdown :style="{'min-width': '11em'}">
+          <Dropdown :style="{'min-width': '11em'}" @click.prevent>
             <DropdownItem
                 v-for="(action, key) in fileActions[file.path]"
                 :key="key"