Clean paths and file structure

This commit is contained in:
Andrew Kingston 2021-01-14 10:03:33 +00:00
parent 7c4c7e0ae1
commit bd237b3e7c
17 changed files with 45 additions and 506 deletions

View File

@ -1,5 +1,5 @@
<script> <script>
import GenericBindingPopover from "../../userInterface/PropertiesPanel/GenericBindingPopover.svelte" import GenericBindingPopover from "./GenericBindingPopover.svelte"
import { Input, Icon } from "@budibase/bbui" import { Input, Icon } from "@budibase/bbui"
export let bindings = [] export let bindings = []

View File

@ -9,10 +9,10 @@
selectedAccessRole, selectedAccessRole,
} from "builderStore" } from "builderStore"
import { FrontendTypes } from "constants" import { FrontendTypes } from "constants"
import ComponentNavigationTree from "components/userInterface/NavigationPanel/ComponentNavigationTree/index.svelte" import ComponentNavigationTree from "components/design/NavigationPanel/ComponentNavigationTree/index.svelte"
import Layout from "components/userInterface/NavigationPanel/Layout.svelte" import Layout from "components/design/NavigationPanel/Layout.svelte"
import NewScreenModal from "components/userInterface/NavigationPanel/NewScreenModal.svelte" import NewScreenModal from "components/design/NavigationPanel/NewScreenModal.svelte"
import NewLayoutModal from "components/userInterface/NavigationPanel/NewLayoutModal.svelte" import NewLayoutModal from "components/design/NavigationPanel/NewLayoutModal.svelte"
import { Modal, Switcher, Select } from "@budibase/bbui" import { Modal, Switcher, Select } from "@budibase/bbui"
const tabs = [ const tabs = [

View File

@ -1,7 +1,7 @@
<script> <script>
import { TextArea, DetailSummary, Button } from "@budibase/bbui" import { TextArea, DetailSummary, Button } from "@budibase/bbui"
import PropertyGroup from "./PropertyPanelControls/PropertyGroup.svelte" import PropertyGroup from "./PropertyControls/PropertyGroup.svelte"
import FlatButtonGroup from "./PropertyPanelControls/FlatButtonGroup" import FlatButtonGroup from "./PropertyControls/FlatButtonGroup"
import { allStyles } from "./componentStyles" import { allStyles } from "./componentStyles"
export let componentDefinition = {} export let componentDefinition = {}

View File

@ -1,13 +1,6 @@
<script> <script>
import groupBy from "lodash/fp/groupBy" import groupBy from "lodash/fp/groupBy"
import { import { Button, TextArea, Body, Heading, Spacer } from "@budibase/bbui"
Button,
TextArea,
Label,
Body,
Heading,
Spacer,
} from "@budibase/bbui"
import { createEventDispatcher } from "svelte" import { createEventDispatcher } from "svelte"
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()

View File

@ -3,7 +3,6 @@
export let options = [] export let options = []
export let value = [] export let value = []
export let styleBindingProperty
export let onChange = () => {} export let onChange = () => {}
let boundValue = getValidOptions(value, options) let boundValue = getValidOptions(value, options)

View File

@ -8,7 +8,7 @@
runtimeToReadableBinding, runtimeToReadableBinding,
} from "builderStore/replaceBindings" } from "builderStore/replaceBindings"
import { DropdownMenu } from "@budibase/bbui" import { DropdownMenu } from "@budibase/bbui"
import BindingDropdown from "components/userInterface/PropertiesPanel/BindingDropdown.svelte" import BindingDropdown from "./BindingDropdown.svelte"
export let label = "" export let label = ""
export let bindable = true export let bindable = true

View File

