Use overlay side panel and update table block side panel heading

packages/client/manifest.json

@@ -4476,7 +4476,7 @@
               "Ascending",
               "Descending"
             ],
-            "defaultValue": "Descending"
+            "defaultValue": "Ascending"
           },
           {
             "type": "select",

packages/client/src/components/app/Layout.svelte

@@ -1,7 +1,7 @@
 <script>
   import { getContext, setContext } from "svelte"
   import { writable } from "svelte/store"
-  import { Heading, Icon } from "@budibase/bbui"
+  import { Heading, Icon, clickOutside, Checkbox } from "@budibase/bbui"
   import { FieldTypes } from "constants"
   import active from "svelte-spa-router/active"
   import { RoleUtils } from "@budibase/frontend-core"
@@ -247,7 +247,11 @@
       </div>
     </div>
   </div>
-  <div id="side-panel-container" class:open={$sidePanelStore.open}>
+  <div
+    id="side-panel-container"
+    class:open={$sidePanelStore.open}
+    use:clickOutside={sidePanelStore.actions.close}
+  >
     <div class="side-panel-header">
       <Icon
         color="var(--spectrum-global-color-gray-600)"
@@ -341,20 +345,23 @@
   }
 
   #side-panel-container {
-    flex: 0 0 400px;
     max-width: calc(100vw - 40px);
     background: var(--spectrum-global-color-gray-50);
-    transition: margin-right 130ms ease-out;
     z-index: 3;
     padding: var(--spacing-xl);
-    margin-right: -410px;
     display: flex;
     flex-direction: column;
     gap: 30px;
     overflow-y: auto;
-    border-left: 1px solid var(--spectrum-global-color-gray-300);
+    transition: margin-right 260ms ease-out;
+    position: absolute;
+    width: 400px;
+    right: 0;
+    margin-right: -400px;
+    height: 100%;
   }
   #side-panel-container.open {
+    box-shadow: 0 0 40px 10px rgba(0, 0, 0, 0.1);
     margin-right: 0;
   }
   .side-panel-header {

packages/client/src/components/app/blocks/TableBlock.svelte

@@ -26,19 +26,22 @@
   export let titleButtonClickBehaviour
   export let onClickTitleButton
 
-  const { fetchDatasourceSchema } = getContext("sdk")
+  const { fetchDatasourceSchema, API } = getContext("sdk")
   const stateKey = `ID_${generate()}`
 
   let formId
   let dataProviderId
+  let detailsFormBlockId
   let detailsSidePanelId
   let newRowSidePanelId
   let schema
+  let primaryDisplay
   let schemaLoaded = false
 
   $: fetchSchema(dataSource)
   $: enrichedSearchColumns = enrichSearchColumns(searchColumns, schema)
   $: enrichedFilter = enrichFilter(filter, enrichedSearchColumns, formId)
+  $: editTitle = getEditTitle(detailsFormBlockId, primaryDisplay)
   $: normalFields = getNormalFields(schema)
   $: rowClickActions =
     clickBehaviour === "actions"
@@ -77,7 +80,11 @@
 
   // Load the datasource schema so we can determine column types
   const fetchSchema = async dataSource => {
-    if (dataSource) {
+    if (dataSource?.type === "table") {
+      const definition = await API.fetchTableDefinition(dataSource?.tableId)
+      schema = definition.schema
+      primaryDisplay = definition.primaryDisplay
+    } else if (dataSource) {
       schema = await fetchDatasourceSchema(dataSource, {
         enrichRelationships: true,
       })
@@ -95,6 +102,14 @@
       })
       .map(entry => entry[0])
   }
+
+  const getEditTitle = (detailsFormBlockId, primaryDisplay) => {
+    if (!primaryDisplay || !detailsFormBlockId) {
+      return "Edit"
+    }
+    const prefix = safe(detailsFormBlockId + "-repeater")
+    return `{{ ${prefix}.${safe(primaryDisplay)} }}`
+  }
 </script>
 
 {#if schemaLoaded}
@@ -183,7 +198,7 @@
         props={{
           dataSource,
           filter: enrichedFilter,
-          sortColumn,
+          sortColumn: sortColumn || primaryDisplay,
           sortOrder,
           paginate,
           limit: rowCount,
@@ -216,6 +231,7 @@
           <BlockComponent
             name="Details form block"
             type="formblock"
+            bind:id={detailsFormBlockId}
             props={{
               dataSource,
               showSaveButton: true,
@@ -223,7 +239,7 @@
               actionType: "Update",
               rowId: `{{ ${safe("state")}.${safe(stateKey)} }}`,
               fields: normalFields,
-              title: "Row Details",
+              title: editTitle,
               labelPosition: "left",
             }}
           />

yarn.lock

@@ -6559,10 +6559,10 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==
 
-typescript@4.5.5:
+typescript@4.7.3:
-  version "4.5.5"
+  version "4.7.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.5.5.tgz#d8c953832d28924a9e3d37c73d729c846c5896f3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.3.tgz#8364b502d5257b540f9de4c40be84c98e23a129d"
-  integrity sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==
+  integrity sha512-WOkT3XYvrpXx4vMMqlD+8R8R37fZkjyLGlxavMc4iB8lrl8L0DeTcHbYgw/v0N/z9wAFsgBhcsF0ruoySS22mA==
 
 typescript@^3.9.10, typescript@^3.9.5, typescript@^3.9.7:
   version "3.9.10"