Add information sidebar component

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

@@ -660,7 +660,7 @@ unsaved_changes: Unsaved Changes
 unsaved_changes_copy: Are you sure you want to leave this page?
 discard_changes: Discard Changes
 keep_editing: Keep Editing
-page_help_collections_overview: '**Collections Overview** — Lists of all collections you have access to.'
+page_help_collections_overview: '**Collections Overview** — List of all collections you have access to.'
 page_help_collections_collection: >-
   **Browse Items** — Lists all {collection} items you have access to. Customize layout, filters, and sorting to tailor
   your view, and even save bookmarks of these different configurations for quick access.
@@ -694,6 +694,8 @@ page_help_settings_webhooks_item: '**Webhook Detail** — A form for creating an
 page_help_users_collection: '**User Directory** — Lists all system users within this project.'
 page_help_users_item: >-
   **User Detail** — Manage your account information, or view the details of other users.
+page_help_insights_overview: '**Insights** — List of dashboards you have access to.'
+page_help_insights_dashboard: '**Dashboard** — Workspace for managing one or more panels'
 activity_feed: Activity Feed
 add_new: Add New
 create_new: Create New

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

@@ -48,6 +48,12 @@
 			</template>
 		</template>
 
+		<template #sidebar>
+			<sidebar-detail icon="info_outline" :title="t('information')" close>
+				<div class="page-description" v-html="md(t('page_help_insights_dashboard'))" />
+			</sidebar-detail>
+		</template>
+
 		<template #navigation>
 			<insights-navigation />
 		</template>
@@ -100,6 +106,7 @@ import api from '@/api';
 import { useI18n } from 'vue-i18n';
 import { pointOnLine } from '@/utils/point-on-line';
 import InsightsWorkspace from '../components/workspace.vue';
+import { md } from '@/utils/md';
 
 export default defineComponent({
 	name: 'InsightsDashboard',
@@ -215,6 +222,7 @@ export default defineComponent({
 			zoomToFit,
 			fullScreen,
 			toggleZoomToFit,
+			md,
 		};
 
 		function stagePanelEdits(event: { edits: Partial<Panel>; id?: string }) {

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

@@ -26,6 +26,12 @@
 			</dashboard-dialog>
 		</template>
 
+		<template #sidebar>
+			<sidebar-detail icon="info_outline" :title="t('information')" close>
+				<div class="page-description" v-html="md(t('page_help_insights_overview'))" />
+			</sidebar-detail>
+		</template>
+
 		<v-table
 			v-if="dashboards.length > 0"
 			v-model:headers="tableHeaders"
@@ -105,6 +111,7 @@ import InsightsNavigation from '../components/navigation.vue';
 import DashboardDialog from '../components/dashboard-dialog.vue';
 import api from '@/api';
 import { unexpectedError } from '@/utils/unexpected-error';
+import { md } from '@/utils/md';
 
 export default defineComponent({
 	name: 'InsightsOverview',
@@ -157,6 +164,7 @@ export default defineComponent({
 			deleteDashboard,
 			editDashboard,
 			t,
+			md,
 		};
 
 		function navigateToDashboard(dashboard: Dashboard) {