feat(feedback): Show selected screenshot

packages/core/src/js/feedback/FeedbackForm.styles.ts

@@ -45,8 +45,20 @@ const defaultStyles: FeedbackFormStyles = {
     backgroundColor: '#eee',
     padding: 15,
     borderRadius: 5,
-    marginBottom: 20,
     alignItems: 'center',
+    flex: 1,
+  },
+  screenshotContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: '100%',
+    marginBottom: 20,
+  },
+  screenshotThumbnail: {
+    width: 50,
+    height: 50,
+    borderRadius: 5,
+    marginRight: 10,
   },
   screenshotText: {
     color: '#333',

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

@@ -33,6 +33,16 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
     ...defaultConfiguration
   }
 
+  private static _savedState: FeedbackFormState = {
+    isVisible: false,
+    name: '',
+    email: '',
+    description: '',
+    filename: undefined,
+    attachment: undefined,
+    attachmentUri: undefined,
+  };
+
   public constructor(props: FeedbackFormProps) {
     super(props);
 
@@ -45,9 +55,12 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
 
     this.state = {
       isVisible: true,
-      name: currentUser.useSentryUser.name,
-      email: currentUser.useSentryUser.email,
-      description: '',
+      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,
     };
   }
 
@@ -93,6 +106,7 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
       onSubmitSuccess({ name: trimmedName, email: trimmedEmail, message: trimmedDescription, attachments: undefined });
       Alert.alert(text.successMessageText);
       onFormSubmitted();
+      this._clearFormState();
     } catch (error) {
       const errorString = `Feedback form submission failed: ${error}`;
       onSubmitError(new Error(errorString));
@@ -129,7 +143,7 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
           const imageUri = result.assets[0].uri;
           NATIVE.getDataFromUri(imageUri).then((data) => {
             if (data != null) {
-              this.setState({ filename, attachment: data });
+              this.setState({ filename, attachment: data, attachmentUri: imageUri }, this._saveFormState);
             } else {
               logger.error('Failed to read image data from uri:', imageUri);
             }
@@ -142,11 +156,12 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
         // Defaulting to the onAddScreenshot callback
         const { onAddScreenshot } = { ...defaultConfiguration, ...this.props };
         onAddScreenshot((filename: string, attachement: Uint8Array) => {
-          this.setState({ filename, attachment: attachement });
+          // TODO: Add support for image uri when using onAddScreenshot
+          this.setState({ filename, attachment: attachement, attachmentUri: undefined }, this._saveFormState);
         });
       }
     } else {
-      this.setState({ filename: undefined, attachment: undefined });
+      this.setState({ filename: undefined, attachment: undefined, attachmentUri: undefined }, this._saveFormState);
     }
   }
 
@@ -199,7 +214,7 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
                   style={styles.input}
                   placeholder={text.namePlaceholder}
                   value={name}
-                  onChangeText={(value) => this.setState({ name: value })}
+                  onChangeText={(value) => this.setState({ name: value }, this._saveFormState)}
                 />
               </>
               )}
@@ -215,7 +230,7 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
                   placeholder={text.emailPlaceholder}
                   keyboardType={'email-address' as KeyboardTypeOptions}
                   value={email}
-                  onChangeText={(value) => this.setState({ email: value })}
+                  onChangeText={(value) => this.setState({ email: value }, this._saveFormState)}
                 />
               </>
               )}
@@ -228,17 +243,25 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
                 style={[styles.input, styles.textArea]}
                 placeholder={text.messagePlaceholder}
                 value={description}
