From 269aa417325494e635a446e0f8e3aee37cc98c1f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 3 May 2024 11:47:54 +0100
Subject: [PATCH] Add WIP

---
 .../ButtonConfiguration/ButtonSetting.svelte  |  2 +-
 .../DraggableList/DraggableList.svelte        |  3 -
 .../EditComponentPopover.svelte               | 65 +++++++++----------
 .../controls/EditComponentPopover/index.js    | 18 -----
 .../FieldConfiguration/FieldSetting.svelte    |  2 +-
 .../FieldSetting.svelte                       |  2 +-
 .../PrimaryColumnFieldSetting.svelte          |  2 +-
 .../GridColumnConfiguration/getColumns.js     |  2 +
 .../src/components/portal/onboarding/tours.js |  4 --
 packages/client/manifest.json                 |  6 ++
 10 files changed, 43 insertions(+), 63 deletions(-)
 rename packages/builder/src/components/design/settings/controls/{EditComponentPopover => }/EditComponentPopover.svelte (81%)
 delete mode 100644 packages/builder/src/components/design/settings/controls/EditComponentPopover/index.js

diff --git a/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonSetting.svelte b/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonSetting.svelte
index 9a88875140..2387fda683 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonSetting.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonSetting.svelte
@@ -1,5 +1,5 @@
 <script>
-  import EditComponentPopover from "../EditComponentPopover/EditComponentPopover.svelte"
+  import EditComponentPopover from "../EditComponentPopover.svelte"
   import { Icon } from "@budibase/bbui"
   import { runtimeToReadableBinding } from "dataBinding"
   import { isJSBinding } from "@budibase/string-templates"
diff --git a/packages/builder/src/components/design/settings/controls/DraggableList/DraggableList.svelte b/packages/builder/src/components/design/settings/controls/DraggableList/DraggableList.svelte
index 0eb74da94c..0ba7de42c2 100644
--- a/packages/builder/src/components/design/settings/controls/DraggableList/DraggableList.svelte
+++ b/packages/builder/src/components/design/settings/controls/DraggableList/DraggableList.svelte
@@ -100,9 +100,6 @@
       on:click={() => {
         get(store).actions.select(draggableItem.id)
       }}
-      on:mousedown={() => {
-        get(store).actions.select()
-      }}
       bind:this={anchors[draggableItem.id]}
       class:highlighted={draggableItem.id === $store.selected}
     >
diff --git a/packages/builder/src/components/design/settings/controls/EditComponentPopover/EditComponentPopover.svelte b/packages/builder/src/components/design/settings/controls/EditComponentPopover.svelte
similarity index 81%
rename from packages/builder/src/components/design/settings/controls/EditComponentPopover/EditComponentPopover.svelte
rename to packages/builder/src/components/design/settings/controls/EditComponentPopover.svelte
index 39e4bc2ada..65f75af875 100644
--- a/packages/builder/src/components/design/settings/controls/EditComponentPopover/EditComponentPopover.svelte
+++ b/packages/builder/src/components/design/settings/controls/EditComponentPopover.svelte
@@ -3,7 +3,6 @@
   import { componentStore } from "stores/builder"
   import { cloneDeep } from "lodash/fp"
   import { createEventDispatcher, getContext } from "svelte"
-  import { customPositionHandler } from "."
   import ComponentSettingsSection from "pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte"
 
   export let anchor
@@ -18,76 +17,74 @@
 
   let popover
   let drawers = []
-  let open = false
+  let isOpen = false
 
   // Auto hide the component when another item is selected
   $: if (open && $draggable.selected !== componentInstance._id) {
-    popover.hide()
+    close()
   }
-
   // Open automatically if the component is marked as selected
   $: if (!open && $draggable.selected === componentInstance._id && popover) {
-    popover.show()
-    open = true
+    open()
   }
-
   $: componentDef = componentStore.getDefinition(componentInstance._component)
   $: parsedComponentDef = processComponentDefinitionSettings(componentDef)
 
+  const open = () => {
+    isOpen = true
+    drawers = []
+    $draggable.actions.select(componentInstance._id)
+  }
+
+  const close = () => {
+    // Slight delay allows us to be able to properly toggle open/close state by
+    // clicking again on the settings icon
+    setTimeout(() => {
+      isOpen = false
+      if ($draggable.selected === componentInstance._id) {
+        $draggable.actions.select()
+      }
+    }, 10)
+  }
+
+  const toggleOpen = () => {
+    if (isOpen) {
+      close()
+    } else {
+      open()
+    }
+  }
+
   const processComponentDefinitionSettings = componentDef => {
     if (!componentDef) {
       return {}
     }
     const clone = cloneDeep(componentDef)
-
     if (typeof parseSettings === "function") {
       clone.settings = parseSettings(clone.settings)
     }
-
     return clone
   }
 
   const updateSetting = async (setting, value) => {
     const nestedComponentInstance = cloneDeep(componentInstance)
-
     const patchFn = componentStore.updateComponentSetting(setting.key, value)
     patchFn(nestedComponentInstance)
-
     dispatch("change", nestedComponentInstance)
   }
 </script>
 
-<Icon
-  name="Settings"
-  hoverable
-  size="S"
-  on:click={() => {
-    if (!open) {
-      popover.show()
-      open = true
-    }
-  }}
-/>
+<Icon name="Settings" hoverable size="S" on:click={toggleOpen} />
 
 <Popover
