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

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

public/app/types/navModel.ts → 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 };

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

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 {

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

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;

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,

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

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 {

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

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;

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

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;

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

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 {

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

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;

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

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

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;

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

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

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 {

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,

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

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

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 {

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

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;

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

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;

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

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

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

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

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;

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

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

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;

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

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;

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