Skip to content

feat(feedback): Disable Feedback submit & cancel buttons while submitting #15408

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Feb 13, 2025
Merged

feat(feedback): Disable Feedback submit & cancel buttons while submitting #15408

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8b43393
feat(feedback): Disable Feedback submit & cancel buttons while submit…
ryan953 Feb 13, 2025
af21ab6
disable all the form controls and buttons
ryan953 Feb 13, 2025
23c19bd
rm testing stuff
ryan953 Feb 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions packages/feedback/src/modal/components/Dialog.css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,12 @@ const FORM = `
flex: 1 0;
}

.form fieldset {
border: none;
margin: 0;
padding: 0;
}

.form__right {
flex: 0 0 auto;
display: flex;
Expand Down
23 changes: 17 additions & 6 deletions packages/feedback/src/modal/components/Form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,12 @@ function retrieveStringValue(formData: FormData, key: string): string {
return '';
}

function waitForSec(seconds: number): Promise<void> {
return new Promise(resolve => {
setTimeout(resolve, seconds * 1000);
});
}

export function Form({
options,
defaultEmail,
Expand Down Expand Up @@ -61,6 +67,7 @@ export function Form({
submitButtonLabel,
isRequiredLabel,
} = options;
const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
// TODO: set a ref on the form, and whenever an input changes call processForm() and setError()
const [error, setError] = useState<null | string>(null);

Expand Down Expand Up @@ -97,6 +104,7 @@ export function Form({

const handleSubmit = useCallback(
async (e: JSX.TargetedSubmitEvent<HTMLFormElement>) => {
setIsSubmitting(true);
try {
e.preventDefault();
if (!(e.target instanceof HTMLFormElement)) {
Expand All @@ -112,6 +120,8 @@ export function Form({
attachments: attachment ? [attachment] : undefined,
};

await waitForSec(5);

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's this for?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

d'oh

for testing

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

speedup loop

if (!hasAllRequiredFields(data)) {
return;
}
Expand All @@ -133,8 +143,8 @@ export function Form({
setError(error as string);
onSubmitError(error as Error);
}
} catch {
// pass
} finally {
setIsSubmitting(false);
}
},
[screenshotInput && showScreenshotInput, onSubmitSuccess, onSubmitError],
Expand All @@ -146,7 +156,7 @@ export function Form({
<ScreenshotInputComponent onError={onScreenshotError} />
) : null}

<div class="form__right" data-sentry-feedback={true}>
<fieldset class="form__right" data-sentry-feedback={true} disabled={isSubmitting}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what does fieldset do?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it's a container for form controls. it's got some default padding&margin and a border too.

the reason that i brought it in is because it supports disabled which will prevent the text boxes from accepting input.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#attributes

It's not applying to our <button> inside the form tho, so i had to do those manually. I suspect, but didn't test, that it would automatically disable <input type="button"> or ` if we were using those instead. But i don't wanna change it all over.

<div class="form__top">
{error ? <div class="form__error-container">{error}</div> : null}

Expand Down Expand Up @@ -201,6 +211,7 @@ export function Form({
<label for="screenshot" class="form__label">
<button
class="btn btn--default"
disabled={isSubmitting}
type="button"
onClick={() => {
setScreenshotError(null);
Expand All @@ -214,14 +225,14 @@ export function Form({
) : null}
</div>
<div class="btn-group">
<button class="btn btn--primary" type="submit">
<button class="btn btn--primary" disabled={isSubmitting} type="submit">
{submitButtonLabel}
</button>
<button class="btn btn--default" type="button" onClick={onFormClose}>
<button class="btn btn--default" disabled={isSubmitting} type="button" onClick={onFormClose}>
{cancelButtonLabel}
</button>
</div>
</div>
</fieldset>
</form>
);
}
Expand Down
Loading