Type screenTemplating modal

packages/builder/src/helpers/data/format.ts

@@ -2,6 +2,8 @@ import {
   Datasource,
   Table,
   UIInternalDatasource,
+  UITableResource,
+  UIViewResource,
   ViewV2,
 } from "@budibase/types"
 
@@ -31,13 +33,13 @@ export const datasourceSelect = {
 }
 
 export const tableSelect = {
-  table: (table: Table) => ({
+  table: (table: Table): UITableResource => ({
     type: "table",
     label: table.name,
-    tableId: table._id,
-    resourceId: table._id,
+    tableId: table._id!,
+    resourceId: table._id!,
   }),
-  viewV2: (view: ViewV2) => ({
+  viewV2: (view: ViewV2): UIViewResource => ({
     type: "viewV2",
     id: view.id,
     label: view.name,

packages/builder/src/templates/screenTemplating/table/modal.ts

@@ -1,13 +1,23 @@
-import { Screen } from "../Screen"
-import { Component } from "../../Component"
-import { generate } from "shortid"
-import { makePropSafe as safe } from "@budibase/string-templates"
-import { Utils } from "@budibase/frontend-core"
 import { capitalise } from "@/helpers"
-import getValidRoute from "../getValidRoute"
+import { SourceOption } from "@/pages/builder/app/[application]/design/_components/NewScreen/utils"
 import { getRowActionButtonTemplates } from "@/templates/rowActions"
+import { Utils } from "@budibase/frontend-core"
+import { makePropSafe as safe } from "@budibase/string-templates"
+import { Screen as ScreenDoc, UIPermissions } from "@budibase/types"
+import { generate } from "shortid"
+import { Component } from "../../Component"
+import getValidRoute from "../getValidRoute"
+import { Screen } from "../Screen"
 
-const modal = async ({ tableOrView, permissions, screens }) => {
+const modal = async ({
+  tableOrView,
+  permissions,
+  screens,
+}: {
+  tableOrView: SourceOption
+  permissions: UIPermissions
+  screens: ScreenDoc[]
+}) => {
   /*
     Create Row
    */
@@ -94,7 +104,7 @@ const modal = async ({ tableOrView, permissions, screens }) => {
     })
 
   // Generate button config including row actions
-  let buttons = Utils.buildFormBlockButtonConfig({
+  const formButtons = Utils.buildFormBlockButtonConfig({
     _id: editFormBlock._json._id,
     showDeleteButton: true,
     showSaveButton: true,
@@ -106,7 +116,7 @@ const modal = async ({ tableOrView, permissions, screens }) => {
   const rowActionButtons = await getRowActionButtonTemplates({
     instance: editFormBlock.json(),
   })
-  buttons = [...(buttons || []), ...rowActionButtons]
+  const buttons = [...(formButtons || []), ...rowActionButtons]
   editFormBlock = editFormBlock.customProps({
     buttons,
     buttonsCollapsed: buttons.length > 5,

packages/frontend-core/src/utils/utils.ts

@@ -1,7 +1,12 @@
 import { makePropSafe as safe } from "@budibase/string-templates"
 import { Helpers } from "@budibase/bbui"
 import { cloneDeep } from "lodash"
-import { SearchFilterGroup, UISearchFilter } from "@budibase/types"
+import {
+  SearchFilterGroup,
+  UISearchFilter,
+  UITableResource,
+  UIViewResource,
+} from "@budibase/types"
 
 export const sleep = (ms: number) =>
   new Promise(resolve => setTimeout(resolve, ms))
@@ -131,7 +136,7 @@ export const domDebounce = (callback: Function) => {
 export const buildFormBlockButtonConfig = (props?: {
   _id?: string
   actionType?: string
-  dataSource?: { resourceId: string }
+  dataSource?: UITableResource | UIViewResource
   notificationOverride?: boolean
   actionUrl?: string
   showDeleteButton?: boolean

packages/types/src/ui/common.ts

@@ -3,3 +3,18 @@ export interface UIEvent extends Omit<Event, "target"> {
   key?: string
   target?: any
 }
+
+export interface UITableResource {
+  type: "table"
+  label: string
+  tableId: string
+  resourceId: string
+}
+
+export interface UIViewResource {
+  type: "viewV2"
+  id: string
+  label: string
+  tableId: string
+  resourceId: string
+}