Commit 64e486d

authored

feat(feedback): Add more labels so people can configure Highlight and Hide labels (#17513)

1 parent e647ba1 commit 64e486dCopy full SHA for 64e486d

File tree

+36

-4

lines changed

+36

-4

lines changed

Lines changed: 15 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -176,6 +176,21 @@ export interface FeedbackTextConfiguration {`
`176`	`176`	`* The label for the button that removes a screenshot and hides the image editor`
`177`	`177`	`*/`
`178`	`178`	`removeScreenshotButtonLabel: string;`
	`179`	`+`
	`180`	`+ /**`
	`181`	`+ * The label for the button that highlights portions ofthe screenshot`
	`182`	`+ */`
	`183`	`+ highlightToolText: string;`
	`184`	`+`
	`185`	`+ /**`
	`186`	`+ * The label for the button that hides portions of the screenshot`
	`187`	`+ */`
	`188`	`+ hideToolText: string;`
	`189`	`+`
	`190`	`+ /**`
	`191`	`+ * The label for the button that removed a highlight/hidden section of the screenshot.`
	`192`	`+ */`
	`193`	`+ removeHighlightText: string;`
`179`	`194`	`}`
`180`	`195`
`181`	`196`	`/**`

Lines changed: 3 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -22,6 +22,9 @@ export const SUCCESS_MESSAGE_TEXT = 'Thank you for your report!';`
`22`	`22`	`export const IS_REQUIRED_LABEL = '(required)';`
`23`	`23`	`export const ADD_SCREENSHOT_LABEL = 'Add a screenshot';`
`24`	`24`	`export const REMOVE_SCREENSHOT_LABEL = 'Remove screenshot';`
	`25`	`+export const HIGHLIGHT_TOOL_TEXT = 'Highlight';`
	`26`	`+export const HIDE_TOOL_TEXT = 'Hide';`
	`27`	`+export const REMOVE_HIGHLIGHT_TEXT = 'Remove';`
`25`	`28`
`26`	`29`	`export const FEEDBACK_WIDGET_SOURCE = 'widget';`
`27`	`30`	`export const FEEDBACK_API_SOURCE = 'api';`

Lines changed: 11 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+/* eslint-disable max-lines */`
	`2`	`+`
`1`	`3`	`import type {`
`2`	`4`	`FeedbackInternalOptions,`
`3`	`5`	`FeedbackModalIntegration,`
`@@ -14,11 +16,14 @@ import {`
`14`	`16`	`EMAIL_LABEL,`
`15`	`17`	`EMAIL_PLACEHOLDER,`
`16`	`18`	`FORM_TITLE,`
	`19`	`+ HIDE_TOOL_TEXT,`
	`20`	`+ HIGHLIGHT_TOOL_TEXT,`
`17`	`21`	`IS_REQUIRED_LABEL,`
`18`	`22`	`MESSAGE_LABEL,`
`19`	`23`	`MESSAGE_PLACEHOLDER,`
`20`	`24`	`NAME_LABEL,`
`21`	`25`	`NAME_PLACEHOLDER,`
	`26`	`+ REMOVE_HIGHLIGHT_TEXT,`
`22`	`27`	`REMOVE_SCREENSHOT_LABEL,`
`23`	`28`	`SUBMIT_BUTTON_LABEL,`
`24`	`29`	`SUCCESS_MESSAGE_TEXT,`
`@@ -110,6 +115,9 @@ export const buildFeedbackIntegration = ({`
`110`	`115`	`successMessageText = SUCCESS_MESSAGE_TEXT,`
`111`	`116`	`triggerLabel = TRIGGER_LABEL,`
`112`	`117`	`triggerAriaLabel = '',`
	`118`	`+ highlightToolText = HIGHLIGHT_TOOL_TEXT,`
	`119`	`+ hideToolText = HIDE_TOOL_TEXT,`
	`120`	`+ removeHighlightText = REMOVE_HIGHLIGHT_TEXT,`
`113`	`121`
`114`	`122`	`// FeedbackCallbacks`
`115`	`123`	`onFormOpen,`
`@@ -152,6 +160,9 @@ export const buildFeedbackIntegration = ({`
`152`	`160`	`isRequiredLabel,`
`153`	`161`	`addScreenshotButtonLabel,`
`154`	`162`	`removeScreenshotButtonLabel,`
	`163`	`+ highlightToolText,`
	`164`	`+ hideToolText,`
	`165`	`+ removeHighlightText,`
`155`	`166`
`156`	`167`	`onFormClose,`
`157`	`168`	`onFormOpen,`

Lines changed: 2 additions & 2 deletions

Original file line number	Diff line number	Diff line change
`@@ -310,7 +310,7 @@ export function ScreenshotEditorFactory({`
`310`	`310`	`}}`
`311`	`311`	`>`
`312`	`312`	`<button`
`313`		`- aria-label="Remove"`
	`313`	`+ aria-label={options.removeHighlightText}`
`314`	`314`	`onClick={deleteRect(index)}`
`315`	`315`	`onMouseDown={handleStopPropagation}`
`316`	`316`	`onMouseUp={handleStopPropagation}`
`@@ -323,7 +323,7 @@ export function ScreenshotEditorFactory({`
`323`	`323`	`</div>`
`324`	`324`	`</div>`
`325`	`325`	`</div>`
`326`		`- <Toolbar action={action} setAction={setAction} />`
	`326`	`+ <Toolbar options={options}action={action} setAction={setAction} />`
`327`	`327`	`</div>`
`328`	`328`	`);`
`329`	`329`	`};`

Lines changed: 5 additions & 2 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+import type { FeedbackInternalOptions } from '@sentry/core';`
`1`	`2`	`import type { h as hType, VNode } from 'preact';`
`2`	`3`	`import type * as Hooks from 'preact/hooks';`
`3`	`4`
`@@ -11,9 +12,11 @@ export default function ToolbarFactory({`
`11`	`12`	`return function Toolbar({`
`12`	`13`	`action,`
`13`	`14`	`setAction,`
	`15`	`+ options,`
`14`	`16`	`}: {`
`15`	`17`	`action: 'highlight' \| 'hide' \| '';`
`16`	`18`	`setAction: Hooks.StateUpdater<'highlight' \| 'hide' \| ''>;`
	`19`	`+ options: FeedbackInternalOptions;`
`17`	`20`	`}): VNode {`
`18`	`21`	`return (`
`19`	`22`	`<div class="editor__tool-container">`
`@@ -25,7 +28,7 @@ export default function ToolbarFactory({`
`25`	`28`	`setAction(action === 'highlight' ? '' : 'highlight');`
`26`	`29`	`}}`
`27`	`30`	`>`
`28`		`- Highlight`
	`31`	`+ {options.highlightToolText}`
`29`	`32`	`</button>`
`30`	`33`	`<button`
`31`	`34`	`type="button"`
`@@ -34,7 +37,7 @@ export default function ToolbarFactory({`
`34`	`37`	`setAction(action === 'hide' ? '' : 'hide');`
`35`	`38`	`}}`
`36`	`39`	`>`
`37`		`- Hide`
	`40`	`+ {options.hideToolText}`
`38`	`41`	`</button>`
`39`	`42`	`</div>`
`40`	`43`	`</div>`

Comments

(0)