From ecd73570492ae4fcd32844df1e587f0cf6d95cc0 Mon Sep 17 00:00:00 2001
From: Laura Benz <48948963+L-M-K-B@users.noreply.github.com>
Date: Fri, 3 May 2024 17:52:10 +0200
Subject: [PATCH] Dashboards: Add toggle for folder names in dashboard list
 panel (#87288)

* refactor: add switch

* refactor: add functionality

* refactor: fix test
---
 .../panelcfg/x/DashboardListPanelCfg_types.gen.ts            | 2 ++
 public/app/plugins/panel/dashlist/DashList.tsx               | 4 ++--
 public/app/plugins/panel/dashlist/migrations.test.ts         | 2 ++
 public/app/plugins/panel/dashlist/module.tsx                 | 5 +++++
 public/app/plugins/panel/dashlist/panelcfg.cue               | 1 +
 public/app/plugins/panel/dashlist/panelcfg.gen.ts            | 2 ++
 6 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-schema/src/raw/composable/dashboardlist/panelcfg/x/DashboardListPanelCfg_types.gen.ts b/packages/grafana-schema/src/raw/composable/dashboardlist/panelcfg/x/DashboardListPanelCfg_types.gen.ts
index 18d67b82e23..5902634f965 100644
--- a/packages/grafana-schema/src/raw/composable/dashboardlist/panelcfg/x/DashboardListPanelCfg_types.gen.ts
+++ b/packages/grafana-schema/src/raw/composable/dashboardlist/panelcfg/x/DashboardListPanelCfg_types.gen.ts
@@ -20,6 +20,7 @@ export interface Options {
   keepTime: boolean;
   maxItems: number;
   query: string;
+  showFolderNames: boolean;
   showHeadings: boolean;
   showRecentlyViewed: boolean;
   showSearch: boolean;
@@ -32,6 +33,7 @@ export const defaultOptions: Partial<Options> = {
   keepTime: false,
   maxItems: 10,
   query: '',
+  showFolderNames: true,
   showHeadings: true,
   showRecentlyViewed: false,
   showSearch: false,
diff --git a/public/app/plugins/panel/dashlist/DashList.tsx b/public/app/plugins/panel/dashlist/DashList.tsx
index 876a3dd1b8c..66db02bf561 100644
--- a/public/app/plugins/panel/dashlist/DashList.tsx
+++ b/public/app/plugins/panel/dashlist/DashList.tsx
@@ -150,7 +150,7 @@ export function DashList(props: PanelProps<Options>) {
     ];
   }, [dashboards]);
 
-  const { showStarred, showRecentlyViewed, showHeadings, showSearch } = props.options;
+  const { showStarred, showRecentlyViewed, showHeadings, showFolderNames, showSearch } = props.options;
 
   const dashboardGroups: DashboardGroup[] = [
     {
@@ -188,7 +188,7 @@ export function DashList(props: PanelProps<Options>) {
                 <a className={css.dashlistTitle} href={url}>
                   {dash.title}
                 </a>
-                {dash.folderTitle && <div className={css.dashlistFolder}>{dash.folderTitle}</div>}
+                {showFolderNames && dash.folderTitle && <div className={css.dashlistFolder}>{dash.folderTitle}</div>}
               </div>
               <IconButton
                 tooltip={dash.isStarred ? `Unmark "${dash.title}" as favorite` : `Mark "${dash.title}" as favorite`}
diff --git a/public/app/plugins/panel/dashlist/migrations.test.ts b/public/app/plugins/panel/dashlist/migrations.test.ts
index 607c5b9c7a6..82cd76a56a7 100644
--- a/public/app/plugins/panel/dashlist/migrations.test.ts
+++ b/public/app/plugins/panel/dashlist/migrations.test.ts
@@ -56,6 +56,7 @@ describe('dashlist migrations', () => {
       showRecentlyViewed: true,
       showSearch: true,
       showHeadings: true,
+      showFolderNames: true,
       maxItems: 7,
       query: 'hello, query',
       includeVars: false,
@@ -103,6 +104,7 @@ describe('dashlist migrations', () => {
       showRecentlyViewed: true,
       showSearch: true,
       showHeadings: true,
+      showFolderNames: true,
       maxItems: 7,
       query: 'hello, query',
       includeVars: false,
diff --git a/public/app/plugins/panel/dashlist/module.tsx b/public/app/plugins/panel/dashlist/module.tsx
index 0ac1e61dd7d..a7169752418 100644
--- a/public/app/plugins/panel/dashlist/module.tsx
+++ b/public/app/plugins/panel/dashlist/module.tsx
@@ -42,6 +42,11 @@ export const plugin = new PanelPlugin<Options>(DashList)
         name: 'Show headings',
         defaultValue: defaultOptions.showHeadings,
       })
+      .addBooleanSwitch({
+        path: 'showFolderNames',
+        name: 'Show folder names',
+        defaultValue: defaultOptions.showFolderNames,
+      })
       .addNumberInput({
         path: 'maxItems',
         name: 'Max items',
diff --git a/public/app/plugins/panel/dashlist/panelcfg.cue b/public/app/plugins/panel/dashlist/panelcfg.cue
index 3ef8be5679c..89ad57a7d48 100644
--- a/public/app/plugins/panel/dashlist/panelcfg.cue
+++ b/public/app/plugins/panel/dashlist/panelcfg.cue
@@ -28,6 +28,7 @@ composableKinds: PanelCfg: {
 					showRecentlyViewed: bool | *false
 					showSearch:         bool | *false
 					showHeadings:       bool | *true
+					showFolderNames:    bool | *true
 					maxItems:           int | *10
 					query:              string | *""
 					tags:               [...string] | *[]
diff --git a/public/app/plugins/panel/dashlist/panelcfg.gen.ts b/public/app/plugins/panel/dashlist/panelcfg.gen.ts
index 7d85f926cfc..a7cdcd9de50 100644
--- a/public/app/plugins/panel/dashlist/panelcfg.gen.ts
+++ b/public/app/plugins/panel/dashlist/panelcfg.gen.ts
@@ -18,6 +18,7 @@ export interface Options {
   keepTime: boolean;
   maxItems: number;
   query: string;
+  showFolderNames: boolean;
   showHeadings: boolean;
   showRecentlyViewed: boolean;
   showSearch: boolean;
@@ -30,6 +31,7 @@ export const defaultOptions: Partial<Options> = {
   keepTime: false,
   maxItems: 10,
   query: '',
+  showFolderNames: true,
   showHeadings: true,
   showRecentlyViewed: false,
   showSearch: false,