Use existing utils

packages/builder/src/helpers/duplicate.ts

@@ -76,13 +76,15 @@ export const getSequentialName = <T extends any>(
   {
     getName,
     numberFirstItem,
+    separator = "",
   }: {
     getName?: (item: T) => string
     numberFirstItem?: boolean
+    separator?: string
   } = {}
 ) => {
   if (!prefix?.length) {
-    return null
+    return ""
   }
   const trimmedPrefix = prefix.trim()
   const firstName = numberFirstItem ? `${prefix}1` : trimmedPrefix
@@ -107,5 +109,5 @@ export const getSequentialName = <T extends any>(
       max = num
     }
   })
-  return max === 0 ? firstName : `${prefix}${max + 1}`
+  return max === 0 ? firstName : `${prefix}${separator}${max + 1}`
 }

packages/builder/src/stores/builder/components.ts

@@ -38,6 +38,7 @@ import {
   Table,
 } from "@budibase/types"
 import { utils } from "@budibase/shared-core"
+import { getSequentialName } from "@/helpers/duplicate"
 
 interface Component extends ComponentType {
   _id: string
@@ -467,15 +468,14 @@ export class ComponentStore extends BudiStore<ComponentState> {
       return null
     }
 
-    let componentName = `New ${definition.friendlyName || definition.name}`
+    const componentName = getSequentialName(
-    const $screenComponents = get(screenComponents)
+      get(screenComponents),
-
+      `New ${definition.friendlyName || definition.name}`,
-    const sameNameCount = $screenComponents.filter(c =>
+      {
-      new RegExp(`^${componentName}( \\d*)?$`).test(c._instanceName)
+        getName: c => c._instanceName,
-    ).length
+        separator: " ",
-    if (sameNameCount) {
+      }
-      componentName = `${componentName} ${sameNameCount + 1}`
+    )
-    }
 
     // Generate basic component structure
     let instance: Component = {