diff --git a/app/client/src/sagas/WidgetOperationSagas.tsx b/app/client/src/sagas/WidgetOperationSagas.tsx index 5c974e64e8..043ec44edb 100644 --- a/app/client/src/sagas/WidgetOperationSagas.tsx +++ b/app/client/src/sagas/WidgetOperationSagas.tsx @@ -287,6 +287,8 @@ export function* addChildrenSaga( defaultConfig.widgetName, widgetNames, ); + // update the list of widget names for the next iteration + widgetNames.push(newWidgetName); widgets[child.widgetId] = { ...child, widgetName: newWidgetName, diff --git a/app/client/src/utils/WidgetPropsUtils.tsx b/app/client/src/utils/WidgetPropsUtils.tsx index 08259c7591..7bd58033f4 100644 --- a/app/client/src/utils/WidgetPropsUtils.tsx +++ b/app/client/src/utils/WidgetPropsUtils.tsx @@ -258,6 +258,26 @@ const dynamicPathListMigration = ( return currentDSL; }; +const canvasNameConflictMigration = ( + currentDSL: ContainerWidgetProps, + props = { counter: 1 }, +): ContainerWidgetProps => { + if ( + currentDSL.type === WidgetTypes.CANVAS_WIDGET && + currentDSL.widgetName.startsWith("Canvas") + ) { + currentDSL.widgetName = `Canvas${props.counter}`; + // Canvases inside tabs have `name` property as well + if (currentDSL.name) { + currentDSL.name = currentDSL.widgetName; + } + props.counter++; + } + currentDSL.children?.forEach((c) => canvasNameConflictMigration(c, props)); + + return currentDSL; +}; + // A rudimentary transform function which updates the DSL based on its version. // A more modular approach needs to be designed. const transformDSL = (currentDSL: ContainerWidgetProps) => { @@ -310,6 +330,11 @@ const transformDSL = (currentDSL: ContainerWidgetProps) => { currentDSL.version = 7; } + if (currentDSL.version === 7) { + currentDSL = canvasNameConflictMigration(currentDSL); + currentDSL.version = 8; + } + return currentDSL; };