From 85f42dbe5d99c7b7e29b2f6eb01505dae1ee674f Mon Sep 17 00:00:00 2001
From: Ben Haynes <ben@rngr.org>
Date: Mon, 31 May 2021 18:56:12 -0400
Subject: [PATCH] Insights placeholders and defaults

---
 .../_system/system-collection/system-collection.vue   |  2 +-
 .../interfaces/_system/system-field/system-field.vue  |  2 +-
 app/src/lang/translations/en-US.yaml                  |  6 ++++++
 .../modules/insights/routes/panel-configuration.vue   |  6 +++---
 app/src/panels/metric/index.ts                        | 11 +++++++++++
 5 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/app/src/interfaces/_system/system-collection/system-collection.vue b/app/src/interfaces/_system/system-collection/system-collection.vue
index b6265bee3f..0251d728aa 100644
--- a/app/src/interfaces/_system/system-collection/system-collection.vue
+++ b/app/src/interfaces/_system/system-collection/system-collection.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-select :value="value" :disabled="disabled" :items="items" @input="$emit('input', $event)" />
+	<v-select :value="value" :disabled="disabled" :items="items" @input="$emit('input', $event)" :placeholder="$t('select_a_collection')" />
 </template>
 
 <script lang="ts">
diff --git a/app/src/interfaces/_system/system-field/system-field.vue b/app/src/interfaces/_system/system-field/system-field.vue
index abf4a6bc32..f274e13d59 100644
--- a/app/src/interfaces/_system/system-field/system-field.vue
+++ b/app/src/interfaces/_system/system-field/system-field.vue
@@ -12,7 +12,7 @@
 		:value="value"
 		:disabled="disabled"
 		:items="selectItems"
-		:placeholder="placeholder"
+		:placeholder="$t('select_a_field')"
 	/>
 </template>
 
diff --git a/app/src/lang/translations/en-US.yaml b/app/src/lang/translations/en-US.yaml
index a76eaba6da..38523ebcc7 100644
--- a/app/src/lang/translations/en-US.yaml
+++ b/app/src/lang/translations/en-US.yaml
@@ -363,6 +363,7 @@ relationship_not_setup: The relationship hasn't been configured correctly
 display_template_not_setup: The display template option is misconfigured
 collection_field_not_setup: The collection field option is misconfigured
 select_a_collection: Select a Collection
+select_a_field: Select a Field
 active: Active
 users: Users
 activity: Activity
@@ -549,11 +550,16 @@ insights: Insights
 dashboard: Dashboard
 panel: Panel
 panel_header: Panel Header
+panel_name_placeholder: Name this panel...
+panel_note_placeholder: Optional details about this panel...
 panel_delete_confirm: Are you sure you want to delete this panel? This action can not be undone.
 dashboard_delete_confirm: Are you sure you want to delete this dashboard? This action can not be undone.
 edit_dashboard: Edit Dashboard
 delete_dashboard: Delete Dashboard
 visible: Visible
+prefix_placeholder: Text before value...
+suffix_placeholder: Text after value...
+decimals_placeholder: Number of decimal places...
 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/routes/panel-configuration.vue b/app/src/modules/insights/routes/panel-configuration.vue
index 22494e77f4..2996fa448d 100644
--- a/app/src/modules/insights/routes/panel-configuration.vue
+++ b/app/src/modules/insights/routes/panel-configuration.vue
@@ -40,7 +40,7 @@
 
 				<div class="field half-right">
 					<p class="type-label">{{ $t('name') }}</p>
-					<v-input :nullable="false" v-model="edits.name" :disabled="edits.show_header !== true" />
+					<v-input :nullable="false" v-model="edits.name" :disabled="edits.show_header !== true" :placeholder="$t('panel_name_placeholder')" />
 				</div>
 
 				<div class="field half-left">
@@ -55,7 +55,7 @@
 
 				<div class="field full">
 					<p class="type-label">{{ $t('note') }}</p>
-					<v-input v-model="edits.note" :disabled="edits.show_header !== true" />
+					<v-input v-model="edits.note" :disabled="edits.show_header !== true" :placeholder="$t('panel_note_placeholder')" />
 				</div>
 			</div>
 		</div>
@@ -85,7 +85,7 @@ export default defineComponent({
 			name: props.panel?.name,
 			note: props.panel?.note,
 			icon: props.panel?.icon ?? 'insert_chart',
-			color: props.panel?.color,
+			color: props.panel?.color ?? '#00C897',
 			width: props.panel?.width ?? undefined,
 			height: props.panel?.height ?? undefined,
 			position_x: props.panel?.position_x ?? 1,
diff --git a/app/src/panels/metric/index.ts b/app/src/panels/metric/index.ts
index 6c98415082..ec2725999c 100644
--- a/app/src/panels/metric/index.ts
+++ b/app/src/panels/metric/index.ts
@@ -71,6 +71,9 @@ export default definePanel({
 			meta: {
 				interface: 'input',
 				width: 'half',
+				options: {
+					placeholder: '$t:decimals_placeholder',
+				},
 			},
 			schema: {
 				default_value: 2,
@@ -116,8 +119,10 @@ export default definePanel({
 			name: '$t:filter',
 			meta: {
 				interface: 'code',
+				note: '[Learn More: Filter Rules](/admin/docs/reference/filter-rules)',
 				options: {
 					language: 'json',
+					placeholder: '{\n\t<field>: {\n\t\t<operator>: <value>\n\t}\n}',
 				},
 			},
 		},
@@ -128,6 +133,9 @@ export default definePanel({
 			meta: {
 				interface: 'input',
 				width: 'half',
+				options: {
+					placeholder: '$t:prefix_placeholder',
+				},
 			},
 		},
 		{
@@ -137,6 +145,9 @@ export default definePanel({
 			meta: {
 				interface: 'input',
 				width: 'half',
+				options: {
+					placeholder: '$t:suffix_placeholder',
+				},
 			},
 		},
 	],