Allow removing users from user assignment modal and add validation to prevent invalid submissions

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"

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}

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,11 +98,16 @@
   cancelText="Cancel"
   onConfirm={() => addData(appData)}
   showCloseIcon={false}
+  disabled={!valid}
 >
+  {#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"
@@ -109,11 +120,39 @@
               getPrimaryOptionColour={group => group.colour}
               getSecondaryOptionLabel={role => role.name}
               getSecondaryOptionValue={role => role._id}
-        getSecondaryOptionColour={role => RoleUtils.getRoleColour(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>