Fix footer in fancy select and allow inviting creators from side panel

packages/bbui/src/FancyForm/FancySelect.svelte

@@ -12,11 +12,13 @@
   export let error = null
   export let validate = null
   export let options = []
+  export let footer = null
   export let isOptionEnabled = () => true
   export let getOptionLabel = option => extractProperty(option, "label")
   export let getOptionValue = option => extractProperty(option, "value")
   export let getOptionSubtitle = option => extractProperty(option, "subtitle")
   export let getOptionColour = () => null
+
   const dispatch = createEventDispatcher()
 
   let open = false
@@ -100,6 +102,7 @@
     {error}
     {disabled}
     {options}
+    {footer}
     {getOptionLabel}
     {getOptionValue}
     {getOptionSubtitle}

packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte

@@ -364,7 +364,10 @@
     const payload = [
       {
         email: newUserEmail,
-        builder: { global: creationRoleType === Constants.BudibaseRoles.Admin },
+        builder: {
+          global: creationRoleType === Constants.BudibaseRoles.Admin,
+          creator: creationRoleType === Constants.BudibaseRoles.Creator,
+        },
         admin: { global: creationRoleType === Constants.BudibaseRoles.Admin },
       },
     ]
@@ -517,6 +520,18 @@
     }
     return user.role
   }
+
+  const checkAppAccess = e => {
+    // Ensure we don't get into an invalid combo of tenant role and app access
+    if (
+      e.detail === Constants.BudibaseRoles.AppUser &&
+      creationAccessType === Constants.Roles.CREATOR
+    ) {
+      creationAccessType = Constants.Roles.BASIC
+    } else if (e.detail === Constants.BudibaseRoles.Admin) {
+      creationAccessType = Constants.Roles.CREATOR
+    }
+  }
 </script>
 
 <svelte:window on:keydown={handleKeyDown} />
@@ -802,28 +817,29 @@
                     option => option.value !== Constants.BudibaseRoles.Admin
                   )}
               label="Access"
+              on:change={checkAppAccess}
             />
-            {#if creationRoleType !== Constants.BudibaseRoles.Admin}
-              <span class="role-wrap">
-                <RoleSelect
-                  placeholder={false}
-                  bind:value={creationAccessType}
-                  allowPublic={false}
-                  allowCreator={true}
-                  quiet={true}
-                  autoWidth
-                  align="right"
-                  fancySelect
-                />
-              </span>
-            {/if}
+            <span class="role-wrap">
+              <RoleSelect
+                placeholder={false}
+                bind:value={creationAccessType}
+                allowPublic={false}
+                allowCreator={creationRoleType !==
+                  Constants.BudibaseRoles.AppUser}
+                quiet={true}
+                autoWidth
+                align="right"
+                fancySelect
+                allowedRoles={creationRoleType === Constants.BudibaseRoles.Admin
+                  ? [Constants.Roles.CREATOR]
+                  : null}
+                footer={getRoleFooter({
+                  isAdminOrGlobalBuilder:
+                    creationRoleType === Constants.BudibaseRoles.Admin,
+                })}
+              />
+            </span>
           </FancyForm>
-          {#if creationRoleType === Constants.BudibaseRoles.Admin}
-            <div class="admin-info">
-              <Icon name="Info" />
-              Admins will get full access to all apps and settings
-            </div>
-          {/if}
           <span class="add-user">
             <Button
               newStyles
@@ -864,16 +880,6 @@
     display: grid;
   }
 
-  .admin-info {
-    margin-top: var(--spacing-xl);
-    padding: var(--spacing-l) var(--spacing-l) var(--spacing-l) var(--spacing-l);
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-xl);
-    height: 30px;
-    background-color: var(--background-alt);
-  }
-
   .underlined {
     text-decoration: underline;
     cursor: pointer;