From 3dcef29ddd1bd818eb278a492469872406ba6d2b Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Thu, 4 Jun 2020 18:08:50 +0100
Subject: [PATCH 1/8] Instance name for components and screens

---
 .../builder/src/builderStore/store/index.js   |  5 +++-
 .../ComponentPropertiesPanel.svelte           | 16 +++++++++-
 .../userInterface/ComponentsHierarchy.svelte  | 29 +++++--------------
 .../ComponentsHierarchyChildren.svelte        |  2 +-
 .../userInterface/SettingsView.svelte         |  6 ++++
 .../pagesParsing/searchComponents.js          |  5 ++--
 packages/builder/src/helpers.js               |  9 ++++++
 7 files changed, 46 insertions(+), 26 deletions(-)

diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js
index 9f91550bca..80fc9eb8f3 100644
--- a/packages/builder/src/builderStore/store/index.js
+++ b/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
     )
diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index 7d33b9c963..2716cb751b 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/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>
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
index 041377aedc..69edfe53da 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
+++ b/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}
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
index 43473a85a3..67d8cc096a 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
+++ b/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} />
diff --git a/packages/builder/src/components/userInterface/SettingsView.svelte b/packages/builder/src/components/userInterface/SettingsView.svelte
index 99e704d1d9..bde6ce2455 100644
--- a/packages/builder/src/components/userInterface/SettingsView.svelte
+++ b/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)}
diff --git a/packages/builder/src/components/userInterface/pagesParsing/searchComponents.js b/packages/builder/src/components/userInterface/pagesParsing/searchComponents.js
index 8269f3521b..b4c6c1fee2 100644
--- a/packages/builder/src/components/userInterface/pagesParsing/searchComponents.js
+++ b/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 = []) => {
diff --git a/packages/builder/src/helpers.js b/packages/builder/src/helpers.js
index 5d9ff750af..3ea37e5a67 100644
--- a/packages/builder/src/helpers.js
+++ b/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])

From c1e9133424bba4f9184a55662862f5a8e582c9af Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Mon, 15 Jun 2020 16:01:24 +0100
Subject: [PATCH 2/8] Instance naming fix for components and screens

---
 .../builder/src/builderStore/store/index.js   | 23 ++++--
 .../builder/src/builderStore/storeUtils.js    |  5 +-
 .../ComponentPropertiesPanel.svelte           | 17 +++--
 .../userInterface/ComponentsHierarchy.svelte  |  2 +-
 .../ComponentsHierarchyChildren.svelte        |  3 +-
 .../userInterface/SettingsView.svelte         | 22 ++----
 .../pagesParsing/renameScreen.js              | 16 ++--
 .../pagesParsing/searchComponents.js          | 10 ++-
 packages/builder/tests/renameScreen.spec.js   | 53 -------------
 .../tests/searchComponentsProps.spec.js       | 75 +++++++++++--------
 packages/builder/tests/testData.js            | 22 +++---
 .../server/src/utilities/builder/index.js     |  3 +-
 12 files changed, 117 insertions(+), 134 deletions(-)
 delete mode 100644 packages/builder/tests/renameScreen.spec.js

diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js
index b62c2ae1d4..e67739f725 100644
--- a/packages/builder/src/builderStore/store/index.js
+++ b/packages/builder/src/builderStore/store/index.js
@@ -70,6 +70,7 @@ export const getStore = () => {
   store.getPathToComponent = getPathToComponent(store)
   store.addTemplatedComponent = addTemplatedComponent(store)
   store.setMetadataProp = setMetadataProp(store)
+  store.editPageOrScreen = editPageOrScreen(store)
   return store
 }
 
@@ -159,7 +160,6 @@ const createScreen = store => (screenName, route, layoutComponentName) => {
       _css: "",
       props: createProps(rootComponent).props,
     }
-
     newScreen.route = route
     newScreen.props._instanceName = screenName || ""
     state.currentPreviewItem = newScreen
