From 8b19c4077e7841d962e35ca6aff763bd06bdc862 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Fri, 28 May 2021 19:19:12 -0400
Subject: [PATCH] Fix repositioning on update existing

---
 app/src/lang/translations/en-US.yaml          |  1 +
 app/src/modules/insights/components/panel.vue |  2 +-
 app/src/modules/insights/routes/dashboard.vue | 26 +++++++++++++++++--
 .../insights/routes/panel-configuration.vue   | 10 +++----
 4 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/app/src/lang/translations/en-US.yaml b/app/src/lang/translations/en-US.yaml
index 44aef0d650..a76eaba6da 100644
--- a/app/src/lang/translations/en-US.yaml
+++ b/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
diff --git a/app/src/modules/insights/components/panel.vue b/app/src/modules/insights/components/panel.vue
index e4ecbbb3db..ba945e0546 100644
--- a/app/src/modules/insights/components/panel.vue
+++ b/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>
diff --git a/app/src/modules/insights/routes/dashboard.vue b/app/src/modules/insights/routes/dashboard.vue
index d67ccf9e9d..3e90f5554d 100644
--- a/app/src/modules/insights/routes/dashboard.vue
+++ b/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>
diff --git a/app/src/modules/insights/routes/panel-configuration.vue b/app/src/modules/insights/routes/panel-configuration.vue
index ada7f353fb..22494e77f4 100644
--- a/app/src/modules/insights/routes/panel-configuration.vue
+++ b/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 ?? {},
 		});