Merge branch 'master' of github.com:Budibase/budibase into feature/self-hosting

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

@@ -83,17 +83,16 @@ export const getFrontendStore = () => {
       },
     },
     screens: {
-      select: screenId => {
+      select: async screenId => {
         store.update(state => {
-          const screens = get(allScreens)
+          const screen = get(allScreens).find(screen => screen._id === screenId)
-          let selectedScreen = screens.find(screen => screen._id === screenId)
+          if (!screen) return state
-          if (!selectedScreen) {
+
-            selectedScreen = screens[0]
-          }
           state.currentFrontEndType = FrontendTypes.SCREEN
-          state.currentAssetId = selectedScreen._id
+          state.currentAssetId = screenId
           state.currentView = "detail"
-          state.selectedComponentId = selectedScreen.props._id
+          state.selectedComponentId = screen.props?._id
+
           return state
         })
       },
@@ -147,6 +146,9 @@ export const getFrontendStore = () => {
                 `/api/screens/${screenToDelete._id}/${screenToDelete._rev}`
               )
             )
+            if (screenToDelete._id === state.currentAssetId) {
+              state.currentAssetId = ""
+            }
           }
           return state
         })
@@ -171,8 +173,10 @@ export const getFrontendStore = () => {
           const layout = store.actions.layouts.find(layoutId)
           state.currentFrontEndType = FrontendTypes.LAYOUT
           state.currentView = "detail"
+
           state.currentAssetId = layout._id
-          state.selectedComponentId = layout.props._id
+          state.selectedComponentId = layout.props?._id
+
           return state
         })
       },
@@ -197,7 +201,6 @@ export const getFrontendStore = () => {
           }
 
           state.currentAssetId = json._id
-          state.selectedComponentId = json.props._id
           return state
         })
       },

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

@@ -18,7 +18,7 @@ export default function(tables) {
   })
 }
 