@@ -174,7 +174,7 @@ const createScreen = store => (screenName, route, layoutComponentName) => {
 
 const setCurrentScreen = store => screenName => {
   store.update(s => {
-    const screen = getExactComponent(s.screens, screenName)
+    const screen = getExactComponent(s.screens, screenName, true)
     s.currentPreviewItem = screen
     s.currentFrontEndType = "screen"
     s.currentView = "detail"
@@ -245,6 +245,7 @@ const setCurrentPage = store => pageName => {
     const currentPage = state.pages[pageName]
 
     state.currentFrontEndType = "page"
+    state.currentView = "detail"
     state.currentPageName = pageName
     state.screens = Array.isArray(current_screens)
       ? current_screens
@@ -365,12 +366,12 @@ const setComponentProp = store => (name, value) => {
 
 const setPageOrScreenProp = store => (name, value) => {
   store.update(state => {
-    if (name === "name" && state.currentFrontEndType === "screen") {
-      state = renameCurrentScreen(value, state)
+    if (name === "_instanceName" && state.currentFrontEndType === "screen") {
+      state.currentPreviewItem.props[name] = value
     } else {
       state.currentPreviewItem[name] = value
-      _saveCurrentPreviewItem(state)
     }
+    _saveCurrentPreviewItem(state)
     return state
   })
 }
@@ -420,6 +421,18 @@ const setScreenType = store => type => {
 
     state.currentComponentInfo = pageOrScreen ? pageOrScreen.props : null
     state.currentPreviewItem = pageOrScreen
+    state.currentView = "detail"
+    return state
+  })
+}
+
+const editPageOrScreen = store => (key, value, setOnComponent = false) => {
+  store.update(state => {
+    setOnComponent
+      ? (state.currentPreviewItem.props[key] = value)
+      : (state.currentPreviewItem[key] = value)
+    _saveCurrentPreviewItem(state)
+
     return state
   })
 }
diff --git a/packages/builder/src/builderStore/storeUtils.js b/packages/builder/src/builderStore/storeUtils.js
index ff951e6b6f..63fd7ecd00 100644
--- a/packages/builder/src/builderStore/storeUtils.js
+++ b/packages/builder/src/builderStore/storeUtils.js
@@ -46,8 +46,9 @@ export const saveScreenApi = (screen, s) => {
 }
 
 export const renameCurrentScreen = (newname, state) => {
-  const oldname = state.currentPreviewItem.name
-  state.currentPreviewItem.name = newname
+  const oldname = state.currentPreviewItem.props._instanceName
+  state.currentPreviewItem.props._instanceName = newname
+
   api.patch(
     `/_builder/api/${state.appId}/pages/${state.currentPageName}/screen`,
     {
diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index c020dc70b9..d25caf08a8 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@@ -1,6 +1,7 @@
 <script>
   import { setContext, onMount } from "svelte"
   import PropsView from "./PropsView.svelte"
+
   import { store } from "builderStore"
   import IconButton from "components/common/IconButton.svelte"
   import {
@@ -29,7 +30,7 @@
   let selectedCategory = categories[0]
 
   $: components = $store.components
-  $: componentInstance = $store.currentComponentInfo
+  $: componentInstance = $store.currentView !== "component" ? {...$store.currentPreviewItem, ...$store.currentComponentInfo} : $store.currentComponentInfo
   $: componentDefinition = $store.components[componentInstance._component]
   $: componentPropDefinition =
     flattenedPanel.find(
@@ -43,9 +44,16 @@
       componentPropDefinition.properties[selectedCategory.value]
 
   const onStyleChanged = store.setComponentStyle
-  const onPropChanged = store.setComponentProp
 
-  $: displayName = $store.currentFrontEndType === "screen" && componentInstance._instanceName
+   function onPropChanged(key, value) {
+    if($store.currentView !== "component") {
+      store.setPageOrScreenProp(key, value)
+      return
+    }
+    store.setComponentProp(key, value)
+  }
+
+  $: displayName = ( $store.currentView === "component" || $store.currentFrontEndType === "screen") && componentInstance._instanceName && componentInstance._component !== "##builtin/screenslot"
 
   function walkProps(component, action) {
     action(component)
@@ -95,8 +103,7 @@
         {componentDefinition}
         {panelDefinition}
         displayNameField={displayName}
-        onChange={onPropChanged} />
-        onScreenPropChange={store.setPageOrScreenProp}
+        onChange={onPropChanged}
         screenOrPageInstance={$store.currentView !== "component" && $store.currentPreviewItem} />
     {:else if selectedCategory.value === 'events'}
       <EventsEditor component={componentInstance} />
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
index 69edfe53da..6bc5b10497 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
@@ -7,7 +7,7 @@
   import { store } from "builderStore"
   import { ArrowDownIcon, ShapeIcon } from "components/common/Icons/"
 
-  export let screens = []
+  export let screens = []  
 
   let confirmDeleteDialog
   let componentToDelete = ""
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
index 67d8cc096a..960d1dc1b5 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
@@ -20,6 +20,7 @@
   const get_name = s => (!s ? "" : last(s.split("/")))
 
   const get_capitalised_name = name => pipe(name, [get_name, capitalise])
+  const isScreenslot = name => name === "##builtin/screenslot"
 
   const selectComponent = component => {
     // Set current component
@@ -42,7 +43,7 @@
         style="padding-left: {level * 20 + 53}px">
         <div class="nav-item">
           <i class="icon ri-arrow-right-circle-fill" />
-          {component._instanceName}
+          {isScreenslot(component._component) ? "Screenslot" : component._instanceName}
         </div>
         <div class="actions">
           <ComponentDropdownMenu {component} />
diff --git a/packages/builder/src/components/userInterface/SettingsView.svelte b/packages/builder/src/components/userInterface/SettingsView.svelte
index 4c3f86d2cb..a1d19f3a5c 100644
--- a/packages/builder/src/components/userInterface/SettingsView.svelte
+++ b/packages/builder/src/components/userInterface/SettingsView.svelte
@@ -5,32 +5,24 @@
   import Colorpicker from "../common/Colorpicker.svelte"
   import { goto } from "@sveltech/routify"
   import { excludeProps } from "./propertyCategories.js"
-  import Input from "../common/Input.svelte"
 
   export let panelDefinition = []
   export let componentDefinition = {}
   export let componentInstance = {}
   export let onChange = () => {}
   export let displayNameField = false
-  export let onScreenPropChange = () => {}
   export let screenOrPageInstance
 
-  const propExistsOnComponentDef = prop => prop in componentDefinition.props
+  let pageScreenProps = ["title","favicon", "description", "route"]
+  
+  const propExistsOnComponentDef = prop => pageScreenProps.includes(prop) || prop in componentDefinition.props
 
   function handleChange(key, data) {
     data.target ? onChange(key, data.target.value) : onChange(key, data)
   }
 
-  function handleScreenPropChange (name, value) {
-    onScreenPropChange(name,value)
-    if(!isPage && name === "name") {
-      // screen name is changed... change URL
-      $goto(`./:page/${value}`)
-    }
-  }
 
   const screenDefinition = [
-    { key: "name", label: "Name", control: Input },
     { key: "description", label: "Description", control: Input },
     { key: "route", label: "Route", control: Input },
   ]
@@ -45,8 +37,6 @@
 
 </script>
 
-<!-- {#if displayNameField}
-  <PropertyControl control={Input} label="Name" key="_instanceName" value={componentInstance._instanceName} {onChange} /> -->
 {#if screenOrPageInstance}
   {#each screenOrPageDefinition as def}
     <PropertyControl
@@ -54,12 +44,16 @@
         label={def.label}
         key={def.key}
         value={screenOrPageInstance[def.key]}
-        onChange={handleScreenPropChange}
+        {onChange}
         props={{ ...excludeProps(def, ['control', 'label']) }} />
   {/each}
   <hr/>
 {/if}
 
+{#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)}
diff --git a/packages/builder/src/components/userInterface/pagesParsing/renameScreen.js b/packages/builder/src/components/userInterface/pagesParsing/renameScreen.js
index 6ad5dd0053..1808ecffc4 100644
--- a/packages/builder/src/components/userInterface/pagesParsing/renameScreen.js
+++ b/packages/builder/src/components/userInterface/pagesParsing/renameScreen.js
@@ -6,7 +6,7 @@ export const rename = (pages, screens, oldname, newname) => {
   screens = cloneDeep(screens)
   const changedScreens = []
 
-  const existingWithNewName = getExactComponent(screens, newname)
+  const existingWithNewName = getExactComponent(screens, newname, true)
   if (existingWithNewName)
     return {
       components: screens,
@@ -38,19 +38,19 @@ export const rename = (pages, screens, oldname, newname) => {
   for (let screen of screens) {
     let hasEdited = false
 
-    if (screen.name === oldname) {
-      screen.name = newname
-      hasEdited = true
-    }
+    // if (screen.name === oldname) {
+    //   screen.name = newname
+    //   hasEdited = true
+    // }
 
-    if (screen.props._component === oldname) {
-      screen.props._component = newname
+    if (screen.props.instanceName === oldname) {
+      screen.props.instanceName = newname
       hasEdited = true
     }
 
     hasEdited = traverseProps(screen.props) || hasEdited
 
-    if (hasEdited && screen.name !== newname) changedScreens.push(screen.name)
+    if (hasEdited && screen.props.instanceName !== newname) changedScreens.push(screen.props.instanceName)
   }
 
   for (let pageName in pages) {
diff --git a/packages/builder/src/components/userInterface/pagesParsing/searchComponents.js b/packages/builder/src/components/userInterface/pagesParsing/searchComponents.js
index b4c6c1fee2..cb44030e1d 100644
--- a/packages/builder/src/components/userInterface/pagesParsing/searchComponents.js
+++ b/packages/builder/src/components/userInterface/pagesParsing/searchComponents.js
@@ -16,7 +16,7 @@ export const searchAllComponents = (components, phrase) => {
     pipe(vals, [some(v => includes(normalString(phrase))(normalString(v)))])
 
   const componentMatches = c => {
-    if (hasPhrase(c.name, ...(c.tags || []))) return true
+    if (hasPhrase(c._instanceName, ...(c.tags || []))) return true
 
     if (isRootComponent(c)) return false
 
@@ -28,10 +28,14 @@ export const searchAllComponents = (components, phrase) => {
   return filter(componentMatches)(components)
 }
 
-export const getExactComponent = (components, name) => {
+export const getExactComponent = (components, name, isScreen = false) => {
   const stringEquals = (s1, s2) => normalString(s1) === normalString(s2)
   return pipe(components, [
-    find(c => stringEquals(c.props._instanceName, name)),
+    find(c =>
+      isScreen
+        ? stringEquals(c.props._instanceName, name)
+        : stringEquals(c._instanceName, name)
+    ),
   ])
 }
 
diff --git a/packages/builder/tests/renameScreen.spec.js b/packages/builder/tests/renameScreen.spec.js
deleted file mode 100644
index 9091c029ce..0000000000
--- a/packages/builder/tests/renameScreen.spec.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import { getExactComponent } from "../src/components/userInterface/pagesParsing/searchComponents"
-import { rename } from "../src/components/userInterface/pagesParsing/renameScreen"
-import { componentsAndScreens } from "./testData"
-
-describe("rename component", () => {
-  it("should change the name of the component, duh", () => {
-    const { screens } = componentsAndScreens()
-
-    const result = rename({}, screens, "PrimaryButton", "MainButton")
-
-    const newComponent = getExactComponent(result.screens, "MainButton")
-    const oldComponent = getExactComponent(result.screens, "Primary")
-    expect(oldComponent).toBeUndefined()
-    expect(newComponent).toBeDefined()
-    expect(newComponent.name).toBe("MainButton")
-  })
-
-  /* this may be usefull if we have user defined components
-    it("should change name of nested _components", () => {
-        const {screens} = componentsAndScreens();
-        const result = rename({}, screens, "PrimaryButton", "MainButton");
-
-        const buttonGroup = getExactComponent(result.screens, "ButtonGroup");
-        expect(buttonGroup.props.header[0]._component).toBe("MainButton");
-
-    });
-    */
-
-  it("should change name of page appBody", () => {
-    const { screens } = componentsAndScreens()
-    const pages = {
-      main: {
-        appBody: "PrimaryButton",
-      },
-    }
-
-    const result = rename(pages, screens, "PrimaryButton", "MainButton")
-    expect(result.pages.main.appBody).toBe("MainButton")
-  })
-
-  /* this may be usefull if we have user defined components
-    it("should return a list of changed components", () => {
-        const {screens} = componentsAndScreens();
-        const result = rename({}, screens, "PrimaryButton", "MainButton");
-
-        expect(result.changedScreens).toEqual(["ButtonGroup"]);
-
-        const result2 = rename({}, screens, "common/SmallTextbox", "common/TinyTextBox");
-        expect(result2.changedScreens).toEqual(["Field"]);
-
-    });
-    */
-})
diff --git a/packages/builder/tests/searchComponentsProps.spec.js b/packages/builder/tests/searchComponentsProps.spec.js
index 65f05b064e..9a95e842b9 100644
--- a/packages/builder/tests/searchComponentsProps.spec.js
+++ b/packages/builder/tests/searchComponentsProps.spec.js
@@ -4,9 +4,10 @@ import {
   getAncestorProps,
 } from "../src/components/userInterface/pagesParsing/searchComponents"
 import { componentsAndScreens } from "./testData"
-
+/* 
+//searchAllComponents used in ComponentSearch which is no longer used in the Builder
 describe("searchAllComponents", () => {
-  it("should match component by name", () => {
+  it.only("should match component by name", () => {
     const results = searchAllComponents(
       componentsAndScreens().components,
       "Textbox"
@@ -25,50 +26,60 @@ describe("searchAllComponents", () => {
     expect(results.length).toBe(1)
     expect(results[0].name).toBe("budibase-components/RecordView")
   })
-})
+}) */
 
 describe("getExactComponent", () => {
   it("should get component by name", () => {
-    const { components, screens } = componentsAndScreens()
+    const { components } = componentsAndScreens()
     const result = getExactComponent(
-      [...components, ...screens],
-      "common/SmallTextbox"
+      components,
+      "TextBox"
     )
 
     expect(result).toBeDefined()
-    expect(result.name).toBe("common/SmallTextbox")
+    expect(result._instanceName).toBe("TextBox")
   })
 
-  it("should return nothing when no result (should not fail)", () => {
-    const { components, screens } = componentsAndScreens()
-    const result = getExactComponent([...components, ...screens], "bla/bla/bla")
+  test("Should not find as isScreen is not specified", () => {
+    const { screens } = componentsAndScreens()
+    const result = getExactComponent(screens, "SmallTextbox")
 
     expect(result).not.toBeDefined()
   })
-})
 
-describe("getAncestorProps", () => {
-  it("should return props of root component", () => {
-    const result = getAncestorProps(
-      componentsAndScreens().components,
-      "budibase-components/TextBox"
-    )
+  test("Should find as isScreen is specified", () => {
+    const { screens } = componentsAndScreens()
+    const result = getExactComponent(screens, "SmallTextbox", true)
 
-    expect(result).toEqual([componentsAndScreens().components[0].props])
-  })
+    expect(result).toBeDefined()
+    expect(result.props._instanceName).toBe("SmallTextbox")
 
-  it("should return props of inherited and current component, in order", () => {
-    const { components, screens } = componentsAndScreens()
-    const allComponentsAndScreens = [...components, ...screens]
-
-    const result = getAncestorProps(
-      allComponentsAndScreens,
-      "common/PasswordBox"
-    )
-
-    expect(result).toEqual([
-      allComponentsAndScreens[0].props,
-      { ...allComponentsAndScreens[5].props },
-    ])
   })
 })
+
+// Commented as not used anywhere
+//describe("getAncestorProps", () => {
+//   it("should return props of root component", () => {
+//     const result = getAncestorProps(
+//       componentsAndScreens().components,
+//       "budibase-components/TextBox"
+//     )
+
+//     expect(result).toEqual([componentsAndScreens().components[0].props])
+//   })
+
+//   it("should return props of inherited and current component, in order", () => {
+//     const { components, screens } = componentsAndScreens()
+//     const allComponentsAndScreens = [...components, ...screens]
+
+//     const result = getAncestorProps(
+//       allComponentsAndScreens,
+//       "common/PasswordBox"
+//     )
+
+//     expect(result).toEqual([
+//       allComponentsAndScreens[0].props,
+//       { ...allComponentsAndScreens[5].props },
+//     ])
+//   })
+// })
diff --git a/packages/builder/tests/testData.js b/packages/builder/tests/testData.js
index bc4a73cdab..79cadb1b65 100644
--- a/packages/builder/tests/testData.js
+++ b/packages/builder/tests/testData.js
@@ -1,7 +1,7 @@
 export const componentsAndScreens = () => ({
   components: [
     {
-      name: "budibase-components/TextBox",
+      _instanceName: "TextBox",
       tags: ["Text", "input"],
       children: false,
       props: {
@@ -12,7 +12,7 @@ export const componentsAndScreens = () => ({
       },
     },
     {
-      name: "budibase-components/Button",
+      _instanceName: "Button",
       tags: ["input"],
       children: true,
       props: {
@@ -22,14 +22,14 @@ export const componentsAndScreens = () => ({
       },
     },
     {
-      name: "budibase-components/div",
+      _instanceName: "div",
       tags: ["input"],
       props: {
         width: "number",
       },
     },
     {
-      name: "budibase-components/RecordView",
+      _instanceName: "Record View",
       tags: ["record"],
       props: {
         data: "state",
@@ -38,9 +38,9 @@ export const componentsAndScreens = () => ({
   ],
   screens: [
     {
-      name: "common/SmallTextbox",
       props: {
         _component: "budibase-components/TextBox",
+        _instanceName: "SmallTextbox",
         size: "small",
       },
     },
@@ -50,36 +50,40 @@ export const componentsAndScreens = () => ({
       tags: ["mask"],
       props: {
         _component: "budibase-components/TextBox",
+        _instanceName: "PasswordBox",
         isPassword: true,
         size: "small",
       },
     },
 
     {
-      name: "PrimaryButton",
       props: {
         _component: "budibase-components/Button",
+        _instanceName: "PrimaryButton",
         css: "btn-primary",
       },
     },
 
-    {
-      name: "Screen 1",
+    {      
       route: "",
       props: {
         _component: "budibase-components/div",
         width: 100,
+        _instanceName: "Screen 1",
         _children: [
           {
             _component: "budibase-components/Button",
             contentText: "Button 1",
+            _instanceName: "Button 1",
           },
           {
             _component: "budibase-components/Button",
             contentText: "Button 2",
+            _instanceName: "Button 2",
           },
           {
             _component: "budibase-components/TextBox",
+            _instanceName: "TextBox",
             isPassword: true,
             size: "small",
           },
@@ -88,9 +92,9 @@ export const componentsAndScreens = () => ({
     },
 
     {
-      name: "Field",
       props: {
         _component: "budibase-components/div",
+        _instanceName: "Field",
         _children: [
           {
             _component: "common/SmallTextbox",
diff --git a/packages/server/src/utilities/builder/index.js b/packages/server/src/utilities/builder/index.js
index 7b9a6a69ec..23b6167304 100644
--- a/packages/server/src/utilities/builder/index.js
+++ b/packages/server/src/utilities/builder/index.js
@@ -41,7 +41,8 @@ const screenPath = (appPath, pageName, name) =>
 
 module.exports.saveScreen = async (config, appname, pagename, screen) => {
   const appPath = appPackageFolder(config, appname)
-  const compPath = screenPath(appPath, pagename, screen.name)
+  const compPath = screenPath(appPath, pagename, screen.props._id)
+  
   await ensureDir(dirname(compPath))
   if (screen._css) {
     delete screen._css

From 3bcd93d49087c187ec804d7233c659f06cb8c6f6 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Mon, 15 Jun 2020 16:02:11 +0100
Subject: [PATCH 3/8] Lint fixes

---
 .../src/components/userInterface/pagesParsing/renameScreen.js  | 3 ++-
 packages/builder/tests/testData.js                             | 2 +-
 packages/server/src/utilities/builder/index.js                 | 2 +-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/components/userInterface/pagesParsing/renameScreen.js b/packages/builder/src/components/userInterface/pagesParsing/renameScreen.js
index 1808ecffc4..72736446a1 100644
--- a/packages/builder/src/components/userInterface/pagesParsing/renameScreen.js
+++ b/packages/builder/src/components/userInterface/pagesParsing/renameScreen.js
@@ -50,7 +50,8 @@ export const rename = (pages, screens, oldname, newname) => {
 
     hasEdited = traverseProps(screen.props) || hasEdited
 
-    if (hasEdited && screen.props.instanceName !== newname) changedScreens.push(screen.props.instanceName)
+    if (hasEdited && screen.props.instanceName !== newname)
+      changedScreens.push(screen.props.instanceName)
   }
 
   for (let pageName in pages) {
diff --git a/packages/builder/tests/testData.js b/packages/builder/tests/testData.js
index 79cadb1b65..d2703ad335 100644
--- a/packages/builder/tests/testData.js
+++ b/packages/builder/tests/testData.js
@@ -64,7 +64,7 @@ export const componentsAndScreens = () => ({
       },
     },
 
-    {      
+    {
       route: "",
       props: {
         _component: "budibase-components/div",
diff --git a/packages/server/src/utilities/builder/index.js b/packages/server/src/utilities/builder/index.js
index 23b6167304..f63e34a8cd 100644
--- a/packages/server/src/utilities/builder/index.js
+++ b/packages/server/src/utilities/builder/index.js
@@ -42,7 +42,7 @@ const screenPath = (appPath, pageName, name) =>
 module.exports.saveScreen = async (config, appname, pagename, screen) => {
   const appPath = appPackageFolder(config, appname)
   const compPath = screenPath(appPath, pagename, screen.props._id)
-  
+
   await ensureDir(dirname(compPath))
   if (screen._css) {
     delete screen._css

From 8bae0e49c561aabdb0535bdee2d390cecf89b271 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Mon, 15 Jun 2020 18:39:10 +0100
Subject: [PATCH 4/8] Lint fix

---
 packages/builder/src/builderStore/store/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js
index e67739f725..7f6e2a7979 100644
--- a/packages/builder/src/builderStore/store/index.js
+++ b/packages/builder/src/builderStore/store/index.js
@@ -24,7 +24,6 @@ import {
   saveCurrentPreviewItem as _saveCurrentPreviewItem,
   saveScreenApi as _saveScreenApi,
   regenerateCssForCurrentScreen,
-  renameCurrentScreen,
 } from "../storeUtils"
 
 export const getStore = () => {

From 306c73309405cf26e7449c7aa43aea321f2740ce Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Wed, 24 Jun 2020 16:16:06 +0100
Subject: [PATCH 5/8] Cypress Tests and Discussion Resolves

---
 .../cypress/integration/screens.spec.js       | 22 +++++++++++++++++++
 packages/builder/cypress/support/commands.js  | 22 +++++++++++++++++++
 .../builder/src/builderStore/store/index.js   |  7 +++---
 .../ComponentPropertiesPanel.svelte           |  5 ++++-
 .../pagesParsing/renameScreen.js              |  5 -----
 .../pagesParsing/searchComponents.js          |  9 +-------
 6 files changed, 52 insertions(+), 18 deletions(-)
 create mode 100644 packages/builder/cypress/integration/screens.spec.js

diff --git a/packages/builder/cypress/integration/screens.spec.js b/packages/builder/cypress/integration/screens.spec.js
new file mode 100644
index 0000000000..43f7d44917
--- /dev/null
+++ b/packages/builder/cypress/integration/screens.spec.js
@@ -0,0 +1,22 @@
+
+context('Screen Tests', () => {
+    before(() => {
+        cy.visit('localhost:4001/_builder')
+        cy.createApp('Conor Cy App', 'Model App Description')
+        cy.navigateToFrontend()
+    })
+
+    it('Should successful create a screen', () => { 
+        cy.createScreen("test Screen")        
+    })
+
+    it('Should rename a screen', () => {
+        cy.get(".components-pane").within(() => {
+            cy.contains("Settings").click()
+            cy.get("input[name=_instanceName]").clear().type("About Us").blur()
+        })
+        cy.get('.nav-items-container').within(() => {
+            cy.contains("About Us").should('exist')
+        })
+    })
+})
\ No newline at end of file
diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js
index ed19ba8233..f777adc333 100644
--- a/packages/builder/cypress/support/commands.js
+++ b/packages/builder/cypress/support/commands.js
@@ -103,3 +103,25 @@ Cypress.Commands.add("addButtonComponent", () => {
 
   cy.get("[data-cy=Button]").click()
 })
+
+Cypress.Commands.add('navigateToFrontend', () => {
+  cy.wait(4000)     
+  cy.get(".close").click()
+  cy.contains('frontend').click()
+  cy.wait(2000)     
+  cy.get(".close").click()
+})
+
+Cypress.Commands.add("createScreen", (screenName, route) => {
+    cy.get(".newscreen").click()
+    cy.get(".uk-input:first").type(screenName)
+    if(route) {
+      cy.get(".uk-input:last").type(route)
+    }
+    cy.get('.uk-modal-footer').within(() => {
+        cy.contains('Create Screen').click()
+    })
+    cy.get('.nav-items-container').within(() => {
+        cy.contains(screenName).should('exist')
+    })
+})
\ No newline at end of file
diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js
index 7f6e2a7979..11f2ed365e 100644
--- a/packages/builder/src/builderStore/store/index.js
+++ b/packages/builder/src/builderStore/store/index.js
@@ -353,12 +353,11 @@ const selectComponent = store => component => {
 
 const setComponentProp = store => (name, value) => {
   store.update(state => {
-    const current_component = state.currentComponentInfo
-    state.currentComponentInfo[name] = value
-
-    _saveCurrentPreviewItem(state)
+    let current_component = state.currentComponentInfo
+    current_component[name] = value
 
     state.currentComponentInfo = current_component
+    _saveCurrentPreviewItem(state)
     return state
   })
 }
diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index ad07f8458f..0850125de1 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@@ -54,7 +54,10 @@
     store.setComponentProp(key, value)
   }
 
-  $: displayName = ( $store.currentView === "component" || $store.currentFrontEndType === "screen") && componentInstance._instanceName && componentInstance._component !== "##builtin/screenslot"
+  $: isComponentOrScreen =  $store.currentView === "component" || $store.currentFrontEndType === "screen" 
+  $: isNotScreenslot = componentInstance._component !== "##builtin/screenslot"
+
+  $: displayName = isComponentOrScreen && componentInstance._instanceName && isNotScreenslot
 
   function walkProps(component, action) {
     action(component)
diff --git a/packages/builder/src/components/userInterface/pagesParsing/renameScreen.js b/packages/builder/src/components/userInterface/pagesParsing/renameScreen.js
index 72736446a1..6c351664d8 100644
--- a/packages/builder/src/components/userInterface/pagesParsing/renameScreen.js
+++ b/packages/builder/src/components/userInterface/pagesParsing/renameScreen.js
@@ -38,11 +38,6 @@ export const rename = (pages, screens, oldname, newname) => {
   for (let screen of screens) {
     let hasEdited = false
 
-    // if (screen.name === oldname) {
-    //   screen.name = newname
-    //   hasEdited = true
-    // }
-
     if (screen.props.instanceName === oldname) {
       screen.props.instanceName = newname
       hasEdited = true
diff --git a/packages/builder/src/components/userInterface/pagesParsing/searchComponents.js b/packages/builder/src/components/userInterface/pagesParsing/searchComponents.js
index cb44030e1d..58ab70a5df 100644
--- a/packages/builder/src/components/userInterface/pagesParsing/searchComponents.js
+++ b/packages/builder/src/components/userInterface/pagesParsing/searchComponents.js
@@ -29,14 +29,7 @@ export const searchAllComponents = (components, phrase) => {
 }
 
 export const getExactComponent = (components, name, isScreen = false) => {
-  const stringEquals = (s1, s2) => normalString(s1) === normalString(s2)
-  return pipe(components, [
-    find(c =>
-      isScreen
-        ? stringEquals(c.props._instanceName, name)
-        : stringEquals(c._instanceName, name)
-    ),
-  ])
+  return components.find(c => isScreen ? c.props._instanceName === name : c._instanceName === name)
 }
 
 export const getAncestorProps = (components, name, found = []) => {

From df5a9ee87aad1faa96e5c6e1671ea2a970234e70 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Wed, 24 Jun 2020 16:20:58 +0100
Subject: [PATCH 6/8] Lint fixes

---
 packages/builder/cypress/support/commands.js  | 32 +++++++++----------
 .../pagesParsing/searchComponents.js          |  4 ++-
 2 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js
index f777adc333..41b55597d1 100644
--- a/packages/builder/cypress/support/commands.js
+++ b/packages/builder/cypress/support/commands.js
@@ -104,24 +104,24 @@ Cypress.Commands.add("addButtonComponent", () => {
   cy.get("[data-cy=Button]").click()
 })
 
-Cypress.Commands.add('navigateToFrontend', () => {
-  cy.wait(4000)     
+Cypress.Commands.add("navigateToFrontend", () => {
+  cy.wait(4000)
   cy.get(".close").click()
-  cy.contains('frontend').click()
-  cy.wait(2000)     
+  cy.contains("frontend").click()
+  cy.wait(2000)
   cy.get(".close").click()
 })
 
 Cypress.Commands.add("createScreen", (screenName, route) => {
-    cy.get(".newscreen").click()
-    cy.get(".uk-input:first").type(screenName)
-    if(route) {
-      cy.get(".uk-input:last").type(route)
-    }
-    cy.get('.uk-modal-footer').within(() => {
-        cy.contains('Create Screen').click()
-    })
-    cy.get('.nav-items-container').within(() => {
-        cy.contains(screenName).should('exist')
-    })
-})
\ No newline at end of file
+  cy.get(".newscreen").click()
+  cy.get(".uk-input:first").type(screenName)
+  if (route) {
+    cy.get(".uk-input:last").type(route)
+  }
+  cy.get(".uk-modal-footer").within(() => {
+    cy.contains("Create Screen").click()
+  })
+  cy.get(".nav-items-container").within(() => {
+    cy.contains(screenName).should("exist")
+  })
+})
diff --git a/packages/builder/src/components/userInterface/pagesParsing/searchComponents.js b/packages/builder/src/components/userInterface/pagesParsing/searchComponents.js
index 58ab70a5df..25c2cfcc26 100644
--- a/packages/builder/src/components/userInterface/pagesParsing/searchComponents.js
+++ b/packages/builder/src/components/userInterface/pagesParsing/searchComponents.js
@@ -29,7 +29,9 @@ export const searchAllComponents = (components, phrase) => {
 }
 
 export const getExactComponent = (components, name, isScreen = false) => {
-  return components.find(c => isScreen ? c.props._instanceName === name : c._instanceName === name)
+  return components.find(c =>
+    isScreen ? c.props._instanceName === name : c._instanceName === name
+  )
 }
 
 export const getAncestorProps = (components, name, found = []) => {

From ff3e922e220201eb8eaa09d0b6701d45413ac700 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Wed, 24 Jun 2020 16:58:30 +0100
Subject: [PATCH 7/8] Cypress Tests - Use Get Timeouts

---
 packages/builder/cypress/support/commands.js                | 6 ++----
 .../userInterface/pagesParsing/searchComponents.js          | 2 +-
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js
index 41b55597d1..33ae53d6da 100644
--- a/packages/builder/cypress/support/commands.js
+++ b/packages/builder/cypress/support/commands.js
@@ -105,11 +105,9 @@ Cypress.Commands.add("addButtonComponent", () => {
 })
 
 Cypress.Commands.add("navigateToFrontend", () => {
-  cy.wait(4000)
-  cy.get(".close").click()
+  cy.get(".close", { timeout: 10000 }).click()
   cy.contains("frontend").click()
-  cy.wait(2000)
-  cy.get(".close").click()
+  cy.get(".close", { timeout: 10000 }).click()
 })
 
 Cypress.Commands.add("createScreen", (screenName, route) => {
diff --git a/packages/builder/src/components/userInterface/pagesParsing/searchComponents.js b/packages/builder/src/components/userInterface/pagesParsing/searchComponents.js
index 25c2cfcc26..7ac0dd20ba 100644
--- a/packages/builder/src/components/userInterface/pagesParsing/searchComponents.js
+++ b/packages/builder/src/components/userInterface/pagesParsing/searchComponents.js
@@ -1,4 +1,4 @@
-import { find, isUndefined, filter, some, includes } from "lodash/fp"
+import { isUndefined, filter, some, includes } from "lodash/fp"
 import { pipe } from "components/common/core"
 
 const normalString = s => (s || "").trim().toLowerCase()

From 13a2accda2e249bbe02061891ccf4c48a1a43171 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Wed, 24 Jun 2020 17:05:49 +0100
Subject: [PATCH 8/8] Remove Comments

---
 .../tests/searchComponentsProps.spec.js       | 48 -------------------
 1 file changed, 48 deletions(-)

diff --git a/packages/builder/tests/searchComponentsProps.spec.js b/packages/builder/tests/searchComponentsProps.spec.js
index 9a95e842b9..461440dfd3 100644
--- a/packages/builder/tests/searchComponentsProps.spec.js
+++ b/packages/builder/tests/searchComponentsProps.spec.js
@@ -4,29 +4,7 @@ import {
   getAncestorProps,
 } from "../src/components/userInterface/pagesParsing/searchComponents"
 import { componentsAndScreens } from "./testData"
-/* 
-//searchAllComponents used in ComponentSearch which is no longer used in the Builder
-describe("searchAllComponents", () => {
-  it.only("should match component by name", () => {
-    const results = searchAllComponents(
-      componentsAndScreens().components,
-      "Textbox"
-    )
 
-    expect(results.length).toBe(1)
-    expect(results[0].name).toBe("budibase-components/TextBox")
-  })
-
-  it("should match component by tag", () => {
-    const results = searchAllComponents(
-      componentsAndScreens().components,
-      "record"
-    )
-
-    expect(results.length).toBe(1)
-    expect(results[0].name).toBe("budibase-components/RecordView")
-  })
-}) */
 
 describe("getExactComponent", () => {
   it("should get component by name", () => {
@@ -57,29 +35,3 @@ describe("getExactComponent", () => {
   })
 })
 
-// Commented as not used anywhere
-//describe("getAncestorProps", () => {
-//   it("should return props of root component", () => {
-//     const result = getAncestorProps(
-//       componentsAndScreens().components,
-//       "budibase-components/TextBox"
-//     )
-
-//     expect(result).toEqual([componentsAndScreens().components[0].props])
-//   })
-
-//   it("should return props of inherited and current component, in order", () => {
-//     const { components, screens } = componentsAndScreens()
-//     const allComponentsAndScreens = [...components, ...screens]
-
-//     const result = getAncestorProps(
-//       allComponentsAndScreens,
-//       "common/PasswordBox"
-//     )
-
-//     expect(result).toEqual([
-//       allComponentsAndScreens[0].props,
-//       { ...allComponentsAndScreens[5].props },
-//     ])
-//   })
-// })