diff --git a/public/app/features/org/NewOrgPage.tsx b/public/app/features/org/NewOrgPage.tsx index 400ec745177..ec54b6303ff 100644 --- a/public/app/features/org/NewOrgPage.tsx +++ b/public/app/features/org/NewOrgPage.tsx @@ -2,18 +2,10 @@ import React, { FC } from 'react'; import { getBackendSrv } from '@grafana/runtime'; import Page from 'app/core/components/Page/Page'; import { Button, Input, Field, Form } from '@grafana/ui'; -import { getConfig } from 'app/core/config'; import { StoreState } from 'app/types'; -import { connect } from 'react-redux'; -import { NavModel } from '@grafana/data'; +import { connect, ConnectedProps } from 'react-redux'; import { getNavModel } from '../../core/selectors/navModel'; - -const createOrg = async (newOrg: { name: string }) => { - const result = await getBackendSrv().post('/api/orgs/', newOrg); - - await getBackendSrv().post('/api/user/using/' + result.orgId); - window.location.href = getConfig().appSubUrl + '/org'; -}; +import { createOrganization } from './state/actions'; const validateOrg = async (orgName: string) => { try { @@ -28,15 +20,27 @@ const validateOrg = async (orgName: string) => { return 'Organization already exists'; }; -interface PropsWithState { - navModel: NavModel; -} +const mapStateToProps = (state: StoreState) => { + return { navModel: getNavModel(state.navIndex, 'global-orgs') }; +}; + +const mapDispatchToProps = { + createOrganization, +}; + +const connector = connect(mapStateToProps, mapDispatchToProps); + +type Props = ConnectedProps; interface CreateOrgFormDTO { name: string; } -export const NewOrgPage: FC = ({ navModel }) => { +export const NewOrgPage: FC = ({ navModel, createOrganization }) => { + const createOrg = (newOrg: { name: string }) => { + createOrganization(newOrg); + }; + return ( @@ -71,8 +75,4 @@ export const NewOrgPage: FC = ({ navModel }) => { ); }; -const mapStateToProps = (state: StoreState) => { - return { navModel: getNavModel(state.navIndex, 'global-orgs') }; -}; - -export default connect(mapStateToProps)(NewOrgPage); +export default connector(NewOrgPage); diff --git a/public/app/features/org/SelectOrgPage.tsx b/public/app/features/org/SelectOrgPage.tsx index 3dc079acbd2..7dde6c5fde0 100644 --- a/public/app/features/org/SelectOrgPage.tsx +++ b/public/app/features/org/SelectOrgPage.tsx @@ -4,6 +4,8 @@ import { getBackendSrv, config } from '@grafana/runtime'; import { UserOrg } from 'app/types'; import { useAsync } from 'react-use'; import { Button, HorizontalGroup } from '@grafana/ui'; +import { setUserOrganization } from './state/actions'; +import { connect, ConnectedProps } from 'react-redux'; const navModel = { main: { @@ -19,17 +21,23 @@ const navModel = { const getUserOrgs = async () => { return await getBackendSrv().get('/api/user/orgs'); }; -const setUserOrg = async (org: UserOrg) => { - return await getBackendSrv() - .post('/api/user/using/' + org.orgId) - .then(() => { - window.location.href = config.appSubUrl + '/'; - }); + +const mapDispatchToProps = { + setUserOrganization, }; -export const SelectOrgPage: FC = () => { +const connector = connect(null, mapDispatchToProps); + +type Props = ConnectedProps; + +export const SelectOrgPage: FC = ({ setUserOrganization }) => { const [orgs, setOrgs] = useState(); + const setUserOrg = async (org: UserOrg) => { + setUserOrganization(org.orgId); + window.location.href = config.appSubUrl + '/'; + }; + useAsync(async () => { setOrgs(await getUserOrgs()); }, []); @@ -55,4 +63,4 @@ export const SelectOrgPage: FC = () => { ); }; -export default SelectOrgPage; +export default connector(SelectOrgPage); diff --git a/public/app/features/org/state/actions.test.ts b/public/app/features/org/state/actions.test.ts index 9d207f1b1a4..7a772a0268d 100644 --- a/public/app/features/org/state/actions.test.ts +++ b/public/app/features/org/state/actions.test.ts @@ -1,4 +1,4 @@ -import { updateOrganization } from './actions'; +import { updateOrganization, setUserOrganization } from './actions'; import { updateConfigurationSubtitle } from 'app/core/actions'; import { thunkTester } from 'test/core/thunk/thunkTester'; @@ -38,3 +38,26 @@ describe('updateOrganization', () => { }); }); }); + +describe('setUserOrganization', () => { + describe('when setUserOrganization thunk is dispatched', () => { + const postMock = jest.fn().mockResolvedValue({ id: 1, name: 'New Org Name' }); + + const backendSrvMock: any = { + post: postMock, + }; + + const orgId = 1; + + it('then it should dispatch updateConfigurationSubtitle', async () => { + const { initialState } = setup(); + + const dispatchedActions = await thunkTester(initialState) + .givenThunk(setUserOrganization) + .whenThunkIsDispatched(orgId, { getBackendSrv: () => backendSrvMock }); + + expect(dispatchedActions[0].type).toEqual(updateConfigurationSubtitle.type); + expect(dispatchedActions[0].payload).toEqual(initialState.organization.organization.name); + }); + }); +}); diff --git a/public/app/features/org/state/actions.ts b/public/app/features/org/state/actions.ts index 776584867ce..d33aa71f915 100644 --- a/public/app/features/org/state/actions.ts +++ b/public/app/features/org/state/actions.ts @@ -2,6 +2,7 @@ import { ThunkResult } from 'app/types'; import { getBackendSrv } from '@grafana/runtime'; import { organizationLoaded } from './reducers'; import { updateConfigurationSubtitle } from 'app/core/actions'; +import { getConfig } from 'app/core/config'; type OrganizationDependencies = { getBackendSrv: typeof getBackendSrv }; @@ -28,3 +29,26 @@ export function updateOrganization( dispatch(loadOrganization(dependencies)); }; } + +export function setUserOrganization( + orgId: number, + dependencies: OrganizationDependencies = { getBackendSrv: getBackendSrv } +): ThunkResult { + return async (dispatch) => { + const organizationResponse = await dependencies.getBackendSrv().post('/api/user/using/' + orgId); + + dispatch(updateConfigurationSubtitle(organizationResponse.name)); + }; +} + +export function createOrganization( + newOrg: { name: string }, + dependencies: OrganizationDependencies = { getBackendSrv: getBackendSrv } +): ThunkResult { + return async (dispatch) => { + const result = await dependencies.getBackendSrv().post('/api/orgs/', newOrg); + + dispatch(setUserOrganization(result.orgId)); + window.location.href = getConfig().appSubUrl + '/org'; + }; +}