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,52 +65,56 @@
   }
 </script>
 
-<ActionMenu>
-  <div slot="control" class="icon">
-    <Icon size="S" hoverable name="MoreSmallList" />
-  </div>
-  <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
-  <MenuItem noClose icon="ChevronUp" on:click={moveUpComponent}>
-    Move up
-  </MenuItem>
-  <MenuItem noClose icon="ChevronDown" on:click={moveDownComponent}>
-    Move down
-  </MenuItem>
-  <MenuItem noClose icon="Duplicate" on:click={duplicateComponent}>
-    Duplicate
-  </MenuItem>
-  <MenuItem icon="Cut" on:click={() => storeComponentForCopy(true)}>
-    Cut
-  </MenuItem>
-  <MenuItem icon="Copy" on:click={() => storeComponentForCopy(false)}>
-    Copy
-  </MenuItem>
-  <MenuItem
-    icon="LayersBringToFront"
-    on:click={() => pasteComponent("above")}
-    disabled={noPaste}
-  >
-    Paste above
-  </MenuItem>
-  <MenuItem
-    icon="LayersSendToBack"
-    on:click={() => pasteComponent("below")}
-    disabled={noPaste}
-  >
-    Paste below
-  </MenuItem>
-  <MenuItem
-    icon="ShowOneLayer"
-    on:click={() => pasteComponent("inside")}
-    disabled={noPaste || noChildrenAllowed}
-  >
-    Paste inside
-  </MenuItem>
-</ActionMenu>
-<ConfirmDialog
-  bind:this={confirmDeleteDialog}
-  title="Confirm Deletion"
-  body={`Are you sure you wish to delete this '${definition?.name}' component?`}
-  okText="Delete Component"
-  onOk={deleteComponent}
-/>
+{#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 noClose icon="ChevronUp" on:click={moveUpComponent}>
+      Move up
+    </MenuItem>
+    <MenuItem noClose icon="ChevronDown" on:click={moveDownComponent}>
+      Move down
+    </MenuItem>
+    <MenuItem noClose icon="Duplicate" on:click={duplicateComponent}>
+      Duplicate
+    </MenuItem>
+    <MenuItem icon="Cut" on:click={() => storeComponentForCopy(true)}>
+      Cut
+    </MenuItem>
+    <MenuItem icon="Copy" on:click={() => storeComponentForCopy(false)}>
+      Copy
+    </MenuItem>
+    <MenuItem
+      icon="LayersBringToFront"
+      on:click={() => pasteComponent("above")}
+      disabled={noPaste}
+    >
+      Paste above
+    </MenuItem>
+    <MenuItem
+      icon="LayersSendToBack"
+      on:click={() => pasteComponent("below")}
+      disabled={noPaste}
+    >
+      Paste below
+    </MenuItem>
+    <MenuItem
+      icon="ShowOneLayer"
+      on:click={() => pasteComponent("inside")}
+      disabled={noPaste || noChildrenAllowed}
+    >
+      Paste inside
+    </MenuItem>
+  </ActionMenu>
+  <ConfirmDialog
+    bind:this={confirmDeleteDialog}
+    title="Confirm Deletion"
+    body={`Are you sure you wish to delete this '${definition?.name}' component?`}
+    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",