Merge pull request #1155 from Budibase/bug/fix-binding-issue

Fixing issue with copying/cutting and pasting components with bindings

packages/builder/src/builderStore/dataBinding.js

@@ -7,6 +7,7 @@ import { TableNames } from "../constants"
 
 // Regex to match all instances of template strings
 const CAPTURE_VAR_INSIDE_TEMPLATE = /{{([^}]+)}}/g
+const CAPTURE_HBS_TEMPLATE = /{{[\S\s]*?}}/g
 
 /**
  * Gets all bindable data context fields and instance fields.
@@ -282,6 +283,20 @@ const buildFormSchema = component => {
   return schema
 }
 
+/**
+ * Recurses the input object to remove any instances of bindings.
+ */
+export function removeBindings(obj) {
+  for (let [key, value] of Object.entries(obj)) {
+    if (typeof value === "object") {
+      obj[key] = removeBindings(value)
+    } else if (typeof value === "string") {
+      obj[key] = value.replace(CAPTURE_HBS_TEMPLATE, "Invalid binding")
+    }
+  }
+  return obj
+}
+
 /**
  * utility function for the readableToRuntimeBinding and runtimeToReadableBinding.
  */

packages/builder/src/builderStore/store/frontend.js

@@ -15,6 +15,7 @@ import { FrontendTypes } from "constants"
 import analytics from "analytics"
 import { findComponentType, findComponentParent } from "../storeUtils"
 import { uuid } from "../uuid"
+import { removeBindings } from "../dataBinding"
 
 const INITIAL_FRONTEND_STATE = {
   apps: [],
@@ -408,9 +409,16 @@ export const getFrontendStore = () => {
             return state
           }
 
+          // defines if this is a copy or a cut
+          const cut = state.componentToPaste.isCut
+
+          // immediately need to remove bindings, currently these aren't valid when pasted
+          if (!cut) {
+            state.componentToPaste = removeBindings(state.componentToPaste)
+          }
+
           // Clone the component to paste
           // Retain the same ID if cutting as things may be referencing this component
-          const cut = state.componentToPaste.isCut
           delete state.componentToPaste.isCut
           let componentToPaste = cloneDeep(state.componentToPaste)
           if (cut) {

packages/builder/src/components/integration/QueryViewer.svelte

@@ -204,7 +204,9 @@
         {#if data}
           <Switcher headings={PREVIEW_HEADINGS} bind:value={tab}>
             {#if tab === 'JSON'}
-              <pre class="preview">
+              <pre
+                class="preview">
+                <!-- prettier-ignore -->
                 {#if !data[0]}
                   
                   Please run your query to fetch some data.

packages/server/src/api/controllers/deploy/quota.js

@@ -1,5 +1,10 @@
 const PouchDB = require("../../../db")
-const { DocumentTypes, SEPARATOR, UNICODE_MAX } = require("../../../db/utils")
+const {
+  DocumentTypes,
+  SEPARATOR,
+  UNICODE_MAX,
+  ViewNames,
+} = require("../../../db/utils")
 
 exports.getAppQuota = async function(appId) {
   const db = new PouchDB(appId)
@@ -19,9 +24,16 @@ exports.getAppQuota = async function(appId) {
 
   const designDoc = await db.get("_design/database")
 
+  let views = 0
+  for (let viewName of Object.keys(designDoc.views)) {
+    if (Object.values(ViewNames).indexOf(viewName) === -1) {
+      views++
+    }
+  }
+
   return {
     rows: existingRows,
     users: existingUsers,
-    views: Object.keys(designDoc.views).length,
+    views: views,
   }
 }