From 60565abfbf016f26c68254b0f89ab91ef2bd04aa Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 3 Aug 2022 14:27:44 +0100
Subject: [PATCH] Allow removing users from user assignment modal and add
 validation to prevent invalid submissions

---
 .../bbui/src/Form/Core/PickerDropdown.svelte  |  3 +-
 packages/bbui/src/Form/PickerDropdown.svelte  |  2 +
 .../_components/AssignmentModal.svelte        | 81 ++++++++++++++-----
 3 files changed, 64 insertions(+), 22 deletions(-)

diff --git a/packages/bbui/src/Form/Core/PickerDropdown.svelte b/packages/bbui/src/Form/Core/PickerDropdown.svelte
index db19dab6ac..28cb2b2a4e 100644
--- a/packages/bbui/src/Form/Core/PickerDropdown.svelte
+++ b/packages/bbui/src/Form/Core/PickerDropdown.svelte
@@ -34,6 +34,7 @@
   export let isOptionSelected = () => false
   export let isPlaceholder = false
   export let placeholderOption = null
+  export let showClearIcon = true
 
   const dispatch = createEventDispatcher()
   let primaryOpen = false
@@ -129,7 +130,7 @@
       class:labelPadding={iconData}
       class:open={primaryOpen}
     />
-    {#if primaryValue}
+    {#if primaryValue && showClearIcon}
       <button
         on:click={() => onClearPrimary()}
         type="reset"
diff --git a/packages/bbui/src/Form/PickerDropdown.svelte b/packages/bbui/src/Form/PickerDropdown.svelte
index 63a11c5873..bc3e17eff1 100644
--- a/packages/bbui/src/Form/PickerDropdown.svelte
+++ b/packages/bbui/src/Form/PickerDropdown.svelte
@@ -27,6 +27,7 @@
   export let primaryOptions = []
   export let secondaryOptions = []
   export let searchTerm
+  export let showClearIcon = true
 
   let primaryLabel
   let secondaryLabel
@@ -120,6 +121,7 @@
     {secondaryValue}
     {primaryLabel}
     {secondaryLabel}
+    {showClearIcon}
     on:pickprimary={onPickPrimary}
     on:picksecondary={onPickSecondary}
     on:search={updateSearchTerm}
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 8b476baa19..e3b2245679 100644
--- a/packages/builder/src/pages/builder/portal/overview/_components/AssignmentModal.svelte
+++ b/packages/builder/src/pages/builder/portal/overview/_components/AssignmentModal.svelte
@@ -4,6 +4,7 @@
     PickerDropdown,
     ActionButton,
     Layout,
+    Icon,
     notifications,
   } from "@budibase/bbui"
   import { roles } from "stores/backend"
@@ -28,7 +29,8 @@
       return appId === app.appId
     })
   })
-
+  $: valid =
+    appData?.length && !appData?.some(x => !x.id?.length || !x.role?.length)
   $: optionSections = {
     ...($auth.groupsEnabled &&
       filteredGroups.length && {
@@ -83,6 +85,10 @@
   function addNewInput() {
     appData = [...appData, { id: "", role: "" }]
   }
+
+  const removeItem = index => {
+    appData = appData.filter((x, idx) => idx !== index)
+  }
 </script>
 
 <ModalContent
@@ -92,28 +98,61 @@
   cancelText="Cancel"
   onConfirm={() => addData(appData)}
   showCloseIcon={false}
+  disabled={!valid}
 >
-  <Layout noPadding gap="XS">
-    {#each appData as input, index}
-      <PickerDropdown
-        autocomplete
-        primaryOptions={optionSections}
-        secondaryOptions={$roles}
-        secondaryPlaceholder="Access"
-        bind:primaryValue={input.id}
-        bind:secondaryValue={input.role}
-        bind:searchTerm={search}
-        getPrimaryOptionLabel={group => group.name}
-        getPrimaryOptionValue={group => group.name}
-        getPrimaryOptionIcon={group => group.icon}
-        getPrimaryOptionColour={group => group.colour}
-        getSecondaryOptionLabel={role => role.name}
-        getSecondaryOptionValue={role => role._id}
-        getSecondaryOptionColour={role => RoleUtils.getRoleColour(role._id)}
-      />
-    {/each}
-  </Layout>
+  {#if appData?.length}
+    <Layout noPadding gap="XS">
+      {#each appData as input, index}
+        <div class="item">
+          <div class="picker">
+            <PickerDropdown
+              autocomplete
+              showClearIcon={false}
+              primaryOptions={optionSections}
+              secondaryOptions={$roles}
+              secondaryPlaceholder="Access"
+              bind:primaryValue={input.id}
+              bind:secondaryValue={input.role}
+              bind:searchTerm={search}
+              getPrimaryOptionLabel={group => group.name}
+              getPrimaryOptionValue={group => group.name}
+              getPrimaryOptionIcon={group => group.icon}
+              getPrimaryOptionColour={group => group.colour}
+              getSecondaryOptionLabel={role => role.name}
+              getSecondaryOptionValue={role => role._id}
+              getSecondaryOptionColour={role =>
+                RoleUtils.getRoleColour(role._id)}
+            />
+          </div>
+          <div class="icon">
+            <Icon
+              name="Close"
+              hoverable
+              size="S"
+              on:click={() => removeItem(index)}
+            />
+          </div>
+        </div>
+      {/each}
+    </Layout>
+  {/if}
   <div>
     <ActionButton on:click={addNewInput} icon="Add">Add email</ActionButton>
   </div>
 </ModalContent>
+
+<style>
+  .item {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .picker {
+    width: calc(100% - 30px);
+  }
+  .icon {
+    width: 20px;
+  }
+</style>