|
|
@@ -1,4 +1,4 @@
|
|
|
-import {Component, Fragment} from 'react';
|
|
|
+import {Fragment, useState} from 'react';
|
|
|
|
|
|
import type {ModalRenderProps} from 'sentry/actionCreators/modal';
|
|
|
import SentryAppExternalIssueForm from 'sentry/components/group/sentryAppExternalIssueForm';
|
|
|
@@ -15,58 +15,57 @@ type Props = ModalRenderProps & {
|
|
|
sentryAppInstallation: SentryAppInstallation;
|
|
|
};
|
|
|
|
|
|
-type State = {
|
|
|
- action: 'create' | 'link';
|
|
|
-};
|
|
|
-
|
|
|
-class SentryAppExternalIssueModal extends Component<Props, State> {
|
|
|
- state: State = {
|
|
|
- action: 'create',
|
|
|
- };
|
|
|
+function SentryAppExternalIssueModal(props: Props) {
|
|
|
+ const [action, setAction] = useState<'create' | 'link'>('create');
|
|
|
+ const {
|
|
|
+ Header,
|
|
|
+ Body,
|
|
|
+ sentryAppComponent,
|
|
|
+ sentryAppInstallation,
|
|
|
+ group,
|
|
|
+ closeModal,
|
|
|
+ event,
|
|
|
+ } = props;
|
|
|
|
|
|
- showLink = () => {
|
|
|
- this.setState({action: 'link'});
|
|
|
+ const showLink = () => {
|
|
|
+ setAction('link');
|
|
|
};
|
|
|
|
|
|
- showCreate = () => {
|
|
|
- this.setState({action: 'create'});
|
|
|
+ const showCreate = () => {
|
|
|
+ setAction('create');
|
|
|
};
|
|
|
|
|
|
- onSubmitSuccess = () => {
|
|
|
- this.props.closeModal();
|
|
|
+ const onSubmitSuccess = () => {
|
|
|
+ closeModal();
|
|
|
};
|
|
|
|
|
|
- render() {
|
|
|
- const {Header, Body, sentryAppComponent, sentryAppInstallation, group} = this.props;
|
|
|
- const {action} = this.state;
|
|
|
- const name = sentryAppComponent.sentryApp.name;
|
|
|
- const config = sentryAppComponent.schema[action];
|
|
|
+ const name = sentryAppComponent.sentryApp.name;
|
|
|
+ const config = sentryAppComponent.schema[action];
|
|
|
|
|
|
- return (
|
|
|
- <Fragment>
|
|
|
- <Header closeButton>{tct('[name] Issue', {name})}</Header>
|
|
|
- <NavTabs underlined>
|
|
|
- <li className={action === 'create' ? 'active create' : 'create'}>
|
|
|
- <a onClick={this.showCreate}>{t('Create')}</a>
|
|
|
- </li>
|
|
|
- <li className={action === 'link' ? 'active link' : 'link'}>
|
|
|
- <a onClick={this.showLink}>{t('Link')}</a>
|
|
|
- </li>
|
|
|
- </NavTabs>
|
|
|
- <Body>
|
|
|
- <SentryAppExternalIssueForm
|
|
|
- group={group}
|
|
|
- sentryAppInstallation={sentryAppInstallation}
|
|
|
- appName={name}
|
|
|
- config={config}
|
|
|
- action={action}
|
|
|
- onSubmitSuccess={this.onSubmitSuccess}
|
|
|
- event={this.props.event}
|
|
|
- />
|
|
|
- </Body>
|
|
|
- </Fragment>
|
|
|
- );
|
|
|
- }
|
|
|
+ return (
|
|
|
+ <Fragment>
|
|
|
+ <Header closeButton>{tct('[name] Issue', {name})}</Header>
|
|
|
+ <NavTabs underlined>
|
|
|
+ <li className={action === 'create' ? 'active create' : 'create'}>
|
|
|
+ <a onClick={showCreate}>{t('Create')}</a>
|
|
|
+ </li>
|
|
|
+ <li className={action === 'link' ? 'active link' : 'link'}>
|
|
|
+ <a onClick={showLink}>{t('Link')}</a>
|
|
|
+ </li>
|
|
|
+ </NavTabs>
|
|
|
+ <Body>
|
|
|
+ <SentryAppExternalIssueForm
|
|
|
+ group={group}
|
|
|
+ sentryAppInstallation={sentryAppInstallation}
|
|
|
+ appName={name}
|
|
|
+ config={config}
|
|
|
+ action={action}
|
|
|
+ onSubmitSuccess={onSubmitSuccess}
|
|
|
+ event={event}
|
|
|
+ />
|
|
|
+ </Body>
|
|
|
+ </Fragment>
|
|
|
+ );
|
|
|
}
|
|
|
|
|
|
export default SentryAppExternalIssueModal;
|
Michelle Zhang