Events: Remove unused or unnecessary events (#28783)

* Events: Removing unused or unnessary events

* More cleanup

* Updated

packages/grafana-ui/src/components/Tabs/Tab.tsx

@@ -14,7 +14,7 @@ export interface TabProps extends HTMLProps<HTMLLIElement> {
   /** When provided, it is possible to use the tab as a hyperlink. Use in cases where the tabs update location. */
   href?: string;
   icon?: IconName;
-  onChangeTab: (event?: React.MouseEvent<HTMLLIElement>) => void;
+  onChangeTab?: (event?: React.MouseEvent<HTMLLIElement>) => void;
   /** A number rendered next to the text. Usually used to display the number of items in a tab's view. */
   counter?: number | null;
 }

public/app/app.ts

@@ -106,7 +106,6 @@ export class GrafanaApp {
 
     app.config(
       (
-        $locationProvider: angular.ILocationProvider,
         $controllerProvider: angular.IControllerProvider,
         $compileProvider: angular.ICompileProvider,
         $filterProvider: angular.IFilterProvider,

public/app/core/components/PageHeader/PageHeader.tsx

@@ -1,9 +1,8 @@
-import React, { FormEvent } from 'react';
+import React from 'react';
 import { css } from 'emotion';
 import { Tab, TabsBar, Icon, IconName } from '@grafana/ui';
-import appEvents from 'app/core/app_events';
 import { NavModel, NavModelItem, NavModelBreadcrumb } from '@grafana/data';
-import { CoreEvents } from 'app/types';
+import { PanelHeaderMenuItem } from 'app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem';
 
 export interface Props {
   model: NavModel;
@@ -18,37 +17,29 @@ const SelectNav = ({ children, customCss }: { children: NavModelItem[]; customCs
     return navItem.active === true;
   });
 
-  const gotoUrl = (evt: FormEvent) => {
-    const element = evt.target as HTMLSelectElement;
-    const url = element.options[element.selectedIndex].value;
-    appEvents.emit(CoreEvents.locationChange, { href: url });
-  };
-
   return (
     <div className={`gf-form-select-wrapper width-20 ${customCss}`}>
-      <label
-        className={`gf-form-select-icon ${defaultSelectedItem ? defaultSelectedItem?.icon : ''}`}
-        htmlFor="page-header-select-nav"
-      />
-      {/* Label to make it clickable */}
-      <select
-        className="gf-select-nav gf-form-input"
-        value={defaultSelectedItem?.url ?? ''}
-        onChange={gotoUrl}
-        id="page-header-select-nav"
-      >
-        {children.map((navItem: NavModelItem) => {
-          if (navItem.hideFromTabs) {
-            // TODO: Rename hideFromTabs => hideFromNav
-            return null;
-          }
-          return (
-            <option key={navItem.url} value={navItem.url}>
-              {navItem.text}
-            </option>
-          );
-        })}
-      </select>
+      <div className="dropdown">
+        <div className="gf-form-input dropdown-toggle" data-toggle="dropdown">
+          {defaultSelectedItem?.text}
+        </div>
+        <ul className="dropdown-menu dropdown-menu--menu">
+          {children.map((navItem: NavModelItem) => {
+            if (navItem.hideFromTabs) {
+              // TODO: Rename hideFromTabs => hideFromNav
+              return null;
+            }
+            return (
+              <PanelHeaderMenuItem
+                key={navItem.url}
+                iconClassName={navItem.icon}
+                text={navItem.text}
+                href={navItem.url}
+              />
+            );
+          })}
+        </ul>
+      </div>
     </div>
   );
 };
@@ -58,14 +49,6 @@ const Navigation = ({ children }: { children: NavModelItem[] }) => {
     return null;
   }
 
-  const goToUrl = (index: number) => {
-    children.forEach((child, i) => {
-      if (i === index) {
-        appEvents.emit(CoreEvents.locationChange, { href: child.url });
-      }
-    });
-  };
-
   return (
     <nav>
       <SelectNav customCss="page-header__select-nav" children={children} />
@@ -78,7 +61,6 @@ const Navigation = ({ children }: { children: NavModelItem[] }) => {
                 active={child.active}
                 key={`${child.url}-${index}`}
                 icon={child.icon as IconName}
-                onChangeTab={() => goToUrl(index)}
                 href={child.url}
               />
             )

public/app/core/directives/diff-view.ts

@@ -1,18 +1,13 @@
 import angular from 'angular';
 import coreModule from '../core_module';
 import { GrafanaRootScope } from 'app/routes/GrafanaCtrl';
-import { CoreEvents } from 'app/types';
 
 export class DeltaCtrl {
   observer: any;
 
   /** @ngInject */
-  constructor(private $rootScope: GrafanaRootScope) {
-    const waitForCompile = (mutations: any) => {
-      if (mutations.length === 1) {
-        this.$rootScope.appEvent(CoreEvents.jsonDiffReady);
-      }
-    };
+  constructor() {
+    const waitForCompile = () => {};
 
     this.observer = new MutationObserver(waitForCompile);
 

public/app/core/services/bridge_srv.ts

@@ -1,18 +1,15 @@
 import coreModule from 'app/core/core_module';
-import appEvents from 'app/core/app_events';
 import { dispatch, store } from 'app/store/store';
 import { updateLocation } from 'app/core/actions';
-import { ILocationService, ITimeoutService, IWindowService } from 'angular';
-import { CoreEvents } from 'app/types';
+import { ILocationService, ITimeoutService } from 'angular';
 import { GrafanaRootScope } from 'app/routes/GrafanaCtrl';
-import { locationUtil, UrlQueryMap } from '@grafana/data';
+import { UrlQueryMap } from '@grafana/data';
 import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
 import { templateVarsChangedInUrl } from 'app/features/variables/state/actions';
 import { isArray, isEqual } from 'lodash';
 
 // Services that handles angular -> redux store sync & other react <-> angular sync
 export class BridgeSrv {
-  private fullPageReloadRoutes: string[];
   private lastQuery: UrlQueryMap = {};
   private lastPath = '';
   private angularUrl: string;
@@ -22,11 +19,9 @@ export class BridgeSrv {
   constructor(
     private $location: ILocationService,
     private $timeout: ITimeoutService,
-    private $window: IWindowService,
     private $rootScope: GrafanaRootScope,
     private $route: any
   ) {
-    this.fullPageReloadRoutes = ['/logout'];
     this.angularUrl = $location.url();
   }
 
@@ -101,19 +96,6 @@ export class BridgeSrv {
       this.lastQuery = state.location.query;
       this.lastUrl = state.location.url;
     });
-
-    appEvents.on(CoreEvents.locationChange, payload => {
-      const urlWithoutBase = locationUtil.stripBaseFromUrl(payload.href);
-      if (this.fullPageReloadRoutes.indexOf(urlWithoutBase) > -1) {
-        this.$window.location.href = payload.href;
-        return;
-      }
-
-      this.$timeout(() => {
-        // A hack to use timeout when we're changing things (in this case the url) from outside of Angular.
-        this.$location.url(urlWithoutBase);
-      });
-    });
   }
 }
 

public/app/core/services/keybindingSrv.ts

@@ -19,7 +19,6 @@ import { ContextSrv } from './context_srv';
 export class KeybindingSrv {
   helpModal: boolean;
   modalOpen = false;
-  timepickerOpen = false;
 
   /** @ngInject */
   constructor(
@@ -39,8 +38,6 @@ export class KeybindingSrv {
 
     this.setupGlobal();
     appEvents.on(CoreEvents.showModal, () => (this.modalOpen = true));
-    appEvents.on(CoreEvents.timepickerOpen, () => (this.timepickerOpen = true));
-    appEvents.on(CoreEvents.timepickerClosed, () => (this.timepickerOpen = false));
   }
 
   setupGlobal() {
@@ -116,12 +113,6 @@ export class KeybindingSrv {
       return;
     }
 
-    if (this.timepickerOpen) {
-      this.$rootScope.appEvent(CoreEvents.closeTimepicker);
-      this.timepickerOpen = false;
-      return;
-    }
-
     // close settings view
     const search = this.$location.search();
     if (search.editview) {

public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem.tsx

@@ -5,7 +5,7 @@ import { Icon, IconName, useTheme } from '@grafana/ui';
 import { selectors } from '@grafana/e2e-selectors';
 
 interface Props {
-  children: any;
+  children?: any;
 }
 
 export const PanelHeaderMenuItem: FC<Props & PanelMenuItem> = props => {

public/app/features/plugins/AppRootPage.test.tsx

@@ -106,8 +106,8 @@ describe('AppRootPage', () => {
 
     // check that plugin and nav links were rendered, and plugin is mounted only once
     await screen.findByText('my great plugin');
-    await screen.findByRole('link', { name: /A page/ });
-    await screen.findByRole('link', { name: /Another page/ });
+    await screen.findAllByRole('link', { name: /A page/ });
+    await screen.findAllByRole('link', { name: /Another page/ });
     expect(timesMounted).toEqual(1);
   });
 });

public/app/plugins/panel/text/TextPanel.tsx

@@ -9,7 +9,6 @@ import { TextOptions } from './types';
 import { CustomScrollbar, stylesFactory } from '@grafana/ui';
 import { css, cx } from 'emotion';
 import DangerouslySetHtmlContent from 'dangerously-set-html-content';
-import { Unsubscribable } from 'rxjs';
 
 interface Props extends PanelProps<TextOptions> {}
 
@@ -18,8 +17,6 @@ interface State {
 }
 
 export class TextPanel extends PureComponent<Props, State> {
-  eventSub?: Unsubscribable;
-
   constructor(props: Props) {
     super(props);
 

public/app/routes/dashboard_loaders.ts

@@ -2,7 +2,7 @@ import coreModule from 'app/core/core_module';
 import { locationUtil, UrlQueryMap } from '@grafana/data';
 import { DashboardLoaderSrv } from 'app/features/dashboard/services/DashboardLoaderSrv';
 import { ILocationService } from 'angular';
-import { AppEventEmitter, CoreEvents, Scope } from 'app/types';
+import { AppEventEmitter, Scope } from 'app/types';
 import { backendSrv } from 'app/core/services/backend_srv';
 
 export class LoadDashboardCtrl {
@@ -11,11 +11,8 @@ export class LoadDashboardCtrl {
     $scope: Scope & AppEventEmitter,
     $routeParams: UrlQueryMap,
     dashboardLoaderSrv: DashboardLoaderSrv,
-    $location: ILocationService,
-    $browser: any
+    $location: ILocationService
   ) {
-    $scope.appEvent(CoreEvents.dashboardFetchStart);
-
     if (!$routeParams.uid && !$routeParams.slug) {
       backendSrv.get('/api/dashboards/home').then((homeDash: { redirectUri: string; meta: any }) => {
         if (homeDash.redirectUri) {

public/app/types/events.ts

@@ -56,19 +56,6 @@ export interface DataSourceResponse<T> {
 
 type DataSourceResponsePayload = DataSourceResponse<any>;
 
-export interface SaveDashboardPayload {
-  overwrite?: boolean;
-  folderId?: number;
-  makeEditable?: boolean;
-}
-
-export interface GraphHoverPayload {
-  pos: any;
-  panel: {
-    id: number;
-  };
-}
-
 export interface ToggleKioskModePayload {
   exit?: boolean;
 }
@@ -96,20 +83,11 @@ export interface PanelChangeViewPayload {}
  * Events
  */
 
-export const panelChangeView = eventFactory<PanelChangeViewPayload>('panel-change-view');
 export const dashLinksUpdated = eventFactory('dash-links-updated');
-export const saveDashboard = eventFactory<SaveDashboardPayload>('save-dashboard');
-export const dashboardFetchStart = eventFactory('dashboard-fetch-start');
 export const dashboardSaved = eventFactory<DashboardModel>('dashboard-saved');
 export const removePanel = eventFactory<number>('remove-panel');
-
 export const searchQuery = eventFactory('search-query');
 
-export const locationChange = eventFactory<LocationChangePayload>('location-change');
-
-export const timepickerOpen = eventFactory('timepickerOpen');
-export const timepickerClosed = eventFactory('timepickerClosed');
-
 export const showModal = eventFactory<ShowModalPayload>('show-modal');
 export const showConfirmModal = eventFactory<ShowConfirmModalPayload>('confirm-modal');
 export const hideModal = eventFactory('hide-modal');
@@ -145,12 +123,6 @@ export const shiftTime = eventFactory<number>('shift-time');
 
 export const elasticQueryUpdated = eventFactory('elastic-query-updated');
 
-export const layoutModeChanged = eventFactory<string>('layout-mode-changed');
-
-export const jsonDiffReady = eventFactory('json-diff-ready');
-
-export const closeTimepicker = eventFactory('closeTimepicker');
-
 export const routeUpdated = eventFactory('$routeUpdate');
 
 export const queryChanged = eventFactory('queryChanged');

public/sass/components/_gf-form.scss

@@ -319,6 +319,7 @@ $input-border: 1px solid $input-border-color;
 
   .gf-form-input {
     margin-right: 0;
+    line-height: $input-height;
   }
 
   select.gf-form-input {