Skip to content

Commit 8ec9c8c

Browse files
ryan953ryan953
committed
ref(feedback): Rename and add missing Label constants to feedback
1 parent 29e89e1 commit 8ec9c8c

File tree

8 files changed

+54
-29
lines changed

8 files changed

+54
-29
lines changed

‎packages/feedback/src/constants/index.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,10 @@ export const WINDOW = GLOBAL_OBJ as typeof GLOBAL_OBJ & Window;
99
export const DOCUMENT = WINDOW.document;
1010
export const NAVIGATOR = WINDOW.navigator;
1111

12-
export const ACTOR_LABEL = 'Report a Bug';
12+
export const TRIGGER_LABEL = 'Report a Bug';
1313
export const CANCEL_BUTTON_LABEL = 'Cancel';
1414
export const SUBMIT_BUTTON_LABEL = 'Send Bug Report';
15+
export const CONFIRM_BUTTON_LABEL = 'Confirm';
1516
export const FORM_TITLE = 'Report a Bug';
1617
export const EMAIL_PLACEHOLDER = '[email protected]';
1718
export const EMAIL_LABEL = 'Email';
@@ -20,7 +21,9 @@ export const MESSAGE_LABEL = 'Description';
2021
export const NAME_PLACEHOLDER = 'Your Name';
2122
export const NAME_LABEL = 'Name';
2223
export const SUCCESS_MESSAGE_TEXT = 'Thank you for your report!';
23-
export const IS_REQUIRED_TEXT = '(required)';
24+
export const IS_REQUIRED_LABEL = '(required)';
25+
export const ADD_SCREENSHOT_LABEL = 'Add a screenshot';
26+
export const REMOVE_SCREENSHOT_LABEL = 'Remove screenshot';
2427

2528
export const FEEDBACK_WIDGET_SOURCE = 'widget';
2629
export const FEEDBACK_API_SOURCE = 'api';

