Introduce modal to show warning to users, and toast to show success.

packages/builder/src/components/backend/DataTable/TableDataTable.svelte

@@ -53,6 +53,11 @@
       await datasources.fetch()
     }
   }
+
+  const refreshDefinitions = async () => {
+    await tables.fetch()
+    await datasources.fetch()
+  }
 </script>
 
 <div class="wrapper">
@@ -66,6 +71,7 @@
     schemaOverrides={isUsersTable ? userSchemaOverrides : null}
     showAvatars={false}
     on:updatedatasource={handleGridTableUpdate}
+    on:refreshdefinitions={refreshDefinitions}
   >
     <svelte:fragment slot="filter">
       {#if isUsersTable && $store.features.disableUserMetadata}

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

@@ -1,9 +1,17 @@
 <script>
   import { getContext, onMount, tick } from "svelte"
   import { canBeDisplayColumn, canBeSortColumn } from "@budibase/shared-core"
-  import { Icon, Popover, Menu, MenuItem, clickOutside } from "@budibase/bbui"
+  import {
+    Icon,
+    Popover,
+    Menu,
+    MenuItem,
+    clickOutside,
+    Modal,
+  } from "@budibase/bbui"
   import GridCell from "./GridCell.svelte"
   import { getColumnIcon } from "../lib/utils"
+  import MigrationModal from "../controls/MigrationModal.svelte"
 
   export let column
   export let idx
@@ -32,6 +40,7 @@
   let editIsOpen = false
   let timeout
   let popover
+  let migrationModal
 
   $: sortedBy = column.name === $sort.column
   $: canMoveLeft = orderable && idx > 0
@@ -115,24 +124,6 @@
     open = false
   }
 
-  const migrateUserColumn = async () => {
-    let subtype = "users"
-    if (column.schema.relationshipType === "one-to-many") {
-      subtype = "user"
-    }
-
-    await API.migrateColumn({
-      tableId: $definition._id,
-      oldColumn: column.schema,
-      newColumn: {
-        name: `${column.schema.name} migrated`,
-        type: "bb_reference",
-        subtype,
-      },
-    })
-    open = false
-  }
-
   const duplicateColumn = async () => {
     open = false
 
@@ -160,9 +151,18 @@
     })
   }
 
+  const openMigrationModal = () => {
+    migrationModal.show()
+    open = false
+  }
+
   onMount(() => subscribe("close-edit-column", cancelEdit))
 </script>
 
+<Modal bind:this={migrationModal}>
+  <MigrationModal {column} />
+</Modal>
+
 <div
   class="header-cell"
   class:open
@@ -281,8 +281,8 @@
       >
         Hide column
       </MenuItem>
-      {#if column.schema.type === "link" && column.schema.tableId === "ta_users"}
-        <MenuItem icon="User" on:click={migrateUserColumn}>
+      {#if $config.canEditColumns && column.schema.type === "link" && column.schema.tableId === "ta_users"}
+        <MenuItem icon="User" on:click={openMigrationModal}>
           Migrate to user column
         </MenuItem>
       {/if}

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

@@ -0,0 +1,42 @@
+<script>
+  import { ModalContent, notifications } from "@budibase/bbui"
+  import { getContext } from "svelte"
+
+  const { API, dispatch, definition, rows } = getContext("grid")
+
+  export let column
+
+  const migrateUserColumn = async () => {
+    let subtype = "users"
+    if (column.schema.relationshipType === "one-to-many") {
+      subtype = "user"
+    }
+
+    try {
+      await API.migrateColumn({
+        tableId: $definition._id,
+        oldColumn: column.schema,
+        newColumn: {
+          name: `${column.schema.name} migrated`,
+          type: "bb_reference",
+          subtype,
+        },
+      })
+      notifications.success("Column migrated")
+    } catch (e) {
+      notifications.error(`Failed to migrate: ${e.message}`)
+    }
+    await rows.actions.refreshData()
+    dispatch("refreshdefintions")
+  }
+</script>
+
+<ModalContent
+  title="Migrate column"
+  confirmText="Continue"
+  cancelText="Cancel"
+  onConfirm={migrateUserColumn}
+  size="M"
+>
+  TODO: copy here
+</ModalContent>