Adds feedbackIntegration for configuring the feedback form

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');
  },