From e0037f11c4bf6dd514b8283d852581ad9cc539f0 Mon Sep 17 00:00:00 2001 From: Billy Vong Date: Tue, 24 Oct 2023 17:59:09 -0400 Subject: [PATCH] feat: add `referer` option when calling attachTo/createWidget --- packages/feedback/src/integration.ts | 8 +++----- packages/feedback/src/sendFeedback.ts | 8 +++----- packages/feedback/src/types/index.ts | 20 +++++++++++++++++++ .../feedback/src/util/handleFeedbackSubmit.ts | 7 ++++--- .../feedback/src/util/sendFeedbackRequest.ts | 4 ++++ packages/feedback/src/widget/createWidget.ts | 6 +++--- 6 files changed, 37 insertions(+), 16 deletions(-) diff --git a/packages/feedback/src/integration.ts b/packages/feedback/src/integration.ts index f5d76eb9d729..ce2e4dd7f8ca 100644 --- a/packages/feedback/src/integration.ts +++ b/packages/feedback/src/integration.ts @@ -15,7 +15,7 @@ import { SUBMIT_BUTTON_LABEL, SUCCESS_MESSAGE_TEXT, } from './constants'; -import type { FeedbackConfigurationWithDefaults, Widget } from './types'; +import type { CreateWidgetOptionOverrides, FeedbackConfigurationWithDefaults, Widget } from './types'; import { createActorStyles } from './widget/Actor.css'; import { createShadowHost } from './widget/createShadowHost'; import { createWidget } from './widget/createWidget'; @@ -84,7 +84,6 @@ export class Feedback implements Integration { public constructor({ id = 'sentry-feedback', - // attachTo = null, autoInject = true, showEmail = true, showName = true, @@ -130,7 +129,6 @@ export class Feedback implements Integration { this.options = { id, - // attachTo, autoInject, isAnonymous, isEmailRequired, @@ -200,7 +198,7 @@ export class Feedback implements Integration { /** * Adds click listener to attached element to open a feedback dialog */ - public attachTo(el: Node | string, optionOverrides: Partial): Widget | null { + public attachTo(el: Node | string, optionOverrides: CreateWidgetOptionOverrides): Widget | null { try { const options = Object.assign({}, this.options, optionOverrides); @@ -227,7 +225,7 @@ export class Feedback implements Integration { /** * Creates a new widget. Accepts partial options to override any options passed to constructor. */ - public createWidget(optionOverrides: Partial): Widget | null { + public createWidget(optionOverrides: CreateWidgetOptionOverrides): Widget | null { try { return this._createWidget(Object.assign({}, this.options, optionOverrides)); } catch (err) { diff --git a/packages/feedback/src/sendFeedback.ts b/packages/feedback/src/sendFeedback.ts index 267805007403..133fcbcc7b92 100644 --- a/packages/feedback/src/sendFeedback.ts +++ b/packages/feedback/src/sendFeedback.ts @@ -3,6 +3,7 @@ import { getCurrentHub } from '@sentry/core'; import { getLocationHref } from '@sentry/utils'; import { sendFeedbackRequest } from './util/sendFeedbackRequest'; +import { SendFeedbackOptions } from './types'; interface SendFeedbackParams { message: string; @@ -11,16 +12,12 @@ interface SendFeedbackParams { url?: string; } -interface SendFeedbackOptions { - includeReplay?: boolean; -} - /** * Public API to send a Feedback item to Sentry */ export function sendFeedback( { name, email, message, url = getLocationHref() }: SendFeedbackParams, - { includeReplay = true }: SendFeedbackOptions = {}, + { referrer, includeReplay = true }: SendFeedbackOptions = {}, ): ReturnType { const hub = getCurrentHub(); const client = hub && hub.getClient(); @@ -38,5 +35,6 @@ export function sendFeedback( url, replay_id: replayId, }, + referrer, }); } diff --git a/packages/feedback/src/types/index.ts b/packages/feedback/src/types/index.ts index 2a2596349645..a1cc9686c324 100644 --- a/packages/feedback/src/types/index.ts +++ b/packages/feedback/src/types/index.ts @@ -29,8 +29,24 @@ export interface SendFeedbackData { replay_id?: string; name?: string; }; + referrer?: string; } +export interface SendFeedbackOptions { + /** + * Should include replay with the feedback? + */ + includeReplay?: boolean; + + /** + * Allows user to set a referrer for feedback, to act as a category for the feedback + */ + referrer?: string; +} + +/** + * Feedback data expected from UI/form + */ export interface FeedbackFormData { message: string; email?: string; @@ -213,6 +229,10 @@ export interface FeedbackTheme { error: string; } +export interface CreateWidgetOptionOverrides extends Partial { + referrer?: string; +} + export interface FeedbackThemes { dark: FeedbackTheme; light: FeedbackTheme; diff --git a/packages/feedback/src/util/handleFeedbackSubmit.ts b/packages/feedback/src/util/handleFeedbackSubmit.ts index c109c0c9214e..16efd1e568c3 100644 --- a/packages/feedback/src/util/handleFeedbackSubmit.ts +++ b/packages/feedback/src/util/handleFeedbackSubmit.ts @@ -1,13 +1,14 @@ import { sendFeedback } from '../sendFeedback'; -import type { FeedbackFormData } from '../types'; +import type { FeedbackFormData, SendFeedbackOptions } from '../types'; import type { DialogComponent } from '../widget/Dialog'; /** - * + * Calls `sendFeedback` to send feedback, handles UI behavior of dialog. */ export async function handleFeedbackSubmit( dialog: DialogComponent | null, feedback: FeedbackFormData, + options?: SendFeedbackOptions ): Promise { if (!dialog) { // Not sure when this would happen @@ -25,7 +26,7 @@ export async function handleFeedbackSubmit( try { dialog.hideError(); dialog.setSubmitDisabled(); - const resp = await sendFeedback(feedback); + const resp = await sendFeedback(feedback, options); if (!resp) { // Errored... re-enable submit button diff --git a/packages/feedback/src/util/sendFeedbackRequest.ts b/packages/feedback/src/util/sendFeedbackRequest.ts index 626457d6122b..60d99066d250 100644 --- a/packages/feedback/src/util/sendFeedbackRequest.ts +++ b/packages/feedback/src/util/sendFeedbackRequest.ts @@ -9,6 +9,7 @@ import { prepareFeedbackEvent } from './prepareFeedbackEvent'; */ export async function sendFeedbackRequest({ feedback: { message, email, name, replay_id, url }, + referrer, }: SendFeedbackData): Promise { const hub = getCurrentHub(); @@ -33,6 +34,9 @@ export async function sendFeedbackRequest({ replay_id, url, }, + tags: { + referrer, + } // type: 'feedback_event', }; diff --git a/packages/feedback/src/widget/createWidget.ts b/packages/feedback/src/widget/createWidget.ts index 5ef6596d522e..6246dd27ff6f 100644 --- a/packages/feedback/src/widget/createWidget.ts +++ b/packages/feedback/src/widget/createWidget.ts @@ -11,12 +11,12 @@ import { SuccessMessage } from './SuccessMessage'; interface CreateWidgetParams { shadow: ShadowRoot; - options: FeedbackConfigurationWithDefaults; + options: FeedbackConfigurationWithDefaults & {referrer?: string}; attachTo?: Node; } /** - * + * Creates a new widget. Returns public methods that control widget behavior. */ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams): Widget { let actor: ActorComponent | undefined; @@ -64,7 +64,7 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams): return; } - const result = await handleFeedbackSubmit(dialog, feedback); + const result = await handleFeedbackSubmit(dialog, feedback, {referrer: options.referrer}); // Error submitting feedback if (!result) {