feat: add success message, error message, move submit logic up into integration class

Author: billyvg

packages/feedback/src/index.ts

@@ -1,13 +1,15 @@
-// import { getCurrentHub } from '@sentry/core';
+import { getCurrentHub } from '@sentry/core';
 import type { Integration } from '@sentry/types';
 import { isNodeEnv } from '@sentry/utils';
 
-import type { FeedbackConfigurationWithDefaults } from './types';
+import { sendFeedback } from './sendFeedback';
+import type { FeedbackConfigurationWithDefaults, FeedbackFormData } from './types';
 import { sendFeedbackRequest } from './util/sendFeedbackRequest';
 import { Actor } from './widget/Actor';
 import { createActorStyles } from './widget/Actor.css';
 import { Dialog } from './widget/Dialog';
 import { createDialogStyles } from './widget/Dialog.css';
+import { SuccessMessage } from './widget/SuccessMessage';
 
 export { sendFeedbackRequest };
 
@@ -29,10 +31,14 @@ const THEME = {
   light: {
     background: '#ffffff',
     foreground: '#2B2233',
+    success: '#268d75',
+    error: '#df3338',
   },
   dark: {
     background: '#29232f',
     foreground: '#EBE6EF',
+    success: '#2da98c',
+    error: '#f55459',
   },
 };
 
