From 0d7d9f471eff5bfeca16061d8cd46eadb92f6672 Mon Sep 17 00:00:00 2001
From: michael shanks <mike@budibase.com>
Date: Fri, 16 Aug 2019 15:48:45 +0100
Subject: [PATCH] Edit component pane improvements

---
 packages/builder/src/builderStore/store.js    |  24 ++
 packages/builder/src/common/IconButton.svelte |  11 +-
 .../ComponentPropSelector.svelte              | 136 +++++++++++
 .../src/userInterface/ComponentSearch.svelte  |   7 +-
 .../src/userInterface/EditComponent.svelte    | 223 ++++++++++++++++++
 .../src/userInterface/NewComponent.svelte     | 111 +--------
 .../src/userInterface/PropControl.svelte      |  54 +++++
 .../src/userInterface/PropsView.svelte        | 160 +++++++------
 .../userInterface/UserInterfaceRoot.svelte    |  15 +-
 .../userInterface/pagesParsing/createProps.js |   4 +-
 .../builder/tests/getComponentInfo.spec.js    |   6 +-
 11 files changed, 569 insertions(+), 182 deletions(-)
 create mode 100644 packages/builder/src/userInterface/ComponentPropSelector.svelte
 create mode 100644 packages/builder/src/userInterface/EditComponent.svelte
 create mode 100644 packages/builder/src/userInterface/PropControl.svelte

diff --git a/packages/builder/src/builderStore/store.js b/packages/builder/src/builderStore/store.js
index a6a681b469..a810f36afb 100644
--- a/packages/builder/src/builderStore/store.js
+++ b/packages/builder/src/builderStore/store.js
@@ -26,6 +26,10 @@ import {writable} from "svelte/store";
 import { defaultPagesObject } from "../userInterface/pagesParsing/defaultPagesObject"
 import api from "./api";
 import { isRootComponent } from "../userInterface/pagesParsing/searchComponents";
+import { 
+    getComponentInfo, 
+    getNewComponentInfo 
+} from "../userInterface/pagesParsing/createProps";
 
 export const getStore = () => {
 
@@ -40,6 +44,8 @@ export const getStore = () => {
         unauthenticatedUi:{},
         allComponents:[],
         currentFrontEndItem:null,
+        currentComponentInfo:null,
+        currentComponentIsNew:false,
         currentNodeIsNew: false,
         errors: [],
         activeNav: "database",
@@ -75,6 +81,7 @@ export const getStore = () => {
     store.deleteDerivedComponent = deleteDerivedComponent(store);
     store.setCurrentComponent = setCurrentComponent(store);
     store.setCurrentPage = setCurrentPage(store);
+    store.createDerivedComponent = createDerivedComponent(store);
     return store;
 } 
 
@@ -384,6 +391,18 @@ const saveDerivedComponent = store => (derivedComponent) => {
     })
 };
 
