diff --git a/packages/core/src/js/feedback/FeedbackFormManager.tsx b/packages/core/src/js/feedback/FeedbackFormManager.tsx index e69ac11e6c..4676f90258 100644 --- a/packages/core/src/js/feedback/FeedbackFormManager.tsx +++ b/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 { - diff --git a/packages/core/src/js/feedback/integration.ts b/packages/core/src/js/feedback/integration.ts new file mode 100644 index 0000000000..31fb463971 --- /dev/null +++ b/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; +}; + +let savedOptions: Partial = {}; + +export const feedbackIntegration = (initOptions: FeedbackFormProps = {}): FeedbackIntegration => { + savedOptions = initOptions; + + return { + name: FEEDBACK_FORM_INTEGRATION_NAME, + options: savedOptions, + }; +}; + +export const getFeedbackOptions = (): Partial => savedOptions; diff --git a/packages/core/src/js/integrations/exports.ts b/packages/core/src/js/integrations/exports.ts index dfc9e2c3e1..f5fabb397e 100644 --- a/packages/core/src/js/integrations/exports.ts +++ b/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'; diff --git a/packages/core/test/feedback/FeedbackFormManager.test.tsx b/packages/core/test/feedback/FeedbackFormManager.test.tsx index 7c93b9eb5a..9fe53af4c6 100644 --- a/packages/core/test/feedback/FeedbackFormManager.test.tsx +++ b/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( + + App Components + + ); + + 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( + + App Components + + ); + + 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 + }); }); diff --git a/samples/react-native/src/App.tsx b/samples/react-native/src/App.tsx index 2df2079c0b..a9e36e7fd5 100644 --- a/samples/react-native/src/App.tsx +++ b/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'); },