From 84571e36c20b168d297901a33e597c8387b42097 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Wed, 30 Aug 2023 10:50:49 +0100
Subject: [PATCH] use display to hide picker button instead of prop

---
 .../bbui/src/FancyForm/FancySelect.svelte     | 39 ++++----
 packages/bbui/src/Form/Core/Picker.svelte     | 93 +++++++++----------
 .../_components/BuilderSidePanel.svelte       |  2 +
 3 files changed, 69 insertions(+), 65 deletions(-)

diff --git a/packages/bbui/src/FancyForm/FancySelect.svelte b/packages/bbui/src/FancyForm/FancySelect.svelte
index aa75a25f42..811b53c2be 100644
--- a/packages/bbui/src/FancyForm/FancySelect.svelte
+++ b/packages/bbui/src/FancyForm/FancySelect.svelte
@@ -92,25 +92,30 @@
   </div>
 </FancyField>
 
-<Picker
-  customAnchor={wrapper}
-  onlyPopover={true}
-  bind:open
-  {error}
-  {disabled}
-  {options}
-  {getOptionLabel}
-  {getOptionValue}
-  {getOptionSubtitle}
-  {getOptionColour}
-  {isOptionEnabled}
-  isPlaceholder={value == null || value === ""}
-  placeholderOption={placeholder === false ? null : placeholder}
-  onSelectOption={onChange}
-  isOptionSelected={option => option === value}
-/>
+<div id="picker-wrapper">
+  <Picker
+    customAnchor={wrapper}
+    onlyPopover={true}
+    bind:open
+    {error}
+    {disabled}
+    {options}
+    {getOptionLabel}
+    {getOptionValue}
+    {getOptionSubtitle}
+    {getOptionColour}
+    {isOptionEnabled}
+    isPlaceholder={value == null || value === ""}
+    placeholderOption={placeholder === false ? null : placeholder}
+    onSelectOption={onChange}
+    isOptionSelected={option => option === value}
+  />
+</div>
 
 <style>
+  #picker-wrapper :global(.spectrum-Picker) {
+    display: none;
+  }
   .value {
     display: block;
     flex: 1 1 auto;
diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte
index 1aa709478c..f736f523ad 100644
--- a/packages/bbui/src/Form/Core/Picker.svelte
+++ b/packages/bbui/src/Form/Core/Picker.svelte
@@ -40,7 +40,6 @@
   export let customPopoverHeight
   export let align = "left"
   export let footer = null
-  export let onlyPopover = false
   export let customAnchor = null
   const dispatch = createEventDispatcher()
 
@@ -91,62 +90,60 @@
   }
 </script>
 
-{#if !onlyPopover}
-  <button
-    {id}
-    class="spectrum-Picker spectrum-Picker--sizeM"
-    class:spectrum-Picker--quiet={quiet}
-    {disabled}
-    class:is-invalid={!!error}
-    class:is-open={open}
-    aria-haspopup="listbox"
-    on:click={onClick}
-    bind:this={button}
-  >
-    {#if fieldIcon}
-      {#if !useOptionIconImage}x
-        <span class="option-extra icon">
-          <Icon size="S" name={fieldIcon} />
-        </span>
-      {:else}
-        <span class="option-extra icon field-icon">
-          <img src={fieldIcon} alt="icon" width="15" height="15" />
-        </span>
-      {/if}
-    {/if}
-    {#if fieldColour}
-      <span class="option-extra">
-        <StatusLight square color={fieldColour} />
+<button
+  {id}
+  class="spectrum-Picker spectrum-Picker--sizeM"
+  class:spectrum-Picker--quiet={quiet}
+  {disabled}
+  class:is-invalid={!!error}
+  class:is-open={open}
+  aria-haspopup="listbox"
+  on:click={onClick}
+  bind:this={button}
+>
+  {#if fieldIcon}
+    {#if !useOptionIconImage}x
+      <span class="option-extra icon">
+        <Icon size="S" name={fieldIcon} />
+      </span>
+    {:else}
+      <span class="option-extra icon field-icon">
+        <img src={fieldIcon} alt="icon" width="15" height="15" />
       </span>
     {/if}
-    <span
-      class="spectrum-Picker-label"
-      class:is-placeholder={isPlaceholder}
-      class:auto-width={autoWidth}
-    >
-      {fieldText}
+  {/if}
+  {#if fieldColour}
+    <span class="option-extra">
+      <StatusLight square color={fieldColour} />
     </span>
-    {#if error}
-      <svg
-        class="spectrum-Icon spectrum-Icon--sizeM spectrum-Picker-validationIcon"
-        focusable="false"
-        aria-hidden="true"
-        aria-label="Folder"
-      >
-        <use xlink:href="#spectrum-icon-18-Alert" />
-      </svg>
-    {/if}
+  {/if}
+  <span
+    class="spectrum-Picker-label"
+    class:is-placeholder={isPlaceholder}
+    class:auto-width={autoWidth}
+  >
+    {fieldText}
+  </span>
+  {#if error}
     <svg
-      class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon"
+      class="spectrum-Icon spectrum-Icon--sizeM spectrum-Picker-validationIcon"
       focusable="false"
       aria-hidden="true"
+      aria-label="Folder"
     >
-      <use xlink:href="#spectrum-css-icon-Chevron100" />
+      <use xlink:href="#spectrum-icon-18-Alert" />
     </svg>
-  </button>
-{/if}
+  {/if}
+  <svg
+    class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon"
+    focusable="false"
+    aria-hidden="true"
+  >
+    <use xlink:href="#spectrum-css-icon-Chevron100" />
+  </svg>
+</button>
 <Popover
-  anchor={!onlyPopover ? button : customAnchor}
+  anchor={customAnchor ? customAnchor : button}
   align={align || "left"}
   bind:this={popover}
   {open}
diff --git a/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte b/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte
index b9993b4653..cbfe71b288 100644
--- a/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte
@@ -253,6 +253,8 @@
       notifications.error("A group must be specified")
       return
     }
+    console.log(group)
+    console.log(role)
     try {
       if (group?.builder?.apps.includes(prodAppId)) {
         await removeGroupAppBuilder(group._id)