From f0872758848ab4ea2bbad49ec371033d27b275cf Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 30 Sep 2022 16:20:30 +0100 Subject: [PATCH] Revert "Plugin fixes + improvements" --- .../src/builderStore/componentUtils.js | 5 +-- .../builder/src/builderStore/dataBinding.js | 16 +++---- .../src/builderStore/store/frontend.js | 42 ++++++++----------- .../settings/controls/TableSelect.svelte | 42 +++++++++---------- .../[screenId]/_components/AppPreview.svelte | 2 - packages/client/src/stores/builder.js | 3 -- packages/client/src/websocket.js | 26 +++++------- packages/frontend-core/src/api/rows.js | 3 +- 8 files changed, 58 insertions(+), 81 deletions(-) diff --git a/packages/builder/src/builderStore/componentUtils.js b/packages/builder/src/builderStore/componentUtils.js index e7787dea72..2ad7e82075 100644 --- a/packages/builder/src/builderStore/componentUtils.js +++ b/packages/builder/src/builderStore/componentUtils.js @@ -143,10 +143,7 @@ export const getComponentSettings = componentType => { } // Ensure whole component name is used - if ( - !componentType.startsWith("plugin/") && - !componentType.startsWith("@budibase") - ) { + if (!componentType.startsWith("@budibase")) { componentType = `@budibase/standard-components/${componentType}` } diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js index 7456ec5691..ca36380077 100644 --- a/packages/builder/src/builderStore/dataBinding.js +++ b/packages/builder/src/builderStore/dataBinding.js @@ -243,18 +243,18 @@ export const getDatasourceForProvider = (asset, component) => { return null } - // For legacy compatibility, we need to be able to handle datasources that are - // just strings. These are not generated any more, so could be removed in - // future. - // TODO: remove at some point - const datasource = component[datasourceSetting?.key] - if (typeof datasource === "string") { + // There are different types of setting which can be a datasource, for + // example an actual datasource object, or a table ID string. + // Convert the datasource setting into a proper datasource object so that + // we can use it properly + if (datasourceSetting.type === "table") { return { - tableId: datasource, + tableId: component[datasourceSetting?.key], type: "table", } + } else { + return component[datasourceSetting?.key] } - return datasource } /** diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js index aefdba9fb2..b74261a7e8 100644 --- a/packages/builder/src/builderStore/store/frontend.js +++ b/packages/builder/src/builderStore/store/frontend.js @@ -88,12 +88,27 @@ export const getFrontendStore = () => { initialise: async pkg => { const { layouts, screens, application, clientLibPath } = pkg - await store.actions.components.refreshDefinitions(application.appId) + // Fetch component definitions. + // Allow errors to propagate. + const components = await API.fetchComponentLibDefinitions( + application.appId + ) + + // Filter out custom component keys so we can flag them + const customComponents = Object.keys(components).filter(name => + name.startsWith("plugin/") + ) // Reset store state store.update(state => ({ ...state, libraries: application.componentLibraries, + components, + customComponents, + clientFeatures: { + ...INITIAL_FRONTEND_STATE.clientFeatures, + ...components.features, + }, name: application.name, description: application.description, appId: application.appId, @@ -370,29 +385,6 @@ export const getFrontendStore = () => { }, }, components: { - refreshDefinitions: async appId => { - if (!appId) { - appId = get(store).appId - } - - // Fetch definitions and filter out custom component definitions so we - // can flag them - const components = await API.fetchComponentLibDefinitions(appId) - const customComponents = Object.keys(components).filter(name => - name.startsWith("plugin/") - ) - - // Update store - store.update(state => ({ - ...state, - components, - customComponents, - clientFeatures: { - ...INITIAL_FRONTEND_STATE.clientFeatures, - ...components.features, - }, - })) - }, getDefinition: componentName => { if (!componentName) { return null @@ -436,7 +428,7 @@ export const getFrontendStore = () => { _id: Helpers.uuid(), _component: definition.component, _styles: { normal: {}, hover: {}, active: {} }, - _instanceName: `New ${definition.friendlyName || definition.name}`, + _instanceName: `New ${definition.name}`, ...cloneDeep(props), ...extras, } diff --git a/packages/builder/src/components/design/settings/controls/TableSelect.svelte b/packages/builder/src/components/design/settings/controls/TableSelect.svelte index 384bbe1e3a..b41098da2d 100644 --- a/packages/builder/src/components/design/settings/controls/TableSelect.svelte +++ b/packages/builder/src/components/design/settings/controls/TableSelect.svelte @@ -1,28 +1,26 @@ - + + {#each $tables.list as table} + + {/each} + + + + diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte index 9f21a6a29f..bc42eadff2 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte @@ -198,8 +198,6 @@ block: "center", }) } - } else if (type === "reload-plugin") { - await store.actions.components.refreshDefinitions() } else { console.warn(`Client sent unknown event type: ${type}`) } diff --git a/packages/client/src/stores/builder.js b/packages/client/src/stores/builder.js index fea070c27c..608a058e01 100644 --- a/packages/client/src/stores/builder.js +++ b/packages/client/src/stores/builder.js @@ -98,9 +98,6 @@ const createBuilderStore = () => { return state }) } - - // Notify the builder so we can reload component definitions - dispatchEvent("reload-plugin") }, } return { diff --git a/packages/client/src/websocket.js b/packages/client/src/websocket.js index 0a99fa8606..827453fad6 100644 --- a/packages/client/src/websocket.js +++ b/packages/client/src/websocket.js @@ -1,19 +1,13 @@ -import { - builderStore, - environmentStore, - notificationStore, -} from "./stores/index.js" +import { builderStore, environmentStore } from "./stores/index.js" import { get } from "svelte/store" import { io } from "socket.io-client" -let socket - export const initWebsocket = () => { const { inBuilder, location } = get(builderStore) const { cloud } = get(environmentStore) // Only connect when we're inside the builder preview, for now - if (!inBuilder || !location || cloud || socket) { + if (!inBuilder || !location || cloud) { return } @@ -22,20 +16,20 @@ export const initWebsocket = () => { const proto = tls ? "wss:" : "ws:" const host = location.hostname const port = location.port || (tls ? 443 : 80) - socket = io(`${proto}//${host}:${port}`, { + const socket = io(`${proto}//${host}:${port}`, { path: "/socket/client", - // Cap reconnection attempts to 3 (total of 15 seconds before giving up) - reconnectionAttempts: 3, - // Delay reconnection attempt by 5 seconds + // Cap reconnection attempts to 10 (total of 95 seconds before giving up) + reconnectionAttempts: 10, + // Delay initial reconnection attempt by 5 seconds reconnectionDelay: 5000, - reconnectionDelayMax: 5000, - // Timeout after 4 seconds so we never stack requests - timeout: 4000, + // Then decrease to 10 second intervals + reconnectionDelayMax: 10000, + // Timeout after 5 seconds so we never stack requests + timeout: 5000, }) // Event handlers socket.on("plugin-update", data => { builderStore.actions.updateUsedPlugin(data.name, data.hash) - notificationStore.actions.info(`"${data.name}" plugin reloaded`) }) } diff --git a/packages/frontend-core/src/api/rows.js b/packages/frontend-core/src/api/rows.js index 3734310eed..70030d7f80 100644 --- a/packages/frontend-core/src/api/rows.js +++ b/packages/frontend-core/src/api/rows.js @@ -8,9 +8,10 @@ export const buildRowEndpoints = API => ({ if (!tableId || !rowId) { return null } - return await API.get({ + const row = await API.get({ url: `/api/${tableId}/rows/${rowId}`, }) + return (await API.enrichRows([row], tableId))[0] }, /**