Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

(2.2) feat: Add Feedback Form UI Branding logo #4357

Merged
merged 11 commits into from
Dec 19, 2024
Merged

(2.2) feat: Add Feedback Form UI Branding logo #4357

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
b6953a3
Adds sentry branding (png logo)
antonis Dec 11, 2024
d22d660
Merge branch 'antonis/3859-newCaptureFeedbackAPI-Form' into antonis/3…
antonis Dec 12, 2024
c02d84f
Merge branch 'antonis/3859-newCaptureFeedbackAPI-Form' into antonis/3…
antonis Dec 13, 2024
61e4d4d
Use network resource to avoid packaging issues
antonis Dec 13, 2024
fbb402b
Adds test
antonis Dec 13, 2024
bb79879
Add default value in the doc comment
antonis Dec 13, 2024
1350545
Merge branch 'antonis/3859-newCaptureFeedbackAPI-Form' into antonis/3…
antonis Dec 13, 2024
727a423
Embeds sentry logo as a base64 encoded png
antonis Dec 16, 2024
449a803
Merge branch 'antonis/3859-newCaptureFeedbackAPI-Form' into antonis/3…
antonis Dec 17, 2024
c6dff03
Use smaller image
antonis Dec 18, 2024
b668999
Merge branch 'antonis/3859-newCaptureFeedbackAPI-Form' into antonis/3…
antonis Dec 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion packages/core/src/js/feedback/FeedbackForm.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ const defaultStyles: FeedbackFormStyles = {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 20,
textAlign: 'center',
textAlign: 'left',
flex: 1,
},
label: {
marginBottom: 4,
Expand Down Expand Up @@ -49,6 +50,14 @@ const defaultStyles: FeedbackFormStyles = {
color: '#6a1b9a',
fontSize: 16,
},
titleContainer: {
flexDirection: 'row',
width: '100%',
},
sentryLogo: {
width: 40,
height: 40,
},
};

export default defaultStyles;
13 changes: 11 additions & 2 deletions packages/core/src/js/feedback/FeedbackForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { captureFeedback, lastEventId } from '@sentry/core';
import type { SendFeedbackParams } from '@sentry/types';
import * as React from 'react';
import type { KeyboardTypeOptions } from 'react-native';
import { Alert, Text, TextInput, TouchableOpacity, View } from 'react-native';
import { Alert, Image, Text, TextInput, TouchableOpacity, View } from 'react-native';

import { defaultConfiguration } from './defaults';
import defaultStyles from './FeedbackForm.styles';
Expand Down Expand Up @@ -80,7 +80,16 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor

return (
<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
lucas-zimerman marked this conversation as resolved.
Show resolved Hide resolved
source={{ uri: 'https://sentry-brand.storage.googleapis.com/sentry-glyph-black.png' }}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's include logo locally.

I'm not sure who in Sentry owns this storage but it could be gone any time.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's a good point @krystofwoldrich 👍
I actually tried this (61e4d4d) but run into errors with packaging. I'll revisit my approach.

Copy link
Collaborator Author

@antonis antonis Dec 16, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated with 727a423 to include the logo as a base64 encoded image locally.
I've tried including it as a resource in the assets folder but run into issues with rendering on Android and the end packaging in the SDK.

style={styles.sentryLogo}
testID='sentry-logo'
/>
)}
</View>

{config.showName && (
<>
Expand Down
20 changes: 19 additions & 1 deletion packages/core/src/js/feedback/FeedbackForm.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
Expand All @@ -8,6 +11,13 @@ export interface FeedbackFormProps extends FeedbackGeneralConfiguration, Feedbac
* General feedback configuration
*/
export interface FeedbackGeneralConfiguration {
/**
* Show the Sentry branding
*
antonis marked this conversation as resolved.
Show resolved Hide resolved
* @default true
*/
showBranding?: boolean;

/**
* Should the email field be required?
*/
Expand Down Expand Up @@ -123,6 +133,9 @@ export interface FeedbackCallbacks {
onFormClose?: () => void;
}

/**
* The styles for the feedback form
*/
export interface FeedbackFormStyles {
container?: ViewStyle;
title?: TextStyle;
Expand All @@ -133,8 +146,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;
Expand Down
1 change: 1 addition & 0 deletions packages/core/src/js/feedback/defaults.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ export const defaultConfiguration: Partial<FeedbackFormProps> = {
},

// FeedbackGeneralConfiguration
showBranding: true,
isEmailRequired: false,
isNameRequired: false,
showEmail: true,
Expand Down
9 changes: 8 additions & 1 deletion packages/core/test/feedback/FeedbackForm.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,9 +45,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();
Expand All @@ -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(<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} />);

Expand Down
Loading