From b6953a305c1232a141e50b6444c6dcb86a049a2a Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Wed, 11 Dec 2024 16:38:05 +0200 Subject: [PATCH 1/4] Adds sentry branding (png logo) --- packages/core/assets/sentrylogo.png | Bin 0 -> 3476 bytes .../src/js/feedback/FeedbackForm.styles.ts | 11 ++++++++++- .../core/src/js/feedback/FeedbackForm.tsx | 9 +++++++-- .../src/js/feedback/FeedbackForm.types.ts | 18 +++++++++++++++++- packages/core/src/js/feedback/defaults.ts | 1 + .../core/test/feedback/FeedbackForm.test.tsx | 1 + 6 files changed, 36 insertions(+), 4 deletions(-) create mode 100644 packages/core/assets/sentrylogo.png diff --git a/packages/core/assets/sentrylogo.png b/packages/core/assets/sentrylogo.png new file mode 100644 index 0000000000000000000000000000000000000000..610c3e0ff0ae9cf4e8075bd17570270458c0c2a4 GIT binary patch literal 3476 zcmcha`8(9#`^R7Nni zI>^42En8xwY)Mf+1GXXL7$h2%*ky#p;Cf)OSuq>*T*%7`k{Aw(J4)@F=P~y}&f!E5q~pw1vT{K% z{-sqdpDhs9~IXTW=laO*+zx605K{b4rI;#`{eWMh@JJ%8ezyrJ=pi~0P;<}m8nK4*h1ukx|vU?w0inprBxd5{+; z8BtFqS?4;C3^P1uC!G*0zZgcsEhTDX_`@7Wzw(XJ$YBQ)P^J|7UQ_M%PJ7hPUuw4O zcN0JU=>JJLRnm%KQl?HhGVu44%{nDF;+zg@PA1=)=y2k-urHs8Y$?((bYYuwo}|c) zsmwT9a+V)Su_%LMCST8#LDlq$1NmdfflVKA)ly6AzT-Q1@M&j{mdwgO0<`9=cX$)W zr=8~WqF}t(g%cXg`W79*Yc{;lqlkt28;N{tElPF zR&Jd|p8{xmO(nXskpGgE%aqN%F1%i<=NMR#X zzwCO}@_JKI_jaXCJJZpaJ%05XxvjhW!MOWA`*J${QY9hV%M8Dj{b)sGc5~xh{t^p#V~I`7TK)UN9mCRc|l3HPHzXF~kN{AAmNa)|8$vA5@my zwwVrS12xuMSQ#H&$fgu&n3k6FT3}t{LP`>{yxev{?Y5Jl5E zZ6g)^6G!xdh6)fh}mSGVx52SV@pDk5JiMhcx&M%D{50`1;xpLR(n=*np3vSb9s(rqen-Ez>vHF3Q`C-+P+qO=c&>?LS*FXJ^8hNQ_ceK zr>Jf(Ce;h^(8TL$KX-k4uy?K;ZvWC=$uP8#XO(^V^#&?!8#4V;p|{Ad+!V1Y`w=Z5 zQ(}F>r>BnU{U>j{6cJOqu75(G?^n$gIw6B!*)l(3b@0lwFZG(`mp9v9f?cSoOyTV2 zw|C-eIt#|mY#D4^+o^-K#y)%-guhB3JE@OXuWdK0W@_a1ITxxUT7Rn|Jirx-=1@hw zUbj-fIdpl{gYnyv905#(cKgemSMf!Z!MMCBC8=uX<3Vpf0VG+M9}WYk<=PK7FC#ZC zX`RWGDmx7&|qcJ(Y**E)8Lkr3lU$uTJ zetm~k7PG8c_7wK7`d*AcC7jLKuM20L-iey~`K_;!^Tm0wp!1nBY%!fxOBF?wTfJ%v zL}_U*D?-&`04g&d|dk{bGWsxt2>+Q)kvF6lhjD9Js(lvy~>^1))A-6FZp=gf>8pl zgV$uOFmiXfX;ij7_^lWm=`{H@26pm`Ui}+_&vya2Q&!XxlBS15eJH zY^@8~vFvKS+vJ~VD_QTtOpEvjxyU5*;r6vH9nU1VB`AQ!+$Z939qVOAfZd+|KjcAb z6F*75;eGY>Z~}cVacSai@dFE1J1fQOa;PRuN+B}6HxqQQ843te+`xz9v2_Yk=OtSE*hIPxw?P3+UqFP5{T{k^ znHJp_J5~BtxCu^sxCuwlJg{rVks(j?&SjntUhu8*2l6 zl6GwT)@kUF0C_%F!+mlZRa6(@pBGf3xFj2c-ZNBb`Oq+yfW>X*R^+KvQ+svzF*ySU z(Zj$cwSBHH5I1w<*mf$U>$$aKYNKM1mdt$dFzw=Z{{RKVb7g>jbxTMEhC=nL7GDWx zOgiCN8bq~vN@RgeG2Rh16(@XpUK{rPa5C0U_NC#ddOi1blNaD?PA)p^a~Mt|Xfc#X z*C$7*~-QtCB!|SR5`QS$BPadgH1hLTZ6QX3w~x!4e5kUe)6a~|MJL^ z?hWVmP3ACgO4Rl4*%5k{=fn%=GB6g~yY=%X;Y9;H5K6vt21uekcu_C*no>q~hm{>u zhx9NVLJ)6Z{Nirh{Bw;qpD{Ely!m9p*-IktEm^X}ac>}rFSiu(@f=>0{)_WU7_x+` zMc#1K&kHaS9<&@P8f7k2|KLhF0!(r!i124X=ds8@bpYSsB5G4tDKWhjjP93JDU_YU zLYCKRPzrW4HRo4EaICA3j$S+=SsG#~VG0<#*WjjW<7{9tV;|qGE3|WY^4QEvvUttG zXr3-~syp}ss|Z(+TT^9r*o!zvxauR_Uz0*qfZva7Mm%z^xcR;X6{qn%1KN>}Dc>lUeokyp& z^hZ-X1K{6N@6J1l_$kL?Oa- v^~#+VJ0cwN@h_=+JTEdpas6LDVD_Sl@H65iiOK6cn+2GgSQ}Rwo{s$wBV{oh literal 0 HcmV?d00001 diff --git a/packages/core/src/js/feedback/FeedbackForm.styles.ts b/packages/core/src/js/feedback/FeedbackForm.styles.ts index d54fb9cd83..c3bb293051 100644 --- a/packages/core/src/js/feedback/FeedbackForm.styles.ts +++ b/packages/core/src/js/feedback/FeedbackForm.styles.ts @@ -10,7 +10,8 @@ const defaultStyles: FeedbackFormStyles = { fontSize: 24, fontWeight: 'bold', marginBottom: 20, - textAlign: 'center', + textAlign: 'left', + flex: 1, }, label: { marginBottom: 4, @@ -49,6 +50,14 @@ const defaultStyles: FeedbackFormStyles = { color: '#6a1b9a', 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 6bd8ca3cff..1259c19e6c 100644 --- a/packages/core/src/js/feedback/FeedbackForm.tsx +++ b/packages/core/src/js/feedback/FeedbackForm.tsx @@ -2,7 +2,7 @@ import { captureFeedback } 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'; @@ -78,7 +78,12 @@ 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 aac7a1e1be..7a900f3d49 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,11 @@ export interface FeedbackFormProps extends FeedbackGeneralConfiguration, Feedbac * General feedback configuration */ export interface FeedbackGeneralConfiguration { + /** + * Show the Sentry branding + */ + showBranding?: boolean; + /** * Should the email field be required? */ @@ -123,6 +131,9 @@ export interface FeedbackCallbacks { onFormClose?: () => void; } +/** + * The styles for the feedback form + */ export interface FeedbackFormStyles { container?: ViewStyle; title?: TextStyle; @@ -133,8 +144,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/defaults.ts b/packages/core/src/js/feedback/defaults.ts index 5b0360ec47..94a5036512 100644 --- a/packages/core/src/js/feedback/defaults.ts +++ b/packages/core/src/js/feedback/defaults.ts @@ -30,6 +30,7 @@ export const defaultConfiguration: Partial = { }, // FeedbackGeneralConfiguration + showBranding: true, isEmailRequired: false, isNameRequired: false, showEmail: true, diff --git a/packages/core/test/feedback/FeedbackForm.test.tsx b/packages/core/test/feedback/FeedbackForm.test.tsx index de7ed90d04..a088216fcb 100644 --- a/packages/core/test/feedback/FeedbackForm.test.tsx +++ b/packages/core/test/feedback/FeedbackForm.test.tsx @@ -36,6 +36,7 @@ const defaultProps: FeedbackFormProps = { formError: 'Please fill out all required fields.', emailError: 'The email address is not valid.', successMessageText: 'Feedback success', + showBranding: false, }; describe('FeedbackForm', () => { From 61e4d4daca6b6233c8936fc097601c5e648d5302 Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Fri, 13 Dec 2024 12:57:51 +0200 Subject: [PATCH 2/4] Use network resource to avoid packaging issues --- packages/core/assets/sentrylogo.png | Bin 3476 -> 0 bytes packages/core/src/js/feedback/FeedbackForm.tsx | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) delete mode 100644 packages/core/assets/sentrylogo.png diff --git a/packages/core/assets/sentrylogo.png b/packages/core/assets/sentrylogo.png deleted file mode 100644 index 610c3e0ff0ae9cf4e8075bd17570270458c0c2a4..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3476 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 diff --git a/packages/core/src/js/feedback/FeedbackForm.tsx b/packages/core/src/js/feedback/FeedbackForm.tsx index d33cf918d4..2f936b06aa 100644 --- a/packages/core/src/js/feedback/FeedbackForm.tsx +++ b/packages/core/src/js/feedback/FeedbackForm.tsx @@ -83,7 +83,7 @@ export class FeedbackForm extends React.Component {text.formTitle} {config.showBranding && ( - + )} From fbb402b6a69caafaa14d54780e6e13ffc872981c Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Fri, 13 Dec 2024 13:17:31 +0200 Subject: [PATCH 3/4] Adds test --- packages/core/src/js/feedback/FeedbackForm.tsx | 6 +++++- packages/core/test/feedback/FeedbackForm.test.tsx | 10 ++++++++-- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/packages/core/src/js/feedback/FeedbackForm.tsx b/packages/core/src/js/feedback/FeedbackForm.tsx index 2f936b06aa..162836e06e 100644 --- a/packages/core/src/js/feedback/FeedbackForm.tsx +++ b/packages/core/src/js/feedback/FeedbackForm.tsx @@ -83,7 +83,11 @@ export class FeedbackForm extends React.Component {text.formTitle} {config.showBranding && ( - + )} diff --git a/packages/core/test/feedback/FeedbackForm.test.tsx b/packages/core/test/feedback/FeedbackForm.test.tsx index b63fa0de2b..777cc0e298 100644 --- a/packages/core/test/feedback/FeedbackForm.test.tsx +++ b/packages/core/test/feedback/FeedbackForm.test.tsx @@ -37,7 +37,6 @@ const defaultProps: FeedbackFormProps = { formError: 'Please fill out all required fields.', emailError: 'The email address is not valid.', successMessageText: 'Feedback success', - showBranding: false, }; describe('FeedbackForm', () => { @@ -46,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(); @@ -59,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(); From bb7987942c95fe7a06e74d399277d05c7fe0220c Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Fri, 13 Dec 2024 14:25:44 +0200 Subject: [PATCH 4/4] Add default value in the doc comment Co-authored-by: LucasZF --- packages/core/src/js/feedback/FeedbackForm.types.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/core/src/js/feedback/FeedbackForm.types.ts b/packages/core/src/js/feedback/FeedbackForm.types.ts index 7a900f3d49..828e0b5726 100644 --- a/packages/core/src/js/feedback/FeedbackForm.types.ts +++ b/packages/core/src/js/feedback/FeedbackForm.types.ts @@ -13,6 +13,8 @@ export interface FeedbackFormProps extends FeedbackGeneralConfiguration, Feedbac export interface FeedbackGeneralConfiguration { /** * Show the Sentry branding + * + * @default true */ showBranding?: boolean;