feat(feedback): Implements Report a Bug button

CHANGELOG.md

@@ -6,6 +6,12 @@
 > make sure you follow our [migration guide](https://docs.sentry.io/platforms/react-native/migration/) first.
 <!-- prettier-ignore-end -->
 
+## Unreleased
+
+### Features
+
+- Adds the `FeedbackButton` component that shows the Feedback Widget ([#4378](https://github.com/getsentry/sentry-react-native/pull/4378))
+
 ## 6.11.0-beta.0
 
 ### Features

packages/core/src/js/feedback/FeedbackButton.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { Image, Text, TouchableOpacity } from 'react-native';
+
+import { defaultButtonConfiguration } from './defaults';
+import { defaultButtonStyles } from './FeedbackWidget.styles';
+import type { FeedbackButtonProps, FeedbackButtonStyles, FeedbackButtonTextConfiguration } from './FeedbackWidget.types';
+import { feedbackIcon } from './icons';
+import { lazyLoadFeedbackIntegration } from './lazy';
+
+const showFeedbackWidget = (): void => {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  const { showFeedbackWidget } = require('./FeedbackWidgetManager');
+  showFeedbackWidget();
+};
+
+/**
+ * @beta
+ * Implements a feedback button that opens the FeedbackForm.
+ */
+export class FeedbackButton extends React.Component<FeedbackButtonProps> {
+  public constructor(props: FeedbackButtonProps) {
+    super(props);
+    lazyLoadFeedbackIntegration();
+  }
+
+  /**
+   * Renders the feedback button.
+   */
+  public render(): React.ReactNode {
+    const text: FeedbackButtonTextConfiguration = { ...defaultButtonConfiguration, ...this.props };
+    const styles: FeedbackButtonStyles = {
+      triggerButton: { ...defaultButtonStyles.triggerButton, ...this.props.styles?.triggerButton },
+      triggerText: { ...defaultButtonStyles.triggerText, ...this.props.styles?.triggerText },
+      triggerIcon: { ...defaultButtonStyles.triggerIcon, ...this.props.styles?.triggerIcon },
+    };
+
+    return (
+      <TouchableOpacity
+        style={styles.triggerButton}
+        onPress={showFeedbackWidget}
+        accessibilityLabel={text.triggerAriaLabel}
+      >
+        <Image source={{ uri: feedbackIcon }} style={styles.triggerIcon}/>
+        <Text style={styles.triggerText}>{text.triggerLabel}</Text>
+      </TouchableOpacity>
+    );
+  }
+}

packages/core/src/js/feedback/FeedbackWidget.styles.ts

@@ -1,6 +1,6 @@
 import type { ViewStyle } from 'react-native';
 
-import type { FeedbackWidgetStyles } from './FeedbackWidget.types';
+import type { FeedbackButtonStyles, FeedbackWidgetStyles } from './FeedbackWidget.types';
 
 const PURPLE = 'rgba(88, 74, 192, 1)';
 const FOREGROUND_COLOR = '#2b2233';
@@ -99,6 +99,37 @@ const defaultStyles: FeedbackWidgetStyles = {
   },
 };
 
+export const defaultButtonStyles: FeedbackButtonStyles = {
+  triggerButton: {
+    position: 'absolute',
+    bottom: 30,
+    right: 30,
+    backgroundColor: BACKGROUND_COLOR,
+    padding: 15,
+    borderRadius: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+    elevation: 5,
+    shadowColor: BORDER_COLOR,
+    shadowOffset: { width: 1, height: 2 },
+    shadowOpacity: 0.5,
+    shadowRadius: 3,
+    flexDirection: 'row',
+    borderWidth: 1,
+    borderColor: BORDER_COLOR,
+  },
+  triggerText: {
+    color: FOREGROUND_COLOR,
+    fontSize: 18,
+  },
+  triggerIcon: {
+    width: 24,
+    height: 24,
+    padding: 2,
+    marginEnd: 6,
+  },
+};
+
 export const modalWrapper: ViewStyle = {
   position: 'absolute',
   top: 0,

packages/core/src/js/feedback/FeedbackWidget.types.ts

@@ -154,6 +154,21 @@ export interface FeedbackTextConfiguration {
   genericError?: string;
 }
 
+/**
+ * The FeedbackButton text labels that can be customized
+ */
+export interface FeedbackButtonTextConfiguration {
+  /**
+   * The label for the Feedback widget button that opens the dialog
+   */
+  triggerLabel?: string;
+
+  /**
+   * The aria label for the Feedback widget button that opens the dialog
+   */
+  triggerAriaLabel?: string;
+}
+
 /**
  * The public callbacks available for the feedback integration
  */
@@ -247,6 +262,22 @@ export interface FeedbackWidgetStyles {
   sentryLogo?: ImageStyle;
 }
 
+/**
+ * The props for the feedback button
+ */
+export interface FeedbackButtonProps extends FeedbackButtonTextConfiguration {
+  styles?: FeedbackButtonStyles;
+}
+
+/**
+ * The styles for the feedback button
+ */
+export interface FeedbackButtonStyles {
+  triggerButton?: ViewStyle;
+  triggerText?: TextStyle;
+  triggerIcon?: ImageStyle;
+}
+
 /**
  * The state of the feedback form
  */

packages/core/src/js/feedback/FeedbackWidgetManager.tsx

@@ -4,20 +4,25 @@ import type { NativeScrollEvent, NativeSyntheticEvent} from 'react-native';
 import { Animated, Dimensions, Easing, Modal, PanResponder, Platform, ScrollView, View } from 'react-native';
 
 import { notWeb } from '../utils/environment';
+import { FeedbackButton } from './FeedbackButton';
 import { FeedbackWidget } from './FeedbackWidget';
 import { modalSheetContainer, modalWrapper, topSpacer } from './FeedbackWidget.styles';
 import type { FeedbackWidgetStyles } from './FeedbackWidget.types';
-import { getFeedbackOptions } from './integration';
-import { lazyLoadAutoInjectFeedbackIntegration } from './lazy';
+import { getFeedbackButtonOptions, getFeedbackOptions } from './integration';
+import { lazyLoadAutoInjectFeedbackButtonIntegration,lazyLoadAutoInjectFeedbackIntegration } from './lazy';
 import { isModalSupported } from './utils';
 
 const PULL_DOWN_CLOSE_THRESHOLD = 200;
 const SLIDE_ANIMATION_DURATION = 200;
 const BACKGROUND_ANIMATION_DURATION = 200;
 
-class FeedbackWidgetManager {
-  private static _isVisible = false;
-  private static _setVisibility: (visible: boolean) => void;
+abstract class FeedbackManager {
+  protected static _isVisible = false;
+  protected static _setVisibility: (visible: boolean) => void;
+
+  protected static get _feedbackComponentName(): string {
+    throw new Error('Subclasses must override feedbackComponentName');
+  }
 
   public static initialize(setVisibility: (visible: boolean) => void): void {
     this._setVisibility = setVisibility;
@@ -38,7 +43,7 @@ class FeedbackWidgetManager {
     } else {
       // This message should be always shown otherwise it's not possible to use the widget.
       // eslint-disable-next-line no-console
-      console.warn('[Sentry] FeedbackWidget requires `Sentry.wrap(RootComponent)` to be called before `showFeedbackWidget()`.');
+      console.warn(`[Sentry] ${this._feedbackComponentName} requires 'Sentry.wrap(RootComponent)' to be called before 'show${this._feedbackComponentName}()'.`);
     }
   }
 
@@ -49,7 +54,7 @@ class FeedbackWidgetManager {
     } else {
       // This message should be always shown otherwise it's not possible to use the widget.
       // eslint-disable-next-line no-console
-      console.warn('[Sentry] FeedbackWidget requires `Sentry.wrap(RootComponent)` before interacting with the widget.');
+      console.warn(`[Sentry] ${this._feedbackComponentName} requires 'Sentry.wrap(RootComponent)' before interacting with the widget.`);
     }
   }
 
@@ -58,12 +63,25 @@ class FeedbackWidgetManager {
   }
 }
 
+class FeedbackWidgetManager extends FeedbackManager {
+  protected static get _feedbackComponentName(): string {
+    return 'FeedbackWidget';
+  }
+}
+
+class FeedbackButtonManager extends FeedbackManager {
+  protected static get _feedbackComponentName(): string {
+    return 'FeedbackButton';
+  }
+}
+
 interface FeedbackWidgetProviderProps {
   children: React.ReactNode;
   styles?: FeedbackWidgetStyles;
 }
 
 interface FeedbackWidgetProviderState {
+  isButtonVisible: boolean;
   isVisible: boolean;
   backgroundOpacity: Animated.Value;
   panY: Animated.Value;
@@ -72,6 +90,7 @@ interface FeedbackWidgetProviderState {
 
 class FeedbackWidgetProvider extends React.Component<FeedbackWidgetProviderProps> {
   public state: FeedbackWidgetProviderState = {
+    isButtonVisible: false,
     isVisible: false,
     backgroundOpacity: new Animated.Value(0),
     panY: new Animated.Value(Dimensions.get('screen').height),
@@ -112,6 +131,7 @@ class FeedbackWidgetProvider extends React.Component<FeedbackWidgetProviderProps
 
   public constructor(props: FeedbackWidgetProviderProps) {
     super(props);
+    FeedbackButtonManager.initialize(this._setButtonVisibilityFunction);
     FeedbackWidgetManager.initialize(this._setVisibilityFunction);
   }
 
@@ -150,7 +170,7 @@ class FeedbackWidgetProvider extends React.Component<FeedbackWidgetProviderProps
       return <>{this.props.children}</>;
     }
 
-    const { isVisible, backgroundOpacity } = this.state;
+    const { isButtonVisible, isVisible, backgroundOpacity } = this.state;
 
     const backgroundColor = backgroundOpacity.interpolate({
       inputRange: [0, 1],
@@ -162,6 +182,7 @@ class FeedbackWidgetProvider extends React.Component<FeedbackWidgetProviderProps
     return (
       <>
         {this.props.children}
+        {isButtonVisible && <FeedbackButton {...getFeedbackButtonOptions()}/>}
         {isVisible &&
           <Animated.View style={[modalWrapper, { backgroundColor }]} >
             <Modal visible={isVisible} transparent animationType="none" onRequestClose={this._handleClose} testID="feedback-form-modal">
@@ -219,6 +240,10 @@ class FeedbackWidgetProvider extends React.Component<FeedbackWidgetProviderProps
     }
   };
 
+  private _setButtonVisibilityFunction = (visible: boolean): void => {
+    this.setState({ isButtonVisible: visible });
+  };
+
   private _handleClose = (): void => {
     FeedbackWidgetManager.hide();
   };
@@ -233,4 +258,17 @@ const resetFeedbackWidgetManager = (): void => {
   FeedbackWidgetManager.reset();
 };
 
-export { showFeedbackWidget, FeedbackWidgetProvider, resetFeedbackWidgetManager };
+const showFeedbackButton = (): void => {
+  lazyLoadAutoInjectFeedbackButtonIntegration();
+  FeedbackButtonManager.show();
+};
+
+const hideFeedbackButton = (): void => {
+  FeedbackButtonManager.hide();
+};
+
+const resetFeedbackButtonManager = (): void => {
+  FeedbackButtonManager.reset();
+};
+
+export { showFeedbackButton, hideFeedbackButton, showFeedbackWidget, FeedbackWidgetProvider, resetFeedbackButtonManager, resetFeedbackWidgetManager };

packages/core/src/js/feedback/defaults.ts

@@ -1,4 +1,4 @@
-import type { FeedbackWidgetProps } from './FeedbackWidget.types';
+import type { FeedbackButtonProps, FeedbackWidgetProps } from './FeedbackWidget.types';
 import { feedbackAlertDialog } from './utils';
 
 const FORM_TITLE = 'Report a Bug';
@@ -11,6 +11,7 @@ const MESSAGE_LABEL = 'Description';
 const IS_REQUIRED_LABEL = '(required)';
 const SUBMIT_BUTTON_LABEL = 'Send Bug Report';
 const CANCEL_BUTTON_LABEL = 'Cancel';
+const TRIGGER_LABEL = 'Report a Bug';
 const ERROR_TITLE = 'Error';
 const FORM_ERROR = 'Please fill out all required fields.';
 const EMAIL_ERROR = 'Please enter a valid email address.';
@@ -80,3 +81,8 @@ export const defaultConfiguration: Partial<FeedbackWidgetProps> = {
   removeScreenshotButtonLabel: REMOVE_SCREENSHOT_LABEL,
   genericError: GENERIC_ERROR_TEXT,
 };
+
+export const defaultButtonConfiguration: Partial<FeedbackButtonProps> = {
+  triggerLabel: TRIGGER_LABEL,
+  triggerAriaLabel: '',
+};

packages/core/src/js/feedback/icons.ts

@@ -0,0 +1,2 @@
+export const feedbackIcon =
+  'data:image/png;base64,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';

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

@@ -1,17 +1,23 @@
 import { type Integration, getClient } from '@sentry/core';
 
-import type { FeedbackWidgetProps } from './FeedbackWidget.types';
+import type { FeedbackButtonProps, FeedbackWidgetProps } from './FeedbackWidget.types';
 
 export const MOBILE_FEEDBACK_INTEGRATION_NAME = 'MobileFeedback';
 
 type FeedbackIntegration = Integration & {
   options: Partial<FeedbackWidgetProps>;
+  buttonOptions: Partial<FeedbackButtonProps>;
 };
 
-export const feedbackIntegration = (initOptions: FeedbackWidgetProps = {}): FeedbackIntegration => {
+export const feedbackIntegration = (
+  initOptions: FeedbackWidgetProps & { buttonOptions?: FeedbackButtonProps } = {},
+): FeedbackIntegration => {
+  const { buttonOptions, ...widgetOptions } = initOptions;
+
   return {
     name: MOBILE_FEEDBACK_INTEGRATION_NAME,
-    options: initOptions,
+    options: widgetOptions,
+    buttonOptions: buttonOptions || {},
   };
 };
 
@@ -25,3 +31,14 @@ export const getFeedbackOptions = (): Partial<FeedbackWidgetProps> => {
 
   return integration.options;
 };
+
+export const getFeedbackButtonOptions = (): Partial<FeedbackButtonProps> => {
+  const integration = getClient()?.getIntegrationByName<ReturnType<typeof feedbackIntegration>>(
+    MOBILE_FEEDBACK_INTEGRATION_NAME,
+  );
+  if (!integration) {
+    return {};
+  }
+
+  return integration.buttonOptions;
+};

packages/core/src/js/feedback/lazy.ts

@@ -25,3 +25,16 @@ export function lazyLoadAutoInjectFeedbackIntegration(): void {
     getClient()?.addIntegration({ name: AUTO_INJECT_FEEDBACK_INTEGRATION_NAME });
   }
 }
+
+export const AUTO_INJECT_FEEDBACK_BUTTON_INTEGRATION_NAME = 'AutoInjectMobileFeedbackButton';
+
+/**
+ * Lazy loads the auto inject feedback button integration if it is not already loaded.
+ */
+export function lazyLoadAutoInjectFeedbackButtonIntegration(): void {
+  const integration = getClient()?.getIntegrationByName(AUTO_INJECT_FEEDBACK_BUTTON_INTEGRATION_NAME);
+  if (!integration) {
+    // Lazy load the integration to track usage
+    getClient()?.addIntegration({ name: AUTO_INJECT_FEEDBACK_BUTTON_INTEGRATION_NAME });
+  }
+}

packages/core/src/js/index.ts

@@ -87,7 +87,8 @@ export type { TimeToDisplayProps } from './tracing';
 
 export { Mask, Unmask } from './replay/CustomMask';
 
+export { FeedbackButton } from './feedback/FeedbackButton';
 export { FeedbackWidget } from './feedback/FeedbackWidget';
-export { showFeedbackWidget } from './feedback/FeedbackWidgetManager';
+export { showFeedbackWidget, showFeedbackButton, hideFeedbackButton } from './feedback/FeedbackWidgetManager';
 
 export { getDataFromUri } from './wrapper';