Merge pull request #9602 from getsentry/remove-isanonymous

ref(feedback): Remove isAnonymous option from feedback

Author: c298lee

packages/feedback/README.md

@@ -65,7 +65,8 @@ The following options can be configured as options to the integration, in `new F
 | --------- | ------- | ------- | ----------- |
 | `showName`       | `boolean` | `true`  | Displays the name field on the feedback form, however will still capture the name (if available) from Sentry SDK context. |
 | `showEmail`       | `boolean` | `true`  | Displays the email field on the feedback form, however will still capture the email (if available) from Sentry SDK context. |
-| `isAnonymous`       | `boolean` | `false` | Hides both name and email fields and does not use Sentry SDK's user context. |
+| `isNameRequired` | `boolean` | `false`  | Requires the name field on the feedback form to be filled in. |
+| `isEmailRequired` | `boolean` | `false`  | Requires the email field on the feedback form to be filled in. |
 | `useSentryUser` | `Record<string, string>` | `{ email: 'email', name: 'username'}` | Map of the `email` and `name` fields to the corresponding Sentry SDK user fields that were called with `Sentry.setUser`. |
 
 By default the Feedback integration will attempt to fill in the name/email fields if you have set a user context via [`Sentry.setUser`](https://docs.sentry.io/platforms/javascript/enriching-events/identify-user/). By default it expects the email and name fields to be `email` and `username`. Below is an example configuration with non-default user fields.
@@ -133,7 +134,7 @@ Colors can be customized via the Feedback constructor or by defining CSS variabl
 | `submitForegroundHover` | `--submit-foreground-hover` | `#ffffff` | `#ffffff` | Foreground color for the submit button when hovering |
 | `cancelBackground` | `--cancel-background` | `transparent` | `transparent` | Background color for the cancel button |
 | `cancelBackgroundHover` | `--cancel-background-hover` | `var(--background-hover)` | `var(--background-hover)` | Background color when hovering over the cancel button |
-| `cancelBorder` | `--cancel-border` | `var(--border)` | `var(--border)` | Border style for the cancel button | 
+| `cancelBorder` | `--cancel-border` | `var(--border)` | `var(--border)` | Border style for the cancel button |
 | `cancelOutlineFocus` | `--cancel-outline-focus` | `var(--input-outline-focus)` | `var(--input-outline-focus)` | Outline color for the cancel button, in the focused state |
 | `cancelForeground` | `--cancel-foreground` | `var(--foreground)` | `var(--foreground)` | Foreground color for the cancel button |
 | `cancelForegroundHover` | `--cancel-foreground-hover` | `var(--foreground)` | `var(--foreground)` | Foreground color for the cancel button when hovering |
