Add back in component settings panel

packages/builder/src/builderStore/dataBinding.js

@@ -20,7 +20,7 @@ import {
 } from "@budibase/string-templates"
 import { TableNames } from "../constants"
 import { JSONUtils } from "@budibase/frontend-core"
-import ActionDefinitions from "components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/manifest.json"
+import ActionDefinitions from "components/design/settings/controls/ButtonActionEditor/manifest.json"
 
 // Regex to match all instances of template strings
 const CAPTURE_VAR_INSIDE_TEMPLATE = /{{([^}]+)}}/g

packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte

@@ -27,7 +27,7 @@
   import Editor from "components/integration/QueryEditor.svelte"
   import { debounce } from "lodash"
   import ModalBindableInput from "components/common/bindings/ModalBindableInput.svelte"
-  import FilterDrawer from "components/design/PropertiesPanel/PropertyControls/FilterEditor/FilterDrawer.svelte"
+  import FilterDrawer from "components/design/settings/controls/FilterEditor/FilterDrawer.svelte"
   import { LuceneUtils } from "@budibase/frontend-core"
   import { getSchemaForTable } from "builderStore/dataBinding"
 

packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte

@@ -1,7 +1,7 @@
 <script>
   import { createEventDispatcher } from "svelte"
   import { ActionButton, Modal, ModalContent } from "@budibase/bbui"
-  import FilterDrawer from "components/design/PropertiesPanel/PropertyControls/FilterEditor/FilterDrawer.svelte"
+  import FilterDrawer from "components/design/settings/controls/FilterEditor/FilterDrawer.svelte"
 
   export let schema
   export let filters

packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte → packages/builder/src/components/design/_old/FrontendNavigatePane.svelte

@@ -3,9 +3,9 @@
   import { goto, params } from "@roxi/routify"
   import { store, selectedAccessRole, screenSearchString } from "builderStore"
   import { roles } from "stores/backend"
