Merge pull request #391 from Budibase/data-model-redesign

Data model redesign

packages/builder/package.json

@@ -29,19 +29,24 @@
       "builderStore(.*)$": "<rootDir>/src/builderStore$1"
     },
     "moduleFileExtensions": [
-      "js"
+      "js",
+      "svelte"
     ],
     "moduleDirectories": [
       "node_modules"
     ],
     "transform": {
-      "^.+js$": "babel-jest"
+      "^.+js$": "babel-jest",
+      "^.+.svelte$": "svelte-jester"
     },
     "transformIgnorePatterns": [
       "/node_modules/(?!svelte).+\\.js$"
     ],
     "modulePathIgnorePatterns": [
       "<rootDir>/cypress/"
+    ],
+    "setupFilesAfterEnv": [
+      "@testing-library/jest-dom/extend-expect"
     ]
   },
   "eslintConfig": {
@@ -76,6 +81,8 @@
     "@rollup/plugin-alias": "^3.0.1",
     "@rollup/plugin-json": "^4.0.3",
     "@sveltech/routify": "1.7.11",
+    "@testing-library/jest-dom": "^5.11.0",
+    "@testing-library/svelte": "^3.0.0",
     "babel-jest": "^24.8.0",
     "browser-sync": "^2.26.7",
     "cypress": "^4.8.0",
@@ -97,7 +104,8 @@
     "rollup-plugin-terser": "^4.0.4",
     "rollup-plugin-url": "^2.2.2",
     "start-server-and-test": "^1.11.0",
-    "svelte": "3.23.x"
+    "svelte": "3.23.x",
+    "svelte-jester": "^1.0.6"
   },
   "gitHead": "115189f72a850bfb52b65ec61d932531bf327072"
 }

packages/builder/src/App.svelte

@@ -5,6 +5,18 @@
   import { routes } from "../routify/routes"
   import { store, initialise } from "builderStore"
   import NotificationDisplay from "components/common/Notification/NotificationDisplay.svelte"
+  import { notifier } from "builderStore/store/notifications"
+
+  function showErrorBanner() {
+    notifier.danger(
+      "Whoops! Looks like we're having trouble. Please refresh the page."
+    )
+  }
+
+  onMount(async () => {
+    window.addEventListener("error", showErrorBanner)
+    window.addEventListener("unhandledrejection", showErrorBanner)
+  })
 
   $basepath = "/_builder"
 </script>

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

@@ -1,6 +1,5 @@
 import { writable } from "svelte/store"
 import { cloneDeep } from "lodash/fp"
