Get new widget name based on widget configs

app/client/src/mockResponses/WidgetConfigResponse.tsx

@@ -7,12 +7,14 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
       buttonStyle: "PRIMARY_BUTTON",
       rows: 1,
       columns: 2,
+      widgetName: "Button",
     },
     TEXT_WIDGET: {
       text: "Not all labels are bad!",
       textStyle: "LABEL",
       rows: 1,
       columns: 3,
+      widgetName: "Text",
     },
     IMAGE_WIDGET: {
       defaultImage: "",
@@ -20,27 +22,32 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
       image: "",
       rows: 3,
       columns: 3,
+      widgetName: "Image",
     },
     INPUT_WIDGET: {
       inputType: "TEXT",
       label: "Label me",
       rows: 1,
       columns: 3,
+      widgetName: "Input",
     },
     SWITCH_WIDGET: {
       isOn: false,
       label: "Turn me on",
       rows: 1,
       columns: 4,
+      widgetName: "Switch",
     },
     CONTAINER_WIDGET: {
       backgroundColor: "#FFFFFF",
       rows: 1,
       columns: 4,
+      widgetName: "Container",
     },
     SPINNER_WIDGET: {
       rows: 1,
       columns: 1,
+      widgetName: "Spinner",
     },
     DATE_PICKER_WIDGET: {
       enableTime: false,
@@ -48,23 +55,27 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
       rows: 1,
       columns: 3,
       label: "Date",
+      widgetName: "Datepicker",
     },
     TABLE_WIDGET: {
       rows: 5,
       columns: 7,
       label: "Don't table me!",
+      widgetName: "Table",
     },
     DROP_DOWN_WIDGET: {
       rows: 1,
       columns: 3,
       selectionType: "SINGLE_SELECT",
       label: "Pick me!",
+      widgetName: "Dropdown",
     },
     CHECKBOX_WIDGET: {
       rows: 1,
       columns: 3,
       label: "Label - CHECK!",
       defaultCheckedState: true,
+      widgetName: "Checkbox",
     },
     RADIO_GROUP_WIDGET: {
       rows: 3,
@@ -76,6 +87,7 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
         { label: "Charlie", value: "3" },
       ],
       defaultOptionValue: "1",
+      widgetName: "RadioGroup",
     },
     ALERT_WIDGET: {
       alertType: "NOTIFICATION",
@@ -84,6 +96,7 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
       columns: 3,
       header: "",
       message: "",
+      widgetName: "Alert",
     },
   },
   configVersion: 1,

app/client/src/sagas/WidgetOperationSagas.tsx

@@ -47,7 +47,7 @@ export function* addChildSaga(addChildAction: ReduxAction<WidgetAddChild>) {
       rows,
       parentRowSpace,
       parentColumnSpace,
-      getNextWidgetName(type, widgets),
+      getNextWidgetName(defaultWidgetConfig.widgetName, widgets),
       defaultWidgetConfig,
     );
     widgets[childWidget.widgetId] = childWidget;

app/client/src/utils/AppsmithUtils.tsx

@@ -12,7 +12,6 @@ import FontFaceObserver from "fontfaceobserver";
 import PropertyControlRegistry from "./PropertyControlRegistry";
 import WidgetBuilderRegistry from "./WidgetRegistry";
 import { Property } from "../api/ActionAPI";
-import { WidgetType } from "../constants/WidgetConstants";
 import { FlattenedWidgetProps } from "../reducers/entityReducers/canvasWidgetsReducer";
 import _ from "lodash";
 
@@ -64,21 +63,18 @@ export const mapToPropList = (map: Record<string, string>): Property[] => {
 };
 
 export const getNextWidgetName = (
-  type: WidgetType,
+  prefix: string,
   widgets: {
     [id: string]: FlattenedWidgetProps;
   },
 ) => {
-  const prefix = type
+  const regex = new RegExp(`^${prefix}(\\d+)$`);
-    .split("_")
-    .filter(token => token !== "WIDGET")
-    .join("")
-    .toLowerCase();
   const usedIndices: number[] = Object.values(widgets).map(widget => {
-    if (widget.type === type) {
+    if (widget && widget.widgetName && regex.test(widget.widgetName)) {
-      const ind = widget.widgetName
+      const name = widget.widgetName || "";
-        ? parseInt(widget.widgetName.split(prefix)[1], 10)
+      const matches = name.match(regex);
-        : 0;
+      const ind =
+        matches && Array.isArray(matches) ? parseInt(matches[1], 10) : 0;
       return Number.isNaN(ind) ? 0 : ind;
     }
     return 0;