move feedback class to integration.ts, make isAnonymous work, hide false in createElement

Author: billyvg

packages/feedback/src/index.ts

@@ -52,21 +52,22 @@ export interface FeedbackConfigurationWithDefaults {
   isAnonymous: boolean;
 
   /**
-   * Should the email field be required
+   * Should the email field be required?
    */
   isEmailRequired: boolean;
 
   /**
-   * Should the name field be required
+   * Should the name field be required?
    */
   isNameRequired: boolean;
 
   /**
-   * Should the email input field be visible?
+   * Should the email input field be visible? Note: email will still be collected if set via `Sentry.setUser()`
    */
   showEmail: boolean;
+
   /**
-   * Should the name input field be visible?
+   * Should the name input field be visible? Note: name will still be collected if set via `Sentry.setUser()`
    */
   showName: boolean;
 

packages/feedback/src/integration.ts

@@ -2,37 +2,40 @@ import type { FeedbackFormData } from '../types';
 import { DialogComponent } from '../widget/Dialog';
 import { sendFeedback } from '../sendFeedback';
 
-export async function handleFeedbackSubmit(dialog: DialogComponent|null, feedback: FeedbackFormData): Promise<Response | false> {
+export async function handleFeedbackSubmit(
+  dialog: DialogComponent | null,
+  feedback: FeedbackFormData,
+): Promise<Response | false> {
+  if (!dialog) {
+    // Not sure when this would happen
+    return false;
+  }
+
+  const showFetchError = () => {
     if (!dialog) {
-      // Not sure when this would happen
-      return false;
+      return;
     }
+    dialog.setSubmitEnabled();
+    dialog.showError('There was a problem submitting feedback, please wait and try again.');
+  };
 
-    const showFetchError = () => {
-      if (!dialog) {
-        return;
-      }
-      dialog.setSubmitEnabled();
-      dialog.showError('There was a problem submitting feedback, please wait and try again.');
-    };
-
-    try {
-      dialog.hideError();
-      dialog.setSubmitDisabled();
-      const resp = await sendFeedback(feedback);
-      console.log({ resp });
+  try {
+    dialog.hideError();
+    dialog.setSubmitDisabled();
+    const resp = await sendFeedback(feedback);
+    console.log({ resp });
 
-      if (!resp) {
-        // Errored... re-enable submit button
-        showFetchError();
-        return false;
-      }
-
-      // Success!
-      return resp;
-    } catch {
+    if (!resp) {
       // Errored... re-enable submit button
       showFetchError();
       return false;
     }
+
+    // Success!
+    return resp;
+  } catch {
+    // Errored... re-enable submit button
+    showFetchError();
+    return false;
+  }
 }

packages/feedback/src/types/index.ts

@@ -1,36 +1,9 @@
-import type { FeedbackTheme } from '../types';
-
 /**
  * Creates <style> element for widget actor (button that opens the dialog)
  */
-export function createActorStyles(d: Document, theme: FeedbackTheme): HTMLStyleElement {
+export function createActorStyles(d: Document): HTMLStyleElement {
   const style = d.createElement('style');
   style.textContent = `
-:host {
-  position: fixed;
-  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);
-}
-
-.__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 {
   line-height: 25px;
 

packages/feedback/src/util/handleFeedbackSubmit.ts

@@ -1,9 +1,7 @@
-import type { FeedbackTheme } from '../types';
-
 /**
  * Creates <style> element for widget dialog
  */
-export function createDialogStyles(d: Document, theme: FeedbackTheme): HTMLStyleElement {
+export function createDialogStyles(d: Document): HTMLStyleElement {
   const style = d.createElement('style');
 
   style.textContent = `

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

@@ -100,8 +100,8 @@ export function Form({ defaultName, defaultEmail, onCancel, onSubmit, options }:
 
   const $name = h('input', {
     id: 'name',
-    type: 'text', // TODO can be hidden
-    ariaHidden: 'false',
+    type: options.showName ? 'text' : 'hidden',
+    ariaHidden: options.showName ? 'false' : 'true',
     name: 'name',
     className: 'form__input',
     placeholder: options.namePlaceholder,
@@ -110,8 +110,8 @@ export function Form({ defaultName, defaultEmail, onCancel, onSubmit, options }:
 
   const $email = h('input', {
     id: 'email',
-    type: 'text', // TODO can be hidden
-    ariaHidden: 'false',
+    type: options.showEmail ? 'text' : 'hidden',
+    ariaHidden: options.showEmail ? 'false' : 'true',
     name: 'email',
     className: 'form__input',
     placeholder: options.emailPlaceholder,
@@ -158,23 +158,30 @@ export function Form({ defaultName, defaultEmail, onCancel, onSubmit, options }:
     },
     [
       $error,
-      h(
-        'label',
-        {
-          htmlFor: 'name',
-          className: 'form__label',
-        },
-        [options.nameLabel, $name],
-      ),
 
-      h(
-        'label',
-        {
-          htmlFor: 'email',
-          className: 'form__label',
-        },
-        [options.emailLabel, $email],
-      ),
+      !options.isAnonymous &&
+        options.showName &&
+        h(
+          'label',
+          {
+            htmlFor: 'name',
+            className: 'form__label',
+          },
+          [options.nameLabel, $name],
+        ),
+      !options.isAnonymous && !options.showName && $name,
+
+      !options.isAnonymous &&
+        options.showEmail &&
+        h(
+          'label',
+          {
+            htmlFor: 'email',
+            className: 'form__label',
+          },
+          [options.emailLabel, $email],
+        ),
+      !options.isAnonymous && !options.showEmail && $email,
 
       h(
         'label',

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

@@ -0,0 +1,36 @@
+import type { FeedbackTheme } from '../types';
+
+/**
+ * Creates <style> element for widget actor (button that opens the dialog)
+ */
+export function createMainStyles(d: Document, theme: FeedbackTheme): HTMLStyleElement {
+  const style = d.createElement('style');
+  style.textContent = `
+:host {
+  position: fixed;
+  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);
+}
+
+.__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);
+}
+`;
+
+  return style;
+}

packages/feedback/src/widget/Form.ts

@@ -39,6 +39,8 @@ function appendChild(parent: Node, child: any): void {
     for (const value of child) {
       appendChild(parent, value);
     }
+  } else if (child === false) {
+    // do nothing if child evaluated to false
   } else if (typeof child === 'string') {
     parent.appendChild(document.createTextNode(child));
   } else if (child instanceof Node) {