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

Data model redesign
This commit is contained in:
Martin McKeaveney 2020-06-26 10:56:07 +01:00 committed by GitHub
commit 5b7e310ff6
13 changed files with 119 additions and 48 deletions

View File

@ -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"
}

View File

@ -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>

View File

@ -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

View File

@ -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 {

View File

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

View File

@ -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);
}

View File

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

View File

@ -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>

View File

@ -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}
on:click={() => selectModel(model, fieldId)} />
title={model.schema[fieldName].name}
on:click={() => selectModel(model, fieldName)} />
{/each}
</div>
{/if}

View File

@ -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
class="budibase__input"
bind:value={field.modelId}
on:change={attachModelIdToSchema}>
<select class="budibase__input" bind:value={field.modelId}>
<option value={''} />
{#each $backendUiStore.models as model}
{#if model._id !== $backendUiStore.draftModel._id}

View File

@ -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

View File

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

View File

@ -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,