explicit props instead of passing options

packages/feedback/src/integration.ts

@@ -16,7 +16,12 @@ import {
   SUBMIT_BUTTON_LABEL,
   SUCCESS_MESSAGE_TEXT,
 } from './constants';
-import type { CreateWidgetOptionOverrides, FeedbackConfigurationWithDefaults, Widget } from './types';
+import type {
+  CreateWidgetOptionOverrides,
+  FeedbackConfigurationWithDefaults,
+  FeedbackInternalOptions,
+  Widget,
+} from './types';
 import { createActorStyles } from './widget/Actor.css';
 import { createShadowHost } from './widget/createShadowHost';
 import { createWidget } from './widget/createWidget';
@@ -44,7 +49,7 @@ export class Feedback implements Integration {
   /**
    * Feedback configuration options
    */
-  public options: FeedbackConfigurationWithDefaults;
+  public options: FeedbackInternalOptions;
 
   /**
    * Reference to widget element that is created when autoInject is true
@@ -187,7 +192,10 @@ export class Feedback implements Integration {
    */
   public attachTo(el: Node | string, optionOverrides: CreateWidgetOptionOverrides): Widget | null {
     try {
-      const options = Object.assign({}, this.options, optionOverrides);
+      const options = {
+        ...this.options,
+        ...optionOverrides,
+      };
 
       return this._ensureShadowHost<Widget | null>(options, ({ shadow }) => {
         const targetEl =
@@ -213,7 +221,10 @@ export class Feedback implements Integration {
    */
   public createWidget(optionOverrides: CreateWidgetOptionOverrides): Widget | null {
     try {
-      return this._createWidget(Object.assign({}, this.options, optionOverrides));
+      return this._createWidget({
+        ...this.options,
+        ...optionOverrides,
+      });
     } catch (err) {
       logger.error(err);
       return null;
@@ -266,7 +277,7 @@ export class Feedback implements Integration {
   /**
    * Creates a new widget, after ensuring shadow DOM exists
    */
-  protected _createWidget(options: FeedbackConfigurationWithDefaults): Widget | null {
+  protected _createWidget(options: FeedbackInternalOptions): Widget | null {
     return this._ensureShadowHost<Widget>(options, ({ shadow }) => {
       const widget = createWidget({ shadow, options });
 
@@ -284,7 +295,7 @@ export class Feedback implements Integration {
    * Ensures that shadow DOM exists and is added to the DOM
    */
   protected _ensureShadowHost<T>(
-    options: FeedbackConfigurationWithDefaults,
+    options: FeedbackInternalOptions,
     cb: (createShadowHostResult: ReturnType<typeof createShadowHost>) => T,
   ): T | null {
     let needsAppendHost = false;

packages/feedback/src/types/index.ts

@@ -47,7 +47,10 @@ export interface FeedbackFormData {
   name?: string;
 }
 
-export interface FeedbackConfigurationWithDefaults {
+/**
+ * General feedback configuration
+ */
+export interface FeedbackGeneralConfiguration {
   /**
    * id to use for the main widget container (this will host the shadow DOM)
    */
@@ -92,8 +95,12 @@ export interface FeedbackConfigurationWithDefaults {
     email: string;
     name: string;
   };
+}
 
-  // * Color theme customization * //
+/**
+ * Theme-related configuration
+ */
+export interface FeedbackThemeConfiguration {
   /**
    * The colorscheme to use. "system" will choose the scheme based on the user's system settings
    */
@@ -107,9 +114,12 @@ export interface FeedbackConfigurationWithDefaults {
    * Dark theme customization, will be merged with default theme values.
    */
   themeDark: FeedbackTheme;
-  // * End of Color theme customization * //
+}
 
-  // * Text customization * //
+/**
+ * All of the different text labels that can be customized
+ */
+export interface FeedbackTextConfiguration {
   /**
    * The label for the Feedback widget button that opens the dialog
    */
@@ -154,9 +164,12 @@ export interface FeedbackConfigurationWithDefaults {
    * Message after feedback was sent successfully
    */
   successMessageText: string;
-  // * End of text customization * //
+}
 
-  // * Start of Callbacks * //
+/**
+ * The public callbacks available for the feedback integration
+ */
+export interface FeedbackCallbacks {
   /**
    * Callback when dialog is closed
    */
@@ -181,9 +194,19 @@ export interface FeedbackConfigurationWithDefaults {
    * Callback when feedback is unsuccessfully submitted
    */
   onSubmitError?: () => void;
-  // * End of Callbacks * //
 }
 
+export interface FeedbackConfigurationWithDefaults
+  extends FeedbackGeneralConfiguration,
+    FeedbackThemeConfiguration,
+    FeedbackTextConfiguration,
+    FeedbackCallbacks {}
+
+/**
+ * The integration's internal `options` member
+ */
+export type FeedbackInternalOptions = FeedbackConfigurationWithDefaults;
+
 export interface FeedbackTheme {
   /**
    * Font family for widget
@@ -223,7 +246,7 @@ export interface FeedbackTheme {
   error: string;
 }
 
-export interface CreateWidgetOptionOverrides extends Partial<FeedbackConfigurationWithDefaults> {}
+export type CreateWidgetOptionOverrides = Partial<FeedbackConfigurationWithDefaults>;
 
 export interface FeedbackThemes {
   dark: FeedbackTheme;

packages/feedback/src/widget/Dialog.ts

@@ -1,14 +1,11 @@
-import type { FeedbackComponent, FeedbackConfigurationWithDefaults, FeedbackFormData } from '../types';
+import type { FeedbackComponent } from '../types';
+import type { FormComponentProps } from './Form';
 import { Form } from './Form';
 import { createElement } from './util/createElement';
 
-interface DialogProps {
-  defaultName: string;
-  defaultEmail: string;
-  onCancel?: (e: Event) => void;
+export interface DialogProps extends FormComponentProps {
+  formTitle: string;
   onClosed?: () => void;
-  onSubmit?: (feedback: FeedbackFormData) => void;
-  options: FeedbackConfigurationWithDefaults;
 }
 
 export interface DialogComponent extends FeedbackComponent<HTMLDialogElement> {
@@ -52,12 +49,16 @@ export interface DialogComponent extends FeedbackComponent<HTMLDialogElement> {
  * Feedback dialog component that has the form
  */
 export function Dialog({
+  formTitle,
+  showName,
+  showEmail,
+  isAnonymous,
   defaultName,
   defaultEmail,
   onClosed,
   onCancel,
   onSubmit,
-  options,
+  ...textLabels
 }: DialogProps): DialogComponent {
   let el: HTMLDialogElement | null = null;
 
@@ -106,11 +107,15 @@ export function Dialog({
     showError,
     hideError,
   } = Form({
+    showEmail,
+    showName,
+    isAnonymous,
+
     defaultName,
     defaultEmail,
-    options,
     onSubmit,
     onCancel,
+    ...textLabels,
   });
 
   el = createElement(
@@ -129,7 +134,7 @@ export function Dialog({
           e.stopPropagation();
         },
       },
-      createElement('h2', { className: 'dialog__header' }, options.formTitle),
+      createElement('h2', { className: 'dialog__header' }, formTitle),
       formEl,
     ),
   );

packages/feedback/src/widget/Form.ts

@@ -1,8 +1,15 @@
-import type { FeedbackComponent, FeedbackConfigurationWithDefaults, FeedbackFormData } from '../types';
+import type { FeedbackComponent, FeedbackFormData, FeedbackInternalOptions, FeedbackTextConfiguration } from '../types';
 import { SubmitButton } from './SubmitButton';
 import { createElement } from './util/createElement';
 
-export interface FormComponentProps {
+export interface FormComponentProps
+  extends Pick<
+    FeedbackInternalOptions,
+    | 'showName'
+    | 'showEmail'
+    | 'isAnonymous'
+    | Exclude<keyof FeedbackTextConfiguration, 'buttonLabel' | 'formTitle' | 'successMessageText'>
+  > {
   /**
    * A default name value to render the input with. Empty strings are ok.
    */
@@ -11,20 +18,6 @@ export interface FormComponentProps {
    * A default email value to render the input with. Empty strings are ok.
    */
   defaultEmail: string;
-  options: Pick<
-    FeedbackConfigurationWithDefaults,
-    | 'showName'
-    | 'showEmail'
-    | 'isAnonymous'
-    | 'nameLabel'
-    | 'namePlaceholder'
-    | 'emailLabel'
-    | 'emailPlaceholder'
-    | 'messageLabel'
-    | 'messagePlaceholder'
-    | 'cancelButtonLabel'
-    | 'submitButtonLabel'
-  >;
   onCancel?: (e: Event) => void;
   onSubmit?: (feedback: FeedbackFormData) => void;
 }
@@ -63,20 +56,18 @@ function retrieveStringValue(formData: FormData, key: string): string {
  * Creates the form element
  */
 export function Form({
-  options: {
-    showName,
-    showEmail,
-    isAnonymous,
-
-    nameLabel,
-    namePlaceholder,
-    emailLabel,
-    emailPlaceholder,
-    messageLabel,
-    messagePlaceholder,
-    cancelButtonLabel,
-    submitButtonLabel,
-  },
+  nameLabel,
+  namePlaceholder,
+  emailLabel,
+  emailPlaceholder,
+  messageLabel,
+  messagePlaceholder,
+  cancelButtonLabel,
+  submitButtonLabel,
+
+  showName,
+  showEmail,
+  isAnonymous,
 
   defaultName,
   defaultEmail,

packages/feedback/src/widget/createShadowHost.ts

@@ -1,12 +1,12 @@
 import { WINDOW } from '@sentry/browser';
 import { logger } from '@sentry/utils';
 
-import type { FeedbackConfigurationWithDefaults } from '../types';
+import type { FeedbackInternalOptions } from '../types';
 import { createDialogStyles } from './Dialog.css';
 import { createMainStyles } from './Main.css';
 
 interface CreateShadowHostParams {
-  options: FeedbackConfigurationWithDefaults;
+  options: FeedbackInternalOptions;
 }
 
 /**

packages/feedback/src/widget/createWidget.ts

@@ -1,7 +1,7 @@
 import { getCurrentHub } from '@sentry/core';
 import { logger } from '@sentry/utils';
 
-import type { FeedbackConfigurationWithDefaults, FeedbackFormData, Widget } from '../types';
+import type { FeedbackFormData, FeedbackInternalOptions, Widget } from '../types';
 import { handleFeedbackSubmit } from '../util/handleFeedbackSubmit';
 import type { ActorComponent } from './Actor';
 import { Actor } from './Actor';
@@ -11,7 +11,7 @@ import { SuccessMessage } from './SuccessMessage';
 
 interface CreateWidgetParams {
   shadow: ShadowRoot;
-  options: FeedbackConfigurationWithDefaults;
+  options: FeedbackInternalOptions;
   attachTo?: Node;
 }
 
@@ -124,6 +124,18 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams):
       const user = scope && scope.getUser();
 
       dialog = Dialog({
+        showName: options.showName,
+        showEmail: options.showEmail,
+        isAnonymous: options.isAnonymous,
+        formTitle: options.formTitle,
+        cancelButtonLabel: options.cancelButtonLabel,
+        submitButtonLabel: options.submitButtonLabel,
+        emailLabel: options.emailLabel,
+        emailPlaceholder: options.emailPlaceholder,
+        messageLabel: options.messageLabel,
+        messagePlaceholder: options.messagePlaceholder,
+        nameLabel: options.nameLabel,
+        namePlaceholder: options.namePlaceholder,
         defaultName: (userKey && user && user[userKey.name]) || '',
         defaultEmail: (userKey && user && user[userKey.email]) || '',
         onClosed: () => {
@@ -135,7 +147,6 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams):
           showActor();
         },
         onSubmit: _handleFeedbackSubmit,
-        options,
       });
 
       shadow.appendChild(dialog.el);