+const createDerivedComponent = store => (componentName) => {
+    store.update(s => {
+        const newComponentInfo = getNewComponentInfo(
+            s.allComponents, componentName);
+
+        s.currentFrontEndItem = newComponentInfo.component;
+        s.currentComponentInfo = newComponentInfo;
+        s.currentComponentIsNew = true;
+        return s;
+    });
+}
+
 const deleteDerivedComponent = store => name => {
     store.update(s => {
 
@@ -392,6 +411,9 @@ const deleteDerivedComponent = store => name => {
         ]);
 
         s.allComponents = allComponents;
+        if(s.currentFrontEndItem.name === name) {
+            s.currentFrontEndItem = null;
+        }
 
         api.delete(`/_builder/api/${s.appname}/derivedcomponent/${name}`);
 
@@ -502,6 +524,8 @@ const setCurrentComponent = store => component => {
     store.update(s => {
         s.currentFrontEndItem = component;
         s.currentFrontEndIsComponent = true;
+        s.currentComponentIsNew = false;
+        s.currentComponentInfo = getComponentInfo(s.allComponents, component.name);
         return s;
     })
 }
diff --git a/packages/builder/src/common/IconButton.svelte b/packages/builder/src/common/IconButton.svelte
index 5880cd90bc..ea520cfa17 100644
--- a/packages/builder/src/common/IconButton.svelte
+++ b/packages/builder/src/common/IconButton.svelte
@@ -40,7 +40,7 @@ const addAttributes = (node, attributes) => {
 
 </script>
 
-<button style="{style} color:{color}"
+<button style="{style} color:{color} --hovercolor:{hoverColor}"
         on:click
         use:addAttributes={attributes}>
     {@html getIcon(icon, size)}
@@ -53,6 +53,15 @@ button {
     border-style: none;
     background-color: rgba(0,0,0,0);
     cursor: pointer;
+    outline:none;
+}
+
+button:hover {
+    color: var(--hovercolor);
+}
+
+button:active {
+    outline:none;
 }
 
 </style>
\ No newline at end of file
diff --git a/packages/builder/src/userInterface/ComponentPropSelector.svelte b/packages/builder/src/userInterface/ComponentPropSelector.svelte
new file mode 100644
index 0000000000..8d0b5d86ea
--- /dev/null
+++ b/packages/builder/src/userInterface/ComponentPropSelector.svelte
@@ -0,0 +1,136 @@
+<script>
+import {
+    last
+} from "lodash/fp";
+import IconButton from "../common/IconButton.svelte";
+import ComponentSearch from "./ComponentSearch.svelte";
+import Button from "../common/Button.svelte";
+import ButtonGroup from "../common/ButtonGroup.svelte";
+import UIkit from "uikit";
+import {
+    getComponentInfo
+} from "./pagesParsing/createProps";
+import { store } from "../builderStore";
+
+const emptyProps = () => ({_component:""})
+
+export let props = emptyProps();
+export let onValueChanged = () => {};
+export let label = ""
+export let disabled = false;
+
+const CHOOSE_COMPONENT = "choose_component";
+const CLEAR_COMPONENT = "clear_component";
+
+let allComponents;
+let modalElement;
+let modalAction;
+
+store.subscribe(s => {
+    allComponents = s.allComponents;
+});
+
+$: componentSelected = props._component.length > 0;
+$: shortName = last(props._component.split("/"));
+
+const chooseComponent = () => {
+    modalAction = CHOOSE_COMPONENT;
+    showDialog();
+}
+
+const clearComponent = () => {
+    modalAction = CLEAR_COMPONENT;
+    showDialog();
+}
+
+const onComponentChosen = (component) => {
+    const componentInfo = getComponentInfo(allComponents, component.name);
+    props = componentInfo.fullProps;
+    onValueChanged(props);
+    hideDialog();
+}
+
+const hideDialog = () => {
+    UIkit.modal(modalElement).hide();
+}
+
+const showDialog = () => {
+    UIkit.modal(modalElement).show();
+}
+
+const confirmClearComponent = () => {
+    props = emptyProps();
+    onValueChanged(emptyProps());
+    hideDialog();
+}
+
+</script>
+
+
+<label class="uk-form-label">{label}</label>
+<div class="root uk-form-controls">
+    <div class:selectedname={componentSelected}>
+        {componentSelected ?  shortName : "(none)"}
+    </div>
+    <div>
+        {#if !disabled && componentSelected}
+        <IconButton icon="edit" />
+
+        <IconButton icon="trash" 
+                    on:click={clearComponent} />
+        {:else if !disabled && !componentSelected}
+        <IconButton icon="plus" 
+                    on:click={chooseComponent} />
+        {/if}
+        
+    </div>
+</div>
+
+<div bind:this={modalElement} uk-modal>
+    <div class="uk-modal-dialog">
+
+        {#if modalAction === CHOOSE_COMPONENT}
+        <div class="uk-modal-body">
+            <ComponentSearch {onComponentChosen} />
+        </div>
+        {:else if modalAction === CLEAR_COMPONENT}
+        <div class="uk-modal-body">
+            Clear this component ?
+        </div>
+        <div class="uk-modal-footer">
+            <ButtonGroup>
+                <Button grouped 
+                        on:click={hideDialog} 
+                        color="secondary" >Cancel</Button>
+                <Button grouped 
+                        on:click={confirmClearComponent}>OK</Button>
+            </ButtonGroup>
+        </div>
+        {/if}
+
+    </div>
+
+</div>
+
+<style>
+
+.root {
+    display: grid;
+    grid-template-columns: [name] 1fr [actions] auto;
+}
+
+.root > div:nth-child(1) {
+    grid-column-start: name;
+    color: var(--secondary50);
+}
+
+.root > div:nth-child(2) {
+    grid-column-start: actions;
+}
+
+.selectedname {
+    font-weight: bold;
+    color: var(--secondary);
+}
+
+</style>
\ No newline at end of file
diff --git a/packages/builder/src/userInterface/ComponentSearch.svelte b/packages/builder/src/userInterface/ComponentSearch.svelte
index fb182ec722..f580dbb604 100644
--- a/packages/builder/src/userInterface/ComponentSearch.svelte
+++ b/packages/builder/src/userInterface/ComponentSearch.svelte
@@ -1,12 +1,17 @@
 <script>
 
 import { searchAllComponents } from "./pagesParsing/searchComponents";
+import { store } from "../builderStore";
 
-export let allComponents = [];
 export let onComponentChosen = () => {};
 
+let allComponents = [];
 let phrase = "";
 
+store.subscribe(s => {
+    allComponents = s.allComponents;
+});
+
 $: filteredComponents = 
     !phrase 
     ? [] 
diff --git a/packages/builder/src/userInterface/EditComponent.svelte b/packages/builder/src/userInterface/EditComponent.svelte
new file mode 100644
index 0000000000..5c99e38e27
--- /dev/null
+++ b/packages/builder/src/userInterface/EditComponent.svelte
@@ -0,0 +1,223 @@
+<script>
+
+import PropsView from "./PropsView.svelte";
+import { store } from "../builderStore";
+import { isRootComponent } from "./pagesParsing/searchComponents";
+import IconButton from "../common/IconButton.svelte";
+import Textbox from "../common/Textbox.svelte";
+import UIkit from "uikit";
+import { pipe } from "../common/core";
+import {
+    getComponentInfo
+} from "./pagesParsing/createProps";
+import Button from "../common/Button.svelte";
+import ButtonGroup from "../common/ButtonGroup.svelte";
+
+import { 
+    cloneDeep, 
+    join,
+    split,
+    map,
+    keys,
+    isUndefined,
+    last
+} from "lodash/fp";
+import { assign } from "lodash";
+
+let component;
+let name = "";
+let description = "";
+let tagsString = "";
+let nameInvalid = "";
+let componentDetailsExpanded = false;
+let componentInfo;
+let modalElement
+let propsValidationErrors = [];
+$: shortName = last(name.split("/"));
+
+store.subscribe(s => {
+    component = s.currentFrontEndItem;
+    if(!component) return;
+    name = component.name;
+    description = component.description;
+    tagsString = join(", ")(component.tags);
+    componentInfo = s.currentComponentInfo;
+    componentDetailsExpanded = s.currentComponentIsNew;
+});
+
+const save = () => {
+
+    if(!validate()) return;
+
+    component.name = name;
+    component.description = description;
+    component.tags = pipe(tagsString, [
+        split(","),
+        map(s => s.trim())
+    ]);
+
+    store.saveDerivedComponent(component);
+}
+
+const deleteComponent = () => {
+    showDialog();
+}
+
+const confirmDeleteComponent = () => {
+    store.deleteDerivedComponent(component.name);
+    hideDialog();
+}
+
+const onPropsValidate = result => {
+    propsValidationErrors = result;
+}
+
+const onPropsChanged = props => {
+    assign(component.props, props);
+}
+
+const validate = () => {
+    const fieldInvalid = (field, err) => 
+        errors[field] = err;
+    const fieldValid = field => 
+        errors[field] && delete errors[field];
+
+    if(!name) nameInvalid = "component name i not supplied";
+    else nameInvalid = "";
+
+    return (!nameInvalid && propsValidationErrors.length === 0);
+}
+
+const hideDialog = () => {
+    UIkit.modal(modalElement).hide();
+}
+
+const showDialog = () => {
+    UIkit.modal(modalElement).show();
+}
+
+</script>
+
+<div class="root">
+
+    <div class="title">
+        <div>{shortName}</div>
+        <div>
+            <IconButton icon="save" 
+                        on:click={save} 
+                        color="var(--primary100)"
+                        hoverColor="red"/>
+            <IconButton icon="trash" 
+                        on:click={deleteComponent} 
+                        color="var(--primary100)"
+                        hoverColor="red"/>
+        </div>
+    </div>
+
+    <div class="body">
+
+        <div class="section-header" on:click={() => componentDetailsExpanded = !componentDetailsExpanded}>
+            <span style="margin-right: 7px">Component Details</span>
+            <IconButton icon={componentDetailsExpanded ? "chevron-down" : "chevron-right"}/>
+        </div>
+
+        {#if componentDetailsExpanded}
+        <div>
+            <Textbox label="Name" 
+                    infoText="use forward slash to store in subfolders"
+                    bind:text={name}
+                    hasError={!!nameInvalid}/>
+            <div class="info-text"></div>
+            <Textbox label="Description"
+                        bind:text={description}/>
+            <Textbox label="Tags" 
+                        infoText="comma separated"
+                        bind:text={tagsString}/>
+            
+        </div>
+        {/if}
+
+        <p class="section-header"><span>Properties</span></p>
+
+       
+        <PropsView onValidate={onPropsValidate}
+                {componentInfo}
+                {onPropsChanged}/>
+        
+
+    </div>
+
+</div>
+
+
+<div bind:this={modalElement} uk-modal>
+    <div class="uk-modal-dialog">
+
+        <div class="uk-modal-header">
+            Delete {component.name} ? 
+        </div>
+
+        <div class="uk-modal-body">
+            Are you sure you want to delete this component ?
+        </div>
+
+        <div class="uk-modal-footer">
+            <ButtonGroup>
+                <Button grouped 
+                        on:click={confirmDeleteComponent}>
+                        OK
+                </Button>
+                <Button grouped 
+                        on:click={hideDialog} 
+                        color="secondary" >
+                        Cancel
+                </Button>
+            </ButtonGroup>
+        </div>
+
+    </div>
+
+</div>
+
+<style>
+
+.root {
+    height: 100%;
+    border-style: solid;
+    border-color: var(--lightslate);
+    border-width: 0px 0px 0px 1px;
+}
+
+.body {
+    padding: 10px;
+}
+
+.title {
+    background-color: white;
+    padding: 3px;
+    display: grid;
+    grid-template-columns: [name] 1fr [actions] auto;
+}
+
+.title > div:nth-child(1) {
+    grid-column-start: name;
+    color: var(--secondary100);
+}
+
+.title > div:nth-child(2) {
+    grid-column-start: actions;
+}
+
+.section-header {
+    font-style: italic;    
+    color: var(--slate);
+    border-style: solid;
+    border-color: var(--lightslate);
+    border-width: 0px 0px 1px 0px;
+}
+
+.section-header {
+    vertical-align: middle;
+}
+
+</style>
\ No newline at end of file
diff --git a/packages/builder/src/userInterface/NewComponent.svelte b/packages/builder/src/userInterface/NewComponent.svelte
index b3e5d0ec38..2ba79f2da2 100644
--- a/packages/builder/src/userInterface/NewComponent.svelte
+++ b/packages/builder/src/userInterface/NewComponent.svelte
@@ -23,66 +23,26 @@ import {
 } from "lodash/fp";
 import { assign } from "lodash";
 
-let component;
+
+
 let modalElement;
-let errors = {};
-let componentInfo;
+let allComponents;
 
-let name = "";
-let description = "";
-let tagsString = "";
-let propsValidationErrors = [];
-let inheritedProps;
-let nameInvalid = "";
-let propsDefinition;
+store.subscribe(s => {
+    allComponents = s.allComponents;
+})
 
-const onBasedOnChosen = (allComponents) => (c) => {
-    componentInfo = getNewComponentInfo(allComponents, c.name);
-    tagsString = join(", ")(componentInfo.component.tags);
-    inheritedProps = componentInfo.inheritedProps;
-    propsDefinition = componentInfo.propsDefinition;
-    component = componentInfo.component;
-}
-
-const createComponent = () => {
-
-    if(!validate()) return;
-
-    component.name = name;
-    component.description = description;
-    component.tags = pipe(tagsString, [
-        split(","),
-        map(s => s.trim())
-    ]);
-
-    store.saveDerivedComponent(component);
-    close();
-}
-
-const close = () => {
-    component = null;
-    componentInfo = null;
+export const close = () => {
     UIkit.modal(modalElement).hide();
 }
 
-const onPropsValidate = result => {
-    propsValidationErrors = result;
+export const show = () => {
+    UIkit.modal(modalElement).show();
 }
 
-const onPropsChanged = props => {
-    assign(component.props, props);
-}
-
-const validate = () => {
-    const fieldInvalid = (field, err) => 
-        errors[field] = err;
-    const fieldValid = field => 
-        errors[field] && delete errors[field];
-
-    if(!name) nameInvalid = "component name i not supplied";
-    else nameInvalid = "";
-
-    return (!nameInvalid && propsValidationErrors.length === 0);
+const onComponentChosen = (c) => {
+    store.createDerivedComponent(c.name);
+    close();
 }
 
 </script>
@@ -95,49 +55,8 @@ const validate = () => {
         </div>
 
         <div class="uk-modal-body">
-            <form class="uk-form-horizontal">
-                {#if componentInfo}
-                
-                <Textbox label="Name" 
-                         infoText="use forward slash to store in subfolders"
-                         bind:text={name}
-                         hasError={!!nameInvalid}/>
-                <div class="info-text"></div>
-                <Textbox label="Description"
-                         bind:text={description}/>
-                <Textbox label="Tags" 
-                         infoText="comma separated"
-                         bind:text={tagsString}/>
-                <p class="uk-heading-line props-header"><span>Properties</span></p>
-                <PropsView allComponents={$store.allComponents}
-                           onValidate={onPropsValidate}
-                           showTitle={false}
-                           {componentInfo}
-                           {onPropsChanged} />
-                
-                
-                {:else}
-                
-
-                <ComponentSearch allComponents={$store.allComponents}
-                                 onComponentChosen={onBasedOnChosen($store.allComponents)} />
-
-                
-                {/if}
-            </form>
+            <ComponentSearch onComponentChosen={onComponentChosen} />
         </div>
-        {#if component}
-        <div class="uk-modal-footer">
-            <ButtonGroup>
-                <Button grouped 
-                        on:click={close} 
-                        color="secondary" >Cancel</Button>
-                <Button grouped 
-                        on:click={createComponent}>Create Component</Button>
-            </ButtonGroup>
-
-        </div>
-        {/if}
     </div>
 </div>
 
@@ -146,8 +65,4 @@ h1 {
     font-size:1.2em;
 }
 
-.props-header {
-    font-style: italic;    
-}
-
 </style>
\ No newline at end of file
diff --git a/packages/builder/src/userInterface/PropControl.svelte b/packages/builder/src/userInterface/PropControl.svelte
new file mode 100644
index 0000000000..009fd9d780
--- /dev/null
+++ b/packages/builder/src/userInterface/PropControl.svelte
@@ -0,0 +1,54 @@
+<script>
+
+import Checkbox from "../common/Checkbox.svelte";
+import Textbox from "../common/Textbox.svelte";
+import Dropdown from "../common/Dropdown.svelte";
+import ComponentPropSelector from "./ComponentPropSelector.svelte";
+
+export let errors = [];
+export let setProp = () => {};
+export let fieldHasError =() => {};
+export let propDef = {};
+export let props = {};
+export let disabled;
+
+</script>
+
+
+<div class="root">
+
+
+    {#if propDef.type === "bool"}
+    <Checkbox label={propDef.____name} 
+                checked={props[propDef.____name]} 
+                on:change={ev => setProp(propDef.____name, ev.target.checked)}
+                hasError={fieldHasError(propDef.____name)} />
+    {:else if propDef.type === "options"}
+    <Dropdown label={propDef.____name}
+                selected={props[propDef.____name]} 
+                options={propDef.options}
+                on:change={ev => setProp(propDef.____name, ev.target.value)}
+                hasError={fieldHasError(propDef.____name)}/>
+    {:else if propDef.type === "component"}
+    <ComponentPropSelector label={propDef.____name}
+                            props={props[propDef.____name]}
+                            {disabled}
+                            onValueChanged={props => setProp(propDef.____name, props)}/>
+    {:else}
+    <Textbox label={propDef.____name}
+                text={props[propDef.____name]}
+                on:change={ev => setProp(propDef.____name, ev.target.value)}
+                margin={false}
+                hasError={fieldHasError(propDef.____name)}
+                {disabled}/>
+    {/if} 
+
+</div>
+
+<style>
+
+.root {
+    margin-top: 7px;
+}
+
+</style>
\ No newline at end of file
diff --git a/packages/builder/src/userInterface/PropsView.svelte b/packages/builder/src/userInterface/PropsView.svelte
index 112ca0c8fc..e0d191bbd9 100644
--- a/packages/builder/src/userInterface/PropsView.svelte
+++ b/packages/builder/src/userInterface/PropsView.svelte
@@ -6,58 +6,66 @@ import {
     some,
     includes,
     cloneDeep,
-    isEqual
+    isEqual,
+    sortBy,
+    filter
 } from "lodash/fp";
 import { pipe } from "../common/core";
-import { getComponentInfo } from "./pagesParsing/createProps";
+import { 
+    getComponentInfo ,
+    getInstanceProps
+} from "./pagesParsing/createProps";
 import { getExactComponent } from "./pagesParsing/searchComponents";
 import Checkbox from "../common/Checkbox.svelte";
 import Textbox from "../common/Textbox.svelte";
 import Dropdown from "../common/Dropdown.svelte";
 import { validateProps } from "./pagesParsing/validateProps";
+import ComponentPropSelector from "./ComponentPropSelector.svelte";
+import PropControl from "./PropControl.svelte";
+import IconButton from "../common/IconButton.svelte";
 
-export let allComponents;
 export let shouldValidate = true;
 export let onValidate = () => {};
-export let showTitle = true;
 export let componentInfo;
-export let component;
+export let instanceProps = null;
 export let onPropsChanged = () => {};
 
 let errors = [];
-let fields = [];
 let props = {};
-let propsDefinitionArray = [];
-
-$: {
-    if(componentInfo || component)
-    {
-        if(!componentInfo || (component && 
-                              component.name !== componentInfo.component.name)) {
-            componentInfo = getComponentInfo(allComponents, component.name);
-        }
-
-        props = cloneDeep(componentInfo.fullProps);
-
-        propsDefinitionArray = pipe(componentInfo.propsDefinition, [
-                keys,
-                map(k => ({...componentInfo.propsDefinition[k], ____name:k}))
-            ]);
-
-        fields = pipe(componentInfo.propsDefinition,[
-            keys,
-            map(k => componentInfo.propsDefinition[k])
-        ]);
-    }
-}
+let propsDefinitions = [];
+let inheritedPropsDefinitions = [];
+let inheritedExpanded = false;
 
 const isPropInherited = name => 
     includes(name)(componentInfo.inheritedProps);
 
-let setProp = (name) => (ev, targetValue="value") => {
+$: {
+    if(componentInfo)
+    {
+        props = instanceProps 
+                ? getInstanceProps(componentInfo, instanceProps)
+                : cloneDeep(componentInfo.fullProps);
+
+        propsDefinitions = pipe(componentInfo.propsDefinition, [
+                keys,
+                filter(k => !isPropInherited(k)),
+                map(k => ({...componentInfo.propsDefinition[k], ____name:k})),
+                sortBy("____name")
+            ]);
+
+        inheritedPropsDefinitions = pipe(componentInfo.propsDefinition, [
+                keys,
+                filter(k => isPropInherited(k)),
+                map(k => ({...componentInfo.propsDefinition[k], ____name:k})),
+                sortBy("____name")
+            ]);
+    }
+}
+
+
+let setProp = (name, value) => {
     const newProps = cloneDeep(props);
-    newProps[name] = ev.target[targetValue];
-    
+    newProps[name] = value;
 
     const finalProps = {};
 
@@ -82,37 +90,48 @@ const validate = (finalProps) => {
 const fieldHasError = (propName) => 
     some(e => e.propName === propName)(errors);
 
+
 </script>
 
 <div class="root">
 
-    {#if showTitle=true}
-    <div class="title">{componentInfo.component.name}</div>
-    <div class="component-description">{componentInfo.component.description || ""}</div>
-    {/if}
-    {#each propsDefinitionArray as propDef}
-    <form class="uk-form-stacked prop-row ">
-        {#if propDef.type === "bool"}
-        <Checkbox label={propDef.____name} 
-                  checked={props[propDef.____name]} 
-                  on:change={setProp(propDef.____name, "checked")}
-                  hasError={fieldHasError(propDef.____name)} />
-        {:else if propDef.type === "options"}
-        <Dropdown label={propDef.____name}
-                  selected={props[propDef.____name]} 
-                  options={propDef.options}
-                  on:change={setProp(propDef.____name)}
-                  hasError={fieldHasError(propDef.____name)}/>
-        {:else}
-        <Textbox label={propDef.____name}
-                 text={props[propDef.____name]}
-                 on:change={setProp(propDef.____name)}
-                 margin={false}
-                 hasError={fieldHasError(propDef.____name)}
-                 disabled={isPropInherited(propDef.____name)} />
-        {/if} 
+    <form class="uk-form-stacked">
+        {#each propsDefinitions as propDef}
+        
+        <PropControl {errors}
+                        {setProp}
+                        {fieldHasError}
+                        {propDef}
+                        {props}
+                        disabled={false} />
+            
+        {/each}
+
+        {#if inheritedPropsDefinitions.length > 0}
+        <div class="inherited-title">
+            <div>Inherited</div>
+            <div>
+                <IconButton icon={inheritedExpanded ? "chevron-down" : "chevron-right"}
+                            on:click={() => inheritedExpanded = !inheritedExpanded}/>
+            </div>
+        </div>
+        {/if}
+
+        {#if inheritedExpanded}
+            {#each inheritedPropsDefinitions as propDef}
+            
+            <PropControl {errors}
+                            {setProp}
+                            {fieldHasError}
+                            {propDef}
+                            {props}
+                            disabled={true} />
+                
+            {/each}
+        {/if}
     </form>
-    {/each}
+
+
     
 
 </div>
@@ -124,19 +143,24 @@ const fieldHasError = (propName) =>
     font-size:10pt;
 }
 
-.title {
-    font-size: 1.2em;
-    font-weight: bold;
+.inherited-title {
+    margin-top: 40px;
+    display: grid;
+    grid-template-columns: [name] 1fr [actions] auto;
+    border-style: solid;
+    border-width: 0px 0px 1px 0px;
+    border-color: var(--lightslate);
+    font-style: italic;
 }
 
-.prop-row {
-    padding: 7px 3px;
-}
-
-.component-description {
-    font-size: 0.9em;
+.inherited-title > div:nth-child(1) {
+    grid-column-start: name;
     color: var(--slate);
-    margin-bottom: 10px;
+}
+
+.inherited-title > div:nth-child(2) {
+    grid-column-start: actions;
+    color: var(--secondary100);
 }
 
 </style>
\ No newline at end of file
diff --git a/packages/builder/src/userInterface/UserInterfaceRoot.svelte b/packages/builder/src/userInterface/UserInterfaceRoot.svelte
index 3f082b5510..04d7e1e1d6 100644
--- a/packages/builder/src/userInterface/UserInterfaceRoot.svelte
+++ b/packages/builder/src/userInterface/UserInterfaceRoot.svelte
@@ -2,7 +2,7 @@
 
 import ComponentsHierarchy from "./ComponentsHierarchy.svelte";
 import PagesList from "./PagesList.svelte"
-import PropsView from "./PropsView.svelte";
+import EditComponent from "./EditComponent.svelte";
 import { store } from "../builderStore";
 import getIcon from "../common/icon";
 import { isRootComponent } from "./pagesParsing/searchComponents";
@@ -10,9 +10,9 @@ import IconButton from "../common/IconButton.svelte";
 import Modal from "../common/Modal.svelte";
 import NewComponent from "./NewComponent.svelte";
 
-let isCreatingNewComponent = false;
+let newComponentPicker;  
 const newComponent = () => {
-    isCreatingNewComponent = true;
+    newComponentPicker.show();
 }
 
 </script>
@@ -27,8 +27,7 @@ const newComponent = () => {
                 <span>COMPONENTS</span>
                 <div>
                     <IconButton icon="plus" 
-                                on:click={newComponent}
-                                attributes={{"uk-toggle" : "target: #new-component-modal" }}/>
+                                on:click={newComponent}/>
                 </div>
             </div>
             <div class="nav-items-container">
@@ -58,15 +57,14 @@ const newComponent = () => {
 
     <div class="properties-pane">
         {#if $store.currentFrontEndItem && !isRootComponent($store.currentFrontEndItem)}
-        <PropsView allComponents={$store.allComponents}
-                   component={$store.currentFrontEndItem}/>
+        <EditComponent />
         {/if}
     </div>
 
 </div>
 
 
-<NewComponent bind:isCreatingNewComponent={isCreatingNewComponent}/>
+<NewComponent bind:this={newComponentPicker}/>
 
 
 <style>
@@ -100,7 +98,6 @@ const newComponent = () => {
     grid-column-start: properties;
     background-color: var(--primary10);
     height: 100%;
-    padding: 10px;
 }
 
 .pages-list-container {
diff --git a/packages/builder/src/userInterface/pagesParsing/createProps.js b/packages/builder/src/userInterface/pagesParsing/createProps.js
index cfa976658c..a8f50c9819 100644
--- a/packages/builder/src/userInterface/pagesParsing/createProps.js
+++ b/packages/builder/src/userInterface/pagesParsing/createProps.js
@@ -39,7 +39,7 @@ export const createPropDefinitionForDerived = (allComponents, componentName) =>
 
 export const traverseForProps = getComponentInfo;
 
-export const getFinalProps = (componentInfo, props) => {
+export const getInstanceProps = (componentInfo, props) => {
     const finalProps = cloneDeep(componentInfo.fullProps);
 
     for(let p in props) {
@@ -89,7 +89,7 @@ export const getComponentInfo = (allComponents, cname, stack=[], subComponentPro
         ]);
 
         return ({
-            propsDefinition:component.props, 
+            propsDefinition:expandPropsDefinition(component.props), 
             inheritedProps,
             rootDefaultProps: p.props,
             unsetProps,
diff --git a/packages/builder/tests/getComponentInfo.spec.js b/packages/builder/tests/getComponentInfo.spec.js
index 4ab0e2b0a8..44f5470ed7 100644
--- a/packages/builder/tests/getComponentInfo.spec.js
+++ b/packages/builder/tests/getComponentInfo.spec.js
@@ -1,5 +1,5 @@
 import { 
-    getFinalProps,
+    getInstanceProps,
     getComponentInfo 
 } from "../src/userInterface/pagesParsing/createProps";
 import {
@@ -34,8 +34,8 @@ describe("getComponentInfo", () => {
         
     });
 
-    it("getFinalProps should set supplied props on top of default props", () => {
-        const result = getFinalProps(
+    it("getInstanceProps should set supplied props on top of default props", () => {
+        const result = getInstanceProps(
             getComponentInfo(
                 allComponents(), 
                 "budibase-components/TextBox"),