Dashboard/Links: Fixes dashboard links by tags not working (#24773)

* Fixes dashboard links by tags not working

* removes code duplication

public/app/features/dashboard/components/SubMenu/DashboardLinks.tsx

 import React, { FC } from 'react';
 import { Icon, IconName, Tooltip } from '@grafana/ui';
 import { sanitize, sanitizeUrl } from '@grafana/data/src/text/sanitize';
-import { DashboardsDropdown } from './DashboardsDropdown';
+import { DashboardLinksDashboard } from './DashboardLinksDashboard';
 import { getLinkSrv } from '../../../panel/panellinks/link_srv';
 
 import { DashboardModel } from '../../state';
@@ -20,8 +20,8 @@ export const DashboardLinks: FC<Props> = ({ dashboard }) => {
           const linkInfo = getLinkSrv().getAnchorInfo(link);
           const key = `${link.title}-$${index}`;
 
-          if (link.asDropdown) {
-            return <DashboardsDropdown key={key} link={link} linkInfo={linkInfo} dashboardId={dashboard.id} />;
+          if (link.type === 'dashboards') {
+            return <DashboardLinksDashboard key={key} link={link} linkInfo={linkInfo} dashboardId={dashboard.id} />;
           }
 
           const linkElement = (
@@ -30,7 +30,7 @@ export const DashboardLinks: FC<Props> = ({ dashboard }) => {
               href={sanitizeUrl(linkInfo.href)}
               target={link.targetBlank ? '_blank' : '_self'}
             >
-              <Icon name={iconMap[link.icon] as IconName} />
+              <Icon name={iconMap[link.icon] as IconName} style={{ marginRight: '4px' }} />
               <span>{sanitize(linkInfo.title)}</span>
             </a>
           );

public/app/features/dashboard/components/SubMenu/DashboardsDropdown.tsx → public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.tsx

 import React, { PureComponent } from 'react';
-import { Icon } from '@grafana/ui';
+import { Icon, Tooltip } from '@grafana/ui';
 import { sanitize, sanitizeUrl } from '@grafana/data/src/text/sanitize';
 import { getBackendSrv } from 'app/core/services/backend_srv';
-import { DashboardSearchHit } from 'app/features/search/types';
 import { getLinkSrv } from '../../../panel/panellinks/link_srv';
 import { DashboardLink } from '../../state/DashboardModel';
+import { DashboardSearchHit } from 'app/features/search/types';
 
 interface Props {
   link: DashboardLink;
@@ -16,36 +16,83 @@ interface State {
   searchHits: DashboardSearchHit[];
 }
 
-export class DashboardsDropdown extends PureComponent<Props, State> {
+export class DashboardLinksDashboard extends PureComponent<Props, State> {
   state = { searchHits: [] as DashboardSearchHit[] };
-  onDropDownClick = async () => {
+  componentDidMount() {
+    if (!this.props.link.asDropdown) {
+      this.onDropDownClick();
+    }
+  }
+
+  onDropDownClick = () => {
     const { dashboardId, link } = this.props;
 
     const limit = 7;
-    const dashboards = await getBackendSrv().search({ tag: link.tags, limit });
-    const processed = dashboards
-      .filter(dash => dash.id !== dashboardId)
-      .map(dash => {
-        return {
-          ...dash,
-          url: getLinkSrv().getLinkUrl(dash),
-        };
+    getBackendSrv()
+      .search({ tag: link.tags, limit })
+      .then((dashboards: DashboardSearchHit[]) => {
+        const processed = dashboards
+          .filter(dash => dash.id !== dashboardId)
+          .map(dash => {
+            return {
+              ...dash,
+              url: getLinkSrv().getLinkUrl(dash),
+            };
+          });
+
+        this.setState({
+          searchHits: processed,
+        });
       });
+  };
+
+  renderElement = (linkElement: JSX.Element) => {
+    const { link } = this.props;
 
-    this.setState({
-      searchHits: processed,
-    });
+    if (link.tooltip) {
+      return (
+        <div className="gf-form">
+          <Tooltip content={link.tooltip}>{linkElement}</Tooltip>;
+        </div>
+      );
+    } else {
+      return <div className="gf-form">{linkElement}</div>;
+    }
   };
 
-  render() {
-    const { link, linkInfo } = this.props;
+  renderList = () => {
+    const { link } = this.props;
     const { searchHits } = this.state;
 
     return (
-      <div className="gf-form">
+      <>
+        {searchHits.length > 0 &&
+          searchHits.map((dashboard: any, index: number) => {
+            const linkElement = (
+              <a
+                key={`${dashboard.id}-${index}`}
+                className="gf-form-label"
+                href={sanitizeUrl(dashboard.url)}
+                target={link.targetBlank ? '_blank' : '_self'}
+              >
+                <Icon name="apps" style={{ marginRight: '4px' }} />
+                <span>{sanitize(dashboard.title)}</span>
+              </a>
+            );
+            return this.renderElement(linkElement);
+          })}
+      </>
+    );
+  };
+
+  renderDropdown = () => {
+    const { link, linkInfo } = this.props;
+    const { searchHits } = this.state;
+
+    const linkElement = (
+      <>
         <a
           className="gf-form-label pointer"
-          target={link.targetBlank ? '_blank' : '_self'}
           onClick={this.onDropDownClick}
           data-placement="bottom"
           data-toggle="dropdown"
@@ -54,18 +101,28 @@ export class DashboardsDropdown extends PureComponent<Props, State> {
           <span>{linkInfo.title}</span>
         </a>
         <ul className="dropdown-menu pull-right" role="menu">
-          {searchHits.length > 1 &&
+          {searchHits.length > 0 &&
             searchHits.map((dashboard: any, index: number) => {
               return (
                 <li key={`${dashboard.id}-${index}`}>
-                  <a href={sanitizeUrl(dashboard.url)} target={dashboard.target}>
+                  <a href={sanitizeUrl(dashboard.url)} target={link.targetBlank ? '_blank' : '_self'}>
                     {sanitize(dashboard.title)}
                   </a>
                 </li>
               );
             })}
         </ul>
-      </div>
+      </>
     );
+
+    return this.renderElement(linkElement);
+  };
+
+  render() {
+    if (this.props.link.asDropdown) {
+      return this.renderDropdown();
+    } else {
+      return this.renderList();
+    }
   }
 }