Prevent showing any mention of groups when groups are not enabled both the platform and license level

packages/builder/src/pages/builder/portal/apps/index.svelte

@@ -27,7 +27,6 @@
   import { AppStatus } from "constants"
   import Logo from "assets/bb-space-man.svg"
   import AccessFilter from "./_components/AcessFilter.svelte"
-  import { Constants } from "@budibase/frontend-core"
 
   let sortBy = "name"
   let template
@@ -69,10 +68,6 @@
   $: unlocked = lockedApps?.length === 0
   $: automationErrors = getAutomationErrors(enrichedApps)
 
-  $: hasGroupsLicense = $auth.user?.license.features.includes(
-    Constants.Features.USER_GROUPS
-  )
-
   const enrichApps = (apps, user, sortBy) => {
     const enrichedApps = apps.map(app => ({
       ...app,
@@ -360,7 +355,7 @@
                   </Button>
                 {/if}
                 <div class="filter">
-                  {#if hasGroupsLicense && $groups.length}
+                  {#if $auth.groupsEnabled && $groups.length}
                     <AccessFilter on:change={accessFilterAction} />
                   {/if}
                   <Select

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

@@ -11,7 +11,6 @@
   } from "@budibase/bbui"
   import { groups, auth } from "stores/portal"
   import { onMount } from "svelte"
-  import { Constants } from "@budibase/frontend-core"
   import CreateEditGroupModal from "./_components/CreateEditGroupModal.svelte"
   import UserGroupsRow from "./_components/UserGroupsRow.svelte"
   import { cloneDeep } from "lodash/fp"
@@ -27,10 +26,6 @@
   let modal
   let group = cloneDeep(DefaultGroup)
 
-  $: hasGroupsLicense = $auth.user?.license.features.includes(
-    Constants.Features.USER_GROUPS
-  )
-
   async function deleteGroup(group) {
     try {
       groups.actions.delete(group)
@@ -54,7 +49,7 @@
 
   onMount(async () => {
     try {
-      if (hasGroupsLicense) {
+      if ($auth.groupsEnabled) {
         await groups.actions.init()
       }
     } catch (error) {
@@ -67,7 +62,7 @@
   <Layout gap="XS" noPadding>
     <div style="display: flex;">
       <Heading size="M">User groups</Heading>
-      {#if !hasGroupsLicense}
+      {#if !$auth.groupsEnabled}
         <Tags>
           <div class="tags">
             <div class="tag">
@@ -82,15 +77,15 @@
   <div class="align-buttons">
     <Button
       newStyles
-      icon={hasGroupsLicense ? "UserGroup" : ""}
+      icon={$auth.groupsEnabled ? "UserGroup" : ""}
-      cta={hasGroupsLicense}
+      cta={$auth.groupsEnabled}
-      on:click={hasGroupsLicense
+      on:click={$auth.groupsEnabled
         ? showCreateGroupModal
         : window.open("https://budibase.com/pricing/", "_blank")}
     >
-      {hasGroupsLicense ? "Create user group" : "Upgrade Account"}
+      {$auth.groupsEnabled ? "Create user group" : "Upgrade Account"}
     </Button>
-    {#if !hasGroupsLicense}
+    {#if !$auth.groupsEnabled}
       <Button
         newStyles
         secondary
@@ -101,7 +96,7 @@
     {/if}
   </div>
 
-  {#if hasGroupsLicense && $groups.length}
+  {#if $auth.groupsEnabled && $groups.length}
     <div class="groupTable">
       {#each $groups as group}
         <div>

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

@@ -42,18 +42,13 @@
   let allAppList = []
   let user
   let loaded = false
-  $: fetchUser(userId)
 
+  $: 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 => {
       if ($userFetch.data?.roles) {
@@ -86,7 +81,6 @@
       return y._id === userId
     })
   })
-
   $: globalRole = $userFetch?.data?.admin?.global
     ? "admin"
     : $userFetch?.data?.builder?.global
@@ -290,7 +284,7 @@
       </Layout>
     </Layout>
 
-    {#if hasGroupsLicense}
+    {#if $auth.groupsEnabled}
       <!-- User groups -->
       <Layout gap="S" noPadding>
         <div class="tableTitle">

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

@@ -18,9 +18,6 @@
   let disabled
   let userGroups = []
 
-  $: hasGroupsLicense = $auth.user?.license.features.includes(
-    Constants.Features.USER_GROUPS
-  )
   $: userData = [
     {
       email: "",
@@ -112,7 +109,7 @@
     </div>
   </Layout>
 
-  {#if hasGroupsLicense}
+  {#if $auth.groupsEnabled}
     <Multiselect
       bind:value={userGroups}
       placeholder="No groups"

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

@@ -7,7 +7,7 @@
     notifications,
   } from "@budibase/bbui"
   import { groups, auth, admin } from "stores/portal"
-  import { emailValidator } from "../../../../../../helpers/validation"
+  import { emailValidator } from "helpers/validation"
   import { Constants } from "@budibase/frontend-core"
 
   const BYTES_IN_MB = 1000000
@@ -22,9 +22,6 @@
   let usersRole = null
 
   $: invalidEmails = []
-  $: hasGroupsLicense = $auth.user?.license.features.includes(
-    Constants.Features.USER_GROUPS
-  )
 
   const validEmails = userEmails => {
     if ($admin.cloud && userEmails.length > MAX_USERS_UPLOAD_LIMIT) {
@@ -95,7 +92,7 @@
     options={Constants.BuilderRoleDescriptions}
   />
 
-  {#if hasGroupsLicense}
+  {#if $auth.groupsEnabled}
     <Multiselect
       bind:value={userGroups}
       placeholder="No groups"

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

@@ -25,21 +25,17 @@
   import PasswordModal from "./_components/PasswordModal.svelte"
   import ImportUsersModal from "./_components/ImportUsersModal.svelte"
   import { createPaginationStore } from "helpers/pagination"
-  import { Constants } from "@budibase/frontend-core"
   import { get } from "svelte/store"
 
-  //let email
   let enrichedUsers = []
   let createUserModal,
     inviteConfirmationModal,
     onboardingTypeModal,
     passwordModal,
     importUsersModal
-
   let pageInfo = createPaginationStore()
   let prevEmail = undefined,
     searchEmail = undefined
-
   let selectedRows = []
   let customRenderers = [
     { column: "userGroups", component: GroupsTableRenderer },
@@ -47,23 +43,17 @@
     { column: "role", component: RoleTableRenderer },
   ]
 
-  $: hasGroupsLicense = $auth.user?.license.features.includes(
-    Constants.Features.USER_GROUPS
-  )
-
   $: schema = {
     email: {},
     role: {
       sortable: false,
     },
-    ...(hasGroupsLicense && {
+    ...($auth.groupsEnabled && {
-      userGroups: { sortable: false, displayName: "User groups" },
+      userGroups: { sortable: false, displayName: "Groups" },
     }),
     apps: {},
   }
-
   $: userData = []
-
   $: page = $pageInfo.page
   $: fetchUsers(page, searchEmail)
   $: {
@@ -86,6 +76,7 @@
       }
     })
   }
+
   const showOnboardingTypeModal = async addUsersData => {
     userData = await removingDuplicities(addUsersData)
     if (!userData?.users?.length) return

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

@@ -17,10 +17,10 @@
   import { users, groups, apps, auth } from "stores/portal"
   import AssignmentModal from "./AssignmentModal.svelte"
   import { createPaginationStore } from "helpers/pagination"
-  import { Constants } from "@budibase/frontend-core"
   import { roles } from "stores/backend"
 
   export let app
+
   let assignmentModal
   let appGroups = []
   let appUsers = []
@@ -28,14 +28,9 @@
     search = undefined
   let pageInfo = createPaginationStore()
   let fixedAppId
+
   $: page = $pageInfo.page
-
-  $: hasGroupsLicense = $auth.user?.license.features.includes(
-    Constants.Features.USER_GROUPS
-  )
-
   $: fixedAppId = apps.getProdAppID(app.devId)
-
   $: appGroups = $groups.filter(x => {
     return x.apps.includes(app.appId)
   })
@@ -161,7 +156,7 @@
           >
         </div>
       </div>
-      {#if hasGroupsLicense && appGroups.length}
+      {#if $auth.groupsEnabled && appGroups.length}
         <List title="User Groups">
           {#each appGroups as group}
             <ListItem

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

@@ -7,19 +7,21 @@
     notifications,
   } from "@budibase/bbui"
   import { roles } from "stores/backend"
-  import { groups, users } from "stores/portal"
+  import { groups, users, auth } from "stores/portal"
   import { RoleUtils } from "@budibase/frontend-core"
   import { createPaginationStore } from "helpers/pagination"
 
   export let app
   export let addData
   export let appUsers = []
+
   let prevSearch = undefined,
     search = undefined
   let pageInfo = createPaginationStore()
 
   $: page = $pageInfo.page
   $: fetchUsers(page, search)
+
   async function fetchUsers(page, search) {
     if ($pageInfo.loading) {
       return
@@ -46,15 +48,16 @@
   })
 
   $: optionSections = {
-    ...(filteredGroups.length && {
+    ...($auth.groupsEnabled &&
-      groups: {
+      filteredGroups.length && {
-        data: filteredGroups,
+        groups: {
-        getLabel: group => group.name,
+          data: filteredGroups,
-        getValue: group => group._id,
+          getLabel: group => group.name,
-        getIcon: group => group.icon,
+          getValue: group => group._id,
-        getColour: group => group.color,
+          getIcon: group => group.icon,
-      },
+          getColour: group => group.color,
-    }),
+        },
+      }),
     users: {
       data: $users.data.filter(u => !appUsers.find(x => x._id === u._id)),
       getLabel: user => user.email,

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

@@ -2,6 +2,8 @@ import { derived, writable, get } from "svelte/store"
 import { API } from "api"
 import { admin } from "stores/portal"
 import analytics from "analytics"
+import { FEATURE_FLAGS } from "helpers/featureFlags"
+import { Constants } from "@budibase/frontend-core"
 
 export function createAuthStore() {
   const auth = writable({
@@ -10,11 +12,13 @@ export function createAuthStore() {
     tenantSet: false,
     loaded: false,
     postLogout: false,
+    groupsEnabled: false,
   })
   const store = derived(auth, $store => {
     let initials = null
     let isAdmin = false
     let isBuilder = false
+    let groupsEnabled = false
     if ($store.user) {
       const user = $store.user
       if (user.firstName) {
@@ -29,6 +33,9 @@ export function createAuthStore() {
       }
       isAdmin = !!user.admin?.global
       isBuilder = !!user.builder?.global
+      groupsEnabled =
+        user?.license.features.includes(Constants.Features.USER_GROUPS) &&
+        user?.featureFlags.includes(FEATURE_FLAGS.USER_GROUPS)
     }
     return {
       user: $store.user,
@@ -39,6 +46,7 @@ export function createAuthStore() {
       initials,
       isAdmin,
       isBuilder,
+      groupsEnabled,
     }
   })