Fix repositioning on update existing

app/src/lang/translations/en-US.yaml

@@ -209,6 +209,7 @@ raw_value: Raw value
 edit_raw_value: Edit Raw Value
 enter_raw_value: Enter raw value...
 clear_value: Clear value
+clear_changes: Clear Changes
 reset_to_default: Reset to default
 undo_changes: Undo changes
 notifications: Notifications

app/src/modules/insights/components/panel.vue

@@ -15,7 +15,7 @@
 	>
 		<div class="header" v-if="panel.show_header">
 			<v-icon class="icon" :style="iconColor" :name="panel.icon" />
-			<v-text-overflow class="name" :text="panel.name" />
+			<v-text-overflow class="name" :text="panel.name || ''" />
 			<div class="spacer" />
 			<v-icon class="note" v-if="panel.note" name="info" v-tooltip="panel.note" />
 		</div>

app/src/modules/insights/routes/dashboard.vue

@@ -13,11 +13,22 @@
 
 		<template #actions>
 			<template v-if="editMode">
-				<v-button rounded icon outlined :to="`/insights/${currentDashboard.id}/+`">
+				<v-button
+					class="clear-changes"
+					v-tooltip.bottom="$t('clear_changes')"
+					rounded
+					icon
+					outlined
+					@click="cancelChanges"
+				>
+					<v-icon name="clear" />
+				</v-button>
+
+				<v-button rounded icon outlined v-tooltip.bottom="$t('add_new')" :to="`/insights/${currentDashboard.id}/+`">
 					<v-icon name="add" />
 				</v-button>
 
-				<v-button rounded icon @click="saveChanges" :loading="saving">
+				<v-button rounded icon v-tooltip.bottom="$t('save')" @click="saveChanges" :loading="saving">
 					<v-icon name="check" />
 				</v-button>
 			</template>
@@ -222,6 +233,7 @@ export default defineComponent({
 			deletingPanel,
 			deletePanel,
 			confirmDeletePanel,
+			cancelChanges,
 		};
 
 		function stagePanelEdits(edits: Partial<Panel>, key: string = props.panelKey) {
@@ -304,6 +316,11 @@ export default defineComponent({
 				deletingPanel.value = false;
 			}
 		}
+
+		function cancelChanges() {
+			stagedPanels.value = [];
+			editMode.value = false;
+		}
 	},
 });
 </script>
@@ -351,4 +368,9 @@ export default defineComponent({
 	--v-button-background-color-hover: var(--danger-25);
 	--v-button-color-hover: var(--danger);
 }
+
+.clear-changes {
+	--v-button-background-color: var(--foreground-subdued);
+	--v-button-background-color-hover: var(--foreground);
+}
 </style>

app/src/modules/insights/routes/panel-configuration.vue

@@ -84,12 +84,12 @@ export default defineComponent({
 			type: props.panel?.type || undefined,
 			name: props.panel?.name,
 			note: props.panel?.note,
-			icon: 'insert_chart',
+			icon: props.panel?.icon ?? 'insert_chart',
 			color: props.panel?.color,
-			width: undefined,
-			height: undefined,
-			position_x: 1,
-			position_y: 1,
+			width: props.panel?.width ?? undefined,
+			height: props.panel?.height ?? undefined,
+			position_x: props.panel?.position_x ?? 1,
+			position_y: props.panel?.position_y ?? 1,
 			options: props.panel?.options ?? {},
 		});