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