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

Author: ryan953

packages/core/src/types-hoist/feedback/config.ts

@@ -176,6 +176,21 @@ export interface FeedbackTextConfiguration {
    * The label for the button that removes a screenshot and hides the image editor
    */
   removeScreenshotButtonLabel: string;
+
+  /**
+   * The label for the button that highlights portions ofthe screenshot
+   */
+  highlightToolText: string;
+
+  /**
+   * The label for the button that hides portions of the screenshot
+   */
+  hideToolText: string;
+
+  /**
+   * The label for the button that removed a highlight/hidden section of the screenshot.
+   */
+  removeHighlightText: string;
 }
 
 /**

packages/feedback/src/constants/index.ts

@@ -22,6 +22,9 @@ export const SUCCESS_MESSAGE_TEXT = 'Thank you for your report!';
 export const IS_REQUIRED_LABEL = '(required)';
 export const ADD_SCREENSHOT_LABEL = 'Add a screenshot';
 export const REMOVE_SCREENSHOT_LABEL = 'Remove screenshot';
+export const HIGHLIGHT_TOOL_TEXT = 'Highlight';
+export const HIDE_TOOL_TEXT = 'Hide';
+export const REMOVE_HIGHLIGHT_TEXT = 'Remove';
 
 export const FEEDBACK_WIDGET_SOURCE = 'widget';
 export const FEEDBACK_API_SOURCE = 'api';

packages/feedback/src/core/integration.ts

@@ -14,11 +14,14 @@ import {
   EMAIL_LABEL,
   EMAIL_PLACEHOLDER,
   FORM_TITLE,
+  HIDE_TOOL_TEXT,
+  HIGHLIGHT_TOOL_TEXT,
   IS_REQUIRED_LABEL,
   MESSAGE_LABEL,
   MESSAGE_PLACEHOLDER,
   NAME_LABEL,
   NAME_PLACEHOLDER,
+  REMOVE_HIGHLIGHT_TEXT,
   REMOVE_SCREENSHOT_LABEL,
   SUBMIT_BUTTON_LABEL,
   SUCCESS_MESSAGE_TEXT,
@@ -110,6 +113,9 @@ export const buildFeedbackIntegration = ({
     successMessageText = SUCCESS_MESSAGE_TEXT,
     triggerLabel = TRIGGER_LABEL,
     triggerAriaLabel = '',
+    highlightToolText = HIGHLIGHT_TOOL_TEXT,
+    hideToolText = HIDE_TOOL_TEXT,
+    removeHighlightText = REMOVE_HIGHLIGHT_TEXT,
 
     // FeedbackCallbacks
     onFormOpen,
@@ -152,6 +158,9 @@ export const buildFeedbackIntegration = ({
       isRequiredLabel,
       addScreenshotButtonLabel,
       removeScreenshotButtonLabel,
+      highlightToolText,
+      hideToolText,
+      removeHighlightText,
 
       onFormClose,
       onFormOpen,

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

@@ -310,7 +310,7 @@ export function ScreenshotEditorFactory({
                   }}
                 >
                   <button
-                    aria-label="Remove"
+                    aria-label={options.removeHighlightText}
                     onClick={deleteRect(index)}
                     onMouseDown={handleStopPropagation}
                     onMouseUp={handleStopPropagation}
@@ -323,7 +323,7 @@ export function ScreenshotEditorFactory({
             </div>
           </div>
         </div>
-        <Toolbar action={action} setAction={setAction} />
+        <Toolbar options={options} action={action} setAction={setAction} />
       </div>
     );
   };

packages/feedback/src/screenshot/components/Toolbar.tsx

@@ -1,5 +1,6 @@
 import type { h as hType, VNode } from 'preact';
 import type * as Hooks from 'preact/hooks';
+import type { FeedbackInternalOptions } from '@sentry/core';
 
 interface FactoryParams {
   h: typeof hType;
@@ -11,9 +12,11 @@ export default function ToolbarFactory({
   return function Toolbar({
     action,
     setAction,
+    options,
   }: {
     action: 'highlight' | 'hide' | '';
     setAction: Hooks.StateUpdater<'highlight' | 'hide' | ''>;
+    options: FeedbackInternalOptions;
   }): VNode {
     return (
       <div class="editor__tool-container">
@@ -25,7 +28,7 @@ export default function ToolbarFactory({
               setAction(action === 'highlight' ? '' : 'highlight');
             }}
           >
-            Highlight
+            {options.highlightToolText}
           </button>
           <button
             type="button"
@@ -34,7 +37,7 @@ export default function ToolbarFactory({
               setAction(action === 'hide' ? '' : 'hide');
             }}
           >
-            Hide
+            {options.hideToolText}
           </button>
         </div>
       </div>