Allow forms to generate query schemas. Fix query execution action

packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js

@@ -6,7 +6,7 @@ import {
   makeMainForm,
   makeTitleContainer,
   makeSaveButton,
-  makeSchemaFormComponents,
+  makeTableFormComponents,
 } from "./utils/commonComponents"
 
 export default function(tables) {
@@ -51,7 +51,7 @@ const createScreen = table => {
     })
 
   // Add all form fields from this schema to the field group
-  makeSchemaFormComponents(table._id).forEach(component => {
+  makeTableFormComponents(table._id).forEach(component => {
     fieldGroup.addChild(component)
   })
 

packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js

@@ -7,7 +7,7 @@ import {
   makeBreadcrumbContainer,
   makeTitleContainer,
   makeSaveButton,
-  makeSchemaFormComponents,
+  makeTableFormComponents,
   makeMainForm,
 } from "./utils/commonComponents"
 
@@ -106,7 +106,7 @@ const createScreen = table => {
     })
 
   // Add all form fields from this schema to the field group
-  makeSchemaFormComponents(table._id).forEach(component => {
+  makeTableFormComponents(table._id).forEach(component => {
     fieldGroup.addChild(component)
   })
 

packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js

@@ -43,25 +43,6 @@ export function makeMainForm() {
     .instanceName("Form")
 }
 
-export function makeMainContainer() {
-  return new Component("@budibase/standard-components/container")
-    .type("div")
-    .normalStyle({
-      width: "700px",
-      padding: "0px",
-      "border-radius": "0.5rem",
-      "box-shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
-      margin: "auto",
-      "margin-top": "20px",
-      "padding-top": "48px",
-      "padding-bottom": "48px",
-      "padding-right": "48px",
-      "padding-left": "48px",
-      "margin-bottom": "20px",
-    })
-    .instanceName("Form")
-}
-
 export function makeBreadcrumbContainer(tableName, text, capitalise = false) {
   const link = makeLinkComponent(tableName).instanceName("Back Link")
 
@@ -180,11 +161,30 @@ const fieldTypeToComponentMap = {
   link: "relationshipfield",
 }
 
-export function makeSchemaFormComponents(tableId) {
+export function makeTableFormComponents(tableId) {
   const tables = get(backendUiStore).tables
   const schema = tables.find(table => table._id === tableId)?.schema ?? {}
+  return makeSchemaFormComponents(schema)
+}
+
+export function makeQueryFormComponents(queryId) {
+  const queries = get(backendUiStore).queries
+  const schema = queries.find(query => query._id === queryId)?.schema ?? []
+  return makeSchemaFormComponents(schema)
+}
+
+export function makeDatasourceFormComponents(datasource) {
+  if (!datasource) {
+    return []
+  }
+  return datasource.type === "table"
+    ? makeTableFormComponents(datasource.tableId)
+    : makeQueryFormComponents(datasource._id)
+}
+
+function makeSchemaFormComponents(schema) {
   let components = []
-  let fields = Object.keys(schema)
+  let fields = Object.keys(schema || {})
   fields.forEach(field => {
     const fieldSchema = schema[field]
     const componentType = fieldTypeToComponentMap[fieldSchema.type]

packages/builder/src/components/automation/SetupPanel/GenericBindingPopover.svelte

@@ -2,7 +2,6 @@
   import groupBy from "lodash/fp/groupBy"
   import {
     TextArea,
-    Label,
     Input,
     Heading,
     Body,

packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte

@@ -5,7 +5,7 @@
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { currentAsset } from "builderStore"
   import { findClosestMatchingComponent } from "builderStore/storeUtils"
-  import { makeSchemaFormComponents } from "builderStore/store/screenTemplates/utils/commonComponents"
+  import { makeDatasourceFormComponents } from "builderStore/store/screenTemplates/utils/commonComponents"
   import PropertyControl from "./PropertyControls/PropertyControl.svelte"
   import Input from "./PropertyControls/Input.svelte"
   import LayoutSelect from "./PropertyControls/LayoutSelect.svelte"
@@ -106,9 +106,12 @@
       componentInstance._id,
       component => component._component.endsWith("/form")
     )
-    const tableId = form?.datasource?.tableId
-    const fields = makeSchemaFormComponents(tableId).map(field => field.json())
-    onChange("_children", fields)
+    const datasource = form?.datasource
+    const fields = makeDatasourceFormComponents(datasource)
+    onChange(
+      "_children",
+      fields.map(field => field.json())
+    )
   }
 </script>
 

packages/client/src/api/queries.js

@@ -4,7 +4,7 @@ import API from "./api"
 /**
  * Executes a query against an external data connector.
  */
-export const executeQuery = async ({ queryId, parameters }) => {
+export const executeQuery = async ({ queryId, parameters, notify = false }) => {
   const res = await API.post({
     url: `/api/queries/${queryId}`,
     body: {
@@ -13,6 +13,8 @@ export const executeQuery = async ({ queryId, parameters }) => {
   })
   if (res.error) {
     notificationStore.danger("An error has occurred")
+  } else if (notify) {
+    notificationStore.success("Query executed successfully")
   }
   return res
 }

packages/client/src/utils/buttonActions.js

@@ -50,13 +50,13 @@ const navigationHandler = action => {
   }
 }
 
-const queryExecutionHandler = async (action, context) => {
+const queryExecutionHandler = async action => {
   const { datasourceId, queryId, queryParams } = action.parameters
-  const enrichedQueryParameters = enrichDataBindings(queryParams || {}, context)
   await executeQuery({
     datasourceId,
     queryId,
-    parameters: enrichedQueryParameters,
+    parameters: queryParams,
+    notify: true,
   })
 }
 

packages/client/src/utils/componentProps.js

@@ -46,10 +46,7 @@ export const enrichProps = async (props, context, user) => {
 
   // Enrich button actions if they exist
   if (props._component.endsWith("/button") && enrichedProps.onClick) {
-    enrichedProps.onClick = enrichButtonActions(
-      enrichedProps.onClick,
-      totalContext
-    )
+    enrichedProps.onClick = enrichButtonActions(enrichedProps.onClick)
   }
 
   return enrichedProps

packages/standard-components/src/forms/Form.svelte

@@ -133,12 +133,7 @@
     } else {
       table = await API.fetchTableDefinition(datasource?.tableId)
       if (table) {
-        if (datasource.type === "query") {
-          console.log("No implementation for queries yet")
-          schema = {}
-        } else {
-          schema = table.schema || {}
-        }
+        schema = table.schema || {}
       }
     }
     loaded = true