DashboardList: Enable templating on search tag input (#31460)

* 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>

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.
 

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) => {

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';