Merge remote-tracking branch 'origin/develop' into feature/automation-log-filter-by-license

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.1.32-alpha.1",
+  "version": "1.1.33-alpha.4",
   "npmClient": "yarn",
   "packages": [
     "packages/*"

packages/backend-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/backend-core",
-  "version": "1.1.32-alpha.1",
+  "version": "1.1.33-alpha.4",
   "description": "Budibase backend core libraries used in server and worker",
   "main": "dist/src/index.js",
   "types": "dist/src/index.d.ts",
@@ -20,13 +20,14 @@
     "test:watch": "jest --watchAll"
   },
   "dependencies": {
-    "@budibase/types": "1.1.32-alpha.1",
+    "@budibase/types": "1.1.33-alpha.4",
     "@techpass/passport-openidconnect": "0.3.2",
     "aws-sdk": "2.1030.0",
     "bcrypt": "5.0.1",
     "dotenv": "16.0.1",
     "emitter-listener": "1.1.2",
     "ioredis": "4.28.0",
+    "joi": "17.6.0",
     "jsonwebtoken": "8.5.1",
     "koa-passport": "4.1.4",
     "lodash": "4.17.21",

packages/backend-core/src/events/processors/PosthogProcessor.ts

@@ -5,6 +5,22 @@ import env from "../../environment"
 import * as context from "../../context"
 const pkg = require("../../../package.json")
 
+const EXCLUDED_EVENTS: Event[] = [
+  Event.USER_UPDATED,
+  Event.EMAIL_SMTP_UPDATED,
+  Event.AUTH_SSO_UPDATED,
+  Event.APP_UPDATED,
+  Event.ROLE_UPDATED,
+  Event.DATASOURCE_UPDATED,
+  Event.QUERY_UPDATED,
+  Event.TABLE_UPDATED,
+  Event.VIEW_UPDATED,
+  Event.VIEW_FILTER_UPDATED,
+  Event.VIEW_CALCULATION_UPDATED,
+  Event.AUTOMATION_TRIGGER_UPDATED,
+  Event.USER_GROUP_UPDATED,
+]
+
 export default class PosthogProcessor implements EventProcessor {
   posthog: PostHog
 
@@ -21,6 +37,11 @@ export default class PosthogProcessor implements EventProcessor {
     properties: BaseEvent,
     timestamp?: string | number
   ): Promise<void> {
+    // don't send excluded events
+    if (EXCLUDED_EVENTS.includes(event)) {
+      return
+    }
+
     properties.version = pkg.version
     properties.service = env.SERVICE
     properties.environment = identity.environment

packages/backend-core/src/events/processors/tests/PosthogProcessor.spec.ts

@@ -0,0 +1,40 @@
+import PosthogProcessor from "../PosthogProcessor"
+import { Event, IdentityType, Hosting } from "@budibase/types"
+
+const newIdentity = () => {
+  return {
+    id: "test",
+    type: IdentityType.USER,
+    hosting: Hosting.SELF,
+    environment: "test",
+  }
+}
+
+describe("PosthogProcessor", () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe("processEvent", () => {
+    it("processes event", () => {
+      const processor = new PosthogProcessor("test")
+
+      const identity = newIdentity()
+      const properties = {}
+
+      processor.processEvent(Event.APP_CREATED, identity, properties)
+
+      expect(processor.posthog.capture).toHaveBeenCalledTimes(1)
+    })
+
+    it("honours exclusions", () => {
+      const processor = new PosthogProcessor("test")
+
+      const identity = newIdentity()
+      const properties = {}
+
+      processor.processEvent(Event.AUTH_SSO_UPDATED, identity, properties)
+      expect(processor.posthog.capture).toHaveBeenCalledTimes(0)
+    })
+  })
+})

packages/backend-core/src/events/publishers/license.ts

@@ -20,12 +20,6 @@ export async function downgraded(license: License) {
   await publishEvent(Event.LICENSE_DOWNGRADED, properties)
 }
 
-// TODO
-export async function updated(license: License) {
-  const properties: LicenseUpdatedEvent = {}
-  await publishEvent(Event.LICENSE_UPDATED, properties)
-}
-
 // TODO
 export async function activated(license: License) {
   const properties: LicenseActivatedEvent = {}

packages/backend-core/src/featureFlags/index.js

@@ -50,4 +50,5 @@ exports.getTenantFeatureFlags = tenantId => {
 exports.FeatureFlag = {
   LICENSING: "LICENSING",
   GOOGLE_SHEETS: "GOOGLE_SHEETS",
+  USER_GROUPS: "USER_GROUPS",
 }

packages/backend-core/src/middleware/joi-validator.js

@@ -1,3 +1,5 @@
+const Joi = require("joi")
+
 function validate(schema, property) {
   // Return a Koa middleware function
   return (ctx, next) => {
@@ -10,6 +12,12 @@ function validate(schema, property) {
     } else if (ctx.request[property] != null) {
       params = ctx.request[property]
     }
+
+    schema = schema.append({
+      createdAt: Joi.any().optional(),
+      updatedAt: Joi.any().optional(),
+    })
+
     const { error } = schema.validate(params)
     if (error) {
       ctx.throw(400, `Invalid ${property} - ${error.message}`)

packages/backend-core/tests/utilities/mocks/index.js

@@ -1,7 +1,9 @@
+const posthog = require("./posthog")
 const events = require("./events")
 const date = require("./date")
 
 module.exports = {
+  posthog,
   date,
   events,
 }

packages/backend-core/tests/utilities/mocks/posthog.ts

@@ -0,0 +1,7 @@
+jest.mock("posthog-node", () => {
+  return jest.fn().mockImplementation(() => {
+    return {
+      capture: jest.fn(),
+    }
+  })
+})

packages/backend-core/yarn.lock

@@ -291,6 +291,18 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
+"@hapi/hoek@^9.0.0":
+  version "9.3.0"
+  resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.3.0.tgz#8368869dcb735be2e7f5cb7647de78e167a251fb"
+  integrity sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ==
+
+"@hapi/topo@^5.0.0":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@hapi/topo/-/topo-5.1.0.tgz#dc448e332c6c6e37a4dc02fd84ba8d44b9afb012"
+  integrity sha512-foQZKJig7Ob0BMAYBfcJk8d77QtOe7Wo4ox7ff1lQYoNNAb6jwcY1ncdoy2e9wQZzvNy7ODZCYJkK8kzmcAnAg==
+  dependencies:
+    "@hapi/hoek" "^9.0.0"
+
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
@@ -539,6 +551,23 @@
     koa "^2.13.4"
     node-mocks-http "^1.5.8"
 
+"@sideway/address@^4.1.3":
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/@sideway/address/-/address-4.1.4.tgz#03dccebc6ea47fdc226f7d3d1ad512955d4783f0"
+  integrity sha512-7vwq+rOHVWjyXxVlR76Agnvhy8I9rpzjosTESvmhNeXOXdZZB15Fl+TI9x1SiHZH5Jv2wTGduSxFDIaq0m3DUw==
+  dependencies:
+    "@hapi/hoek" "^9.0.0"
+
+"@sideway/formula@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@sideway/formula/-/formula-3.0.0.tgz#fe158aee32e6bd5de85044be615bc08478a0a13c"
+  integrity sha512-vHe7wZ4NOXVfkoRb8T5otiENVlT7a3IAiw7H5M2+GO+9CDgcVUUsX1zalAztCmwyOr2RUTGJdgB+ZvSVqmdHmg==
+
+"@sideway/pinpoint@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@sideway/pinpoint/-/pinpoint-2.0.0.tgz#cff8ffadc372ad29fd3f78277aeb29e632cc70df"
+  integrity sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==
+
 "@sindresorhus/is@^0.14.0":
   version "0.14.0"
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.14.0.tgz#9fb3a3cf3132328151f353de4632e01e52102bea"
@@ -3193,6 +3222,17 @@ jmespath@0.15.0:
   resolved "https://registry.yarnpkg.com/jmespath/-/jmespath-0.15.0.tgz#a3f222a9aae9f966f5d27c796510e28091764217"
   integrity sha512-+kHj8HXArPfpPEKGLZ+kB5ONRTCiGQXo8RQYL0hH8t6pWXUBBK5KkkQmTNOwKK4LEsd0yTsgtjJVm4UBSZea4w==
 
+joi@17.6.0:
+  version "17.6.0"
+  resolved "https://registry.yarnpkg.com/joi/-/joi-17.6.0.tgz#0bb54f2f006c09a96e75ce687957bd04290054b2"
+  integrity sha512-OX5dG6DTbcr/kbMFj0KGYxuew69HPcAE3K/sZpEV2nP6e/j/C0HV+HNiBPCASxdx5T7DMoa0s8UeHWMnb6n2zw==
+  dependencies:
+    "@hapi/hoek" "^9.0.0"
+    "@hapi/topo" "^5.0.0"
+    "@sideway/address" "^4.1.3"
+    "@sideway/formula" "^3.0.0"
+    "@sideway/pinpoint" "^2.0.0"
+
 join-component@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/join-component/-/join-component-1.1.0.tgz#b8417b750661a392bee2c2537c68b2a9d4977cd5"

packages/bbui/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "1.1.32-alpha.1",
+  "version": "1.1.33-alpha.4",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
@@ -38,7 +38,7 @@
   ],
   "dependencies": {
     "@adobe/spectrum-css-workflow-icons": "^1.2.1",
-    "@budibase/string-templates": "1.1.32-alpha.1",
+    "@budibase/string-templates": "1.1.33-alpha.4",
     "@spectrum-css/actionbutton": "^1.0.1",
     "@spectrum-css/actiongroup": "^1.0.1",
     "@spectrum-css/avatar": "^3.0.2",

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

@@ -115,6 +115,16 @@
     class:is-disabled={disabled}
     class:is-focused={focus}
   >
+    {#if error}
+      <svg
+        class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
+        focusable="false"
+        aria-hidden="true"
+      >
+        <use xlink:href="#spectrum-icon-18-Alert" />
+      </svg>
+    {/if}
+
     <input
       {id}
       on:click

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

@@ -8,6 +8,7 @@
   import Icon from "../../Icon/Icon.svelte"
   import StatusLight from "../../StatusLight/StatusLight.svelte"
   import Detail from "../../Typography/Detail.svelte"
+  import Search from "./Search.svelte"
 
   export let primaryLabel = ""
   export let primaryValue = null
@@ -22,7 +23,6 @@
   export let secondaryFieldText = ""
   export let secondaryFieldIcon = ""
   export let secondaryFieldColour = ""
-  export let getPrimaryOptionLabel = option => option
   export let getPrimaryOptionValue = option => option
   export let getPrimaryOptionColour = () => null
   export let getPrimaryOptionIcon = () => null
@@ -43,17 +43,12 @@
   let searchTerm = null
 
   $: groupTitles = Object.keys(primaryOptions)
-  $: filteredOptions = getFilteredOptions(
-    primaryOptions,
-    searchTerm,
-    getPrimaryOptionLabel
-  )
   let iconData
-  /*
+
-  $: iconData = primaryOptions?.find(x => {
+  const updateSearch = e => {
-    return x.name === primaryFieldText
+    dispatch("search", e.detail)
-  })
+  }
-  */
+
   const updateValue = newValue => {
     if (readonly) {
       return
@@ -107,16 +102,6 @@
       updateValue(event.target.value)
     }
   }
-
-  const getFilteredOptions = (options, term, getLabel) => {
-    if (autocomplete && term) {
-      const lowerCaseTerm = term.toLowerCase()
-      return options.filter(option => {
-        return `${getLabel(option)}`.toLowerCase().includes(lowerCaseTerm)
-      })
-    }
-    return options
-  }
 </script>
 
 <div
@@ -183,6 +168,15 @@
       class:auto-width={autoWidth}
       class:is-full-width={!secondaryOptions.length}
     >
+      {#if autocomplete}
+        <Search
+          value={searchTerm}
+          on:change={event => updateSearch(event)}
+          {disabled}
+          placeholder="Search"
+        />
+      {/if}
+
       <ul class="spectrum-Menu" role="listbox">
         {#if placeholderOption}
           <li
@@ -239,7 +233,10 @@
                   </div>
                 {:else if getPrimaryOptionColour(option, idx)}
                   <span class="option-left">
-                    <StatusLight color={getPrimaryOptionColour(option, idx)} />
+                    <StatusLight
+                      square
+                      color={getPrimaryOptionColour(option, idx)}
+                    />
                   </span>
                 {/if}
                 <span class="spectrum-Menu-itemLabel">
@@ -259,6 +256,7 @@
                   {#if getPrimaryOptionIcon(option, idx) && getPrimaryOptionColour(option, idx)}
                     <span class="option-right">
                       <StatusLight
+                        square
                         color={getPrimaryOptionColour(option, idx)}
                       />
                     </span>
@@ -287,7 +285,7 @@
           </span>
         {:else if secondaryFieldColour}
           <span class="option-left">
-            <StatusLight color={secondaryFieldColour} />
+            <StatusLight square color={secondaryFieldColour} />
           </span>
         {/if}
 
@@ -325,6 +323,7 @@
                 {#if getSecondaryOptionColour(option, idx)}
                   <span class="option-left">
                     <StatusLight
+                      square
                       color={getSecondaryOptionColour(option, idx)}
                     />
                   </span>
@@ -357,6 +356,13 @@
     min-width: 0;
     width: 100%;
   }
+  .spectrum-InputGroup :global(.spectrum-Search-input) {
+    border: none;
+    border-bottom: 1px solid var(--spectrum-global-color-gray-300);
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
   .override-borders {
     border-top-left-radius: 0px;
     border-bottom-left-radius: 0px;

packages/bbui/src/Form/PickerDropdown.svelte

@@ -26,6 +26,7 @@
   export let autofocus
   export let primaryOptions = []
   export let secondaryOptions = []
+  export let searchTerm
 
   let primaryLabel
   let secondaryLabel
@@ -87,10 +88,15 @@
     }
     return value
   }
+
+  const updateSearchTerm = e => {
+    searchTerm = e.detail
+  }
 </script>
 
 <Field {label} {labelPosition} {error}>
   <PickerDropdown
+    {searchTerm}
     {autocomplete}
     {dataCy}
     {updateOnChange}
@@ -116,6 +122,7 @@
     {secondaryLabel}
     on:pickprimary={onPickPrimary}
     on:picksecondary={onPickSecondary}
+    on:search={updateSearchTerm}
     on:click
     on:input
     on:blur

packages/builder/cypress/integration/autoScreensUI.spec.js

@@ -10,10 +10,8 @@ filterTests(['smoke', 'all'], () => {
 
     it("should disable the autogenerated screen options if no sources are available", () => {
       cy.createApp("First Test App", false)
-      
       cy.closeModal();
 
-      cy.contains("Design").click()
       cy.navigateToAutogeneratedModal()
       cy.get(interact.CONFIRM_WRAP_SPE_BUTTON).should('be.disabled')
 

packages/builder/cypress/integration/datasources/mySql.spec.js

@@ -179,7 +179,7 @@ filterTests(["all"], () => {
         cy.get(".nav-item").should("contain", queryName)
       })
 
-      xit("should duplicate a query", () => {
+      it("should duplicate a query", () => {
         /// Get query nav item - QueryName
         cy.get(".nav-item")
           .contains(queryName)

packages/builder/cypress/integration/datasources/postgreSql.spec.js

@@ -204,7 +204,7 @@ filterTests(["all"], () => {
         cy.get(".spectrum-Table").eq(1).should("contain", queryName)
       })
 
-      xit("should duplicate a query", () => {
+      it("should duplicate a query", () => {
         // Locate previously created query
         cy.get(".nav-item")
           .contains(queryName)

packages/builder/cypress/integration/queryLevelTransformers.spec.js

@@ -2,7 +2,7 @@ import filterTests from "../support/filterTests"
 const interact = require('../support/interact')
 
 filterTests(["smoke", "all"], () => {
-  xcontext("Query Level Transformers", () => {
+  context("Query Level Transformers", () => {
     before(() => {
       cy.login()
       cy.createTestApp()

packages/builder/cypress/support/commands.js

@@ -543,15 +543,22 @@ Cypress.Commands.add("addCustomSourceOptions", totalOptions => {
 // DESIGN SECTION
 Cypress.Commands.add("searchAndAddComponent", component => {
   // Open component menu
-  cy.get(".spectrum-Button").contains("Component").click({ force: true })
+  cy.get(".icon-side-nav").within(() => {
+    cy.get(".icon-side-nav-item").eq(1).click()
+  })
+  cy.get(".add-component > .spectrum-Button")
+    .contains("Add component")
+    .click({ force: true })
+  cy.get(".container", { timeout: 1000 }).within(() => {
+    cy.get(".title").should("contain", "Add component")
 
-  // Search and add component
+    // Search and add component
-  cy.wait(500)
+    cy.get(".spectrum-Textfield-input").clear().type(component)
-  cy.get(".spectrum-Textfield-input").clear().type(component)
+    cy.get(".body").within(() => {
-  cy.get(".body").within(() => {
+      cy.get(".component")
-    cy.get(".component")
+        .contains(new RegExp("^" + component + "$"), { timeout: 3000 })
-      .contains(new RegExp("^" + component + "$"), { timeout: 3000 })
+        .click({ force: true })
-      .click({ force: true })
+    })
   })
   cy.wait(1000)
   cy.location().then(loc => {
@@ -597,7 +604,7 @@ Cypress.Commands.add("getComponent", componentId => {
 Cypress.Commands.add("createScreen", (route, accessLevelLabel) => {
   // Blank Screen
   cy.contains("Design").click()
-  cy.get(".header > .add-button").click()
+  cy.get(".spectrum-Button").contains("Add screen").click({ force: true })
   cy.get(".spectrum-Modal").within(() => {
     cy.get("[data-cy='blank-screen']").click()
     cy.get(".spectrum-Button").contains("Continue").click({ force: true })
@@ -622,7 +629,7 @@ Cypress.Commands.add(
   "createDatasourceScreen",
   (datasourceNames, accessLevelLabel) => {
     cy.contains("Design").click()
-    cy.get(".header > .add-button").click()
+    cy.get(".spectrum-Button").contains("Add screen").click({ force: true })
     cy.get(".spectrum-Modal").within(() => {
       cy.get(".item").contains("Autogenerated screens").click()
       cy.get(".spectrum-Button").contains("Continue").click({ force: true })
@@ -742,7 +749,7 @@ Cypress.Commands.add("navigateToDataSection", () => {
 Cypress.Commands.add("navigateToAutogeneratedModal", () => {
   // Screen name must already exist within data source
   cy.contains("Design").click()
-  cy.get(".header > .add-button").click()
+  cy.get(".spectrum-Button").contains("Add screen").click({ force: true })
   cy.get(".spectrum-Modal").within(() => {
     cy.get(".item", { timeout: 2000 })
       .contains("Autogenerated screens")

packages/builder/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/builder",
-  "version": "1.1.32-alpha.1",
+  "version": "1.1.33-alpha.4",
   "license": "GPL-3.0",
   "private": true,
   "scripts": {
@@ -69,10 +69,10 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "1.1.32-alpha.1",
+    "@budibase/bbui": "1.1.33-alpha.4",
-    "@budibase/client": "1.1.32-alpha.1",
+    "@budibase/client": "1.1.33-alpha.4",
-    "@budibase/frontend-core": "1.1.32-alpha.1",
+    "@budibase/frontend-core": "1.1.33-alpha.4",
-    "@budibase/string-templates": "1.1.32-alpha.1",
+    "@budibase/string-templates": "1.1.33-alpha.4",
     "@sentry/browser": "5.19.1",
     "@spectrum-css/page": "^3.0.1",
     "@spectrum-css/vars": "^3.0.1",

packages/builder/src/analytics/PosthogClient.js

@@ -1,5 +1,7 @@
 import posthog from "posthog-js"
 import { Events } from "./constants"
+import { get } from "svelte/store"
+import { admin } from "../stores/portal"
 
 export default class PosthogClient {
   constructor(token) {
@@ -9,9 +11,15 @@ export default class PosthogClient {
   init() {
     if (!this.token) return
 
+    // enable page views in cloud only
+    let capturePageViews = false
+    if (get(admin).cloud) {
+      capturePageViews = true
+    }
+
     posthog.init(this.token, {
       autocapture: false,
-      capture_pageview: true,
+      capture_pageview: capturePageViews,
     })
     posthog.set_config({ persistence: "cookie" })
 

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

@@ -6,6 +6,8 @@
     Modal,
     notifications,
     ProgressCircle,
+    Layout,
+    Body,
   } from "@budibase/bbui"
   import { auth, apps } from "stores/portal"
   import { processStringSync } from "@budibase/string-templates"
@@ -72,62 +74,67 @@
   {/if}
 </div>
 
-<Modal bind:this={appLockModal}>
+{#key app}
-  <ModalContent
+  <div>
-    title={lockedByHeading}
+    <Modal bind:this={appLockModal}>
-    dataCy={"app-lock-modal"}
+      <ModalContent
-    showConfirmButton={false}
+        title={lockedByHeading}
-    showCancelButton={false}
+        dataCy={"app-lock-modal"}
-  >
+        showConfirmButton={false}
-    <p>
+        showCancelButton={false}
-      Apps are locked to prevent work from being lost from overlapping changes
+      >
-      between your team.
+        <Layout noPadding>
-    </p>
+          <Body size="S">
-
+            Apps are locked to prevent work from being lost from overlapping
-    {#if lockedByYou && getExpiryDuration(app) > 0}
+            changes between your team.
-      <span class="lock-expiry-body">
+          </Body>
-        {processStringSync(
+          {#if lockedByYou && getExpiryDuration(app) > 0}
-          "This lock will expire in {{ duration time 'millisecond' }} from now.",
+            <span class="lock-expiry-body">
-          {
+              {processStringSync(
-            time: getExpiryDuration(app),
+                "This lock will expire in {{ duration time 'millisecond' }} from now. This lock will expire in This lock will expire in ",
-          }
+                {
-        )}
+                  time: getExpiryDuration(app),
-      </span>
+                }
-    {/if}
+              )}
-    <div class="lock-modal-actions">
+            </span>
-      <ButtonGroup>
+          {/if}
-        <Button
+          <div class="lock-modal-actions">
-          secondary
+            <ButtonGroup>
-          quiet={lockedBy && lockedByYou}
+              <Button
-          disabled={processing}
+                secondary
-          on:click={() => {
+                quiet={lockedBy && lockedByYou}
-            appLockModal.hide()
+                disabled={processing}
-          }}
+                on:click={() => {
-        >
+                  appLockModal.hide()
-          <span class="cancel"
+                }}
-            >{lockedBy && !lockedByYou ? "Done" : "Cancel"}</span
+              >
-          >
+                <span class="cancel"
-        </Button>
+                  >{lockedBy && !lockedByYou ? "Done" : "Cancel"}</span
-        {#if lockedByYou}
+                >
-          <Button
+              </Button>
-            secondary
+              {#if lockedByYou}
-            disabled={processing}
+                <Button
-            on:click={() => {
+                  secondary
-              releaseLock()
+                  disabled={processing}
-              appLockModal.hide()
+                  on:click={() => {
-            }}
+                    releaseLock()
-          >
+                    appLockModal.hide()
-            {#if processing}
+                  }}
-              <ProgressCircle overBackground={true} size="S" />
+                >
-            {:else}
+                  {#if processing}
-              <span class="unlock">Release Lock</span>
+                    <ProgressCircle overBackground={true} size="S" />
-            {/if}
+                  {:else}
-          </Button>
+                    <span class="unlock">Release Lock</span>
-        {/if}
+                  {/if}
-      </ButtonGroup>
+                </Button>
-    </div>
+              {/if}
-  </ModalContent>
+            </ButtonGroup>
-</Modal>
+          </div>
+        </Layout>
+      </ModalContent>
+    </Modal>
+  </div>
+{/key}
 
 <style>
   .lock-modal-actions {

packages/builder/src/components/start/AppRow.svelte

@@ -30,7 +30,7 @@
   {/if}
 </div>
 <div class="desktop">
-  <AppLockModal {app} buttonSize="M" />
+  <span><AppLockModal {app} buttonSize="M" /></span>
 </div>
 <div class="desktop">
   <div class="app-status">

packages/builder/src/helpers/featureFlags.js

@@ -3,6 +3,7 @@ import { get } from "svelte/store"
 
 export const FEATURE_FLAGS = {
   LICENSING: "LICENSING",
+  USER_GROUPS: "USER_GROUPS",
 }
 
 export const isEnabled = featureFlag => {

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte

@@ -186,7 +186,7 @@
           $goto("./navigation")
         }
       } else if (type === "request-add-component") {
-        $goto("./components/new")
+        $goto(`./components/${$selectedComponent?._id}/new`)
       } else if (type === "highlight-setting") {
         store.actions.settings.highlight(data.setting)
 

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte

@@ -184,6 +184,7 @@
               <div class="category-label">{category.name}</div>
               {#each category.children as component}
                 <div
+                  data-cy={`component-${component.name}`}
                   class="component"
                   class:selected={selectedIndex ===
                     orderMap[component.component]}

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

@@ -45,6 +45,7 @@
         },
       ])
     }
+
     if (admin) {
       menu = menu.concat([
         {
@@ -52,11 +53,6 @@
           href: "/builder/portal/manage/users",
           heading: "Manage",
         },
-        {
-          title: "User Groups",
-          href: "/builder/portal/manage/groups",
-        },
-
         { title: "Auth", href: "/builder/portal/manage/auth" },
         { title: "Email", href: "/builder/portal/manage/email" },
         {
@@ -70,6 +66,15 @@
         },
       ])
 
+      if (isEnabled(FEATURE_FLAGS.USER_GROUPS)) {
+        let item = {
+          title: "User Groups",
+          href: "/builder/portal/manage/groups",
+        }
+
+        menu.splice(2, 0, item)
+      }
+
       if (!$adminStore.cloud) {
         menu = menu.concat([
           {

packages/builder/src/pages/builder/portal/manage/groups/[groupId].svelte

@@ -18,23 +18,44 @@
   import { users, apps, groups } from "stores/portal"
   import { onMount } from "svelte"
   import { RoleUtils } from "@budibase/frontend-core"
+  import { roles } from "stores/backend"
 
   export let groupId
+
   let popoverAnchor
   let popover
   let searchTerm = ""
   let selectedUsers = []
-  let prevSearch = undefined,
+  let prevSearch = undefined
-    search = undefined
   let pageInfo = createPaginationStore()
+  let loaded = false
 
   $: page = $pageInfo.page
-  $: fetchUsers(page, search)
+  $: fetchUsers(page, searchTerm)
   $: group = $groups.find(x => x._id === groupId)
 
   async function addAll() {
-    group.users = selectedUsers
+    selectedUsers = [...selectedUsers, ...filtered.map(u => u._id)]
+
+    let reducedUserObjects = filtered.map(u => {
+      return {
+        _id: u._id,
+        email: u.email,
+      }
+    })
+    group.users = [...reducedUserObjects, ...group.users]
+
     await groups.actions.save(group)
+
+    $users.data.forEach(async user => {
+      let userToEdit = await users.get(user._id)
+      let userGroups = userToEdit.userGroups || []
+      userGroups.push(groupId)
+      await users.save({
+        ...userToEdit,
+        userGroups,
+      })
+    })
   }
 
   async function selectUser(id) {
@@ -97,106 +118,119 @@
     prevSearch = search
     try {
       pageInfo.loading()
-      await users.search({ page, search })
+      await users.search({ page, email: search })
       pageInfo.fetched($users.hasNextPage, $users.nextPage)
     } catch (error) {
       notifications.error("Error getting user list")
     }
   }
 
+  const getRoleLabel = appId => {
+    const roleId = group?.roles?.[`app_${appId}`]
+    const role = $roles.find(x => x._id === roleId)
+    return role?.name || "Custom role"
+  }
+
   onMount(async () => {
     try {
-      await groups.actions.init()
+      await Promise.all([groups.actions.init(), apps.load(), roles.fetch()])
-      await apps.load()
+      loaded = true
     } catch (error) {
-      notifications.error("Error fetching User Group data")
+      notifications.error("Error fetching user group data")
     }
   })
 </script>
 
-<Layout noPadding>
+{#if loaded}
-  <div>
+  <Layout noPadding>
-    <ActionButton on:click={() => $goto("../groups")} size="S" icon="ArrowLeft">
+    <div>
-      Back
+      <ActionButton
-    </ActionButton>
+        on:click={() => $goto("../groups")}
-  </div>
+        size="S"
-  <div class="header">
+        icon="ArrowLeft"
-    <div class="title">
+      >
-      <div style="background: {group?.color};" class="circle">
+        Back
-        <div>
+      </ActionButton>
-          <Icon size="M" name={group?.icon} />
+    </div>
+    <div class="header">
+      <div class="title">
+        <div style="background: {group?.color};" class="circle">
+          <div>
+            <Icon size="M" name={group?.icon} />
+          </div>
+        </div>
+        <div class="text-padding">
+          <Heading>{group?.name}</Heading>
         </div>
       </div>
-      <div class="text-padding">
+      <div bind:this={popoverAnchor}>
-        <Heading>{group?.name}</Heading>
+        <Button on:click={popover.show()} icon="UserAdd" cta>Add user</Button>
+      </div>
+      <Popover align="right" bind:this={popover} anchor={popoverAnchor}>
+        <UserGroupPicker
+          key={"email"}
+          title={"User"}
+          bind:searchTerm
+          bind:selected={selectedUsers}
+          bind:filtered
+          {addAll}
+          select={selectUser}
+        />
+      </Popover>
+    </div>
+
+    <List>
+      {#if group?.users.length}
+        {#each group.users as user}
+          <ListItem title={user?.email} avatar
+            ><Icon
+              on:click={() => removeUser(user?._id)}
+              hoverable
+              size="L"
+              name="Close"
+            /></ListItem
+          >
+        {/each}
+      {:else}
+        <ListItem icon="UserGroup" title="You have no users in this team" />
+      {/if}
+    </List>
+    <div
+      style="flex-direction: column; margin-top: var(--spacing-m)"
+      class="title"
+    >
+      <Heading weight="light" size="XS">Apps</Heading>
+      <div style="margin-top: var(--spacing-xs)">
+        <Body size="S"
+          >Manage apps that this User group has been assigned to</Body
+        >
       </div>
     </div>
-    <div bind:this={popoverAnchor}>
-      <Button on:click={popover.show()} icon="UserAdd" cta>Add User</Button>
-    </div>
-    <Popover align="right" bind:this={popover} anchor={popoverAnchor}>
-      <UserGroupPicker
-        key={"email"}
-        title={"User"}
-        bind:searchTerm
-        bind:selected={selectedUsers}
-        bind:filtered
-        {addAll}
-        select={selectUser}
-      />
-    </Popover>
-  </div>
 
-  <List>
+    <List>
-    {#if group?.users.length}
+      {#if groupApps.length}
-      {#each group.users as user}
+        {#each groupApps as app}
-        <ListItem title={user?.email} avatar
+          <ListItem
-          ><Icon
+            title={app.name}
-            on:click={() => removeUser(user?._id)}
+            icon={app?.icon?.name || "Apps"}
-            hoverable
+            iconBackground={app?.icon?.color || ""}
-            size="L"
+          >
-            name="Close"
+            <div class="title ">
-          /></ListItem
+              <StatusLight
-        >
+                square
-      {/each}
+                color={RoleUtils.getRoleColour(group.roles[`app_${app.appId}`])}
-    {:else}
+              >
-      <ListItem icon="UserGroup" title="You have no users in this team" />
+                {getRoleLabel(app.appId)}
-    {/if}
+              </StatusLight>
-  </List>
-  <div
-    style="flex-direction: column; margin-top: var(--spacing-m)"
-    class="title"
-  >
-    <Heading weight="light" size="XS">Apps</Heading>
-    <div style="margin-top: var(--spacing-xs)">
-      <Body size="S">Manage apps that this User group has been assigned to</Body
-      >
-    </div>
-  </div>
-
-  <List>
-    {#if groupApps.length}
-      {#each groupApps as app}
-        <ListItem
-          title={app.name}
-          icon={app?.icon?.name || "Apps"}
-          iconBackground={app?.icon?.color || ""}
-        >
-          <div class="title ">
-            <StatusLight
-              color={RoleUtils.getRoleColour(group.roles[app.appId])}
-            />
-            <div style="margin-left: var(--spacing-s);">
-              <Body size="XS">{group.roles[app.appId]}</Body>
             </div>
-          </div>
+          </ListItem>
-        </ListItem>
+        {/each}
-      {/each}
+      {:else}
-    {:else}
+        <ListItem icon="UserGroup" title="No apps" />
-      <ListItem icon="UserGroup" title="No apps" />
+      {/if}
-    {/if}
+    </List>
-  </List>
+  </Layout>
-</Layout>
+{/if}
 
 <style>
   .text-padding {

packages/builder/src/pages/builder/portal/manage/groups/index.svelte

@@ -14,13 +14,9 @@
   import { Constants } from "@budibase/frontend-core"
   import CreateEditGroupModal from "./_components/CreateEditGroupModal.svelte"
   import UserGroupsRow from "./_components/UserGroupsRow.svelte"
+  import { cloneDeep } from "lodash/fp"
 
-  $: hasGroupsLicense = $auth.user?.license.features.includes(
+  const DefaultGroup = {
-    Constants.Features.USER_GROUPS
-  )
-
-  let modal
-  let group = {
     name: "",
     icon: "UserGroup",
     color: "var(--spectrum-global-color-blue-600)",
@@ -28,6 +24,12 @@
     apps: [],
     roles: {},
   }
+  let modal
+  let group = cloneDeep(DefaultGroup)
+
+  $: hasGroupsLicense = $auth.user?.license.features.includes(
+    Constants.Features.USER_GROUPS
+  )
 
   async function deleteGroup(group) {
     try {
@@ -45,6 +47,11 @@
     }
   }
 
+  const showCreateGroupModal = () => {
+    group = cloneDeep(DefaultGroup)
+    modal?.show()
+  }
+
   onMount(async () => {
     try {
       if (hasGroupsLicense) {
@@ -78,10 +85,11 @@
       icon={hasGroupsLicense ? "UserGroup" : ""}
       cta={hasGroupsLicense}
       on:click={hasGroupsLicense
-        ? () => modal.show()
+        ? showCreateGroupModal
         : window.open("https://budibase.com/pricing/", "_blank")}
-      >{hasGroupsLicense ? "Create user group" : "Upgrade Account"}</Button
     >
+      {hasGroupsLicense ? "Create user group" : "Upgrade Account"}
+    </Button>
     {#if !hasGroupsLicense}
       <Button
         newStyles
@@ -130,7 +138,7 @@
   .groupTable :global(> div) {
     background: var(--bg-color);
 
-    height: 70px;
+    height: 55px;
     display: grid;
     align-items: center;
     grid-gap: var(--spacing-xl);

packages/builder/src/pages/builder/portal/manage/users/[userId].svelte

@@ -21,9 +21,9 @@
     StatusLight,
   } from "@budibase/bbui"
   import { onMount } from "svelte"
-
   import { fetchData } from "helpers"
   import { users, auth, groups, apps } from "stores/portal"
+  import { roles } from "stores/backend"
   import { Constants } from "@budibase/frontend-core"
   import ForceResetPasswordModal from "./_components/ForceResetPasswordModal.svelte"
   import { RoleUtils } from "@budibase/frontend-core"
@@ -40,10 +40,18 @@
   let selectedGroups = []
   let allAppList = []
   let user
+  let loaded = false
   $: fetchUser(userId)
+
+  $: fullName = $userFetch?.data?.firstName
+    ? $userFetch?.data?.firstName + " " + $userFetch?.data?.lastName
+    : ""
+
   $: hasGroupsLicense = $auth.user?.license.features.includes(
     Constants.Features.USER_GROUPS
   )
+  $: nameLabel = getNameLabel($userFetch)
+  $: initials = getInitials(nameLabel)
 
   $: allAppList = $apps
     .filter(x => {
@@ -86,6 +94,39 @@
 
   const userFetch = fetchData(`/api/global/users/${userId}`)
 
+  const getNameLabel = userFetch => {
+    const { firstName, lastName, email } = userFetch?.data || {}
+    if (!firstName && !lastName) {
+      return email || ""
+    }
+    let label
+    if (firstName) {
+      label = firstName
+      if (lastName) {
+        label += ` ${lastName}`
+      }
+    } else {
+      label = lastName
+    }
+    return label
+  }
+
+  const getInitials = nameLabel => {
+    if (!nameLabel) {
+      return "?"
+    }
+    return nameLabel
+      .split(" ")
+      .slice(0, 2)
+      .map(x => x[0])
+      .join("")
+  }
+
+  const getRoleLabel = roleId => {
+    const role = $roles.find(x => x._id === roleId)
+    return role?.name || "Custom role"
+  }
+
   function getHighestRole(roles) {
     let highestRole
     let highestRoleNumber = 0
@@ -127,7 +168,7 @@
     if (detail === "developer") {
       toggleFlags({ admin: { global: false }, builder: { global: true } })
     } else if (detail === "admin") {
-      toggleFlags({ admin: { global: true }, builder: { global: false } })
+      toggleFlags({ admin: { global: true }, builder: { global: true } })
     } else if (detail === "appUser") {
       toggleFlags({ admin: { global: false }, builder: { global: false } })
     }
@@ -166,166 +207,168 @@
   function addAll() {}
   onMount(async () => {
     try {
-      await groups.actions.init()
+      await Promise.all([groups.actions.init(), apps.load(), roles.fetch()])
-      await apps.load()
+      loaded = true
     } catch (error) {
-      notifications.error("Error getting User groups")
+      notifications.error("Error getting user groups")
     }
   })
 </script>
 
-<Layout gap="L" noPadding>
+{#if loaded}
-  <Layout gap="XS" noPadding>
+  <Layout gap="L" noPadding>
-    <div>
+    <Layout gap="XS" noPadding>
-      <ActionButton on:click={() => $goto("./")} size="S" icon="ArrowLeft">
-        Back
-      </ActionButton>
-    </div>
-  </Layout>
-  <Layout gap="XS" noPadding>
-    <div class="title">
       <div>
-        <div style="display: flex;">
+        <ActionButton on:click={() => $goto("./")} size="S" icon="ArrowLeft">
-          <Avatar size="XXL" initials="PC" />
+          Back
-          <div class="subtitle">
+        </ActionButton>
-            <Heading size="S"
+      </div>
-              >{$userFetch?.data?.firstName +
+    </Layout>
-                " " +
+    <Layout gap="XS" noPadding>
-                $userFetch?.data?.lastName}</Heading
+      <div class="title">
-            >
+        <div>
-            <Body size="XS">{$userFetch?.data?.email}</Body>
+          <div style="display: flex;">
+            <Avatar size="XXL" {initials} />
+            <div class="subtitle">
+              <Heading size="S">{nameLabel}</Heading>
+              {#if nameLabel !== $userFetch?.data?.email}
+                <Body size="XS">{$userFetch?.data?.email}</Body>
+              {/if}
+            </div>
           </div>
         </div>
-      </div>
-      <div>
-        <ActionMenu align="right">
-          <span slot="control">
-            <Icon hoverable name="More" />
-          </span>
-          <MenuItem on:click={resetPasswordModal.show} icon="Refresh"
-            >Force Password Reset</MenuItem
-          >
-          <MenuItem on:click={deleteModal.show} icon="Delete">Delete</MenuItem>
-        </ActionMenu>
-      </div>
-    </div>
-  </Layout>
-  <Layout gap="S" noPadding>
-    <div class="fields">
-      <div class="field">
-        <Label size="L">First name</Label>
-        <Input
-          thin
-          value={$userFetch?.data?.firstName}
-          on:blur={updateUserFirstName}
-        />
-      </div>
-      <div class="field">
-        <Label size="L">Last name</Label>
-        <Input
-          thin
-          value={$userFetch?.data?.lastName}
-          on:blur={updateUserLastName}
-        />
-      </div>
-      <!-- don't let a user remove the privileges that let them be here -->
-      {#if userId !== $auth.user._id}
-        <div class="field">
-          <Label size="L">Role</Label>
-          <Select
-            value={globalRole}
-            options={Constants.BbRoles}
-            on:change={updateUserRole}
-          />
-        </div>
-      {/if}
-    </div>
-  </Layout>
-
-  {#if hasGroupsLicense}
-    <!-- User groups -->
-    <Layout gap="XS" noPadding>
-      <div class="tableTitle">
         <div>
-          <Heading size="XS">User groups</Heading>
+          <ActionMenu align="right">
-          <Body size="S">Add or remove this user from user groups</Body>
+            <span slot="control">
+              <Icon hoverable name="More" />
+            </span>
+            <MenuItem on:click={resetPasswordModal.show} icon="Refresh"
+              >Force Password Reset</MenuItem
+            >
+            <MenuItem on:click={deleteModal.show} icon="Delete">Delete</MenuItem
+            >
+          </ActionMenu>
         </div>
-        <div bind:this={popoverAnchor}>
+      </div>
-          <Button on:click={popover.show()} icon="UserGroup" cta
+    </Layout>
-            >Add User Group</Button
+    <Layout gap="S" noPadding>
-          >
+      <div class="fields">
-        </div>
+        <div class="field">
-        <Popover align="right" bind:this={popover} anchor={popoverAnchor}>
+          <Label size="L">First name</Label>
-          <UserGroupPicker
+          <Input
-            key={"name"}
+            thin
-            title={"Group"}
+            value={$userFetch?.data?.firstName}
-            bind:searchTerm
+            on:blur={updateUserFirstName}
-            bind:selected={selectedGroups}
-            bind:filtered={filteredGroups}
-            {addAll}
-            select={addGroup}
           />
-        </Popover>
+        </div>
+        <div class="field">
+          <Label size="L">Last name</Label>
+          <Input
+            thin
+            value={$userFetch?.data?.lastName}
+            on:blur={updateUserLastName}
+          />
+        </div>
+        <!-- don't let a user remove the privileges that let them be here -->
+        {#if userId !== $auth.user._id}
+          <div class="field">
+            <Label size="L">Role</Label>
+            <Select
+              value={globalRole}
+              options={Constants.BbRoles}
+              on:change={updateUserRole}
+            />
+          </div>
+        {/if}
+      </div>
+    </Layout>
+
+    {#if hasGroupsLicense}
+      <!-- User groups -->
+      <Layout gap="XS" noPadding>
+        <div class="tableTitle">
+          <div>
+            <Heading size="XS">User groups</Heading>
+            <Body size="S">Add or remove this user from user groups</Body>
+          </div>
+          <div bind:this={popoverAnchor}>
+            <Button on:click={popover.show()} icon="UserGroup" cta>
+              Add user group
+            </Button>
+          </div>
+          <Popover align="right" bind:this={popover} anchor={popoverAnchor}>
+            <UserGroupPicker
+              key={"name"}
+              title={"Group"}
+              bind:searchTerm
+              bind:selected={selectedGroups}
+              bind:filtered={filteredGroups}
+              {addAll}
+              select={addGroup}
+            />
+          </Popover>
+        </div>
+
+        <List>
+          {#if userGroups.length}
+            {#each userGroups as group}
+              <ListItem
+                title={group.name}
+                icon={group.icon}
+                iconBackground={group.color}
+                ><Icon
+                  on:click={removeGroup(group._id)}
+                  hoverable
+                  size="L"
+                  name="Close"
+                /></ListItem
+              >
+            {/each}
+          {:else}
+            <ListItem icon="UserGroup" title="No groups" />
+          {/if}
+        </List>
+      </Layout>
+    {/if}
+    <!-- User Apps -->
+    <Layout gap="S" noPadding>
+      <div class="appsTitle">
+        <Heading weight="light" size="XS">Apps</Heading>
+        <div style="margin-top: var(--spacing-xs)">
+          <Body size="S">Manage apps that this user has been assigned to</Body>
+        </div>
       </div>
 
       <List>
-        {#if userGroups.length}
+        {#if allAppList.length}
-          {#each userGroups as group}
+          {#each allAppList as app}
-            <ListItem
+            <div
-              title={group.name}
+              class="pointer"
-              icon={group.icon}
+              on:click={$goto(`../../overview/${app.devId}`)}
-              iconBackground={group.color}
-              ><Icon
-                on:click={removeGroup(group._id)}
-                hoverable
-                size="L"
-                name="Close"
-              /></ListItem
             >
+              <ListItem
+                title={app.name}
+                iconBackground={app?.icon?.color || ""}
+                icon={app?.icon?.name || "Apps"}
+              >
+                <div class="title ">
+                  <StatusLight
+                    square
+                    color={RoleUtils.getRoleColour(getHighestRole(app.roles))}
+                  >
+                    {getRoleLabel(getHighestRole(app.roles))}
+                  </StatusLight>
+                </div>
+              </ListItem>
+            </div>
           {/each}
         {:else}
-          <ListItem icon="UserGroup" title="No groups" />
+          <ListItem icon="Apps" title="No apps" />
         {/if}
       </List>
     </Layout>
-  {/if}
-  <!-- User Apps -->
-  <Layout gap="S" noPadding>
-    <div class="appsTitle">
-      <Heading weight="light" size="XS">Apps</Heading>
-      <div style="margin-top: var(--spacing-xs)">
-        <Body size="S">Manage apps that this user has been assigned to</Body>
-      </div>
-    </div>
-
-    <List>
-      {#if allAppList.length}
-        {#each allAppList as app}
-          <div class="pointer" on:click={$goto(`../../overview/${app.devId}`)}>
-            <ListItem
-              title={app.name}
-              iconBackground={app?.icon?.color || ""}
-              icon={app?.icon?.name || "Apps"}
-            >
-              <div class="title ">
-                <StatusLight
-                  color={RoleUtils.getRoleColour(getHighestRole(app.roles))}
-                />
-                <div style="margin-left: var(--spacing-s);">
-                  <Body size="XS"
-                    >{Constants.Roles[getHighestRole(app.roles)]}</Body
-                  >
-                </div>
-              </div>
-            </ListItem>
-          </div>
-        {/each}
-      {:else}
-        <ListItem icon="Apps" title="No apps" />
-      {/if}
-    </List>
   </Layout>
-</Layout>
+{/if}
 
 <Modal bind:this={deleteModal}>
   <DeleteUserModal user={$userFetch.data} />
@@ -365,7 +408,10 @@
 
   .subtitle {
     padding: 0 0 0 var(--spacing-m);
-    display: inline-block;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: stretch;
   }
 
   .appsTitle {

packages/builder/src/pages/builder/portal/manage/users/_components/AddUserModal.svelte

@@ -6,15 +6,17 @@
     Multiselect,
     InputDropdown,
     Layout,
+    Icon,
   } from "@budibase/bbui"
   import { groups, auth } from "stores/portal"
   import { Constants } from "@budibase/frontend-core"
+  import { emailValidator } from "helpers/validation"
 
   export let showOnboardingTypeModal
   const password = Math.random().toString(36).substring(2, 22)
   let disabled
   let userGroups = []
-
+  $: errors = []
   $: hasGroupsLicense = $auth.user?.license.features.includes(
     Constants.Features.USER_GROUPS
   )
@@ -27,6 +29,10 @@
       forceResetPassword: true,
     },
   ]
+
+  function removeInput(idx) {
+    userData = userData.filter((e, i) => i !== idx)
+  }
   function addNewInput() {
     userData = [
       ...userData,
@@ -38,6 +44,18 @@
       },
     ]
   }
+
+  function validateInput(email, index) {
+    if (email) {
+      if (emailValidator(email) === true) {
+        errors[index] = true
+        return null
+      } else {
+        errors[index] = false
+        return emailValidator(email)
+      }
+    }
+  }
 </script>
 
 <ModalContent
@@ -49,18 +67,40 @@
   confirmDisabled={disabled}
   cancelText="Cancel"
   showCloseIcon={false}
+  disabled={errors.some(x => x === false) ||
+    userData.some(x => x.email === "" || x.email === null)}
 >
   <Layout noPadding gap="XS">
     <Label>Email Address</Label>
 
     {#each userData as input, index}
-      <InputDropdown
+      <div
-        inputType="email"
+        style="display: flex;
-        bind:inputValue={input.email}
+        align-items: center;
-        bind:dropdownValue={input.role}
+        flex-direction: row;"
-        options={Constants.BbRoles}
+      >
-        error={input.error}
+        <div style="width: 90%">
-      />
+          <InputDropdown
+            inputType="email"
+            bind:inputValue={input.email}
+            bind:dropdownValue={input.role}
+            options={Constants.BbRoles}
+            error={validateInput(input.email, index)}
+          />
+        </div>
+        <div
+          class:fix-height={errors.length && !errors[index]}
+          class:normal-height={errors.length && !!errors[index]}
+          style="width: 10% "
+        >
+          <Icon
+            name="Close"
+            hoverable
+            size="S"
+            on:click={() => removeInput(index)}
+          />
+        </div>
+      </div>
     {/each}
     <div>
       <ActionButton on:click={addNewInput} icon="Add">Add email</ActionButton>
@@ -80,7 +120,10 @@
 </ModalContent>
 
 <style>
-  :global(.spectrum-Picker) {
+  .fix-height {
-    border-top-left-radius: 0px;
+    margin-bottom: 5%;
+  }
+  .normal-height {
+    margin-bottom: 0%;
   }
 </style>

packages/builder/src/pages/builder/portal/manage/users/_components/ImportUsersModal.svelte

@@ -108,10 +108,6 @@
 </ModalContent>
 
 <style>
-  :global(.spectrum-Picker) {
-    border-top-left-radius: 0px;
-  }
-
   .dropzone {
     text-align: center;
     display: flex;

packages/builder/src/pages/builder/portal/manage/users/_components/NameTableRenderer.svelte

@@ -17,7 +17,7 @@
     </div>
     {value}
   {:else}
-    <div class="text">Not Available</div>
+    <div class="text">-</div>
   {/if}
 </div>
 

packages/builder/src/pages/builder/portal/manage/users/_components/PasswordModal.svelte

@@ -79,10 +79,6 @@
     display: flex;
   }
 
-  :global(.spectrum-Picker) {
-    border-top-left-radius: 0px;
-  }
-
   .container {
     width: 100%;
     height: var(--spectrum-alias-item-height-l);

packages/builder/src/pages/builder/portal/manage/users/index.svelte

@@ -72,19 +72,12 @@
     name: {},
     email: {},
     role: {
-      noPropagation: true,
       sortable: false,
     },
     ...(hasGroupsLicense && {
       userGroups: { sortable: false, displayName: "User groups" },
     }),
-    apps: { width: "120px" },
+    apps: {},
-    settings: {
-      sortable: false,
-      width: "60px",
-      displayName: "",
-      align: "Right",
-    },
   }
 
   $: userData = []
@@ -256,10 +249,10 @@
         dataCy="add-user"
         on:click={createUserModal.show}
         icon="UserAdd"
-        cta>Add Users</Button
+        cta>Add users</Button
       >
       <Button on:click={importUsersModal.show} icon="Import" primary
-        >Import Users</Button
+        >Import users</Button
       >
 
       <div class="field">
@@ -323,6 +316,13 @@
 </Modal>
 
 <style>
+  .pagination {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    margin-top: var(--spacing-xl);
+  }
+
   .field {
     display: flex;
     align-items: center;

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

@@ -66,7 +66,7 @@
     selectedApp?.status === AppStatus.DEPLOYED && latestDeployments?.length > 0
 
   $: appUrl = `${window.origin}/app${selectedApp?.url}`
-  $: tabs = ["Overview", "Automation History", "Backups", "Settings"]
+  $: tabs = ["Overview", "Automation History", "Backups", "Settings", "Access"]
   $: selectedTab = "Overview"
 
   const backToAppList = () => {

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

@@ -29,7 +29,6 @@
   let pageInfo = createPaginationStore()
   let fixedAppId
   $: page = $pageInfo.page
-  $: fetchUsers(page, search)
 
   $: hasGroupsLicense = $auth.user?.license.features.includes(
     Constants.Features.USER_GROUPS
@@ -37,12 +36,6 @@
 
   $: fixedAppId = apps.getProdAppID(app.devId)
 
-  $: appUsers =
-    $users.data?.filter(x => {
-      return Object.keys(x.roles).find(y => {
-        return y === fixedAppId
-      })
-    }) || []
   $: appGroups = $groups.filter(x => {
     return x.apps.includes(app.appId)
   })
@@ -130,6 +123,12 @@
       pageInfo.loading()
       await users.search({ page, appId: fixedAppId })
       pageInfo.fetched($users.hasNextPage, $users.nextPage)
+      appUsers =
+        $users.data?.filter(x => {
+          return Object.keys(x.roles).find(y => {
+            return y === fixedAppId
+          })
+        }) || []
     } catch (error) {
       notifications.error("Error getting user list")
     }
@@ -137,6 +136,8 @@
 
   onMount(async () => {
     try {
+      await fetchUsers(page, search)
+
       await groups.actions.init()
       await apps.load()
       await roles.fetch()
@@ -212,8 +213,14 @@
             page={$pageInfo.pageNumber}
             hasPrevPage={$pageInfo.loading ? false : $pageInfo.hasPrevPage}
             hasNextPage={$pageInfo.loading ? false : $pageInfo.hasNextPage}
-            goToPrevPage={pageInfo.prevPage}
+            goToPrevPage={async () => {
-            goToNextPage={pageInfo.nextPage}
+              await pageInfo.prevPage()
+              fetchUsers(page, search)
+            }}
+            goToNextPage={async () => {
+              await pageInfo.nextPage()
+              fetchUsers(page, search)
+            }}
           />
         </div>
       {/if}
@@ -264,4 +271,11 @@
     justify-content: space-between;
     align-items: center;
   }
+
+  .pagination {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    margin-top: var(--spacing-xl);
+  }
 </style>

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

@@ -3,6 +3,7 @@
     ModalContent,
     PickerDropdown,
     ActionButton,
+    Layout,
     notifications,
   } from "@budibase/bbui"
   import { roles } from "stores/backend"
@@ -13,7 +14,6 @@
   export let app
   export let addData
   export let appUsers = []
-
   let prevSearch = undefined,
     search = undefined
   let pageInfo = createPaginationStore()
@@ -32,16 +32,16 @@
     prevSearch = search
     try {
       pageInfo.loading()
-      await users.search({ page, search })
+      await users.search({ page, email: search })
       pageInfo.fetched($users.hasNextPage, $users.nextPage)
     } catch (error) {
       notifications.error("Error getting user list")
     }
   }
 
-  $: filteredGroups = $groups.filter(element => {
+  $: filteredGroups = $groups.filter(group => {
-    return !element.apps.find(y => {
+    return !group.apps.find(appId => {
-      return y.appId === app.appId
+      return appId === app.appId
     })
   })
 
@@ -79,24 +79,26 @@
   onConfirm={() => addData(appData)}
   showCloseIcon={false}
 >
-  {#each appData as input, index}
+  <Layout noPadding gap="XS">
-    <PickerDropdown
+    {#each appData as input, index}
-      autocomplete
+      <PickerDropdown
-      primaryOptions={optionSections}
+        autocomplete
-      placeholder={"Search Users"}
+        primaryOptions={optionSections}
-      secondaryOptions={$roles}
+        secondaryOptions={$roles}
-      bind:primaryValue={input.id}
+        secondaryPlaceholder="Access"
-      bind:secondaryValue={input.role}
+        bind:primaryValue={input.id}
-      getPrimaryOptionLabel={group => group.name}
+        bind:secondaryValue={input.role}
-      getPrimaryOptionValue={group => group.name}
+        bind:searchTerm={search}
-      getPrimaryOptionIcon={group => group.icon}
+        getPrimaryOptionLabel={group => group.name}
-      getPrimaryOptionColour={group => group.colour}
+        getPrimaryOptionValue={group => group.name}
-      getSecondaryOptionLabel={role => role.name}
+        getPrimaryOptionIcon={group => group.icon}
-      getSecondaryOptionValue={role => role._id}
+        getPrimaryOptionColour={group => group.colour}
-      getSecondaryOptionColour={role => RoleUtils.getRoleColour(role._id)}
+        getSecondaryOptionLabel={role => role.name}
-    />
+        getSecondaryOptionValue={role => role._id}
-  {/each}
+        getSecondaryOptionColour={role => RoleUtils.getRoleColour(role._id)}
-
+      />
+    {/each}
+  </Layout>
   <div>
     <ActionButton on:click={addNewInput} icon="Add">Add email</ActionButton>
   </div>

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

@@ -5,13 +5,13 @@
   import { store } from "builderStore"
   import clientPackage from "@budibase/client/package.json"
   import { processStringSync } from "@budibase/string-templates"
-  import { users, auth } from "stores/portal"
+  import { users, auth, apps } from "stores/portal"
   import { createEventDispatcher, onMount } from "svelte"
 
   export let app
   export let deployments
   export let navigateTab
-
+  let userCount
   const dispatch = createEventDispatcher()
 
   const unpublishApp = () => {
@@ -40,7 +40,11 @@
   }
 
   onMount(async () => {
-    await users.search({ page: undefined, appId: "app_" + app.appId })
+    let resp = await users.getUserCountByApp({
+      appId: apps.getProdAppID(app.devId),
+    })
+    userCount = resp.userCount
+    await users.search({ appId: apps.getProdAppID(app.devId), limit: 4 })
   })
 </script>
 
@@ -155,7 +159,8 @@
               </div>
 
               <div class="users-text">
-                {$users?.data.length} users have access to this app
+                {userCount}
+                {userCount > 1 ? `users have` : `user has`} access to this app
               </div>
             </Layout>
           {:else}

packages/builder/src/stores/portal/auth.js

@@ -131,6 +131,11 @@ export function createAuthStore() {
       await setOrganisation(tenantId)
     },
     getSelf: async () => {
+      // for analytics, we need to make sure the environment has been loaded
+      // before setting the user
+      if (!get(admin).loaded) {
+        await admin.init()
+      }
       // We need to catch this locally as we never want this to fail, even
       // though normally we never want to swallow API errors at the store level.
       // We're either logged in or we aren't.

packages/builder/src/stores/portal/users.js

@@ -61,6 +61,7 @@ export function createUsersStore() {
           break
         case "admin":
           body.admin = { global: true }
+          body.builder = { global: true }
           break
       }
 
@@ -77,6 +78,10 @@ export function createUsersStore() {
     update(users => users.filter(user => user._id !== id))
   }
 
+  async function getUserCountByApp({ appId }) {
+    return await API.getUserCountByApp({ appId })
+  }
+
   async function bulkDelete(userIds) {
     await API.deleteUsers(userIds)
   }
@@ -99,6 +104,7 @@ export function createUsersStore() {
     create,
     save,
     bulkDelete,
+    getUserCountByApp,
     delete: del,
   }
 }

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/cli",
-  "version": "1.1.32-alpha.1",
+  "version": "1.1.33-alpha.4",
   "description": "Budibase CLI, for developers, self hosting and migrations.",
   "main": "src/index.js",
   "bin": {
@@ -26,7 +26,7 @@
     "outputPath": "build"
   },
   "dependencies": {
-    "@budibase/backend-core": "1.1.32-alpha.1",
+    "@budibase/backend-core": "1.1.32-alpha.6",
     "axios": "0.21.2",
     "chalk": "4.1.0",
     "cli-progress": "3.11.2",

packages/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/client",
-  "version": "1.1.32-alpha.1",
+  "version": "1.1.33-alpha.4",
   "license": "MPL-2.0",
   "module": "dist/budibase-client.js",
   "main": "dist/budibase-client.js",
@@ -19,9 +19,9 @@
     "dev:builder": "rollup -cw"
   },
   "dependencies": {
-    "@budibase/bbui": "1.1.32-alpha.1",
+    "@budibase/bbui": "1.1.33-alpha.4",
-    "@budibase/frontend-core": "1.1.32-alpha.1",
+    "@budibase/frontend-core": "1.1.33-alpha.4",
-    "@budibase/string-templates": "1.1.32-alpha.1",
+    "@budibase/string-templates": "1.1.33-alpha.4",
     "@spectrum-css/button": "^3.0.3",
     "@spectrum-css/card": "^3.0.3",
     "@spectrum-css/divider": "^1.0.3",

packages/client/src/components/preview/IndicatorSet.svelte

@@ -72,6 +72,7 @@
     // Sanity limit of 100 active indicators
     const children = Array.from(parents)
       .map(parent => parent?.children?.[0])
+      .filter(x => x != null)
       .slice(0, 100)
 
     // If there aren't any nodes then reset

packages/frontend-core/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@budibase/frontend-core",
-  "version": "1.1.32-alpha.1",
+  "version": "1.1.33-alpha.4",
   "description": "Budibase frontend core libraries used in builder and client",
   "author": "Budibase",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "dependencies": {
-    "@budibase/bbui": "1.1.32-alpha.1",
+    "@budibase/bbui": "1.1.33-alpha.4",
     "lodash": "^4.17.21",
     "svelte": "^3.46.2"
   }

packages/frontend-core/src/api/user.js

@@ -172,4 +172,15 @@ export const buildUserEndpoints = API => ({
       },
     })
   },
+
+  /**
+   * Accepts an invite to join the platform and creates a user.
+   * @param inviteCode the invite code sent in the email
+   * @param password the password for the newly created user
+   */
+  getUserCountByApp: async ({ appId }) => {
+    return await API.get({
+      url: `/api/global/users/count/${appId}`,
+    })
+  },
 })

packages/server/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/server",
   "email": "hi@budibase.com",
-  "version": "1.1.32-alpha.1",
+  "version": "1.1.33-alpha.4",
   "description": "Budibase Web Server",
   "main": "src/index.ts",
   "repository": {
@@ -77,11 +77,11 @@
   "license": "GPL-3.0",
   "dependencies": {
     "@apidevtools/swagger-parser": "10.0.3",
-    "@budibase/backend-core": "1.1.32-alpha.1",
+    "@budibase/backend-core": "1.1.33-alpha.4",
-    "@budibase/client": "1.1.32-alpha.1",
+    "@budibase/client": "1.1.33-alpha.4",
-    "@budibase/pro": "1.1.32-alpha.1",
+    "@budibase/pro": "1.1.33-alpha.4",
-    "@budibase/string-templates": "1.1.32-alpha.1",
+    "@budibase/string-templates": "1.1.33-alpha.4",
-    "@budibase/types": "1.1.32-alpha.1",
+    "@budibase/types": "1.1.33-alpha.4",
     "@bull-board/api": "3.7.0",
     "@bull-board/koa": "3.9.4",
     "@elastic/elasticsearch": "7.10.0",
@@ -106,7 +106,7 @@
     "google-auth-library": "7.12.0",
     "google-spreadsheet": "3.2.0",
     "jimp": "0.16.1",
-    "joi": "17.2.1",
+    "joi": "17.6.0",
     "js-yaml": "4.1.0",
     "jsonschema": "1.4.0",
     "knex": "0.95.15",

packages/server/src/api/controllers/query/validation.js

@@ -22,7 +22,7 @@ exports.queryValidation = () => {
     schema: Joi.object({}).required().unknown(true),
     transformer: OPTIONAL_STRING,
     flags: Joi.object().optional(),
-  })
+  }).unknown(true)
 }
 
 exports.generateQueryValidation = () => {
@@ -46,5 +46,5 @@ exports.generateQueryPreviewValidation = () => {
     transformer: OPTIONAL_STRING,
     parameters: Joi.object({}).required().unknown(true),
     queryId: OPTIONAL_STRING,
-  }))
+  }).unknown(true))
 }

packages/server/src/utilities/global.js

@@ -32,8 +32,10 @@ exports.updateAppRole = (user, { appId } = {}) => {
   // if a role wasn't found then either set as admin (builder) or public (everyone else)
   if (!user.roleId && user.builder && user.builder.global) {
     user.roleId = BUILTIN_ROLE_IDS.ADMIN
-  } else if (!user.roleId) {
+  } else if (!user.roleId && !user?.userGroups?.length) {
     user.roleId = BUILTIN_ROLE_IDS.PUBLIC
+  } else if (user?.userGroups?.length) {
+    user.roleId = null
   }
 
   delete user.roles
@@ -41,10 +43,8 @@ exports.updateAppRole = (user, { appId } = {}) => {
 }
 
 async function checkGroupRoles(user, { appId } = {}) {
-  if (!user.roleId) {
+  let roleId = await groups.getGroupRoleId(user, appId)
-    let roleId = await groups.getGroupRoleId(user, appId)
+  user.roleId = roleId
-    user.roleId = roleId
-  }
 
   return user
 }
@@ -54,7 +54,7 @@ async function processUser(user, { appId } = {}) {
     delete user.password
   }
   user = await exports.updateAppRole(user, { appId })
-  if (user?.userGroups?.length) {
+  if (!user.roleId && user?.userGroups?.length) {
     user = await checkGroupRoles(user, { appId })
   }
 

packages/server/yarn.lock

@@ -1094,18 +1094,19 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@budibase/backend-core@1.1.32-alpha.1":
+"@budibase/backend-core@1.1.33-alpha.4":
-  version "1.1.32-alpha.1"
+  version "1.1.33-alpha.4"
-  resolved "https://registry.yarnpkg.com/@budibase/backend-core/-/backend-core-1.1.32-alpha.1.tgz#c03b6a8c611058dd8b3da2768161d825c84ce350"
+  resolved "https://registry.yarnpkg.com/@budibase/backend-core/-/backend-core-1.1.33-alpha.4.tgz#207ffe45d41535e59ccc21cca9892d1e41818a14"
-  integrity sha512-yYXQ+6F4FeqRUPdi9YGiGjyg/mL4KGHmILt/nqzzSHX8xykM/sbAV4hb76MPx3ye4WQL6DBfwxW2CROZ8DNc6Q==
+  integrity sha512-p8SZkODBF4+BhfIYWIkUtJhR04OjvkmkrVTSFWXv2NTkIbSpaJGTkx9Kao+1Dn4N3H4jU4OBdmScy+C8F5MeSw==
   dependencies:
-    "@budibase/types" "1.1.32-alpha.1"
+    "@budibase/types" "1.1.33-alpha.4"
     "@techpass/passport-openidconnect" "0.3.2"
     aws-sdk "2.1030.0"
     bcrypt "5.0.1"
     dotenv "16.0.1"
     emitter-listener "1.1.2"
     ioredis "4.28.0"
+    joi "17.6.0"
     jsonwebtoken "8.5.1"
     koa-passport "4.1.4"
     lodash "4.17.21"
@@ -1177,13 +1178,13 @@
     svelte-flatpickr "^3.2.3"
     svelte-portal "^1.0.0"
 
-"@budibase/pro@1.1.32-alpha.1":
+"@budibase/pro@1.1.33-alpha.4":
-  version "1.1.32-alpha.1"
+  version "1.1.33-alpha.4"
-  resolved "https://registry.yarnpkg.com/@budibase/pro/-/pro-1.1.32-alpha.1.tgz#fbfdf2c791f3ffaffb2d49eed6669c8763f985ec"
+  resolved "https://registry.yarnpkg.com/@budibase/pro/-/pro-1.1.33-alpha.4.tgz#d25bc2ca73d11adfdc659e324b1e8de31c17657a"
-  integrity sha512-o3PV9AYwqWltN6j6NFqFCHHBkAtGIJSW57GcSKmmxrFSt/T6iqdpVZ2v8XzaX04Y0gw7BG/8a9T/6GTi6rTW4Q==
+  integrity sha512-CQ3zVbom4ndzIfUznUSERQ4Bz6ZVuy4HbOYGKKkU/FjoWqrYRK1tqlhmfCNQy8P9rnKURCUf3PMoWVWSOAS24g==
   dependencies:
-    "@budibase/backend-core" "1.1.32-alpha.1"
+    "@budibase/backend-core" "1.1.33-alpha.4"
-    "@budibase/types" "1.1.32-alpha.1"
+    "@budibase/types" "1.1.33-alpha.4"
     "@koa/router" "8.0.8"
     joi "17.6.0"
     node-fetch "^2.6.1"
@@ -1206,10 +1207,10 @@
     svelte-apexcharts "^1.0.2"
     svelte-flatpickr "^3.1.0"
 
-"@budibase/types@1.1.32-alpha.1":
+"@budibase/types@1.1.33-alpha.4":
-  version "1.1.32-alpha.1"
+  version "1.1.33-alpha.4"
-  resolved "https://registry.yarnpkg.com/@budibase/types/-/types-1.1.32-alpha.1.tgz#9f5053d2fea2d430c3f0112af45da50fde4687ca"
+  resolved "https://registry.yarnpkg.com/@budibase/types/-/types-1.1.33-alpha.4.tgz#a8de79c385280389be8b2cc214185caddf5fe4d3"
-  integrity sha512-Nx8dgW5tdNpMpZfVqCUi7CZ2E2z7E+OlSEjJIn1urE0dbd6pNXeYkVuzjHeNbSUwM80LYIqc7kWISKaVxAgIXA==
+  integrity sha512-od/gbLgbJnHsVlCvBQkuJf3t/Y9VLUNRYPl3Y4IbNOylpj3rSOKVGF3jANQgkI+pOBt5ni3Xlhc7aOI3qAning==
 
 "@bull-board/api@3.7.0":
   version "3.7.0"
@@ -1343,33 +1344,16 @@
     protobufjs "^6.11.3"
     yargs "^16.2.0"
 
-"@hapi/address@^4.1.0":
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/@hapi/address/-/address-4.1.0.tgz#d60c5c0d930e77456fdcde2598e77302e2955e1d"
-  integrity sha512-SkszZf13HVgGmChdHo/PxchnSaCJ6cetVqLzyciudzZRT0jcOouIF/Q93mgjw8cce+D+4F4C1Z/WrfFN+O3VHQ==
-  dependencies:
-    "@hapi/hoek" "^9.0.0"
-
 "@hapi/bourne@^2.0.0":
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/@hapi/bourne/-/bourne-2.1.0.tgz#66aff77094dc3080bd5df44ec63881f2676eb020"
   integrity sha512-i1BpaNDVLJdRBEKeJWkVO6tYX6DMFBuwMhSuWqLsY4ufeTKGVuV5rBsUhxPayXqnnWHgXUAmWK16H/ykO5Wj4Q==
 
-"@hapi/formula@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@hapi/formula/-/formula-2.0.0.tgz#edade0619ed58c8e4f164f233cda70211e787128"
-  integrity sha512-V87P8fv7PI0LH7LiVi8Lkf3x+KCO7pQozXRssAHNXXL9L1K+uyu4XypLXwxqVDKgyQai6qj3/KteNlrqDx4W5A==
-
 "@hapi/hoek@^9.0.0":
   version "9.3.0"
   resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.3.0.tgz#8368869dcb735be2e7f5cb7647de78e167a251fb"
   integrity sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ==
 
-"@hapi/pinpoint@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@hapi/pinpoint/-/pinpoint-2.0.0.tgz#805b40d4dbec04fc116a73089494e00f073de8df"
-  integrity sha512-vzXR5MY7n4XeIvLpfl3HtE3coZYO4raKXW766R6DZw/6aLqR26iuZ109K7a0NtF2Db0jxqh7xz2AxkUwpUFybw==
-
 "@hapi/topo@^5.0.0":
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/@hapi/topo/-/topo-5.1.0.tgz#dc448e332c6c6e37a4dc02fd84ba8d44b9afb012"
@@ -8653,17 +8637,6 @@ jmespath@0.16.0:
   resolved "https://registry.yarnpkg.com/jmespath/-/jmespath-0.16.0.tgz#b15b0a85dfd4d930d43e69ed605943c802785076"
   integrity sha512-9FzQjJ7MATs1tSpnco1K6ayiYE3figslrXA72G2HQ/n76RzvYlofyi5QM+iX4YRs/pu3yzxlVQSST23+dMDknw==
 
-joi@17.2.1:
-  version "17.2.1"
-  resolved "https://registry.yarnpkg.com/joi/-/joi-17.2.1.tgz#e5140fdf07e8fecf9bc977c2832d1bdb1e3f2a0a"
-  integrity sha512-YT3/4Ln+5YRpacdmfEfrrKh50/kkgX3LgBltjqnlMPIYiZ4hxXZuVJcxmsvxsdeHg9soZfE3qXxHC2tMpCCBOA==
-  dependencies:
-    "@hapi/address" "^4.1.0"
-    "@hapi/formula" "^2.0.0"
-    "@hapi/hoek" "^9.0.0"
-    "@hapi/pinpoint" "^2.0.0"
-    "@hapi/topo" "^5.0.0"
-
 joi@17.6.0:
   version "17.6.0"
   resolved "https://registry.yarnpkg.com/joi/-/joi-17.6.0.tgz#0bb54f2f006c09a96e75ce687957bd04290054b2"

packages/string-templates/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/string-templates",
-  "version": "1.1.32-alpha.1",
+  "version": "1.1.33-alpha.4",
   "description": "Handlebars wrapper for Budibase templating.",
   "main": "src/index.cjs",
   "module": "dist/bundle.mjs",

packages/types/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/types",
-  "version": "1.1.32-alpha.1",
+  "version": "1.1.33-alpha.4",
   "description": "Budibase types",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/types/src/sdk/events/event.ts

@@ -135,7 +135,6 @@ export enum Event {
   // LICENSE
   LICENSE_UPGRADED = "license:upgraded",
   LICENSE_DOWNGRADED = "license:downgraded",
-  LICENSE_UPDATED = "license:updated",
   LICENSE_ACTIVATED = "license:activated",
 
   // ACCOUNT

packages/worker/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/worker",
   "email": "hi@budibase.com",
-  "version": "1.1.32-alpha.1",
+  "version": "1.1.33-alpha.4",
   "description": "Budibase background service",
   "main": "src/index.ts",
   "repository": {
@@ -35,10 +35,10 @@
   "author": "Budibase",
   "license": "GPL-3.0",
   "dependencies": {
-    "@budibase/backend-core": "1.1.32-alpha.1",
+    "@budibase/backend-core": "1.1.33-alpha.4",
-    "@budibase/pro": "1.1.32-alpha.1",
+    "@budibase/pro": "1.1.33-alpha.4",
-    "@budibase/string-templates": "1.1.32-alpha.1",
+    "@budibase/string-templates": "1.1.33-alpha.4",
-    "@budibase/types": "1.1.32-alpha.1",
+    "@budibase/types": "1.1.33-alpha.4",
     "@koa/router": "8.0.8",
     "@sentry/node": "6.17.7",
     "@techpass/passport-openidconnect": "0.3.2",

packages/worker/src/api/controllers/global/users.ts

@@ -3,7 +3,7 @@ import { checkInviteCode } from "../../../utilities/redis"
 import { sendEmail } from "../../../utilities/email"
 import { users } from "../../../sdk"
 import env from "../../../environment"
-import { User, CloudAccount, UserGroup } from "@budibase/types"
+import { User, CloudAccount } from "@budibase/types"
 import {
   events,
   errors,
@@ -114,6 +114,16 @@ export const adminUser = async (ctx: any) => {
   })
 }
 
+export const countByApp = async (ctx: any) => {
+  const appId = ctx.params.appId
+  try {
+    const response = await users.countUsersByApp(appId)
+    ctx.body = response
+  } catch (err: any) {
+    ctx.throw(err.status || 400, err)
+  }
+}
+
 export const destroy = async (ctx: any) => {
   const id = ctx.params.id
 

packages/worker/src/api/routes/global/users.js

@@ -64,6 +64,7 @@ router
   .post("/api/global/users/search", builderOrAdmin, controller.search)
   .delete("/api/global/users/:id", adminOnly, controller.destroy)
   .post("/api/global/users/bulkDelete", adminOnly, controller.bulkDelete)
+  .get("/api/global/users/count/:appId", adminOnly, controller.countByApp)
   .get("/api/global/roles/:appId")
   .post(
     "/api/global/users/invite",

packages/worker/src/middleware/joi-validator.js

@@ -1,3 +1,5 @@
+const Joi = require("joi")
+
 function validate(schema, property) {
   // Return a Koa middleware function
   return (ctx, next) => {
@@ -10,6 +12,12 @@ function validate(schema, property) {
     } else if (ctx.request[property] != null) {
       params = ctx.request[property]
     }
+
+    schema = schema.append({
+      createdAt: Joi.any().optional(),
+      updatedAt: Joi.any().optional(),
+    })
+
     const { error } = schema.validate(params)
     if (error) {
       ctx.throw(400, `Invalid ${property} - ${error.message}`)

packages/worker/src/sdk/users/users.ts

@@ -20,7 +20,7 @@ import { groups as groupUtils } from "@budibase/pro"
 
 const PAGE_LIMIT = 8
 
-export const allUsers = async (newDb?: any) => {
+export const allUsers = async () => {
   const db = tenancy.getGlobalDB()
   const response = await db.allDocs(
     dbUtils.getGlobalUserParams(null, {
@@ -30,6 +30,13 @@ export const allUsers = async (newDb?: any) => {
   return response.rows.map((row: any) => row.doc)
 }
 
+export const countUsersByApp = async (appId: string) => {
+  let response: any = await usersCore.searchGlobalUsersByApp(appId, {})
+  return {
+    userCount: response.length,
+  }
+}
+
 export const paginatedUsers = async ({
   page,
   email,

packages/worker/yarn.lock

@@ -291,18 +291,19 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@budibase/backend-core@1.1.32-alpha.1":
+"@budibase/backend-core@1.1.33-alpha.4":
-  version "1.1.32-alpha.1"
+  version "1.1.33-alpha.4"
-  resolved "https://registry.yarnpkg.com/@budibase/backend-core/-/backend-core-1.1.32-alpha.1.tgz#c03b6a8c611058dd8b3da2768161d825c84ce350"
+  resolved "https://registry.yarnpkg.com/@budibase/backend-core/-/backend-core-1.1.33-alpha.4.tgz#207ffe45d41535e59ccc21cca9892d1e41818a14"
-  integrity sha512-yYXQ+6F4FeqRUPdi9YGiGjyg/mL4KGHmILt/nqzzSHX8xykM/sbAV4hb76MPx3ye4WQL6DBfwxW2CROZ8DNc6Q==
+  integrity sha512-p8SZkODBF4+BhfIYWIkUtJhR04OjvkmkrVTSFWXv2NTkIbSpaJGTkx9Kao+1Dn4N3H4jU4OBdmScy+C8F5MeSw==
   dependencies:
-    "@budibase/types" "1.1.32-alpha.1"
+    "@budibase/types" "1.1.33-alpha.4"
     "@techpass/passport-openidconnect" "0.3.2"
     aws-sdk "2.1030.0"
     bcrypt "5.0.1"
     dotenv "16.0.1"
     emitter-listener "1.1.2"
     ioredis "4.28.0"
+    joi "17.6.0"
     jsonwebtoken "8.5.1"
     koa-passport "4.1.4"
     lodash "4.17.21"
@@ -324,21 +325,21 @@
     uuid "8.3.2"
     zlib "1.0.5"
 
-"@budibase/pro@1.1.32-alpha.1":
+"@budibase/pro@1.1.33-alpha.4":
-  version "1.1.32-alpha.1"
+  version "1.1.33-alpha.4"
-  resolved "https://registry.yarnpkg.com/@budibase/pro/-/pro-1.1.32-alpha.1.tgz#fbfdf2c791f3ffaffb2d49eed6669c8763f985ec"
+  resolved "https://registry.yarnpkg.com/@budibase/pro/-/pro-1.1.33-alpha.4.tgz#d25bc2ca73d11adfdc659e324b1e8de31c17657a"
-  integrity sha512-o3PV9AYwqWltN6j6NFqFCHHBkAtGIJSW57GcSKmmxrFSt/T6iqdpVZ2v8XzaX04Y0gw7BG/8a9T/6GTi6rTW4Q==
+  integrity sha512-CQ3zVbom4ndzIfUznUSERQ4Bz6ZVuy4HbOYGKKkU/FjoWqrYRK1tqlhmfCNQy8P9rnKURCUf3PMoWVWSOAS24g==
   dependencies:
-    "@budibase/backend-core" "1.1.32-alpha.1"
+    "@budibase/backend-core" "1.1.33-alpha.4"
-    "@budibase/types" "1.1.32-alpha.1"
+    "@budibase/types" "1.1.33-alpha.4"
     "@koa/router" "8.0.8"
     joi "17.6.0"
     node-fetch "^2.6.1"
 
-"@budibase/types@1.1.32-alpha.1":
+"@budibase/types@1.1.33-alpha.4":
-  version "1.1.32-alpha.1"
+  version "1.1.33-alpha.4"
-  resolved "https://registry.yarnpkg.com/@budibase/types/-/types-1.1.32-alpha.1.tgz#9f5053d2fea2d430c3f0112af45da50fde4687ca"
+  resolved "https://registry.yarnpkg.com/@budibase/types/-/types-1.1.33-alpha.4.tgz#a8de79c385280389be8b2cc214185caddf5fe4d3"
-  integrity sha512-Nx8dgW5tdNpMpZfVqCUi7CZ2E2z7E+OlSEjJIn1urE0dbd6pNXeYkVuzjHeNbSUwM80LYIqc7kWISKaVxAgIXA==
+  integrity sha512-od/gbLgbJnHsVlCvBQkuJf3t/Y9VLUNRYPl3Y4IbNOylpj3rSOKVGF3jANQgkI+pOBt5ni3Xlhc7aOI3qAning==
 
 "@cspotcode/source-map-consumer@0.8.0":
   version "0.8.0"