Merge pull request #8065 from Budibase/revert-8054-plugin-improvements

Revert "Plugin fixes + improvements"

packages/builder/src/builderStore/componentUtils.js

@@ -143,10 +143,7 @@ export const getComponentSettings = componentType => {
   }
 
   // Ensure whole component name is used
-  if (
+  if (!componentType.startsWith("@budibase")) {
-    !componentType.startsWith("plugin/") &&
-    !componentType.startsWith("@budibase")
-  ) {
     componentType = `@budibase/standard-components/${componentType}`
   }
 

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
+  // There are different types of setting which can be a datasource, for
-  // just strings. These are not generated any more, so could be removed in
+  // example an actual datasource object, or a table ID string.
-  // future.
+  // Convert the datasource setting into a proper datasource object so that
-  // TODO: remove at some point
+  // we can use it properly
-  const datasource = component[datasourceSetting?.key]
+  if (datasourceSetting.type === "table") {
-  if (typeof datasource === "string") {
     return {
-      tableId: datasource,
+      tableId: component[datasourceSetting?.key],
       type: "table",
     }
+  } else {
+    return component[datasourceSetting?.key]
   }
-  return datasource
 }
 
 /**

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,
         }

packages/builder/src/components/design/settings/controls/TableSelect.svelte

@@ -1,28 +1,26 @@
 <script>
   import { Select } from "@budibase/bbui"
-  import { createEventDispatcher } from "svelte"
+  import { tables } from "stores/backend"
-  import { tables as tablesStore } from "stores/backend"
 
   export let value
-
-  const dispatch = createEventDispatcher()
-
-  $: tables = $tablesStore.list.map(m => ({
-    label: m.name,
-    tableId: m._id,
-    type: "table",
-  }))
-
-  const onChange = e => {
-    const dataSource = tables?.find(x => x.tableId === e.detail)
-    dispatch("change", dataSource)
-  }
 </script>
 
-<Select
+<div>
-  on:change={onChange}
+  <Select extraThin secondary wide on:change {value}>
-  value={value?.tableId}
+    <option value="">Choose a table</option>
-  options={tables}
+    {#each $tables.list as table}
-  getOptionValue={x => x.tableId}
+      <option value={table._id}>{table.name}</option>
-  getOptionLabel={x => x.label}
+    {/each}
-/>
+  </Select>
+</div>
+
+<style>
+  div {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: row;
+  }
+  div :global(> *) {
+    flex: 1 1 auto;
+  }
+</style>

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}`)
       }

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 {

packages/client/src/websocket.js

@@ -1,19 +1,13 @@
-import {
+import { builderStore, environmentStore } from "./stores/index.js"
-  builderStore,
-  environmentStore,
-  notificationStore,
-} 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)
+    // Cap reconnection attempts to 10 (total of 95 seconds before giving up)
-    reconnectionAttempts: 3,
+    reconnectionAttempts: 10,
-    // Delay reconnection attempt by 5 seconds
+    // Delay initial reconnection attempt by 5 seconds
     reconnectionDelay: 5000,
-    reconnectionDelayMax: 5000,
+    // Then decrease to 10 second intervals
-    // Timeout after 4 seconds so we never stack requests
+    reconnectionDelayMax: 10000,
-    timeout: 4000,
+    // 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`)
   })
 }

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]
   },
 
   /**