DashboardLinks: do not over-query search endpoint (#26311)

* DashboardLinks: WIP fix for dashboard links issue

* Make the dashboard links update on change(hacky)

* Replace dashboard links with new array when updating/adding dash links

* Update snaps

* Deep clone dashboard links on save

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

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

@@ -10,16 +10,17 @@ import { iconMap } from '../DashLinks/DashLinksEditorCtrl';
 
 export interface Props {
   dashboard: DashboardModel;
+  links: DashboardLink[];
 }
 
-export const DashboardLinks: FC<Props> = ({ dashboard }) => {
-  if (!dashboard.links.length) {
+export const DashboardLinks: FC<Props> = ({ dashboard, links }) => {
+  if (!links.length) {
     return null;
   }
 
   return (
     <>
-      {dashboard.links.map((link: DashboardLink, index: number) => {
+      {links.map((link: DashboardLink, index: number) => {
         const linkInfo = getLinkSrv().getAnchorInfo(link);
         const key = `${link.title}-$${index}`;
 

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

@@ -19,13 +19,17 @@ interface State {
 export class DashboardLinksDashboard extends PureComponent<Props, State> {
   state: State = { resolvedLinks: [] };
 
+  componentDidMount() {
+    this.searchForDashboards();
+  }
+
   componentDidUpdate(prevProps: Readonly<Props>) {
-    if (!this.props.link.asDropdown && prevProps.linkInfo !== this.props.linkInfo) {
-      this.onResolveLinks();
+    if (this.props.link !== prevProps.link) {
+      this.searchForDashboards();
     }
   }
 
-  onResolveLinks = async () => {
+  searchForDashboards = async () => {
     const { dashboardId, link } = this.props;
 
     const searchHits = await searchForTags(link);
@@ -73,7 +77,7 @@ export class DashboardLinksDashboard extends PureComponent<Props, State> {
       <>
         <a
           className="gf-form-label pointer"
-          onClick={this.onResolveLinks}
+          onClick={this.searchForDashboards}
           data-placement="bottom"
           data-toggle="dropdown"
         >

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

@@ -7,9 +7,11 @@ import { DashboardModel } from '../../state';
 import { DashboardLinks } from './DashboardLinks';
 import { Annotations } from './Annotations';
 import { SubMenuItems } from './SubMenuItems';
+import { DashboardLink } from '../../state/DashboardModel';
 
 interface OwnProps {
   dashboard: DashboardModel;
+  links: DashboardLink[];
 }
 
 interface ConnectedProps {
@@ -49,7 +51,8 @@ class SubMenuUnConnected extends PureComponent<Props> {
   };
 
   render() {
-    const { dashboard, variables } = this.props;
+    const { dashboard, variables, links } = this.props;
+
     if (!this.isSubMenuVisible()) {
       return null;
     }
@@ -59,16 +62,18 @@ class SubMenuUnConnected extends PureComponent<Props> {
         <SubMenuItems variables={variables} />
         <Annotations annotations={dashboard.annotations.list} onAnnotationChanged={this.onAnnotationStateChanged} />
         <div className="gf-form gf-form--grow" />
-        {dashboard && <DashboardLinks dashboard={dashboard} />}
+        {dashboard && <DashboardLinks dashboard={dashboard} links={links} />}
         <div className="clearfix" />
       </div>
     );
   }
 }
 
-const mapStateToProps: MapStateToProps<ConnectedProps, OwnProps, StoreState> = state => ({
-  variables: getSubMenuVariables(state),
-});
+const mapStateToProps: MapStateToProps<ConnectedProps, OwnProps, StoreState> = state => {
+  return {
+    variables: getSubMenuVariables(state.templating.variables),
+  };
+};
 
 export const SubMenu = connect(mapStateToProps)(SubMenuUnConnected);
 SubMenu.displayName = 'SubMenu';