feat(feedback): Make "required" text for input elements configurable (#11152) (#11153)

Fix #11152

This introduces an option `isRequiredLabel`, and I planned to also add
`errorMessageText`.

However, this PR is branched off from a version that is a couple days
old. Right now, @c298lee is currently working on getsentry/sentry#63749,
which is causing major changes and the current version on master doesn't
work yet. Therefore, I didn't yet implement `errorMessageText`.

So consider this PR as a PoC, and either feel free to tag me when the
screenshot changes are done – then I'll redo the changes based on the
version that supports screenshots – or add the option on your own;
however you prefer 🙂

One open question:

Until now, there was only the error message:

> There was a problem submitting feedback, please wait and try again.

Now, depending on the status code, we have three error messages:

> - 'Unable to send Feedback. This is because of network issues, or
because you are using an ad-blocker.'
> - 'Unable to send Feedback. Invalid response from server.'
> - 'Unable to send Feedback'

Do you have a suggestion how we could make the message configurable,
without introducing too many and redundant settings? Maybe we should go
back to only one message? I'm not sure if an end-user cares about
whether it is a network issue or a server error.

---------

Co-authored-by: Billy Vong <[email protected]>

Author: soerface

packages/feedback/src/constants/index.ts

@@ -20,6 +20,7 @@ export const MESSAGE_LABEL = 'Description';
 export const NAME_PLACEHOLDER = 'Your Name';
 export const NAME_LABEL = 'Name';
 export const SUCCESS_MESSAGE_TEXT = 'Thank you for your report!';
+export const IS_REQUIRED_TEXT = '(required)';
 
 export const FEEDBACK_WIDGET_SOURCE = 'widget';
 export const FEEDBACK_API_SOURCE = 'api';

packages/feedback/src/core/integration.ts

@@ -9,6 +9,7 @@ import {
   EMAIL_LABEL,
   EMAIL_PLACEHOLDER,
   FORM_TITLE,
+  IS_REQUIRED_TEXT,
   MESSAGE_LABEL,
   MESSAGE_PLACEHOLDER,
   NAME_LABEL,
@@ -76,6 +77,7 @@ export const _feedbackIntegration = (({
   nameLabel = NAME_LABEL,
   namePlaceholder = NAME_PLACEHOLDER,
   successMessageText = SUCCESS_MESSAGE_TEXT,
+  isRequiredText = IS_REQUIRED_TEXT,
 
   // FeedbackCallbacks
   onFormOpen,
@@ -116,6 +118,7 @@ export const _feedbackIntegration = (({
     nameLabel,
     namePlaceholder,
     successMessageText,
+    isRequiredText,
 
     onFormClose,
     onFormOpen,

packages/feedback/src/modal/components/Form.tsx

@@ -29,6 +29,7 @@ export interface Props
     | 'showEmail'
     | 'showName'
     | 'submitButtonLabel'
+    | 'isRequiredText'
   > {
   defaultEmail: string;
   defaultName: string;
@@ -66,6 +67,7 @@ export function Form({
   showEmail,
   showName,
   submitButtonLabel,
+  isRequiredText,
   screenshotInput,
 }: Props): VNode {
   // TODO: set a ref on the form, and whenever an input changes call proceessForm() and setError()
@@ -145,7 +147,7 @@ export function Form({
 
           {showName ? (
             <label for="name" class="form__label">
-              <LabelText label={nameLabel} isRequired={isNameRequired} />
+              <LabelText label={nameLabel} isRequiredText={isRequiredText} isRequired={isNameRequired} />
               <input
                 class="form__input"
                 defaultValue={defaultName}
@@ -162,7 +164,7 @@ export function Form({
 
           {showEmail ? (
             <label for="email" class="form__label">
-              <LabelText label={emailLabel} isRequired={isEmailRequired} />
+              <LabelText label={emailLabel} isRequiredText={isRequiredText} isRequired={isEmailRequired} />
               <input
                 class="form__input"
                 defaultValue={defaultEmail}
@@ -178,7 +180,7 @@ export function Form({
           )}
 
           <label for="message" class="form__label">
-            <LabelText label={messageLabel} isRequired />
+            <LabelText label={messageLabel} isRequiredText={isRequiredText} isRequired />
             <textarea
               autoFocus
               class="form__input form__input--textarea"
@@ -223,11 +225,15 @@ export function Form({
   );
 }
 
-function LabelText({ label, isRequired }: { label: string; isRequired: boolean }): VNode {
+function LabelText({
+  label,
+  isRequired,
+  isRequiredText,
+}: { label: string; isRequired: boolean; isRequiredText: string }): VNode {
   return (
     <span class="form__label__text">
       {label}
-      {isRequired && <span class="form__label__text--required">(required)</span>}
+      {isRequired && <span class="form__label__text--required">{isRequiredText}</span>}
     </span>
   );
 }

packages/feedback/src/modal/createDialog.tsx

@@ -69,6 +69,7 @@ export function createDialog({ options, screenshotIntegration, sendFeedback, sha
         defaultName={(userKey && user && user[userKey.name]) || ''}
         defaultEmail={(userKey && user && user[userKey.email]) || ''}
         successMessageText={options.successMessageText}
+        isRequiredText={options.isRequiredText}
         onFormClose={() => {
           renderContent(false);
           options.onFormClose && options.onFormClose();

packages/feedback/src/types/config.ts

@@ -135,6 +135,11 @@ export interface FeedbackTextConfiguration {
    * Message after feedback was sent successfully
    */
   successMessageText: string;
+
+  /**
+   * Text which indicates that a field is required
+   */
+  isRequiredText: string;
 }
 
 /**