From 26bd76b4c2c27df542fd9f64a5ffa49cda592cb8 Mon Sep 17 00:00:00 2001
From: Ryan McKinley <ryantxu@gmail.com>
Date: Tue, 30 Apr 2019 07:46:46 -0700
Subject: [PATCH] Refactor: move NavModel to @grafana/ui (#16813)

---
 packages/grafana-ui/src/types/index.ts        |  1 +
 .../grafana-ui/src}/types/navModel.ts         | 12 ++++++--
 public/app/core/actions/navModel.ts           |  2 +-
 public/app/core/components/Page/Page.tsx      |  3 +-
 .../core/components/PageHeader/PageHeader.tsx | 19 ++++---------
 public/app/core/components/navbar/navbar.ts   |  2 +-
 public/app/core/core.ts                       |  3 +-
 public/app/core/nav_model_srv.ts              | 28 +++----------------
 public/app/core/reducers/navModel.ts          |  2 +-
 public/app/core/selectors/navModel.ts         |  2 +-
 public/app/features/admin/ServerStats.tsx     |  3 +-
 .../features/alerting/AlertRuleList.test.tsx  |  3 +-
 .../app/features/alerting/AlertRuleList.tsx   |  3 +-
 .../features/api-keys/ApiKeysPage.test.tsx    |  3 +-
 public/app/features/api-keys/ApiKeysPage.tsx  |  4 +--
 .../datasources/DataSourceDashboards.test.tsx |  4 +--
 .../datasources/DataSourceDashboards.tsx      |  4 +--
 .../datasources/DataSourcesListPage.test.tsx  |  3 +-
 .../datasources/DataSourcesListPage.tsx       |  4 +--
 .../datasources/NewDataSourcePage.tsx         |  4 +--
 .../settings/DataSourceSettingsPage.test.tsx  |  3 +-
 .../settings/DataSourceSettingsPage.tsx       |  4 +--
 .../features/datasources/state/navModel.ts    |  3 +-
 .../features/folders/FolderPermissions.tsx    |  4 +--
 .../folders/FolderSettingsPage.test.tsx       |  2 +-
 .../features/folders/FolderSettingsPage.tsx   |  4 +--
 public/app/features/folders/state/navModel.ts |  3 +-
 .../app/features/org/OrgDetailsPage.test.tsx  |  3 +-
 public/app/features/org/OrgDetailsPage.tsx    |  3 +-
 .../features/plugins/PluginListPage.test.tsx  |  3 +-
 .../app/features/plugins/PluginListPage.tsx   |  3 +-
 public/app/features/plugins/state/navModel.ts |  3 +-
 public/app/features/teams/TeamList.test.tsx   |  3 +-
 public/app/features/teams/TeamList.tsx        |  4 +--
 public/app/features/teams/TeamPages.test.tsx  |  3 +-
 public/app/features/teams/TeamPages.tsx       |  3 +-
 public/app/features/teams/state/navModel.ts   |  3 +-
 .../app/features/users/UsersListPage.test.tsx |  3 +-
 public/app/features/users/UsersListPage.tsx   |  3 +-
 public/app/types/index.ts                     |  1 -
 public/app/types/store.ts                     |  2 +-
 public/test/mocks/common.ts                   |  2 +-
 42 files changed, 80 insertions(+), 94 deletions(-)
 rename {public/app => packages/grafana-ui/src}/types/navModel.ts (68%)

diff --git a/packages/grafana-ui/src/types/index.ts b/packages/grafana-ui/src/types/index.ts
index bf3b5e2995f..2980686cd3b 100644
--- a/packages/grafana-ui/src/types/index.ts
+++ b/packages/grafana-ui/src/types/index.ts
@@ -6,6 +6,7 @@ export * from './datasource';
 export * from './theme';
 export * from './graph';
 export * from './threshold';
+export * from './navModel';
 export * from './input';
 export * from './logs';
 export * from './displayValue';
diff --git a/public/app/types/navModel.ts b/packages/grafana-ui/src/types/navModel.ts
similarity index 68%
rename from public/app/types/navModel.ts
rename to packages/grafana-ui/src/types/navModel.ts
index aae4a030cb4..2f1018eed9c 100644
--- a/public/app/types/navModel.ts
+++ b/packages/grafana-ui/src/types/navModel.ts
@@ -1,15 +1,15 @@
 export interface NavModelItem {
   text: string;
-  url: string;
+  url?: string;
   subTitle?: string;
   icon?: string;
   img?: string;
-  id: string;
+  id?: string;
   active?: boolean;
   hideFromTabs?: boolean;
   divider?: boolean;
   children?: NavModelItem[];
-  breadcrumbs?: Array<{ title: string; url: string }>;
+  breadcrumbs?: NavModelBreadcrumb[];
   target?: string;
   parentItem?: NavModelItem;
 }