@@ -270,7 +271,7 @@ document.getElementById('my-feedback-form').addEventListener('submit', (event) =
 
 Note: The following instructions are to be followed in the Sentry product.
 
-If you have Sentry's default issue alert ("Alert me on every new issue") turned on for the project you are setting up User Feedback on, no action is required to have alerting on each user feedback report. 
+If you have Sentry's default issue alert ("Alert me on every new issue") turned on for the project you are setting up User Feedback on, no action is required to have alerting on each user feedback report.
 
 If you don't have Sentry's default issue alert turned on, follow these steps:
 

packages/feedback/src/integration.ts

@@ -80,7 +80,6 @@ export class Feedback implements Integration {
       email: 'email',
       name: 'username',
     },
-    isAnonymous = false,
     isEmailRequired = false,
     isNameRequired = false,
 
@@ -120,7 +119,6 @@ export class Feedback implements Integration {
       id,
       showBranding,
       autoInject,
-      isAnonymous,
       isEmailRequired,
       isNameRequired,
       showEmail,

packages/feedback/src/types/index.ts

@@ -52,11 +52,6 @@ export interface FeedbackGeneralConfiguration {
    */
   autoInject: boolean;
 
-  /**
-   * If true, will not collect user data (email/name).
-   */
-  isAnonymous: boolean;
-
   /**
    * Should the email field be required?
    */

packages/feedback/src/widget/Dialog.ts

@@ -48,7 +48,6 @@ export function Dialog({
   isNameRequired,
   isEmailRequired,
   colorScheme,
-  isAnonymous,
   defaultName,
   defaultEmail,
   onClosed,
@@ -103,7 +102,6 @@ export function Dialog({
   } = Form({
     showEmail,
     showName,
-    isAnonymous,
     isEmailRequired,
     isNameRequired,
 

packages/feedback/src/widget/Form.ts

@@ -7,7 +7,6 @@ export interface FormComponentProps
     FeedbackInternalOptions,
     | 'showName'
     | 'showEmail'
-    | 'isAnonymous'
     | 'isNameRequired'
     | 'isEmailRequired'
     | Exclude<keyof FeedbackTextConfiguration, 'buttonLabel' | 'formTitle' | 'successMessageText'>
@@ -59,7 +58,6 @@ export function Form({
 
   showName,
   showEmail,
-  isAnonymous,
   isNameRequired,
   isEmailRequired,
 
@@ -166,8 +164,7 @@ export function Form({
     [
       errorEl,
 
-      !isAnonymous &&
-        showName &&
+      showName &&
         createElement(
           'label',
           {
@@ -184,10 +181,9 @@ export function Form({
             nameEl,
           ],
         ),
-      !isAnonymous && !showName && nameEl,
+      !showName && nameEl,
 
-      !isAnonymous &&
-        showEmail &&
+      showEmail &&
         createElement(
           'label',
           {
@@ -204,7 +200,7 @@ export function Form({
             emailEl,
           ],
         ),
-      !isAnonymous && !showEmail && emailEl,
+      !showEmail && emailEl,
 
       createElement(
         'label',

packages/feedback/src/widget/createWidget.ts

@@ -99,7 +99,7 @@ export function createWidget({
     if (!feedback.message) {
       emptyField.push(options.messageLabel);
     }
-    if (emptyField.length != 0) {
+    if (emptyField.length > 0) {
       dialog.showError(`Please enter in the following required fields: ${emptyField.join(', ')}`);
       return;
     }
@@ -159,7 +159,7 @@ export function createWidget({
         return;
       }
 
-      const userKey = !options.isAnonymous && options.useSentryUser;
+      const userKey = options.useSentryUser;
       const scope = getCurrentHub().getScope();
       const user = scope && scope.getUser();
 
@@ -168,7 +168,6 @@ export function createWidget({
         showBranding: options.showBranding,
         showName: options.showName || options.isNameRequired,
         showEmail: options.showEmail || options.isEmailRequired,
-        isAnonymous: options.isAnonymous,
         isNameRequired: options.isNameRequired,
         isEmailRequired: options.isEmailRequired,
         formTitle: options.formTitle,

packages/feedback/test/widget/Dialog.test.ts

@@ -9,7 +9,6 @@ function renderDialog({
   showName = true,
   showEmail = true,
   showBranding = false,
-  isAnonymous = false,
   isNameRequired = false,
   isEmailRequired = false,
   formTitle = 'Feedback',
@@ -29,7 +28,6 @@ function renderDialog({
   return Dialog({
     formTitle,
 
-    isAnonymous,
     showName,
     showEmail,
     isNameRequired,

packages/feedback/test/widget/Form.test.ts

@@ -8,7 +8,6 @@ type NonNullableFields<T> = {
 function renderForm({
   showName = true,
   showEmail = true,
-  isAnonymous = false,
   isNameRequired = false,
   isEmailRequired = false,
   defaultName = 'Foo Bar',
@@ -24,7 +23,6 @@ function renderForm({
   ...rest
 }: Partial<FormComponentProps> = {}) {
   return Form({
-    isAnonymous,
     showName,
     showEmail,
     isNameRequired,
@@ -138,33 +136,4 @@ describe('Form', () => {
       name: 'Foo Bar',
     });
   });
-
-  it('does not show name or email inputs for anonymous mode', () => {
-    const onSubmit = jest.fn();
-    const formComponent = renderForm({
-      isNameRequired: true,
-      isEmailRequired: true,
-      isAnonymous: true,
-      onSubmit,
-    });
-    const submitEvent = new Event('submit');
-
-    expect(formComponent.el).toBeInstanceOf(HTMLFormElement);
-    const nameInput = formComponent.el.querySelector('[name="name"][type="text"]') as HTMLInputElement;
-    const emailInput = formComponent.el.querySelector('[name="email"][type="text"]') as HTMLInputElement;
-    expect(nameInput).toBeNull();
-    expect(emailInput).toBeNull();
-    expect(formComponent.el.querySelector('[name="message"]')).not.toBeNull();
-
-    const message = formComponent.el.querySelector('[name="message"]') as HTMLTextAreaElement;
-    message.value = 'Foo (message)';
-    message.dispatchEvent(new KeyboardEvent('keyup'));
-
-    formComponent.el.dispatchEvent(submitEvent);
-    expect(onSubmit).toHaveBeenCalledWith({
-      email: '',
-      message: 'Foo (message)',
-      name: '',
-    });
-  });
 });

packages/feedback/test/widget/createWidget.test.ts

@@ -30,7 +30,6 @@ const DEFAULT_OPTIONS = {
     email: 'email',
     name: 'username',
   },
-  isAnonymous: false,
   isEmailRequired: false,
   isNameRequired: false,