Update auto screens to only generate a single list screen using new side panels

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

@@ -1,13 +1,7 @@
-import newRowScreen from "./newRowScreen"
-import rowDetailScreen from "./rowDetailScreen"
 import rowListScreen from "./rowListScreen"
 import createFromScratchScreen from "./createFromScratchScreen"
 
-const allTemplates = tables => [
+const allTemplates = tables => [...rowListScreen(tables)]
-  ...newRowScreen(tables),
-  ...rowDetailScreen(tables),
-  ...rowListScreen(tables),
-]
 
 // Allows us to apply common behaviour to all create() functions
 const createTemplateOverride = (frontendState, template) => () => {

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

@@ -1,72 +0,0 @@
-import sanitizeUrl from "./utils/sanitizeUrl"
-import { Screen } from "./utils/Screen"
-import { Component } from "./utils/Component"
-import { makeBreadcrumbContainer } from "./utils/commonComponents"
-import { getSchemaForDatasource } from "../../dataBinding"
-
-export default function (tables) {
-  return tables.map(table => {
-    return {
-      name: `${table.name} - New`,
-      create: () => createScreen(table),
-      id: NEW_ROW_TEMPLATE,
-      table: table._id,
-    }
-  })
-}
-
-export const newRowUrl = table => sanitizeUrl(`/${table.name}/new/row`)
-export const NEW_ROW_TEMPLATE = "NEW_ROW_TEMPLATE"
-
-const rowListUrl = table => sanitizeUrl(`/${table.name}`)
-
-const getFields = schema => {
-  let columns = []
-  Object.entries(schema || {}).forEach(([field, fieldSchema]) => {
-    if (!field || !fieldSchema) {
-      return
-    }
-    if (!fieldSchema?.autocolumn) {
-      columns.push(field)
-    }
-  })
-  return columns
-}
-
-const generateFormBlock = table => {
-  const datasource = { type: "table", tableId: table._id }
-  const { schema } = getSchemaForDatasource(null, datasource, {
-    formSchema: true,
-  })
-  const formBlock = new Component("@budibase/standard-components/formblock")
-  formBlock
-    .customProps({
-      title: "New row",
-      actionType: "Create",
-      actionUrl: rowListUrl(table),
-      showDeleteButton: false,
-      showSaveButton: true,
-      fields: getFields(schema),
-      dataSource: {
-        label: table.name,
-        tableId: table._id,
-        type: "table",
-      },
-      labelPosition: "left",
-      size: "spectrum--medium",
-    })
-    .instanceName(`${table.name} - Form block`)
-  return formBlock
-}
-
-const createScreen = table => {
-  const formBlock = generateFormBlock(table)
-  const screen = new Screen()
-    .instanceName(`${table.name} - New`)
-    .route(newRowUrl(table))
-
-  return screen
-    .addChild(makeBreadcrumbContainer(table.name, "New row"))
-    .addChild(formBlock)
-    .json()
-}

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

@@ -1,70 +0,0 @@
-import sanitizeUrl from "./utils/sanitizeUrl"
-import { Screen } from "./utils/Screen"
-import { Component } from "./utils/Component"
-import { makeBreadcrumbContainer } from "./utils/commonComponents"
-import { getSchemaForDatasource } from "../../dataBinding"
-
-export default function (tables) {
-  return tables.map(table => {
-    return {
-      name: `${table.name} - Detail`,
-      create: () => createScreen(table),
-      id: ROW_DETAIL_TEMPLATE,
-      table: table._id,
-    }
-  })
-}
-
-export const ROW_DETAIL_TEMPLATE = "ROW_DETAIL_TEMPLATE"
-export const rowDetailUrl = table => sanitizeUrl(`/${table.name}/:id`)
-
-const rowListUrl = table => sanitizeUrl(`/${table.name}`)
-
-const getFields = schema => {
-  let columns = []
-  Object.entries(schema || {}).forEach(([field, fieldSchema]) => {
-    if (!field || !fieldSchema) {
-      return
-    }
-    if (!fieldSchema?.autocolumn) {
-      columns.push(field)
-    }
-  })
-  return columns
-}
-
-const generateFormBlock = table => {
-  const datasource = { type: "table", tableId: table._id }
-  const { schema } = getSchemaForDatasource(null, datasource, {
-    formSchema: true,
-  })
-
-  const formBlock = new Component("@budibase/standard-components/formblock")
-  formBlock
-    .customProps({
-      title: "Edit row",
-      actionType: "Update",
-      actionUrl: rowListUrl(table),
-      showDeleteButton: true,
-      showSaveButton: true,
-      fields: getFields(schema),
-      dataSource: {
-        label: table.name,
-        tableId: table._id,
-        type: "table",
-      },
-      labelPosition: "left",
-      size: "spectrum--medium",
-    })
-    .instanceName(`${table.name} - Form block`)
-  return formBlock
-}
-
-const createScreen = table => {
-  return new Screen()
-    .instanceName(`${table.name} - Detail`)
-    .route(rowDetailUrl(table))
-    .addChild(makeBreadcrumbContainer(table.name, "Edit row"))
-    .addChild(generateFormBlock(table))
-    .json()
-}

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

@@ -1,5 +1,4 @@
 import sanitizeUrl from "./utils/sanitizeUrl"
-import { newRowUrl } from "./newRowScreen"
 import { Screen } from "./utils/Screen"
 import { Component } from "./utils/Component"
 
@@ -21,12 +20,6 @@ const generateTableBlock = table => {
   const tableBlock = new Component("@budibase/standard-components/tableblock")
   tableBlock
     .customProps({
-      linkRows: true,
-      linkURL: `${rowListUrl(table)}/:id`,
-      showAutoColumns: false,
-      showTitleButton: true,
-      titleButtonText: "Create row",
-      titleButtonURL: newRowUrl(table),
       title: table.name,
       dataSource: {
         label: table.name,
@@ -34,9 +27,14 @@ const generateTableBlock = table => {
         tableId: table._id,
         type: "table",
       },
+      sortOrder: "Ascending",
       size: "spectrum--medium",
       paginate: true,
       rowCount: 8,
+      clickBehaviour: "details",
+      showTitleButton: true,
+      titleButtonText: "Create row",
+      titleButtonClickBehaviour: "new",
     })
     .instanceName(`${table.name} - Table block`)
   return tableBlock

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

@@ -1,137 +1,6 @@
 import { Component } from "./Component"
-import { rowListUrl } from "../rowListScreen"
 import { getSchemaForDatasource } from "../../../dataBinding"
 
-export function spectrumColor(number) {
-  // Acorn throws a parsing error in this file if the word g-l-o-b-a-l is found
-  // (without dashes - I can't even type it in a comment).
-  // God knows why. It seems to think optional chaining further down the
-  // file is invalid if the word g-l-o-b-a-l is found - hence the reason this
-  // statement is split into parts.
-  return "var(--spectrum-glo" + `bal-color-gray-${number})`
-}
-
-export function makeLinkComponent(tableName) {
-  return new Component("@budibase/standard-components/link")
-    .text(tableName)
-    .customProps({
-      url: `/${tableName.toLowerCase()}`,
-      openInNewTab: false,
-      color: spectrumColor(700),
-      size: "S",
-      align: "left",
-    })
-}
-
-export function makeMainForm() {
-  return new Component("@budibase/standard-components/form")
-    .normalStyle({
-      width: "600px",
-    })
-    .instanceName("Form")
-}
-
-export function makeBreadcrumbContainer(tableName, text) {
-  const link = makeLinkComponent(tableName).instanceName("Back Link")
-
-  const arrowText = new Component("@budibase/standard-components/text")
-    .type("none")
-    .normalStyle({
-      "margin-right": "4px",
-      "margin-left": "4px",
-    })
-    .text(">")
-    .instanceName("Arrow")
-    .customProps({
-      color: spectrumColor(700),
-      size: "S",
-      align: "left",
-    })
-
-  const identifierText = new Component("@budibase/standard-components/text")
-    .text(text)
-    .instanceName("Identifier")
-    .customProps({
-      color: spectrumColor(700),
-      size: "S",
-      align: "left",
-    })
-
-  return new Component("@budibase/standard-components/container")
-    .customProps({
-      gap: "N",
-      direction: "row",
-      hAlign: "left",
-      vAlign: "middle",
-      size: "shrink",
-    })
-    .normalStyle({
-      width: "600px",
-      "margin-right": "auto",
-      "margin-left": "auto",
-    })
-    .instanceName("Breadcrumbs")
-    .addChild(link)
-    .addChild(arrowText)
-    .addChild(identifierText)
-}
-
-export function makeSaveButton(table, formId) {
-  return new Component("@budibase/standard-components/button")
-    .text("Save")
-    .customProps({
-      type: "primary",
-      size: "M",
-      onClick: [
-        {
-          "##eventHandlerType": "Validate Form",
-          parameters: {
-            componentId: formId,
-          },
-        },
-        {
-          parameters: {
-            providerId: formId,
-            tableId: table._id,
-          },
-          "##eventHandlerType": "Save Row",
-        },
-        {
-          parameters: {
-            url: rowListUrl(table),
-          },
-          "##eventHandlerType": "Navigate To",
-        },
-      ],
-    })
-    .instanceName("Save Button")
-}
-
-export function makeTitleContainer(title) {
-  const heading = new Component("@budibase/standard-components/heading")
-    .instanceName("Title")
-    .text(title)
-    .customProps({
-      size: "M",
-      align: "left",
-    })
-
-  return new Component("@budibase/standard-components/container")
-    .normalStyle({
-      "margin-top": "32px",
-      "margin-bottom": "32px",
-    })
-    .customProps({
-      direction: "row",
-      hAlign: "stretch",
-      vAlign: "middle",
-      size: "shrink",
-      gap: "M",
-    })
-    .instanceName("Title Container")
-    .addChild(heading)
-}
-
 const fieldTypeToComponentMap = {
   string: "stringfield",
   number: "numberfield",

packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenWizard.svelte

@@ -127,17 +127,13 @@
 
   // Handler for Datasource Screen Creation
   const completeDatasourceScreenCreation = async () => {
-    // // Handle template selection
+    const screens = selectedTemplates.map(template => {
-    if (selectedTemplates?.length > 1) {
+      let screenTemplate = template.create()
-      // Autoscreens, so create immediately
+      screenTemplate.datasource = template.datasource
-      const screens = selectedTemplates.map(template => {
+      screenTemplate.autoTableId = template.table
-        let screenTemplate = template.create()
+      return screenTemplate
-        screenTemplate.datasource = template.datasource
+    })
-        screenTemplate.autoTableId = template.table
+    await createScreens({ screens, screenAccessRole })
-        return screenTemplate
-      })
-      await createScreens({ screens, screenAccessRole })
-    }
   }
 
   const confirmScreenBlank = async ({ screenUrl }) => {