From 6f2d279f0e48c0c3557dca806ff715036b22bb33 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Thu, 30 Jan 2025 16:47:04 +0100
Subject: [PATCH] Use existing utils

---
 packages/builder/src/helpers/duplicate.ts      |  6 ++++--
 .../builder/src/stores/builder/components.ts   | 18 +++++++++---------
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/packages/builder/src/helpers/duplicate.ts b/packages/builder/src/helpers/duplicate.ts
index b4740b3e52..eb705c6525 100644
--- a/packages/builder/src/helpers/duplicate.ts
+++ b/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}`
 }
diff --git a/packages/builder/src/stores/builder/components.ts b/packages/builder/src/stores/builder/components.ts
index 7aedf05438..6693cbf4dc 100644
--- a/packages/builder/src/stores/builder/components.ts
+++ b/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 $screenComponents = get(screenComponents)
-
-    const sameNameCount = $screenComponents.filter(c =>
-      new RegExp(`^${componentName}( \\d*)?$`).test(c._instanceName)
-    ).length
-    if (sameNameCount) {
-      componentName = `${componentName} ${sameNameCount + 1}`
-    }
+    const componentName = getSequentialName(
+      get(screenComponents),
+      `New ${definition.friendlyName || definition.name}`,
+      {
+        getName: c => c._instanceName,
+        separator: " ",
+      }
+    )
 
     // Generate basic component structure
     let instance: Component = {