Refactor: move NavModel to @grafana/ui (#16813)

26bd76b4 · Ryan McKinley · GitHub · 96603566 · 26bd76b4 · 26bd76b4
Commit 26bd76b4 authored Apr 30, 2019 by Ryan McKinley Committed by GitHub Apr 30, 2019
42 changed files
--- 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';

--- a/public/app/types/navModel.ts
+++ b/public/app/types/navModel.ts
 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 };
--- a/public/app/core/actions/navModel.ts
+++ b/public/app/core/actions/navModel.ts
-import { NavModelItem } from '../../types';
+import { NavModelItem } from '@grafana/ui';
 export enum ActionTypes {
  UpdateNavIndex = 'UPDATE_NAV_INDEX',

--- a/public/app/core/components/Page/Page.tsx
+++ b/public/app/core/components/Page/Page.tsx
 // 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 {

--- a/public/app/core/components/PageHeader/PageHeader.tsx
+++ b/public/app/core/components/PageHeader/PageHeader.tsx
 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++) {
+    for (const bc of breadcrumbs) {
-      const bc = breadcrumbs[i];
      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>
    );

--- a/public/app/core/components/navbar/navbar.ts
+++ b/public/app/core/components/navbar/navbar.ts
 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;

--- 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,

--- a/public/app/core/nav_model_srv.ts
+++ b/public/app/core/nav_model_srv.ts
 import coreModule from 'app/core/core_module';
 import config from 'app/core/config';
 import _ from 'lodash';
+import { NavModel } from '@grafana/ui';
-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 = [];
-  }
-}
 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