-import { uuid } from "builderStore/uuid"
 import api from "../api"
 
 export const getBackendUiStore = () => {
@@ -70,9 +69,23 @@ export const getBackendUiStore = () => {
       save: async ({ model }) => {
         const updatedModel = cloneDeep(model)
 
+        // update any renamed schema keys to reflect their names
+        for (let key in updatedModel.schema) {
+          const field = updatedModel.schema[key]
+          // field has been renamed
+          if (field.name && field.name !== key) {
+            updatedModel.schema[field.name] = field
+            updatedModel._rename = { old: key, updated: field.name }
+            delete updatedModel.schema[key]
+          }
+        }
+
         const SAVE_MODEL_URL = `/api/models`
-        await api.post(SAVE_MODEL_URL, updatedModel)
+        console.log(updatedModel)
+        const response = await api.post(SAVE_MODEL_URL, updatedModel)
+        const savedModel = await response.json()
         await store.actions.models.fetch()
+        store.actions.models.select(savedModel)
       },
       addField: field => {
         store.update(state => {
@@ -80,13 +93,11 @@ export const getBackendUiStore = () => {
             state.draftModel.schema = {}
           }
 
-          const id = uuid()
-
           state.draftModel.schema = {
             ...state.draftModel.schema,
-            [id]: field,
+            [field.name]: cloneDeep(field),
           }
-          state.selectedField = id
+          state.selectedField = field.name
           state.tabs.NAVIGATION_PANEL = "NAVIGATE"
 
           return state

packages/builder/src/components/common/LinkedRecordSelector.svelte

@@ -13,7 +13,7 @@
   let linkedRecords = new Set(linked)
 
   $: linked = [...linkedRecords]
-  $: FIELDS_TO_HIDE = [$backendUiStore.selectedModel._id]
+  $: FIELDS_TO_HIDE = [$backendUiStore.selectedModel.name]
   $: schema = $backendUiStore.selectedModel.schema
 
   async function fetchRecords() {
@@ -60,7 +60,7 @@
 
 <style>
   .fields.selected {
-    background: var(--light-grey);
+    background: var(--grey-1);
   }
 
   h3 {

packages/builder/src/components/common/ValuesList.svelte

@@ -44,5 +44,6 @@
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
+    font-family: Inter;
   }
 </style>

packages/builder/src/components/database/ModelDataTable/LinkedRecord.svelte

@@ -11,7 +11,7 @@
   let open = false
   let model
 
-  $: FIELDS_TO_HIDE = [$backendUiStore.selectedModel._id, field.modelId]
+  $: FIELDS_TO_HIDE = [$backendUiStore.selectedModel.name]
 
   async function fetchRecords() {
     const response = await api.post("/api/records/search", {
@@ -88,7 +88,7 @@
     position: absolute;
     right: 15%;
     padding: 20px;
-    background: var(--light-grey);
+    background: var(--grey-1);
     border: 1px solid var(--grey);
   }
 

packages/builder/src/components/nav/ModelNavigator/BlockNavigator.svelte

@@ -58,7 +58,7 @@
     border-radius: 3px;
     color: var(--ink-lighter);
     font-size: 14px;
-    background: var(--light-grey);
+    background: var(--grey-1);
   }
 
   span:hover {

packages/builder/src/components/nav/ModelNavigator/EmptyModel.svelte

@@ -2,6 +2,7 @@
   import { backendUiStore } from "builderStore"
   import { uuid } from "builderStore/uuid"
   import { fade } from "svelte/transition"
+  import { notifier } from "builderStore/store/notifications"
   import { FIELDS, BLOCKS, MODELS } from "constants/backend"
   import Block from "components/common/Block.svelte"
 
@@ -12,19 +13,13 @@
   function createModel(model) {
     const { schema, ...rest } = $backendUiStore.selectedModel
 
-    const newModel = { ...model, schema: {} }
-
-    // TODO: could be better
-    for (let key in model.schema) {
-      newModel.schema[uuid()] = model.schema[key]
-    }
-
     backendUiStore.actions.models.save({
       model: {
-        ...newModel,
+        ...model,
         ...rest,
       },
     })
+    notifier.success(`${model.name} model created.`)
   }
 </script>
 

packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte

@@ -64,13 +64,13 @@
                   on:click={() => selectModel(model)} />
                 {#if model._id === $backendUiStore.selectedModel._id}
                   <div in:slide>
-                    {#each Object.keys(model.schema) as fieldId}
+                    {#each Object.keys(model.schema) as fieldName}
                       <ListItem
-                        selected={model._id === $backendUiStore.selectedModel._id && fieldId === $backendUiStore.selectedField}
+                        selected={model._id === $backendUiStore.selectedModel._id && fieldName === $backendUiStore.selectedField}
                         indented
                         icon="ri-layout-column-fill"
-                        title={model.schema[fieldId].name}
+                        title={model.schema[fieldName].name}
-                        on:click={() => selectModel(model, fieldId)} />
+                        on:click={() => selectModel(model, fieldName)} />
                     {/each}
                   </div>
                 {/if}

packages/builder/src/components/nav/ModelSetupNav/ModelFieldEditor.svelte

@@ -22,18 +22,6 @@
     field.constraints &&
     field.constraints.presence &&
     !constraints.presence.allowEmpty
-
-  function attachModelIdToSchema(evt) {
-    const { draftModel } = $backendUiStore
-    if ($backendUiStore.selectedField !== evt.target.value) {
-      delete draftModel.schema[$backendUiStore.selectedField]
-      draftModel.schema[evt.target.value] = field
-      backendUiStore.update(state => {
-        state.selectedField = evt.target.value
-        return state
-      })
-    }
-  }
 </script>
 
 <div class="info">
@@ -78,10 +66,7 @@
   {:else if field.type === 'link'}
     <div class="field">
       <label>Link</label>
-      <select
+      <select class="budibase__input" bind:value={field.modelId}>
-        class="budibase__input"
-        bind:value={field.modelId}
-        on:change={attachModelIdToSchema}>
         <option value={''} />
         {#each $backendUiStore.models as model}
           {#if model._id !== $backendUiStore.draftModel._id}

packages/server/src/api/controllers/model.js

@@ -24,6 +24,22 @@ exports.save = async function(ctx) {
     ...ctx.request.body,
   }
 
+  // update renamed record fields when model is updated
+  const { _rename } = modelToSave
+  if (_rename) {
+    const records = await db.query(`database/all_${modelToSave._id}`, {
+      include_docs: true,
+    })
+    const docs = records.rows.map(({ doc }) => {
+      doc[_rename.updated] = doc[_rename.old]
+      delete doc[_rename.old]
+      return doc
+    })
+
+    await db.bulkDocs(docs)
+    delete modelToSave._rename
+  }
+
   const result = await db.post(modelToSave)
   modelToSave._rev = result.rev
 
@@ -33,7 +49,7 @@ exports.save = async function(ctx) {
     if (schema[key].type === "link") {
       // create the link field in the other model
       const linkedModel = await db.get(schema[key].modelId)
-      linkedModel.schema[modelToSave._id] = {
+      linkedModel.schema[modelToSave.name] = {
         name: modelToSave.name,
         type: "link",
         modelId: modelToSave._id,
@@ -51,7 +67,7 @@ exports.save = async function(ctx) {
     [`all_${modelToSave._id}`]: {
       map: `function(doc) {
         if (doc.modelId === "${modelToSave._id}") {
-          emit(doc[doc.key], doc._id); 
+          emit(doc._id); 
         }
       }`,
     },
@@ -75,7 +91,7 @@ exports.destroy = async function(ctx) {
   // Delete all records for that model
   const records = await db.query(`database/${modelViewId}`)
   await db.bulkDocs(
-    records.rows.map(record => ({ id: record.id, _deleted: true }))
+    records.rows.map(record => ({ _id: record.id, _deleted: true }))
   )
 
   // Delete linked record fields in dependent models

packages/server/src/api/controllers/record.js

@@ -56,8 +56,8 @@ exports.save = async function(ctx) {
         const doc = row.doc
         return {
           ...doc,
-          [model._id]: doc[model._id]
+          [model.name]: doc[model.name]
-            ? [...doc[model._id], record._id]
+            ? [...doc[model.name], record._id]
             : [record._id],
         }
       })

packages/server/src/api/routes/tests/model.spec.js

@@ -26,7 +26,6 @@ describe("/models", () => {
   })
 
   describe("create", () => {
-
     beforeEach(async () => {
       instance = await createInstance(request, app._id);
     });
@@ -51,6 +50,50 @@ describe("/models", () => {
         });
       })
 
+    it("renames all the record fields for a model when a schema key is renamed", async () => {
+      const testModel = await createModel(request, app._id, instance._id);
+
+      const testRecord = await request
+        .post(`/api/${testModel._id}/records`)
+        .send({
+          name: "test"
+        })
+        .set(defaultHeaders(app._id, instance._id))
+        .expect('Content-Type', /json/)
+        .expect(200)
+
+      const updatedModel = await request
+        .post(`/api/models`)
+        .send({ 
+          _id: testModel._id,
+          _rev: testModel._rev,
+          name: "TestModel",
+          key: "name",
+          _rename: {
+            old: "name",
+            updated: "updatedName"
+          },
+          schema: {
+            updatedName: { type: "string" }
+          }
+        })
+        .set(defaultHeaders(app._id, instance._id))
+        .expect('Content-Type', /json/)
+        .expect(200)
+
+        expect(updatedModel.res.statusMessage).toEqual("Model TestModel saved successfully.");            
+        expect(updatedModel.body.name).toEqual("TestModel");            
+
+        const res = await request
+          .get(`/api/${testModel._id}/records/${testRecord.body._id}`)
+          .set(defaultHeaders(app._id, instance._id))
+          .expect('Content-Type', /json/)
+          .expect(200)
+
+          expect(res.body.updatedName).toEqual("test");
+          expect(res.body.name).toBeUndefined();
+      });
+
       it("should apply authorization to endpoint", async () => {
         await builderEndpointShouldBlockNormalUsers({
           request,