feat(feedback): Save form state for un-submitted data (#4538)

* Save form state for unsubmitted data

* Omit isVisible from state

* Save/clear form state on unmount

* Pass the missing attachment parameter in the onSubmitSuccess

* Use instance variable for _didSubmitForm

* Fixes lint issue

Author: antonis

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

@@ -33,6 +33,16 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
     ...defaultConfiguration
   }
 
+  private static _savedState: Omit<FeedbackWidgetState, 'isVisible'> = {
+    name: '',
+    email: '',
+    description: '',
+    filename: undefined,
+    attachment: undefined,
+  };
+
+  private _didSubmitForm: boolean = false;
+
   public constructor(props: FeedbackWidgetProps) {
     super(props);
 
@@ -45,9 +55,11 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
 
     this.state = {
       isVisible: true,
-      name: currentUser.useSentryUser.name,
-      email: currentUser.useSentryUser.email,
-      description: '',
+      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,
     };
   }
 
@@ -92,9 +104,10 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
         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._didSubmitForm = true;
     } catch (error) {
       const errorString = `Feedback form submission failed: ${error}`;
       onSubmitError(new Error(errorString));
@@ -152,6 +165,18 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
     }
   }
 
+  /**
+   * Save the state before unmounting the component.
+   */
+  public componentWillUnmount(): void {
+    if (this._didSubmitForm) {
+      this._clearFormState();
+      this._didSubmitForm = false;
+    } else {
+      this._saveFormState();
+    }
+  }
+
   /**
    * Renders the feedback form screen.
    */
@@ -259,4 +284,18 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
     </SafeAreaView>
     );
   }
+
+  private _saveFormState = (): void => {
+    FeedbackWidget._savedState = { ...this.state };
+  };
+
+  private _clearFormState = (): void => {
+    FeedbackWidget._savedState = {
+      name: '',
+      email: '',
+      description: '',
+      filename: undefined,
+      attachment: undefined,
+    };
+  };
 }

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

@@ -354,4 +354,51 @@ 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, 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));
+    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, 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));
+    unmount();
+    const { queryByPlaceholderText } = render(<FeedbackWidget {...defaultProps} />);
+
+    expect(queryByPlaceholderText(defaultProps.namePlaceholder).props.value).toBe('Test User');
+    expect(queryByPlaceholderText(defaultProps.emailPlaceholder).props.value).toBe('[email protected]');
+    expect(queryByPlaceholderText(defaultProps.messagePlaceholder).props.value).toBe('');
+  });
 });