Fix: Shows SubMenu when filtering directly from table (#21017)

* Fix: Shows SubMenu when filtering from table
Fixes #20270

* Tests: Updates snapshots

* Refactor: Changes after PR comments

* Refactor: Changes template

public/app/features/dashboard/components/SubMenu/SubMenuCtrl.ts

@@ -1,16 +1,22 @@
 import angular, { ILocationService } from 'angular';
 import _ from 'lodash';
 import { VariableSrv } from 'app/features/templating/all';
+import { CoreEvents } from '../../../../types';
 
 export class SubMenuCtrl {
   annotations: any;
   variables: any;
   dashboard: any;
+  submenuEnabled: boolean;
 
   /** @ngInject */
   constructor(private variableSrv: VariableSrv, private $location: ILocationService) {
     this.annotations = this.dashboard.templating.list;
     this.variables = this.variableSrv.variables;
+    this.submenuEnabled = false;
+    this.dashboard.events.on(CoreEvents.submenuVisibilityChanged, (enabled: boolean) => {
+      this.submenuEnabled = enabled;
+    });
   }
 
   annotationStateChanged() {

public/app/features/dashboard/components/SubMenu/template.html

@@ -1,4 +1,4 @@
-<div class="submenu-controls">
+<div class="submenu-controls" ng-hide="ctrl.submenuEnabled === false">
   <div ng-repeat="variable in ctrl.variables" ng-hide="variable.hide === 2" class="submenu-item gf-form-inline">
     <div class="gf-form">
       <label

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

@@ -1,37 +1,33 @@
 // Libraries
 import $ from 'jquery';
-import React, { PureComponent, MouseEvent } from 'react';
+import React, { MouseEvent, PureComponent } from 'react';
 import { hot } from 'react-hot-loader';
 import { connect } from 'react-redux';
 import classNames from 'classnames';
-
 // Services & Utils
 import { createErrorNotification } from 'app/core/copy/appNotification';
 import { getMessageFromError } from 'app/core/utils/errors';
-
 // Components
 import { DashboardGrid } from '../dashgrid/DashboardGrid';
 import { DashNav } from '../components/DashNav';
 import { SubMenu } from '../components/SubMenu';
 import { DashboardSettings } from '../components/DashboardSettings';
-import { CustomScrollbar, Alert } from '@grafana/ui';
+import { Alert, CustomScrollbar } from '@grafana/ui';
-
 // Redux
 import { initDashboard } from '../state/initDashboard';
 import { cleanUpDashboard } from '../state/actions';
-import { updateLocation } from 'app/core/actions';
+import { notifyApp, updateLocation } from 'app/core/actions';
-import { notifyApp } from 'app/core/actions';
-
 // Types
 import {
-  StoreState,
+  AppNotificationSeverity,
+  DashboardInitError,
   DashboardInitPhase,
   DashboardRouteInfo,
-  DashboardInitError,
+  StoreState,
-  AppNotificationSeverity,
 } from 'app/types';
 import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
 import { PanelInspector } from '../components/Inspector/PanelInspector';
+
 export interface Props {
   urlUid?: string;
   urlSlug?: string;
@@ -301,7 +297,7 @@ export class DashboardPage extends PureComponent<Props, State> {
             {initError && this.renderInitFailedState()}
 
             <div className={gridWrapperClasses}>
-              {dashboard.meta.submenuEnabled && <SubMenu dashboard={dashboard} />}
+              <SubMenu dashboard={dashboard} />
               <DashboardGrid
                 dashboard={dashboard}
                 isEditing={isEditing}

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

@@ -118,6 +118,98 @@ exports[`DashboardPage Dashboard init completed  Should render dashboard grid 1`
       <div
         className="dashboard-container"
       >
+        <SubMenu
+          dashboard={
+            DashboardModel {
+              "annotations": Object {
+                "list": Array [
+                  Object {
+                    "builtIn": 1,
+                    "datasource": "-- Grafana --",
+                    "enable": true,
+                    "hide": true,
+                    "iconColor": "rgba(0, 211, 255, 1)",
+                    "name": "Annotations & Alerts",
+                    "type": "dashboard",
+                  },
+                ],
+              },
+              "autoUpdate": undefined,
+              "description": undefined,
+              "editable": true,
+              "events": Emitter {
+                "emitter": EventEmitter {
+                  "_events": Object {},
+                  "_eventsCount": 0,
+                },
+              },
+              "gnetId": null,
+              "graphTooltip": 0,
+              "id": null,
+              "links": Array [],
+              "meta": Object {
+                "canEdit": true,
+                "canMakeEditable": false,
+                "canSave": true,
+                "canShare": true,
+                "canStar": true,
+                "fullscreen": false,
+                "isEditing": false,
+                "showSettings": true,
+              },
+              "originalTemplating": Array [],
+              "originalTime": Object {
+                "from": "now-6h",
+                "to": "now",
+              },
+              "panels": Array [
+                PanelModel {
+                  "cachedPluginOptions": Object {},
+                  "datasource": null,
+                  "events": Emitter {
+                    "emitter": EventEmitter {
+                      "_events": Object {},
+                      "_eventsCount": 0,
+                    },
+                  },
+                  "gridPos": Object {
+                    "h": 1,
+                    "w": 1,
+                    "x": 0,
+                    "y": 0,
+                  },
+                  "id": 1,
+                  "targets": Array [
+                    Object {
+                      "refId": "A",
+                    },
+                  ],
+                  "title": "My graph",
+                  "transparent": false,
+                  "type": "graph",
+                },
+              ],
+              "refresh": undefined,
+              "revision": undefined,
+              "schemaVersion": 21,
+              "snapshot": undefined,
+              "style": "dark",
+              "tags": Array [],
+              "templating": Object {
+                "list": Array [],
+              },
+              "time": Object {
+                "from": "now-6h",
+                "to": "now",
+              },
+              "timepicker": Object {},
+              "timezone": "",
+              "title": "My dashboard",
+              "uid": null,
+              "version": 0,
+            }
+          }
+        />
         <DashboardGrid
           dashboard={
             DashboardModel {
@@ -448,6 +540,98 @@ exports[`DashboardPage When dashboard has editview url state should render setti
       <div
         className="dashboard-container"
       >
+        <SubMenu
+          dashboard={
+            DashboardModel {
+              "annotations": Object {
+                "list": Array [
+                  Object {
+                    "builtIn": 1,
+                    "datasource": "-- Grafana --",
+                    "enable": true,
+                    "hide": true,
+                    "iconColor": "rgba(0, 211, 255, 1)",
+                    "name": "Annotations & Alerts",
+                    "type": "dashboard",
+                  },
+                ],
+              },
+              "autoUpdate": undefined,
+              "description": undefined,
+              "editable": true,
+              "events": Emitter {
+                "emitter": EventEmitter {
+                  "_events": Object {},
+                  "_eventsCount": 0,
+                },
+              },
+              "gnetId": null,
+              "graphTooltip": 0,
+              "id": null,
+              "links": Array [],
+              "meta": Object {
+                "canEdit": true,
+                "canMakeEditable": false,
+                "canSave": true,
+                "canShare": true,
+                "canStar": true,
+                "fullscreen": false,
+                "isEditing": false,
+                "showSettings": true,
+              },
+              "originalTemplating": Array [],
+              "originalTime": Object {
+                "from": "now-6h",
+                "to": "now",
+              },
+              "panels": Array [
+                PanelModel {
+                  "cachedPluginOptions": Object {},
+                  "datasource": null,
+                  "events": Emitter {
+                    "emitter": EventEmitter {
+                      "_events": Object {},
+                      "_eventsCount": 0,
+                    },
+                  },
+                  "gridPos": Object {
+                    "h": 1,
+                    "w": 1,
+                    "x": 0,
+                    "y": 0,
+                  },
+                  "id": 1,
+                  "targets": Array [
+                    Object {
+                      "refId": "A",
+                    },
+                  ],
+                  "title": "My graph",
+                  "transparent": false,
+                  "type": "graph",
+                },
+              ],
+              "refresh": undefined,
+              "revision": undefined,
+              "schemaVersion": 21,
+              "snapshot": undefined,
+              "style": "dark",
+              "tags": Array [],
+              "templating": Object {
+                "list": Array [],
+              },
+              "time": Object {
+                "from": "now-6h",
+                "to": "now",
+              },
+              "timepicker": Object {},
+              "timezone": "",
+              "title": "My dashboard",
+              "uid": null,
+              "version": 0,
+            }
+          }
+        />
         <DashboardGrid
           dashboard={
             DashboardModel {

public/app/features/dashboard/state/DashboardModel.ts

@@ -1,23 +1,18 @@
 // Libaries
 import _ from 'lodash';
-
 // Constants
 import { DEFAULT_ANNOTATION_COLOR } from '@grafana/ui';
-import { GRID_COLUMN_COUNT, REPEAT_DIR_VERTICAL, GRID_CELL_HEIGHT, GRID_CELL_VMARGIN } from 'app/core/constants';
+import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN, GRID_COLUMN_COUNT, REPEAT_DIR_VERTICAL } from 'app/core/constants';
-
 // Utils & Services
 import { Emitter } from 'app/core/utils/emitter';
 import { contextSrv } from 'app/core/services/context_srv';
 import sortByKeys from 'app/core/utils/sort_by_keys';
-
 // Types
-import { PanelModel, GridPos, panelAdded, panelRemoved } from './PanelModel';
+import { GridPos, panelAdded, PanelModel, panelRemoved } from './PanelModel';
 import { DashboardMigrator } from './DashboardMigrator';
-import { TimeRange, TimeZone, AppEvent } from '@grafana/data';
+import { AppEvent, dateTime, DateTimeInput, isDateTime, PanelEvents, TimeRange, TimeZone, toUtc } from '@grafana/data';
 import { UrlQueryValue } from '@grafana/runtime';
-import { PanelEvents } from '@grafana/data';
+import { CoreEvents, DashboardMeta, KIOSK_MODE_TV } from 'app/types';
-import { KIOSK_MODE_TV, DashboardMeta, CoreEvents } from 'app/types';
-import { toUtc, DateTimeInput, dateTime, isDateTime } from '@grafana/data';
 
 export interface CloneOptions {
   saveVariables?: boolean;
@@ -660,6 +655,7 @@ export class DashboardModel {
 
       return false;
     })();
+    this.events.emit(CoreEvents.submenuVisibilityChanged, this.meta.submenuEnabled);
   }
 
   getPanelInfoById(panelId: number) {

public/app/types/events.ts

@@ -1,7 +1,6 @@
-import { DataFrame, TimeRange } from '@grafana/data';
+import { DataFrame, eventFactory, TimeRange } from '@grafana/data';
 import { IHttpResponse } from 'angular';
 import { DashboardModel } from 'app/features/dashboard/state';
-import { eventFactory } from '@grafana/data';
 
 /**
  * Event Payloads
@@ -121,6 +120,7 @@ export const repeatsProcessed = eventFactory('repeats-processed');
 export const rowExpanded = eventFactory('row-expanded');
 export const rowCollapsed = eventFactory('row-collapsed');
 export const templateVariableValueUpdated = eventFactory('template-variable-value-updated');
+export const submenuVisibilityChanged = eventFactory<boolean>('submenu-visibility-changed');
 
 export const dataFramesReceived = eventFactory<DataFrame[]>('data-frames-received');