Merge pull request #22830 from mattermost/MM-51692-delete-reason-feedback-is-sending-notifications-with-translated-text

Ensure feedback options are not submitting in their translated forms.

webapp/channels/src/components/admin_console/billing/delete_workspace/delete_feedback.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 import {injectIntl, WrappedComponentProps} from 'react-intl';
 
 import {Feedback} from '@mattermost/types/cloud';
-import FeedbackModal from 'components/feedback_modal/feedback';
+import FeedbackModal, {FeedbackOption} from 'components/feedback_modal/feedback';
 
 type Props = {
     onSubmit: (deleteFeedback: Feedback) => void;
@@ -28,23 +28,35 @@ const DeleteFeedbackModal = (props: Props) => {
         defaultMessage: 'Delete Workspace',
     });
 
-    const deleteFeedbackOptions = [
+    const deleteFeedbackOptions: FeedbackOption[] = [
-        props.intl.formatMessage({
+        {
+            translatedMessage: props.intl.formatMessage({
                 id: 'feedback.deleteWorkspace.feedbackNoValue',
                 defaultMessage: 'No longer found value',
             }),
-        props.intl.formatMessage({
+            submissionValue: 'No longer found value',
+        },
+        {
+            translatedMessage: props.intl.formatMessage({
                 id: 'feedback.deleteWorkspace.feedbackMoving',
                 defaultMessage: 'Moving to a different solution',
             }),
-        props.intl.formatMessage({
+            submissionValue: 'Moving to a different solution',
+        },
+        {
+            translatedMessage: props.intl.formatMessage({
                 id: 'feedback.deleteWorkspace.feedbackMistake',
                 defaultMessage: 'Created a workspace by mistake',
             }),
-        props.intl.formatMessage({
+            submissionValue: 'Created a workspace by mistake',
+        },
+        {
+            translatedMessage: props.intl.formatMessage({
                 id: 'feedback.deleteWorkspace.feedbackHosting',
                 defaultMessage: 'Moving to hosting my own Mattermost instance (self-hosted)',
             }),
+            submissionValue: 'Moving to hosting my own Mattermost instance (self-hosted)',
+        },
     ];
 
     return (

webapp/channels/src/components/feedback_modal/downgrade_feedback.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 import {injectIntl, WrappedComponentProps} from 'react-intl';
 
 import {Feedback} from '@mattermost/types/cloud';
-import FeedbackModal from 'components/feedback_modal/feedback';
+import FeedbackModal, {FeedbackOption} from 'components/feedback_modal/feedback';
 
 type Props = {
     onSubmit: (downgradeFeedback: Feedback) => void;
@@ -28,23 +28,35 @@ const DowngradeFeedbackModal = (props: Props) => {
         defaultMessage: 'Downgrade',
     });
 
-    const downgradeFeedbackOptions = [
+    const downgradeFeedbackOptions: FeedbackOption[] = [
-        props.intl.formatMessage({
+        {
+            translatedMessage: props.intl.formatMessage({
                 id: 'feedback.downgradeWorkspace.technicalIssues',
                 defaultMessage: 'Experienced technical issues',
             }),
-        props.intl.formatMessage({
+            submissionValue: 'Experienced technical issues',
+        },
+        {
+            translatedMessage: props.intl.formatMessage({
                 id: 'feedback.downgradeWorkspace.noLongerNeeded',
                 defaultMessage: 'No longer need Cloud Professional features',
             }),
-        props.intl.formatMessage({
+            submissionValue: 'No longer need Cloud Professional features',
+        },
+        {
+            translatedMessage: props.intl.formatMessage({
                 id: 'feedback.downgradeWorkspace.exploringOptions',
                 defaultMessage: 'Exploring other solutions',
             }),
-        props.intl.formatMessage({
+            submissionValue: 'Exploring other solutions',
+        },
+        {
+            translatedMessage: props.intl.formatMessage({
                 id: 'feedback.downgradeWorkspace.tooExpensive',
                 defaultMessage: 'Too expensive',
             }),
+            submissionValue: 'Too expensive',
+        },
     ];
 
     return (

webapp/channels/src/components/feedback_modal/feedback.tsx

@@ -15,18 +15,23 @@ import {ModalIdentifiers} from 'utils/constants';
 
 import './feedback.scss';
 
+export interface FeedbackOption {
+    translatedMessage: string;
+    submissionValue: string;
+}
+
 type Props = {
     onSubmit: (deleteFeedback: Feedback) => void;
     title: string;
     submitText: string;
-    feedbackOptions: string[];
+    feedbackOptions: FeedbackOption[];
     freeformTextPlaceholder: string;
 } & WrappedComponentProps
 
 function FeedbackModal(props: Props) {
     const maxFreeFormTextLength = 500;
-    const optionOther = props.intl.formatMessage({id: 'feedback.other', defaultMessage: 'Other'});
+    const optionOther = {translatedMessage: props.intl.formatMessage({id: 'feedback.other', defaultMessage: 'Other'}), submissionValue: 'Other'};
-    const feedbackModalOptions: string[] = [
+    const feedbackModalOptions: FeedbackOption[] = [
         ...props.feedbackOptions,
         optionOther,
     ];
@@ -34,9 +39,9 @@ function FeedbackModal(props: Props) {
     const [reason, setReason] = useState('');
     const [comments, setComments] = useState('');
     const reasonNotSelected = reason === '';
-    const reasonOther = reason === optionOther;
+    const reasonOther = reason === optionOther.submissionValue;
     const commentsNotProvided = comments.trim() === '';
-    const submitDisabled = reasonNotSelected || (reason === optionOther && commentsNotProvided);
+    const submitDisabled = reasonNotSelected || (reasonOther && commentsNotProvided);
 
     const dispatch = useDispatch();
 
@@ -71,15 +76,15 @@ function FeedbackModal(props: Props) {
                 testId='FeedbackModalRadioGroup'
                 values={feedbackModalOptions.map((option) => {
                     return {
-                        value: option,
+                        value: option.submissionValue,
-                        key: option,
+                        key: option.translatedMessage,
-                        testId: option,
+                        testId: option.submissionValue,
                     };
                 })}
                 value={reason}
                 onChange={(e) => setReason(e.target.value)}
             />
-            {reason === optionOther &&
+            {reasonOther &&
                 <>
                     <textarea
                         data-testid={'FeedbackModal__TextInput'}