‎packages/feedback/src/core/integration.ts‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,20 +9,23 @@ import type {
99
} from '@sentry/types';
1010
import { isBrowser, logger } from '@sentry/utils';
1111
import {
12-
ACTOR_LABEL,
12+
ADD_SCREENSHOT_LABEL,
1313
CANCEL_BUTTON_LABEL,
14+
CONFIRM_BUTTON_LABEL,
1415
DEFAULT_THEME,
1516
DOCUMENT,
1617
EMAIL_LABEL,
1718
EMAIL_PLACEHOLDER,
1819
FORM_TITLE,
19-
IS_REQUIRED_TEXT,
20+
IS_REQUIRED_LABEL,
2021
MESSAGE_LABEL,
2122
MESSAGE_PLACEHOLDER,
2223
NAME_LABEL,
2324
NAME_PLACEHOLDER,
25+
REMOVE_SCREENSHOT_LABEL,
2426
SUBMIT_BUTTON_LABEL,
2527
SUCCESS_MESSAGE_TEXT,
28+
TRIGGER_LABEL,
2629
} from '../constants';
2730
import { DEBUG_BUILD } from '../util/debug-build';
2831
import { isScreenshotSupported } from '../util/isScreenshotSupported';
@@ -80,18 +83,21 @@ export const buildFeedbackIntegration = ({
8083
themeDark,
8184

8285
// FeedbackTextConfiguration
83-
buttonLabel = ACTOR_LABEL,
86+
addScreenshotButtonLabel = ADD_SCREENSHOT_LABEL,
87+
buttonLabel = TRIGGER_LABEL,
8488
cancelButtonLabel = CANCEL_BUTTON_LABEL,
85-
submitButtonLabel = SUBMIT_BUTTON_LABEL,
86-
formTitle = FORM_TITLE,
89+
confirmButtonLabel = CONFIRM_BUTTON_LABEL,
8790
emailLabel = EMAIL_LABEL,
8891
emailPlaceholder = EMAIL_PLACEHOLDER,
92+
formTitle = FORM_TITLE,
93+
isRequiredLabel = IS_REQUIRED_LABEL,
8994
messageLabel = MESSAGE_LABEL,
9095
messagePlaceholder = MESSAGE_PLACEHOLDER,
9196
nameLabel = NAME_LABEL,
9297
namePlaceholder = NAME_PLACEHOLDER,
98+
removeScreenshotButtonLabel = REMOVE_SCREENSHOT_LABEL,
99+
submitButtonLabel = SUBMIT_BUTTON_LABEL,
93100
successMessageText = SUCCESS_MESSAGE_TEXT,
94-
isRequiredText = IS_REQUIRED_TEXT,
95101

96102
// FeedbackCallbacks
97103
onFormOpen,
@@ -124,6 +130,7 @@ export const buildFeedbackIntegration = ({
124130
buttonLabel,
125131
cancelButtonLabel,
126132
submitButtonLabel,
133+
confirmButtonLabel,
127134
formTitle,
128135
emailLabel,
129136
emailPlaceholder,
@@ -132,7 +139,9 @@ export const buildFeedbackIntegration = ({
132139
nameLabel,
133140
namePlaceholder,
134141
successMessageText,
135-
isRequiredText,
142+
isRequiredLabel,
143+
addScreenshotButtonLabel,
144+
removeScreenshotButtonLabel,
136145

137146
onFormClose,
138147
onFormOpen,

‎packages/feedback/src/modal/components/Form.tsx‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ import { getMissingFields } from '../../util/validate';
1616
export interface Props
1717
extends Pick<
1818
FeedbackInternalOptions,
19+
| 'addScreenshotButtonLabel'
20+
| 'removeScreenshotButtonLabel'
1921
| 'cancelButtonLabel'
2022
| 'emailLabel'
2123
| 'emailPlaceholder'
@@ -28,7 +30,7 @@ export interface Props
2830
| 'showEmail'
2931
| 'showName'
3032
| 'submitButtonLabel'
31-
| 'isRequiredText'
33+
| 'isRequiredLabel'
3234
> {
3335
defaultEmail: string;
3436
defaultName: string;
@@ -48,6 +50,8 @@ function retrieveStringValue(formData: FormData, key: string): string {
4850
}
4951

5052
export function Form({
53+
addScreenshotButtonLabel,
54+
removeScreenshotButtonLabel,
5155
cancelButtonLabel,
5256
defaultEmail,
5357
defaultName,
@@ -66,7 +70,7 @@ export function Form({
6670
showEmail,
6771
showName,
6872
submitButtonLabel,
69-
isRequiredText,
73+
isRequiredLabel,
7074
screenshotInput,
7175
}: Props): VNode {
7276
// TODO: set a ref on the form, and whenever an input changes call proceessForm() and setError()
@@ -159,7 +163,7 @@ export function Form({
159163

160164
{showName ? (
161165
<label for="name" class="form__label">
162-
<LabelText label={nameLabel} isRequiredText={isRequiredText} isRequired={isNameRequired} />
166+
<LabelText label={nameLabel} isRequiredLabel={isRequiredLabel} isRequired={isNameRequired} />
163167
<input
164168
class="form__input"
165169
defaultValue={defaultName}
@@ -176,7 +180,7 @@ export function Form({
176180

177181
{showEmail ? (
178182
<label for="email" class="form__label">
179-
<LabelText label={emailLabel} isRequiredText={isRequiredText} isRequired={isEmailRequired} />
183+
<LabelText label={emailLabel} isRequiredLabel={isRequiredLabel} isRequired={isEmailRequired} />
180184
<input
181185
class="form__input"
182186
defaultValue={defaultEmail}
@@ -192,7 +196,7 @@ export function Form({
192196
)}
193197

194198
<label for="message" class="form__label">
195-
<LabelText label={messageLabel} isRequiredText={isRequiredText} isRequired />
199+
<LabelText label={messageLabel} isRequiredLabel={isRequiredLabel} isRequired />
196200
<textarea
197201
autoFocus
198202
class="form__input form__input--textarea"
@@ -206,8 +210,6 @@ export function Form({
206210

207211
{ScreenshotInputComponent ? (
208212
<label for="screenshot" class="form__label">
209-
<span class="form__label__text">Screenshot</span>
210-
211213
<button
212214
class="btn btn--default"
213215
type="button"
@@ -216,7 +218,7 @@ export function Form({
216218
setShowScreenshotInput(prev => !prev);
217219
}}
218220
>
219-
{showScreenshotInput ? 'Remove' : 'Add'}
221+
{showScreenshotInput ? removeScreenshotButtonLabel : addScreenshotButtonLabel}
220222
</button>
221223
{screenshotError ? <div class="form__error-container">{screenshotError.message}</div> : null}
222224
</label>
@@ -238,12 +240,12 @@ export function Form({
238240
function LabelText({
239241
label,
240242
isRequired,
241-
isRequiredText,
242-
}: { label: string; isRequired: boolean; isRequiredText: string }): VNode {
243+
isRequiredLabel,
244+
}: { label: string; isRequired: boolean; isRequiredLabel: string }): VNode {
243245
return (
244246
<span class="form__label__text">
245247
{label}
246-
{isRequired && <span class="form__label__text--required">{isRequiredText}</span>}
248+
{isRequired && <span class="form__label__text--required">{isRequiredLabel}</span>}
247249
</span>
248250
);
249251
}

‎packages/feedback/src/modal/integration.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export const feedbackModalIntegration = ((): FeedbackModalIntegration => {
4545
},
4646
};
4747

48-
const screenshotInput = screenshotIntegration && screenshotIntegration.createInput(h, dialog);
48+
const screenshotInput = screenshotIntegration && screenshotIntegration.createInput(h, dialog, options);
4949

5050
const renderContent = (open: boolean): void => {
5151
render(
@@ -68,7 +68,7 @@ export const feedbackModalIntegration = ((): FeedbackModalIntegration => {
6868
defaultName={(userKey && user && user[userKey.name]) || ''}
6969
defaultEmail={(userKey && user && user[userKey.email]) || ''}
7070
successMessageText={options.successMessageText}
71-
isRequiredText={options.isRequiredText}
71+
isRequiredLabel={options.isRequiredLabel}
7272
onFormClose={() => {
7373
renderContent(false);
7474
options.onFormClose && options.onFormClose();

‎packages/feedback/src/screenshot/components/ScreenshotEditor.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,12 @@ const getContainedSize = (img: HTMLCanvasElement): Box => {
6262
};
6363

6464
// eslint-disable-next-line @typescript-eslint/no-unused-vars
65-
export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: FactoryParams): ComponentType<Props> {
65+
export function makeScreenshotEditorComponent({
66+
h,
67+
imageBuffer,
68+
dialog,
69+
options,
70+
}: FactoryParams): ComponentType<Props> {
6671
return function ScreenshotEditor({ onError }: Props): VNode {
6772
const styles = useMemo(() => ({ __html: createScreenshotInputStyles().innerText }), []);
6873

@@ -298,7 +303,7 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
298303
}}
299304
class="btn btn--default"
300305
>
301-
Cancel
306+
{options.cancelButtonLabel}
302307
</button>
303308
<button
304309
onClick={e => {
@@ -308,7 +313,7 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
308313
}}
309314
class="btn btn--primary"
310315
>
311-
Confirm
316+
{options.confirmButtonLabel}
312317
</button>
313318
</div>
314319
</div>

‎packages/feedback/src/screenshot/integration.ts‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
import type { FeedbackDialog, FeedbackScreenshotIntegration, IntegrationFn } from '@sentry/types';
1+
import type {
2+
FeedbackDialog,
3+
FeedbackInternalOptions,
4+
FeedbackScreenshotIntegration,
5+
IntegrationFn,
6+
} from '@sentry/types';
27
import type { Attachment } from '@sentry/types';
38
import type { h as hType } from 'preact';
49
import { DOCUMENT } from '../constants';
@@ -9,12 +14,12 @@ export const feedbackScreenshotIntegration = ((): FeedbackScreenshotIntegration
914
name: 'FeedbackScreenshot',
1015
// eslint-disable-next-line @typescript-eslint/no-empty-function
1116
setupOnce() {},
12-
createInput: (h: unknown, dialog: FeedbackDialog) => {
17+
createInput: (h: unknown, dialog: FeedbackDialog, options: FeedbackInternalOptions) => {
1318
const imageBuffer = DOCUMENT.createElement('canvas');
1419

1520
return {
1621
// eslint-disable-next-line @typescript-eslint/no-explicit-any
17-
input: makeScreenshotEditorComponent({ h: h as typeof hType, imageBuffer, dialog }) as any,
22+
input: makeScreenshotEditorComponent({ h: h as typeof hType, imageBuffer, dialog, options }) as any,
1823

1924
value: async () => {
2025
const blob = await new Promise<Parameters<BlobCallback>[0]>(resolve => {

‎packages/types/src/feedback/config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ export interface FeedbackTextConfiguration {
139139
/**
140140
* Text which indicates that a field is required
141141
*/
142-
isRequiredText: string;
142+
isRequiredLabel: string;
143143
}
144144

145145
/**

‎packages/types/src/feedback/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@ export interface FeedbackScreenshotIntegration extends Integration {
6969
createInput: (
7070
h: HType,
7171
dialog: FeedbackDialog,
72+
options: FeedbackInternalOptions,
7273
) => {
7374
/**
7475
* The preact component

0 commit comments

Comments
 (0)