From 30e5afa18c9b45060d36789c2862e98ad2ebf6c1 Mon Sep 17 00:00:00 2001
From: Andrew Riedel <andrew.m.riedel@gmail.com>
Date: Thu, 18 Mar 2021 12:39:03 -0600
Subject: [PATCH] DashboardList: Enable templating on search tag input (#31460)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Add variable interpolation for dashlist panel.

* Update docs/sources/panels/visualizations/dashboard-list-panel.md

Co-authored-by: achatterjee-grafana <70489351+achatterjee-grafana@users.noreply.github.com>

* Fix variable interpolation for dashlist panel to work with all syntax.

* Update docs/sources/panels/visualizations/dashboard-list-panel.md

Co-authored-by: achatterjee-grafana <70489351+achatterjee-grafana@users.noreply.github.com>

* Fix prettier issues.

* Fix prettier issues.

* Update docs/sources/panels/visualizations/dashboard-list-panel.md

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

Co-authored-by: achatterjee-grafana <70489351+achatterjee-grafana@users.noreply.github.com>
Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
---
 .../panels/visualizations/dashboard-list-panel.md    |  2 +-
 public/app/plugins/panel/dashlist/DashList.tsx       | 12 +++++++-----
 public/app/plugins/panel/dashlist/module.tsx         |  1 -
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/docs/sources/panels/visualizations/dashboard-list-panel.md b/docs/sources/panels/visualizations/dashboard-list-panel.md
index 6b25a3ad164..b07fb10e3ed 100644
--- a/docs/sources/panels/visualizations/dashboard-list-panel.md
+++ b/docs/sources/panels/visualizations/dashboard-list-panel.md
@@ -21,7 +21,7 @@ Use these options to refine your visualization.
 
 - **Starred -** Display starred dashboards in alphabetical order.
 - **Recently viewed -** Display recently viewed dashboards in alphabetical order.
-- **Search -** Display dashboards by search query or tags. Requires you to enter at least one value in **Query** or **Tags**.
+- **Search -** Display dashboards by search query or tags. You must enter at least one value in **Query** or **Tags**. For the **Query** and **Tags** fields. Variable interpolation is supported, for example,`$my_var` or `${my_var}`.
 - **Show headings -** The chosen list selection (Starred, Recently viewed, Search) is shown as a heading.
 - **Max items -** Sets the maximum number of items to list per section. For example, if you left this at the default value of 10 and displayed Starred and Recently viewed dashboards, then the panel would display up to 20 total dashboards, ten in each section.
 
diff --git a/public/app/plugins/panel/dashlist/DashList.tsx b/public/app/plugins/panel/dashlist/DashList.tsx
index 664e4d017d9..351d9c3caea 100644
--- a/public/app/plugins/panel/dashlist/DashList.tsx
+++ b/public/app/plugins/panel/dashlist/DashList.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import take from 'lodash/take';
 
-import { PanelProps } from '@grafana/data';
+import { InterpolateFunction, PanelProps } from '@grafana/data';
 import { CustomScrollbar, Icon, useStyles } from '@grafana/ui';
 
 import { getBackendSrv } from 'app/core/services/backend_srv';
@@ -19,7 +19,7 @@ interface DashboardGroup {
   dashboards: Dashboard[];
 }
 
-async function fetchDashboards(options: DashListOptions) {
+async function fetchDashboards(options: DashListOptions, replaceVars: InterpolateFunction) {
   let starredDashboards: Promise<Dashboard[]> = Promise.resolve([]);
   if (options.showStarred) {
     const params = { limit: options.maxItems, starred: 'true' };
@@ -37,9 +37,9 @@ async function fetchDashboards(options: DashListOptions) {
   if (options.showSearch) {
     const params = {
       limit: options.maxItems,
-      query: options.query,
+      query: replaceVars(options.query, {}, 'text'),
       folderIds: options.folderId,
-      tag: options.tags,
+      tag: options.tags.map((tag: string) => replaceVars(tag, {}, 'text')),
       type: 'dash-db',
     };
 
@@ -79,7 +79,7 @@ async function fetchDashboards(options: DashListOptions) {
 export function DashList(props: PanelProps<DashListOptions>) {
   const [dashboards, setDashboards] = useState(new Map<number, Dashboard>());
   useEffect(() => {
-    fetchDashboards(props.options).then((dashes) => {
+    fetchDashboards(props.options, props.replaceVariables).then((dashes) => {
       setDashboards(dashes);
     });
   }, [
@@ -90,6 +90,8 @@ export function DashList(props: PanelProps<DashListOptions>) {
     props.options.query,
     props.options.tags,
     props.options.folderId,
+    props.replaceVariables,
+    props.renderCounter,
   ]);
 
   const toggleDashboardStar = async (e: React.SyntheticEvent, dash: Dashboard) => {
diff --git a/public/app/plugins/panel/dashlist/module.tsx b/public/app/plugins/panel/dashlist/module.tsx
index 16817c5c953..f9b51648004 100644
--- a/public/app/plugins/panel/dashlist/module.tsx
+++ b/public/app/plugins/panel/dashlist/module.tsx
@@ -1,4 +1,3 @@
-import _ from 'lodash';
 import { PanelModel, PanelPlugin } from '@grafana/data';
 import { DashList } from './DashList';
 import { DashListOptions } from './types';