diff --git a/packages/core/src/js/feedback/FeedbackForm.styles.ts b/packages/core/src/js/feedback/FeedbackForm.styles.ts index 0ab35584d..1a00f8fa1 100644 --- a/packages/core/src/js/feedback/FeedbackForm.styles.ts +++ b/packages/core/src/js/feedback/FeedbackForm.styles.ts @@ -15,7 +15,8 @@ const defaultStyles: FeedbackFormStyles = { fontSize: 24, fontWeight: 'bold', marginBottom: 20, - textAlign: 'center', + textAlign: 'left', + flex: 1, color: FORGROUND_COLOR, }, label: { @@ -57,6 +58,14 @@ const defaultStyles: FeedbackFormStyles = { color: FORGROUND_COLOR, fontSize: 16, }, + titleContainer: { + flexDirection: 'row', + width: '100%', + }, + sentryLogo: { + width: 40, + height: 40, + }, }; export default defaultStyles; diff --git a/packages/core/src/js/feedback/FeedbackForm.tsx b/packages/core/src/js/feedback/FeedbackForm.tsx index c978db83e..03eb24248 100644 --- a/packages/core/src/js/feedback/FeedbackForm.tsx +++ b/packages/core/src/js/feedback/FeedbackForm.tsx @@ -4,6 +4,7 @@ import * as React from 'react'; import type { KeyboardTypeOptions } from 'react-native'; import { Alert, + Image, Keyboard, KeyboardAvoidingView, SafeAreaView, @@ -15,6 +16,7 @@ import { View } from 'react-native'; +import { sentryLogo } from './branding'; import { defaultConfiguration } from './defaults'; import defaultStyles from './FeedbackForm.styles'; import type { FeedbackFormProps, FeedbackFormState, FeedbackFormStyles,FeedbackGeneralConfiguration, FeedbackTextConfiguration } from './FeedbackForm.types'; @@ -103,7 +105,16 @@ export class FeedbackForm extends React.Component - {text.formTitle} + + {text.formTitle} + {config.showBranding && ( + + )} + {config.showName && ( <> diff --git a/packages/core/src/js/feedback/FeedbackForm.types.ts b/packages/core/src/js/feedback/FeedbackForm.types.ts index 84078d8a6..9805e166c 100644 --- a/packages/core/src/js/feedback/FeedbackForm.types.ts +++ b/packages/core/src/js/feedback/FeedbackForm.types.ts @@ -1,5 +1,8 @@ -import type { TextStyle, ViewStyle } from 'react-native'; +import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'; +/** + * The props for the feedback form + */ export interface FeedbackFormProps extends FeedbackGeneralConfiguration, FeedbackTextConfiguration, FeedbackCallbacks { styles?: FeedbackFormStyles; } @@ -8,6 +11,13 @@ export interface FeedbackFormProps extends FeedbackGeneralConfiguration, Feedbac * General feedback configuration */ export interface FeedbackGeneralConfiguration { + /** + * Show the Sentry branding + * + * @default true + */ + showBranding?: boolean; + /** * Should the email field be required? */ @@ -128,6 +138,9 @@ export interface FeedbackCallbacks { onFormClose?: () => void; } +/** + * The styles for the feedback form + */ export interface FeedbackFormStyles { container?: ViewStyle; title?: TextStyle; @@ -138,8 +151,13 @@ export interface FeedbackFormStyles { submitText?: TextStyle; cancelButton?: ViewStyle; cancelText?: TextStyle; + titleContainer?: ViewStyle; + sentryLogo?: ImageStyle; } +/** + * The state of the feedback form + */ export interface FeedbackFormState { isVisible: boolean; name: string; diff --git a/packages/core/src/js/feedback/branding.ts b/packages/core/src/js/feedback/branding.ts new file mode 100644 index 000000000..5e3a98398 --- /dev/null +++ b/packages/core/src/js/feedback/branding.ts @@ -0,0 +1,5 @@ +/** + * Base64 encoded PNG image of the Sentry logo (source https://sentry.io/branding/) + */ +export const sentryLogo = + 'data:image/png;base64,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'; diff --git a/packages/core/src/js/feedback/defaults.ts b/packages/core/src/js/feedback/defaults.ts index ae8a3e957..f184c6263 100644 --- a/packages/core/src/js/feedback/defaults.ts +++ b/packages/core/src/js/feedback/defaults.ts @@ -29,6 +29,7 @@ export const defaultConfiguration: Partial = { }, // FeedbackGeneralConfiguration + showBranding: true, isEmailRequired: false, shouldValidateEmail: true, isNameRequired: false, diff --git a/packages/core/test/feedback/FeedbackForm.test.tsx b/packages/core/test/feedback/FeedbackForm.test.tsx index 272072f41..777cc0e29 100644 --- a/packages/core/test/feedback/FeedbackForm.test.tsx +++ b/packages/core/test/feedback/FeedbackForm.test.tsx @@ -45,9 +45,10 @@ describe('FeedbackForm', () => { }); it('renders correctly', () => { - const { getByPlaceholderText, getByText } = render(); + const { getByPlaceholderText, getByText, getByTestId } = render(); expect(getByText(defaultProps.formTitle)).toBeTruthy(); + expect(getByTestId('sentry-logo')).toBeTruthy(); // default showBranding is true expect(getByText(defaultProps.nameLabel)).toBeTruthy(); expect(getByPlaceholderText(defaultProps.namePlaceholder)).toBeTruthy(); expect(getByText(defaultProps.emailLabel)).toBeTruthy(); @@ -58,6 +59,12 @@ describe('FeedbackForm', () => { expect(getByText(defaultProps.cancelButtonLabel)).toBeTruthy(); }); + it('does not render the sentry logo when showBranding is false', () => { + const { queryByTestId } = render(); + + expect(queryByTestId('sentry-logo')).toBeNull(); + }); + it('name and email are prefilled when sentry user is set', () => { const { getByPlaceholderText } = render();