streamline some props for attachments and createDialog

Author: ryan953

packages/feedback2/src/core/integration.ts

@@ -363,25 +363,15 @@ export class Feedback2 implements Integration {
       throw new Error('Not implemented yet');
     }
 
-    const shadow = this._getShadow(options);
-
-    // TODO: some combination stuff when screenshots exists:
-    const dialog = modalIntegration.createDialog(
+    const dialog = modalIntegration.createDialog({
+      shadow: this._getShadow(options),
+      sendFeedback,
       options,
-      {
-        onCreate: (dialog: DialogComponent) => {
-          shadow.appendChild(dialog.style);
-          shadow.appendChild(dialog.el);
-        },
-        onSubmit: sendFeedback,
-        onDone: (dialog: DialogComponent) => {
-          shadow.removeChild(dialog.el);
-          shadow.removeChild(dialog.style);
-          this._dialog = null;
-        },
+      onDone: () => {
+        this._dialog = null;
       },
       screenshotIntegration,
-    );
+    });
     this._dialog = dialog;
     return dialog;
   }

packages/feedback2/src/core/sendFeedback.ts

@@ -9,7 +9,7 @@ import { prepareFeedbackEvent } from '../util/prepareFeedbackEvent';
  * Public API to send a Feedback item to Sentry
  */
 export async function sendFeedback(
-  { name, email, message, attachment, source = FEEDBACK_API_SOURCE, url = getLocationHref() }: SendFeedbackParams,
+  { name, email, message, attachments, source = FEEDBACK_API_SOURCE, url = getLocationHref() }: SendFeedbackParams,
   { includeReplay = true }: SendFeedbackOptions = {},
 ): Promise<TransportMakeRequestResponse> {
   if (!message) {
@@ -60,17 +60,12 @@ export async function sendFeedback(
         createEventEnvelope(feedbackEvent, dsn, client.getOptions()._metadata, client.getOptions().tunnel),
       );
 
-      if (attachment) {
-        const formatted = {
-          filename: attachment.name,
-          data: new Uint8Array(await attachment.arrayBuffer()),
-          contentType: attachment.type,
-        };
-        console.log({ formatted });
+      if (attachments && attachments.length) {
+        // TODO: https://docs.sentry.io/platforms/javascript/enriching-events/attachments/
         await transport.send(
           createAttachmentEnvelope(
             feedbackEvent,
-            [formatted],
+            attachments,
             dsn,
             client.getOptions()._metadata,
             client.getOptions().tunnel,

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

@@ -71,15 +71,8 @@ export function Form({
   const ScreenshotInput = screenshotWidget && screenshotWidget.input;
   const ScreenshotToggle = screenshotWidget && screenshotWidget.toggle;
 
-  const validateForm = useCallback(
-    (form: HTMLFormElement) => {
-      const formData = new FormData(form);
-      const data: FeedbackFormData = {
-        name: retrieveStringValue(formData, 'name'),
-        email: retrieveStringValue(formData, 'email'),
-        message: retrieveStringValue(formData, 'message'),
-        attachment: (formData.get('attachment') as File) || undefined,
-      };
+  const hasAllRequiredFields = useCallback(
+    (data: FeedbackFormData) => {
       const missingFields = getMissingFields(data, {
         emailLabel,
         isEmailRequired,
@@ -94,32 +87,27 @@ export function Form({
         setError(null);
       }
 
-      return { data, missingFields };
+      return missingFields.length === 0;
     },
     [emailLabel, isEmailRequired, isNameRequired, messageLabel, nameLabel],
   );
 
-  const handleFormData = useCallback(
-    async (e: JSX.TargetedEvent<HTMLFormElement>) => {
-      if (screenshotWidget && includeScreenshot && 'formData' in e && e.formData instanceof FormData) {
-        const value = await screenshotWidget.value();
-        if (value) {
-          e.formData.set('attachment', value, 'screenshot.png');
-        }
-      }
-    },
-    [screenshotWidget, includeScreenshot],
-  );
-
   const handleSubmit = useCallback(
     async (e: JSX.TargetedSubmitEvent<HTMLFormElement>) => {
       try {
         e.preventDefault();
         if (!(e.target instanceof HTMLFormElement)) {
           return;
         }
-        const { data, missingFields } = validateForm(e.target);
-        if (missingFields.length > 0) {
+        const formData = new FormData(e.target);
+        const attachment = await (screenshotWidget && includeScreenshot ? screenshotWidget.value() : undefined);
+        const data: FeedbackFormData = {
+          name: retrieveStringValue(formData, 'name'),
+          email: retrieveStringValue(formData, 'email'),
+          message: retrieveStringValue(formData, 'message'),
+          attachments: attachment ? [attachment] : undefined,
+        };
+        if (!hasAllRequiredFields(data)) {
           return;
         }
         try {
@@ -138,7 +126,7 @@ export function Form({
   );
 
   return (
-    <form class="form" onSubmit={handleSubmit} onFormData={handleFormData}>
+    <form class="form" onSubmit={handleSubmit}>
       {error ? <div class="form__error-container">{error}</div> : null}
 
       {ScreenshotInput && includeScreenshot ? <ScreenshotInput initialImage={undefined} /> : null}

packages/feedback2/src/modal/integration.ts

@@ -2,31 +2,28 @@ import { getCurrentScope } from '@sentry/core';
 import type { Integration, IntegrationFn } from '@sentry/types';
 import { isBrowser } from '@sentry/utils';
 import { h } from 'preact';
+import type { sendFeedback as sendFeedbackFn } from '../core/sendFeedback';
 import type { Feedback2Screenshot } from '../screenshot/integration';
-import type { FeedbackFormData, FeedbackInternalOptions, SendFeedbackOptions, SendFeedbackParams } from '../types';
+import type { FeedbackFormData, FeedbackInternalOptions } from '../types';
 import { Dialog } from './components/Dialog';
 import type { DialogComponent } from './components/Dialog';
 
-/**
- * Internal callbacks for pushing more form event code into the Feedback2Modal integration
- */
-export interface DialogLifecycleCallbacks {
-  /**
-   * When the dialog is created.
-   */
-  onCreate: (dialog: DialogComponent) => void;
+interface CreateDialogProps {
+  shadow: ShadowRoot;
 
-  /**
-   * When the data is ready to be submitted
-   */
-  onSubmit: (data: SendFeedbackParams, options?: SendFeedbackOptions) => void;
+  sendFeedback: typeof sendFeedbackFn;
+
+  options: FeedbackInternalOptions;
 
   /**
    * When the dialog is either closed, or was submitted successfully, and nothing is rendered anymore.
    *
    * This is called as part of onFormClose and onFormSubmitted
    */
-  onDone: (dialog: DialogComponent) => void;
+  onDone: () => void;
+
+  // eslint-disable-next-line deprecation/deprecation
+  screenshotIntegration: Feedback2Screenshot | undefined;
 }
 
 export const feedback2ModalIntegration = (() => {
@@ -69,12 +66,13 @@ export class Feedback2Modal implements Integration {
   /**
    *
    */
-  public createDialog(
-    options: FeedbackInternalOptions,
-    callbacks: DialogLifecycleCallbacks,
-    // eslint-disable-next-line deprecation/deprecation
-    screenshotIntegration: Feedback2Screenshot | undefined,
-  ): DialogComponent {
+  public createDialog({
+    shadow,
+    sendFeedback,
+    options,
+    onDone,
+    screenshotIntegration,
+  }: CreateDialogProps): DialogComponent {
     const userKey = options.useSentryUser;
     const scope = getCurrentScope();
     const user = scope && scope.getUser();
@@ -102,22 +100,30 @@ export class Feedback2Modal implements Integration {
       defaultEmail: (userKey && user && user[userKey.email]) || '',
       successMessageText: options.successMessageText,
       onFormClose: () => {
-        callbacks.onDone(dialog);
+        shadow.removeChild(dialog.el);
+        shadow.removeChild(dialog.style);
+        screenshotWidget && shadow.removeChild(screenshotWidget.style);
+        onDone();
         options.onFormClose && options.onFormClose();
       },
-      onSubmit: callbacks.onSubmit,
+      onSubmit: sendFeedback,
       onSubmitSuccess: (data: FeedbackFormData) => {
         options.onSubmitSuccess && options.onSubmitSuccess(data);
       },
       onSubmitError: (error: Error) => {
         options.onSubmitError && options.onSubmitError(error);
       },
       onFormSubmitted: () => {
-        callbacks.onDone(dialog);
+        shadow.removeChild(dialog.el);
+        shadow.removeChild(dialog.style);
+        screenshotWidget && shadow.removeChild(screenshotWidget.style);
+        onDone();
         options.onFormSubmitted && options.onFormSubmitted();
       },
     });
-    callbacks.onCreate(dialog);
+    shadow.appendChild(dialog.style);
+    screenshotWidget && shadow.appendChild(screenshotWidget.style);
+    shadow.appendChild(dialog.el);
     options.onFormOpen && options.onFormOpen();
 
     return dialog;

packages/feedback2/src/screenshot/components/ScreenshotInput.css.ts

@@ -0,0 +1,18 @@
+import { DOCUMENT } from '../../constants';
+
+/**
+ * Creates <style> element for widget dialog
+ */
+export function createScreenshotInputStyles(): HTMLStyleElement {
+  const style = DOCUMENT.createElement('style');
+
+  style.textContent = `
+.editor {
+  background: red;
+  width: 75px;
+  height: 75px;
+}
+`;
+
+  return style;
+}

packages/feedback2/src/screenshot/components/ScreenshotInput.tsx

@@ -1,4 +1,5 @@
 import type { ComponentType, VNode, h as hType } from 'preact';
+import { useEffect, useRef } from 'preact/hooks';
 
 export interface Props {
   initialImage: unknown;
@@ -9,9 +10,17 @@ export function makeInput(h: typeof hType, canvasEl: HTMLCanvasElement): Compone
   return function ScreenshotToggle({ initialImage }: Props): VNode {
     console.log({ initialImage, canvasEl }); // eslint-disable-line no-console
 
+    const canvasContainerRef = useRef<HTMLDivElement>(null);
+    useEffect(() => {
+      const container = canvasContainerRef.current;
+      container && container.appendChild(canvasEl);
+      return () => container && container.removeChild(canvasEl);
+    }, [canvasEl]);
+
     return (
-      <div style={{ background: 'red', width: '100px', height: '100px' }}>
+      <div class="editor">
         <input type="text" />
+        <div ref={canvasContainerRef} style={{ display: 'none' }} />
       </div>
     );
   };

packages/feedback2/src/screenshot/integration.ts

@@ -1,9 +1,10 @@
-import type { Integration, IntegrationFn } from '@sentry/types';
+import type { Attachment, Integration, IntegrationFn } from '@sentry/types';
 import { isBrowser } from '@sentry/utils';
 import type { ComponentType, h as hType } from 'preact';
 import { DOCUMENT } from '../constants';
 import { makeInput } from './components/ScreenshotInput';
 import type { Props as ScreenshotInputProps } from './components/ScreenshotInput';
+import { createScreenshotInputStyles } from './components/ScreenshotInput.css';
 import { makeToggle } from './components/ScreenshotToggle';
 import type { Props as ScreenshotToggleProps } from './components/ScreenshotToggle';
 
@@ -34,7 +35,7 @@ export class Feedback2Screenshot implements Integration {
   }
 
   /**
-   * Setup and initialize feedback container
+   * Setupand initialize feedback container
    */
   public setupOnce(): void {
     if (!isBrowser()) {
@@ -48,26 +49,34 @@ export class Feedback2Screenshot implements Integration {
    */
   public createWidget(h: typeof hType): ScreenshotWidget {
     const canvasEl = DOCUMENT.createElement('canvas');
+
     return {
+      style: createScreenshotInputStyles(),
       input: makeInput(h, canvasEl),
       toggle: makeToggle(h),
-      value: () => {
-        // TODO: maybe this only returns if the canvas is in the document?
-        // then handleFormData can be moved into this integration!
-        return canvasToBlob(canvasEl);
+      value: async () => {
+        const blob = await new Promise<Parameters<BlobCallback>[0]>(resolve => {
+          canvasEl.toBlob(resolve, 'image/png');
+        });
+        if (blob) {
+          const data = new Uint8Array(await blob.arrayBuffer());
+          const attachment: Attachment = {
+            data,
+            filename: 'screenshot.png',
+            contentType: 'application/png',
+            // attachmentType?: string;
+          };
+          return attachment;
+        }
+        return;
       },
     };
   }
 }
 
-async function canvasToBlob(canvas: HTMLCanvasElement): Promise<Blob | null> {
-  return new Promise(resolve => {
-    canvas.toBlob(resolve);
-  });
-}
-
 export interface ScreenshotWidget {
+  style: HTMLStyleElement;
   input: ComponentType<ScreenshotInputProps>;
   toggle: ComponentType<ScreenshotToggleProps>;
-  value: () => Promise<Blob | null>;
+  value: () => Promise<Attachment | undefined>;
 }

packages/feedback2/src/types/form.ts

@@ -1,6 +1,8 @@
+import type { Attachment } from '@sentry/types';
+
 export type FeedbackFormData = {
   name: string;
   email: string;
   message: string;
-  attachment: File | undefined;
+  attachments: Attachment[] | undefined;
 };

packages/feedback2/src/types/index.ts

@@ -1,3 +1,4 @@
+import type { Attachment } from '@sentry/types';
 import type {
   FeedbackCallbacks,
   FeedbackGeneralConfiguration,
@@ -43,7 +44,7 @@ export interface SendFeedbackParams {
   message: string;
   name?: string;
   email?: string;
-  attachment?: File;
+  attachments?: Attachment[];
   url?: string;
   source?: string;
 }