From 8b43393dc6a0baa943e2b4ff8d2b36babc378137 Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Thu, 13 Feb 2025 11:35:54 -0800
Subject: [PATCH 1/3] feat(feedback): Disable Feedback submit & cancel buttons
 while submitting

---
 packages/feedback/src/modal/components/Form.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/feedback/src/modal/components/Form.tsx b/packages/feedback/src/modal/components/Form.tsx
index a79e4d94194c..d2ba000a0657 100644
--- a/packages/feedback/src/modal/components/Form.tsx
+++ b/packages/feedback/src/modal/components/Form.tsx
@@ -61,6 +61,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);
 
@@ -97,6 +98,7 @@ export function Form({
 
   const handleSubmit = useCallback(
     async (e: JSX.TargetedSubmitEvent<HTMLFormElement>) => {
+      setIsSubmitting(true);
       try {
         e.preventDefault();
         if (!(e.target instanceof HTMLFormElement)) {
@@ -133,8 +135,8 @@ export function Form({
           setError(error as string);
           onSubmitError(error as Error);
         }
-      } catch {
-        // pass
+      } finally {
+        setIsSubmitting(false);
       }
     },
     [screenshotInput && showScreenshotInput, onSubmitSuccess, onSubmitError],
@@ -214,10 +216,10 @@ export function Form({
           ) : null}
         </div>
         <div class="btn-group">
-          <button class="btn btn--primary" type="submit">
+          <button class="btn btn--primary" type="submit" disabled={isSubmitting}>
             {submitButtonLabel}
           </button>
-          <button class="btn btn--default" type="button" onClick={onFormClose}>
+          <button class="btn btn--default" type="button" disabled={isSubmitting} onClick={onFormClose}>
             {cancelButtonLabel}
           </button>
         </div>

From af21ab607361f102df4be27d53351b57a7f2aacb Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Thu, 13 Feb 2025 12:04:57 -0800
Subject: [PATCH 2/3] disable all the form controls and buttons

---
 .../feedback/src/modal/components/Dialog.css.ts |  6 ++++++
 packages/feedback/src/modal/components/Form.tsx | 17 +++++++++++++----
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/packages/feedback/src/modal/components/Dialog.css.ts b/packages/feedback/src/modal/components/Dialog.css.ts
index 8459108d1fc2..b67cae1de13c 100644
--- a/packages/feedback/src/modal/components/Dialog.css.ts
+++ b/packages/feedback/src/modal/components/Dialog.css.ts
@@ -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;
diff --git a/packages/feedback/src/modal/components/Form.tsx b/packages/feedback/src/modal/components/Form.tsx
index d2ba000a0657..70435f4f7c8d 100644
--- a/packages/feedback/src/modal/components/Form.tsx
+++ b/packages/feedback/src/modal/components/Form.tsx
@@ -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,
@@ -114,6 +120,8 @@ export function Form({
           attachments: attachment ? [attachment] : undefined,
         };
 
+        await waitForSec(5);
+
         if (!hasAllRequiredFields(data)) {
           return;
         }
@@ -148,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}>
         <div class="form__top">
           {error ? <div class="form__error-container">{error}</div> : null}
 
@@ -203,6 +211,7 @@ export function Form({
             <label for="screenshot" class="form__label">
               <button
                 class="btn btn--default"
+                disabled={isSubmitting}
                 type="button"
                 onClick={() => {
                   setScreenshotError(null);
@@ -216,14 +225,14 @@ export function Form({
           ) : null}
         </div>
         <div class="btn-group">
-          <button class="btn btn--primary" type="submit" disabled={isSubmitting}>
+          <button class="btn btn--primary" disabled={isSubmitting} type="submit">
             {submitButtonLabel}
           </button>
-          <button class="btn btn--default" type="button" disabled={isSubmitting} onClick={onFormClose}>
+          <button class="btn btn--default" disabled={isSubmitting} type="button" onClick={onFormClose}>
             {cancelButtonLabel}
           </button>
         </div>
-      </div>
+      </fieldset>
     </form>
   );
 }

From 23c19bd1e0187f49896347f91dbafa7d71fd81a2 Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Thu, 13 Feb 2025 12:35:28 -0800
Subject: [PATCH 3/3] rm testing stuff

---
 packages/feedback/src/modal/components/Form.tsx | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/packages/feedback/src/modal/components/Form.tsx b/packages/feedback/src/modal/components/Form.tsx
index 70435f4f7c8d..3d508f895429 100644
--- a/packages/feedback/src/modal/components/Form.tsx
+++ b/packages/feedback/src/modal/components/Form.tsx
@@ -32,12 +32,6 @@ 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,
@@ -120,8 +114,6 @@ export function Form({
           attachments: attachment ? [attachment] : undefined,
         };
 
-        await waitForSec(5);
-
         if (!hasAllRequiredFields(data)) {
           return;
         }