-export const newRowUrl = table => sanitizeUrl(`/${table.name}/new`)
+export const newRowUrl = table => sanitizeUrl(`/${table.name}/new/row`)
 export const NEW_ROW_TEMPLATE = "NEW_ROW_TEMPLATE"
 
 function generateTitleContainer(table) {

packages/builder/src/components/userInterface/ComponentNavigationTree/ScreenDropdownMenu.svelte

@@ -15,8 +15,15 @@
   $: screen = $allScreens.find(screen => screen._id === screenId)
 
   const deleteScreen = () => {
-    store.actions.screens.delete(screen)
+    try {
-    store.actions.routing.fetch()
+      store.actions.screens.delete(screen)
+      store.actions.routing.fetch()
+      confirmDeleteDialog.hide()
+      $goto("../")
+      notifier.success("Deleted screen successfully.")
+    } catch (err) {
+      notifier.danger("Error deleting screen")
+    }
   }
 </script>
 

packages/builder/src/components/userInterface/DesignView.svelte

@@ -12,8 +12,6 @@
   let propGroup = null
   let currentGroup
 
-  const getProperties = name => panelDefinition[name]
-
   function onChange(category) {
     selectedCategory = category
   }
@@ -38,7 +36,7 @@
         {#each propertyGroupNames as groupName}
           <PropertyGroup
             name={groupName}
-            properties={getProperties(groupName)}
+            properties={panelDefinition[groupName]}
             styleCategory={selectedCategory}
             {onStyleChanged}
             {componentDefinition}
@@ -64,9 +62,6 @@
     gap: var(--spacing-l);
   }
 
-  .design-view-state-categories {
-  }
-
   .positioned-wrapper {
     position: relative;
     display: flex;

packages/builder/src/components/userInterface/FlatButtonGroup.svelte

@@ -1,6 +1,7 @@
 <script>
   import { onMount } from "svelte"
   import FlatButton from "./FlatButton.svelte"
+
   export let buttonProps = []
   export let isMultiSelect = false
   export let value = []

packages/builder/src/components/userInterface/LayoutsList.svelte

@@ -1,64 +0,0 @@
-<script>
-  import { params, goto } from "@sveltech/routify"
-  import { store } from "builderStore"
-
-  const layouts = [
-    {
-      title: "Private",
-      id: "main",
-    },
-    {
-      title: "Public",
-      id: "unauthenticated",
-    },
-  ]
-
-  if (!$store.currentAssetId) {
-    // refactor so the right layout is chosen
-    store.actions.layouts.select($params.layout)
-  }
-
-  const changeLayout = id => {
-    store.actions.layouts.select(id)
-    $goto(`./${id}/layout`)
-  }
-</script>
-
-<div class="root">
-  {#each layouts as { title, id }}
-    <button
-      class:active={id === $params.layout}
-      on:click={() => changeLayout(id)}>
-      {title}
-    </button>
-  {/each}
-</div>
-
-<style>
-  .root {
-    display: flex;
-    flex-direction: row;
-  }
-
-  button {
-    cursor: pointer;
-    padding: 0 var(--spacing-m);
-    height: 32px;
-    text-align: center;
-    background: var(--background);
-    color: var(--grey-7);
-    border-radius: 5px;
-    font-size: var(--font-size-xs);
-    font-weight: 500;
-    transition: all 0.3s;
-    text-rendering: optimizeLegibility;
-    border: none !important;
-    outline: none;
-    font-family: var(--font-sans);
-  }
-
-  .active {
-    background: var(--grey-2);
-    color: var(--ink);
-  }
-</style>

packages/builder/src/components/userInterface/PropertyControl.svelte

@@ -22,16 +22,14 @@
   export let onChange = () => {}
 
   let temporaryBindableValue = value
+  let bindableProperties = []
+  let anchor
+  let dropdown
 
   function handleClose() {
     handleChange(key, temporaryBindableValue)
   }
 
-  let bindableProperties = []
-
-  let anchor
-  let dropdown
-
   function getBindableProperties() {
     // Get all bindableProperties
     bindableProperties = fetchBindableProperties({
@@ -77,7 +75,7 @@
       : temp
   }
 
-  //Incase the component has a different value key name
+  // Incase the component has a different value key name
   const handlevalueKey = value =>
     props.valueKey ? { [props.valueKey]: safeValue() } : { value: safeValue() }
 </script>
@@ -94,7 +92,7 @@
       {...props}
       name={key} />
   </div>
-  {#if bindable && control === Input && !key.startsWith('_')}
+  {#if bindable && !key.startsWith('_') && control === Input}
     <div
       class="icon"
       data-cy={`${key}-binding-button`}

packages/builder/src/components/userInterface/temporaryPanelStructure.js

@@ -310,15 +310,15 @@ export default {
               },
               {
                 label: "Link Color",
-                key: "color",
+                key: "linkColor",
-                control: Input,
+                control: Colorpicker,
-                placeholder: "Link Color",
+                defaultValue: "#000",
               },
               {
                 label: "Hover Color",
                 key: "linkHoverColor",
-                control: Input,
+                control: Colorpicker,
-                placeholder: "Hover Color",
+                defaultValue: "#222",
               },
               {
                 label: "Image Height",
@@ -385,15 +385,15 @@ export default {
               },
               {
                 label: "Link Color",
-                key: "color",
+                key: "linkColor",
-                control: Input,
+                control: Colorpicker,
-                placeholder: "Link Color",
+                defaultValue: "#000",
               },
               {
                 label: "Hover Color",
                 key: "linkHoverColor",
-                control: Input,
+                control: Colorpicker,
-                placeholder: "Hover Color",
+                defaultValue: "#222",
               },
               {
                 label: "Card Width",

packages/server/package.json

@@ -12,7 +12,6 @@
     "icon": "./build/icons/512x512.png",
     "appId": "com.budibase.builder",
     "productName": "Budibase Builder",
-    "afterSign": "electron-builder-notarize",
     "mac": {
       "icon": "./assets/icons/icon.icns",
       "category": "public.app-category.developer-tools",
@@ -87,6 +86,7 @@
     "pouchdb-all-dbs": "^1.0.2",
     "pouchdb-replication-stream": "^1.2.9",
     "sanitize-s3-objectkey": "^0.0.1",
+    "server-destroy": "^1.0.1",
     "svelte": "^3.30.0",
     "tar-fs": "^2.1.0",
     "to-json-schema": "^0.2.5",
@@ -105,7 +105,6 @@
     "jest": "^24.8.0",
     "nodemon": "^2.0.4",
     "pouchdb-adapter-memory": "^7.2.1",
-    "server-destroy": "^1.0.1",
     "supertest": "^4.0.2"
   },
   "jest": {

packages/standard-components/components.json

@@ -234,8 +234,14 @@
 			"description": "string",
 			"linkText": "string",
 			"linkUrl": "string",
-			"color": "string",
+			"linkColor": {
-			"linkHoverColor": "string",
+				"type": "string",
+				"default": "#000"
+			},
+			"linkHoverColor": {
+				"type": "string",
+				"default": "#000"
+			},
 			"imageHeight": {
 				"type": "options",
 				"default": "20rem",
@@ -274,8 +280,14 @@
 			"subtext": "string",
 			"linkText": "string",
 			"linkUrl": "string",
-			"color": "string",
+			"linkColor": {
-			"linkHoverColor": "string",
+				"type": "string",
+				"default": "#000"
+			},
+			"linkHoverColor": {
+				"type": "string",
+				"default": "#000"
+			},
 			"imageWidth": {
 				"type": "options",
 				"default": "8rem",

packages/standard-components/src/Card.svelte

@@ -11,14 +11,12 @@
   export let description = ""
   export let linkText = ""
   export let linkUrl
-  export let color
+  export let linkColor
   export let linkHoverColor
   export let imageHeight
   export let cardWidth
 
   $: cssVariables = {
-    color,
-    linkHoverColor,
     imageHeight,
     cardWidth,
   }
@@ -29,12 +27,13 @@
 <div
   use:cssVars={cssVariables}
   class="container"
-  use:styleable={$component.styles}>
+  use:styleable={$component.styles}
-  {#if showImage}<img class="image" src={imageUrl} alt="" />{/if}
+  style="--cardWidth: {cardWidth}">
+  {#if showImage}<img style="--imageWidth: {imageWidth}; --imageHeight: {imageHeight}" class="image" src={imageUrl} alt="" />{/if}
   <div class="content">
     <h2 class="heading">{heading}</h2>
     <h4 class="text">{description}</h4>
-    <a href={linkUrl}>{linkText}</a>
+    <a style="--linkColor: {linkColor}; --linkHoverColor: {linkHoverColor}" href={linkUrl}>{linkText}</a>
   </div>
 </div>
 
@@ -75,7 +74,7 @@
   a {
     margin: 0.5rem 0;
     text-decoration: none;
-    color: var(--color);
+    color: var(--linkColor);
     font-weight: 600;
   }
 

packages/standard-components/src/CardHorizontal.svelte

@@ -1,6 +1,5 @@
 <script>
   import { getContext } from "svelte"
-  import { cssVars } from "./helpers"
 
   const { styleable } = getContext("sdk")
   const component = getContext("component")
@@ -12,36 +11,28 @@
   export let subtext = ""
   export let linkText = ""
   export let linkUrl
-  export let color
+  export let linkColor
   export let linkHoverColor
   export let cardWidth
   export let imageWidth
   export let imageHeight
 
-  $: cssVariables = {
-    color,
-    linkHoverColor,
-    imageWidth,
-    cardWidth,
-    imageHeight,
-  }
-
   $: showImage = !!imageUrl
 </script>
 
 <div
-  use:cssVars={cssVariables}
+  use:styleable={$component.styles}
   class="container"
-  use:styleable={$component.styles}>
+  style="--cardWidth: {cardWidth}">
-  {#if showImage}<img class="image" src={imageUrl} alt="" />{/if}
+  {#if showImage}<img style="--imageWidth: {imageWidth}; --imageHeight: {imageHeight}" class="image" src={imageUrl} alt="" />{/if}
   <div class="content">
     <main>
       <h2 class="heading">{heading}</h2>
       <p class="text">{description}</p>
     </main>
-    <footer>
+    <footer >
       <p class="subtext">{subtext}</p>
-      <a href={linkUrl}>{linkText}</a>
+      <a style="--linkColor: {linkColor}; --linkHoverColor: {linkHoverColor}" href={linkUrl}>{linkText}</a>
     </footer>
   </div>
 </div>
@@ -97,7 +88,7 @@
   a {
     margin: 0.5rem 0 0 0;
     text-decoration: none;
-    color: var(--color);
+    color: var(--linkColor);
     font-weight: 600;
     font-size: 0.85rem;
     margin: 0;