Ensure grid schema structure is predictable and prevent copying IDs for query datasources

packages/frontend-core/src/components/grid/cells/HeaderCell.svelte

@@ -22,6 +22,7 @@
     columns,
     definition,
     datasource,
+    schema,
   } = getContext("grid")
 
   const bannedDisplayColumnTypes = [
@@ -126,16 +127,16 @@
     // Generate new name
     let newName = `${column.name} copy`
     let attempts = 2
-    while ($definition.schema[newName]) {
+    while ($schema[newName]) {
       newName = `${column.name} copy ${attempts++}`
     }
 
     // Save schema with new column
-    const existingColumnDefinition = $definition.schema[column.name]
+    const existingColumnDefinition = $schema[column.name]
     await datasource.actions.saveDefinition({
       ...$definition,
       schema: {
-        ...$definition.schema,
+        ...$schema,
         [newName]: {
           ...existingColumnDefinition,
           name: newName,

packages/frontend-core/src/components/grid/overlays/MenuOverlay.svelte

@@ -75,7 +75,9 @@
       </MenuItem>
       <MenuItem
         icon="Copy"
-        disabled={isNewRow || !$focusedRow?._id}
+        disabled={isNewRow ||
+          !$focusedRow?._id ||
+          $focusedRow?._id?.startsWith("fake-")}
         on:click={() => copyToClipboard($focusedRow?._id)}
         on:click={menu.actions.close}
       >

packages/frontend-core/src/components/grid/stores/columns.js

@@ -69,7 +69,7 @@ export const deriveStores = context => {
 }
 
 export const createActions = context => {
-  const { columns, stickyColumn, datasource, definition } = context
+  const { columns, stickyColumn, datasource, definition, schema } = context
 
   // Updates the datasources primary display column
   const changePrimaryDisplay = async column => {
@@ -101,7 +101,7 @@ export const createActions = context => {
     const $columns = get(columns)
     const $definition = get(definition)
     const $stickyColumn = get(stickyColumn)
-    const newSchema = cloneDeep($definition.schema)
+    let newSchema = cloneDeep(get(schema)) || {}
 
     // Build new updated datasource schema
     Object.keys(newSchema).forEach(column => {
@@ -142,11 +142,11 @@ export const createActions = context => {
 }
 
 export const initialise = context => {
-  const { definition, columns, stickyColumn, schema } = context
+  const { definition, columns, stickyColumn, enrichedSchema } = context
 
   // Merge new schema fields with existing schema in order to preserve widths
-  schema.subscribe($schema => {
+  enrichedSchema.subscribe($enrichedSchema => {
-    if (!$schema) {
+    if (!$enrichedSchema) {
       columns.set([])
       stickyColumn.set(null)
       return
@@ -155,13 +155,16 @@ export const initialise = context => {
 
     // Find primary display
     let primaryDisplay
-    if ($definition.primaryDisplay && $schema[$definition.primaryDisplay]) {
+    if (
+      $definition.primaryDisplay &&
+      $enrichedSchema[$definition.primaryDisplay]
+    ) {
       primaryDisplay = $definition.primaryDisplay
     }
 
     // Get field list
     let fields = []
-    Object.keys($schema).forEach(field => {
+    Object.keys($enrichedSchema).forEach(field => {
       if (field !== primaryDisplay) {
         fields.push(field)
       }
@@ -172,11 +175,11 @@ export const initialise = context => {
       fields
         .map(field => ({
           name: field,
-          label: $schema[field].displayName || field,
+          label: $enrichedSchema[field].displayName || field,
-          schema: $schema[field],
+          schema: $enrichedSchema[field],
-          width: $schema[field].width || DefaultColumnWidth,
+          width: $enrichedSchema[field].width || DefaultColumnWidth,
-          visible: $schema[field].visible ?? true,
+          visible: $enrichedSchema[field].visible ?? true,
-          order: $schema[field].order,
+          order: $enrichedSchema[field].order,
         }))
         .sort((a, b) => {
           // Sort by order first
@@ -207,9 +210,9 @@ export const initialise = context => {
     }
     stickyColumn.set({
       name: primaryDisplay,
-      label: $schema[primaryDisplay].displayName || primaryDisplay,
+      label: $enrichedSchema[primaryDisplay].displayName || primaryDisplay,
-      schema: $schema[primaryDisplay],
+      schema: $enrichedSchema[primaryDisplay],
-      width: $schema[primaryDisplay].width || DefaultColumnWidth,
+      width: $enrichedSchema[primaryDisplay].width || DefaultColumnWidth,
       visible: true,
       order: 0,
       left: GutterWidth,

packages/frontend-core/src/components/grid/stores/datasource.js

@@ -12,27 +12,36 @@ export const createStores = () => {
 export const deriveStores = context => {
   const { definition, schemaOverrides, columnWhitelist } = context
 
-  const schema = derived(
+  const schema = derived(definition, $definition => {
-    [definition, schemaOverrides, columnWhitelist],
+    let schema = $definition?.schema
-    ([$definition, $schemaOverrides, $columnWhitelist]) => {
+    if (!schema) {
-      if (!$definition?.schema) {
       return null
     }
-      let newSchema = { ...$definition?.schema }
 
     // Ensure schema is configured as objects.
     // Certain datasources like queries use primitives.
-      Object.keys(newSchema).forEach(key => {
+    Object.keys(schema || {}).forEach(key => {
-        if (typeof newSchema[key] !== "object") {
+      if (typeof schema[key] !== "object") {
-          newSchema[key] = { type: newSchema[key] }
+        schema[key] = { type: schema[key] }
       }
     })
 
+    return schema
+  })
+
+  const enrichedSchema = derived(
+    [schema, schemaOverrides, columnWhitelist],
+    ([$schema, $schemaOverrides, $columnWhitelist]) => {
+      if (!$schema) {
+        return null
+      }
+      let enrichedSchema = { ...$schema }
+
       // Apply schema overrides
       Object.keys($schemaOverrides || {}).forEach(field => {
-        if (newSchema[field]) {
+        if (enrichedSchema[field]) {
-          newSchema[field] = {
+          enrichedSchema[field] = {
-            ...newSchema[field],
+            ...enrichedSchema[field],
             ...$schemaOverrides[field],
           }
         }
@@ -40,19 +49,20 @@ export const deriveStores = context => {
 
       // Apply whitelist if specified
       if ($columnWhitelist?.length) {
-        Object.keys(newSchema).forEach(key => {
+        Object.keys(enrichedSchema).forEach(key => {
           if (!$columnWhitelist.includes(key)) {
-            delete newSchema[key]
+            delete enrichedSchema[key]
           }
         })
       }
 
-      return newSchema
+      return enrichedSchema
     }
   )
 
   return {
     schema,
+    enrichedSchema,
   }
 }
 

packages/frontend-core/src/components/grid/stores/rows.js

@@ -418,7 +418,7 @@ export const createActions = context => {
       // Ensure we have a unique _id.
       // This means generating one for non DS+.
       if (!newRow._id) {
-        newRow._id = Helpers.hashString(JSON.stringify(newRow))
+        newRow._id = `fake-${Helpers.hashString(JSON.stringify(newRow))}`
       }
 
       if (!rowCacheMap[newRow._id]) {

packages/frontend-core/src/components/grid/stores/sort.js

@@ -17,7 +17,7 @@ export const createStores = context => {
 }
 
 export const initialise = context => {
-  const { sort, initialSortColumn, initialSortOrder, definition } = context
+  const { sort, initialSortColumn, initialSortOrder, schema } = context
 
   // Reset sort when initial sort props change
   initialSortColumn.subscribe(newSortColumn => {
@@ -28,15 +28,12 @@ export const initialise = context => {
   })
 
   // Derive if the current sort column exists in the schema
-  const sortColumnExists = derived(
+  const sortColumnExists = derived([sort, schema], ([$sort, $schema]) => {
-    [sort, definition],
+    if (!$sort?.column || !$schema) {
-    ([$sort, $definition]) => {
-      if (!$sort?.column || !$definition) {
       return true
     }
-      return $definition.schema?.[$sort.column] != null
+    return $schema[$sort.column] != null
-    }
+  })
-  )
 
   // Clear sort state if our sort column does not exist
   sortColumnExists.subscribe(exists => {