Instance name for components and screens

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

@@ -1,4 +1,5 @@
 import { values } from "lodash/fp"
+import { get_capitalised_name } from "../../helpers"
 import { backendUiStore } from "builderStore"
 import * as backendStoreActions from "./backend"
 import { writable, get } from "svelte/store"
@@ -153,7 +154,6 @@ const createScreen = store => (screenName, route, layoutComponentName) => {
     const rootComponent = state.components[layoutComponentName]
 
     const newScreen = {
-      name: screenName || "",
       description: "",
       url: "",
       _css: "",
@@ -161,6 +161,7 @@ const createScreen = store => (screenName, route, layoutComponentName) => {
     }
 
     newScreen.route = route
+    newScreen.props._instanceName = screenName || ""
     state.currentPreviewItem = newScreen
     state.currentComponentInfo = newScreen.props
     state.currentFrontEndType = "screen"
@@ -336,12 +337,14 @@ const addChildComponent = store => (componentToAdd, presetName) => {
     const presetProps = presetName ? component.presets[presetName] : {}
 
     const instanceId = get(backendUiStore).selectedDatabase._id
+    const instanceName = get_capitalised_name(componentToAdd)
 
     const newComponent = createProps(
       component,
       {
         ...presetProps,
         _instanceId: instanceId,
+        _instanceName: instanceName,
       },
       state
     )

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

@@ -66,6 +66,8 @@
   const onStyleChanged = store.setComponentStyle
   const onPropChanged = store.setComponentProp
 
+  $: displayName = $store.currentFrontEndType === "screen" && componentInstance._instanceName
+
   function walkProps(component, action) {
     action(component)
     if (component.children) {
@@ -99,6 +101,12 @@
     {categories}
     {selectedCategory} />
 
+    {#if displayName}
+      <div class="instance-name">
+        <strong>{componentInstance._instanceName}</strong>
+      </div>
+    {/if}
+
   <div class="component-props-container">
     {#if selectedCategory.value === 'design'}
       <DesignView {panelDefinition} {componentInstance} {onStyleChanged} />
@@ -107,6 +115,7 @@
         {componentInstance}
         {componentDefinition}
         {panelDefinition}
+        displayNameField={displayName}
         onChange={onPropChanged} />
     {:else if selectedCategory.value === 'events'}
       <EventsEditor component={componentInstance} />
@@ -137,9 +146,14 @@
   }
 
   .component-props-container {
-    margin-top: 20px;
+    margin-top: 10px;
     flex: 1 1 auto;
     min-height: 0;
     overflow-y: auto;
   }
+
+  .instance-name {
+    margin-top: 10px;
+    font-size: 12px;
+  }
 </style>

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

@@ -22,48 +22,35 @@
       trimChars(" "),
     ])
 
-  const lastPartOfName = c => {
-    if (!c) return ""
-    const name = c.name ? c.name : c._component ? c._component : c
-    return last(name.split("/"))
-  }
-
-  const isComponentSelected = (current, comp) => current === comp
-
-  $: _screens = pipe(screens, [
-    map(c => ({ component: c, title: lastPartOfName(c) })),
-    sortBy("title"),
-  ])
-
   const changeScreen = screen => {
-    store.setCurrentScreen(screen.title)
+    store.setCurrentScreen(screen.props._instanceName)
     $goto(`./:page/${screen.title}`)
   }
 </script>
 
 <div class="root">
-  {#each _screens as screen}
+  {#each screens as screen}
     <div
       class="budibase__nav-item component"
-      class:selected={$store.currentComponentInfo._id === screen.component.props._id}
+      class:selected={$store.currentComponentInfo._id === screen.props._id}
       on:click|stopPropagation={() => changeScreen(screen)}>
 
       <span
         class="icon"
-        class:rotate={$store.currentPreviewItem.name !== screen.title}>
-        {#if screen.component.props._children.length}
+        class:rotate={$store.currentPreviewItem.name !== screen.props._instanceName}>
+        {#if screen.props._children.length}
           <ArrowDownIcon />
         {/if}
       </span>
 
       <i class="ri-artboard-2-fill icon" />
 
-      <span class="title">{screen.title}</span>
+      <span class="title">{screen.props._instanceName}</span>
     </div>
 
-    {#if $store.currentPreviewItem.name === screen.title && screen.component.props._children}
+    {#if $store.currentPreviewItem.props._instanceName && $store.currentPreviewItem.props._instanceName === screen.props._instanceName && screen.props._children}
       <ComponentsHierarchyChildren
-        components={screen.component.props._children}
+        components={screen.props._children}
         currentComponent={$store.currentComponentInfo} />
     {/if}
   {/each}

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

@@ -42,7 +42,7 @@
         style="padding-left: {level * 20 + 53}px">
         <div class="nav-item">
           <i class="icon ri-arrow-right-circle-fill" />
-          {get_capitalised_name(component._component)}
+          {component._instanceName}
         </div>
         <div class="actions">
           <ComponentDropdownMenu {component} />

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

@@ -1,6 +1,7 @@
 <script>
   import PropertyControl from "./PropertyControl.svelte"
   import InputGroup from "../common/Inputs/InputGroup.svelte"
+  import Input from "../common/Input.svelte"
   import Colorpicker from "../common/Colorpicker.svelte"
   import { excludeProps } from "./propertyCategories.js"
 
@@ -8,6 +9,7 @@
   export let componentDefinition = {}
   export let componentInstance = {}
   export let onChange = () => {}
+  export let displayNameField = false
 
   const propExistsOnComponentDef = prop => prop in componentDefinition.props
 
@@ -16,6 +18,10 @@
   }
 </script>
 
+{#if displayNameField}
+  <PropertyControl control={Input} label="Name" key="_instanceName" value={componentInstance._instanceName} {onChange} />
+{/if}
+
 {#if panelDefinition && panelDefinition.length > 0}
   {#each panelDefinition as definition}
     {#if propExistsOnComponentDef(definition.key)}

packages/builder/src/components/userInterface/pagesParsing/searchComponents.js

@@ -30,8 +30,9 @@ export const searchAllComponents = (components, phrase) => {
 
 export const getExactComponent = (components, name) => {
   const stringEquals = (s1, s2) => normalString(s1) === normalString(s2)
-
-  return pipe(components, [find(c => stringEquals(c.name, name))])
+  return pipe(components, [
+    find(c => stringEquals(c.props._instanceName, name)),
+  ])
 }
 
 export const getAncestorProps = (components, name, found = []) => {

packages/builder/src/helpers.js

@@ -1,3 +1,6 @@
+import { last } from "lodash/fp"
+import { pipe } from "components/common/core"
+
 export const buildStyle = styles => {
   let str = ""
   for (let s in styles) {
@@ -12,3 +15,9 @@ export const buildStyle = styles => {
 export const convertCamel = str => {
   return str.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)
 }
+
+export const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1)
+
+export const get_name = s => (!s ? "" : last(s.split("/")))
+
+export const get_capitalised_name = name => pipe(name, [get_name, capitalise])