jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added spinner while submitting bug report

Browse Source 
Summary:
Solves this T65385916.
Before this diff the bugreporter showed a disabled UI while waiting for the upload to finish. Its confusing for the user as, it can be seen from the above the task.  Thus I added an intermediate UI with a spinner and a text "Submitting..." which makes it clear for the user that we are uploading a bug report.

Reviewed By: mweststrate

Differential Revision: D21017426

fbshipit-source-id: ce12dfbefc8726adfad9ef17abd744cc92c254ed
This commit is contained in:
Pritesh Nandgaonkar
2020-04-14 10:34:53 -07:00
committed by Facebook GitHub Bot
parent a08bed86b7
commit adebae54fa
2 changed files with 96 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
desktop/app/src/chrome/BugReporterDialog.tsx
View File

@@ -25,13 +25,20 @@ import {
styled, styled,
} from 'flipper'; } from 'flipper';
import {State as Store} from '../reducers'; import {State as Store} from '../reducers';
import LoadingIndicator from '../ui/components/LoadingIndicator';
const Container = styled(FlexColumn)({ const Container = styled(FlexColumn)({
padding: 10, padding: 10,
width: 400, width: 400,
height: 300, height: 300,
}); });
const CenteredContainer = styled(FlexColumn)<{size: number}>(({size}) => ({
justifyContent: 'center',
alignItems: 'center',
width: size,
height: size,
}));
const Icon = styled(Glyph)({ const Icon = styled(Glyph)({
marginRight: 8, marginRight: 8,
marginLeft: 3, marginLeft: 3,
@@ -193,10 +200,14 @@ class BugReporterDialog extends Component<Props, State> {
}; };
onCancel = () => { onCancel = () => {
if (this.state.submitting) {
this.props.bugReporter.abort();
}
this.setState({ this.setState({
error: null, error: null,
title: '', title: '',
description: '', description: '',
submitting: false,
}); });
this.props.onHide(); this.props.onHide();
}; };
@@ -234,79 +245,90 @@ class BugReporterDialog extends Component<Props, State> {
</FlexCenter> </FlexCenter>
); );
} else { } else {
content = ( if (submitting) {
<Fragment> content = (
<Title>Report a bug in Flipper</Title> <Fragment>
<TitleInput <FlexCenter grow={true}>
placeholder="Title" <CenteredContainer size={200}>
value={title} <LoadingIndicator size={16} />
ref={this.setTitleRef} <Title> Submitting... </Title>
onChange={this.onTitleChange} </CenteredContainer>
disabled={submitting} </FlexCenter>
/> <Footer>
<SubmitButtonContainer>
<Button onClick={this.onCancel} disabled={false} compact padded>
Cancel
</Button>
</SubmitButtonContainer>
</Footer>
</Fragment>
);
} else {
content = (
<Fragment>
<Title>Report a bug in Flipper</Title>
<TitleInput
placeholder="Title"
value={title}
ref={this.setTitleRef}
onChange={this.onTitleChange}
/>
<DescriptionTextarea <DescriptionTextarea
placeholder="Describe your problem in as much detail as possible." placeholder="Describe your problem in as much detail as possible."
value={description} value={description}
ref={this.setDescriptionRef} ref={this.setDescriptionRef}
onChange={this.onDescriptionChange} onChange={this.onDescriptionChange}
disabled={submitting} />
/> {activePlugin && activePlugin.bugs && (
{activePlugin && activePlugin.bugs && ( <InfoBox>
<InfoBox> <Icon color={colors.light50} name="info-circle" />
<Icon color={colors.light50} name="info-circle" /> <span>
<span> If your bug is related to the{' '}
If your bug is related to the{' '} <strong>
<strong> {(activePlugin && activePlugin.title) || activePlugin.id}{' '}
{(activePlugin && activePlugin.title) || activePlugin.id}{' '} plugin
plugin </strong>
</strong> {activePlugin && activePlugin.bugs && activePlugin.bugs.url && (
{activePlugin && activePlugin.bugs && activePlugin.bugs.url && ( <span>
<span> , you might find useful information about it here:{' '}
, you might find useful information about it here:{' '} <Link href={activePlugin.bugs.url || ''}>
<Link href={activePlugin.bugs.url || ''}> {activePlugin.bugs.url}
{activePlugin.bugs.url} </Link>
</Link> </span>
</span> )}
)} {activePlugin &&
{activePlugin && activePlugin.bugs && activePlugin.bugs.email && ( activePlugin.bugs &&
<span> activePlugin.bugs.email && (
, you might also want contact{' '} <span>
<Link href={'mailto:' + String(activePlugin.bugs.email)}> , you might also want contact{' '}
{activePlugin.bugs.email} <Link
</Link> href={'mailto:' + String(activePlugin.bugs.email)}>
, the author/oncall of this plugin, directly {activePlugin.bugs.email}
</span> </Link>
)} , the author/oncall of this plugin, directly
. </span>
</span> )}
</InfoBox> .
)} </span>
</InfoBox>
)}
<Footer> <Footer>
{error != null && <Text color={colors.red}>{error}</Text>} {error != null && <Text color={colors.red}>{error}</Text>}
<SubmitButtonContainer> <SubmitButtonContainer>
<Button <Button onClick={this.onCancel} compact padded>
onClick={this.onCancel} Cancel
disabled={submitting} </Button>
compact <Button type="primary" onClick={this.onSubmit} compact padded>
padded> Submit Report
Cancel </Button>
</Button> </SubmitButtonContainer>
<Button </Footer>
type="primary" </Fragment>
onClick={this.onSubmit} );
disabled={submitting} }
compact
padded>
Submit Report
</Button>
</SubmitButtonContainer>
</Footer>
</Fragment>
);
} }
return <Container>{content}</Container>; return <Container>{content}</Container>;
} }
} }

3
desktop/app/src/fb-stubs/BugReporter.tsx
View File

@@ -12,6 +12,9 @@ import {Store} from '../reducers/index';
export default class BugReporter { export default class BugReporter {
constructor(_logManager: Logger, _store: Store) {} constructor(_logManager: Logger, _store: Store) {}
public abort() {
console.log('Stub implementation of an abort function.');
}
async report(_title: string, _body: string): Promise<number> { async report(_title: string, _body: string): Promise<number> {
return Promise.resolve(-1); return Promise.resolve(-1);
} }