From 23d873cda351c2aded6eac7e933ed9e02b71cda8 Mon Sep 17 00:00:00 2001 From: Conor Macpherson Date: Tue, 4 Apr 2023 15:39:18 -0400 Subject: [PATCH 001/103] Ensure feedback options are not submitting in their translated forms. --- .../delete_workspace/delete_feedback.tsx | 48 ++++++++++++------- .../components/feedback_modal/feedback.tsx | 24 ++++++---- 2 files changed, 45 insertions(+), 27 deletions(-) diff --git a/webapp/channels/src/components/admin_console/billing/delete_workspace/delete_feedback.tsx b/webapp/channels/src/components/admin_console/billing/delete_workspace/delete_feedback.tsx index 4b103160cf..e6d9825ed5 100644 --- a/webapp/channels/src/components/admin_console/billing/delete_workspace/delete_feedback.tsx +++ b/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 = [ - props.intl.formatMessage({ - id: 'feedback.deleteWorkspace.feedbackNoValue', - defaultMessage: 'No longer found value', - }), - props.intl.formatMessage({ - id: 'feedback.deleteWorkspace.feedbackMoving', - defaultMessage: 'Moving to a different solution', - }), - props.intl.formatMessage({ - id: 'feedback.deleteWorkspace.feedbackMistake', - defaultMessage: 'Created a workspace by mistake', - }), - props.intl.formatMessage({ - id: 'feedback.deleteWorkspace.feedbackHosting', - defaultMessage: 'Moving to hosting my own Mattermost instance (self-hosted)', - }), + const deleteFeedbackOptions: FeedbackOption[] = [ + { + translatedMessage: props.intl.formatMessage({ + id: 'feedback.deleteWorkspace.feedbackNoValue', + defaultMessage: 'No longer found value', + }), + submissionValue: 'No longer found value', + }, + { + translatedMessage: props.intl.formatMessage({ + id: 'feedback.deleteWorkspace.feedbackMoving', + defaultMessage: 'Moving to a different solution', + }), + submissionValue: 'Moving to a different solution', + }, + { + 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 ( diff --git a/webapp/channels/src/components/feedback_modal/feedback.tsx b/webapp/channels/src/components/feedback_modal/feedback.tsx index af8daaac91..7609b88240 100644 --- a/webapp/channels/src/components/feedback_modal/feedback.tsx +++ b/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 feedbackModalOptions: string[] = [ + const optionOther = {translatedMessage: props.intl.formatMessage({id: 'feedback.other', defaultMessage: 'Other'}), submissionValue: 'Other'}; + 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, - key: option, - testId: option, + value: option.submissionValue, + key: option.translatedMessage, + testId: option.submissionValue, }; })} value={reason} onChange={(e) => setReason(e.target.value)} /> - {reason === optionOther && + {reasonOther && <>