(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]>

Author: antonis

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;

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';
@@ -104,7 +106,16 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
         <ScrollView>
           <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
             <View style={styles.container}>
-              <Text style={styles.title}>{text.formTitle}</Text>
+              <View style={styles.titleContainer}>
+                <Text style={styles.title}>{text.formTitle}</Text>
+                {config.showBranding && (
+                  <Image
+                    source={{ uri: sentryLogo }}
+                    style={styles.sentryLogo}
+                    testID='sentry-logo'
+                  />
+                )}
+              </View>
 
               {config.showName && (
               <>

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;

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,iVBORw0KGgoAAAANSUhEUgAAAMgAAAC4BAMAAABUVL5sAAAAD1BMVEUAAAA2Llo3LVk4LFg2LVmgcvrUAAAABHRSTlMAgL9ARyeO/QAAA7pJREFUeNrtWltynDAQFBIHIFUcgCQ6AIk5AAjd/0ypxFk3ouUCNJofl/rHy75a09MzI7Q2DQ0NDQ0NDQ0NDQ0N9eF+xPh9MKpwPv6FLss7R9yMImz8j8nowb9IglFDF6N+KCNIdqMFcGjpBbVUXdzHqKsXUhJGNb2g1vz6azRgX8XulUwMtVZjFsWkvFz10s0ooEO+9Vpxj/6rp9eI5VsdE6eJcDCxilqICiZWMHBSMkBVA2vq1SVrVyr6Ea5VMjHqjytTwcAgRVJ0DAy9VoWUTNT3tQysZGIYmGNTKHfK0q6oFkysYWCuHB0DaxX9yHLx5JKrhVC0TGwjWNRMvNAuW6PoR4TCepnqLLuiicEyKJq4g2C6Rc+hsInlgtHCF41OrD65INisObksbKy2/YJg9U08sGBTbRN3YaBQQu2i74/mcQil6vZr5C0dQpGbGKJvdOA1VDVxd5LHooPR5BJPdwql5vaLeq9FQZKJpa1kOoUSKpq45+m+ZK93aUpSwRyuafslUguCIZRZamKoBYQT80QmlqnF38p6bSIDcyg2q5fw/uo8dx0upZMLLdadQ1kgkNDEOOGiYYXjVKGJ8V00rEggcErurxAKCwQTi9RCAW7UFcUm5vPAOFNXFBY9DggQyp76jnIkOyBwaeqtyMScEu7w4JRNLnyQOjyvACcWpR145g6PV1fp9mvE0jMd3tWZXDR3/Ud2cSXZfmHhvNpEoFlgYsjFHX4AJc3kXXSTyEfDTrz94ptE1qvS9ouG1Ud2sQT5PVcHg3FL78FIYUpqxWK1yLzMxNzhHVaLzItMzB0eB/S4CDRHC+AzFTjhAiSSHx9tpgJXqnmhXi7VizM/F5v4V5oVqOIp81PpEW4Xt7PUA0kEe5WZ2PLt7ZopDg8Seue9GpxoU0WrHyFPgYlzmyrKPDxcpFeX3YRS5mGvxybmsC2tPhLJQxPzdsfliwMeLjAx9wcujoFIaEAX/KSYXz0s+9TE/E7LX0yF8lQvitl99sVjSgITl/yk6Lk48JjfGadnanHml8xjMvFTA+eL42CRwDKEZwbm4rBMyAmdH6UEz8HDTPj4d4ie1EJxJCQg56DXaxKOl0iGz0jcdebZluzhbFSA1yEZ2JzbHZKQe3I/EK4CErTHbwn84ZP+8Poxqrd/+I2cXJAw0v9VAkBiI3DhLryZEe6SXNeJk5HcHFu+Aom5wiIn2a7niZiE1WKMUhIOhNFJSQZzh0VG8tPcQufLSQI46sO9vcM0NDQ0NDQ0NDQ0NHxF/AFGJOBYBWrb5gAAAABJRU5ErkJggg==';

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

@@ -29,6 +29,7 @@ export const defaultConfiguration: Partial<FeedbackFormProps> = {
   },
 
   // FeedbackGeneralConfiguration
+  showBranding: true,
   isEmailRequired: false,
   shouldValidateEmail: true,
   isNameRequired: false,

packages/core/test/feedback/FeedbackForm.test.tsx

@@ -46,9 +46,10 @@ describe('FeedbackForm', () => {
   });
 
   it('renders correctly', () => {
-    const { getByPlaceholderText, getByText } = render(<FeedbackForm {...defaultProps} />);
+    const { getByPlaceholderText, getByText, getByTestId } = render(<FeedbackForm {...defaultProps} />);
 
     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();
@@ -59,6 +60,12 @@ describe('FeedbackForm', () => {
     expect(getByText(defaultProps.cancelButtonLabel)).toBeTruthy();
   });
 
+  it('does not render the sentry logo when showBranding is false', () => {
+    const { queryByTestId } = render(<FeedbackForm {...defaultProps} showBranding={false} />);
+
+    expect(queryByTestId('sentry-logo')).toBeNull();
+  });
+
   it('name and email are prefilled when sentry user is set', () => {
     const { getByPlaceholderText } = render(<FeedbackForm {...defaultProps} />);