mirror of https://github.com/grafana/grafana
Angular/React: Migrates team creation form to react (#21058)
kay delaney
6 years ago
committed by
GitHub
parent
483415ac7c
commit
4dba02dd20
@ -0,0 +1,17 @@ |
||||
import React from 'react'; |
||||
import { shallow } from 'enzyme'; |
||||
import { CreateTeam, Props } from './CreateTeam'; |
||||
import { mockActionCreator } from 'app/core/redux'; |
||||
import { updateLocation } from 'app/core/actions'; |
||||
|
||||
describe('Render', () => { |
||||
it('should render component', () => { |
||||
const props: Props = { |
||||
updateLocation: mockActionCreator(updateLocation), |
||||
navModel: {} as any, |
||||
}; |
||||
const wrapper = shallow(<CreateTeam {...props} />); |
||||
|
||||
expect(wrapper).toMatchSnapshot(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,105 @@ |
||||
import React, { PureComponent } from 'react'; |
||||
import Page from 'app/core/components/Page/Page'; |
||||
import { hot } from 'react-hot-loader'; |
||||
import { FormField, Button } from '@grafana/ui'; |
||||
import { NavModel } from '@grafana/data'; |
||||
import { getBackendSrv } from '@grafana/runtime'; |
||||
import { updateLocation } from '../../core/actions'; |
||||
import { connect } from 'react-redux'; |
||||
import { getNavModel } from 'app/core/selectors/navModel'; |
||||
import { StoreState } from 'app/types'; |
||||
|
||||
export interface Props { |
||||
navModel: NavModel; |
||||
updateLocation: typeof updateLocation; |
||||
} |
||||
|
||||
interface State { |
||||
name: string; |
||||
email: string; |
||||
} |
||||
|
||||
export class CreateTeam extends PureComponent<Props, State> { |
||||
state: State = { |
||||
name: '', |
||||
email: '', |
||||
}; |
||||
|
||||
create = async (event: React.FormEvent<HTMLFormElement>) => { |
||||
event.preventDefault(); |
||||
|
||||
const { name, email } = this.state; |
||||
|
||||
const result = await getBackendSrv().post('/api/teams', { name, email }); |
||||
if (result.teamId) { |
||||
this.props.updateLocation({ path: `/org/teams/edit/${result.teamId}` }); |
||||
} |
||||
}; |
||||
|
||||
onEmailChange = (event: React.ChangeEvent<HTMLInputElement>) => { |
||||
this.setState({ |
||||
email: event.target.value, |
||||
}); |
||||
}; |
||||
|
||||
onNameChange = (event: React.ChangeEvent<HTMLInputElement>) => { |
||||
this.setState({ |
||||
name: event.target.value, |
||||
}); |
||||
}; |
||||
|
||||
render() { |
||||
const { navModel } = this.props; |
||||
const { name, email } = this.state; |
||||
|
||||
return ( |
||||
<Page navModel={navModel}> |
||||
<Page.Contents> |
||||
<> |
||||
<h3 className="page-sub-heading">New Team</h3> |
||||
|
||||
<form className="gf-form-group" onSubmit={this.create}> |
||||
<FormField |
||||
className="gf-form" |
||||
label="Name" |
||||
value={name} |
||||
onChange={this.onNameChange} |
||||
inputWidth={30} |
||||
labelWidth={10} |
||||
required |
||||
/> |
||||
<FormField |
||||
type="email" |
||||
className="gf-form" |
||||
label="Email" |
||||
value={email} |
||||
onChange={this.onEmailChange} |
||||
inputWidth={30} |
||||
labelWidth={10} |
||||
placeholder="email@test.com" |
||||
tooltip="This is optional and is primarily used for allowing custom team avatars." |
||||
/> |
||||
<div className="gf-form-button-row"> |
||||
<Button type="submit" variant="primary"> |
||||
Create |
||||
</Button> |
||||
</div> |
||||
</form> |
||||
</> |
||||
</Page.Contents> |
||||
</Page> |
||||
); |
||||
} |
||||
} |
||||
|
||||
function mapStateToProps(state: StoreState) { |
||||
return { |
||||
navModel: getNavModel(state.navIndex, 'teams'), |
||||
}; |
||||
} |
||||
|
||||
const mapDispatchToProps = { |
||||
updateLocation, |
||||
}; |
||||
|
||||
export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(CreateTeam)); |
||||
@ -1,29 +0,0 @@ |
||||
import coreModule from 'app/core/core_module'; |
||||
import { BackendSrv } from 'app/core/services/backend_srv'; |
||||
import { ILocationService } from 'angular'; |
||||
import { NavModelSrv } from 'app/core/core'; |
||||
|
||||
export class CreateTeamCtrl { |
||||
name: string; |
||||
email: string; |
||||
navModel: any; |
||||
|
||||
/** @ngInject */ |
||||
constructor(private backendSrv: BackendSrv, private $location: ILocationService, navModelSrv: NavModelSrv) { |
||||
this.navModel = navModelSrv.getNav('cfg', 'teams', 0); |
||||
} |
||||
|
||||
create() { |
||||
const payload = { |
||||
name: this.name, |
||||
email: this.email, |
||||
}; |
||||
this.backendSrv.post('/api/teams', payload).then((result: any) => { |
||||
if (result.teamId) { |
||||
this.$location.path('/org/teams/edit/' + result.teamId); |
||||
} |
||||
}); |
||||
} |
||||
} |
||||
|
||||
coreModule.controller('CreateTeamCtrl', CreateTeamCtrl); |
||||
@ -0,0 +1,50 @@ |
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP |
||||
|
||||
exports[`Render should render component 1`] = ` |
||||
<Page |
||||
navModel={Object {}} |
||||
> |
||||
<PageContents> |
||||
<h3 |
||||
className="page-sub-heading" |
||||
> |
||||
New Team |
||||
</h3> |
||||
<form |
||||
className="gf-form-group" |
||||
onSubmit={[Function]} |
||||
> |
||||
<FormField |
||||
className="gf-form" |
||||
inputWidth={30} |
||||
label="Name" |
||||
labelWidth={10} |
||||
onChange={[Function]} |
||||
required={true} |
||||
value="" |
||||
/> |
||||
<FormField |
||||
className="gf-form" |
||||
inputWidth={30} |
||||
label="Email" |
||||
labelWidth={10} |
||||
onChange={[Function]} |
||||
placeholder="email@test.com" |
||||
tooltip="This is optional and is primarily used for allowing custom team avatars." |
||||
type="email" |
||||
value="" |
||||
/> |
||||
<div |
||||
className="gf-form-button-row" |
||||
> |
||||
<Button |
||||
type="submit" |
||||
variant="primary" |
||||
> |
||||
Create |
||||
</Button> |
||||
</div> |
||||
</form> |
||||
</PageContents> |
||||
</Page> |
||||
`; |
||||
@ -1,26 +0,0 @@ |
||||
<page-header model="ctrl.navModel"></page-header> |
||||
|
||||
<div class="page-container page-body" ng-cloak> |
||||
<h3 class="page-sub-heading">New Team</h3> |
||||
|
||||
<form name="ctrl.saveForm" class="gf-form-group" ng-submit="ctrl.create()"> |
||||
<div class="gf-form max-width-30"> |
||||
<span class="gf-form-label width-10">Name</span> |
||||
<input type="text" required ng-model="ctrl.name" class="gf-form-input max-width-22" give-focus="true"> |
||||
</div> |
||||
<div class="gf-form max-width-30"> |
||||
<span class="gf-form-label width-10"> |
||||
Email |
||||
<info-popover mode="right-normal"> |
||||
This is optional and is primarily used for allowing custom team avatars. |
||||
</info-popover> |
||||
</span> |
||||
<input class="gf-form-input max-width-22" type="email" ng-model="ctrl.email" placeholder="email@test.com"> |
||||
</div> |
||||
<div class="gf-form-button-row"> |
||||
<button type="submit" class="btn btn-primary"> |
||||
Create |
||||
</button> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
Loading…
Reference in new issue