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

* Update the client implementation to use the new capture feedback js api

* Updates SDK API

* Adds new feedback button in the sample

* Adds changelog

* Removes unused mock

* Update CHANGELOG.md

Co-authored-by: Krystof Woldrich <[email protected]>

* Directly use captureFeedback from sentry/core

* Use import from core

* Fixes imports order lint issue

* Fixes build issue

* Adds captureFeedback tests from sentry-javascript

* Update CHANGELOG.md

* Only deprecate client captureUserFeedback

* Add simple form UI

* Adds basic form functionality

* Update imports

* Update imports

* Remove useState hook to avoid multiple react instances issues

* Move types and styles in different files

* Removes attachment button to be added back separately along with the implementation

* Add basic field validation

* Adds changelog

* Updates changelog

* Updates changelog

* Trim whitespaces from the submitted feedback

* Adds tests

* Adds attachment button UI

* Adds changelog

* Add attachment handling based on the client implementation

* Reduce render method complexity

* Adds test for attachment button visibility

* Format code

* Pick image with react-native-image-picker

* Convert base64 string to Uint8Array before sending

* Updates changelog

* Renames FeedbackFormScreen to FeedbackForm

* Add beta label

* Extract default text to constants

* Moves constant to a separate file and aligns naming with JS

* Adds input text labels

* Close screen before sending the feedback to minimise wait time

Co-authored-by: LucasZF <[email protected]>

* Rename file for consistency

* Flatten configuration hierarchy and clean up

* Align required values with JS

* Use Sentry user email and name when set

* Simplifies email validation

* Show success alert message

* Aligns naming with JS and unmounts the form by default

* Use the minimum config without props in the changelog

* Adds development not for unimplemented function

* Show email and name conditionally

* Adds sentry branding (png logo)

* Adds sentry logo resource

* Add assets in module exports

* Revert "Add assets in module exports"

This reverts commit 5292475.

* Revert "Adds sentry logo resource"

This reverts commit d6e9229.

* Revert "Adds sentry branding (png logo)"

This reverts commit 8c56753.

* Add last event id

* Mock lastEventId

* Remove changelog

* Reverse unrelated change

* Adds beta note in the changelog

* Updates changelog

* Align colors with JS

* Update CHANGELOG.md

Co-authored-by: Krystof Woldrich <[email protected]>

* Update CHANGELOG.md

Co-authored-by: Krystof Woldrich <[email protected]>

* Update CHANGELOG.md

Co-authored-by: Krystof Woldrich <[email protected]>

* Use regular fonts for both buttons

* Handle keyboard properly

* Adds an option on whether the email should be validated

* Merge properties only once

* Loads current user data on form construction

* Remove unneeded extra padding

* Fix background color issue

* Fixes changelog typo

* Updates styles background color

Co-authored-by: Krystof Woldrich <[email protected]>

* Use defaultProps

* Correct defaultProps

* Adds test to verify when getUser is called

* Add default value in doc comment

Co-authored-by: LucasZF <[email protected]>

* Add a more clear doc comment

Co-authored-by: LucasZF <[email protected]>

* (2.2) feat: Add Feedback Form UI Branding logo (#4357)

* Adds sentry branding logo as a base64 encoded png

---------

Co-authored-by: LucasZF <[email protected]>

* Autoinject feedback form (#4370)

* Align changelog entry

* Update changelog

* Use AddScreenshot naming

* Allow only Uint8Array for screenshots

* Rename callback parameter

* Adds snapshot tests for screenshot button

* Rename screenshot button for clarity

* Use a library to get the Uint8Array

---------

Co-authored-by: Krystof Woldrich <[email protected]>
Co-authored-by: LucasZF <[email protected]>

Author: 3 people

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} />);