@ -1,23 +1,22 @@
<script> <script>
import { get } from "lodash" import { get } from "lodash"
import { isEmpty } from "lodash/fp" import { isEmpty } from "lodash/fp"
import PropertyControl from "./PropertyPanelControls/PropertyControl.svelte"
import Input from "./PropertyPanelControls/Input.svelte" import PropertyControl from "./PropertyControls/PropertyControl.svelte"
import Input from "./PropertyControls/Input.svelte"
import LayoutSelect from "./PropertyPanelControls/LayoutSelect.svelte" import LayoutSelect from "./PropertyControls/LayoutSelect.svelte"
import RoleSelect from "./PropertyPanelControls/RoleSelect.svelte" import RoleSelect from "./PropertyControls/RoleSelect.svelte"
import OptionSelect from "./PropertyPanelControls/OptionSelect.svelte" import OptionSelect from "./PropertyControls/OptionSelect.svelte"
import MultiTableViewFieldSelect from "./PropertyPanelControls/MultiTableViewFieldSelect.svelte" import MultiTableViewFieldSelect from "./PropertyControls/MultiTableViewFieldSelect.svelte"
import Checkbox from "./PropertyPanelControls/Checkbox.svelte" import Checkbox from "./PropertyControls/Checkbox.svelte"
import TableSelect from "components/userInterface/PropertyPanelControls/TableSelect.svelte" import TableSelect from "./PropertyControls/TableSelect.svelte"
import TableViewSelect from "components/userInterface/PropertyPanelControls/TableViewSelect.svelte" import TableViewSelect from "./PropertyControls/TableViewSelect.svelte"
import TableViewFieldSelect from "components/userInterface/PropertyPanelControls/TableViewFieldSelect.svelte" import TableViewFieldSelect from "./PropertyControls/TableViewFieldSelect.svelte"
import EventsEditor from "components/userInterface/PropertyPanelControls/EventsEditor" import EventsEditor from "./PropertyControls/EventsEditor"
import ScreenSelect from "components/userInterface/PropertyPanelControls/ScreenSelect.svelte" import ScreenSelect from "./PropertyControls/ScreenSelect.svelte"
import DetailScreenSelect from "components/userInterface/PropertyPanelControls/DetailScreenSelect.svelte" import DetailScreenSelect from "./PropertyControls/DetailScreenSelect.svelte"
import IconSelect from "components/userInterface/PropertyPanelControls/IconSelect" import IconSelect from "./PropertyControls/IconSelect"
import ColorPicker from "./ComponentPropertiesPanel.svelte" import ColorPicker from "./PropertyControls/ColorPicker.svelte"
export let componentDefinition = {} export let componentDefinition = {}
export let componentInstance = {} export let componentInstance = {}

View File