-  import ComponentNavigationTree from "components/design/NavigationPanel/ComponentNavigationTree/index.svelte"
+  import ComponentNavigationTree from "components/design/navigation/ComponentNavigationTree/index.svelte"
-  import Layout from "components/design/NavigationPanel/Layout.svelte"
+  import Layout from "components/design/navigation/Layout.svelte"
-  import NewLayoutModal from "components/design/NavigationPanel/NewLayoutModal.svelte"
+  import NewLayoutModal from "components/design/navigation/NewLayoutModal.svelte"
   import {
     Icon,
     Modal,

packages/builder/src/components/design/_old/[assetType]/_layout.svelte

@@ -5,7 +5,7 @@
   import CurrentItemPreview from "components/design/AppPreview"
   import PropertiesPanel from "components/design/PropertiesPanel/PropertiesPanel.svelte"
   import ComponentSelectionList from "components/design/AppPreview/ComponentSelectionList.svelte"
-  import FrontendNavigatePane from "components/design/NavigationPanel/FrontendNavigatePane.svelte"
+  import FrontendNavigatePane from "components/design/navigation/FrontendNavigatePane.svelte"
   import { goto, leftover, params } from "@roxi/routify"
   import { FrontendTypes } from "constants"
   import { findComponent, findComponentPath } from "builderStore/componentUtils"
@@ -14,7 +14,7 @@
   import ThemeEditor from "components/design/AppPreview/ThemeEditor.svelte"
   import DevicePreviewSelect from "components/design/AppPreview/DevicePreviewSelect.svelte"
   import Logo from "assets/bb-space-man.svg"
-  import ScreenWizard from "components/design/NavigationPanel/ScreenWizard.svelte"
+  import ScreenWizard from "components/design/navigation/ScreenWizard.svelte"
 
   // Cache previous values so we don't update the URL more than necessary
   let previousType

packages/builder/src/components/design/SettingsPanel/SettingsPanel.svelte → packages/builder/src/components/design/settings/SettingsPanel.svelte

@@ -16,7 +16,9 @@
       </div>
     </div>
   {/if}
-  <slot />
+  <div class="body">
+    <slot />
+  </div>
 </div>
 
 <style>
@@ -28,7 +30,6 @@
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
-    overflow: auto;
   }
   .header {
     flex: 0 0 48px;
@@ -53,4 +54,13 @@
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+  .body {
+    flex: 1 1 auto;
+    overflow: auto;
+    overflow-x: hidden;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+  }
 </style>

packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js → packages/builder/src/components/design/settings/componentSettings.js

@@ -1,24 +1,24 @@
 import { Checkbox, Select, Stepper } from "@budibase/bbui"
-import DataSourceSelect from "./DataSourceSelect.svelte"
+import DataSourceSelect from "./controls/DataSourceSelect.svelte"
-import S3DataSourceSelect from "./S3DataSourceSelect.svelte"
+import S3DataSourceSelect from "./controls/S3DataSourceSelect.svelte"
-import DataProviderSelect from "./DataProviderSelect.svelte"
+import DataProviderSelect from "./controls/DataProviderSelect.svelte"
-import ButtonActionEditor from "./ButtonActionEditor/ButtonActionEditor.svelte"
+import ButtonActionEditor from "./controls/ButtonActionEditor/ButtonActionEditor.svelte"
-import TableSelect from "./TableSelect.svelte"
+import TableSelect from "./controls/TableSelect.svelte"
-import ColorPicker from "./ColorPicker.svelte"
+import ColorPicker from "./controls/ColorPicker.svelte"
-import { IconSelect } from "./IconSelect"
+import { IconSelect } from "./controls/IconSelect"
-import FieldSelect from "./FieldSelect.svelte"
+import FieldSelect from "./controls/FieldSelect.svelte"
-import MultiFieldSelect from "./MultiFieldSelect.svelte"
+import MultiFieldSelect from "./controls/MultiFieldSelect.svelte"
-import SearchFieldSelect from "./SearchFieldSelect.svelte"
+import SearchFieldSelect from "./controls/SearchFieldSelect.svelte"
-import SchemaSelect from "./SchemaSelect.svelte"
+import SchemaSelect from "./controls/SchemaSelect.svelte"
-import SectionSelect from "./SectionSelect.svelte"
+import SectionSelect from "./controls/SectionSelect.svelte"
-import NavigationEditor from "./NavigationEditor/NavigationEditor.svelte"
+import NavigationEditor from "./controls/NavigationEditor/NavigationEditor.svelte"
-import FilterEditor from "./FilterEditor/FilterEditor.svelte"
+import FilterEditor from "./controls/FilterEditor/FilterEditor.svelte"
-import URLSelect from "./URLSelect.svelte"
+import URLSelect from "./controls/URLSelect.svelte"
-import OptionsEditor from "./OptionsEditor/OptionsEditor.svelte"
+import OptionsEditor from "./controls/OptionsEditor/OptionsEditor.svelte"
-import FormFieldSelect from "./FormFieldSelect.svelte"
+import FormFieldSelect from "./controls/FormFieldSelect.svelte"
-import ValidationEditor from "./ValidationEditor/ValidationEditor.svelte"
+import ValidationEditor from "./controls/ValidationEditor/ValidationEditor.svelte"
 import DrawerBindableCombobox from "components/common/bindings/DrawerBindableCombobox.svelte"
-import ColumnEditor from "./ColumnEditor/ColumnEditor.svelte"
+import ColumnEditor from "./controls/ColumnEditor/ColumnEditor.svelte"
 
 const componentMap = {
   text: DrawerBindableCombobox,

packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/[componentId]/_components/ComponentSettingsPanel.svelte

@@ -1,5 +0,0 @@
-<script>
-  import SettingsPanel from "components/design/SettingsPanel/SettingsPanel.svelte"
-</script>
-
-<SettingsPanel title="Components" />

packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/[componentId]/_components/ComponentNavigationPanel.svelte → packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/[componentId]/_components/navigation/ComponentNavigationPanel.svelte

@@ -1,5 +1,5 @@
 <script>
-  import NavigationPanel from "components/design/NavigationPanel/NavigationPanel.svelte"
+  import NavigationPanel from "components/design/navigation/NavigationPanel.svelte"
   import ComponentTree from "./ComponentTree.svelte"
   import instantiateStore from "./dragDropStore.js"
   import { goto } from "@roxi/routify"

packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/[componentId]/_components/settings/ComponentSettingsPanel.svelte

@@ -0,0 +1,37 @@
+<script>
+  import SettingsPanel from "components/design/settings/SettingsPanel.svelte"
+  import { store, selectedComponent, currentAsset } from "builderStore"
+  import ComponentSettingsSection from "./ComponentSettingsSection.svelte"
+  import DesignSection from "./DesignSection.svelte"
+  import CustomStylesSection from "./CustomStylesSection.svelte"
+  import ConditionalUISection from "./ConditionalUISection.svelte"
+  import {
+    getBindableProperties,
+    getComponentBindableProperties,
+  } from "builderStore/dataBinding"
+
+  $: componentInstance = $selectedComponent
+  $: componentDefinition = store.actions.components.getDefinition(
+    $selectedComponent?._component
+  )
+  $: bindings = getBindableProperties($currentAsset, $store.selectedComponentId)
+  $: componentBindings = getComponentBindableProperties(
+    $currentAsset,
+    $store.selectedComponentId
+  )
+</script>
+
+<SettingsPanel
+  title={$selectedComponent._instanceName}
+  icon={componentDefinition.icon}
+>
+  <ComponentSettingsSection
+    {componentInstance}
+    {componentDefinition}
+    {bindings}
+    {componentBindings}
+  />
+  <DesignSection {componentInstance} {componentDefinition} {bindings} />
+  <CustomStylesSection {componentInstance} {componentDefinition} {bindings} />
+  <ConditionalUISection {componentInstance} {componentDefinition} {bindings} />
+</SettingsPanel>

packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte → packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/[componentId]/_components/settings/ComponentSettingsSection.svelte

@@ -2,11 +2,11 @@
   import { isEmpty } from "lodash/fp"
   import { Input, DetailSummary, notifications } from "@budibase/bbui"
   import { store } from "builderStore"
-  import PropertyControl from "./PropertyControls/PropertyControl.svelte"
+  import PropertyControl from "components/design/settings/controls/PropertyControl.svelte"
-  import LayoutSelect from "./PropertyControls/LayoutSelect.svelte"
+  import LayoutSelect from "components/design/settings/controls/LayoutSelect.svelte"
-  import RoleSelect from "./PropertyControls/RoleSelect.svelte"
+  import RoleSelect from "components/design/settings/controls/RoleSelect.svelte"
-  import ResetFieldsButton from "./PropertyControls/ResetFieldsButton.svelte"
+  import ResetFieldsButton from "components/design/settings/controls/ResetFieldsButton.svelte"
-  import { getComponentForSettingType } from "./PropertyControls/componentSettings"
+  import { getComponentForSettingType } from "components/design/settings/componentSettings"
   import { Utils } from "@budibase/frontend-core"
 
   export let componentDefinition
@@ -33,7 +33,7 @@
     const customSections = settings.filter(setting => setting.section)
     return [
       {
-        name: componentDefinition?.name || "General",
+        name: "General",
         info: componentDefinition?.info,
         settings: generalSettings,
       },

packages/builder/src/components/design/PropertiesPanel/PropertyControls/ConditionalUIDrawer.svelte → packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/[componentId]/_components/settings/ConditionalUIDrawer.svelte

@@ -14,8 +14,8 @@
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
   import { LuceneUtils, Constants } from "@budibase/frontend-core"
   import { selectedComponent } from "builderStore"
-  import { getComponentForSettingType } from "./componentSettings"
+  import { getComponentForSettingType } from "components/design/settings/componentSettings"
-  import PropertyControl from "./PropertyControl.svelte"
+  import PropertyControl from "components/design/settings/controls/PropertyControl.svelte"
   import { getComponentSettings } from "builderStore/componentUtils"
 
   export let conditions = []

packages/builder/src/components/design/PropertiesPanel/ConditionalUISection.svelte → packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/[componentId]/_components/settings/ConditionalUISection.svelte

@@ -7,7 +7,7 @@
     notifications,
   } from "@budibase/bbui"
   import { store } from "builderStore"
-  import ConditionalUIDrawer from "./PropertyControls/ConditionalUIDrawer.svelte"
+  import ConditionalUIDrawer from "./ConditionalUIDrawer.svelte"
 
   export let componentInstance
   export let bindings

packages/builder/src/components/design/PropertiesPanel/StyleSection.svelte → packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/[componentId]/_components/settings/StyleSection.svelte

@@ -1,5 +1,5 @@
 <script>
-  import PropertyControl from "./PropertyControls/PropertyControl.svelte"
+  import PropertyControl from "components/design/settings/controls/PropertyControl.svelte"
   import { DetailSummary, notifications } from "@budibase/bbui"
   import { store } from "builderStore"
 

packages/builder/src/components/design/PropertiesPanel/componentStyles.js → packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/[componentId]/_components/settings/componentStyles.js

@@ -1,5 +1,5 @@
 import { Input, Select } from "@budibase/bbui"
-import ColorPicker from "./PropertyControls/ColorPicker.svelte"
+import ColorPicker from "components/design/settings/controls/ColorPicker.svelte"
 
 export const margin = {
   label: "Margin",

packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/[componentId]/index.svelte

@@ -1,6 +1,6 @@
 <script>
-  import ComponentNavigationPanel from "./_components/ComponentNavigationPanel.svelte"
+  import ComponentNavigationPanel from "./_components/navigation/ComponentNavigationPanel.svelte"
-  import ComponentSettingsPanel from "./_components/ComponentSettingsPanel.svelte"
+  import ComponentSettingsPanel from "./_components/settings/ComponentSettingsPanel.svelte"
 </script>
 
 <ComponentNavigationPanel />

packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/new/_components/NewComponentPanel.svelte

@@ -1,5 +1,5 @@
 <script>
-  import NavigationPanel from "components/design/NavigationPanel/NavigationPanel.svelte"
+  import NavigationPanel from "components/design/navigation/NavigationPanel.svelte"
   import { goto } from "@roxi/routify"
   import {
     Layout,

packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/new/_components/NewComponentTargetPanel.svelte

@@ -1,5 +1,5 @@
 <script>
-  import SettingsPanel from "components/design/SettingsPanel/SettingsPanel.svelte"
+  import SettingsPanel from "components/design/settings/SettingsPanel.svelte"
   import { Body, Layout } from "@budibase/bbui"
 </script>
 

packages/builder/src/pages/builder/app/[application]/design/screens/_components/ScreenDropdownMenu.svelte

@@ -62,14 +62,6 @@
       notifications.error("Error deleting screen")
     }
   }
-
-  const pasteComponent = mode => {
-    try {
-      store.actions.components.paste(screen?.props, mode)
-    } catch (error) {
-      notifications.error("Error saving component")
-    }
-  }
 </script>
 
 <ActionMenu>
@@ -77,13 +69,6 @@
     <Icon size="S" hoverable name="MoreSmallList" />
   </div>
   <MenuItem icon="Duplicate" on:click={duplicateScreen}>Duplicate</MenuItem>
-  <MenuItem
-    icon="ShowOneLayer"
-    on:click={() => pasteComponent("inside")}
-    disabled={!$store.componentToPaste}
-  >
-    Paste inside
-  </MenuItem>
   <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
 </ActionMenu>
 

packages/builder/src/pages/builder/app/[application]/design/screens/_components/ScreenNavigationPanel.svelte

@@ -1,6 +1,6 @@
 <script>
   import { Search, Layout, Select } from "@budibase/bbui"
-  import NavigationPanel from "components/design/NavigationPanel/NavigationPanel.svelte"
+  import NavigationPanel from "components/design/navigation/NavigationPanel.svelte"
   import { roles } from "stores/backend"
   import { store } from "builderStore"
   import NavItem from "components/common/NavItem.svelte"

packages/builder/src/pages/builder/app/[application]/design/screens/_components/ScreenSettingsPanel.svelte

@@ -1,5 +1,5 @@
 <script>
-  import SettingsPanel from "components/design/SettingsPanel/SettingsPanel.svelte"
+  import SettingsPanel from "components/design/settings/SettingsPanel.svelte"
   import { get } from "svelte/store"
   import { get as deepGet, setWith } from "lodash"
   import {
@@ -10,8 +10,8 @@
     Checkbox,
     notifications,
   } from "@budibase/bbui"
-  import PropertyControl from "components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte"
+  import PropertyControl from "components/design/settings/controls/PropertyControl.svelte"
-  import RoleSelect from "components/design/PropertiesPanel/PropertyControls/RoleSelect.svelte"
+  import RoleSelect from "components/design/settings/controls/RoleSelect.svelte"
   import { selectedScreen, store } from "builderStore"
   import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
 

packages/builder/src/pages/builder/app/[application]/design/theme/index.svelte

@@ -1,5 +1,5 @@
 <script>
-  import NavigationPanel from "components/design/NavigationPanel/NavigationPanel.svelte"
+  import NavigationPanel from "components/design/navigation/NavigationPanel.svelte"
   import { Body, Layout } from "@budibase/bbui"
   import ThemeEditor from "./_components/ThemeEditor.svelte"
 </script>