--- a/public/app/core/reducers/navModel.ts
+++ b/public/app/core/reducers/navModel.ts
 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 {

--- a/public/app/core/selectors/navModel.ts
+++ b/public/app/core/selectors/navModel.ts
-import { NavModel, NavModelItem, NavIndex } from 'app/types';
+import { NavModel, NavModelItem, NavIndex } from '@grafana/ui';
 function getNotFoundModel(): NavModel {
  const node: NavModelItem = {

--- a/public/app/features/admin/ServerStats.tsx
+++ b/public/app/features/admin/ServerStats.tsx
 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;

--- a/public/app/features/alerting/AlertRuleList.test.tsx
+++ b/public/app/features/alerting/AlertRuleList.test.tsx
 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(),

--- 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;

--- a/public/app/features/api-keys/ApiKeysPage.test.tsx
+++ b/public/app/features/api-keys/ApiKeysPage.test.tsx
 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 = {

--- 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 {

--- a/public/app/features/datasources/DataSourceDashboards.test.tsx
+++ b/public/app/features/datasources/DataSourceDashboards.test.tsx
 import React from 'react';
 import { shallow } from 'enzyme';
 import { DataSourceDashboards, Props } from './DataSourceDashboards';
-import { DataSourceSettings } from '@grafana/ui/src/types';
+import { NavModel, DataSourceSettings } from '@grafana/ui';
-import { NavModel, PluginDashboard } from 'app/types';
+import { PluginDashboard } from 'app/types';
 const setup = (propOverrides?: object) => {
  const props: Props = {

--- 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 { PluginDashboard, StoreState } from 'app/types';
-import { DataSourceSettings } from '@grafana/ui/src/types';
+import { NavModel, DataSourceSettings } from '@grafana/ui';
 export interface Props {
  navModel: NavModel;

--- a/public/app/features/datasources/DataSourcesListPage.test.tsx
+++ b/public/app/features/datasources/DataSourcesListPage.test.tsx
 import React from 'react';
 import { shallow } from 'enzyme';
 import { DataSourcesListPage, Props } from './DataSourcesListPage';
-import { NavModel } from 'app/types';
+import { NavModel, DataSourceSettings } from '@grafana/ui';
-import { DataSourceSettings } from '@grafana/ui/src/types';
 import { LayoutModes } from '../../core/components/LayoutSelector/LayoutSelector';
 import { getMockDataSources } from './__mocks__/dataSourcesMocks';
 import { setDataSourcesSearchQuery, setDataSourcesLayoutMode } from './state/actions';

--- 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, DataSourceSettings } from '@grafana/ui';
-import { NavModel, StoreState } from 'app/types';
+import { StoreState } from 'app/types';
 import { LayoutMode } from 'app/core/components/LayoutSelector/LayoutSelector';
 // Actions

--- 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;

--- a/public/app/features/datasources/settings/DataSourceSettingsPage.test.tsx
+++ b/public/app/features/datasources/settings/DataSourceSettingsPage.test.tsx
 import React from 'react';
 import { shallow } from 'enzyme';
 import { DataSourceSettingsPage, Props } from './DataSourceSettingsPage';
-import { NavModel } from 'app/types';
+import { NavModel, DataSourceSettings, DataSourcePlugin, DataSourceConstructor } from '@grafana/ui';
-import { DataSourceSettings, DataSourcePlugin, DataSourceConstructor } from '@grafana/ui';
 import { getMockDataSource } from '../__mocks__/dataSourcesMocks';
 import { getMockPlugin } from '../../plugins/__mocks__/pluginMocks';
 import { setDataSourceName, setIsDefault } from '../state/actions';

--- 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 { StoreState } from 'app/types/';
-import { DataSourceSettings, DataSourcePlugin, DataSourcePluginMeta } from '@grafana/ui/src/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';

--- a/public/app/features/datasources/state/navModel.ts
+++ b/public/app/features/datasources/state/navModel.ts
-import { NavModel, NavModelItem } from 'app/types';
+import { PluginMeta, DataSourceSettings, PluginType, NavModel, NavModelItem } from '@grafana/ui';
-import { PluginMeta, DataSourceSettings, PluginType } from '@grafana/ui/src/types';
 import config from 'app/core/config';
 export function buildNavModel(dataSource: DataSourceSettings, pluginMeta: PluginMeta): NavModelItem {

--- 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,

--- a/public/app/features/folders/FolderSettingsPage.test.tsx
+++ b/public/app/features/folders/FolderSettingsPage.test.tsx
 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 = {

--- a/public/app/features/folders/FolderSettingsPage.tsx
+++ b/public/app/features/folders/FolderSettingsPage.tsx
 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';

--- a/public/app/features/folders/state/navModel.ts
+++ b/public/app/features/folders/state/navModel.ts
-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 {

--- a/public/app/features/org/OrgDetailsPage.test.tsx
+++ b/public/app/features/org/OrgDetailsPage.test.tsx
 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 = {

--- 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;

--- a/public/app/features/plugins/PluginListPage.test.tsx
+++ b/public/app/features/plugins/PluginListPage.test.tsx
 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 = {

--- 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;

--- 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 { NavModel, PluginMeta, DataSourceSettings } from '@grafana/ui';
-import { PluginMeta, DataSourceSettings } from '@grafana/ui/src/types';
 export function buildNavModel(ds: DataSourceSettings, plugin: PluginMeta, currentPage: string): NavModel {
  let title = 'New';

--- a/public/app/features/teams/TeamList.test.tsx
+++ b/public/app/features/teams/TeamList.test.tsx
 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 = {

--- 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';

--- a/public/app/features/teams/TeamPages.test.tsx
+++ b/public/app/features/teams/TeamPages.test.tsx
 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 },

--- 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;

--- a/public/app/features/teams/state/navModel.ts
+++ b/public/app/features/teams/state/navModel.ts
-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 = {

--- a/public/app/features/users/UsersListPage.test.tsx
+++ b/public/app/features/users/UsersListPage.test.tsx
 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(),

--- 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;

--- a/public/app/types/index.ts
+++ b/public/app/types/index.ts
 export * from './teams';
 export * from './alerting';
 export * from './location';
-export * from './navModel';
 export * from './folders';
 export * from './dashboard';
 export * from './acl';

--- a/public/app/types/store.ts
+++ b/public/app/types/store.ts
 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;

--- a/public/test/mocks/common.ts
+++ b/public/test/mocks/common.ts
-import { NavModel, NavModelItem } from 'app/types';
+import { NavModel, NavModelItem } from '@grafana/ui';
 export const backendSrv = {
  get: jest.fn(),