ref: extract widget creation to function, allow handling of multiple widgets

Author: billyvg

packages/feedback/src/integration.ts

@@ -1,5 +1,6 @@
 import type { BrowserClient, Replay } from '@sentry/browser';
 import { getCurrentHub } from '@sentry/core';
+import { getLocationHref } from '@sentry/utils';
 
 import { sendFeedbackRequest } from './util/sendFeedbackRequest';
 
@@ -18,7 +19,7 @@ interface SendFeedbackOptions {
  * Public API to send a Feedback item to Sentry
  */
 export function sendFeedback(
-  { name, email, message, url = document.location.href }: SendFeedbackParams,
+  { name, email, message, url = getLocationHref() }: SendFeedbackParams,
   { includeReplay = true }: SendFeedbackOptions = {},
 ): ReturnType<typeof sendFeedbackRequest> {
   const hub = getCurrentHub();

packages/feedback/src/sendFeedback.ts

@@ -1,5 +1,8 @@
 import type { Event, Primitive } from '@sentry/types';
 
+import type { ActorComponent } from '../widget/Actor';
+import type { DialogComponent } from '../widget/Dialog';
+
 export type SentryTags = { [key: string]: Primitive } | undefined;
 
 /**
@@ -40,11 +43,6 @@ export interface FeedbackConfigurationWithDefaults {
    */
   id: string;
 
-  /**
-   * DOM Selector to attach click listener to, for opening Feedback dialog.
-   */
-  attachTo: Node | string | null;
-
   /**
    * Auto-inject default Feedback actor button to the DOM when integration is
    * added.
@@ -92,12 +90,13 @@ export interface FeedbackConfigurationWithDefaults {
   colorScheme: 'system' | 'light' | 'dark';
 
   /**
-   * Theme customization, will be merged with default theme values.
+   * Light theme customization, will be merged with default theme values.
    */
-  theme: {
-    dark: FeedbackTheme;
-    light: FeedbackTheme;
-  };
+  themeLight: FeedbackTheme;
+  /**
+   * Dark theme customization, will be merged with default theme values.
+   */
+  themeDark: FeedbackTheme;
   // * End of Color theme customization * //
 
   // * Text customization * //
@@ -148,6 +147,11 @@ export interface FeedbackConfigurationWithDefaults {
   // * End of text customization * //
 
   // * Start of Callbacks * //
+  /**
+   * Callback when dialog is closed
+   */
+  onDialogClose?: () => void;
+
   /**
    * Callback when dialog is opened
    */
@@ -217,3 +221,22 @@ export interface FeedbackThemes {
 export interface FeedbackComponent<T extends HTMLElement> {
   $el: T;
 }
+
+/**
+ * A widget consists of:
+ *   - actor button [that opens dialog]
+ *   - dialog + feedback form
+ *   - shadow root?
+ */
+export interface Widget {
+  actor: ActorComponent | undefined;
+  dialog: DialogComponent | undefined;
+
+  showActor: () => void;
+  hideActor: () => void;
+  removeActor: () => void;
+
+  openDialog: () => void;
+  hideDialog: () => void;
+  removeDialog: () => void;
+}

packages/feedback/src/types/index.ts

@@ -7,7 +7,7 @@ interface Props {
   onClick?: (e: MouseEvent) => void;
 }
 
-interface ActorComponent extends FeedbackComponent<HTMLButtonElement> {
+export interface ActorComponent extends FeedbackComponent<HTMLButtonElement> {
   /**
    * Shows the actor element
    */

packages/feedback/src/widget/Actor.ts

@@ -41,6 +41,11 @@ export interface DialogComponent extends FeedbackComponent<HTMLDialogElement> {
    * Closes the dialog and form
    */
   close: () => void;
+
+  /**
+   * Check if dialog is currently opened
+   */
+  checkIsOpen: () => boolean;
 }
 
 /**
@@ -87,6 +92,13 @@ export function Dialog({
     }
   }
 
+  /**
+   * Check if dialog is currently opened
+   */
+  function checkIsOpen(): boolean {
+    return ($el && $el.open === true) || false;
+  }
+
   const {
     $el: $form,
     setSubmitEnabled,
@@ -104,7 +116,6 @@ export function Dialog({
   $el = h(
     'dialog',
     {
-      id: 'feedback-dialog',
       className: 'dialog',
       open: true,
       onClick: handleDialogClick,
@@ -131,5 +142,6 @@ export function Dialog({
     setSubmitEnabled,
     open,
     close,
+    checkIsOpen,
   };
 }

packages/feedback/src/widget/Dialog.ts

@@ -11,7 +11,9 @@ interface IconReturn {
  * Feedback Icon
  */
 export function Icon(): IconReturn {
-  const cENS = document.createElementNS.bind(document, XMLNS);
+  const cENS = <K extends keyof SVGElementTagNameMap>(tagName: K): SVGElementTagNameMap[K] =>
+    // eslint-disable-next-line no-restricted-globals
+    document.createElementNS(XMLNS, tagName);
   const svg = setAttributesNS(cENS('svg'), {
     class: 'feedback-icon',
     width: `${SIZE}`,

packages/feedback/src/widget/Icon.ts

@@ -12,7 +12,9 @@ interface IconReturn {
  * Success Icon (checkmark)
  */
 export function SuccessIcon(): IconReturn {
-  const cENS = document.createElementNS.bind(document, XMLNS);
+  const cENS = <K extends keyof SVGElementTagNameMap>(tagName: K): SVGElementTagNameMap[K] =>
+    // eslint-disable-next-line no-restricted-globals
+    document.createElementNS(XMLNS, tagName);
   const svg = setAttributesNS(cENS('svg'), {
     class: 'success-icon',
     width: `${WIDTH}`,

packages/feedback/src/widget/SuccessIcon.ts

@@ -0,0 +1,35 @@
+import { logger } from '@sentry/utils';
+
+import type { FeedbackConfigurationWithDefaults } from '../types';
+import { createDialogStyles } from './Dialog.css';
+import { createMainStyles } from './Main.css';
+
+interface CreateShadowHostParams {
+  options: FeedbackConfigurationWithDefaults;
+}
+/**
+ *
+ */
+export function createShadowHost({ options }: CreateShadowHostParams): [shadow: ShadowRoot, host: HTMLDivElement] {
+  // eslint-disable-next-line no-restricted-globals
+  const doc = document;
+  if (!doc.head.attachShadow) {
+    // Shadow DOM not supported
+    logger.warn('[Feedback] Browser does not support shadow DOM API');
+    throw new Error('Browser does not support shadow DOM API.');
+  }
+
+  // Create the host
+  const host = doc.createElement('div');
+  host.id = options.id;
+
+  // Create the shadow root
+  const shadow = host.attachShadow({ mode: 'open' });
+
+  shadow.appendChild(
+    createMainStyles(doc, options.colorScheme, { dark: options.themeDark, light: options.themeLight }),
+  );
+  shadow.appendChild(createDialogStyles(doc));
+
+  return [shadow, host];
+}