misc(feedback): Improve Feedback Sheet interactions

packages/core/src/js/feedback/FeedbackWidget.tsx

@@ -33,8 +33,8 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
     ...defaultConfiguration
   }
 
-  private static _savedState: FeedbackFormState = {
-    isVisible: false,
+  private static _didSubmitForm: boolean = false;
+  private static _savedState: Omit<FeedbackWidgetState, 'isVisible'> = {
     name: '',
     email: '',
     description: '',
@@ -43,7 +43,7 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
     attachmentUri: undefined,
   };
 
-  public constructor(props: FeedbackFormProps) {
+  public constructor(props: FeedbackWidgetProps) {
     super(props);
 
     const currentUser = {
@@ -55,12 +55,12 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
 
     this.state = {
       isVisible: true,
-      name: FeedbackForm._savedState.name || currentUser.useSentryUser.name,
-      email: FeedbackForm._savedState.email || currentUser.useSentryUser.email,
-      description: FeedbackForm._savedState.description || '',
-      filename: FeedbackForm._savedState.filename || undefined,
-      attachment: FeedbackForm._savedState.attachment || undefined,
-      attachmentUri: FeedbackForm._savedState.attachmentUri || undefined,
+      name: FeedbackWidget._savedState.name || currentUser.useSentryUser.name,
+      email: FeedbackWidget._savedState.email || currentUser.useSentryUser.email,
+      description: FeedbackWidget._savedState.description || '',
+      filename: FeedbackWidget._savedState.filename || undefined,
+      attachment: FeedbackWidget._savedState.attachment || undefined,
+      attachmentUri: FeedbackWidget._savedState.attachmentUri || undefined,
     };
   }
 
@@ -103,10 +103,10 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
     try {
       this.setState({ isVisible: false });
       captureFeedback(userFeedback, attachments ? { attachments } : undefined);
-      onSubmitSuccess({ name: trimmedName, email: trimmedEmail, message: trimmedDescription, attachments: undefined });
+      onSubmitSuccess({ name: trimmedName, email: trimmedEmail, message: trimmedDescription, attachments: attachments });
       Alert.alert(text.successMessageText);
       onFormSubmitted();
-      this._clearFormState();
+      FeedbackWidget._didSubmitForm = true;
     } catch (error) {
       const errorString = `Feedback form submission failed: ${error}`;
       onSubmitError(new Error(errorString));
@@ -143,25 +143,37 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
           const imageUri = result.assets[0].uri;
           NATIVE.getDataFromUri(imageUri).then((data) => {
             if (data != null) {
-              this.setState({ filename, attachment: data, attachmentUri: imageUri }, this._saveFormState);
+              this.setState({ filename, attachment: data, attachmentUri: imageUri });
             } else {
               logger.error('Failed to read image data from uri:', imageUri);
             }
           })
-          .catch((error) => {
-            logger.error('Failed to read image data from uri:', imageUri, 'error: ', error);
-          });
+            .catch((error) => {
+              logger.error('Failed to read image data from uri:', imageUri, 'error: ', error);
+            });
         }
       } else {
         // Defaulting to the onAddScreenshot callback
         const { onAddScreenshot } = { ...defaultConfiguration, ...this.props };
         onAddScreenshot((filename: string, attachement: Uint8Array) => {
           // TODO: Add support for image uri when using onAddScreenshot
-          this.setState({ filename, attachment: attachement, attachmentUri: undefined }, this._saveFormState);
+          this.setState({ filename, attachment: attachement, attachmentUri: undefined });
         });
       }
     } else {
-      this.setState({ filename: undefined, attachment: undefined, attachmentUri: undefined }, this._saveFormState);
+      this.setState({ filename: undefined, attachment: undefined, attachmentUri: undefined });
+    }
+  }
+
+  /**
+   * Save the state before unmounting the component.
+   */
+  public componentWillUnmount(): void {
+    if (FeedbackWidget._didSubmitForm) {
+      this._clearFormState();
+      FeedbackWidget._didSubmitForm = false;
+    } else {
+      this._saveFormState();
     }
   }
 
@@ -214,7 +226,7 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
                   style={styles.input}
                   placeholder={text.namePlaceholder}
                   value={name}
-                  onChangeText={(value) => this.setState({ name: value }, this._saveFormState)}
+                  onChangeText={(value) => this.setState({ name: value })}
                 />
               </>
               )}
@@ -230,7 +242,7 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
                   placeholder={text.emailPlaceholder}
                   keyboardType={'email-address' as KeyboardTypeOptions}
                   value={email}
