Merge pull request #11039 from Budibase/cheeks-fixes

Collaboration and data section fixes
This commit is contained in:
Andrew Kingston 2023-06-27 19:58:22 +01:00 committed by GitHub
commit 33e6c1e534
21 changed files with 333 additions and 142 deletions

View File

@ -61,6 +61,9 @@ const INITIAL_FRONTEND_STATE = {
showNotificationAction: false,
sidePanel: false,
},
features: {
componentValidation: false,
},
errors: [],
hasAppPackage: false,
libraries: null,
@ -148,6 +151,10 @@ export const getFrontendStore = () => {
navigation: application.navigation || {},
usedPlugins: application.usedPlugins || [],
hasLock,
features: {
...INITIAL_FRONTEND_STATE.features,
...application.features,
},
initialised: true,
}))
screenHistoryStore.reset()
@ -283,9 +290,12 @@ export const getFrontendStore = () => {
}
},
save: async screen => {
// Validate screen structure
// Temporarily disabled to accommodate migration issues
// store.actions.screens.validate(screen)
const state = get(store)
// Validate screen structure if the app supports it
if (state.features?.componentValidation) {
store.actions.screens.validate(screen)
}
// Check screen definition for any component settings which need updated
store.actions.screens.enrichEmptySettings(screen)
@ -296,7 +306,6 @@ export const getFrontendStore = () => {
const routesResponse = await API.fetchAppRoutes()
// If plugins changed we need to fetch the latest app metadata
const state = get(store)
let usedPlugins = state.usedPlugins
if (savedScreen.pluginAdded) {
const { application } = await API.fetchAppPackage(state.appId)

View File

@ -12,8 +12,10 @@
customQueryText,
} from "helpers/data/utils"
import IntegrationIcon from "./IntegrationIcon.svelte"
import { TableNames } from "constants"
let openDataSources = []
$: enrichedDataSources = enrichDatasources(
$datasources,
$params,
@ -71,6 +73,13 @@
$goto(`./datasource/${datasource._id}`)
}
const selectTable = tableId => {
tables.select(tableId)
if (!$isActive("./table/:tableId")) {
$goto(`./table/${tableId}`)
}
}
function closeNode(datasource) {
openDataSources = openDataSources.filter(id => datasource._id !== id)
}
@ -151,9 +160,16 @@
{#if $database?._id}
<div class="hierarchy-items-container">
<NavItem
icon="UserGroup"
text="Users"
selected={$isActive("./table/:tableId") &&
$tables.selected?._id === TableNames.USERS}
on:click={() => selectTable(TableNames.USERS)}
/>
{#each enrichedDataSources as datasource, idx}
<NavItem
border={idx > 0}
border
text={datasource.name}
opened={datasource.open}
selected={$isActive("./datasource") && datasource.selected}
@ -174,7 +190,7 @@
</NavItem>
{#if datasource.open}
<TableNavigator sourceId={datasource._id} />
<TableNavigator sourceId={datasource._id} {selectTable} />
{#each $queries.list.filter(query => query.datasourceId === datasource._id) as query}
<NavItem
indentLevel={1}

View File

@ -10,17 +10,13 @@
a.name?.toLowerCase() > b.name?.toLowerCase() ? 1 : -1
export let sourceId
export let selectTable
$: sortedTables = $tables.list
.filter(table => table.sourceId === sourceId)
.filter(
table => table.sourceId === sourceId && table._id !== TableNames.USERS
)
.sort(alphabetical)
const selectTable = tableId => {
tables.select(tableId)
if (!$isActive("./table/:tableId")) {
$goto(`./table/${tableId}`)
}
}
</script>
{#if $database?._id}

View File

@ -469,10 +469,12 @@
display: flex;
flex-direction: column;
gap: var(--spacing-xl);
overflow: hidden;
}
.overlay-wrap {
position: relative;
flex: 1;
overflow: hidden;
}
.mode-overlay {
position: absolute;

View File

@ -2,8 +2,17 @@
import { Button, Layout } from "@budibase/bbui"
import DatasourceNavigator from "components/backend/DatasourceNavigator/DatasourceNavigator.svelte"
import Panel from "components/design/Panel.svelte"
import { isActive, goto } from "@roxi/routify"
import { isActive, goto, redirect } from "@roxi/routify"
import BetaButton from "./_components/BetaButton.svelte"
import { datasources } from "stores/backend"
$: {
// If we ever don't have any data other than the users table, prompt the
// user to add some
if (!$datasources.hasData) {
$redirect("./new")
}
}
</script>
<!-- routify:options index=1 -->

View File

@ -6,12 +6,15 @@
import { goto } from "@roxi/routify"
import { onMount } from "svelte"
import { BUDIBASE_INTERNAL_DB_ID } from "constants/backend"
import { TableNames } from "constants"
let modal
$: internalTablesBySourceId = $tables.list.filter(
table =>
table.type !== "external" && table.sourceId === BUDIBASE_INTERNAL_DB_ID
table.type !== "external" &&
table.sourceId === BUDIBASE_INTERNAL_DB_ID &&
table._id !== TableNames.USERS
)
onMount(() => {

View File

@ -4,11 +4,13 @@
import { onMount } from "svelte"
onMount(async () => {
const { list, selected } = $datasources
const { list, selected, hasData } = $datasources
if (selected) {
$redirect(`./${selected?._id}`)
} else {
} else if (hasData && list?.length) {
$redirect(`./${list[0]._id}`)
} else {
$redirect("../new")
}
})
</script>

View File

@ -1,17 +1,13 @@
<script>
import { redirect } from "@roxi/routify"
import { onMount } from "svelte"
import { TableNames } from "constants"
import { datasources } from "stores/backend"
$: hasData =
$datasources.list.find(x => (x._id = "bb_internal"))?.entities?.length >
1 || $datasources.list.length > 1
onMount(() => {
if (!hasData) {
$redirect("./new")
$: {
if ($datasources.hasData) {
$redirect(`./table/${TableNames.USERS}`)
} else {
$redirect("./table")
$redirect("./new")
}
}
})
</script>

View File

@ -1,14 +1,16 @@
<script>
import { onMount } from "svelte"
import { tables } from "stores/backend"
import { datasources, tables } from "stores/backend"
import { redirect } from "@roxi/routify"
import { TableNames } from "constants"
onMount(async () => {
const { list, selected } = $tables
if (selected) {
$redirect(`./${selected?._id}`)
} else if (list?.length) {
$redirect(`./${list[0]._id}`)
onMount(() => {
if ($tables.selected) {
$redirect(`./${$tables.selected._id}`)
} else if ($datasources.hasData) {
$redirect(`./${TableNames.USERS}`)
} else {
$redirect("../new")
}
})
</script>

View File

@ -1,8 +1,13 @@
import { writable, derived, get } from "svelte/store"
import { IntegrationTypes, DEFAULT_BB_DATASOURCE_ID } from "constants/backend"
import { queries, tables } from "./"
import {
IntegrationTypes,
DEFAULT_BB_DATASOURCE_ID,
BUDIBASE_INTERNAL_DB_ID,
} from "constants/backend"
import { tables, queries } from "./"
import { API } from "api"
import { DatasourceFeature } from "@budibase/types"
import { TableNames } from "constants"
export class ImportTableError extends Error {
constructor(message) {
@ -23,13 +28,40 @@ export function createDatasourcesStore() {
schemaError: null,
})
const derivedStore = derived(store, $store => ({
const derivedStore = derived([store, tables], ([$store, $tables]) => {
// Set the internal datasource entities from the table list, which we're
// able to keep updated unlike the egress generated definition of the
// internal datasource
let internalDS = $store.list?.find(ds => ds._id === BUDIBASE_INTERNAL_DB_ID)
let otherDS = $store.list?.filter(ds => ds._id !== BUDIBASE_INTERNAL_DB_ID)
if (internalDS) {
internalDS = {
...internalDS,
entities: $tables.list?.filter(table => {
return (
table.sourceId === BUDIBASE_INTERNAL_DB_ID &&
table._id !== TableNames.USERS
)
}),
}
}
// Build up enriched DS list
// Only add the internal DS if we have at least one non-users table
let list = []
if (internalDS?.entities?.length) {
list.push(internalDS)
}
list = list.concat(otherDS || [])
return {
...$store,
selected: $store.list?.find(ds => ds._id === $store.selectedDatasourceId),
hasDefaultData: $store.list.some(
datasource => datasource._id === DEFAULT_BB_DATASOURCE_ID
),
}))
list,
selected: list?.find(ds => ds._id === $store.selectedDatasourceId),
hasDefaultData: list?.some(ds => ds._id === DEFAULT_BB_DATASOURCE_ID),
hasData: list?.length > 0,
}
})
const fetch = async () => {
const datasources = await API.getDatasources()
@ -50,20 +82,14 @@ export function createDatasourcesStore() {
const updateDatasource = response => {
const { datasource, error } = response
store.update(state => {
const currentIdx = state.list.findIndex(ds => ds._id === datasource._id)
const sources = state.list
if (currentIdx >= 0) {
sources.splice(currentIdx, 1, datasource)
} else {
sources.push(datasource)
}
return {
list: sources,
selectedDatasourceId: datasource._id,
if (error) {
store.update(state => ({
...state,
schemaError: error,
}))
}
})
replaceDatasource(datasource._id, datasource)
select(datasource._id)
return datasource
}
@ -134,18 +160,14 @@ export function createDatasourcesStore() {
}
const deleteDatasource = async datasource => {
if (!datasource?._id || !datasource?._rev) {
return
}
await API.deleteDatasource({
datasourceId: datasource?._id,
datasourceRev: datasource?._rev,
datasourceId: datasource._id,
datasourceRev: datasource._rev,
})
store.update(state => {
const sources = state.list.filter(
existing => existing._id !== datasource._id
)
return { list: sources, selected: null }
})
await queries.fetch()
await tables.fetch()
replaceDatasource(datasource._id, null)
}
const removeSchemaError = () => {
@ -154,7 +176,6 @@ export function createDatasourcesStore() {
})
}
// Handles external updates of datasources
const replaceDatasource = (datasourceId, datasource) => {
if (!datasourceId) {
return
@ -166,6 +187,8 @@ export function createDatasourcesStore() {
...state,
list: state.list.filter(x => x._id !== datasourceId),
}))
tables.removeDatasourceTables(datasourceId)
queries.removeDatasourceQueries(datasourceId)
return
}

View File

@ -121,6 +121,13 @@ export function createQueriesStore() {
return await save(datasourceId, newQuery)
}
const removeDatasourceQueries = datasourceId => {
store.update(state => ({
...state,
list: state.list.filter(table => table.datasourceId !== datasourceId),
}))
}
return {
subscribe: derivedStore.subscribe,
fetch,
@ -131,6 +138,7 @@ export function createQueriesStore() {
delete: deleteQuery,
preview,
duplicate,
removeDatasourceQueries,
}
}

View File

@ -67,12 +67,12 @@ export function createTablesStore() {
}
const deleteTable = async table => {
if (!table?._id || !table?._rev) {
if (!table?._id) {
return
}
await API.deleteTable({
tableId: table._id,
tableRev: table._rev,
tableRev: table._rev || "rev",
})
replaceTable(table._id, null)
}
@ -161,6 +161,13 @@ export function createTablesStore() {
}
}
const removeDatasourceTables = datasourceId => {
store.update(state => ({
...state,
list: state.list.filter(table => table.sourceId !== datasourceId),
}))
}
return {
...store,
subscribe: derivedStore.subscribe,
@ -172,6 +179,7 @@ export function createTablesStore() {
saveField,
deleteField,
replaceTable,
removeDatasourceTables,
}
}

View File

@ -2216,7 +2216,7 @@
"name": "Form",
"icon": "Form",
"hasChildren": true,
"illegalChildren": ["section", "form"],
"illegalChildren": ["section", "form", "formblock"],
"actions": [
"ValidateForm",
"ClearForm",
@ -2304,7 +2304,7 @@
"name": "Form Step",
"icon": "AssetsAdded",
"hasChildren": true,
"illegalChildren": ["section", "form", "form step"],
"illegalChildren": ["section", "form", "formstep", "formblock"],
"styles": ["size"],
"size": {
"width": 400,

View File

@ -68,6 +68,7 @@
rowHeight,
contentLines,
gridFocused,
error,
} = context
// Keep config store up to date with props
@ -149,8 +150,15 @@
</div>
</div>
</div>
{:else if $error}
<div class="grid-error">
<div class="grid-error-title">There was a problem loading your grid</div>
<div class="grid-error-subtitle">
{$error}
</div>
</div>
{/if}
{#if $loading}
{#if $loading && !$error}
<div in:fade|local={{ duration: 130 }} class="grid-loading">
<ProgressCircle />
</div>
@ -273,6 +281,25 @@
opacity: 0.6;
}
/* Error */
.grid-error {
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 8px;
}
.grid-error-title {
font-size: 18px;
font-weight: 600;
}
.grid-error-subtitle {
font-size: 16px;
}
/* Disable checkbox animation anywhere in the grid data */
.grid-data-outer :global(.spectrum-Checkbox-box:before),
.grid-data-outer :global(.spectrum-Checkbox-box:after),

View File

@ -14,6 +14,7 @@ export const createStores = () => {
const rowChangeCache = writable({})
const inProgressChanges = writable({})
const hasNextPage = writable(false)
const error = writable(null)
// Generate a lookup map to quick find a row by ID
const rowLookupMap = derived(
@ -47,6 +48,7 @@ export const createStores = () => {
rowChangeCache,
inProgressChanges,
hasNextPage,
error,
}
}
@ -68,6 +70,7 @@ export const deriveStores = context => {
inProgressChanges,
previousFocusedRowId,
hasNextPage,
error,
} = context
const instanceLoaded = writable(false)
const fetch = writable(null)
@ -122,7 +125,17 @@ export const deriveStores = context => {
// Subscribe to changes of this fetch model
unsubscribe = newFetch.subscribe(async $fetch => {
if ($fetch.loaded && !$fetch.loading) {
if ($fetch.error) {
// Present a helpful error to the user
let message = "An unknown error occurred"
if ($fetch.error.status === 403) {
message = "You don't have access to this data"
} else if ($fetch.error.message) {
message = $fetch.error.message
}
error.set(message)
} else if ($fetch.loaded && !$fetch.loading) {
error.set(null)
hasNextPage.set($fetch.hasNextPage)
const $instanceLoaded = get(instanceLoaded)
const resetRows = $fetch.resetKey !== lastResetKey

View File

@ -57,6 +57,7 @@ export default class DataFetch {
cursor: null,
cursors: [],
resetKey: Math.random(),
error: null,
})
// Merge options with their default values
@ -252,6 +253,10 @@ export default class DataFetch {
try {
return await this.API.fetchTableDefinition(datasource.tableId)
} catch (error) {
this.store.update(state => ({
...state,
error,
}))
return null
}
}

View File

@ -308,6 +308,9 @@ async function performAppCreate(ctx: UserCtx) {
customTheme: {
buttonBorderRadius: "16px",
},
features: {
componentValidation: true,
},
}
// If we used a template or imported an app there will be an existing doc.

View File

@ -1,12 +1,15 @@
import authorized from "../middleware/authorized"
import currentApp from "../middleware/currentapp"
import { BaseSocket } from "./websocket"
import { context, permissions } from "@budibase/backend-core"
import { auth, permissions } from "@budibase/backend-core"
import http from "http"
import Koa from "koa"
import { getTableId } from "../api/controllers/row/utils"
import { Row, Table } from "@budibase/types"
import { Socket } from "socket.io"
import { GridSocketEvent } from "@budibase/shared-core"
import { userAgent } from "koa-useragent"
import { createContext, runMiddlewares } from "./middleware"
const { PermissionType, PermissionLevel } = permissions
@ -26,28 +29,27 @@ export default class GridSocket extends BaseSocket {
return
}
// Check if the user has permission to read this resource
const middleware = authorized(
PermissionType.TABLE,
PermissionLevel.READ
)
const ctx = {
appId,
// Create context
const ctx = createContext(this.app, socket, {
resourceId: tableId,
roleId: socket.data.roleId,
user: { _id: socket.data._id },
isAuthenticated: socket.data.isAuthenticated,
request: {
url: "/fake",
},
get: () => null,
throw: () => {
// If they don't have access, immediately disconnect them
socket.disconnect(true)
},
}
await context.doInAppContext(appId, async () => {
await middleware(ctx, async () => {
appId,
})
// Construct full middleware chain to assess permissions
const middlewares = [
userAgent,
auth.buildAuthMiddleware([], {
publicAllowed: true,
}),
currentApp,
authorized(PermissionType.TABLE, PermissionLevel.READ),
]
// Run all koa middlewares
try {
await runMiddlewares(ctx, middlewares, async () => {
// Middlewares are finished and we have permission
// Join room for this resource
const room = `${appId}-${tableId}`
await this.joinRoom(socket, room)
@ -55,7 +57,9 @@ export default class GridSocket extends BaseSocket {
const sessions = await this.getRoomSessions(room)
callback({ users: sessions })
})
})
} catch (error) {
socket.disconnect(true)
}
}
)

View File

@ -0,0 +1,85 @@
import { Socket } from "socket.io"
import Cookies from "cookies"
import http from "http"
import Koa from "koa"
import { Header } from "@budibase/backend-core"
/**
* Constructs a fake Koa context to use for manually running middlewares in
* sockets
* @param app the Koa app
* @param socket the socket.io socket instance
* @param options additional metadata to populate the context with
*/
export const createContext = (
app: Koa,
socket: Socket,
options?: WebsocketContextOptions
) => {
const res = new http.ServerResponse(socket.request)
const context: WebsocketContext = {
...app.createContext(socket.request, res),
// Additional overrides needed to make our middlewares work with this
// fake koa context
resourceId: options?.resourceId,
path: "/fake",
request: {
url: "/fake",
headers: {
[Header.APP_ID]: options?.appId,
},
},
cookies: new Cookies(socket.request, res),
get: (field: string) => socket.request.headers?.[field] as string,
throw: (...params: any[]) => {
// Throw has a bunch of different signatures, so we'll just stringify
// whatever params we get given
throw new Error(
...(params?.join(" ") || "Unknown error in socket middleware")
)
},
// Needed for koa-useragent middleware
headers: socket.request.headers,
header: socket.request.headers,
}
return context
}
/**
* Runs a list of middlewares, nesting each callback inside each other to mimic
* how the real middlewares run and ensuring that app and tenant contexts work
* as expected
* @param ctx the Koa context
* @param middlewares the array of middlewares to run
* @param callback a final callback for when all middlewares are completed
*/
export const runMiddlewares = async (
ctx: any,
middlewares: any[],
callback: Function
) => {
if (!middlewares[0]) {
await callback()
} else {
await middlewares[0](ctx, async () => {
await runMiddlewares(ctx, middlewares.slice(1), callback)
})
}
}
export interface WebsocketContext extends Omit<Koa.Context, "request"> {
request: {
url: string
headers: {
[key: string]: string | undefined
}
}
cookies: Cookies
}
export interface WebsocketContextOptions {
appId?: string
resourceId?: string
}

View File

@ -1,7 +1,6 @@
import { Server } from "socket.io"
import http from "http"
import Koa from "koa"
import Cookies from "cookies"
import { userAgent } from "koa-useragent"
import { auth, Header, redis } from "@budibase/backend-core"
import { createAdapter } from "@socket.io/redis-adapter"
@ -10,6 +9,7 @@ import { getSocketPubSubClients } from "../utilities/redis"
import { SocketEvent, SocketSessionTTL } from "@budibase/shared-core"
import { SocketSession } from "@budibase/types"
import { v4 as uuid } from "uuid"
import { createContext, runMiddlewares } from "./middleware"
const anonUser = () => ({
_id: uuid(),
@ -18,6 +18,7 @@ const anonUser = () => ({
})
export class BaseSocket {
app: Koa
io: Server
path: string
redisClient?: redis.Client
@ -28,6 +29,7 @@ export class BaseSocket {
path: string = "/",
additionalMiddlewares?: any[]
) {
this.app = app
this.path = path
this.io = new Server(server, {
path,
@ -45,33 +47,10 @@ export class BaseSocket {
// Apply middlewares
this.io.use(async (socket, next) => {
// Build fake koa context
const res = new http.ServerResponse(socket.request)
const ctx: any = {
...app.createContext(socket.request, res),
const ctx = createContext(this.app, socket)
// Additional overrides needed to make our middlewares work with this
// fake koa context
cookies: new Cookies(socket.request, res),
get: (field: string) => socket.request.headers[field],
throw: (code: number, message: string) => {
throw new Error(message)
},
// Needed for koa-useragent middleware
headers: socket.request.headers,
header: socket.request.headers,
// We don't really care about the path since it will never contain
// an app ID
path: "/socket",
}
// Run all koa middlewares
try {
for (let [idx, middleware] of middlewares.entries()) {
await middleware(ctx, () => {
if (idx === middlewares.length - 1) {
await runMiddlewares(ctx, middlewares, () => {
// Middlewares are finished
// Extract some data from our enriched koa context to persist
// as metadata for the socket
@ -84,13 +63,9 @@ export class BaseSocket {
lastName,
sessionId: socket.id,
connectedAt: Date.now(),
isAuthenticated: ctx.isAuthenticated,
roleId: ctx.roleId,
}
next()
}
})
}
} catch (error: any) {
next(error)
}

View File

@ -20,6 +20,7 @@ export interface App extends Document {
navigation?: AppNavigation
automationErrors?: AppMetadataErrors
icon?: AppIcon
features?: AppFeatures
}
export interface AppInstance {
@ -60,3 +61,7 @@ export interface AppIcon {
name: string
color: string
}
export interface AppFeatures {
componentValidation?: boolean
}