From d1cce411c813b611bef726ea0f1d37ed6a7d59e4 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 3 Aug 2022 13:47:55 +0100
Subject: [PATCH] Fix picker dropdown UX issues. Rename some usages of groups
 to user groups.

---
 .../bbui/src/Form/Core/PickerDropdown.svelte  | 35 +++++++++----------
 .../portal/manage/users/[userId].svelte       |  6 ++--
 .../_components/AssignmentModal.svelte        |  3 +-
 3 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/packages/bbui/src/Form/Core/PickerDropdown.svelte b/packages/bbui/src/Form/Core/PickerDropdown.svelte
index fbe43717ba..db19dab6ac 100644
--- a/packages/bbui/src/Form/Core/PickerDropdown.svelte
+++ b/packages/bbui/src/Form/Core/PickerDropdown.svelte
@@ -15,7 +15,6 @@
   export let id = null
   export let placeholder = "Choose an option or type"
   export let disabled = false
-  export let readonly = false
   export let updateOnChange = true
   export let error = null
   export let secondaryOptions = []
@@ -50,17 +49,11 @@
   }
 
   const updateValue = newValue => {
-    if (readonly) {
-      return
-    }
     dispatch("change", newValue)
   }
 
   const onClickSecondary = () => {
     dispatch("click")
-    if (readonly) {
-      return
-    }
     secondaryOpen = true
   }
 
@@ -80,24 +73,15 @@
   }
 
   const onBlur = event => {
-    if (readonly) {
-      return
-    }
     focus = false
     updateValue(event.target.value)
   }
 
   const onInput = event => {
-    if (readonly || !updateOnChange) {
-      return
-    }
     updateValue(event.target.value)
   }
 
   const updateValueOnEnter = event => {
-    if (readonly) {
-      return
-    }
     if (event.key === "Enter") {
       updateValue(event.target.value)
     }
@@ -140,9 +124,10 @@
       value={primaryLabel || ""}
       placeholder={placeholder || ""}
       {disabled}
-      {readonly}
+      readonly
       class="spectrum-Textfield-input spectrum-InputGroup-input"
       class:labelPadding={iconData}
+      class:open={primaryOpen}
     />
     {#if primaryValue}
       <button
@@ -198,7 +183,7 @@
           </li>
         {/if}
         {#each groupTitles as title}
-          <div class="spectrum-Menu-item">
+          <div class="spectrum-Menu-item title">
             <Detail>{title}</Detail>
           </div>
           {#if primaryOptions}
@@ -433,4 +418,18 @@
   .spectrum-Search-clearButton {
     position: absolute;
   }
+
+  /* Fix focus borders to show only when opened */
+  .spectrum-Textfield-input {
+    border-color: var(--spectrum-global-color-gray-400) !important;
+    border-right-width: 1px;
+  }
+  .spectrum-Textfield-input.open {
+    border-color: var(--spectrum-global-color-blue-400) !important;
+  }
+
+  /* Fix being able to hover and select titles */
+  .spectrum-Menu-item.title {
+    pointer-events: none;
+  }
 </style>
diff --git a/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte b/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte
index d60d878602..87309f9b29 100644
--- a/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte
@@ -288,7 +288,7 @@
       <!-- User groups -->
       <Layout gap="S" noPadding>
         <div class="tableTitle">
-          <Heading size="S">Groups</Heading>
+          <Heading size="S">User groups</Heading>
           <div bind:this={popoverAnchor}>
             <Button
               on:click={popover.show()}
@@ -296,13 +296,13 @@
               secondary
               newStyles
             >
-              Add to group
+              Add to user group
             </Button>
           </div>
           <Popover align="right" bind:this={popover} anchor={popoverAnchor}>
             <UserGroupPicker
               key={"name"}
-              title={"Group"}
+              title={"User group"}
               bind:searchTerm
               bind:selected={selectedGroups}
               bind:filtered={filteredGroups}
diff --git a/packages/builder/src/pages/builder/portal/overview/_components/AssignmentModal.svelte b/packages/builder/src/pages/builder/portal/overview/_components/AssignmentModal.svelte
index e0497b4600..8b476baa19 100644
--- a/packages/builder/src/pages/builder/portal/overview/_components/AssignmentModal.svelte
+++ b/packages/builder/src/pages/builder/portal/overview/_components/AssignmentModal.svelte
@@ -32,7 +32,7 @@
   $: optionSections = {
     ...($auth.groupsEnabled &&
       filteredGroups.length && {
-        groups: {
+        ["User groups"]: {
           data: filteredGroups,
           getLabel: group => group.name,
           getValue: group => group._id,
@@ -97,7 +97,6 @@
     {#each appData as input, index}
       <PickerDropdown
         autocomplete
-        readonly
         primaryOptions={optionSections}
         secondaryOptions={$roles}
         secondaryPlaceholder="Access"