Update devtools with new features

packages/client/src/components/ClientApp.svelte

@@ -208,6 +208,7 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: stretch;
+    overflow: hidden;
   }
 
   .error {

packages/client/src/components/Component.svelte

@@ -12,7 +12,11 @@
   import { writable, get } from "svelte/store"
   import * as AppComponents from "components/app"
   import Router from "./Router.svelte"
-  import { enrichProps, propsAreSame } from "utils/componentProps"
+  import {
+    enrichProps,
+    propsAreSame,
+    getSettingsDefinition,
+  } from "utils/componentProps"
   import { builderStore, devToolsStore, componentStore } from "stores"
   import { Helpers } from "@budibase/bbui"
   import Manifest from "manifest.json"
@@ -207,22 +211,6 @@
     return type ? Manifest[type] : null
   }
 
-  // Gets the definition of this component's settings from the manifest
-  const getSettingsDefinition = definition => {
-    if (!definition) {
-      return []
-    }
-    let settings = []
-    definition.settings?.forEach(setting => {
-      if (setting.section) {
-        settings = settings.concat(setting.settings || [])
-      } else {
-        settings.push(setting)
-      }
-    })
-    return settings
-  }
-
   const getInstanceSettings = (instance, settingsDefinition) => {
     // Get raw settings
     let settings = {}

packages/client/src/components/devtools/DevTools.svelte

@@ -38,6 +38,7 @@
     background: var(--spectrum-alias-background-color-secondary);
     flex: 0 0 320px;
     border-left: 1px solid var(--spectrum-global-color-gray-300);
+    overflow: auto;
   }
   .devtools.mobile {
     display: none;

packages/client/src/components/devtools/DevToolsComponentSetting.svelte

@@ -0,0 +1,13 @@
+<script>
+  import DevToolsStat from "./DevToolsStat.svelte"
+
+  export let name
+  export let value
+  export let settingsMap
+
+  $: prettyName = settingsMap?.[name]?.label
+</script>
+
+{#if prettyName}
+  <DevToolsStat label={prettyName} value={JSON.stringify(value)} />
+{/if}

packages/client/src/components/devtools/DevToolsComponentTab.svelte

@@ -5,12 +5,22 @@
     Heading,
     Button,
     TextArea,
-    Divider,
+    Tabs,
+    Tab,
+    Toggle,
   } from "@budibase/bbui"
   import { builderStore, devToolsStore, componentStore } from "stores"
   import DevToolsStat from "./DevToolsStat.svelte"
+  import { getSettingsDefinition } from "utils/componentProps.js"
+
+  let showEnrichedSettings = true
 
   $: selectedInstance = $componentStore.selectedComponentInstance
+  $: settingsDefinition = getSettingsDefinition(
+    $componentStore.selectedComponentDefinition
+  )
+  $: rawSettings = selectedInstance?.getRawSettings()
+  $: settings = selectedInstance?.getSettings()
 
   $: {
     if (!selectedInstance) {
@@ -48,40 +58,83 @@
       />
       <DevToolsStat label="ID" value={$componentStore.selectedComponent?._id} />
     </Layout>
-    <div>
+    <div class="buttons">
       <Button
         cta
         on:click={() => devToolsStore.actions.setAllowSelection(true)}
       >
         Change component
       </Button>
+      <Button
+        quiet
+        secondary
+        on:click={() => builderStore.actions.selectComponent(null)}
+      >
+        Reset
+      </Button>
     </div>
+
     <div class="data">
       <Layout noPadding gap="XS">
-        <TextArea
-          readonly
-          label="Data context"
-          value={JSON.stringify(selectedInstance?.getDataContext(), null, 2)}
-        />
-        <TextArea
-          readonly
-          label="Raw settings"
-          value={JSON.stringify(selectedInstance?.getRawSettings(), null, 2)}
-        />
-        <TextArea
-          readonly
-          label="Enriched settings"
-          value={JSON.stringify(selectedInstance?.getSettings(), null, 2)}
-        />
+        <Tabs selected="Settings">
+          <Tab title="Settings">
+            <div class="tab-content">
+              <Layout noPadding gap="S">
+                <Toggle
+                  text="Show enriched settings"
+                  bind:value={showEnrichedSettings}
+                />
+                <Layout noPadding gap="XS">
+                  {#each settingsDefinition as setting}
+                    <DevToolsStat
+                      label={setting.label}
+                      value={JSON.stringify(
+                        (showEnrichedSettings ? settings : rawSettings)?.[
+                          setting.key
+                        ]
+                      )}
+                    />
+                  {/each}
+                </Layout>
+              </Layout>
+            </div>
+          </Tab>
+          <Tab title="Context">
+            <div class="tab-content">
+              <TextArea
+                readonly
+                label="Data context"
+                value={JSON.stringify(
+                  selectedInstance?.getDataContext(),
+                  null,
+                  2
+                )}
+              />
+            </div>
+          </Tab>
+        </Tabs>
       </Layout>
     </div>
   </Layout>
 {/if}
 
 <style>
+  .buttons {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-xs);
+  }
+  .data {
+    margin: 0 calc(-1 * var(--spacing-xl));
+  }
   .data :global(.spectrum-Textfield-input) {
     min-height: 200px !important;
     white-space: pre;
     font-size: var(--font-size-s);
   }
+  .tab-content {
+    padding: 0 var(--spacing-xl);
+  }
 </style>

packages/client/src/components/devtools/DevToolsHeader.svelte

@@ -30,7 +30,7 @@
 </script>
 
 <div class="dev-preview-header" class:mobile={$context.device.mobile}>
-  <Heading size="XS">Application Preview</Heading>
+  <Heading size="XS">Budibase App Preview</Heading>
   <Select
     quiet
     options={previewOptions}
@@ -53,6 +53,7 @@
 
 <style>
   .dev-preview-header {
+    flex: 0 0 50px;
     height: 50px;
     display: grid;
     align-items: center;

packages/client/src/components/devtools/DevToolsStat.svelte

@@ -5,7 +5,9 @@
 
 <div class="stat">
   <div class="stat-label">{label}</div>
-  <div class="stat-value">{value}</div>
+  <div class="stat-value" title={value} on:click={() => console.log(value)}>
+    {value == null ? " " : value}
+  </div>
 </div>
 
 <style>
@@ -14,10 +16,24 @@
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
+    gap: var(--spacing-xl);
   }
   .stat-label {
     font-size: var(--font-size-xs);
     color: var(--spectrum-global-color-gray-600);
     text-transform: uppercase;
+    flex: 0 0 auto;
+    max-width: 140px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .stat-value {
+    flex: 1 1 auto;
+    width: 0;
+    text-align: right;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 </style>

packages/client/src/stores/builder.js

@@ -1,5 +1,6 @@
 import { writable, get } from "svelte/store"
 import { API } from "api"
+import { devToolsStore } from "./devTools.js"
 
 const dispatchEvent = (type, data = {}) => {
   window.parent.postMessage({ type, data })
@@ -31,6 +32,7 @@ const createBuilderStore = () => {
         editMode: false,
         selectedComponentId: id,
       }))
+      devToolsStore.actions.setAllowSelection(false)
       dispatchEvent("select-component", { id })
     },
     updateProp: (prop, value) => {

packages/client/src/utils/componentProps.js

@@ -107,3 +107,21 @@ export const propsUseBinding = (props, bindingKey) => {
   }
   return false
 }
+
+/**
+ * Gets the definition of this component's settings from the manifest
+ */
+export const getSettingsDefinition = definition => {
+  if (!definition) {
+    return []
+  }
+  let settings = []
+  definition.settings?.forEach(setting => {
+    if (setting.section) {
+      settings = settings.concat(setting.settings || [])
+    } else {
+      settings.push(setting)
+    }
+  })
+  return settings
+}

packages/server/src/middleware/currentapp.js

@@ -72,7 +72,7 @@ module.exports = async (ctx, next) => {
     if (isBuilder && isDevApp && roleHeader) {
       // Ensure the role is valid ensuring a definition exists
       try {
-        await getRole(appId, roleHeader)
+        await getRole(roleHeader)
         roleId = roleHeader
       } catch (error) {
         // Swallow error and do nothing