Add counter

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

@@ -20,6 +20,7 @@ import {
   previewStore,
   tables,
   componentTreeNodesStore,
+  screenComponents,
 } from "@/stores/builder"
 import { buildFormSchema, getSchemaForDatasource } from "@/dataBinding"
 import {
@@ -467,6 +468,14 @@ export class ComponentStore extends BudiStore<ComponentState> {
     }
 
     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}`
+    }
 
     // Generate basic component structure
     let instance: Component = {

packages/builder/src/stores/builder/index.js

@@ -16,7 +16,7 @@ import { userStore, userSelectedResourceMap, isOnlyUser } from "./users.js"
 import { deploymentStore } from "./deployments.js"
 import { contextMenuStore } from "./contextMenu.js"
 import { snippets } from "./snippets"
-import { screenComponentErrors } from "./screenComponent"
+import { screenComponents, screenComponentErrors } from "./screenComponent"
 
 // Backend
 import { tables } from "./tables"
@@ -68,6 +68,7 @@ export {
   snippets,
   rowActions,
   appPublished,
+  screenComponents,
   screenComponentErrors,
 }
 

packages/builder/src/stores/builder/screenComponent.ts

@@ -3,11 +3,12 @@ import { tables } from "./tables"
 import { selectedScreen } from "./screens"
 import { viewsV2 } from "./viewsV2"
 import { findComponentsBySettingsType } from "@/helpers/screen"
-import { UIDatasourceType, Screen } from "@budibase/types"
+import { UIDatasourceType, Screen, Component } from "@budibase/types"
 import { queries } from "./queries"
 import { views } from "./views"
 import { bindings, featureFlag } from "@/helpers"
 import { getBindableProperties } from "@/dataBinding"
+import { findAllComponents } from "@/helpers/components"
 
 function reduceBy<TItem extends {}, TKey extends keyof TItem>(
   key: TKey,
@@ -111,3 +112,16 @@ export const screenComponentErrors = derived(
     return getInvalidDatasources($selectedScreen, datasources)
   }
 )
+
+export const screenComponents = derived(
+  [selectedScreen],
+  ([$selectedScreen]) => {
+    if (!$selectedScreen) {
+      return []
+    }
+    const allComponents = findAllComponents(
+      $selectedScreen.props
+    ) as Component[]
+    return allComponents
+  }
+)