diff --git a/packages/builder/src/components/integration/AccessLevelSelect.svelte b/packages/builder/src/components/integration/AccessLevelSelect.svelte index 59f6b8a105..091f33cbcd 100644 --- a/packages/builder/src/components/integration/AccessLevelSelect.svelte +++ b/packages/builder/src/components/integration/AccessLevelSelect.svelte @@ -1,7 +1,7 @@
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenNavigationPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenNavigationPanel.svelte index 146d28081e..2ab5f1665e 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenNavigationPanel.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenNavigationPanel.svelte @@ -5,8 +5,9 @@ import { store } from "builderStore" import NavItem from "components/common/NavItem.svelte" import ScreenDropdownMenu from "./ScreenDropdownMenu.svelte" - import { RoleColours, RolePriorities } from "constants" import ScreenWizard from "./ScreenWizard.svelte" + import { RoleUtils } from "@budibase/frontend-core" + let searchString let accessRole = "all" let showNewScreenModal @@ -28,8 +29,8 @@ .slice() .sort((a, b) => { // Sort by role first - const roleA = RolePriorities[a.routing.roleId] ?? 0 - const roleB = RolePriorities[b.routing.roleId] ?? 0 + const roleA = RoleUtils.getRolePriority(a.routing.roleId) + const roleB = RoleUtils.getRolePriority(b.routing.roleId) if (roleA !== roleB) { return roleA > roleB ? -1 : 1 } @@ -43,10 +44,6 @@ return a.routing.route < b.routing.route ? -1 : 1 }) } - - const getRoleColor = roleId => { - return RoleColours[roleId] || "#ff6500" - } ($store.selectedScreenId = screen._id)} - color={getRoleColor(screen.routing.roleId)} + color={RoleUtils.getRoleColour(screen.routing.roleId)} > diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte index 5be344496c..601b6cb491 100644 --- a/packages/client/src/components/ClientApp.svelte +++ b/packages/client/src/components/ClientApp.svelte @@ -3,7 +3,7 @@ import { setContext, onMount } from "svelte" import { Layout, Heading, Body } from "@budibase/bbui" import ErrorSVG from "@budibase/frontend-core/assets/error.svg" - import { Constants, CookieUtils } from "@budibase/frontend-core" + import { Constants, CookieUtils, RoleUtils } from "@budibase/frontend-core" import Component from "./Component.svelte" import SDK from "sdk" import { @@ -41,41 +41,22 @@ let dataLoaded = false let permissionError = false - // Load app config - onMount(async () => { - await initialise() - await authStore.actions.fetchUser() - dataLoaded = true - if (get(builderStore).inBuilder) { - builderStore.actions.notifyLoaded() - } else { - builderStore.actions.pingEndUser() - } - }) + // Determine if we should show devtools or not + $: isDevPreview = $appStore.isDevApp && !$builderStore.inBuilder - // Handle no matching route - this is likely a permission error + // Handle no matching route $: { if (dataLoaded && $routeStore.routerLoaded && !$routeStore.activeRoute) { if ($authStore) { // There is a logged in user, so handle them if ($screenStore.screens.length) { - let firstRoute - - // If using devtools, find the first screen matching our role - if ($devToolsStore.role) { - const roleRoutes = $screenStore.screens.filter( - screen => screen.routing?.roleId === $devToolsStore.role - ) - firstRoute = roleRoutes[0]?.routing?.route || "/" - } - - // Otherwise just use the first route - else { - firstRoute = $screenStore.screens[0]?.routing?.route ?? "/" - } - - // Screens exist so navigate back to the home screen - routeStore.actions.navigate(firstRoute) + // Find the best route to push the user to initially + const route = getBestRoute( + $authStore, + $screenStore.screens, + $devToolsStore.role + ) + routeStore.actions.navigate(route) } else { // No screens likely means the user has no permissions to view this app permissionError = true @@ -89,7 +70,44 @@ } } - $: isDevPreview = $appStore.isDevApp && !$builderStore.inBuilder + const getBestRoute = (user, screens) => { + // Rank all screens, preferring all home screens + const rankScreen = screen => { + const roleId = screen.routing.roleId + let rank = RoleUtils.getRolePriority(roleId) + if (screen.routing.homeScreen) { + rank += 100 + } + return rank + } + const enrichedScreens = screens?.map(screen => ({ + ...screen, + rank: rankScreen(screen), + })) + const rankedScreens = enrichedScreens?.sort((a, b) => { + // First sort by rank + if (a.rank !== b.rank) { + return a.rank > b.rank ? -1 : 1 + } + // Then sort alphabetically + return a.routing.route < b.routing.route ? -1 : 1 + }) + + // Use the best ranking screen + return rankedScreens?.[0].routing?.route || "/" + } + + // Load app config + onMount(async () => { + await initialise() + await authStore.actions.fetchUser() + dataLoaded = true + if (get(builderStore).inBuilder) { + builderStore.actions.notifyLoaded() + } else { + builderStore.actions.pingEndUser() + } + }) {#if dataLoaded} @@ -158,7 +176,7 @@ - {#if $appStore.isDevApp && !$builderStore.inBuilder} + {#if isDevPreview} {/if}
diff --git a/packages/frontend-core/src/constants.js b/packages/frontend-core/src/constants.js index 33cf1b7d1c..dc16067875 100644 --- a/packages/frontend-core/src/constants.js +++ b/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", +} diff --git a/packages/frontend-core/src/utils/index.js b/packages/frontend-core/src/utils/index.js index 6755940289..3ba3bf0fd4 100644 --- a/packages/frontend-core/src/utils/index.js +++ b/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" diff --git a/packages/frontend-core/src/utils/roles.js b/packages/frontend-core/src/utils/roles.js new file mode 100644 index 0000000000..0f7bf0c591 --- /dev/null +++ b/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] ?? "#ffa500" +}