Adds feedbackIntegration for configuring the feedback form (#4485)

---------

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

Author: 3 people

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

@@ -5,6 +5,7 @@ import { Modal, View } from 'react-native';
 import { FeedbackForm } from './FeedbackForm';
 import defaultStyles from './FeedbackForm.styles';
 import type { FeedbackFormStyles } from './FeedbackForm.types';
+import { getFeedbackOptions } from './integration';
 import { isModalSupported } from './utils';
 
 class FeedbackFormManager {
@@ -70,7 +71,7 @@ class FeedbackFormProvider extends React.Component<FeedbackFormProviderProps> {
           <View>
             <Modal visible={isVisible} transparent animationType="slide" onRequestClose={this._handleClose} testID="feedback-form-modal">
               <View style={styles.modalBackground}>
-                <FeedbackForm
+                <FeedbackForm {...getFeedbackOptions()}
                   onFormClose={this._handleClose}
                   onFormSubmitted={this._handleClose}
                 />

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

@@ -0,0 +1,22 @@
+import type { Integration } from '@sentry/core';
+
+import type { FeedbackFormProps } from './FeedbackForm.types';
+
+export const FEEDBACK_FORM_INTEGRATION_NAME = 'MobileFeedback';
+
+type FeedbackIntegration = Integration & {
+  options: Partial<FeedbackFormProps>;
+};
+
+let savedOptions: Partial<FeedbackFormProps> = {};
+
+export const feedbackIntegration = (initOptions: FeedbackFormProps = {}): FeedbackIntegration => {
+  savedOptions = initOptions;
+
+  return {
+    name: FEEDBACK_FORM_INTEGRATION_NAME,
+    options: savedOptions,
+  };
+};
+
+export const getFeedbackOptions = (): Partial<FeedbackFormProps> => savedOptions;

packages/core/src/js/integrations/exports.ts

@@ -13,6 +13,7 @@ export { viewHierarchyIntegration } from './viewhierarchy';
 export { expoContextIntegration } from './expocontext';
 export { spotlightIntegration } from './spotlight';
 export { mobileReplayIntegration } from '../replay/mobilereplay';
+export { feedbackIntegration } from '../feedback/integration';
 export { browserReplayIntegration } from '../replay/browserReplay';
 export { appStartIntegration } from '../tracing/integrations/appStart';
 export { nativeFramesIntegration, createNativeFramesIntegrations } from '../tracing/integrations/nativeFrames';

packages/core/test/feedback/FeedbackFormManager.test.tsx

@@ -3,7 +3,9 @@ import { render } from '@testing-library/react-native';
 import * as React from 'react';
 import { Text } from 'react-native';
 
+import { defaultConfiguration } from '../../src/js/feedback/defaults';
 import { FeedbackFormProvider, showFeedbackForm } from '../../src/js/feedback/FeedbackFormManager';
+import { feedbackIntegration } from '../../src/js/feedback/integration';
 import { isModalSupported } from '../../src/js/feedback/utils';
 
 jest.mock('../../src/js/feedback/utils', () => ({
@@ -53,4 +55,42 @@ describe('FeedbackFormManager', () => {
       showFeedbackForm();
     }).not.toThrow();
   });
+
+  it('showFeedbackForm displays the form with the feedbackIntegration options', () => {
+    mockedIsModalSupported.mockReturnValue(true);
+    const { getByPlaceholderText, getByText } = render(
+      <FeedbackFormProvider>
+        <Text>App Components</Text>
+      </FeedbackFormProvider>
+    );
+
+    feedbackIntegration({
+      messagePlaceholder: 'Custom Message Placeholder',
+      submitButtonLabel: 'Custom Submit Button',
+    });
+
+    showFeedbackForm();
+
+    expect(getByPlaceholderText('Custom Message Placeholder')).toBeTruthy();
+    expect(getByText('Custom Submit Button')).toBeTruthy();
+  });
+
+  it('showFeedbackForm displays the form with the feedbackIntegration options merged with the defaults', () => {
+    mockedIsModalSupported.mockReturnValue(true);
+    const { getByPlaceholderText, getByText, queryByText } = render(
+      <FeedbackFormProvider>
+        <Text>App Components</Text>
+      </FeedbackFormProvider>
+    );
+
+    feedbackIntegration({
+      submitButtonLabel: 'Custom Submit Button',
+    }),
+
+    showFeedbackForm();
+
+    expect(queryByText(defaultConfiguration.submitButtonLabel)).toBeFalsy(); // overridden value
+    expect(getByText('Custom Submit Button')).toBeTruthy(); // overridden value
+    expect(getByPlaceholderText(defaultConfiguration.messagePlaceholder)).toBeTruthy(); // default configuration value
+  });
 });

samples/react-native/src/App.tsx

@@ -106,6 +106,18 @@ Sentry.init({
           ? false
           : true,
       }),
+      Sentry.feedbackIntegration({
+        styles:{
+          submitButton: {
+            backgroundColor: '#6a1b9a',
+            paddingVertical: 15,
+            borderRadius: 5,
+            alignItems: 'center',
+            marginBottom: 10,
+          },
+        },
+        namePlaceholder: 'Fullname',
+      }),
     );
     return integrations.filter(i => i.name !== 'Dedupe');
   },