-                  onChangeText={(value) => this.setState({ email: value }, this._saveFormState)}
+                  onChangeText={(value) => this.setState({ email: value })}
                 />
               </>
               )}
@@ -243,7 +255,7 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
                 style={[styles.input, styles.textArea]}
                 placeholder={text.messagePlaceholder}
                 value={description}
-                onChangeText={(value) => this.setState({ description: value }, this._saveFormState)}
+                onChangeText={(value) => this.setState({ description: value })}
                 multiline
               />
               {(config.enableScreenshot || imagePickerConfiguration.imagePicker) && (
@@ -279,12 +291,11 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
   }
 
   private _saveFormState = (): void => {
-    FeedbackForm._savedState = { ...this.state };
+    FeedbackWidget._savedState = { ...this.state };
   };
 
   private _clearFormState = (): void => {
-    FeedbackForm._savedState = {
-      isVisible: false,
+    FeedbackWidget._savedState = {
       name: '',
       email: '',
       description: '',

packages/core/test/feedback/FeedbackWidget.test.tsx

@@ -355,30 +355,47 @@ describe('FeedbackWidget', () => {
     expect(mockOnFormClose).toHaveBeenCalled();
   });
 
+  it('onUnmount the input is saved and restored when the form reopens', async () => {
+    const { getByPlaceholderText, unmount } = render(<FeedbackWidget {...defaultProps} />);
+
+    fireEvent.changeText(getByPlaceholderText(defaultProps.namePlaceholder), 'John Doe');
+    fireEvent.changeText(getByPlaceholderText(defaultProps.emailPlaceholder), '[email protected]');
+    fireEvent.changeText(getByPlaceholderText(defaultProps.messagePlaceholder), 'This is a feedback message.');
+
+    unmount();
+    const { queryByPlaceholderText } = render(<FeedbackWidget {...defaultProps} />);
+
+    expect(queryByPlaceholderText(defaultProps.namePlaceholder).props.value).toBe('John Doe');
+    expect(queryByPlaceholderText(defaultProps.emailPlaceholder).props.value).toBe('[email protected]');
+    expect(queryByPlaceholderText(defaultProps.messagePlaceholder).props.value).toBe('This is a feedback message.');
+  });
+
   it('onCancel the input is saved and restored when the form reopens', async () => {
-    const { getByPlaceholderText, getByText } = render(<FeedbackForm {...defaultProps} />);
+    const { getByPlaceholderText, getByText, unmount } = render(<FeedbackWidget {...defaultProps} />);
 
     fireEvent.changeText(getByPlaceholderText(defaultProps.namePlaceholder), 'John Doe');
     fireEvent.changeText(getByPlaceholderText(defaultProps.emailPlaceholder), '[email protected]');
     fireEvent.changeText(getByPlaceholderText(defaultProps.messagePlaceholder), 'This is a feedback message.');
 
     fireEvent.press(getByText(defaultProps.cancelButtonLabel));
-    const { queryByPlaceholderText } = render(<FeedbackForm {...defaultProps} />);
+    unmount();
+    const { queryByPlaceholderText } = render(<FeedbackWidget {...defaultProps} />);
 
     expect(queryByPlaceholderText(defaultProps.namePlaceholder).props.value).toBe('John Doe');
     expect(queryByPlaceholderText(defaultProps.emailPlaceholder).props.value).toBe('[email protected]');
     expect(queryByPlaceholderText(defaultProps.messagePlaceholder).props.value).toBe('This is a feedback message.');
   });
 
   it('onSubmit the saved input is cleared and not restored when the form reopens', async () => {
-    const { getByPlaceholderText, getByText } = render(<FeedbackForm {...defaultProps} />);
+    const { getByPlaceholderText, getByText, unmount } = render(<FeedbackWidget {...defaultProps} />);
 
     fireEvent.changeText(getByPlaceholderText(defaultProps.namePlaceholder), 'John Doe');
     fireEvent.changeText(getByPlaceholderText(defaultProps.emailPlaceholder), '[email protected]');
     fireEvent.changeText(getByPlaceholderText(defaultProps.messagePlaceholder), 'This is a feedback message.');
 
     fireEvent.press(getByText(defaultProps.submitButtonLabel));
-    const { queryByPlaceholderText } = render(<FeedbackForm {...defaultProps} />);
+    unmount();
+    const { queryByPlaceholderText } = render(<FeedbackWidget {...defaultProps} />);
 
     expect(queryByPlaceholderText(defaultProps.namePlaceholder).props.value).toBe('Test User');
     expect(queryByPlaceholderText(defaultProps.emailPlaceholder).props.value).toBe('[email protected]');