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]>

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;
 }
 
 /**