(2.4) feat(feedback-ui): Add screenshots

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

@@ -39,6 +39,17 @@ const defaultStyles: FeedbackFormStyles = {
     textAlignVertical: 'top',
     color: FORGROUND_COLOR,
   },
+  screenshotButton: {
+    backgroundColor: '#eee',
+    padding: 15,
+    borderRadius: 5,
+    marginBottom: 20,
+    alignItems: 'center',
+  },
+  screenshotText: {
+    color: '#333',
+    fontSize: 16,
+  },
   submitButton: {
     backgroundColor: PURPLE,
     paddingVertical: 15,

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

@@ -68,6 +68,15 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
       return;
     }
 
+    const attachments = this.state.filename && this.state.attachment
+    ? [
+        {
+          filename: this.state.filename,
+          data: this.state.attachment,
+        },
+      ]
+    : undefined;
+
     const eventId = lastEventId();
     const userFeedback: SendFeedbackParams = {
       message: trimmedDescription,
@@ -78,7 +87,7 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
 
     try {
       this.setState({ isVisible: false });
-      captureFeedback(userFeedback);
+      captureFeedback(userFeedback, attachments ? { attachments } : undefined);
       onSubmitSuccess({ name: trimmedName, email: trimmedEmail, message: trimmedDescription, attachments: undefined });
       Alert.alert(text.successMessageText);
       onFormSubmitted();
@@ -90,6 +99,17 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
     }
   };
 
+  public onScreenshotButtonPress: () => void = () => {
+    if (!this.state.filename && !this.state.attachment) {
+      const { onAddScreenshot } = { ...defaultConfiguration, ...this.props };
+      onAddScreenshot((filename: string, attachement: Uint8Array) => {
+        this.setState({ filename, attachment: attachement });
+      });
+    } else {
+      this.setState({ filename: undefined, attachment: undefined });
+    }
+  }
+
   /**
    * Renders the feedback form screen.
    */
@@ -167,7 +187,15 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
                 onChangeText={(value) => this.setState({ description: value })}
                 multiline
               />
-
+              {config.enableScreenshot && (
+                <TouchableOpacity style={styles.screenshotButton} onPress={this.onScreenshotButtonPress}>
+                  <Text style={styles.screenshotText}>
+                  {!this.state.filename && !this.state.attachment
+                    ? text.addScreenshotButtonLabel
+                    : text.removeScreenshotButtonLabel}
+                  </Text>
+                </TouchableOpacity>
+              )}
               <TouchableOpacity style={styles.submitButton} onPress={this.handleFeedbackSubmit}>
                 <Text style={styles.submitText}>{text.submitButtonLabel}</Text>
               </TouchableOpacity>

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

