Merge branch 'feat/user-groups-tab' of github.com:Budibase/budibase into feat/user-groups-tab

packages/bbui/src/Avatar/Avatar.svelte

@@ -4,7 +4,7 @@
     ["XXS", "--spectrum-alias-avatar-size-50"],
     ["XS", "--spectrum-alias-avatar-size-75"],
     ["S", "--spectrum-alias-avatar-size-200"],
-    ["M", "--spectrum-alias-avatar-size-300"],
+    ["M", "--spectrum-alias-avatar-size-400"],
     ["L", "--spectrum-alias-avatar-size-500"],
     ["XL", "--spectrum-alias-avatar-size-600"],
     ["XXL", "--spectrum-alias-avatar-size-700"],
@@ -13,6 +13,19 @@
   export let url = ""
   export let disabled = false
   export let initials = "JD"
+
+  const DefaultColor = "#3aab87"
+
+  $: color = getColor(initials)
+
+  const getColor = initials => {
+    if (!initials?.length) {
+      return DefaultColor
+    }
+    const code = initials[0].toLowerCase().charCodeAt(0)
+    const hue = ((code % 26) / 26) * 360
+    return `hsl(${hue}, 50%, 50%)`
+  }
 </script>
 
 {#if url}
@@ -25,10 +38,11 @@
   />
 {:else}
   <div
+    class="spectrum-Avatar"
     class:is-disabled={disabled}
     style="width: var({sizes.get(size)}); height: var({sizes.get(
       size
-    )}); font-size: calc(var({sizes.get(size)}) / 2)"
+    )}); font-size: calc(var({sizes.get(size)}) / 2); background: {color};"
   >
     {initials || ""}
   </div>
@@ -40,7 +54,6 @@
     display: grid;
     place-items: center;
     font-weight: 600;
-    background: #3aab87;
     border-radius: 50%;
     overflow: hidden;
     user-select: none;

packages/bbui/src/Form/Core/Picker.svelte

@@ -6,12 +6,15 @@
   import { createEventDispatcher } from "svelte"
   import clickOutside from "../../Actions/click_outside"
   import Search from "./Search.svelte"
+  import Icon from "../../Icon/Icon.svelte"
+  import StatusLight from "../../StatusLight/StatusLight.svelte"
 
   export let id = null
   export let disabled = false
   export let error = null
   export let fieldText = ""
   export let fieldIcon = ""
+  export let fieldColour = ""
   export let isPlaceholder = false
   export let placeholderOption = null
   export let options = []
@@ -20,6 +23,7 @@
   export let getOptionLabel = option => option
   export let getOptionValue = option => option
   export let getOptionIcon = () => null
+  export let getOptionColour = () => null
   export let open = false
   export let readonly = false
   export let quiet = false
@@ -43,7 +47,7 @@
       return
     }
     searchTerm = null
-    open = !open
+    open = true
   }
 
   const getSortedOptions = (options, getLabel, sort) => {
@@ -71,7 +75,6 @@
   }
 </script>
 
-<div use:clickOutside={() => (open = false)}>
 <button
   {id}
   class="spectrum-Picker spectrum-Picker--sizeM"
