From 1084436d359b12df70b7ea168fb27f5e3c09f9a4 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Fri, 28 May 2021 16:52:45 -0400
Subject: [PATCH] Add delete panel

---
 app/src/lang/translations/en-US.yaml          |  3 ++
 app/src/modules/insights/components/panel.vue | 22 ++++++++--
 app/src/modules/insights/routes/dashboard.vue | 44 +++++++++++++++++++
 .../insights/routes/panel-configuration.vue   |  9 ++--
 4 files changed, 72 insertions(+), 6 deletions(-)

diff --git a/app/src/lang/translations/en-US.yaml b/app/src/lang/translations/en-US.yaml
index 20164f0152..d5d95dd83e 100644
--- a/app/src/lang/translations/en-US.yaml
+++ b/app/src/lang/translations/en-US.yaml
@@ -546,6 +546,9 @@ label: Label
 insights: Insights
 dashboard: Dashboard
 panel: Panel
+panel_header: Panel Header
+panel_delete_confirm: Are you sure you want to delete this panel? This action can not be undone.
+visible: Visible
 no_dashboards: No Dashboards
 no_dashboards_copy: You don’t have any Dashboards yet.
 create_dashboard: Create Dashboard
diff --git a/app/src/modules/insights/components/panel.vue b/app/src/modules/insights/components/panel.vue
index 0cc416cc0f..cf3018c35e 100644
--- a/app/src/modules/insights/components/panel.vue
+++ b/app/src/modules/insights/components/panel.vue
@@ -21,6 +21,7 @@
 				v-tooltip="$t('edit')"
 				@click="$router.push(`/insights/${panel.dashboard}/${panel.id}`)"
 			/>
+			<v-icon small class="delete-icon" name="clear" v-tooltip="$t('delete')" @click="$emit('delete')" />
 		</div>
 
 		<div class="resize-handlers" v-if="editMode">
@@ -92,7 +93,14 @@ export default defineComponent({
 
 		const { onPointerDown, onPointerUp, onPointerMove, dragging } = useDragDrop();
 
-		return { positioning, iconColor, onPointerDown, onPointerUp, onPointerMove, dragging };
+		return {
+			positioning,
+			iconColor,
+			onPointerDown,
+			onPointerUp,
+			onPointerMove,
+			dragging,
+		};
 
 		function useDragDrop() {
 			const dragging = ref(false);
@@ -210,9 +218,9 @@ export default defineComponent({
 	grid-row: var(--pos-y) / span var(--height);
 	grid-column: var(--pos-x) / span var(--width);
 	background-color: var(--background-page);
-	border: 1px solid var(--border-normal);
+	border: 1px solid var(--border-subdued);
 	border-radius: var(--border-radius-outline);
-	box-shadow: 0 0 0 1px var(--border-normal);
+	box-shadow: 0 0 0 1px var(--border-subdued);
 }
 
 .panel:hover {
@@ -220,6 +228,8 @@ export default defineComponent({
 }
 
 .panel.editing {
+	border-color: var(--border-normal);
+	box-shadow: 0 0 0 1px var(--border-normal);
 	cursor: move;
 }
 
@@ -273,16 +283,22 @@ export default defineComponent({
 }
 
 .edit-icon,
+.delete-icon,
 .note {
 	--v-icon-color: var(--foreground-subdued);
 	--v-icon-color-hover: var(--foreground-normal);
 }
 
+.delete-icon {
+	--v-icon-color-hover: var(--danger);
+}
+
 .edit-actions {
 	position: absolute;
 	top: 0;
 	right: 0;
 	display: flex;
+	gap: 4px;
 	align-items: center;
 	padding: 12px;
 	background-color: var(--background-page);
diff --git a/app/src/modules/insights/routes/dashboard.vue b/app/src/modules/insights/routes/dashboard.vue
index 19097177df..7f284c1df5 100644
--- a/app/src/modules/insights/routes/dashboard.vue
+++ b/app/src/modules/insights/routes/dashboard.vue
@@ -40,6 +40,7 @@
 				:panel="panel"
 				:edit-mode="editMode"
 				@update="stagePanelEdits($event, panel.id)"
+				@delete="confirmDeletePanel = panel.id"
 			/>
 		</div>
 
@@ -50,6 +51,21 @@
 			@save="stageConfiguration"
 			@cancel="$router.push(`/insights/${primaryKey}`)"
 		/>
+
+		<v-dialog :active="!!confirmDeletePanel" @esc="confirmDeletePanel = null">
+			<v-card>
+				<v-card-title>{{ $t('panel_delete_confirm') }}</v-card-title>
+
+				<v-card-actions>
+					<v-button @click="confirmDeletePanel = null" secondary>
+						{{ $t('cancel') }}
+					</v-button>
+					<v-button class="action-delete" @click="deletePanel" :loading="deletingPanel">
+						{{ $t('delete') }}
+					</v-button>
+				</v-card-actions>
+			</v-card>
+		</v-dialog>
 	</private-view>
 </template>
 
@@ -82,6 +98,8 @@ export default defineComponent({
 	},
 	setup(props) {
 		const editMode = ref(false);
+		const confirmDeletePanel = ref<string | null>(null);
+		const deletingPanel = ref(false);
 		const saving = ref(false);
 		const insightsStore = useInsightsStore();
 
@@ -156,6 +174,9 @@ export default defineComponent({
 			saveChanges,
 			stageConfiguration,
 			workspaceSize,
+			deletingPanel,
+			deletePanel,
+			confirmDeletePanel,
 		};
 
 		function stagePanelEdits(edits: Partial<Panel>, key: string = props.panelKey) {
@@ -217,6 +238,22 @@ export default defineComponent({
 				saving.value = false;
 			}
 		}
+
+		async function deletePanel() {
+			if (!currentDashboard.value || !confirmDeletePanel.value) return;
+
+			deletingPanel.value = true;
+
+			try {
+				await api.delete(`/panels/${confirmDeletePanel.value}`);
+				await insightsStore.hydrate();
+				confirmDeletePanel.value = null;
+			} catch (err) {
+				unexpectedError(err);
+			} finally {
+				deletingPanel.value = false;
+			}
+		}
 	},
 });
 </script>
@@ -257,4 +294,11 @@ export default defineComponent({
 .workspace.editing::before {
 	opacity: 1;
 }
+
+.action-delete {
+	--v-button-background-color: var(--danger-10);
+	--v-button-color: var(--danger);
+	--v-button-background-color-hover: var(--danger-25);
+	--v-button-color-hover: var(--danger);
+}
 </style>
diff --git a/app/src/modules/insights/routes/panel-configuration.vue b/app/src/modules/insights/routes/panel-configuration.vue
index 6bb301b2c6..8ce3f0696f 100644
--- a/app/src/modules/insights/routes/panel-configuration.vue
+++ b/app/src/modules/insights/routes/panel-configuration.vue
@@ -27,12 +27,15 @@
 				<component v-model="edits.options" :collection="collection" :is="`panel-options-${selectedPanel.id}`" v-else />
 			</template>
 
-			<v-divider />
+			<v-divider :inline-title="false" large>
+				<template #icon><v-icon name="info" /></template>
+				<template #default>{{ $t('panel_header') }}</template>
+			</v-divider>
 
 			<div class="form-grid">
 				<div class="field half-left">
-					<p class="type-label">{{ $t('show_header') }}</p>
-					<v-checkbox block v-model="edits.show_header" :label="$t('enabled')" />
+					<p class="type-label">{{ $t('visible') }}</p>
+					<v-checkbox block v-model="edits.show_header" :label="$t('show_header')" />
 				</div>
 
 				<div class="field half-right">