Add column name input validation.

packages/builder/src/builderStore/websocket.js

@@ -47,7 +47,6 @@ export const createBuilderWebsocket = appId => {
 
   // Data section events
   socket.onOther(BuilderSocketEvent.TableChange, ({ id, table }) => {
-    console.log("Table change", id, table)
     tables.replaceTable(id, table)
   })
   socket.onOther(BuilderSocketEvent.DatasourceChange, ({ id, datasource }) => {

packages/frontend-core/src/components/grid/controls/MigrationModal.svelte

@@ -6,13 +6,23 @@
     InlineAlert,
   } from "@budibase/bbui"
   import { getContext } from "svelte"
+  import { ValidColumnNameRegex } from "@budibase/shared-core"
 
   const { API, dispatch, definition, rows } = getContext("grid")
 
   export let column
 
-  let newColumnName = `${column.schema.name} (migrated)`
-  $: newAndOldNameMatch = column.schema.name === newColumnName
+  let newColumnName = `${column.schema.name} migrated`
+  $: error = checkNewColumnName(newColumnName)
+
+  const checkNewColumnName = newColumnName => {
+    if (column.schema.name === newColumnName) {
+      return "New column name can't be the same as the existing column name."
+    }
+    if (newColumnName.match(ValidColumnNameRegex) === null) {
+      return "Illegal character; must be alpha-numeric."
+    }
+  }
 
   const migrateUserColumn = async () => {
     let subtype = "users"
@@ -44,7 +54,7 @@
   confirmText="Continue"
   cancelText="Cancel"
   onConfirm={migrateUserColumn}
-  disabled={newAndOldNameMatch}
+  disabled={error !== undefined}
   size="M"
 >
   This operation will kick off a migration of the column "{column.schema.name}"
@@ -56,11 +66,5 @@
     header="Are you sure?"
     message="This will leave bindings which utilised the user relationship column in a state where they will need to be updated to use the new column instead."
   />
-  <Input
-    bind:value={newColumnName}
-    label="New column name"
-    error={newAndOldNameMatch
-      ? "New column name can't be the same as the existing column name"
-      : undefined}
-  />
+  <Input bind:value={newColumnName} label="New column name" {error} />
 </ModalContent>