@@ -17,6 +17,12 @@ export interface NavModelItem {
 export interface NavModel {
   main: NavModelItem;
   node: NavModelItem;
+  breadcrumbs?: NavModelItem[];
+}
+
+export interface NavModelBreadcrumb {
+  title: string;
+  url?: string;
 }
 
 export type NavIndex = { [s: string]: NavModelItem };
diff --git a/public/app/core/actions/navModel.ts b/public/app/core/actions/navModel.ts
index a40a0e880ee..1f4755e16ed 100644
--- a/public/app/core/actions/navModel.ts
+++ b/public/app/core/actions/navModel.ts
@@ -1,4 +1,4 @@
-import { NavModelItem } from '../../types';
+import { NavModelItem } from '@grafana/ui';
 
 export enum ActionTypes {
   UpdateNavIndex = 'UPDATE_NAV_INDEX',
diff --git a/public/app/core/components/Page/Page.tsx b/public/app/core/components/Page/Page.tsx
index 1803317a8da..04986011fd4 100644
--- a/public/app/core/components/Page/Page.tsx
+++ b/public/app/core/components/Page/Page.tsx
@@ -1,14 +1,13 @@
 // Libraries
 import React, { Component } from 'react';
 import config from 'app/core/config';
-import { NavModel } from 'app/types';
 import { getTitleFromNavModel } from 'app/core/selectors/navModel';
 
 // Components
 import PageHeader from '../PageHeader/PageHeader';
 import Footer from '../Footer/Footer';
 import PageContents from './PageContents';
-import { CustomScrollbar } from '@grafana/ui';
+import { CustomScrollbar, NavModel } from '@grafana/ui';
 import { isEqual } from 'lodash';
 
 interface Props {
diff --git a/public/app/core/components/PageHeader/PageHeader.tsx b/public/app/core/components/PageHeader/PageHeader.tsx
index 623070651d1..d0cbf0f8c13 100644
--- a/public/app/core/components/PageHeader/PageHeader.tsx
+++ b/public/app/core/components/PageHeader/PageHeader.tsx
@@ -1,7 +1,7 @@
 import React, { FormEvent } from 'react';
-import { NavModel, NavModelItem } from 'app/types';
 import classNames from 'classnames';
 import appEvents from 'app/core/app_events';
+import { NavModel, NavModelItem, NavModelBreadcrumb } from '@grafana/ui';
 
 export interface Props {
   model: NavModel;
@@ -89,7 +89,7 @@ export default class PageHeader extends React.Component<Props, any> {
     return true;
   }
 
-  renderTitle(title: string, breadcrumbs: any[]) {
+  renderTitle(title: string, breadcrumbs: NavModelBreadcrumb[]) {
     if (!title && (!breadcrumbs || breadcrumbs.length === 0)) {
       return null;
     }
@@ -99,16 +99,15 @@ export default class PageHeader extends React.Component<Props, any> {
     }
 
     const breadcrumbsResult = [];
-    for (let i = 0; i < breadcrumbs.length; i++) {
-      const bc = breadcrumbs[i];
+    for (const bc of breadcrumbs) {
       if (bc.url) {
         breadcrumbsResult.push(
-          <a className="text-link" key={i} href={bc.url}>
+          <a className="text-link" key={breadcrumbsResult.length} href={bc.url}>
             {bc.title}
           </a>
         );
       } else {
-        breadcrumbsResult.push(<span key={i}> / {bc.title}</span>);
+        breadcrumbsResult.push(<span key={breadcrumbsResult.length}> / {bc.title}</span>);
       }
     }
     breadcrumbsResult.push(<span key={breadcrumbs.length + 1}> / {title}</span>);
@@ -116,7 +115,7 @@ export default class PageHeader extends React.Component<Props, any> {
     return <h1 className="page-header__title">{breadcrumbsResult}</h1>;
   }
 
-  renderHeaderTitle(main) {
+  renderHeaderTitle(main: NavModelItem) {
     return (
       <div className="page-header__inner">
         <span className="page-header__logo">
@@ -127,12 +126,6 @@ export default class PageHeader extends React.Component<Props, any> {
         <div className="page-header__info-block">
           {this.renderTitle(main.text, main.breadcrumbs)}
           {main.subTitle && <div className="page-header__sub-title">{main.subTitle}</div>}
-          {main.subType && (
-            <div className="page-header__stamps">
-              <i className={main.subType.icon} />
-              {main.subType.text}
-            </div>
-          )}
         </div>
       </div>
     );
diff --git a/public/app/core/components/navbar/navbar.ts b/public/app/core/components/navbar/navbar.ts
index db0924738ed..f4de8745172 100644
--- a/public/app/core/components/navbar/navbar.ts
+++ b/public/app/core/components/navbar/navbar.ts
@@ -1,6 +1,6 @@
 import coreModule from '../../core_module';
-import { NavModel } from '../../nav_model_srv';
 import appEvents from 'app/core/app_events';
+import { NavModel } from '@grafana/ui';
 
 export class NavbarCtrl {
   model: NavModel;
diff --git a/public/app/core/core.ts b/public/app/core/core.ts
index 80987b8fc88..c7f03781710 100644
--- a/public/app/core/core.ts
+++ b/public/app/core/core.ts
@@ -40,7 +40,7 @@ import { contextSrv } from './services/context_srv';
 import { KeybindingSrv } from './services/keybindingSrv';
 import { helpModal } from './components/help/help';
 import { JsonExplorer } from './components/json_explorer/json_explorer';
-import { NavModelSrv, NavModel } from './nav_model_srv';
+import { NavModelSrv } from './nav_model_srv';
 import { geminiScrollbar } from './components/scroll/scroll';
 import { orgSwitcher } from './components/org_switcher';
 import { profiler } from './profiler';
@@ -49,6 +49,7 @@ import { updateLegendValues } from './time_series2';
 import TimeSeries from './time_series2';
 import { searchResultsDirective } from './components/search/search_results';
 import { manageDashboardsDirective } from './components/manage_dashboards/manage_dashboards';
+import { NavModel } from '@grafana/ui';
 
 export {
   profiler,
diff --git a/public/app/core/nav_model_srv.ts b/public/app/core/nav_model_srv.ts
index 661cdbe77a3..a394511aa2c 100644
--- a/public/app/core/nav_model_srv.ts
+++ b/public/app/core/nav_model_srv.ts
@@ -1,29 +1,7 @@
 import coreModule from 'app/core/core_module';
 import config from 'app/core/config';
 import _ from 'lodash';
-
-export interface NavModelItem {
-  text: string;
-  url: string;
-  icon?: string;
-  img?: string;
-  id: string;
-  active?: boolean;
-  hideFromTabs?: boolean;
-  divider?: boolean;
-  children: NavModelItem[];
-  target?: string;
-}
-
-export class NavModel {
-  breadcrumbs: NavModelItem[];
-  main: NavModelItem;
-  node: NavModelItem;
-
-  constructor() {
-    this.breadcrumbs = [];
-  }
-}
+import { NavModel } from '@grafana/ui';
 
 export class NavModelSrv {
   navItems: any;
@@ -39,7 +17,9 @@ export class NavModelSrv {
 
   getNav(...args) {
     let children = this.navItems;
-    const nav = new NavModel();
+    const nav = {
+      breadcrumbs: [],
+    } as NavModel;
 
     for (const id of args) {
       // if its a number then it's the index to use for main
diff --git a/public/app/core/reducers/navModel.ts b/public/app/core/reducers/navModel.ts
index 942739e45e6..f75b701a9ff 100644
--- a/public/app/core/reducers/navModel.ts
+++ b/public/app/core/reducers/navModel.ts
@@ -1,5 +1,5 @@
 import { Action, ActionTypes } from 'app/core/actions/navModel';
-import { NavIndex, NavModelItem } from 'app/types';
+import { NavIndex, NavModelItem } from '@grafana/ui';
 import config from 'app/core/config';
 
 export function buildInitialState(): NavIndex {
diff --git a/public/app/core/selectors/navModel.ts b/public/app/core/selectors/navModel.ts
index 849ee364e25..66a7011389c 100644
--- a/public/app/core/selectors/navModel.ts
+++ b/public/app/core/selectors/navModel.ts
@@ -1,4 +1,4 @@
-import { NavModel, NavModelItem, NavIndex } from 'app/types';
+import { NavModel, NavModelItem, NavIndex } from '@grafana/ui';
 
 function getNotFoundModel(): NavModel {
   const node: NavModelItem = {
diff --git a/public/app/features/admin/ServerStats.tsx b/public/app/features/admin/ServerStats.tsx
index 92e7da6e831..c5129d11fbe 100644
--- a/public/app/features/admin/ServerStats.tsx
+++ b/public/app/features/admin/ServerStats.tsx
@@ -1,10 +1,11 @@
 import React, { PureComponent } from 'react';
 import { hot } from 'react-hot-loader';
 import { connect } from 'react-redux';
-import { NavModel, StoreState } from 'app/types';
+import { StoreState } from 'app/types';
 import { getNavModel } from 'app/core/selectors/navModel';
 import { getServerStats, ServerStat } from './state/apis';
 import Page from 'app/core/components/Page/Page';
+import { NavModel } from '@grafana/ui';
 
 interface Props {
   navModel: NavModel;
diff --git a/public/app/features/alerting/AlertRuleList.test.tsx b/public/app/features/alerting/AlertRuleList.test.tsx
index 61b59cc8523..88720c775a9 100644
--- a/public/app/features/alerting/AlertRuleList.test.tsx
+++ b/public/app/features/alerting/AlertRuleList.test.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { AlertRuleList, Props } from './AlertRuleList';
-import { AlertRule, NavModel } from '../../types';
+import { AlertRule } from '../../types';
 import appEvents from '../../core/app_events';
 import { mockActionCreator } from 'app/core/redux';
 import { updateLocation } from 'app/core/actions';
+import { NavModel } from '@grafana/ui';
 
 jest.mock('../../core/app_events', () => ({
   emit: jest.fn(),
diff --git a/public/app/features/alerting/AlertRuleList.tsx b/public/app/features/alerting/AlertRuleList.tsx
index 9b4ceac3acd..dcd31b71419 100644
--- a/public/app/features/alerting/AlertRuleList.tsx
+++ b/public/app/features/alerting/AlertRuleList.tsx
@@ -6,10 +6,11 @@ import AlertRuleItem from './AlertRuleItem';
 import appEvents from 'app/core/app_events';
 import { updateLocation } from 'app/core/actions';
 import { getNavModel } from 'app/core/selectors/navModel';
-import { NavModel, StoreState, AlertRule } from 'app/types';
+import { StoreState, AlertRule } from 'app/types';
 import { getAlertRulesAsync, setSearchQuery, togglePauseAlertRule } from './state/actions';
 import { getAlertRuleItems, getSearchQuery } from './state/selectors';
 import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
+import { NavModel } from '@grafana/ui';
 
 export interface Props {
   navModel: NavModel;
diff --git a/public/app/features/api-keys/ApiKeysPage.test.tsx b/public/app/features/api-keys/ApiKeysPage.test.tsx
index 23def68728e..37afa36b173 100644
--- a/public/app/features/api-keys/ApiKeysPage.test.tsx
+++ b/public/app/features/api-keys/ApiKeysPage.test.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { Props, ApiKeysPage } from './ApiKeysPage';
-import { NavModel, ApiKey } from 'app/types';
+import { ApiKey } from 'app/types';
 import { getMultipleMockKeys, getMockKey } from './__mocks__/apiKeysMock';
+import { NavModel } from '@grafana/ui';
 
 const setup = (propOverrides?: object) => {
   const props: Props = {
diff --git a/public/app/features/api-keys/ApiKeysPage.tsx b/public/app/features/api-keys/ApiKeysPage.tsx
index 9748a5727cf..7a058c1c25d 100644
--- a/public/app/features/api-keys/ApiKeysPage.tsx
+++ b/public/app/features/api-keys/ApiKeysPage.tsx
@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import ReactDOMServer from 'react-dom/server';
 import { connect } from 'react-redux';
 import { hot } from 'react-hot-loader';
-import { NavModel, ApiKey, NewApiKey, OrgRole } from 'app/types';
+import { ApiKey, NewApiKey, OrgRole } from 'app/types';
 import { getNavModel } from 'app/core/selectors/navModel';
 import { getApiKeys, getApiKeysCount } from './state/selectors';
 import { loadApiKeys, deleteApiKey, setSearchQuery, addApiKey } from './state/actions';
@@ -12,7 +12,7 @@ import ApiKeysAddedModal from './ApiKeysAddedModal';
 import config from 'app/core/config';
 import appEvents from 'app/core/app_events';
 import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
-import { DeleteButton, Input } from '@grafana/ui';
+import { DeleteButton, Input, NavModel } from '@grafana/ui';
 import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
 
 export interface Props {
diff --git a/public/app/features/datasources/DataSourceDashboards.test.tsx b/public/app/features/datasources/DataSourceDashboards.test.tsx
index 21ae806c603..32ed7252e2d 100644
--- a/public/app/features/datasources/DataSourceDashboards.test.tsx
+++ b/public/app/features/datasources/DataSourceDashboards.test.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { DataSourceDashboards, Props } from './DataSourceDashboards';
-import { DataSourceSettings } from '@grafana/ui/src/types';
-import { NavModel, PluginDashboard } from 'app/types';
+import { NavModel, DataSourceSettings } from '@grafana/ui';
+import { PluginDashboard } from 'app/types';
 
 const setup = (propOverrides?: object) => {
   const props: Props = {
diff --git a/public/app/features/datasources/DataSourceDashboards.tsx b/public/app/features/datasources/DataSourceDashboards.tsx
index 548145a79f5..0993a455dc9 100644
--- a/public/app/features/datasources/DataSourceDashboards.tsx
+++ b/public/app/features/datasources/DataSourceDashboards.tsx
@@ -16,8 +16,8 @@ import { importDashboard, removeDashboard } from '../dashboard/state/actions';
 import { getDataSource } from './state/selectors';
 
 // Types
-import { NavModel, PluginDashboard, StoreState } from 'app/types';
-import { DataSourceSettings } from '@grafana/ui/src/types';
+import { PluginDashboard, StoreState } from 'app/types';
+import { NavModel, DataSourceSettings } from '@grafana/ui';
 
 export interface Props {
   navModel: NavModel;
diff --git a/public/app/features/datasources/DataSourcesListPage.test.tsx b/public/app/features/datasources/DataSourcesListPage.test.tsx
index 65077201f65..f796df3f4ca 100644
--- a/public/app/features/datasources/DataSourcesListPage.test.tsx
+++ b/public/app/features/datasources/DataSourcesListPage.test.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { DataSourcesListPage, Props } from './DataSourcesListPage';
-import { NavModel } from 'app/types';
-import { DataSourceSettings } from '@grafana/ui/src/types';
+import { NavModel, DataSourceSettings } from '@grafana/ui';
 import { LayoutModes } from '../../core/components/LayoutSelector/LayoutSelector';
 import { getMockDataSources } from './__mocks__/dataSourcesMocks';
 import { setDataSourcesSearchQuery, setDataSourcesLayoutMode } from './state/actions';
diff --git a/public/app/features/datasources/DataSourcesListPage.tsx b/public/app/features/datasources/DataSourcesListPage.tsx
index 9f881446aec..cc04856ce34 100644
--- a/public/app/features/datasources/DataSourcesListPage.tsx
+++ b/public/app/features/datasources/DataSourcesListPage.tsx
@@ -10,8 +10,8 @@ import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
 import DataSourcesList from './DataSourcesList';
 
 // Types
-import { DataSourceSettings } from '@grafana/ui/src/types';
-import { NavModel, StoreState } from 'app/types';
+import { NavModel, DataSourceSettings } from '@grafana/ui';
+import { StoreState } from 'app/types';
 import { LayoutMode } from 'app/core/components/LayoutSelector/LayoutSelector';
 
 // Actions
diff --git a/public/app/features/datasources/NewDataSourcePage.tsx b/public/app/features/datasources/NewDataSourcePage.tsx
index d9716bd7220..ae0eae9e02f 100644
--- a/public/app/features/datasources/NewDataSourcePage.tsx
+++ b/public/app/features/datasources/NewDataSourcePage.tsx
@@ -2,12 +2,12 @@ import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 import { hot } from 'react-hot-loader';
 import Page from 'app/core/components/Page/Page';
-import { NavModel, StoreState } from 'app/types';
+import { StoreState } from 'app/types';
 import { addDataSource, loadDataSourceTypes, setDataSourceTypeSearchQuery } from './state/actions';
 import { getNavModel } from 'app/core/selectors/navModel';
 import { getDataSourceTypes } from './state/selectors';
 import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
-import { DataSourcePluginMeta } from '@grafana/ui';
+import { NavModel, DataSourcePluginMeta } from '@grafana/ui';
 
 export interface Props {
   navModel: NavModel;
diff --git a/public/app/features/datasources/settings/DataSourceSettingsPage.test.tsx b/public/app/features/datasources/settings/DataSourceSettingsPage.test.tsx
index d4664418f07..575311c2d17 100644
--- a/public/app/features/datasources/settings/DataSourceSettingsPage.test.tsx
+++ b/public/app/features/datasources/settings/DataSourceSettingsPage.test.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { DataSourceSettingsPage, Props } from './DataSourceSettingsPage';
-import { NavModel } from 'app/types';
-import { DataSourceSettings, DataSourcePlugin, DataSourceConstructor } from '@grafana/ui';
+import { NavModel, DataSourceSettings, DataSourcePlugin, DataSourceConstructor } from '@grafana/ui';
 import { getMockDataSource } from '../__mocks__/dataSourcesMocks';
 import { getMockPlugin } from '../../plugins/__mocks__/pluginMocks';
 import { setDataSourceName, setIsDefault } from '../state/actions';
diff --git a/public/app/features/datasources/settings/DataSourceSettingsPage.tsx b/public/app/features/datasources/settings/DataSourceSettingsPage.tsx
index df8f443aa77..b4c78656266 100644
--- a/public/app/features/datasources/settings/DataSourceSettingsPage.tsx
+++ b/public/app/features/datasources/settings/DataSourceSettingsPage.tsx
@@ -21,8 +21,8 @@ import { getNavModel } from 'app/core/selectors/navModel';
 import { getRouteParamsId } from 'app/core/selectors/location';
 
 // Types
-import { NavModel, StoreState } from 'app/types/';
-import { DataSourceSettings, DataSourcePlugin, DataSourcePluginMeta } from '@grafana/ui/src/types/';
+import { StoreState } from 'app/types/';
+import { NavModel, DataSourceSettings, DataSourcePlugin, DataSourcePluginMeta } from '@grafana/ui';
 import { getDataSourceLoadingNav } from '../state/navModel';
 import PluginStateinfo from 'app/features/plugins/PluginStateInfo';
 import { importDataSourcePlugin } from 'app/features/plugins/plugin_loader';
diff --git a/public/app/features/datasources/state/navModel.ts b/public/app/features/datasources/state/navModel.ts
index 41f706eb97b..0ec10cee19e 100644
--- a/public/app/features/datasources/state/navModel.ts
+++ b/public/app/features/datasources/state/navModel.ts
@@ -1,5 +1,4 @@
-import { NavModel, NavModelItem } from 'app/types';
-import { PluginMeta, DataSourceSettings, PluginType } from '@grafana/ui/src/types';
+import { PluginMeta, DataSourceSettings, PluginType, NavModel, NavModelItem } from '@grafana/ui';
 import config from 'app/core/config';
 
 export function buildNavModel(dataSource: DataSourceSettings, pluginMeta: PluginMeta): NavModelItem {
diff --git a/public/app/features/folders/FolderPermissions.tsx b/public/app/features/folders/FolderPermissions.tsx
index 705bb8f7848..0f9670efd96 100644
--- a/public/app/features/folders/FolderPermissions.tsx
+++ b/public/app/features/folders/FolderPermissions.tsx
@@ -2,10 +2,10 @@ import React, { PureComponent } from 'react';
 import { hot } from 'react-hot-loader';
 import { connect } from 'react-redux';
 import Page from 'app/core/components/Page/Page';
-import { Tooltip } from '@grafana/ui';
+import { Tooltip, NavModel } from '@grafana/ui';
 import { SlideDown } from 'app/core/components/Animations/SlideDown';
 import { getNavModel } from 'app/core/selectors/navModel';
-import { NavModel, StoreState, FolderState } from 'app/types';
+import { StoreState, FolderState } from 'app/types';
 import { DashboardAcl, PermissionLevel, NewDashboardAclItem } from 'app/types/acl';
 import {
   getFolderByUid,
diff --git a/public/app/features/folders/FolderSettingsPage.test.tsx b/public/app/features/folders/FolderSettingsPage.test.tsx
index 5d889ea59c4..4f56c44fae7 100644
--- a/public/app/features/folders/FolderSettingsPage.test.tsx
+++ b/public/app/features/folders/FolderSettingsPage.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { FolderSettingsPage, Props } from './FolderSettingsPage';
-import { NavModel } from 'app/types';
 import { shallow } from 'enzyme';
+import { NavModel } from '@grafana/ui';
 
 const setup = (propOverrides?: object) => {
   const props: Props = {
diff --git a/public/app/features/folders/FolderSettingsPage.tsx b/public/app/features/folders/FolderSettingsPage.tsx
index 1be6139e6b2..5ca647cdd5a 100644
--- a/public/app/features/folders/FolderSettingsPage.tsx
+++ b/public/app/features/folders/FolderSettingsPage.tsx
@@ -1,11 +1,11 @@
 import React, { PureComponent } from 'react';
 import { hot } from 'react-hot-loader';
 import { connect } from 'react-redux';
-import { Input } from '@grafana/ui';
+import { Input, NavModel } from '@grafana/ui';
 import Page from 'app/core/components/Page/Page';
 import appEvents from 'app/core/app_events';
 import { getNavModel } from 'app/core/selectors/navModel';
-import { NavModel, StoreState, FolderState } from 'app/types';
+import { StoreState, FolderState } from 'app/types';
 import { getFolderByUid, setFolderTitle, saveFolder, deleteFolder } from './state/actions';
 import { getLoadingNav } from './state/navModel';
 
diff --git a/public/app/features/folders/state/navModel.ts b/public/app/features/folders/state/navModel.ts
index 345201f353a..480f40dad5f 100644
--- a/public/app/features/folders/state/navModel.ts
+++ b/public/app/features/folders/state/navModel.ts
@@ -1,4 +1,5 @@
-import { FolderDTO, NavModelItem, NavModel } from 'app/types';
+import { FolderDTO } from 'app/types';
+import { NavModelItem, NavModel } from '@grafana/ui';
 
 export function buildNavModel(folder: FolderDTO): NavModelItem {
   return {
diff --git a/public/app/features/org/OrgDetailsPage.test.tsx b/public/app/features/org/OrgDetailsPage.test.tsx
index e7c2b651632..71c059593c7 100644
--- a/public/app/features/org/OrgDetailsPage.test.tsx
+++ b/public/app/features/org/OrgDetailsPage.test.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { OrgDetailsPage, Props } from './OrgDetailsPage';
-import { NavModel, Organization } from '../../types';
+import { Organization } from '../../types';
+import { NavModel } from '@grafana/ui';
 
 const setup = (propOverrides?: object) => {
   const props: Props = {
diff --git a/public/app/features/org/OrgDetailsPage.tsx b/public/app/features/org/OrgDetailsPage.tsx
index d1bcfbc9268..853af49977a 100644
--- a/public/app/features/org/OrgDetailsPage.tsx
+++ b/public/app/features/org/OrgDetailsPage.tsx
@@ -5,8 +5,9 @@ import Page from 'app/core/components/Page/Page';
 import OrgProfile from './OrgProfile';
 import SharedPreferences from 'app/core/components/SharedPreferences/SharedPreferences';
 import { loadOrganization, setOrganizationName, updateOrganization } from './state/actions';
-import { NavModel, Organization, StoreState } from 'app/types';
+import { Organization, StoreState } from 'app/types';
 import { getNavModel } from 'app/core/selectors/navModel';
+import { NavModel } from '@grafana/ui';
 
 export interface Props {
   navModel: NavModel;
diff --git a/public/app/features/plugins/PluginListPage.test.tsx b/public/app/features/plugins/PluginListPage.test.tsx
index 4ed186a1f69..10617d4c0bd 100644
--- a/public/app/features/plugins/PluginListPage.test.tsx
+++ b/public/app/features/plugins/PluginListPage.test.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { PluginListPage, Props } from './PluginListPage';
-import { NavModel } from '../../types';
 import { LayoutModes } from '../../core/components/LayoutSelector/LayoutSelector';
-import { PluginMeta } from '@grafana/ui';
+import { PluginMeta, NavModel } from '@grafana/ui';
 
 const setup = (propOverrides?: object) => {
   const props: Props = {
diff --git a/public/app/features/plugins/PluginListPage.tsx b/public/app/features/plugins/PluginListPage.tsx
index 39b00f23cfe..03d383fdec0 100644
--- a/public/app/features/plugins/PluginListPage.tsx
+++ b/public/app/features/plugins/PluginListPage.tsx
@@ -4,12 +4,11 @@ import { connect } from 'react-redux';
 import Page from 'app/core/components/Page/Page';
 import OrgActionBar from 'app/core/components/OrgActionBar/OrgActionBar';
 import PluginList from './PluginList';
-import { NavModel } from 'app/types';
 import { loadPlugins, setPluginsLayoutMode, setPluginsSearchQuery } from './state/actions';
 import { getNavModel } from 'app/core/selectors/navModel';
 import { getLayoutMode, getPlugins, getPluginsSearchQuery } from './state/selectors';
 import { LayoutMode } from 'app/core/components/LayoutSelector/LayoutSelector';
-import { PluginMeta } from '@grafana/ui';
+import { PluginMeta, NavModel } from '@grafana/ui';
 
 export interface Props {
   navModel: NavModel;
diff --git a/public/app/features/plugins/state/navModel.ts b/public/app/features/plugins/state/navModel.ts
index 19ce6dd905d..6b759bba99e 100644
--- a/public/app/features/plugins/state/navModel.ts
+++ b/public/app/features/plugins/state/navModel.ts
@@ -5,8 +5,7 @@ import _ from 'lodash';
 import config from 'app/core/config';
 
 // Types
-import { NavModel } from 'app/types';
-import { PluginMeta, DataSourceSettings } from '@grafana/ui/src/types';
+import { NavModel, PluginMeta, DataSourceSettings } from '@grafana/ui';
 
 export function buildNavModel(ds: DataSourceSettings, plugin: PluginMeta, currentPage: string): NavModel {
   let title = 'New';
diff --git a/public/app/features/teams/TeamList.test.tsx b/public/app/features/teams/TeamList.test.tsx
index da5afb58796..38373c0eab3 100644
--- a/public/app/features/teams/TeamList.test.tsx
+++ b/public/app/features/teams/TeamList.test.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { Props, TeamList } from './TeamList';
-import { NavModel, Team, OrgRole } from '../../types';
+import { Team, OrgRole } from '../../types';
 import { getMockTeam, getMultipleMockTeams } from './__mocks__/teamMocks';
 import { User } from 'app/core/services/context_srv';
+import { NavModel } from '@grafana/ui';
 
 const setup = (propOverrides?: object) => {
   const props: Props = {
diff --git a/public/app/features/teams/TeamList.tsx b/public/app/features/teams/TeamList.tsx
index 60d71e56f49..c9c0c41f4d9 100644
--- a/public/app/features/teams/TeamList.tsx
+++ b/public/app/features/teams/TeamList.tsx
@@ -2,9 +2,9 @@ import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 import { hot } from 'react-hot-loader';
 import Page from 'app/core/components/Page/Page';
-import { DeleteButton } from '@grafana/ui';
+import { DeleteButton, NavModel } from '@grafana/ui';
 import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
-import { NavModel, Team, OrgRole } from 'app/types';
+import { Team, OrgRole } from 'app/types';
 import { loadTeams, deleteTeam, setSearchQuery } from './state/actions';
 import { getSearchQuery, getTeams, getTeamsCount, isPermissionTeamAdmin } from './state/selectors';
 import { getNavModel } from 'app/core/selectors/navModel';
diff --git a/public/app/features/teams/TeamPages.test.tsx b/public/app/features/teams/TeamPages.test.tsx
index c49be9f550b..7e5c4994bda 100644
--- a/public/app/features/teams/TeamPages.test.tsx
+++ b/public/app/features/teams/TeamPages.test.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { TeamPages, Props } from './TeamPages';
-import { NavModel, Team, TeamMember, OrgRole } from '../../types';
+import { Team, TeamMember, OrgRole } from '../../types';
 import { getMockTeam } from './__mocks__/teamMocks';
 import { User } from 'app/core/services/context_srv';
+import { NavModel } from '@grafana/ui';
 
 jest.mock('app/core/config', () => ({
   buildInfo: { isEnterprise: true },
diff --git a/public/app/features/teams/TeamPages.tsx b/public/app/features/teams/TeamPages.tsx
index ae346aaaa97..bca045c0973 100644
--- a/public/app/features/teams/TeamPages.tsx
+++ b/public/app/features/teams/TeamPages.tsx
@@ -7,13 +7,14 @@ import Page from 'app/core/components/Page/Page';
 import TeamMembers from './TeamMembers';
 import TeamSettings from './TeamSettings';
 import TeamGroupSync from './TeamGroupSync';
-import { NavModel, Team, TeamMember } from 'app/types';
+import { Team, TeamMember } from 'app/types';
 import { loadTeam, loadTeamMembers } from './state/actions';
 import { getTeam, getTeamMembers, isSignedInUserTeamAdmin } from './state/selectors';
 import { getTeamLoadingNav } from './state/navModel';
 import { getNavModel } from 'app/core/selectors/navModel';
 import { getRouteParamsId, getRouteParamsPage } from '../../core/selectors/location';
 import { contextSrv, User } from 'app/core/services/context_srv';
+import { NavModel } from '@grafana/ui';
 
 export interface Props {
   team: Team;
diff --git a/public/app/features/teams/state/navModel.ts b/public/app/features/teams/state/navModel.ts
index aeb6b85f91e..aacdeb4066b 100644
--- a/public/app/features/teams/state/navModel.ts
+++ b/public/app/features/teams/state/navModel.ts
@@ -1,5 +1,6 @@
-import { Team, NavModelItem, NavModel, TeamPermissionLevel } from 'app/types';
+import { Team, TeamPermissionLevel } from 'app/types';
 import config from 'app/core/config';
+import { NavModelItem, NavModel } from '@grafana/ui';
 
 export function buildNavModel(team: Team): NavModelItem {
   const navModel = {
diff --git a/public/app/features/users/UsersListPage.test.tsx b/public/app/features/users/UsersListPage.test.tsx
index f9192568aef..a5c82664174 100644
--- a/public/app/features/users/UsersListPage.test.tsx
+++ b/public/app/features/users/UsersListPage.test.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { UsersListPage, Props } from './UsersListPage';
-import { Invitee, NavModel, OrgUser } from 'app/types';
+import { Invitee, OrgUser } from 'app/types';
 import { getMockUser } from './__mocks__/userMocks';
 import appEvents from '../../core/app_events';
+import { NavModel } from '@grafana/ui';
 
 jest.mock('../../core/app_events', () => ({
   emit: jest.fn(),
diff --git a/public/app/features/users/UsersListPage.tsx b/public/app/features/users/UsersListPage.tsx
index cb8fdf52790..23dd9c9582c 100644
--- a/public/app/features/users/UsersListPage.tsx
+++ b/public/app/features/users/UsersListPage.tsx
@@ -6,11 +6,12 @@ import Page from 'app/core/components/Page/Page';
 import UsersActionBar from './UsersActionBar';
 import UsersTable from './UsersTable';
 import InviteesTable from './InviteesTable';
-import { Invitee, NavModel, OrgUser } from 'app/types';
+import { Invitee, OrgUser } from 'app/types';
 import appEvents from 'app/core/app_events';
 import { loadUsers, loadInvitees, setUsersSearchQuery, updateUser, removeUser } from './state/actions';
 import { getNavModel } from 'app/core/selectors/navModel';
 import { getInvitees, getUsers, getUsersSearchQuery } from './state/selectors';
+import { NavModel } from '@grafana/ui';
 
 export interface Props {
   navModel: NavModel;
diff --git a/public/app/types/index.ts b/public/app/types/index.ts
index 3bf76aeb3c3..6da9d859f5c 100644
--- a/public/app/types/index.ts
+++ b/public/app/types/index.ts
@@ -1,7 +1,6 @@
 export * from './teams';
 export * from './alerting';
 export * from './location';
-export * from './navModel';
 export * from './folders';
 export * from './dashboard';
 export * from './acl';
diff --git a/public/app/types/store.ts b/public/app/types/store.ts
index 72a8cf066f1..975cd40ae71 100644
--- a/public/app/types/store.ts
+++ b/public/app/types/store.ts
@@ -1,7 +1,6 @@
 import { ThunkAction, ThunkDispatch as GenericThunkDispatch } from 'redux-thunk';
 import { ActionOf } from 'app/core/redux';
 
-import { NavIndex } from './navModel';
 import { LocationState } from './location';
 import { AlertRulesState } from './alerting';
 import { TeamsState, TeamState } from './teams';
@@ -13,6 +12,7 @@ import { UsersState, UserState } from './user';
 import { OrganizationState } from './organization';
 import { AppNotificationsState } from './appNotifications';
 import { PluginsState } from './plugins';
+import { NavIndex } from '@grafana/ui';
 
 export interface StoreState {
   navIndex: NavIndex;
diff --git a/public/test/mocks/common.ts b/public/test/mocks/common.ts
index 385f72621a9..023c653de26 100644
--- a/public/test/mocks/common.ts
+++ b/public/test/mocks/common.ts
@@ -1,4 +1,4 @@
-import { NavModel, NavModelItem } from 'app/types';
+import { NavModel, NavModelItem } from '@grafana/ui';
 
 export const backendSrv = {
   get: jest.fn(),