@@ -76,6 +82,11 @@ export class Feedback implements Integration {
    */
   private _isDialogOpen: boolean;
 
+  /**
+   * Tracks if dialog has ever been opened at least one time
+   */
+  private _hasDialogOpened: boolean;
+
   public constructor({
     showEmail = true,
     showName = true,
@@ -97,6 +108,7 @@ export class Feedback implements Integration {
     messageLabel = 'Description',
     namePlaceholder = 'Your Name',
     nameLabel = 'Name',
+    successMessageText = 'Thank you for your report!',
   }: Partial<FeedbackConfigurationWithDefaults> = {}) {
     // Initializations
     this.name = Feedback.id;
@@ -105,6 +117,7 @@ export class Feedback implements Integration {
     this._host = null;
     this._shadow = null;
     this._isDialogOpen = false;
+    this._hasDialogOpened = false;
 
     this.options = {
       isAnonymous,
@@ -124,6 +137,7 @@ export class Feedback implements Integration {
       messagePlaceholder,
       nameLabel,
       namePlaceholder,
+      successMessageText,
     };
 
     // TOOD: temp for testing;
@@ -164,21 +178,60 @@ export class Feedback implements Integration {
       this._shadow = this._createShadowHost();
     }
 
-    this._shadow.appendChild(createDialogStyles(document, THEME));
-    this._dialog = Dialog({ onCancel: this.closeDialog, options: this.options });
+    // Lazy-load until dialog is opened and only inject styles once
+    if (!this._hasDialogOpened) {
+      this._shadow.appendChild(createDialogStyles(document, THEME));
+    }
+
+    const userKey = this.options.useSentryUser;
+    const scope = getCurrentHub().getScope();
+    const user = scope && scope.getUser();
+
+    this._dialog = Dialog({
+      defaultName: (userKey && user && user[userKey.name]) || '',
+      defaultEmail: (userKey && user && user[userKey.email]) || '',
+      onClose: () => {
+        this.showActor();
+      },
+      onCancel: () => {
+        this.hideDialog();
+        this.showActor();
+      },
+      onSubmit: this._handleFeedbackSubmit,
+      options: this.options,
+    });
     this._shadow.appendChild(this._dialog.$el);
+
+    // Hides the default actor whenever dialog is opened
     this._actor && this._actor.hide();
+
+    this._hasDialogOpened = true;
   }
 
   /**
-   * Closes the dialog
+   * Hides the dialog
    */
-  public closeDialog = (): void => {
+  public hideDialog = (): void => {
     if (this._dialog) {
       this._dialog.close();
     }
+  };
+
+  /**
+   * Removes the dialog element from DOM
+   */
+  public removeDialog = (): void => {
+    if (this._dialog) {
+      this._dialog.$el.remove();
+      this._dialog = null;
+    }
+  };
 
-    // TODO: if has default actor, show the button
+  /**
+   * Displays the default actor
+   */
+  public showActor = (): void => {
+    // TODO: Only show default actor
     if (this._actor) {
       this._actor.show();
     }
@@ -218,7 +271,12 @@ export class Feedback implements Integration {
     this._host.id = 'sentry-feedback';
 
     // Create the shadow root
-    return this._host.attachShadow({ mode: 'open' });
+    const shadow = this._host.attachShadow({ mode: 'open' });
+
+    // Insert styles for actor
+    shadow.appendChild(createActorStyles(document, THEME));
+
+    return shadow;
   }
 
   /**
@@ -230,7 +288,6 @@ export class Feedback implements Integration {
       return;
     }
 
-    // Insert styles for actor
     this._shadow.appendChild(createActorStyles(document, THEME));
 
     // Create Actor component
@@ -239,6 +296,34 @@ export class Feedback implements Integration {
     this._shadow.appendChild(this._actor.$el);
   }
 
+  /**
+   * Show the success message for 5 seconds
+   */
+  protected _showSuccessMessage(): void {
+    if (!this._shadow) {
+      return;
+    }
+
+    const success = SuccessMessage({
+      message: this.options.successMessageText,
+      onRemove: () => {
+        if (timeoutId) {
+          clearTimeout(timeoutId);
+        }
+        this.showActor();
+      },
+      theme: THEME,
+    });
+
+    this._shadow.appendChild(success.$el);
+
+    const timeoutId = setTimeout(() => {
+      if (success) {
+        success.remove();
+      }
+    }, 5000);
+  }
+
   /**
    * Handles when the actor is clicked, opens the dialog modal and calls any
    * callbacks.
@@ -254,4 +339,37 @@ export class Feedback implements Integration {
       this._actor.hide();
     }
   };
+
+  /**
+   * Handler for when the feedback form is completed by the user. This will
+   * create and send the feedback message as an event.
+   */
+  protected _handleFeedbackSubmit = async (feedback: FeedbackFormData): Promise<void> => {
+    console.log('ahndle feedback submit');
+    if (!this._dialog) {
+      // Not sure when this would happen
+      return;
+    }
+
+    try {
+      this._dialog.hideError();
+      this._dialog.setSubmitDisabled();
+      const resp = await sendFeedback(feedback);
+      console.log({ resp });
+      if (resp) {
+        // Success!
+        this.removeDialog();
+        this._showSuccessMessage();
+        return;
+      }
+
+      // Errored... re-enable submit button
+      this._dialog.setSubmitEnabled();
+      this._dialog.showError('There was a problem submitting feedback, please wait and try again.');
+    } catch {
+      // Errored... re-enable submit button
+      this._dialog.setSubmitEnabled();
+      this._dialog.showError('There was a problem submitting feedback, please wait and try again.');
+    }
+  };
 }

packages/feedback/src/sendFeedback.ts

@@ -1,6 +1,5 @@
 import type { BrowserClient, Replay } from '@sentry/browser';
 import { getCurrentHub } from '@sentry/core';
-import { GLOBAL_OBJ } from '@sentry/utils';
 
 import { sendFeedbackRequest } from './util/sendFeedbackRequest';
 
@@ -22,13 +21,13 @@ export function sendFeedback(
   { name, email, message, url = document.location.href }: SendFeedbackParams,
   { includeReplay = true }: SendFeedbackOptions = {},
 ) {
-  const replay = includeReplay
-    ? (getCurrentHub()?.getClient<BrowserClient>()?.getIntegrationById('Replay') as Replay | undefined)
-    : undefined;
+  const hub = getCurrentHub();
+  const client = hub && hub.getClient<BrowserClient>();
+  const replay = includeReplay && client ? (client.getIntegrationById('Replay') as Replay | undefined) : undefined;
 
   // Prepare session replay
-  replay?.flush();
-  const replayId = replay?.getReplayId();
+  replay && replay.flush();
+  const replayId = replay && replay.getReplayId();
 
   return sendFeedbackRequest({
     feedback: {

packages/feedback/src/types/index.ts

@@ -109,6 +109,10 @@ export interface FeedbackConfigurationWithDefaults {
    * Placeholder text for Feedback name input
    */
   namePlaceholder: string;
+  /**
+   * Message after feedback was sent successfully
+   */
+  successMessageText: string;
   // * End of text customization * //
 }
 
@@ -121,6 +125,14 @@ interface BaseTheme {
    * Foreground color (i.e. text color)
    */
   foreground: string;
+  /**
+   * Success color
+   */
+  success: string;
+  /**
+   * Error color
+   */
+  error: string;
 }
 
 export interface FeedbackTheme {

packages/feedback/src/widget/Actor.css.ts

@@ -11,22 +11,27 @@ export function createActorStyles(d: Document, theme: FeedbackTheme): HTMLStyleE
   right: 1rem;
   bottom: 1rem;
   font-family: 'Helvetica Neue', Arial, sans-serif;
+  font-size: 14px;
   --bg-color: ${theme.light.background};
   --bg-hover-color: #f6f6f7;
   --fg-color: ${theme.light.foreground};
+  --error-color: #df3338;
+  --success-color: #268d75;
   --border: 1.5px solid rgba(41, 35, 47, 0.13);
   --box-shadow: 0px 4px 24px 0px rgba(43, 34, 51, 0.12);
 }
 
-.__sntry_fdbk_dark:host {
+.__dark-mode:host {
   --bg-color: ${theme.dark.background};
   --bg-hover-color: #352f3b;
   --fg-color: ${theme.dark.foreground};
+  --error-color: #f55459;
+  --success-color: #2da98c;
   --border: 1.5px solid rgba(235, 230, 239, 0.15);
   --box-shadow: 0px 4px 24px 0px rgba(43, 34, 51, 0.12);
 }
 
-.widget-actor {
+.widget__actor {
   line-height: 25px;
 
   display: flex;
@@ -49,22 +54,39 @@ export function createActorStyles(d: Document, theme: FeedbackTheme): HTMLStyleE
   transition: opacity 0.1s ease-in-out;
 }
 
-.widget-actor:hover {
+.widget__actor:hover {
   background-color: var(--bg-hover-color);
 }
 
-.widget-actor svg {
+.widget__actor svg {
   width: 16px;
   height: 16px;
 }
 
-.widget-actor.hidden {
+.widget__actor--hidden {
   opacity: 0;
   pointer-events: none;
   visibility: hidden;
 }
 
-.widget-actor-text {
+.widget__actor__text {
+}
+
+.success-message {
+  background-color: var(--bg-color);
+  border: var(--border);
+  border-radius: 12px;
+  box-shadow: var(--box-shadow);
+  font-weight: 600;
+  color: var(--success-color);
+  padding: 12px 24px;
+  line-height: 25px;
+  display: grid;
+  align-items: center;
+  grid-auto-flow: column;
+  gap: 6px;
+  cursor: default;
+
 }
 `;
 

packages/feedback/src/widget/Actor.ts

@@ -35,7 +35,7 @@ export function Actor({ options, theme, onClick }: Props): ActorComponent {
       className: 'widget__actor',
       ariaLabel: options.buttonLabel,
     },
-    Icon({ color: theme.light.foreground }),
+    Icon({ color: theme.light.foreground }).$el,
     h(
       'span',
       {