fea(feedback): Add reason argument to onFormClose callback

Author: ryan953

docs/migration/feedback.md

@@ -86,7 +86,7 @@ For example, `attachTo()` is a convenience wrapper over the lifecycle methods. Y
 function attachTo(button: HTMLElement) {
   const handleClick = () => {
     const widget = feedbackInstance.createWidget({
-      onFormClose: () => {
+      onFormClose: ({ reason }) => {
         widget.close();
       },
       onFormSubmited: () => {

packages/feedback/rollup.bundle.config.mjs

@@ -16,6 +16,21 @@ export default [
       },
     }),
   ),
+  ...makeBundleConfigVariants(
+    makeBaseBundleConfig({
+      bundleType: 'addon',
+      entrypoints: ['src/core/integration.ts'],
+      jsVersion: 'es6',
+      licenseTitle: '@sentry-internal/feedback-core',
+      outputFileBase: () => 'bundles/feedback-core',
+      sucrase: {
+        // The feedback widget is using preact so we need different pragmas and jsx runtimes
+        jsxPragma: 'h',
+        jsxFragmentPragma: 'Fragment',
+        jsxRuntime: 'classic',
+      },
+    }),
+  ),
   ...makeBundleConfigVariants(
     makeBaseBundleConfig({
       bundleType: 'addon',

packages/feedback/src/core/integration.ts

@@ -231,9 +231,9 @@ export const buildFeedbackIntegration = ({
         if (!dialog) {
           dialog = await _loadAndRenderDialog({
             ...mergedOptions,
-            onFormClose: () => {
+            onFormClose: ({ reason }) => {
               dialog && dialog.close();
-              mergedOptions.onFormClose && mergedOptions.onFormClose();
+              mergedOptions.onFormClose && mergedOptions.onFormClose({ reason });
             },
             onFormSubmitted: () => {
               dialog && dialog.removeFromDom();

packages/feedback/src/modal/components/Dialog.tsx

@@ -54,7 +54,11 @@ export function Dialog({ open, onFormSubmitted, ...props }: Props): VNode {
           </div>
         </div>
       ) : (
-        <dialog class="dialog" onClick={options.onFormClose} open={open}>
+        <dialog
+          class="dialog"
+          onClick={() => options.onFormClose && options.onFormClose({ reason: 'dialog-dismissed' })}
+          open={open}
+        >
           <div class="dialog__position">
             <div
               class="dialog__content"

packages/feedback/src/modal/components/Form.tsx

@@ -17,7 +17,7 @@ export interface Props extends Pick<FeedbackInternalOptions, 'showEmail' | 'show
   options: FeedbackInternalOptions;
   defaultEmail: string;
   defaultName: string;
-  onFormClose: () => void;
+  onFormClose: (args: { reason: 'dialog-dismissed' | 'form-cancelled' }) => void;
   onSubmit: SendFeedback;
   onSubmitSuccess: (data: FeedbackFormData) => void;
   onSubmitError: (error: Error) => void;
@@ -217,7 +217,7 @@ export function Form({
           <button class="btn btn--primary" type="submit">
             {submitButtonLabel}
           </button>
-          <button class="btn btn--default" type="button" onClick={onFormClose}>
+          <button class="btn btn--default" type="button" onClick={() => onFormClose({ reason: 'form-cancelled' })}>
             {cancelButtonLabel}
           </button>
         </div>

packages/feedback/src/modal/integration.tsx

@@ -71,9 +71,9 @@ export const feedbackModalIntegration = ((): FeedbackModalIntegration => {
             showEmail={options.showEmail || options.isEmailRequired}
             defaultName={(userKey && user && user[userKey.name]) || ''}
             defaultEmail={(userKey && user && user[userKey.email]) || ''}
-            onFormClose={() => {
+            onFormClose={({ reason }) => {
               renderContent(false);
-              options.onFormClose && options.onFormClose();
+              options.onFormClose && options.onFormClose({ reason });
             }}
             onSubmit={sendFeedback}
             onSubmitSuccess={(data: FeedbackFormData) => {

packages/feedback/src/screenshot/integration.ts

@@ -31,7 +31,7 @@ export const feedbackScreenshotIntegration = ((): FeedbackScreenshotIntegration
             const attachment: Attachment = {
               data,
               filename: 'screenshot.png',
-              contentType: 'application/png',
+              // contentType: 'application/png',
               // attachmentType?: string;
             };
             return attachment;

packages/feedback/src/util/mergeOptions.ts

@@ -19,9 +19,9 @@ export function mergeOptions(
       optionOverrides.onFormOpen && optionOverrides.onFormOpen();
       defaultOptions.onFormOpen && defaultOptions.onFormOpen();
     },
-    onFormClose: () => {
-      optionOverrides.onFormClose && optionOverrides.onFormClose();
-      defaultOptions.onFormClose && defaultOptions.onFormClose();
+    onFormClose: (...args) => {
+      optionOverrides.onFormClose && optionOverrides.onFormClose(...args);
+      defaultOptions.onFormClose && defaultOptions.onFormClose(...args);
     },
     onSubmitSuccess: (data: FeedbackFormData) => {
       optionOverrides.onSubmitSuccess && optionOverrides.onSubmitSuccess(data);

packages/integration-shims/src/Feedback.ts

@@ -2,7 +2,7 @@ import type { Integration } from '@sentry/types';
 import { consoleSandbox } from '@sentry/utils';
 import { FAKE_FUNCTION } from './common';
 
-const FEEDBACK_INTEGRATION_METHODS = ['attachTo', 'createWidget', 'remove'] as const;
+const FEEDBACK_INTEGRATION_METHODS = ['attachTo', 'createForm', 'createWidget', 'remove'] as const;
 
 type FeedbackSpecificMethods = Record<(typeof FEEDBACK_INTEGRATION_METHODS)[number], () => void>;
 

packages/types/src/feedback/config.ts

@@ -175,7 +175,7 @@ export interface FeedbackCallbacks {
   /**
    * Callback when form is closed and not submitted
    */
-  onFormClose?: () => void;
+  onFormClose?: (args: { reason: 'dialog-dismissed' | 'form-cancelled' }) => void;
 
   /**
    * Callback when feedback is successfully submitted