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({
+        {
-            id: 'feedback.deleteWorkspace.feedbackNoValue',
+            translatedMessage: props.intl.formatMessage({
-            defaultMessage: 'No longer found value',
+                id: 'feedback.deleteWorkspace.feedbackNoValue',
-        }),
+                defaultMessage: 'No longer found value',
-        props.intl.formatMessage({
+            }),
-            id: 'feedback.deleteWorkspace.feedbackMoving',
+            submissionValue: 'No longer found value',
-            defaultMessage: 'Moving to a different solution',
+        },
-        }),
+        {
-        props.intl.formatMessage({
+            translatedMessage: props.intl.formatMessage({
-            id: 'feedback.deleteWorkspace.feedbackMistake',
+                id: 'feedback.deleteWorkspace.feedbackMoving',
-            defaultMessage: 'Created a workspace by mistake',
+                defaultMessage: 'Moving to a different solution',
-        }),
+            }),
-        props.intl.formatMessage({
+            submissionValue: 'Moving to a different solution',
-            id: 'feedback.deleteWorkspace.feedbackHosting',
+        },
-            defaultMessage: 'Moving to hosting my own Mattermost instance (self-hosted)',
+        {
-        }),
+            translatedMessage: props.intl.formatMessage({
+                id: 'feedback.deleteWorkspace.feedbackMistake',
+                defaultMessage: 'Created a workspace by mistake',
+            }),
+            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/feedback.tsx

@@ -14,19 +14,25 @@ import RadioButtonGroup from 'components/common/radio_group';
 import {ModalIdentifiers} from 'utils/constants';
 
 import './feedback.scss';
+import {string} from 'yargs';
+
+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 +40,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 +77,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'}