Show color placeholder, fix edit modal

app/src/interfaces/select-color/select-color.vue

@@ -3,7 +3,7 @@
 		<template #activator="{ activate }">
 			<v-input
 				:disabled="disabled"
-				:placeholder="t('interfaces.select-color.placeholder')"
+				:placeholder="placeholder || t('interfaces.select-color.placeholder')"
 				v-model="hex"
 				:pattern="/#([a-f\d]{2}){3}/i"
 				class="color-input"
@@ -97,6 +97,10 @@ export default defineComponent({
 			default: null,
 			validator: (val: string) => val === null || val === '' || isHex(val),
 		},
+		placeholder: {
+			type: String,
+			default: null,
+		},
 		presets: {
 			type: Array as PropType<string[]>,
 			default: () => [

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

@@ -601,6 +601,9 @@ no_dashboards: No Dashboards
 no_dashboards_copy: You don’t have any Dashboards yet.
 create_dashboard: Create Dashboard
 dashboard_name: Dashboard Name
+full_screen: Full Screen
+edit_panels: Edit Panels
+fit_to_screen: Fit to Screen
 image_url: Image Url
 alt_text: Alternative Text
 media: Media

app/src/modules/insights/components/dashboard-dialog.vue

@@ -31,11 +31,12 @@
 <script lang="ts">
 import api from '@/api';
 import { unexpectedError } from '@/utils/unexpected-error';
-import { defineComponent, ref, reactive, PropType } from 'vue';
+import { defineComponent, ref, reactive, PropType, watch } from 'vue';
 import { useInsightsStore } from '@/stores';
 import { router } from '@/router';
 import { Dashboard } from '@/types';
 import { useI18n } from 'vue-i18n';
+import { isEqual } from 'lodash';
 
 export default defineComponent({
 	name: 'DashboardDialog',
@@ -61,6 +62,17 @@ export default defineComponent({
 			note: props.dashboard?.note ?? null,
 		});
 
+		watch(
+			() => props.modelValue,
+			(newValue, oldValue) => {
+				if (isEqual(newValue, oldValue) === false) {
+					values.name = props.dashboard?.name ?? null;
+					values.icon = props.dashboard?.icon ?? 'dashboard';
+					values.note = props.dashboard?.note ?? null;
+				}
+			}
+		);
+
 		const saving = ref(false);
 
 		return { values, cancel, saving, save, t };

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

@@ -34,15 +34,31 @@
 			</template>
 
 			<template v-else>
-				<v-button :active="zoomToFit" class="zoom-to-fit" rounded icon outlined @click="toggleZoomToFit">
+				<v-button
+					v-tooltip.bottom="t('fit_to_screen')"
+					:active="zoomToFit"
+					class="zoom-to-fit"
+					rounded
+					icon
+					outlined
+					@click="toggleZoomToFit"
+				>
 					<v-icon name="aspect_ratio" />
 				</v-button>
 
-				<v-button :active="fullScreen" class="fullscreen" rounded icon outlined @click="toggleFullScreen">
+				<v-button
+					v-tooltip.bottom="t('full_screen')"
+					:active="fullScreen"
+					class="fullscreen"
+					rounded
+					icon
+					outlined
+					@click="toggleFullScreen"
+				>
 					<v-icon name="fullscreen" />
 				</v-button>
 
-				<v-button rounded icon outlined @click="editMode = !editMode">
+				<v-button v-tooltip.bottom="t('edit_panels')" rounded icon outlined @click="editMode = !editMode">
 					<v-icon name="edit" />
 				</v-button>
 			</template>

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

@@ -17,7 +17,7 @@
 						@click="on"
 						rounded
 						icon
-						v-tooltip.bottom="createAllowed ? t('create_item') : t('not_allowed')"
+						v-tooltip.bottom="createAllowed ? t('create_dashboard') : t('not_allowed')"
 						:disabled="createAllowed === false"
 					>
 						<v-icon name="add" />

app/src/panels/label/index.ts

@@ -24,6 +24,9 @@ export default definePanel({
 			meta: {
 				interface: 'select-color',
 				width: 'half',
+				options: {
+					placeholder: '$t:automatic',
+				},
 			},
 		},
 	],