@@ -44,6 +44,12 @@ export interface FeedbackGeneralConfiguration {
    */
   showName?: boolean;
 
+  /**
+   * This flag determines whether the "Add Screenshot" button is displayed
+   * @default false
+   */
+  enableScreenshot?: boolean;
+
   /**
    * Fill in email/name input fields with Sentry user context if it exists.
    * The value of the email/name keys represent the properties of your user context.
@@ -113,6 +119,16 @@ export interface FeedbackTextConfiguration {
    */
   isRequiredLabel?: string;
 
+  /**
+   * The label for the button that adds a screenshot and renders the image editor
+   */
+  addScreenshotButtonLabel?: string;
+
+  /**
+   * The label for the button that removes a screenshot and hides the image editor
+   */
+  removeScreenshotButtonLabel?: string;
+
   /**
    * The title of the error dialog
    */
@@ -148,6 +164,11 @@ export interface FeedbackCallbacks {
    */
   onFormClose?: () => void;
 
+  /**
+   * Callback when a screenshot is added
+   */
+  onAddScreenshot?: (attachFile: (filename: string, data: Uint8Array) => void) => void;
+
   /**
    * Callback when feedback is successfully submitted
    *
@@ -179,6 +200,8 @@ export interface FeedbackFormStyles {
   submitText?: TextStyle;
   cancelButton?: ViewStyle;
   cancelText?: TextStyle;
+  screenshotButton?: ViewStyle;
+  screenshotText?: TextStyle;
   titleContainer?: ViewStyle;
   sentryLogo?: ImageStyle;
 }
@@ -191,4 +214,6 @@ export interface FeedbackFormState {
   name: string;
   email: string;
   description: string;
+  filename?: string;
+  attachment?: string | Uint8Array;
 }

packages/core/src/js/feedback/defaults.ts

@@ -16,6 +16,8 @@ const ERROR_TITLE = 'Error';
 const FORM_ERROR = 'Please fill out all required fields.';
 const EMAIL_ERROR = 'Please enter a valid email address.';
 const SUCCESS_MESSAGE_TEXT = 'Thank you for your report!';
+const ADD_SCREENSHOT_LABEL = 'Add a screenshot';
+const REMOVE_SCREENSHOT_LABEL = 'Remove screenshot';
 const GENERIC_ERROR_TEXT = 'Unable to send feedback due to an unexpected error.';
 
 export const defaultConfiguration: Partial<FeedbackFormProps> = {
@@ -31,6 +33,11 @@ export const defaultConfiguration: Partial<FeedbackFormProps> = {
       );
     }
   },
+  onAddScreenshot: (_: (filename: string, data: Uint8Array) => void) => {
+    if (__DEV__) {
+      Alert.alert('Development note', 'onAddScreenshot callback is not implemented.');
+    }
+  },
   onSubmitSuccess: () => {
     // Does nothing by default
   },
@@ -53,6 +60,7 @@ export const defaultConfiguration: Partial<FeedbackFormProps> = {
   isNameRequired: false,
   showEmail: true,
   showName: true,
+  enableScreenshot: false,
 
   // FeedbackTextConfiguration
   cancelButtonLabel: CANCEL_BUTTON_LABEL,
@@ -69,5 +77,7 @@ export const defaultConfiguration: Partial<FeedbackFormProps> = {
   formError: FORM_ERROR,
   emailError: EMAIL_ERROR,
   successMessageText: SUCCESS_MESSAGE_TEXT,
+  addScreenshotButtonLabel: ADD_SCREENSHOT_LABEL,
+  removeScreenshotButtonLabel: REMOVE_SCREENSHOT_LABEL,
   genericError: GENERIC_ERROR_TEXT,
 };

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

@@ -7,6 +7,7 @@ import { FeedbackForm } from '../../src/js/feedback/FeedbackForm';
 import type { FeedbackFormProps, FeedbackFormStyles } from '../../src/js/feedback/FeedbackForm.types';
 
 const mockOnFormClose = jest.fn();
+const mockOnAddScreenshot = jest.fn();
 const mockOnSubmitSuccess = jest.fn();
 const mockOnFormSubmitted = jest.fn();
 const mockOnSubmitError = jest.fn();
@@ -28,9 +29,11 @@ jest.mock('@sentry/core', () => ({
 
 const defaultProps: FeedbackFormProps = {
   onFormClose: mockOnFormClose,
+  onAddScreenshot: mockOnAddScreenshot,
   onSubmitSuccess: mockOnSubmitSuccess,
   onFormSubmitted: mockOnFormSubmitted,
   onSubmitError: mockOnSubmitError,
+  addScreenshotButtonLabel: 'Add Screenshot',
   formTitle: 'Feedback Form',
   nameLabel: 'Name Label',
   namePlaceholder: 'Name Placeholder',
@@ -84,6 +87,13 @@ const customStyles: FeedbackFormStyles = {
     color: '#ff0000',
     fontSize: 10,
   },
+  screenshotButton: {
+    backgroundColor: '#00ff00',
+  },
+  screenshotText: {
+    color: '#0000ff',
+    fontSize: 13,
+  },
 };
 
 describe('FeedbackForm', () => {
@@ -107,8 +117,24 @@ describe('FeedbackForm', () => {
     expect(toJSON()).toMatchSnapshot();
   });
 
+  it('matches the snapshot with default configuration and screenshot button', () => {
+    const { toJSON } = render(<FeedbackForm enableScreenshot={true}/>);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('matches the snapshot with custom texts and screenshot button', () => {
+    const { toJSON } = render(<FeedbackForm {...defaultProps} enableScreenshot={true}/>);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('matches the snapshot with custom styles and screenshot button', () => {
+    const customStyleProps = {styles: customStyles};
+    const { toJSON } = render(<FeedbackForm {...customStyleProps} enableScreenshot={true}/>);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
   it('renders correctly', () => {
-    const { getByPlaceholderText, getByText, getByTestId } = render(<FeedbackForm {...defaultProps} />);
+    const { getByPlaceholderText, getByText, getByTestId, queryByText } = render(<FeedbackForm {...defaultProps} />);
 
     expect(getByText(defaultProps.formTitle)).toBeTruthy();
     expect(getByTestId('sentry-logo')).toBeTruthy(); // default showBranding is true
@@ -118,10 +144,17 @@ describe('FeedbackForm', () => {
     expect(getByPlaceholderText(defaultProps.emailPlaceholder)).toBeTruthy();
     expect(getByText(`${defaultProps.messageLabel } ${  defaultProps.isRequiredLabel}`)).toBeTruthy();
     expect(getByPlaceholderText(defaultProps.messagePlaceholder)).toBeTruthy();
+    expect(queryByText(defaultProps.addScreenshotButtonLabel)).toBeNull(); // default false
     expect(getByText(defaultProps.submitButtonLabel)).toBeTruthy();
     expect(getByText(defaultProps.cancelButtonLabel)).toBeTruthy();
   });
 
+  it('renders attachment button when the enableScreenshot is true', () => {
+    const { getByText } = render(<FeedbackForm {...defaultProps} enableScreenshot={true} />);
+
+    expect(getByText(defaultProps.addScreenshotButtonLabel)).toBeTruthy();
+  });
+
   it('does not render the sentry logo when showBranding is false', () => {
     const { queryByTestId } = render(<FeedbackForm {...defaultProps} showBranding={false} />);
 
@@ -188,7 +221,7 @@ describe('FeedbackForm', () => {
         message: 'This is a feedback message.',
         name: 'John Doe',
         email: '[email protected]',
-      });
+      }, undefined);
     });
   });
 
@@ -270,6 +303,16 @@ describe('FeedbackForm', () => {
     });
   });
 
+  it('calls onAddScreenshot when the screenshot button is pressed', async () => {
+    const { getByText } = render(<FeedbackForm {...defaultProps} enableScreenshot={true} />);
+
+    fireEvent.press(getByText(defaultProps.addScreenshotButtonLabel));
+
+    await waitFor(() => {
+      expect(mockOnAddScreenshot).toHaveBeenCalled();
+    });
+  });
+
   it('calls onFormClose when the cancel button is pressed', () => {
     const { getByText } = render(<FeedbackForm {...defaultProps} />);