Remove a lot of hacks around screenslots and allow naming them

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

@@ -330,15 +330,6 @@ export const getFrontendStore = () => {
         const asset = get(currentAsset)
         const state = get(store)
 
-        // Only allow one screen slot, and in the layout
-        if (componentName.endsWith("screenslot")) {
-          const isLayout = state.currentFrontEndType === FrontendTypes.LAYOUT
-          const slot = findComponentType(asset.props, componentName)
-          if (!isLayout || slot != null) {
-            return
-          }
-        }
-
         // Create new component
         const componentInstance = store.actions.components.createInstance(
           componentName,

packages/builder/src/components/design/AppPreview/componentStructure.json

@@ -57,13 +57,6 @@
       "icon",
       "embed"
     ]
-  },
-  {
-    "name": "Other",
-    "icon": "More",
-    "children": [
-      "screenslot"
-    ]
   }
 ]
 

packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte

@@ -65,11 +65,14 @@
   }
 </script>
 
+{#if definition.editable !== false}
   <ActionMenu>
     <div slot="control" class="icon">
       <Icon size="S" hoverable name="MoreSmallList" />
     </div>
-  <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
+    <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>
+      Delete
+    </MenuItem>
     <MenuItem noClose icon="ChevronUp" on:click={moveUpComponent}>
       Move up
     </MenuItem>
@@ -114,3 +117,4 @@
     okText="Delete Component"
     onOk={deleteComponent}
   />
+{/if}

packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentTree.svelte

@@ -3,6 +3,7 @@
   import { DropEffect, DropPosition } from "./dragDropStore"
   import ComponentDropdownMenu from "../ComponentDropdownMenu.svelte"
   import NavItem from "components/common/NavItem.svelte"
+  import { capitalise } from "helpers"
 
   export let components = []
   export let currentComponent
@@ -10,8 +11,6 @@
   export let level = 0
   export let dragDropStore
 
-  const isScreenslot = name => name?.endsWith("screenslot")
-
   const selectComponent = component => {
     store.actions.components.select(component)
   }
@@ -42,6 +41,16 @@
 
     return false
   }
+
+  const getComponentText = component => {
+    if (component._instanceName) {
+      return component._instanceName
+    }
+    const type =
+      component._component.replace("@budibase/standard-components/", "") ||
+      "component"
+    return capitalise(type)
+  }
 </script>
 
 <ul>
@@ -63,9 +72,7 @@
         on:dragstart={dragstart(component)}
         on:dragover={dragover(component, index)}
         on:drop={dragDropStore.actions.drop}
-        text={isScreenslot(component._component)
-          ? "Screenslot"
-          : component._instanceName}
+        text={getComponentText(component)}
         withArrow
         indentLevel={level + 1}
         selected={$store.selectedComponentId === component._id}

packages/server/src/constants/layouts.js

@@ -15,6 +15,7 @@ const EMPTY_LAYOUT = {
       {
         _id: "7fcf11e4-6f5b-4085-8e0d-9f3d44c98967",
         _component: "@budibase/standard-components/screenslot",
+        _instanceName: "Screen slot",
         _styles: {
           normal: {
             flex: "1 1 auto",
@@ -63,6 +64,7 @@ const BASE_LAYOUTS = [
         {
           _id: "7fcf11e4-6f5b-4085-8e0d-9f3d44c98967",
           _component: "@budibase/standard-components/screenslot",
+          _instanceName: "Screen slot",
           _styles: {
             normal: {
               flex: "1 1 auto",
@@ -109,6 +111,7 @@ const BASE_LAYOUTS = [
         {
           _id: "7fcf11e4-6f5b-4085-8e0d-9f3d44c98967",
           _component: "@budibase/standard-components/screenslot",
+          _instanceName: "Screen slot",
           _styles: {
             normal: {
               flex: "1 1 auto",

packages/standard-components/manifest.json

@@ -230,7 +230,8 @@
   "screenslot": {
     "name": "Screenslot",
     "icon": "WebPage",
-    "description": "Contains your app screens"
+    "description": "Contains your app screens",
+    "editable": false
   },
   "button": {
     "name": "Button",