diff --git a/public/app/core/components/OrgActionBar/OrgActionBar.test.tsx b/public/app/core/components/OrgActionBar/OrgActionBar.test.tsx deleted file mode 100644 index d838a2d5c34..00000000000 --- a/public/app/core/components/OrgActionBar/OrgActionBar.test.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import { shallow } from 'enzyme'; -import OrgActionBar, { Props } from './OrgActionBar'; - -const setup = (propOverrides?: object) => { - const props: Props = { - searchQuery: '', - setSearchQuery: jest.fn(), - linkButton: { href: 'some/url', title: 'test' }, - }; - - Object.assign(props, propOverrides); - - return shallow(); -}; - -describe('Render', () => { - it('should render component', () => { - const wrapper = setup(); - - expect(wrapper).toMatchSnapshot(); - }); -}); diff --git a/public/app/core/components/OrgActionBar/OrgActionBar.tsx b/public/app/core/components/OrgActionBar/OrgActionBar.tsx deleted file mode 100644 index de91c6cc6b3..00000000000 --- a/public/app/core/components/OrgActionBar/OrgActionBar.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import React, { PureComponent } from 'react'; -import LayoutSelector, { LayoutMode } from '../LayoutSelector/LayoutSelector'; - -export interface Props { - searchQuery: string; - layoutMode?: LayoutMode; - setLayoutMode?: (mode: LayoutMode) => {}; - setSearchQuery: (value: string) => {}; - linkButton: { href: string; title: string }; -} - -export default class OrgActionBar extends PureComponent { - render() { - const { searchQuery, layoutMode, setLayoutMode, linkButton, setSearchQuery } = this.props; - - return ( -
-
- - setLayoutMode(mode)} /> -
-
- - {linkButton.title} - -
- ); - } -} diff --git a/public/app/features/datasources/DataSourcesActionBar.test.tsx b/public/app/features/datasources/DataSourcesActionBar.test.tsx new file mode 100644 index 00000000000..8337271271e --- /dev/null +++ b/public/app/features/datasources/DataSourcesActionBar.test.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import { DataSourcesActionBar, Props } from './DataSourcesActionBar'; +import { LayoutModes } from '../../core/components/LayoutSelector/LayoutSelector'; + +const setup = (propOverrides?: object) => { + const props: Props = { + layoutMode: LayoutModes.Grid, + searchQuery: '', + setDataSourcesLayoutMode: jest.fn(), + setDataSourcesSearchQuery: jest.fn(), + }; + + return shallow(); +}; + +describe('Render', () => { + it('should render component', () => { + const wrapper = setup(); + + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/public/app/features/datasources/DataSourcesActionBar.tsx b/public/app/features/datasources/DataSourcesActionBar.tsx new file mode 100644 index 00000000000..d28089b1f21 --- /dev/null +++ b/public/app/features/datasources/DataSourcesActionBar.tsx @@ -0,0 +1,62 @@ +import React, { PureComponent } from 'react'; +import { connect } from 'react-redux'; +import LayoutSelector, { LayoutMode } from '../../core/components/LayoutSelector/LayoutSelector'; +import { setDataSourcesLayoutMode, setDataSourcesSearchQuery } from './state/actions'; +import { getDataSourcesLayoutMode, getDataSourcesSearchQuery } from './state/selectors'; + +export interface Props { + searchQuery: string; + layoutMode: LayoutMode; + setDataSourcesLayoutMode: typeof setDataSourcesLayoutMode; + setDataSourcesSearchQuery: typeof setDataSourcesSearchQuery; +} + +export class DataSourcesActionBar extends PureComponent { + onSearchQueryChange = event => { + this.props.setDataSourcesSearchQuery(event.target.value); + }; + + render() { + const { searchQuery, layoutMode, setDataSourcesLayoutMode } = this.props; + + return ( +
+
+ + setDataSourcesLayoutMode(mode)} + /> +
+ + ); + } +} + +function mapStateToProps(state) { + return { + searchQuery: getDataSourcesSearchQuery(state.dataSources), + layoutMode: getDataSourcesLayoutMode(state.dataSources), + }; +} + +const mapDispatchToProps = { + setDataSourcesLayoutMode, + setDataSourcesSearchQuery, +}; + +export default connect(mapStateToProps, mapDispatchToProps)(DataSourcesActionBar); diff --git a/public/app/features/datasources/DataSourcesListPage.test.tsx b/public/app/features/datasources/DataSourcesListPage.test.tsx index 96f6c304b16..fed7954d716 100644 --- a/public/app/features/datasources/DataSourcesListPage.test.tsx +++ b/public/app/features/datasources/DataSourcesListPage.test.tsx @@ -12,9 +12,6 @@ const setup = (propOverrides?: object) => { loadDataSources: jest.fn(), navModel: {} as NavModel, dataSourcesCount: 0, - searchQuery: '', - setDataSourcesSearchQuery: jest.fn(), - setDataSourcesLayoutMode: jest.fn(), }; Object.assign(props, propOverrides); diff --git a/public/app/features/datasources/DataSourcesListPage.tsx b/public/app/features/datasources/DataSourcesListPage.tsx index 2d18d67a5d2..c6db6ee7889 100644 --- a/public/app/features/datasources/DataSourcesListPage.tsx +++ b/public/app/features/datasources/DataSourcesListPage.tsx @@ -2,29 +2,21 @@ import React, { PureComponent } from 'react'; import { connect } from 'react-redux'; import { hot } from 'react-hot-loader'; import PageHeader from '../../core/components/PageHeader/PageHeader'; -import OrgActionBar from '../../core/components/OrgActionBar/OrgActionBar'; -import EmptyListCTA from '../../core/components/EmptyListCTA/EmptyListCTA'; +import DataSourcesActionBar from './DataSourcesActionBar'; import DataSourcesList from './DataSourcesList'; +import { loadDataSources } from './state/actions'; +import { getDataSources, getDataSourcesCount, getDataSourcesLayoutMode } from './state/selectors'; +import { getNavModel } from '../../core/selectors/navModel'; import { DataSource, NavModel } from 'app/types'; import { LayoutMode } from '../../core/components/LayoutSelector/LayoutSelector'; -import { loadDataSources, setDataSourcesLayoutMode, setDataSourcesSearchQuery } from './state/actions'; -import { getNavModel } from '../../core/selectors/navModel'; -import { - getDataSources, - getDataSourcesCount, - getDataSourcesLayoutMode, - getDataSourcesSearchQuery, -} from './state/selectors'; +import EmptyListCTA from '../../core/components/EmptyListCTA/EmptyListCTA'; export interface Props { navModel: NavModel; dataSources: DataSource[]; dataSourcesCount: number; layoutMode: LayoutMode; - searchQuery: string; loadDataSources: typeof loadDataSources; - setDataSourcesLayoutMode: typeof setDataSourcesLayoutMode; - setDataSourcesSearchQuery: typeof setDataSourcesSearchQuery; } const emptyListModel = { @@ -48,20 +40,7 @@ export class DataSourcesListPage extends PureComponent { } render() { - const { - dataSources, - dataSourcesCount, - navModel, - layoutMode, - searchQuery, - setDataSourcesSearchQuery, - setDataSourcesLayoutMode, - } = this.props; - - const linkButton = { - href: 'datasources/new', - title: 'Add data source', - }; + const { dataSources, dataSourcesCount, navModel, layoutMode } = this.props; return (
@@ -71,14 +50,7 @@ export class DataSourcesListPage extends PureComponent { ) : ( [ - setDataSourcesLayoutMode(mode)} - setSearchQuery={query => setDataSourcesSearchQuery(query)} - linkButton={linkButton} - key="action-bar" - />, + , , ] )} @@ -94,14 +66,11 @@ function mapStateToProps(state) { dataSources: getDataSources(state.dataSources), layoutMode: getDataSourcesLayoutMode(state.dataSources), dataSourcesCount: getDataSourcesCount(state.dataSources), - searchQuery: getDataSourcesSearchQuery(state.dataSources), }; } const mapDispatchToProps = { loadDataSources, - setDataSourcesSearchQuery, - setDataSourcesLayoutMode, }; export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(DataSourcesListPage)); diff --git a/public/app/features/datasources/__snapshots__/DataSourcesActionBar.test.tsx.snap b/public/app/features/datasources/__snapshots__/DataSourcesActionBar.test.tsx.snap new file mode 100644 index 00000000000..24f9f2126d0 --- /dev/null +++ b/public/app/features/datasources/__snapshots__/DataSourcesActionBar.test.tsx.snap @@ -0,0 +1,42 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Render should render component 1`] = ` +
+
+ + +
+ +`; diff --git a/public/app/features/datasources/__snapshots__/DataSourcesListPage.test.tsx.snap b/public/app/features/datasources/__snapshots__/DataSourcesListPage.test.tsx.snap index 973b38f1ff3..c19ee641e1b 100644 --- a/public/app/features/datasources/__snapshots__/DataSourcesListPage.test.tsx.snap +++ b/public/app/features/datasources/__snapshots__/DataSourcesListPage.test.tsx.snap @@ -8,18 +8,8 @@ exports[`Render should render action bar and datasources 1`] = `
- { + this.users = users; + this.unfiltered = users; + }); + this.backendSrv.get('/api/org/invites').then(pendingInvites => { + this.pendingInvites = pendingInvites; + }); + } + + onQueryUpdated() { + const regex = new RegExp(this.searchQuery, 'ig'); + this.users = _.filter(this.unfiltered, item => { + return regex.test(item.email) || regex.test(item.login); + }); + } + + updateOrgUser(user) { + this.backendSrv.patch('/api/org/users/' + user.userId, user); + } + + removeUser(user) { + this.$scope.appEvent('confirm-modal', { + title: 'Delete', + text: 'Are you sure you want to delete user ' + user.login + '?', + yesText: 'Delete', + icon: 'fa-warning', + onConfirm: () => { + this.removeUserConfirmed(user); + }, + }); + } + + removeUserConfirmed(user) { + this.backendSrv.delete('/api/org/users/' + user.userId).then(this.get.bind(this)); + } + + revokeInvite(invite, evt) { + evt.stopPropagation(); + this.backendSrv.patch('/api/org/invites/' + invite.code + '/revoke').then(this.get.bind(this)); + } + + copyInviteToClipboard(evt) { + evt.stopPropagation(); + } + + getInviteUrl(invite) { + return invite.url; + } +} + +coreModule.controller('OrgUsersCtrl', OrgUsersCtrl); diff --git a/public/app/features/org/partials/orgUsers.html b/public/app/features/org/partials/orgUsers.html new file mode 100644 index 00000000000..8f75625b506 --- /dev/null +++ b/public/app/features/org/partials/orgUsers.html @@ -0,0 +1,105 @@ + + +
+
+ + +
+ + +
+ +
+ + + + Invite + + + + + {{ctrl.externalUserMngLinkName}} + +
+ +
+ +
+ +
+ + + + + + + + + + + + + + + + + + + +
LoginEmail + Seen + Time since user was seen using Grafana + Role
+ + {{user.login}}{{user.email}}{{user.lastSeenAtAge}} +
+ +
+ 		+ + + +
+
+ +
+ + + + + + + + + + + + + + + +
EmailName
{{invite.email}}{{invite.name}} + +   + + +
+
+
+ diff --git a/public/app/features/plugins/PluginActionBar.test.tsx b/public/app/features/plugins/PluginActionBar.test.tsx new file mode 100644 index 00000000000..be3f37e89fa --- /dev/null +++ b/public/app/features/plugins/PluginActionBar.test.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import { PluginActionBar, Props } from './PluginActionBar'; +import { LayoutModes } from '../../core/components/LayoutSelector/LayoutSelector'; + +const setup = (propOverrides?: object) => { + const props: Props = { + searchQuery: '', + layoutMode: LayoutModes.Grid, + setLayoutMode: jest.fn(), + setPluginsSearchQuery: jest.fn(), + }; + + Object.assign(props, propOverrides); + + const wrapper = shallow(); + const instance = wrapper.instance() as PluginActionBar; + + return { + wrapper, + instance, + }; +}; + +describe('Render', () => { + it('should render component', () => { + const { wrapper } = setup(); + + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/public/app/features/plugins/PluginActionBar.tsx b/public/app/features/plugins/PluginActionBar.tsx new file mode 100644 index 00000000000..301b432ff5c --- /dev/null +++ b/public/app/features/plugins/PluginActionBar.tsx @@ -0,0 +1,62 @@ +import React, { PureComponent } from 'react'; +import { connect } from 'react-redux'; +import LayoutSelector, { LayoutMode } from '../../core/components/LayoutSelector/LayoutSelector'; +import { setLayoutMode, setPluginsSearchQuery } from './state/actions'; +import { getPluginsSearchQuery, getLayoutMode } from './state/selectors'; + +export interface Props { + searchQuery: string; + layoutMode: LayoutMode; + setLayoutMode: typeof setLayoutMode; + setPluginsSearchQuery: typeof setPluginsSearchQuery; +} + +export class PluginActionBar extends PureComponent { + onSearchQueryChange = event => { + this.props.setPluginsSearchQuery(event.target.value); + }; + + render() { + const { searchQuery, layoutMode, setLayoutMode } = this.props; + + return ( +
+
+ + setLayoutMode(mode)} /> +
+ + ); + } +} + +function mapStateToProps(state) { + return { + searchQuery: getPluginsSearchQuery(state.plugins), + layoutMode: getLayoutMode(state.plugins), + }; +} + +const mapDispatchToProps = { + setPluginsSearchQuery, + setLayoutMode, +}; + +export default connect(mapStateToProps, mapDispatchToProps)(PluginActionBar); diff --git a/public/app/features/plugins/PluginListPage.test.tsx b/public/app/features/plugins/PluginListPage.test.tsx index b173ef51a2a..452a89837c7 100644 --- a/public/app/features/plugins/PluginListPage.test.tsx +++ b/public/app/features/plugins/PluginListPage.test.tsx @@ -8,9 +8,6 @@ const setup = (propOverrides?: object) => { const props: Props = { navModel: {} as NavModel, plugins: [] as Plugin[], - searchQuery: '', - setPluginsSearchQuery: jest.fn(), - setPluginsLayoutMode: jest.fn(), layoutMode: LayoutModes.Grid, loadPlugins: jest.fn(), }; diff --git a/public/app/features/plugins/PluginListPage.tsx b/public/app/features/plugins/PluginListPage.tsx index c24d44d6826..de2968b126c 100644 --- a/public/app/features/plugins/PluginListPage.tsx +++ b/public/app/features/plugins/PluginListPage.tsx @@ -1,23 +1,20 @@ import React, { PureComponent } from 'react'; import { hot } from 'react-hot-loader'; import { connect } from 'react-redux'; -import PageHeader from 'app/core/components/PageHeader/PageHeader'; -import OrgActionBar from 'app/core/components/OrgActionBar/OrgActionBar'; +import PageHeader from '../../core/components/PageHeader/PageHeader'; +import PluginActionBar from './PluginActionBar'; import PluginList from './PluginList'; -import { NavModel, Plugin } from 'app/types'; -import { loadPlugins, setPluginsLayoutMode, setPluginsSearchQuery } from './state/actions'; +import { NavModel, Plugin } from '../../types'; +import { loadPlugins } from './state/actions'; import { getNavModel } from '../../core/selectors/navModel'; -import { getLayoutMode, getPlugins, getPluginsSearchQuery } from './state/selectors'; +import { getLayoutMode, getPlugins } from './state/selectors'; import { LayoutMode } from '../../core/components/LayoutSelector/LayoutSelector'; export interface Props { navModel: NavModel; plugins: Plugin[]; layoutMode: LayoutMode; - searchQuery: string; loadPlugins: typeof loadPlugins; - setPluginsLayoutMode: typeof setPluginsLayoutMode; - setPluginsSearchQuery: typeof setPluginsSearchQuery; } export class PluginListPage extends PureComponent { @@ -30,23 +27,13 @@ export class PluginListPage extends PureComponent { } render() { - const { navModel, plugins, layoutMode, setPluginsLayoutMode, setPluginsSearchQuery, searchQuery } = this.props; + const { navModel, plugins, layoutMode } = this.props; - const linkButton = { - href: 'https://grafana.com/plugins?utm_source=grafana_plugin_list', - title: 'Find more plugins on Grafana.com', - }; return (
- setPluginsLayoutMode(mode)} - setSearchQuery={query => setPluginsSearchQuery(query)} - linkButton={linkButton} - /> + {plugins && }
@@ -59,14 +46,11 @@ function mapStateToProps(state) { navModel: getNavModel(state.navIndex, 'plugins'), plugins: getPlugins(state.plugins), layoutMode: getLayoutMode(state.plugins), - searchQuery: getPluginsSearchQuery(state.plugins), }; } const mapDispatchToProps = { loadPlugins, - setPluginsLayoutMode, - setPluginsSearchQuery, }; export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(PluginListPage)); diff --git a/public/app/core/components/OrgActionBar/__snapshots__/OrgActionBar.test.tsx.snap b/public/app/features/plugins/__snapshots__/PluginActionBar.test.tsx.snap similarity index 84% rename from public/app/core/components/OrgActionBar/__snapshots__/OrgActionBar.test.tsx.snap rename to public/app/features/plugins/__snapshots__/PluginActionBar.test.tsx.snap index dc53e7863ea..30cb53cea27 100644 --- a/public/app/core/components/OrgActionBar/__snapshots__/OrgActionBar.test.tsx.snap +++ b/public/app/features/plugins/__snapshots__/PluginActionBar.test.tsx.snap @@ -22,6 +22,7 @@ exports[`Render should render component 1`] = ` />
@@ -30,10 +31,10 @@ exports[`Render should render component 1`] = ` /> - test + Find more plugins on Grafana.com
`; diff --git a/public/app/features/plugins/__snapshots__/PluginListPage.test.tsx.snap b/public/app/features/plugins/__snapshots__/PluginListPage.test.tsx.snap index 7e837d1ec7d..74b23d8850a 100644 --- a/public/app/features/plugins/__snapshots__/PluginListPage.test.tsx.snap +++ b/public/app/features/plugins/__snapshots__/PluginListPage.test.tsx.snap @@ -8,18 +8,7 @@ exports[`Render should render component 1`] = `
- + ({ +export const setLayoutMode = (mode: LayoutMode): SetLayoutModeAction => ({ type: ActionTypes.SetLayoutMode, payload: mode, }); diff --git a/public/app/features/users/InviteesTable.test.tsx b/public/app/features/users/InviteesTable.test.tsx deleted file mode 100644 index 9aae4d765b7..00000000000 --- a/public/app/features/users/InviteesTable.test.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react'; -import { shallow } from 'enzyme'; -import InviteesTable, { Props } from './InviteesTable'; -import { Invitee } from 'app/types'; -import { getMockInvitees } from './__mocks__/userMocks'; - -const setup = (propOverrides?: object) => { - const props: Props = { - invitees: [] as Invitee[], - revokeInvite: jest.fn(), - }; - - Object.assign(props, propOverrides); - - return shallow(); -}; - -describe('Render', () => { - it('should render component', () => { - const wrapper = setup(); - - expect(wrapper).toMatchSnapshot(); - }); - - it('should render invitees', () => { - const wrapper = setup({ - invitees: getMockInvitees(5), - }); - - expect(wrapper).toMatchSnapshot(); - }); -}); diff --git a/public/app/features/users/InviteesTable.tsx b/public/app/features/users/InviteesTable.tsx deleted file mode 100644 index 3157bf4fe38..00000000000 --- a/public/app/features/users/InviteesTable.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import React, { createRef, PureComponent } from 'react'; -import { Invitee } from 'app/types'; - -export interface Props { - invitees: Invitee[]; - revokeInvite: (code: string) => void; -} - -export default class InviteesTable extends PureComponent { - private copyUrlRef = createRef(); - - copyToClipboard = () => { - const node = this.copyUrlRef.current; - - if (node) { - node.select(); - document.execCommand('copy'); - } - }; - - render() { - const { invitees, revokeInvite } = this.props; - - return ( - - - - - - - - - {invitees.map((invitee, index) => { - return ( - - - -
EmailName - -
{invitee.email}{invitee.name} -