From ca3857a431e48a3977898658007f0950802251d0 Mon Sep 17 00:00:00 2001 From: Ryan Albrecht Date: Sun, 31 Mar 2024 10:46:25 -0700 Subject: [PATCH 01/32] Move feedback/src/types into types/feedback --- packages/feedback/src/core/createMainStyles.ts | 2 +- packages/feedback/src/core/integration.ts | 12 ++++++------ packages/feedback/src/core/sendFeedback.ts | 2 +- packages/feedback/src/index.ts | 2 +- .../src/modal/components/DialogContainer.tsx | 2 +- .../src/modal/components/DialogHeader.tsx | 2 +- packages/feedback/src/modal/components/Form.tsx | 14 +++++++------- .../feedback/src/modal/components/SentryLogo.ts | 2 +- packages/feedback/src/modal/createDialog.tsx | 2 +- .../screenshot/components/ScreenshotEditor.tsx | 2 +- packages/feedback/src/screenshot/createInput.ts | 2 +- packages/feedback/src/util/mergeOptions.ts | 2 +- packages/feedback/src/util/validate.ts | 2 +- .../src/types => types/src/feedback}/config.ts | 0 .../src/types => types/src/feedback}/form.ts | 2 +- .../src/types => types/src/feedback}/index.ts | 4 +++- .../src/{feedback.ts => feedback/sendFeedback.ts} | 4 ++-- .../src/types => types/src/feedback}/theme.ts | 0 packages/types/src/index.ts | 15 ++++++++++++++- 19 files changed, 44 insertions(+), 29 deletions(-) rename packages/{feedback/src/types => types/src/feedback}/config.ts (100%) rename packages/{feedback/src/types => types/src/feedback}/form.ts (72%) rename packages/{feedback/src/types => types/src/feedback}/index.ts (95%) rename packages/types/src/{feedback.ts => feedback/sendFeedback.ts} (87%) rename packages/{feedback/src/types => types/src/feedback}/theme.ts (100%) diff --git a/packages/feedback/src/core/createMainStyles.ts b/packages/feedback/src/core/createMainStyles.ts index 9eb5bd4dc2ab..b7a629d6ea34 100644 --- a/packages/feedback/src/core/createMainStyles.ts +++ b/packages/feedback/src/core/createMainStyles.ts @@ -1,5 +1,5 @@ +import type { FeedbackTheme, FeedbackThemes } from '@sentry/types'; import { DOCUMENT } from '../constants'; -import type { FeedbackTheme, FeedbackThemes } from '../types'; function getThemedCssVariables(theme: FeedbackTheme): string { return ` diff --git a/packages/feedback/src/core/integration.ts b/packages/feedback/src/core/integration.ts index e0a0e273e6f0..011bc2cbe567 100644 --- a/packages/feedback/src/core/integration.ts +++ b/packages/feedback/src/core/integration.ts @@ -1,5 +1,11 @@ import { getClient } from '@sentry/core'; import type { Integration, IntegrationFn } from '@sentry/types'; +import type { + Dialog, + FeedbackInternalOptions, + OptionalFeedbackConfiguration, + OverrideFeedbackConfiguration, +} from '@sentry/types'; import { isBrowser, logger } from '@sentry/utils'; import { ACTOR_LABEL, @@ -19,12 +25,6 @@ import { } from '../constants'; import type { IFeedbackModalIntegration } from '../modal/integration'; import type { IFeedbackScreenshotIntegration } from '../screenshot/integration'; -import type { - Dialog, - FeedbackInternalOptions, - OptionalFeedbackConfiguration, - OverrideFeedbackConfiguration, -} from '../types'; import { DEBUG_BUILD } from '../util/debug-build'; import { isScreenshotSupported } from '../util/isScreenshotSupported'; import { mergeOptions } from '../util/mergeOptions'; diff --git a/packages/feedback/src/core/sendFeedback.ts b/packages/feedback/src/core/sendFeedback.ts index f3310303082a..8b3bb26748e8 100644 --- a/packages/feedback/src/core/sendFeedback.ts +++ b/packages/feedback/src/core/sendFeedback.ts @@ -1,8 +1,8 @@ import { createAttachmentEnvelope, createEventEnvelope, getClient, withScope } from '@sentry/core'; import type { FeedbackEvent, TransportMakeRequestResponse } from '@sentry/types'; +import type { SendFeedbackOptions, SendFeedbackParams } from '@sentry/types'; import { getLocationHref } from '@sentry/utils'; import { FEEDBACK_API_SOURCE, FEEDBACK_WIDGET_SOURCE } from '../constants'; -import type { SendFeedbackOptions, SendFeedbackParams } from '../types'; import { prepareFeedbackEvent } from '../util/prepareFeedbackEvent'; /** diff --git a/packages/feedback/src/index.ts b/packages/feedback/src/index.ts index c182c98669c3..35ee5f0caba9 100644 --- a/packages/feedback/src/index.ts +++ b/packages/feedback/src/index.ts @@ -4,5 +4,5 @@ export { feedbackModalIntegration } from './modal/integration'; export { getFeedback } from './core/getFeedback'; export { feedbackScreenshotIntegration } from './screenshot/integration'; -export type { OptionalFeedbackConfiguration } from './types'; +export type { OptionalFeedbackConfiguration } from '@sentry/types'; export type { IFeedbackIntegration } from './core/integration'; diff --git a/packages/feedback/src/modal/components/DialogContainer.tsx b/packages/feedback/src/modal/components/DialogContainer.tsx index 9c178ea9de2d..97d1b7f84e96 100644 --- a/packages/feedback/src/modal/components/DialogContainer.tsx +++ b/packages/feedback/src/modal/components/DialogContainer.tsx @@ -1,9 +1,9 @@ +import type { FeedbackFormData } from '@sentry/types'; // biome-ignore lint/nursery/noUnusedImports: reason import { Fragment, h } from 'preact'; // eslint-disable-line @typescript-eslint/no-unused-vars import type { VNode } from 'preact'; import { useCallback, useMemo, useState } from 'preact/hooks'; import { SUCCESS_MESSAGE_TIMEOUT } from '../../constants'; -import type { FeedbackFormData } from '../../types'; import { DialogContent } from './DialogContent'; import { DialogHeader } from './DialogHeader'; import type { Props as HeaderProps } from './DialogHeader'; diff --git a/packages/feedback/src/modal/components/DialogHeader.tsx b/packages/feedback/src/modal/components/DialogHeader.tsx index 2af30b580b56..0d6c66d8341c 100644 --- a/packages/feedback/src/modal/components/DialogHeader.tsx +++ b/packages/feedback/src/modal/components/DialogHeader.tsx @@ -1,8 +1,8 @@ +import type { FeedbackInternalOptions } from '@sentry/types'; // biome-ignore lint/nursery/noUnusedImports: reason import { h } from 'preact'; // eslint-disable-line @typescript-eslint/no-unused-vars import type { VNode } from 'preact'; import { useMemo } from 'preact/hooks'; -import type { FeedbackInternalOptions } from '../../types'; import type { Props as LogoProps } from './SentryLogo'; import { SentryLogo } from './SentryLogo'; diff --git a/packages/feedback/src/modal/components/Form.tsx b/packages/feedback/src/modal/components/Form.tsx index 960b4c3d9038..d4b6f7cb08a6 100644 --- a/packages/feedback/src/modal/components/Form.tsx +++ b/packages/feedback/src/modal/components/Form.tsx @@ -1,16 +1,16 @@ -import { logger } from '@sentry/utils'; -// biome-ignore lint/nursery/noUnusedImports: reason -import { h } from 'preact'; // eslint-disable-line @typescript-eslint/no-unused-vars -import type { JSX, VNode } from 'preact'; -import { useCallback, useState } from 'preact/hooks'; -import { FEEDBACK_WIDGET_SOURCE } from '../../constants'; import type { FeedbackFormData, FeedbackInternalOptions, ScreenshotInput, SendFeedbackOptions, SendFeedbackParams, -} from '../../types'; +} from '@sentry/types'; +import { logger } from '@sentry/utils'; +// biome-ignore lint/nursery/noUnusedImports: reason +import { h } from 'preact'; // eslint-disable-line @typescript-eslint/no-unused-vars +import type { JSX, VNode } from 'preact'; +import { useCallback, useState } from 'preact/hooks'; +import { FEEDBACK_WIDGET_SOURCE } from '../../constants'; import { DEBUG_BUILD } from '../../util/debug-build'; import { getMissingFields } from '../../util/validate'; diff --git a/packages/feedback/src/modal/components/SentryLogo.ts b/packages/feedback/src/modal/components/SentryLogo.ts index 1e32ad8efdcd..4c6cb9f81153 100644 --- a/packages/feedback/src/modal/components/SentryLogo.ts +++ b/packages/feedback/src/modal/components/SentryLogo.ts @@ -1,5 +1,5 @@ +import type { FeedbackInternalOptions } from '@sentry/types'; import { DOCUMENT } from '../../constants'; -import type { FeedbackInternalOptions } from '../../types'; import { setAttributesNS } from '../../util/setAttributesNS'; const XMLNS = 'http://www.w3.org/2000/svg'; diff --git a/packages/feedback/src/modal/createDialog.tsx b/packages/feedback/src/modal/createDialog.tsx index 626c1fe20d19..0f149f940c1a 100644 --- a/packages/feedback/src/modal/createDialog.tsx +++ b/packages/feedback/src/modal/createDialog.tsx @@ -1,9 +1,9 @@ import { getCurrentScope } from '@sentry/core'; +import type { Dialog, FeedbackFormData, FeedbackInternalOptions } from '@sentry/types'; import { h, render } from 'preact'; import { DOCUMENT } from '../constants'; import type { sendFeedback as sendFeedbackFn } from '../core/sendFeedback'; import type { IFeedbackScreenshotIntegration } from '../screenshot/integration'; -import type { Dialog, FeedbackFormData, FeedbackInternalOptions } from '../types'; import { createDialogStyles } from './components/Dialog.css'; import { DialogComponent } from './components/DialogContainer'; diff --git a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx index f3c0e39970ce..cc6636a376e6 100644 --- a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx +++ b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx @@ -1,10 +1,10 @@ +import type { Dialog } from '@sentry/types'; /* eslint-disable max-lines */ import type { ComponentType, VNode, h as hType } from 'preact'; // biome-ignore lint: needed for preact import { h } from 'preact'; // eslint-disable-line @typescript-eslint/no-unused-vars import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks'; import { CROP_COLOR, DOCUMENT, WINDOW } from '../../constants'; -import type { Dialog } from '../../types'; import { createScreenshotInputStyles } from './ScreenshotInput.css'; import { useTakeScreenshot } from './useTakeScreenshot'; diff --git a/packages/feedback/src/screenshot/createInput.ts b/packages/feedback/src/screenshot/createInput.ts index 679a82f5dfba..519e8a636201 100644 --- a/packages/feedback/src/screenshot/createInput.ts +++ b/packages/feedback/src/screenshot/createInput.ts @@ -1,7 +1,7 @@ import type { Attachment } from '@sentry/types'; +import type { Dialog, ScreenshotInput } from '@sentry/types'; import type { h as hType } from 'preact'; import { DOCUMENT } from '../constants'; -import type { Dialog, ScreenshotInput } from '../types'; import { makeScreenshotEditorComponent } from './components/ScreenshotEditor'; /** diff --git a/packages/feedback/src/util/mergeOptions.ts b/packages/feedback/src/util/mergeOptions.ts index da7f4c271f14..692f32e5062c 100644 --- a/packages/feedback/src/util/mergeOptions.ts +++ b/packages/feedback/src/util/mergeOptions.ts @@ -1,4 +1,4 @@ -import type { FeedbackFormData, FeedbackInternalOptions, OptionalFeedbackConfiguration } from '../types'; +import type { FeedbackFormData, FeedbackInternalOptions, OptionalFeedbackConfiguration } from '@sentry/types'; /** * Quick and dirty deep merge for the Feedback integration options diff --git a/packages/feedback/src/util/validate.ts b/packages/feedback/src/util/validate.ts index 5ab14743bf03..5525e191dd9d 100644 --- a/packages/feedback/src/util/validate.ts +++ b/packages/feedback/src/util/validate.ts @@ -1,4 +1,4 @@ -import type { FeedbackFormData, FeedbackInternalOptions } from '../types'; +import type { FeedbackFormData, FeedbackInternalOptions } from '@sentry/types'; export type Props = Pick< FeedbackInternalOptions, diff --git a/packages/feedback/src/types/config.ts b/packages/types/src/feedback/config.ts similarity index 100% rename from packages/feedback/src/types/config.ts rename to packages/types/src/feedback/config.ts diff --git a/packages/feedback/src/types/form.ts b/packages/types/src/feedback/form.ts similarity index 72% rename from packages/feedback/src/types/form.ts rename to packages/types/src/feedback/form.ts index d669ad7ea22e..13c76f55fae1 100644 --- a/packages/feedback/src/types/form.ts +++ b/packages/types/src/feedback/form.ts @@ -1,4 +1,4 @@ -import type { Attachment } from '@sentry/types'; +import type { Attachment } from '../attachment'; export type FeedbackFormData = { name: string; diff --git a/packages/feedback/src/types/index.ts b/packages/types/src/feedback/index.ts similarity index 95% rename from packages/feedback/src/types/index.ts rename to packages/types/src/feedback/index.ts index cee1bae6ab87..162e4d0f2883 100644 --- a/packages/feedback/src/types/index.ts +++ b/packages/types/src/feedback/index.ts @@ -1,5 +1,5 @@ -import type { Attachment } from '@sentry/types'; import type { ComponentType } from 'preact'; +import type { Attachment } from '../attachment'; import type { FeedbackCallbacks, FeedbackGeneralConfiguration, @@ -10,6 +10,8 @@ import type { FeedbackTheme } from './theme'; export type { FeedbackFormData } from './form'; +export type { FeedbackEvent, UserFeedback } from './sendFeedback'; + export { FeedbackTheme }; export interface FeedbackThemes { themeDark: FeedbackTheme; diff --git a/packages/types/src/feedback.ts b/packages/types/src/feedback/sendFeedback.ts similarity index 87% rename from packages/types/src/feedback.ts rename to packages/types/src/feedback/sendFeedback.ts index 37dfe9818994..e8db8d905ed7 100644 --- a/packages/types/src/feedback.ts +++ b/packages/types/src/feedback/sendFeedback.ts @@ -1,5 +1,5 @@ -import type { Event } from './event'; -import type { User } from './user'; +import type { Event } from '../event'; +import type { User } from '../user'; /** * Crash report feedback object diff --git a/packages/feedback/src/types/theme.ts b/packages/types/src/feedback/theme.ts similarity index 100% rename from packages/feedback/src/types/theme.ts rename to packages/types/src/feedback/theme.ts diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts index 871f41b82625..5bd16a038773 100644 --- a/packages/types/src/index.ts +++ b/packages/types/src/index.ts @@ -69,7 +69,20 @@ export type { Profile, } from './profiling'; export type { ReplayEvent, ReplayRecordingData, ReplayRecordingMode } from './replay'; -export type { FeedbackEvent, UserFeedback } from './feedback'; +export type { + Dialog, + FeedbackEvent, + FeedbackFormData, + FeedbackInternalOptions, + FeedbackTheme, + FeedbackThemes, + OptionalFeedbackConfiguration, + OverrideFeedbackConfiguration, + ScreenshotInput, + SendFeedbackOptions, + SendFeedbackParams, + UserFeedback, +} from './feedback'; export type { QueryParams, Request, SanitizedRequestData } from './request'; export type { Runtime } from './runtime'; export type { CaptureContext, Scope, ScopeContext, ScopeData } from './scope'; From 371df709f12819a43a0d1be04fc581ee7a543045 Mon Sep 17 00:00:00 2001 From: Ryan Albrecht Date: Sun, 31 Mar 2024 11:01:33 -0700 Subject: [PATCH 02/32] dedupe import statements --- packages/feedback/src/core/integration.ts | 3 ++- packages/feedback/src/core/sendFeedback.ts | 8 ++++++-- packages/feedback/src/screenshot/createInput.ts | 3 +-- 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/packages/feedback/src/core/integration.ts b/packages/feedback/src/core/integration.ts index 011bc2cbe567..6b8c001c56f3 100644 --- a/packages/feedback/src/core/integration.ts +++ b/packages/feedback/src/core/integration.ts @@ -1,8 +1,9 @@ import { getClient } from '@sentry/core'; -import type { Integration, IntegrationFn } from '@sentry/types'; import type { Dialog, FeedbackInternalOptions, + Integration, + IntegrationFn, OptionalFeedbackConfiguration, OverrideFeedbackConfiguration, } from '@sentry/types'; diff --git a/packages/feedback/src/core/sendFeedback.ts b/packages/feedback/src/core/sendFeedback.ts index 8b3bb26748e8..c1ca772e6554 100644 --- a/packages/feedback/src/core/sendFeedback.ts +++ b/packages/feedback/src/core/sendFeedback.ts @@ -1,6 +1,10 @@ import { createAttachmentEnvelope, createEventEnvelope, getClient, withScope } from '@sentry/core'; -import type { FeedbackEvent, TransportMakeRequestResponse } from '@sentry/types'; -import type { SendFeedbackOptions, SendFeedbackParams } from '@sentry/types'; +import type { + FeedbackEvent, + SendFeedbackOptions, + SendFeedbackParams, + TransportMakeRequestResponse, +} from '@sentry/types'; import { getLocationHref } from '@sentry/utils'; import { FEEDBACK_API_SOURCE, FEEDBACK_WIDGET_SOURCE } from '../constants'; import { prepareFeedbackEvent } from '../util/prepareFeedbackEvent'; diff --git a/packages/feedback/src/screenshot/createInput.ts b/packages/feedback/src/screenshot/createInput.ts index 519e8a636201..93128d38720f 100644 --- a/packages/feedback/src/screenshot/createInput.ts +++ b/packages/feedback/src/screenshot/createInput.ts @@ -1,5 +1,4 @@ -import type { Attachment } from '@sentry/types'; -import type { Dialog, ScreenshotInput } from '@sentry/types'; +import type { Attachment, Dialog, ScreenshotInput } from '@sentry/types'; import type { h as hType } from 'preact'; import { DOCUMENT } from '../constants'; import { makeScreenshotEditorComponent } from './components/ScreenshotEditor'; From f20c39a445445cbf92bf40ec2a051019335cdf8a Mon Sep 17 00:00:00 2001 From: Ryan Albrecht Date: Sun, 31 Mar 2024 11:03:08 -0700 Subject: [PATCH 03/32] type the sendFeedback function --- packages/feedback/src/core/sendFeedback.ts | 17 ++++++----------- packages/feedback/src/modal/components/Form.tsx | 10 ++-------- packages/types/src/feedback/index.ts | 10 ++++++++-- packages/types/src/index.ts | 3 +-- 4 files changed, 17 insertions(+), 23 deletions(-) diff --git a/packages/feedback/src/core/sendFeedback.ts b/packages/feedback/src/core/sendFeedback.ts index c1ca772e6554..6fde3867a706 100644 --- a/packages/feedback/src/core/sendFeedback.ts +++ b/packages/feedback/src/core/sendFeedback.ts @@ -1,10 +1,5 @@ import { createAttachmentEnvelope, createEventEnvelope, getClient, withScope } from '@sentry/core'; -import type { - FeedbackEvent, - SendFeedbackOptions, - SendFeedbackParams, - TransportMakeRequestResponse, -} from '@sentry/types'; +import type { FeedbackEvent, SendFeedback } from '@sentry/types'; import { getLocationHref } from '@sentry/utils'; import { FEEDBACK_API_SOURCE, FEEDBACK_WIDGET_SOURCE } from '../constants'; import { prepareFeedbackEvent } from '../util/prepareFeedbackEvent'; @@ -12,10 +7,10 @@ import { prepareFeedbackEvent } from '../util/prepareFeedbackEvent'; /** * Public API to send a Feedback item to Sentry */ -export async function sendFeedback( - { name, email, message, attachments, source = FEEDBACK_API_SOURCE, url = getLocationHref() }: SendFeedbackParams, - { includeReplay = true }: SendFeedbackOptions = {}, -): Promise { +export const sendFeedback: SendFeedback = ( + { name, email, message, attachments, source = FEEDBACK_API_SOURCE, url = getLocationHref() }, + { includeReplay = true } = {}, +) => { if (!message) { throw new Error('Unable to submit feedback with empty message'); } @@ -101,7 +96,7 @@ export async function sendFeedback( throw error; } }); -} +}; /* * For reference, the fully built event looks something like this: diff --git a/packages/feedback/src/modal/components/Form.tsx b/packages/feedback/src/modal/components/Form.tsx index d4b6f7cb08a6..c9db17b562a9 100644 --- a/packages/feedback/src/modal/components/Form.tsx +++ b/packages/feedback/src/modal/components/Form.tsx @@ -1,10 +1,4 @@ -import type { - FeedbackFormData, - FeedbackInternalOptions, - ScreenshotInput, - SendFeedbackOptions, - SendFeedbackParams, -} from '@sentry/types'; +import type { FeedbackFormData, FeedbackInternalOptions, ScreenshotInput, SendFeedback } from '@sentry/types'; import { logger } from '@sentry/utils'; // biome-ignore lint/nursery/noUnusedImports: reason import { h } from 'preact'; // eslint-disable-line @typescript-eslint/no-unused-vars @@ -34,7 +28,7 @@ export interface Props defaultEmail: string; defaultName: string; onFormClose: () => void; - onSubmit: (data: SendFeedbackParams, options?: SendFeedbackOptions) => void; + onSubmit: SendFeedback; onSubmitSuccess: (data: FeedbackFormData) => void; onSubmitError: (error: Error) => void; screenshotInput: ScreenshotInput | undefined; diff --git a/packages/types/src/feedback/index.ts b/packages/types/src/feedback/index.ts index 162e4d0f2883..a70d6f938bf7 100644 --- a/packages/types/src/feedback/index.ts +++ b/packages/types/src/feedback/index.ts @@ -1,5 +1,6 @@ import type { ComponentType } from 'preact'; import type { Attachment } from '../attachment'; +import type { TransportMakeRequestResponse } from '../transport'; import type { FeedbackCallbacks, FeedbackGeneralConfiguration, @@ -45,7 +46,7 @@ export interface OptionalFeedbackConfiguration */ export type OverrideFeedbackConfiguration = Omit, 'themeLight' | 'themeDark'>; -export interface SendFeedbackParams { +interface SendFeedbackParams { message: string; name?: string; email?: string; @@ -54,13 +55,18 @@ export interface SendFeedbackParams { source?: string; } -export interface SendFeedbackOptions { +interface SendFeedbackOptions { /** * Should include replay with the feedback? */ includeReplay?: boolean; } +export type SendFeedback = ( + params: SendFeedbackParams, + options?: SendFeedbackOptions, +) => Promise; + export interface Dialog { /** * The HTMLElement that is containing all the form content diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts index 5bd16a038773..18a17dcd1b65 100644 --- a/packages/types/src/index.ts +++ b/packages/types/src/index.ts @@ -79,8 +79,7 @@ export type { OptionalFeedbackConfiguration, OverrideFeedbackConfiguration, ScreenshotInput, - SendFeedbackOptions, - SendFeedbackParams, + SendFeedback, UserFeedback, } from './feedback'; export type { QueryParams, Request, SanitizedRequestData } from './request'; From e436fd4e8c7982316f2d017670d18506988494ff Mon Sep 17 00:00:00 2001 From: Ryan Albrecht Date: Sun, 31 Mar 2024 11:06:42 -0700 Subject: [PATCH 04/32] streamline modal & screenshot integration files --- packages/feedback/src/core/integration.ts | 8 ++++---- packages/feedback/src/modal/createDialog.tsx | 4 ++-- packages/feedback/src/modal/integration.ts | 11 +++-------- packages/feedback/src/screenshot/integration.ts | 11 +++-------- 4 files changed, 12 insertions(+), 22 deletions(-) diff --git a/packages/feedback/src/core/integration.ts b/packages/feedback/src/core/integration.ts index 6b8c001c56f3..52e4f88985f4 100644 --- a/packages/feedback/src/core/integration.ts +++ b/packages/feedback/src/core/integration.ts @@ -24,8 +24,8 @@ import { SUBMIT_BUTTON_LABEL, SUCCESS_MESSAGE_TEXT, } from '../constants'; -import type { IFeedbackModalIntegration } from '../modal/integration'; -import type { IFeedbackScreenshotIntegration } from '../screenshot/integration'; +import type { FeedbackModalIntegration } from '../modal/integration'; +import type { FeedbackScreenshotIntegration } from '../screenshot/integration'; import { DEBUG_BUILD } from '../util/debug-build'; import { isScreenshotSupported } from '../util/isScreenshotSupported'; import { mergeOptions } from '../util/mergeOptions'; @@ -154,8 +154,8 @@ export const feedbackIntegration = (({ if (!client) { throw new Error('Sentry Client is not initialized correctly'); } - const modalIntegration = client.getIntegrationByName('FeedbackModal'); - const screenshotIntegration = client.getIntegrationByName('FeedbackScreenshot'); + const modalIntegration = client.getIntegrationByName('FeedbackModal'); + const screenshotIntegration = client.getIntegrationByName('FeedbackScreenshot'); const screenshotIsSupported = isScreenshotSupported(); // START TEMP: Error messages diff --git a/packages/feedback/src/modal/createDialog.tsx b/packages/feedback/src/modal/createDialog.tsx index 0f149f940c1a..e748addafa38 100644 --- a/packages/feedback/src/modal/createDialog.tsx +++ b/packages/feedback/src/modal/createDialog.tsx @@ -3,13 +3,13 @@ import type { Dialog, FeedbackFormData, FeedbackInternalOptions } from '@sentry/ import { h, render } from 'preact'; import { DOCUMENT } from '../constants'; import type { sendFeedback as sendFeedbackFn } from '../core/sendFeedback'; -import type { IFeedbackScreenshotIntegration } from '../screenshot/integration'; +import type { FeedbackScreenshotIntegration } from '../screenshot/integration'; import { createDialogStyles } from './components/Dialog.css'; import { DialogComponent } from './components/DialogContainer'; interface Props { options: FeedbackInternalOptions; - screenshotIntegration: IFeedbackScreenshotIntegration | undefined; + screenshotIntegration: FeedbackScreenshotIntegration | undefined; sendFeedback: typeof sendFeedbackFn; shadow: ShadowRoot; } diff --git a/packages/feedback/src/modal/integration.ts b/packages/feedback/src/modal/integration.ts index fa034650f023..70c354e51040 100644 --- a/packages/feedback/src/modal/integration.ts +++ b/packages/feedback/src/modal/integration.ts @@ -1,4 +1,3 @@ -import { defineIntegration } from '@sentry/core'; import type { Integration, IntegrationFn } from '@sentry/types'; import { createDialog } from './createDialog'; @@ -6,17 +5,13 @@ interface PublicFeedbackModalIntegration { createDialog: typeof createDialog; } -const INTEGRATION_NAME = 'FeedbackModal'; +export type FeedbackModalIntegration = Integration & PublicFeedbackModalIntegration; -export type IFeedbackModalIntegration = Integration & PublicFeedbackModalIntegration; - -export const _feedbackModalIntegration = (() => { +export const feedbackModalIntegration = ((): FeedbackModalIntegration => { return { - name: INTEGRATION_NAME, + name: 'FeedbackModal', // eslint-disable-next-line @typescript-eslint/no-empty-function setupOnce() {}, createDialog, }; }) satisfies IntegrationFn; - -export const feedbackModalIntegration = defineIntegration(_feedbackModalIntegration); diff --git a/packages/feedback/src/screenshot/integration.ts b/packages/feedback/src/screenshot/integration.ts index 3b959b971d70..5f3f973651af 100644 --- a/packages/feedback/src/screenshot/integration.ts +++ b/packages/feedback/src/screenshot/integration.ts @@ -1,4 +1,3 @@ -import { defineIntegration } from '@sentry/core'; import type { Integration, IntegrationFn } from '@sentry/types'; import { createInput } from './createInput'; @@ -6,17 +5,13 @@ interface PublicFeedbackScreenshotIntegration { createInput: typeof createInput; } -const INTEGRATION_NAME = 'FeedbackScreenshot'; +export type FeedbackScreenshotIntegration = Integration & PublicFeedbackScreenshotIntegration; -export type IFeedbackScreenshotIntegration = Integration & PublicFeedbackScreenshotIntegration; - -export const _feedbackScreenshotIntegration = (() => { +export const feedbackScreenshotIntegration = ((): FeedbackScreenshotIntegration => { return { - name: INTEGRATION_NAME, + name: 'FeedbackScreenshot', // eslint-disable-next-line @typescript-eslint/no-empty-function setupOnce() {}, createInput, }; }) satisfies IntegrationFn; - -export const feedbackScreenshotIntegration = defineIntegration(_feedbackScreenshotIntegration); From d7ced60500309ab17dbd4d02afcb7e9663e7252f Mon Sep 17 00:00:00 2001 From: Ryan Albrecht Date: Sun, 31 Mar 2024 11:15:30 -0700 Subject: [PATCH 05/32] type the createInput function --- packages/feedback/src/screenshot/createInput.ts | 7 +++---- packages/feedback/src/screenshot/integration.ts | 4 ++-- packages/types/src/feedback/index.ts | 2 ++ packages/types/src/index.ts | 1 + 4 files changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/feedback/src/screenshot/createInput.ts b/packages/feedback/src/screenshot/createInput.ts index 93128d38720f..98745ae081b8 100644 --- a/packages/feedback/src/screenshot/createInput.ts +++ b/packages/feedback/src/screenshot/createInput.ts @@ -1,12 +1,11 @@ -import type { Attachment, Dialog, ScreenshotInput } from '@sentry/types'; -import type { h as hType } from 'preact'; +import type { Attachment, FeedbackCreateInputElement } from '@sentry/types'; import { DOCUMENT } from '../constants'; import { makeScreenshotEditorComponent } from './components/ScreenshotEditor'; /** * */ -export function createInput(h: typeof hType, dialog: Dialog): ScreenshotInput { +export const createInput: FeedbackCreateInputElement = (h, dialog) => { const imageBuffer = DOCUMENT.createElement('canvas'); return { @@ -29,4 +28,4 @@ export function createInput(h: typeof hType, dialog: Dialog): ScreenshotInput { return; }, }; -} +}; diff --git a/packages/feedback/src/screenshot/integration.ts b/packages/feedback/src/screenshot/integration.ts index 5f3f973651af..ac055a7a3412 100644 --- a/packages/feedback/src/screenshot/integration.ts +++ b/packages/feedback/src/screenshot/integration.ts @@ -1,8 +1,8 @@ -import type { Integration, IntegrationFn } from '@sentry/types'; +import type { FeedbackCreateInputElement, Integration, IntegrationFn } from '@sentry/types'; import { createInput } from './createInput'; interface PublicFeedbackScreenshotIntegration { - createInput: typeof createInput; + createInput: FeedbackCreateInputElement; } export type FeedbackScreenshotIntegration = Integration & PublicFeedbackScreenshotIntegration; diff --git a/packages/types/src/feedback/index.ts b/packages/types/src/feedback/index.ts index a70d6f938bf7..6f999a0d72f7 100644 --- a/packages/types/src/feedback/index.ts +++ b/packages/types/src/feedback/index.ts @@ -67,6 +67,8 @@ export type SendFeedback = ( options?: SendFeedbackOptions, ) => Promise; +export type FeedbackCreateInputElement = (h: any, dialog: Dialog) => ScreenshotInput; + export interface Dialog { /** * The HTMLElement that is containing all the form content diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts index 18a17dcd1b65..6cb060006a7f 100644 --- a/packages/types/src/index.ts +++ b/packages/types/src/index.ts @@ -71,6 +71,7 @@ export type { export type { ReplayEvent, ReplayRecordingData, ReplayRecordingMode } from './replay'; export type { Dialog, + FeedbackCreateInputElement, FeedbackEvent, FeedbackFormData, FeedbackInternalOptions, From 8be9dfa1225e6ec5ade6bedb8d92529b74c60031 Mon Sep 17 00:00:00 2001 From: Ryan Albrecht Date: Sun, 31 Mar 2024 11:22:24 -0700 Subject: [PATCH 06/32] type FeedbackScreenshotIntegration --- packages/feedback/src/core/integration.ts | 2 +- packages/feedback/src/modal/createDialog.tsx | 3 +-- packages/feedback/src/screenshot/integration.ts | 8 +------- packages/types/src/feedback/index.ts | 5 +++++ packages/types/src/index.ts | 1 + 5 files changed, 9 insertions(+), 10 deletions(-) diff --git a/packages/feedback/src/core/integration.ts b/packages/feedback/src/core/integration.ts index 52e4f88985f4..a0ab776e4da1 100644 --- a/packages/feedback/src/core/integration.ts +++ b/packages/feedback/src/core/integration.ts @@ -2,6 +2,7 @@ import { getClient } from '@sentry/core'; import type { Dialog, FeedbackInternalOptions, + FeedbackScreenshotIntegration, Integration, IntegrationFn, OptionalFeedbackConfiguration, @@ -25,7 +26,6 @@ import { SUCCESS_MESSAGE_TEXT, } from '../constants'; import type { FeedbackModalIntegration } from '../modal/integration'; -import type { FeedbackScreenshotIntegration } from '../screenshot/integration'; import { DEBUG_BUILD } from '../util/debug-build'; import { isScreenshotSupported } from '../util/isScreenshotSupported'; import { mergeOptions } from '../util/mergeOptions'; diff --git a/packages/feedback/src/modal/createDialog.tsx b/packages/feedback/src/modal/createDialog.tsx index e748addafa38..af34c84c5015 100644 --- a/packages/feedback/src/modal/createDialog.tsx +++ b/packages/feedback/src/modal/createDialog.tsx @@ -1,9 +1,8 @@ import { getCurrentScope } from '@sentry/core'; -import type { Dialog, FeedbackFormData, FeedbackInternalOptions } from '@sentry/types'; +import type { Dialog, FeedbackFormData, FeedbackInternalOptions, FeedbackScreenshotIntegration } from '@sentry/types'; import { h, render } from 'preact'; import { DOCUMENT } from '../constants'; import type { sendFeedback as sendFeedbackFn } from '../core/sendFeedback'; -import type { FeedbackScreenshotIntegration } from '../screenshot/integration'; import { createDialogStyles } from './components/Dialog.css'; import { DialogComponent } from './components/DialogContainer'; diff --git a/packages/feedback/src/screenshot/integration.ts b/packages/feedback/src/screenshot/integration.ts index ac055a7a3412..9167095c4650 100644 --- a/packages/feedback/src/screenshot/integration.ts +++ b/packages/feedback/src/screenshot/integration.ts @@ -1,12 +1,6 @@ -import type { FeedbackCreateInputElement, Integration, IntegrationFn } from '@sentry/types'; +import type { FeedbackScreenshotIntegration, IntegrationFn } from '@sentry/types'; import { createInput } from './createInput'; -interface PublicFeedbackScreenshotIntegration { - createInput: FeedbackCreateInputElement; -} - -export type FeedbackScreenshotIntegration = Integration & PublicFeedbackScreenshotIntegration; - export const feedbackScreenshotIntegration = ((): FeedbackScreenshotIntegration => { return { name: 'FeedbackScreenshot', diff --git a/packages/types/src/feedback/index.ts b/packages/types/src/feedback/index.ts index 6f999a0d72f7..52aa9c0526f8 100644 --- a/packages/types/src/feedback/index.ts +++ b/packages/types/src/feedback/index.ts @@ -1,5 +1,6 @@ import type { ComponentType } from 'preact'; import type { Attachment } from '../attachment'; +import type { Integration } from '../integration'; import type { TransportMakeRequestResponse } from '../transport'; import type { FeedbackCallbacks, @@ -109,3 +110,7 @@ export interface ScreenshotInput { */ value: () => Promise; } + +export interface FeedbackScreenshotIntegration extends Integration { + createInput: FeedbackCreateInputElement; +} diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts index 6cb060006a7f..bb68b8624bcd 100644 --- a/packages/types/src/index.ts +++ b/packages/types/src/index.ts @@ -75,6 +75,7 @@ export type { FeedbackEvent, FeedbackFormData, FeedbackInternalOptions, + FeedbackScreenshotIntegration, FeedbackTheme, FeedbackThemes, OptionalFeedbackConfiguration, From 3716f4c2ccd51fd21ef67331ef570b1b8c506114 Mon Sep 17 00:00:00 2001 From: Ryan Albrecht Date: Sun, 31 Mar 2024 11:26:57 -0700 Subject: [PATCH 07/32] type FeedbackCreateDialog --- packages/feedback/src/modal/createDialog.tsx | 14 +++----------- packages/feedback/src/modal/integration.ts | 4 ++-- packages/types/src/feedback/index.ts | 9 +++++++++ packages/types/src/index.ts | 1 + 4 files changed, 15 insertions(+), 13 deletions(-) diff --git a/packages/feedback/src/modal/createDialog.tsx b/packages/feedback/src/modal/createDialog.tsx index af34c84c5015..ea416691702a 100644 --- a/packages/feedback/src/modal/createDialog.tsx +++ b/packages/feedback/src/modal/createDialog.tsx @@ -1,19 +1,11 @@ import { getCurrentScope } from '@sentry/core'; -import type { Dialog, FeedbackFormData, FeedbackInternalOptions, FeedbackScreenshotIntegration } from '@sentry/types'; +import type { FeedbackCreateDialog, FeedbackFormData } from '@sentry/types'; import { h, render } from 'preact'; import { DOCUMENT } from '../constants'; -import type { sendFeedback as sendFeedbackFn } from '../core/sendFeedback'; import { createDialogStyles } from './components/Dialog.css'; import { DialogComponent } from './components/DialogContainer'; -interface Props { - options: FeedbackInternalOptions; - screenshotIntegration: FeedbackScreenshotIntegration | undefined; - sendFeedback: typeof sendFeedbackFn; - shadow: ShadowRoot; -} - -export function createDialog({ options, screenshotIntegration, sendFeedback, shadow }: Props): Dialog { +export const createDialog: FeedbackCreateDialog = ({ options, screenshotIntegration, sendFeedback, shadow }) => { const userKey = options.useSentryUser; const scope = getCurrentScope(); const user = scope && scope.getUser(); @@ -91,4 +83,4 @@ export function createDialog({ options, screenshotIntegration, sendFeedback, sha }; return dialog; -} +}; diff --git a/packages/feedback/src/modal/integration.ts b/packages/feedback/src/modal/integration.ts index 70c354e51040..3114ac988152 100644 --- a/packages/feedback/src/modal/integration.ts +++ b/packages/feedback/src/modal/integration.ts @@ -1,8 +1,8 @@ -import type { Integration, IntegrationFn } from '@sentry/types'; +import type { FeedbackCreateDialog, Integration, IntegrationFn } from '@sentry/types'; import { createDialog } from './createDialog'; interface PublicFeedbackModalIntegration { - createDialog: typeof createDialog; + createDialog: FeedbackCreateDialog; } export type FeedbackModalIntegration = Integration & PublicFeedbackModalIntegration; diff --git a/packages/types/src/feedback/index.ts b/packages/types/src/feedback/index.ts index 52aa9c0526f8..61e2c4de23b7 100644 --- a/packages/types/src/feedback/index.ts +++ b/packages/types/src/feedback/index.ts @@ -99,6 +99,15 @@ export interface Dialog { close: () => void; } +interface CreateDialogProps { + options: FeedbackInternalOptions; + screenshotIntegration: FeedbackScreenshotIntegration | undefined; + sendFeedback: SendFeedback; + shadow: ShadowRoot; +} + +export type FeedbackCreateDialog = (props: CreateDialogProps) => Dialog; + export interface ScreenshotInput { /** * The preact component diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts index bb68b8624bcd..8d3ff707171f 100644 --- a/packages/types/src/index.ts +++ b/packages/types/src/index.ts @@ -71,6 +71,7 @@ export type { export type { ReplayEvent, ReplayRecordingData, ReplayRecordingMode } from './replay'; export type { Dialog, + FeedbackCreateDialog, FeedbackCreateInputElement, FeedbackEvent, FeedbackFormData, From 5871a2e8346f39daf16c09f697fd8365eb96d869 Mon Sep 17 00:00:00 2001 From: Ryan Albrecht Date: Sun, 31 Mar 2024 11:28:58 -0700 Subject: [PATCH 08/32] type FeedbackModalIntegration --- packages/feedback/src/core/integration.ts | 2 +- packages/feedback/src/modal/integration.ts | 8 +------- packages/types/src/feedback/index.ts | 4 ++++ packages/types/src/index.ts | 1 + 4 files changed, 7 insertions(+), 8 deletions(-) diff --git a/packages/feedback/src/core/integration.ts b/packages/feedback/src/core/integration.ts index a0ab776e4da1..111e330d3a80 100644 --- a/packages/feedback/src/core/integration.ts +++ b/packages/feedback/src/core/integration.ts @@ -2,6 +2,7 @@ import { getClient } from '@sentry/core'; import type { Dialog, FeedbackInternalOptions, + FeedbackModalIntegration, FeedbackScreenshotIntegration, Integration, IntegrationFn, @@ -25,7 +26,6 @@ import { SUBMIT_BUTTON_LABEL, SUCCESS_MESSAGE_TEXT, } from '../constants'; -import type { FeedbackModalIntegration } from '../modal/integration'; import { DEBUG_BUILD } from '../util/debug-build'; import { isScreenshotSupported } from '../util/isScreenshotSupported'; import { mergeOptions } from '../util/mergeOptions'; diff --git a/packages/feedback/src/modal/integration.ts b/packages/feedback/src/modal/integration.ts index 3114ac988152..a89ae3aebcd8 100644 --- a/packages/feedback/src/modal/integration.ts +++ b/packages/feedback/src/modal/integration.ts @@ -1,12 +1,6 @@ -import type { FeedbackCreateDialog, Integration, IntegrationFn } from '@sentry/types'; +import type { FeedbackModalIntegration, IntegrationFn } from '@sentry/types'; import { createDialog } from './createDialog'; -interface PublicFeedbackModalIntegration { - createDialog: FeedbackCreateDialog; -} - -export type FeedbackModalIntegration = Integration & PublicFeedbackModalIntegration; - export const feedbackModalIntegration = ((): FeedbackModalIntegration => { return { name: 'FeedbackModal', diff --git a/packages/types/src/feedback/index.ts b/packages/types/src/feedback/index.ts index 61e2c4de23b7..354d5a2fb8fd 100644 --- a/packages/types/src/feedback/index.ts +++ b/packages/types/src/feedback/index.ts @@ -120,6 +120,10 @@ export interface ScreenshotInput { value: () => Promise; } +export interface FeedbackModalIntegration extends Integration { + createDialog: FeedbackCreateDialog; +} + export interface FeedbackScreenshotIntegration extends Integration { createInput: FeedbackCreateInputElement; } diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts index 8d3ff707171f..d377549fde54 100644 --- a/packages/types/src/index.ts +++ b/packages/types/src/index.ts @@ -76,6 +76,7 @@ export type { FeedbackEvent, FeedbackFormData, FeedbackInternalOptions, + FeedbackModalIntegration, FeedbackScreenshotIntegration, FeedbackTheme, FeedbackThemes, From f4642ae7436cd06d9f8559b59ace173b92212efa Mon Sep 17 00:00:00 2001 From: Ryan Albrecht Date: Sun, 31 Mar 2024 11:34:03 -0700 Subject: [PATCH 09/32] remove extra FeedbackTheme types --- packages/feedback/src/core/createMainStyles.ts | 9 ++++++--- packages/types/src/feedback/index.ts | 6 ------ packages/types/src/index.ts | 2 -- 3 files changed, 6 insertions(+), 11 deletions(-) diff --git a/packages/feedback/src/core/createMainStyles.ts b/packages/feedback/src/core/createMainStyles.ts index b7a629d6ea34..ca5f138cb960 100644 --- a/packages/feedback/src/core/createMainStyles.ts +++ b/packages/feedback/src/core/createMainStyles.ts @@ -1,7 +1,7 @@ -import type { FeedbackTheme, FeedbackThemes } from '@sentry/types'; +import type { FeedbackInternalOptions } from '@sentry/types'; import { DOCUMENT } from '../constants'; -function getThemedCssVariables(theme: FeedbackTheme): string { +function getThemedCssVariables(theme: FeedbackInternalOptions['themeLight']): string { return ` --background: ${theme.background}; --background-hover: ${theme.backgroundHover}; @@ -39,7 +39,10 @@ function getThemedCssVariables(theme: FeedbackTheme): string { /** * Creates