diff --git a/packages/builder/package.json b/packages/builder/package.json index 26d6ee3e61..dd449b2256 100644 --- a/packages/builder/package.json +++ b/packages/builder/package.json @@ -29,19 +29,24 @@ "builderStore(.*)$": "/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": [ "/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" } diff --git a/packages/builder/src/App.svelte b/packages/builder/src/App.svelte index d10c04727f..b4ab4b7791 100644 --- a/packages/builder/src/App.svelte +++ b/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" diff --git a/packages/builder/src/builderStore/store/backend.js b/packages/builder/src/builderStore/store/backend.js index b7fbd04f4b..7f156e8c39 100644 --- a/packages/builder/src/builderStore/store/backend.js +++ b/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 = () => { @@ -60,10 +59,6 @@ export const getBackendUiStore = () => { }, select: model => store.update(state => { - model = - typeof model === "string" - ? state.models.find(m => m._id === model) - : model state.selectedModel = model state.draftModel = cloneDeep(model) state.selectedField = "" @@ -73,10 +68,24 @@ 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` + 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((await response.json())._id) + store.actions.models.select(savedModel) }, addField: field => { store.update(state => { @@ -84,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 diff --git a/packages/builder/src/components/common/LinkedRecordSelector.svelte b/packages/builder/src/components/common/LinkedRecordSelector.svelte index bad03f436d..715282efea 100644 --- a/packages/builder/src/components/common/LinkedRecordSelector.svelte +++ b/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 @@ diff --git a/packages/builder/src/components/database/ModelDataTable/LinkedRecord.svelte b/packages/builder/src/components/database/ModelDataTable/LinkedRecord.svelte index 8c7d064c0b..0cbf9ab307 100644 --- a/packages/builder/src/components/database/ModelDataTable/LinkedRecord.svelte +++ b/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); } diff --git a/packages/builder/src/components/nav/ModelNavigator/BlockNavigator.svelte b/packages/builder/src/components/nav/ModelNavigator/BlockNavigator.svelte index 13f4a5223e..275a8291de 100644 --- a/packages/builder/src/components/nav/ModelNavigator/BlockNavigator.svelte +++ b/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 { diff --git a/packages/builder/src/components/nav/ModelNavigator/EmptyModel.svelte b/packages/builder/src/components/nav/ModelNavigator/EmptyModel.svelte index 5feb5b3a57..da01963937 100644 --- a/packages/builder/src/components/nav/ModelNavigator/EmptyModel.svelte +++ b/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.`) } diff --git a/packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte b/packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte index 19778c278f..55a6610243 100644 --- a/packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte +++ b/packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte @@ -64,13 +64,13 @@ on:click={() => selectModel(model)} /> {#if model._id === $backendUiStore.selectedModel._id}
- {#each Object.keys(model.schema) as fieldId} + {#each Object.keys(model.schema) as fieldName} selectModel(model, fieldId)} /> + title={model.schema[fieldName].name} + on:click={() => selectModel(model, fieldName)} /> {/each}
{/if} diff --git a/packages/builder/src/components/nav/ModelSetupNav/ModelFieldEditor.svelte b/packages/builder/src/components/nav/ModelSetupNav/ModelFieldEditor.svelte index 4f69f156e2..e5e7528333 100644 --- a/packages/builder/src/components/nav/ModelSetupNav/ModelFieldEditor.svelte +++ b/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 - }) - } - }
@@ -78,10 +66,7 @@ {:else if field.type === 'link'}
-