-                onChangeText={(value) => this.setState({ description: value })}
+                onChangeText={(value) => this.setState({ description: value }, this._saveFormState)}
                 multiline
               />
               {(config.enableScreenshot || imagePickerConfiguration.imagePicker) && (
-                <TouchableOpacity style={styles.screenshotButton} onPress={this.onScreenshotButtonPress}>
-                  <Text style={styles.screenshotText}>
-                  {!this.state.filename && !this.state.attachment
-                    ? text.addScreenshotButtonLabel
-                    : text.removeScreenshotButtonLabel}
-                  </Text>
-                </TouchableOpacity>
+                <View style={styles.screenshotContainer}>
+                  {this.state.attachmentUri && (
+                    <Image
+                      source={{ uri: this.state.attachmentUri }}
+                      style={styles.screenshotThumbnail}
+                    />
+                  )}
+                  <TouchableOpacity style={styles.screenshotButton} onPress={this.onScreenshotButtonPress}>
+                    <Text style={styles.screenshotText}>
+                      {!this.state.filename && !this.state.attachment
+                        ? text.addScreenshotButtonLabel
+                        : text.removeScreenshotButtonLabel}
+                    </Text>
+                  </TouchableOpacity>
+                </View>
               )}
               <TouchableOpacity style={styles.submitButton} onPress={this.handleFeedbackSubmit}>
                 <Text style={styles.submitText}>{text.submitButtonLabel}</Text>
@@ -254,4 +277,20 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
     </SafeAreaView>
     );
   }
+
+  private _saveFormState = (): void => {
+    FeedbackForm._savedState = { ...this.state };
+  };
+
+  private _clearFormState = (): void => {
+    FeedbackForm._savedState = {
+      isVisible: false,
+      name: '',
+      email: '',
+      description: '',
+      filename: undefined,
+      attachment: undefined,
+      attachmentUri: undefined,
+    };
+  };
 }

packages/core/src/js/feedback/FeedbackForm.types.ts

@@ -237,6 +237,8 @@ export interface FeedbackFormStyles {
   cancelButton?: ViewStyle;
   cancelText?: TextStyle;
   screenshotButton?: ViewStyle;
+  screenshotContainer?: ViewStyle;
+  screenshotThumbnail?: ImageStyle;
   screenshotText?: TextStyle;
   titleContainer?: ViewStyle;
   sentryLogo?: ImageStyle;
@@ -252,4 +254,5 @@ export interface FeedbackFormState {
   description: string;
   filename?: string;
   attachment?: string | Uint8Array;
+  attachmentUri?: string;
 }

packages/core/test/feedback/FeedbackForm.test.tsx

@@ -354,4 +354,34 @@ describe('FeedbackForm', () => {
 
     expect(mockOnFormClose).toHaveBeenCalled();
   });
+
+  it('onCancel the input is saved and restored when the form reopens', async () => {
+    const { getByPlaceholderText, getByText } = render(<FeedbackForm {...defaultProps} />);
+
+    fireEvent.changeText(getByPlaceholderText(defaultProps.namePlaceholder), 'John Doe');
+    fireEvent.changeText(getByPlaceholderText(defaultProps.emailPlaceholder), 'john.doe@example.com');
+    fireEvent.changeText(getByPlaceholderText(defaultProps.messagePlaceholder), 'This is a feedback message.');
+
+    fireEvent.press(getByText(defaultProps.cancelButtonLabel));
+    const { queryByPlaceholderText } = render(<FeedbackForm {...defaultProps} />);
+
+    expect(queryByPlaceholderText(defaultProps.namePlaceholder).props.value).toBe('John Doe');
+    expect(queryByPlaceholderText(defaultProps.emailPlaceholder).props.value).toBe('john.doe@example.com');
+    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} />);
+
+    fireEvent.changeText(getByPlaceholderText(defaultProps.namePlaceholder), 'John Doe');
+    fireEvent.changeText(getByPlaceholderText(defaultProps.emailPlaceholder), 'john.doe@example.com');
+    fireEvent.changeText(getByPlaceholderText(defaultProps.messagePlaceholder), 'This is a feedback message.');
+
+    fireEvent.press(getByText(defaultProps.submitButtonLabel));
+    const { queryByPlaceholderText } = render(<FeedbackForm {...defaultProps} />);
+
+    expect(queryByPlaceholderText(defaultProps.namePlaceholder).props.value).toBe('Test User');
+    expect(queryByPlaceholderText(defaultProps.emailPlaceholder).props.value).toBe('test@example.com');
+    expect(queryByPlaceholderText(defaultProps.messagePlaceholder).props.value).toBe('');
+  });
 });