@@ -83,11 +86,14 @@
   on:mousedown={onClick}
 >
   {#if fieldIcon}
-      <span class="icon-Placeholder-Padding">
+    <span class="option-left">
-        <img src={fieldIcon} alt="icon" width="20" height="15" />
+      <Icon name={fieldIcon} />
+    </span>
+  {:else if fieldColour}
+    <span class="option-left">
+      <StatusLight color={fieldColour} />
     </span>
   {/if}
-
   <span
     class="spectrum-Picker-label"
     class:is-placeholder={isPlaceholder}
@@ -105,6 +111,11 @@
       <use xlink:href="#spectrum-icon-18-Alert" />
     </svg>
   {/if}
+  {#if fieldIcon && fieldColour}
+    <span class="option-right">
+      <StatusLight color={fieldColour} />
+    </span>
+  {/if}
   <svg
     class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon"
     focusable="false"
@@ -115,6 +126,7 @@
 </button>
 {#if open}
   <div
+    use:clickOutside={() => (open = false)}
     transition:fly|local={{ y: -20, duration: 200 }}
     class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
     class:auto-width={autoWidth}
@@ -158,13 +170,12 @@
             on:click={() => onSelectOption(getOptionValue(option, idx))}
           >
             {#if getOptionIcon(option, idx)}
-                <span class="icon-Padding">
+              <span class="option-left">
-                  <img
+                <Icon name={getOptionIcon(option, idx)} />
-                    src={getOptionIcon(option, idx)}
+              </span>
-                    alt="icon"
+            {:else if getOptionColour(option, idx)}
-                    width="20"
+              <span class="option-left">
-                    height="15"
+                <StatusLight color={getOptionColour(option, idx)} />
-                  />
               </span>
             {/if}
             <span class="spectrum-Menu-itemLabel">
@@ -177,13 +188,17 @@
             >
               <use xlink:href="#spectrum-css-icon-Checkmark100" />
             </svg>
+            {#if getOptionIcon(option, idx) && getOptionColour(option, idx)}
+              <span class="option-right">
+                <StatusLight color={getOptionColour(option, idx)} />
+              </span>
+            {/if}
           </li>
         {/each}
       {/if}
     </ul>
   </div>
 {/if}
-</div>
 
 <style>
   .spectrum-Popover {
@@ -213,13 +228,19 @@
     padding-right: 2px;
   }
 
-  .icon-Padding {
+  /* Icon and colour alignment */
-    padding-right: 10px;
+  .spectrum-Menu-checkmark {
+    align-self: center;
+    margin-top: 0;
+    margin-left: 12px;
   }
-  .icon-Placeholder-Padding {
+  .option-left {
-    padding-top: 5px;
+    padding-right: 8px;
-    padding-right: 10px;
   }
+  .option-right {
+    padding-left: 8px;
+  }
+
   .spectrum-Popover :global(.spectrum-Search) {
     margin-top: -1px;
     margin-left: -1px;

packages/bbui/src/Form/Core/Select.svelte

@@ -11,6 +11,7 @@
   export let getOptionLabel = option => option
   export let getOptionValue = option => option
   export let getOptionIcon = () => null
+  export let getOptionColour = () => null
   export let readonly = false
   export let quiet = false
   export let autoWidth = false
@@ -20,7 +21,19 @@
   const dispatch = createEventDispatcher()
   let open = false
   $: fieldText = getFieldText(value, options, placeholder)
-  $: fieldIcon = getFieldIcon(value, options, placeholder)
+  $: fieldIcon = getFieldAttribute(getOptionIcon, value, options)
+  $: fieldColour = getFieldAttribute(getOptionColour, value, options)
+
+  const getFieldAttribute = (getAttribute, value, options) => {
+    // Wait for options to load if there is a value but no options
+    if (!options?.length) {
+      return ""
+    }
+    const index = options.findIndex(
+      (option, idx) => getOptionValue(option, idx) === value
+    )
+    return index !== -1 ? getAttribute(options[index], index) : null
+  }
 
   const getFieldText = (value, options, placeholder) => {
     // Always use placeholder if no value
@@ -28,27 +41,7 @@
       return placeholder || "Choose an option"
     }
 
-    // Wait for options to load if there is a value but no options
+    return getFieldAttribute(getOptionLabel, value, options)
-    if (!options?.length) {
-      return ""
-    }
-
-    // Render the label if the selected option is found, otherwise raw value
-    const index = options.findIndex(
-      (option, idx) => getOptionValue(option, idx) === value
-    )
-    return index !== -1 ? getOptionLabel(options[index], index) : value
-  }
-
-  const getFieldIcon = (value, options) => {
-    // Wait for options to load if there is a value but no options
-    if (!options?.length) {
-      return ""
-    }
-    const index = options.findIndex(
-      (option, idx) => getOptionValue(option, idx) === value
-    )
-    return index !== -1 ? getOptionIcon(options[index], index) : null
   }
 
   const selectOption = value => {
@@ -66,12 +59,14 @@
   {disabled}
   {readonly}
   {fieldText}
+  {fieldIcon}
+  {fieldColour}
   {options}
   {autoWidth}
   {getOptionLabel}
   {getOptionValue}
   {getOptionIcon}
-  {fieldIcon}
+  {getOptionColour}
   {autocomplete}
   {sort}
   isPlaceholder={value == null || value === ""}

packages/bbui/src/Form/Select.svelte

@@ -14,6 +14,7 @@
   export let getOptionLabel = option => extractProperty(option, "label")
   export let getOptionValue = option => extractProperty(option, "value")
   export let getOptionIcon = option => option?.icon
+  export let getOptionColour = option => option?.colour
   export let quiet = false
   export let autoWidth = false
   export let sort = false
@@ -47,6 +48,7 @@
     {getOptionLabel}
     {getOptionValue}
     {getOptionIcon}
+    {getOptionColour}
     on:change={onChange}
     on:click
   />

packages/bbui/src/List/Items/DetailSummary.svench

@@ -1,53 +0,0 @@
-<script>
-  import { View } from "svench";
-  import DetailSummary from "./DetailSummary.svelte";
-</script>
-
-<svelte:head>
-	<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
-</svelte:head>
-
-<style>
-  div {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-    gap: var(--spacing-m);
-    width: 120px;
-  }
-</style>
-
-<View name="default">
-  <div>
-    <DetailSummary name="Category 1">
-      <span>1</span>
-      <span>2</span>
-      <span>3</span>
-      <span>4</span>
-    </DetailSummary>
-    <DetailSummary name="Category 2">
-      <span>1</span>
-      <span>2</span>
-      <span>3</span>
-      <span>4</span>
-    </DetailSummary>
-  </div>
-</View>
-
-<View name="thin">
-  <div>
-    <DetailSummary thin name="Category 1">
-      <span>1</span>
-      <span>2</span>
-      <span>3</span>
-      <span>4</span>
-    </DetailSummary>
-    <DetailSummary thin name="Category 2">
-      <span>1</span>
-      <span>2</span>
-      <span>3</span>
-      <span>4</span>
-    </DetailSummary>
-  </div>
-</View>

packages/bbui/src/List/List.svelte

@@ -0,0 +1,28 @@
+<script>
+  import Detail from "../Typography/Detail.svelte"
+
+  export let title = null
+</script>
+
+<div>
+  {#if title}
+    <div class="title">
+      <Detail>{title}</Detail>
+    </div>
+  {/if}
+  <div class="list-items">
+    <slot />
+  </div>
+</div>
+
+<style>
+  .title {
+    margin-bottom: 6px;
+  }
+  .list-items {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+  }
+</style>

packages/bbui/src/List/ListItem.svelte

@@ -0,0 +1,92 @@
+<script>
+  import Body from "../Typography/Body.svelte"
+  import Icon from "../Icon/Icon.svelte"
+  import Label from "../Label/Label.svelte"
+  import Avatar from "../Avatar/Avatar.svelte"
+
+  export let icon = null
+  export let iconBackground = null
+  export let avatar = false
+  export let title = null
+  export let subtitle = null
+
+  $: initials = avatar ? title?.[0] : null
+</script>
+
+<div class="list-item">
+  <div class="left">
+    {#if icon}
+      <div class="icon" style="background: {iconBackground || `transparent`};">
+        <Icon name={icon} size="S" color={iconBackground ? "white" : null} />
+      </div>
+    {/if}
+    {#if avatar}
+      <Avatar {initials} />
+    {/if}
+    {#if title}
+      <Body>{title}</Body>
+    {/if}
+    {#if subtitle}
+      <Label>{subtitle}</Label>
+    {/if}
+  </div>
+  <div class="right">
+    <slot />
+  </div>
+</div>
+
+<style>
+  .list-item {
+    padding: 0 16px;
+    height: 56px;
+    background: var(--spectrum-alias-background-color-tertiary);
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    border: 1px solid var(--spectrum-global-color-gray-300);
+  }
+  .list-item:not(:first-child) {
+    border-top: none;
+  }
+  .list-item:first-child {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+  }
+  .list-item:last-child {
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .left,
+  .right {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--spacing-xl);
+  }
+  .left {
+    width: 0;
+    flex: 1 1 auto;
+  }
+  .right {
+    flex: 0 0 auto;
+  }
+  .list-item :global(.spectrum-Icon),
+  .list-item :global(.spectrum-Avatar) {
+    flex: 0 0 auto;
+  }
+  .list-item :global(.spectrum-Body) {
+    color: var(--spectrum-global-color-gray-900);
+  }
+  .list-item :global(.spectrum-Body) {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .icon {
+    width: var(--spectrum-alias-avatar-size-400);
+    height: var(--spectrum-alias-avatar-size-400);
+    display: grid;
+    place-items: center;
+    border-radius: 50%;
+  }
+</style>

packages/bbui/src/StatusLight/StatusLight.svelte

@@ -17,10 +17,13 @@
   export let negative = false
   export let disabled = false
   export let active = false
+  export let color = null
 </script>
 
 <div
   class="spectrum-StatusLight spectrum-StatusLight--size{size}"
+  class:custom={!!color}
+  style={`--color: ${color};`}
   class:spectrum-StatusLight--celery={celery}
   class:spectrum-StatusLight--yellow={yellow}
   class:spectrum-StatusLight--fuchsia={fuchsia}
@@ -36,6 +39,26 @@
   class:spectrum-StatusLight--negative={negative}
   class:spectrum-StatusLight--disabled={disabled}
   class:spectrum-StatusLight--active={active}
+  class:withText={!!$$slots.default}
 >
   <slot />
 </div>
+
+<style>
+  .spectrum-StatusLight {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    --spectrum-statuslight-info-text-gap: 4px;
+    min-height: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .spectrum-StatusLight.withText::before {
+    margin-right: 10px;
+  }
+  .custom::before {
+    background: var(--color) !important;
+  }
+</style>

packages/bbui/src/index.js

@@ -65,6 +65,8 @@ export { default as BannerDisplay } from "./Banner/BannerDisplay.svelte"
 export { default as MarkdownEditor } from "./Markdown/MarkdownEditor.svelte"
 export { default as MarkdownViewer } from "./Markdown/MarkdownViewer.svelte"
 export { default as RichTextField } from "./Form/RichTextField.svelte"
+export { default as List } from "./List/List.svelte"
+export { default as ListItem } from "./List/ListItem.svelte"
 
 // Renderers
 export { default as BoldRenderer } from "./Table/BoldRenderer.svelte"

packages/builder/src/components/common/RoleSelect.svelte

@@ -0,0 +1,24 @@
+<script>
+  import { Select } from "@budibase/bbui"
+  import { roles } from "stores/backend"
+  import { RoleUtils } from "@budibase/frontend-core"
+
+  export let value
+  export let error
+  export let placeholder = null
+  export let autoWidth = false
+  export let quiet = false
+</script>
+
+<Select
+  {autoWidth}
+  {quiet}
+  bind:value
+  on:change
+  options={$roles}
+  getOptionLabel={role => role.name}
+  getOptionValue={role => role._id}
+  getOptionColour={role => RoleUtils.getRoleColour(role._id)}
+  {placeholder}
+  {error}
+/>

packages/builder/src/pages/builder/portal/_layout.svelte

@@ -14,6 +14,7 @@
   } from "@budibase/bbui"
   import ConfigChecklist from "components/common/ConfigChecklist.svelte"
   import { organisation, auth } from "stores/portal"
+  import { roles } from "stores/backend"
   import { admin as adminStore } from "stores/portal"
   import { onMount } from "svelte"
   import UpdateUserInfoModal from "components/settings/UpdateUserInfoModal.svelte"
@@ -126,6 +127,7 @@
       } else {
         try {
           await organisation.init()
+          await roles.fetch()
         } catch (error) {
           notifications.error("Error getting org config")
         }

packages/builder/src/pages/builder/portal/overview/[application]/index.svelte

@@ -19,6 +19,7 @@
   } from "@budibase/bbui"
   import OverviewTab from "../_components/OverviewTab.svelte"
   import SettingsTab from "../_components/SettingsTab.svelte"
+  import AccessTab from "../_components/AccessTab.svelte"
   import { API } from "api"
   import { store } from "builderStore"
   import { apps, auth } from "stores/portal"
@@ -302,6 +303,9 @@
               on:unpublish={e => unpublishApp(e.detail)}
             />
           </Tab>
+          <Tab title="Access">
+            <AccessTab app={selectedApp} />
+          </Tab>
           {#if false}
             <Tab title="Automation History">
               <div class="container">Automation History contents</div>

packages/builder/src/pages/builder/portal/overview/_components/AccessTab.svelte

@@ -0,0 +1,51 @@
+<script>
+  import { Layout, Heading, Body, Button, List, ListItem } from "@budibase/bbui"
+  import RoleSelect from "components/common/RoleSelect.svelte"
+</script>
+
+<div class="access-tab">
+  <Layout>
+    <div>
+      <Heading>Access</Heading>
+      <div class="subtitle">
+        <Body size="S">
+          Assign users to your app and define their access here</Body
+        >
+        <Button icon="User" cta>Assign users</Button>
+      </div>
+    </div>
+    <List title="User Groups">
+      <ListItem title="Design Team" icon="Brush" iconBackground="#348c6f">
+        <RoleSelect autoWidth quiet value="POWER" />
+      </ListItem>
+      <ListItem title="Admin Team" icon="UserAdmin" iconBackground="#843c6f">
+        <RoleSelect autoWidth quiet value="ADMIN" />
+      </ListItem>
+    </List>
+    <List title="Users">
+      <ListItem title="andy@gmail.com" avatar>
+        <RoleSelect autoWidth quiet value="BASIC" />
+      </ListItem>
+      <ListItem title="jeff@gmail.com" avatar>
+        <RoleSelect autoWidth quiet value="BASIC" />
+      </ListItem>
+      <ListItem title="tom@gmail.com" avatar>
+        <RoleSelect autoWidth quiet value="BASIC" />
+      </ListItem>
+    </List>
+  </Layout>
+</div>
+
+<style>
+  .access-tab {
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 40px;
+  }
+  .subtitle {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+</style>

packages/frontend-core/src/constants.js

@@ -63,3 +63,12 @@ export const TableNames = {
  *   - Coerce types for search endpoint
  */
 export const ApiVersion = "1"
+
+// Role IDs
+export const Roles = {
+  ADMIN: "ADMIN",
+  POWER: "POWER",
+  BASIC: "BASIC",
+  PUBLIC: "PUBLIC",
+  BUILDER: "BUILDER",
+}

packages/frontend-core/src/utils/index.js

@@ -1,4 +1,5 @@
 export * as LuceneUtils from "./lucene"
 export * as JSONUtils from "./json"
 export * as CookieUtils from "./cookies"
+export * as RoleUtils from "./roles"
 export * as Utils from "./utils"

packages/frontend-core/src/utils/roles.js

@@ -0,0 +1,22 @@
+import { Roles } from "../constants"
+
+const RolePriorities = {
+  [Roles.ADMIN]: 4,
+  [Roles.POWER]: 3,
+  [Roles.BASIC]: 2,
+  [Roles.PUBLIC]: 1,
+}
+const RoleColours = {
+  [Roles.ADMIN]: "var(--spectrum-global-color-static-seafoam-400)",
+  [Roles.POWER]: "var(--spectrum-global-color-static-purple-400)",
+  [Roles.BASIC]: "var(--spectrum-global-color-static-magenta-400)",
+  [Roles.PUBLIC]: "var(--spectrum-global-color-static-yellow-400)",
+}
+
+export const getRolePriority = roleId => {
+  return RolePriorities[roleId] ?? 0
+}
+
+export const getRoleColour = roleId => {
+  return RoleColours[roleId] ?? "rgb(20, 115, 230)"
+}