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/DashLinks/DashLinksEditorCtrl.ts

@@ -54,7 +54,7 @@ export class DashLinksEditorCtrl {
   };
 
   addLink() {
-    this.dashboard.links.push(this.link);
+    this.dashboard.links = [...this.dashboard.links, this.link];
     this.mode = 'list';
     this.dashboard.updateSubmenuVisibility();
   }
@@ -65,6 +65,7 @@ export class DashLinksEditorCtrl {
   }
 
   saveLink() {
+    this.dashboard.links = _.cloneDeep(this.dashboard.links);
     this.backToList();
   }
 

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 }) => {
+export const DashboardLinks: FC<Props> = ({ dashboard, links }) => {
-  if (!dashboard.links.length) {
+  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) {
+    if (this.props.link !== prevProps.link) {
-      this.onResolveLinks();
+      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 => ({
+const mapStateToProps: MapStateToProps<ConnectedProps, OwnProps, StoreState> = state => {
-  variables: getSubMenuVariables(state),
+  return {
-});
+    variables: getSubMenuVariables(state.templating.variables),
+  };
+};
 
 export const SubMenu = connect(mapStateToProps)(SubMenuUnConnected);
 SubMenu.displayName = 'SubMenu';

public/app/features/dashboard/containers/DashboardPage.tsx

@@ -309,7 +309,7 @@ export class DashboardPage extends PureComponent<Props, State> {
           >
             <div className="dashboard-content">
               {initError && this.renderInitFailedState()}
-              {!editPanel && <SubMenu dashboard={dashboard} />}
+              {!editPanel && <SubMenu dashboard={dashboard} links={dashboard.links} />}
 
               <DashboardGrid
                 dashboard={dashboard}

public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap

@@ -211,6 +211,7 @@ exports[`DashboardPage Dashboard init completed  Should render dashboard grid 1`
               "version": 0,
             }
           }
+          links={Array []}
         />
         <DashboardGrid
           dashboard={
@@ -569,6 +570,7 @@ exports[`DashboardPage When dashboard has editview url state should render setti
               "version": 0,
             }
           }
+          links={Array []}
         />
         <DashboardGrid
           dashboard={

public/app/features/variables/state/selectors.ts

@@ -2,6 +2,7 @@ import { StoreState } from '../../../types';
 import { VariableModel } from '../types';
 import { getState } from '../../../store/store';
 import { NEW_VARIABLE_ID } from './types';
+import memoizeOne from 'memoize-one';
 
 export const getVariable = <T extends VariableModel = VariableModel>(
   id: string,
@@ -42,9 +43,9 @@ export const getVariables = (state: StoreState = getState(), includeNewVariable
   return getFilteredVariables(filter, state);
 };
 
-export const getSubMenuVariables = (state: StoreState): VariableModel[] => {
+export const getSubMenuVariables = memoizeOne((variables: Record<string, VariableModel>): VariableModel[] => {
-  return getVariables(state);
+  return getVariables(getState());
-};
+});
 
 export const getEditorVariables = (state: StoreState): VariableModel[] => {
   return getVariables(state, true);