Dedupe component actions by dispatching keyboard events when clicking component dropdown menu

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentDropdownMenu.svelte

@@ -1,127 +1,69 @@
 <script>
   import { store } from "builderStore"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import { ActionMenu, MenuItem, Icon } from "@budibase/bbui"
-  import { ActionMenu, MenuItem, Icon, notifications } from "@budibase/bbui"
 
-  export let component
-
-  let confirmDeleteDialog
-
-  $: definition = store.actions.components.getDefinition(component?._component)
-  $: noChildrenAllowed = !component || !definition?.hasChildren
   $: noPaste = !$store.componentToPaste
 
-  // "editable" has been repurposed for inline text editing.
+  const keyboardEvent = (key, ctrlKey = false) => {
-  // It remains here for legacy compatibility.
+    document.dispatchEvent(new KeyboardEvent("keydown", { key, ctrlKey }))
-  // Future components should define "static": true for indicate they should
-  // not show a context menu.
-  $: showMenu = definition?.editable !== false && definition?.static !== true
-
-  const moveUpComponent = async () => {
-    try {
-      await store.actions.components.moveUp(component)
-    } catch (error) {
-      notifications.error("Error moving component up")
-    }
-  }
-
-  const moveDownComponent = async () => {
-    try {
-      await store.actions.components.moveDown(component)
-    } catch (error) {
-      notifications.error("Error moving component down")
-    }
-  }
-
-  const duplicateComponent = () => {
-    storeComponentForCopy(false)
-    pasteComponent("below")
-  }
-
-  const deleteComponent = async () => {
-    try {
-      await store.actions.components.delete(component)
-    } catch (error) {
-      notifications.error("Error deleting component")
-    }
-  }
-
-  const storeComponentForCopy = (cut = false) => {
-    store.actions.components.copy(component, cut)
-  }
-
-  const pasteComponent = mode => {
-    try {
-      store.actions.components.paste(component, mode)
-    } catch (error) {
-      notifications.error("Error saving component")
-    }
   }
 </script>
 
-{#if showMenu}
+<ActionMenu>
-  <ActionMenu>
+  <div slot="control" class="icon">
-    <div slot="control" class="icon">
+    <Icon size="S" hoverable name="MoreSmallList" />
-      <Icon size="S" hoverable name="MoreSmallList" />
+  </div>
-    </div>
+  <MenuItem
-    <MenuItem icon="Delete" keyBind="Del" on:click={confirmDeleteDialog.show}>
+    icon="Delete"
-      Delete
+    keyBind="Del"
-    </MenuItem>
+    on:click={() => keyboardEvent("Delete")}
-    <MenuItem
+  >
-      noClose
+    Delete
-      icon="ChevronUp"
+  </MenuItem>
-      keyBind="Ctrl+↑"
+  <MenuItem
-      on:click={moveUpComponent}
+    icon="ChevronUp"
-    >
+    keyBind="Ctrl+↑"
-      Move up
+    on:click={() => keyboardEvent("ArrowUp", true)}
-    </MenuItem>
+  >
-    <MenuItem
+    Move up
-      noClose
+  </MenuItem>
-      icon="ChevronDown"
+  <MenuItem
-      keyBind="Ctrl+↓"
+    icon="ChevronDown"
-      on:click={moveDownComponent}
+    keyBind="Ctrl+↓"
-    >
+    on:click={() => keyboardEvent("ArrowDown", true)}
-      Move down
+  >
-    </MenuItem>
+    Move down
-    <MenuItem
+  </MenuItem>
-      noClose
+  <MenuItem
-      icon="Duplicate"
+    icon="Duplicate"
-      keyBind="Ctrl+D"
+    keyBind="Ctrl+D"
-      on:click={duplicateComponent}
+    on:click={() => keyboardEvent("d", true)}
-    >
+  >
-      Duplicate
+    Duplicate
-    </MenuItem>
+  </MenuItem>
-    <MenuItem
+  <MenuItem
-      icon="Cut"
+    icon="Cut"
-      keyBind="Ctrl+X"
+    keyBind="Ctrl+X"
-      on:click={() => storeComponentForCopy(true)}
+    on:click={() => keyboardEvent("x", true)}
-    >
+  >
-      Cut
+    Cut
-    </MenuItem>
+  </MenuItem>
-    <MenuItem
+  <MenuItem
-      icon="Copy"
+    icon="Copy"
-      keyBind="Ctrl+C"
+    keyBind="Ctrl+C"
-      on:click={() => storeComponentForCopy(false)}
+    on:click={() => keyboardEvent("c", true)}
-    >
+  >
-      Copy
+    Copy
-    </MenuItem>
+  </MenuItem>
-    <MenuItem
+  <MenuItem
-      icon="LayersSendToBack"
+    icon="LayersSendToBack"
-      keyBind="Ctrl+V"
+    keyBind="Ctrl+V"
-      on:click={() => pasteComponent("inside")}
+    on:click={() => keyboardEvent("v", true)}
-      disabled={noPaste}
+    disabled={noPaste}
-    >
+  >
-      Paste
+    Paste
-    </MenuItem>
+  </MenuItem>
-  </ActionMenu>
+</ActionMenu>
-  <ConfirmDialog
-    bind:this={confirmDeleteDialog}
-    title="Confirm Deletion"
-    body={`Are you sure you wish to delete this '${definition?.name}' component?`}
-    okText="Delete Component"
-    onOk={deleteComponent}
-  />
-{/if}
 
 <style>
   .icon {