Add new template for row details autoscreen

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

@@ -1,7 +1,8 @@
 export default function(tables) {
   return tables.map(table => {
-    const fields = Object.keys(table.schema)
+    const heading = table.primaryDisplay
-    const heading = fields.length > 0 ? `{{ data.${fields[0]} }}` : "Detail"
+      ? `{{ data.${table.primaryDisplay} }}`
+      : null
     return {
       name: `${table.name} - Detail`,
       create: () => createScreen(table, heading),
@@ -14,7 +15,7 @@ export const ROW_DETAIL_TEMPLATE = "ROW_DETAIL_TEMPLATE"
 
 const createScreen = (table, heading) => ({
   props: {
-    _id: "",
+    _id: "c683c4ca8ffc849c6bdd3b7d637fbbf3c",
     _component: "@budibase/standard-components/rowdetail",
     _styles: {
       normal: {},
@@ -25,43 +26,22 @@ const createScreen = (table, heading) => ({
     table: table._id,
     _children: [
       {
-        _id: "",
+        _id: "ccad6cc135c7947a7ba9c631f655d6e0f",
-        _component: "@budibase/standard-components/heading",
-        _styles: {
-          normal: {},
-          hover: {},
-          active: {},
-          selected: {},
-        },
-        _code: "",
-        className: "",
-        text: heading,
-        type: "h1",
-        _instanceName: "Heading 1",
-        _children: [],
-      },
-      {
-        _id: "",
-        _component: "@budibase/standard-components/dataform",
-        _styles: {
-          normal: {},
-          hover: {},
-          active: {},
-          selected: {},
-        },
-        _code: "",
-        _instanceName: `${table.name} Form`,
-        _children: [],
-      },
-      {
-        _id: "",
         _component: "@budibase/standard-components/container",
         _styles: {
           normal: {
-            display: "flex",
+            width: "700px",
-            "flex-direction": "row",
+            padding: "0px",
-            "align-items": "center",
+            background: "white",
-            "justify-content": "flex-end",
+            "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",
           },
           hover: {},
           active: {},
@@ -71,24 +51,177 @@ const createScreen = (table, heading) => ({
         className: "",
         onLoad: [],
         type: "div",
-        _instanceName: "Buttons Container",
+        _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
+        _instanceName: "Container",
         _children: [
           {
-            _id: "",
+            _id: "c6e91622ba7984f468f70bf4bf5120246",
-            _component: "@budibase/standard-components/button",
+            _component: "@budibase/standard-components/container",
             _styles: {
               normal: {
-                "margin-right": "20px",
+                "font-size": "14px",
+                color: "#757575",
               },
               hover: {},
               active: {},
               selected: {},
             },
             _code: "",
-            text: "Back",
+            className: "",
+            onLoad: [],
+            type: "div",
+            _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
+            _instanceName: "Breadcrumbs",
+            _children: [
+              {
+                _id: "caa33353c252c4931b2a51b48a559a7fc",
+                _component: "@budibase/standard-components/link",
+                _styles: {
+                  normal: {
+                    color: "#757575",
+                    "text-transform": "capitalize",
+                  },
+                  hover: {
+                    color: "#4285f4",
+                  },
+                  active: {},
+                  selected: {},
+                },
+                _code: "",
+                url: `/${table.name.toLowerCase()}`,
+                openInNewTab: false,
+                text: table.name,
+                color: "",
+                hoverColor: "",
+                underline: false,
+                fontSize: "",
+                fontFamily: "initial",
+                _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
+                _instanceName: "Back Link",
+                _children: [],
+              },
+              {
+                _id: "c6e218170201040e7a74e2c8304fe1860",
+                _component: "@budibase/standard-components/text",
+                _styles: {
+                  normal: {
+                    "margin-right": "4px",
+                    "margin-left": "4px",
+                  },
+                  hover: {},
+                  active: {},
+                  selected: {},
+                },
+                _code: "",
+                text: ">",
+                type: "none",
+                _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
+                _instanceName: "Arrow",
+                _children: [],
+              },
+              {
+                _id: "c799da1fa3a84442e947cc9199518f64c",
+                _component: "@budibase/standard-components/text",
+                _styles: {
+                  normal: {
+                    color: "#000000",
+                    "text-transform": "capitalize",
+                  },
+                  hover: {},
+                  active: {},
+                  selected: {},
+                },
+                _code: "",
+                text: heading || "Edit",
+                type: "none",
+                _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
+                _instanceName: "Identifier",
+                _children: [],
+              },
+            ],
+          },
+          {
+            _id: "cbd1637cd1e274287a3c28ef0bf235d08",
+            _component: "@budibase/standard-components/container",
+            _styles: {
+              normal: {
+                display: "flex",
+                "flex-direction": "row",
+                "justify-content": "space-between",
+                "align-items": "center",
+                "margin-top": "32px",
+                "margin-bottom": "32px",
+              },
+              hover: {},
+              active: {},
+              selected: {},
+            },
+            _code: "",
+            className: "",
+            onLoad: [],
+            type: "div",
+            _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
+            _instanceName: "Title Container",
+            _children: [
+              {
+                _id: "c98d3675d04114558bbf28661c5ccfb8e",
+                _component: "@budibase/standard-components/heading",
+                _styles: {
+                  normal: {
+                    margin: "0px",
+                    "margin-bottom": "0px",
+                    "margin-right": "0px",
+                    "margin-top": "0px",
+                    "margin-left": "0px",
+                    flex: "1 1 auto",
+                    "text-transform": "capitalize",
+                  },
+                  hover: {},
+                  active: {},
+                  selected: {},
+                },
+                _code: "",
+                className: "",
+                text: heading || "Edit Row",
+                type: "h3",
+                _instanceName: "Title",
+                _children: [],
+              },
+              {
+                _id: "c0a162cfb7d1c4bcfa8d24c290ccd1fd6",
+                _component: "@budibase/standard-components/button",
+                _styles: {
+                  normal: {
+                    background: "transparent",
+                    "border-width": "0",
+                    "border-style": "None",
+                    color: "#9e9e9e",
+                    "font-family": "Inter",
+                    "font-weight": "500",
+                    "font-size": "14px",
+                    "margin-right": "8px",
+                    "margin-left": "16px",
+                  },
+                  hover: {
+                    background: "transparent",
+                    color: "#000000",
+                  },
+                  active: {},
+                  selected: {},
+                },
+                _code: "",
+                text: "Delete",
                 className: "",
                 disabled: false,
                 onClick: [
+                  {
+                    parameters: {
+                      rowId: "{{ data._id }}",
+                      revId: "{{ data._rev }}",
+                      tableId: table._id,
+                    },
+                    "##eventHandlerType": "Delete Row",
+                  },
                   {
                     parameters: {
                       url: `/${table.name.toLowerCase()}`,
@@ -96,15 +229,25 @@ const createScreen = (table, heading) => ({
                     "##eventHandlerType": "Navigate To",
                   },
                 ],
-            _instanceName: "Back Button",
+                _instanceName: "Delete Button",
                 _children: [],
               },
               {
-            _id: "",
+                _id: "cae402bd3c6a44618a8341bf7ab9ab086",
                 _component: "@budibase/standard-components/button",
                 _styles: {
-              normal: {},
+                  normal: {
-              hover: {},
+                    background: "#000000",
+                    "border-width": "0",
+                    "border-style": "None",
+                    color: "#fff",
+                    "font-family": "Inter",
+                    "font-weight": "500",
+                    "font-size": "14px",
+                  },
+                  hover: {
+                    background: "#9e9e9e",
+                  },
                   active: {},
                   selected: {},
                 },
@@ -120,12 +263,34 @@ const createScreen = (table, heading) => ({
                     },
                     "##eventHandlerType": "Save Row",
                   },
+                  {
+                    parameters: {
+                      url: `/${table.name.toLowerCase()}`,
+                    },
+                    "##eventHandlerType": "Navigate To",
+                  },
                 ],
                 _instanceName: "Save Button",
                 _children: [],
               },
             ],
           },
+          {
+            _id: "c5e6c98d7363640f9ad3a7d19c8c10f67",
+            _component: "@budibase/standard-components/dataformwide",
+            _styles: {
+              normal: {},
+              hover: {},
+              active: {},
+              selected: {},
+            },
+            _code: "",
+            _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
+            _instanceName: "Form",
+            _children: [],
+          },
+        ],
+      },
     ],
     _instanceName: `${table.name} - Detail`,
     _code: "",