@ -1,7 +1,7 @@
import Input from "./PropertyPanelControls/Input.svelte" import Input from "./PropertyControls/Input.svelte"
import OptionSelect from "./PropertyPanelControls/OptionSelect.svelte" import OptionSelect from "./PropertyControls/OptionSelect.svelte"
import FlatButtonGroup from "./PropertyPanelControls/FlatButtonGroup" import FlatButtonGroup from "./PropertyControls/FlatButtonGroup"
import Colorpicker from "./PropertyPanelControls/ColorPicker.svelte" import Colorpicker from "./PropertyControls/ColorPicker.svelte"
export const layout = [ export const layout = [
{ {

View File

@ -1,14 +1,14 @@
import Input from "./PropertiesPanel/PropertyPanelControls/Input.svelte" import Input from "./PropertiesPanel/PropertyControls/Input.svelte"
import OptionSelect from "./PropertiesPanel/PropertyPanelControls/OptionSelect.svelte" import OptionSelect from "./PropertiesPanel/PropertyControls/OptionSelect.svelte"
import MultiTableViewFieldSelect from "./PropertiesPanel/PropertyPanelControls/MultiTableViewFieldSelect.svelte" import MultiTableViewFieldSelect from "./PropertiesPanel/PropertyControls/MultiTableViewFieldSelect.svelte"
import Checkbox from "../common/Checkbox.svelte" import Checkbox from "../common/Checkbox.svelte"
import TableSelect from "components/userInterface/PropertyPanelControls/TableSelect.svelte" import TableSelect from "components/userInterface/PropertyControls/TableSelect.svelte"
import TableViewSelect from "components/userInterface/PropertyPanelControls/TableViewSelect.svelte" import TableViewSelect from "components/userInterface/PropertyControls/TableViewSelect.svelte"
import TableViewFieldSelect from "components/userInterface/PropertyPanelControls/TableViewFieldSelect.svelte" import TableViewFieldSelect from "components/userInterface/PropertyControls/TableViewFieldSelect.svelte"
import Event from "components/userInterface/PropertyPanelControls/EventsEditor/EventPropertyControl.svelte" import Event from "components/userInterface/PropertyControls/EventsEditor/EventPropertyControl.svelte"
import ScreenSelect from "components/userInterface/PropertyPanelControls/ScreenSelect.svelte" import ScreenSelect from "components/userInterface/PropertyControls/ScreenSelect.svelte"
import DetailScreenSelect from "components/userInterface/PropertyPanelControls/DetailScreenSelect.svelte" import DetailScreenSelect from "components/userInterface/PropertyControls/DetailScreenSelect.svelte"
import { IconSelect } from "components/userInterface/PropertyPanelControls/IconSelect" import { IconSelect } from "components/userInterface/PropertyControls/IconSelect"
import Colorpicker from "@budibase/colorpicker" import Colorpicker from "@budibase/colorpicker"
import { all } from "./propertyCategories.js" import { all } from "./propertyCategories.js"

View File

@ -3,7 +3,7 @@
import { Button } from "@budibase/bbui" import { Button } from "@budibase/bbui"
import SettingsLink from "components/settings/Link.svelte" import SettingsLink from "components/settings/Link.svelte"
import ThemeEditorDropdown from "components/settings/ThemeEditorDropdown.svelte" import ThemeEditorDropdown from "components/settings/ThemeEditorDropdown.svelte"
import FeedbackNavLink from "components/Feedback/FeedbackNavLink.svelte" import FeedbackNavLink from "components/feedback/FeedbackNavLink.svelte"
import { get } from "builderStore/api" import { get } from "builderStore/api"
import { isActive, goto, layout } from "@sveltech/routify" import { isActive, goto, layout } from "@sveltech/routify"

View File

@ -7,7 +7,7 @@
import Spinner from "components/common/Spinner.svelte" import Spinner from "components/common/Spinner.svelte"
import DeploymentHistory from "components/deploy/DeploymentHistory.svelte" import DeploymentHistory from "components/deploy/DeploymentHistory.svelte"
import analytics from "analytics" import analytics from "analytics"
import FeedbackIframe from "components/Feedback/FeedbackIframe.svelte" import FeedbackIframe from "components/feedback/FeedbackIframe.svelte"
let loading = false let loading = false
let deployments = [] let deployments = []

View File

@ -6,10 +6,10 @@
selectedComponent, selectedComponent,
} from "builderStore" } from "builderStore"
import { onMount } from "svelte" import { onMount } from "svelte"
import CurrentItemPreview from "components/userInterface/AppPreview" import CurrentItemPreview from "components/design/AppPreview"
import ComponentPropertiesPanel from "components/userInterface/PropertiesPanel/ComponentPropertiesPanel.svelte" import PropertiesPanel from "components/design/PropertiesPanel/PropertiesPanel.svelte"
import ComponentSelectionList from "components/userInterface/AppPreview/ComponentSelectionList.svelte" import ComponentSelectionList from "components/design/AppPreview/ComponentSelectionList.svelte"
import FrontendNavigatePane from "components/userInterface/NavigationPanel/FrontendNavigatePane.svelte" import FrontendNavigatePane from "components/design/NavigationPanel/FrontendNavigatePane.svelte"
$: instance = $store.appInstance $: instance = $store.appInstance
@ -49,7 +49,7 @@
{#if $selectedComponent != null} {#if $selectedComponent != null}
<div class="components-pane"> <div class="components-pane">
<ComponentPropertiesPanel /> <PropertiesPanel />
</div> </div>
{/if} {/if}
</div> </div>

View File

@ -1,163 +0,0 @@
import { createProps } from "../src/components/userInterface/assetParsing/createProps"
import { keys, some } from "lodash/fp"
import { stripStandardProps } from "./testData"
describe("createDefaultProps", () => {
const getcomponent = () => ({
_component: "some_component",
name: "some_component",
props: {
fieldName: { type: "string", default: "something" },
},
})
it("should create a object with single string value, when default string field set", () => {
const { props, errors } = createProps(getcomponent())
expect(errors).toEqual([])
expect(props.fieldName).toBeDefined()
expect(props.fieldName).toBe("something")
stripStandardProps(props)
expect(keys(props).length).toBe(3)
})
it("should set component _component", () => {
const { props, errors } = createProps(getcomponent())
expect(errors).toEqual([])
expect(props._component).toBe("some_component")
})
it("should create a object with single blank string value, when prop definition is 'string' ", () => {
const comp = getcomponent()
comp.props.fieldName = "string"
const { props, errors } = createProps(comp)
expect(errors).toEqual([])
expect(props.fieldName).toBeDefined()
expect(props.fieldName).toBe("")
})
it("should create a object with single fals value, when prop definition is 'bool' ", () => {
const comp = getcomponent()
comp.props.isVisible = "bool"
const { props, errors } = createProps(comp)
expect(errors).toEqual([])
expect(props.isVisible).toBeDefined()
expect(props.isVisible).toBe(false)
})
it("should create a object with single 0 value, when prop definition is 'number' ", () => {
const comp = getcomponent()
comp.props.width = "number"
const { props, errors } = createProps(comp)
expect(errors).toEqual([])
expect(props.width).toBeDefined()
expect(props.width).toBe(0)
})
it("should create a object with empty _children array, when children===true ", () => {
const comp = getcomponent()
comp.children = true
const { props, errors } = createProps(comp)
expect(errors).toEqual([])
expect(props._children).toBeDefined()
expect(props._children).toEqual([])
})
it("should create a object with single empty array, when prop definition is 'event' ", () => {
const comp = getcomponent()
comp.props.onClick = "event"
const { props, errors } = createProps(comp)
expect(errors).toEqual([])
expect(props.onClick).toBeDefined()
expect(props.onClick).toEqual([])
})
it("should create a object children array when children == true ", () => {
const comp = getcomponent()
comp.children = true
const { props, errors } = createProps(comp)
expect(errors).toEqual([])
expect(props._children).toBeDefined()
expect(props._children).toEqual([])
})
it("should always create _children ", () => {
const comp = getcomponent()
comp.children = false
const createRes1 = createProps(comp)
expect(createRes1.errors).toEqual([])
expect(createRes1.props._children).toBeDefined()
const comp2 = getcomponent()
comp2.children = true
const createRes2 = createProps(comp)
expect(createRes2.errors).toEqual([])
expect(createRes2.props._children).toBeDefined()
})
it("should create an object with multiple prop names", () => {
const comp = getcomponent()
comp.props.fieldName = "string"
comp.props.fieldLength = { type: "number", default: 500 }
const { props, errors } = createProps(comp)
expect(errors).toEqual([])
expect(props.fieldName).toBeDefined()
expect(props.fieldName).toBe("")
expect(props.fieldLength).toBeDefined()
expect(props.fieldLength).toBe(500)
})
it("should return error when invalid type", () => {
const comp = getcomponent()
comp.props.fieldName = "invalid type name"
comp.props.fieldLength = { type: "invalid type name " }
const { errors } = createProps(comp)
expect(errors.length).toBe(2)
expect(some(e => e.propName === "fieldName")(errors)).toBeTruthy()
expect(some(e => e.propName === "fieldLength")(errors)).toBeTruthy()
})
it("should merge in derived props", () => {
const comp = getcomponent()
comp.props.fieldName = "string"
comp.props.fieldLength = { type: "number", default: 500 }
const derivedFrom = {
fieldName: "surname",
}
const { props, errors } = createProps(comp, derivedFrom)
expect(errors.length).toBe(0)
expect(props.fieldName).toBe("surname")
expect(props.fieldLength).toBe(500)
})
it("should create standard props", () => {
const comp = getcomponent()
comp.props.fieldName = { type: "string", default: 1 }
const { props } = createProps(comp)
expect(props._styles).toBeDefined()
})
})

View File

@ -1,251 +0,0 @@
import fetchBindableProperties from "../src/builderStore/fetchBindableProperties"
describe("fetch bindable properties", () => {
it("should return bindable properties from screen components", () => {
const result = fetchBindableProperties({
componentInstanceId: "heading-id",
...testData(),
})
const componentBinding = result.find(
r => r.instance._id === "search-input-id" && r.type === "instance"
)
expect(componentBinding).toBeDefined()
expect(componentBinding.type).toBe("instance")
expect(componentBinding.runtimeBinding).toBe("search-input-id")
})
it("should not return bindable components when not in their context", () => {
const result = fetchBindableProperties({
componentInstanceId: "heading-id",
...testData(),
})
const componentBinding = result.find(
r => r.instance._id === "list-item-input-id"
)
expect(componentBinding).not.toBeDefined()
})
it("should return table schema, when inside a context", () => {
const result = fetchBindableProperties({
componentInstanceId: "list-item-input-id",
...testData(),
})
const contextBindings = result.filter(
r => r.instance._id === "list-id" && r.type === "context"
)
// 2 fields + _id + _rev
expect(contextBindings.length).toBe(4)
const namebinding = contextBindings.find(
b => b.runtimeBinding === "list-id.name"
)
expect(namebinding).toBeDefined()
expect(namebinding.readableBinding).toBe("list-name.Test Table.name")
const descriptionbinding = contextBindings.find(
b => b.runtimeBinding === "list-id.description"
)
expect(descriptionbinding).toBeDefined()
expect(descriptionbinding.readableBinding).toBe(
"list-name.Test Table.description"
)
const idbinding = contextBindings.find(
b => b.runtimeBinding === "list-id._id"
)
expect(idbinding).toBeDefined()
expect(idbinding.readableBinding).toBe("list-name.Test Table._id")
})
it("should return table schema, for grantparent context", () => {
const result = fetchBindableProperties({
componentInstanceId: "child-list-item-input-id",
...testData(),
})
const contextBindings = result.filter(r => r.type === "context")
// 2 fields + _id + _rev ... x 2 tables
expect(contextBindings.length).toBe(8)
const namebinding_parent = contextBindings.find(
b => b.runtimeBinding === "list-id.name"
)
expect(namebinding_parent).toBeDefined()
expect(namebinding_parent.readableBinding).toBe("list-name.Test Table.name")
const descriptionbinding_parent = contextBindings.find(
b => b.runtimeBinding === "list-id.description"
)
expect(descriptionbinding_parent).toBeDefined()
expect(descriptionbinding_parent.readableBinding).toBe(
"list-name.Test Table.description"
)
const namebinding_own = contextBindings.find(
b => b.runtimeBinding === "child-list-id.name"
)
expect(namebinding_own).toBeDefined()
expect(namebinding_own.readableBinding).toBe(
"child-list-name.Test Table.name"
)
const descriptionbinding_own = contextBindings.find(
b => b.runtimeBinding === "child-list-id.description"
)
expect(descriptionbinding_own).toBeDefined()
expect(descriptionbinding_own.readableBinding).toBe(
"child-list-name.Test Table.description"
)
})
it("should return bindable component props, from components in same context", () => {
const result = fetchBindableProperties({
componentInstanceId: "list-item-heading-id",
...testData(),
})
const componentBinding = result.find(
r => r.instance._id === "list-item-input-id" && r.type === "instance"
)
expect(componentBinding).toBeDefined()
expect(componentBinding.runtimeBinding).toBe("list-item-input-id")
})
it("should not return components from child context", () => {
const result = fetchBindableProperties({
componentInstanceId: "list-item-heading-id",
...testData(),
})
const componentBinding = result.find(
r =>
r.instance._id === "child-list-item-input-id" && r.type === "instance"
)
expect(componentBinding).not.toBeDefined()
})
it("should return bindable component props, from components in same context (when nested context)", () => {
const result = fetchBindableProperties({
componentInstanceId: "child-list-item-heading-id",
...testData(),
})
const componentBinding = result.find(
r =>
r.instance._id === "child-list-item-input-id" && r.type === "instance"
)
expect(componentBinding).toBeDefined()
})
})
const testData = () => {
const screen = {
instanceName: "test screen",
name: "screen-id",
route: "/",
props: {
_id: "screent-root-id",
_component: "@budibase/standard-components/container",
_children: [
{
_id: "heading-id",
_instanceName: "list item heading",
_component: "@budibase/standard-components/heading",
text: "Screen Title",
},
{
_id: "search-input-id",
_instanceName: "Search Input",
_component: "@budibase/standard-components/input",
value: "search phrase",
},
{
_id: "list-id",
_component: "@budibase/standard-components/list",
_instanceName: "list-name",
table: {
type: "table",
tableId: "test-table-id",
label: "Test Table",
name: "all_test-table-id",
},
_children: [
{
_id: "list-item-heading-id",
_instanceName: "list item heading",
_component: "@budibase/standard-components/heading",
text: "hello",
},
{
_id: "list-item-input-id",
_instanceName: "List Item Input",
_component: "@budibase/standard-components/input",
value: "list item",
},
{
_id: "child-list-id",
_component: "@budibase/standard-components/list",
_instanceName: "child-list-name",
table: {
type: "table",
tableId: "test-table-id",
label: "Test Table",
name: "all_test-table-id",
},
_children: [
{
_id: "child-list-item-heading-id",
_instanceName: "child list item heading",
_component: "@budibase/standard-components/heading",
text: "hello",
},
{
_id: "child-list-item-input-id",
_instanceName: "Child List Item Input",
_component: "@budibase/standard-components/input",
value: "child list item",
},
],
},
],
},
],
},
}
const tables = [
{
_id: "test-table-id",
name: "Test Table",
schema: {
name: {
type: "string",
},
description: {
type: "string",
},
},
},
]
const components = {
"@budibase/standard-components/container": {
props: {},
},
"@budibase/standard-components/list": {
context: "table",
props: {
table: "string",
},
},
"@budibase/standard-components/input": {
bindable: "value",
props: {
value: "string",
},
},
"@budibase/standard-components/heading": {
props: {
text: "string",
},
},
}
return { screen, tables, components }
}

View File

@ -1,37 +0,0 @@
import {
searchAllComponents,
getExactComponent,
getAncestorProps,
} from "../src/components/userInterface/assetParsing/searchComponents"
import { componentsAndScreens } from "./testData"
describe("getExactComponent", () => {
it("should get component by name", () => {
const { components } = componentsAndScreens()
const result = getExactComponent(
components,
"TextBox"
)
expect(result).toBeDefined()
expect(result._instanceName).toBe("TextBox")
})
test("Should not find as isScreen is not specified", () => {
const { screens } = componentsAndScreens()
const result = getExactComponent(screens, "SmallTextbox")
expect(result).not.toBeDefined()
})
test("Should find as isScreen is specified", () => {
const { screens } = componentsAndScreens()
const result = getExactComponent(screens, "SmallTextbox", true)
expect(result).toBeDefined()
expect(result.props._instanceName).toBe("SmallTextbox")
})
})

View File

@ -23,7 +23,6 @@ exports.fetchAppComponentDefinitions = async function(ctx) {
ctx.isDev ? "" : "package", ctx.isDev ? "" : "package",
"manifest.json" "manifest.json"
)) ))
console.log(componentJson)
const result = {} const result = {}