-  bind:this={popover}
-  on:open={() => {
-    drawers = []
-    $draggable.actions.select(componentInstance._id)
-  }}
-  on:close={() => {
-    open = false
-    if ($draggable.selected === componentInstance._id) {
-      $draggable.actions.select()
-    }
-  }}
+  open={isOpen}
+  on:close={close}
   {anchor}
   align="left-outside"
   showPopover={drawers.length === 0}
   clickOutsideOverride={drawers.length > 0}
   maxHeight={600}
   offset={18}
-  handlePostionUpdate={customPositionHandler}
 >
   <span class="popover-wrap">
     <Layout noPadding noGap>
diff --git a/packages/builder/src/components/design/settings/controls/EditComponentPopover/index.js b/packages/builder/src/components/design/settings/controls/EditComponentPopover/index.js
deleted file mode 100644
index 2dc3f60185..0000000000
--- a/packages/builder/src/components/design/settings/controls/EditComponentPopover/index.js
+++ /dev/null
@@ -1,18 +0,0 @@
-export const customPositionHandler = (anchorBounds, eleBounds, cfg) => {
-  let { left, top, offset } = cfg
-  let percentageOffset = 30
-  // left-outside
-  left = anchorBounds.left - eleBounds.width - (offset || 5)
-
-  // shift up from the anchor, if space allows
-  let offsetPos = Math.floor(eleBounds.height / 100) * percentageOffset
-  let defaultTop = anchorBounds.top - offsetPos
-
-  if (window.innerHeight - defaultTop < eleBounds.height) {
-    top = window.innerHeight - eleBounds.height - 5
-  } else {
-    top = anchorBounds.top - offsetPos
-  }
-
-  return { ...cfg, left, top }
-}
diff --git a/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldSetting.svelte b/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldSetting.svelte
index 771bcf20e0..27590a9858 100644
--- a/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldSetting.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldSetting.svelte
@@ -1,5 +1,5 @@
 <script>
-  import EditComponentPopover from "../EditComponentPopover/EditComponentPopover.svelte"
+  import EditComponentPopover from "../EditComponentPopover.svelte"
   import { Toggle, Icon } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { cloneDeep } from "lodash/fp"
diff --git a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/FieldSetting.svelte b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/FieldSetting.svelte
index 5fc5c96db8..668f2f7d59 100644
--- a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/FieldSetting.svelte
+++ b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/FieldSetting.svelte
@@ -1,5 +1,5 @@
 <script>
-  import EditComponentPopover from "../EditComponentPopover/EditComponentPopover.svelte"
+  import EditComponentPopover from "../EditComponentPopover.svelte"
   import { Toggle, Icon } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { cloneDeep } from "lodash/fp"
diff --git a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/PrimaryColumnFieldSetting.svelte b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/PrimaryColumnFieldSetting.svelte
index 14cffb5df9..57423e8667 100644
--- a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/PrimaryColumnFieldSetting.svelte
+++ b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/PrimaryColumnFieldSetting.svelte
@@ -1,5 +1,5 @@
 <script>
-  import EditComponentPopover from "../EditComponentPopover/EditComponentPopover.svelte"
+  import EditComponentPopover from "../EditComponentPopover.svelte"
   import { Icon } from "@budibase/bbui"
   import { setContext } from "svelte"
   import { writable } from "svelte/store"
diff --git a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.js b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.js
index 7bf718d1e7..4af3e48110 100644
--- a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.js
+++ b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.js
@@ -67,6 +67,7 @@ const toGridFormat = draggableListColumns => {
     label: entry.label,
     field: entry.field,
     active: entry.active,
+    width: entry.width,
   }))
 }
 
@@ -81,6 +82,7 @@ const toDraggableListFormat = (gridFormatColumns, createComponent, schema) => {
         field: column.field,
         label: column.label,
         columnType: schema[column.field].type,
+        width: column.width,
       },
       {}
     )
diff --git a/packages/builder/src/components/portal/onboarding/tours.js b/packages/builder/src/components/portal/onboarding/tours.js
index fab97cdd03..6a3fe1daf0 100644
--- a/packages/builder/src/components/portal/onboarding/tours.js
+++ b/packages/builder/src/components/portal/onboarding/tours.js
@@ -10,7 +10,6 @@ import {
   NewFormSteps,
 } from "./steps"
 import { API } from "api"
-import { customPositionHandler } from "components/design/settings/controls/EditComponentPopover"
 
 const ONBOARDING_EVENT_PREFIX = "onboarding"
 
@@ -187,7 +186,6 @@ const getTours = () => {
             tourEvent(TOUR_STEP_KEYS.BUILDER_FORM_CREATE_STEPS)
             builderStore.highlightSetting("steps", "info")
           },
-          positionHandler: customPositionHandler,
           align: "left-outside",
         },
       ],
@@ -203,7 +201,6 @@ const getTours = () => {
             tourEvent(TOUR_STEP_KEYS.BUILDER_FORM_ROW_ID)
             builderStore.highlightSetting("rowId", "info")
           },
-          positionHandler: customPositionHandler,
           align: "left-outside",
         },
         {
@@ -219,7 +216,6 @@ const getTours = () => {
             tourEvent(TOUR_STEP_KEYS.BUILDER_FORM_VIEW_UPDATE_STEPS)
             builderStore.highlightSetting("steps", "info")
           },
-          positionHandler: customPositionHandler,
           align: "left-outside",
           scrollIntoView: true,
         },
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index abd73aaddd..3427220952 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -2746,6 +2746,12 @@
         "type": "plainText",
         "label": "Label",
         "key": "label"
+      },
+      {
+        "type": "number",
+        "label": "Width",
+        "key": "width",
+        "placeholder": "Auto"
       }
     ]
   },