Skip to content

Fix failing and missing translations in Indicator Manager #4465

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jdeanquin-dg merged 2 commits into from
Mar 30, 2026
Merged

Fix failing and missing translations in Indicator Manager #4465

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
805b052
Modify failing and missing translations in Indicator Manager
brianbrix Mar 30, 2026
83adc7f
Missing translations in Indicator manager
brianbrix Mar 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 10 additions & 8 deletions ...reampv2/packages/reampv2-app/src/modules/admin/indicator_manager/components/DateInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { Value } from 'react-date-picker/dist/cjs/shared/types';
import 'react-date-picker/dist/DatePicker.css';
import './css/React-Calendar.css';
import './css/DateInput.css';
import initialTranslations from '../config/initialTranslations.json';

export interface DateInputProps {
id?: string;
Expand Down Expand Up @@ -44,6 +45,7 @@ const DateInput: React.FC<DateInputProps> = (props) => {
disableCalendar,
translations
} = props;
const t = (key: string): string => translations[key] ?? initialTranslations[key as keyof typeof initialTranslations] ?? key;
const globalSettings: SettingsType = useSelector((state: any) => state.fetchSettingsReducer.settings);
const [dateFormat, setDateFormat] = useState<string | undefined>();
const [inputValue, setInputValue] = useState<string | Date | undefined>(value);
Expand Down Expand Up @@ -97,9 +99,9 @@ const DateInput: React.FC<DateInputProps> = (props) => {
<DatePicker
id={id}
format={dateFormat}
monthPlaceholder={translations["amp.indicatormanager:mm"]}
dayPlaceholder={translations["amp.indicatormanager:dd"]}
yearPlaceholder={translations["amp.indicatormanager:yyyy"]}
monthPlaceholder={t("amp.indicatormanager:mm")}
dayPlaceholder={t("amp.indicatormanager:dd")}
yearPlaceholder={t("amp.indicatormanager:yyyy")}
className={className}
onChange={onChange}
name={name}
Expand All @@ -109,12 +111,12 @@ const DateInput: React.FC<DateInputProps> = (props) => {
defaultValue={defaultValue}
disabled={disabled}
clearIcon={clearIcon === null ? null : <ClearInputButton />}
monthAriaLabel="Month"
dayAriaLabel="Day"
yearAriaLabel="Year"
monthAriaLabel={t("amp.indicatormanager:aria-month")}
dayAriaLabel={t("amp.indicatormanager:aria-day")}
yearAriaLabel={t("amp.indicatormanager:aria-year")}
closeCalendar
clearAriaLabel="Clear Date"
calendarAriaLabel="Toggle Calendar"
clearAriaLabel={t("amp.indicatormanager:aria-clear-date")}
calendarAriaLabel={t("amp.indicatormanager:aria-toggle-calendar")}
inputRef={inputRef}
locale="en-US"
disableCalendar={disableCalendar}
Expand Down
220 changes: 116 additions & 104 deletions ...eampv2-app/src/modules/admin/indicator_manager/components/modals/AddNewIndicatorModal.tsx
View file
Open in desktop

Large diffs are not rendered by default.

228 changes: 120 additions & 108 deletions .../reampv2-app/src/modules/admin/indicator_manager/components/modals/EditIndicatorModal.tsx
View file
Open in desktop

Large diffs are not rendered by default.

18 changes: 10 additions & 8 deletions ...ckages/reampv2-app/src/modules/admin/indicator_manager/components/modals/OutcomeModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { Modal, Button, Form, Row, Col } from 'react-bootstrap';
import { Formik, FormikProps, Form as FormikForm, Field } from 'formik';
import * as Yup from 'yup';
import styles from './css/IndicatorModal.module.css';
import initialTranslations from '../../config/initialTranslations.json';

interface AddNewOutcomeModalProps {
show: boolean;
Expand All @@ -15,8 +16,9 @@ interface AddNewOutcomeModalProps {

const OutcomeModal: React.FC<AddNewOutcomeModalProps> = ({ show, setShow, onSubmit, initialName = '', initialDescription = '', translations = {} }) => {
const nodeRef = useRef(null);
const t = (key: string): string => translations[key] ?? initialTranslations[key as keyof typeof initialTranslations] ?? key;
const validationSchema = Yup.object().shape({
name: Yup.string().required(translations['amp.outcomeoutput:errors-name-required'] || 'Name is required'),
name: Yup.string().required(t('amp.outcomeoutput:errors-name-required')),
description: Yup.string()
});

Expand All @@ -40,7 +42,7 @@ const OutcomeModal: React.FC<AddNewOutcomeModalProps> = ({ show, setShow, onSubm
size='lg'
>
<Modal.Header closeButton>
<Modal.Title>{translations['amp.outcomeoutput:modal-title-outcome'] || 'Add New Outcome'}</Modal.Title>
<Modal.Title>{t('amp.outcomeoutput:add-new-outcome')}</Modal.Title>
</Modal.Header>
<Formik
initialValues={initialValues}
Expand All @@ -58,7 +60,7 @@ const OutcomeModal: React.FC<AddNewOutcomeModalProps> = ({ show, setShow, onSubm
<div className={styles.viewmodal_wrapper}>
<Row className={styles.view_row}>
<Form.Group as={Col} className={styles.view_item} controlId="formOutcomeName">
<Form.Label>{translations['amp.outcomeoutput:outcome-name'] || 'Outcome Name'}</Form.Label>
<Form.Label>{t('amp.outcomeoutput:outcome-name')}</Form.Label>
<Form.Control
defaultValue={props.values.name}
onChange={props.handleChange}
Expand All @@ -68,7 +70,7 @@ const OutcomeModal: React.FC<AddNewOutcomeModalProps> = ({ show, setShow, onSubm
isInvalid={!!props.errors.name}
required
aria-required type="text"
placeholder={translations['amp.outcomeoutput:outcome-name'] || 'Outcome Name'}
placeholder={t('amp.outcomeoutput:outcome-name')}
/>
<Form.Control.Feedback type="invalid" className={styles.text_is_invalid}>
{props.errors.name}
Expand All @@ -77,15 +79,15 @@ const OutcomeModal: React.FC<AddNewOutcomeModalProps> = ({ show, setShow, onSubm
</Row>
<Row className={styles.view_row}>
<Form.Group as={Col} className={styles.view_item} controlId="formOutcomeDescription">
<Form.Label>{translations['amp.outcomeoutput:outcome-description'] || 'Outcome Description'}</Form.Label>
<Form.Label>{t('amp.outcomeoutput:outcome-description')}</Form.Label>
<Form.Control
defaultValue={props.values.description}
onChange={props.handleChange}
onBlur={props.handleBlur}
name="description"
type="text"
className={`${styles.input_field} ${(props.errors.description && props.touched.description) && styles.text_is_invalid}`}
placeholder={translations['amp.outcomeoutput:outcome-description'] || 'Outcome Description'}
placeholder={t('amp.outcomeoutput:outcome-description')}
/>
<Form.Control.Feedback type="invalid" className={styles.text_is_invalid}>
{props.errors.description}
Expand All @@ -96,10 +98,10 @@ const OutcomeModal: React.FC<AddNewOutcomeModalProps> = ({ show, setShow, onSubm
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
{translations['amp.outcomeoutput:cancel'] || 'Cancel'}
{t('amp.outcomeoutput:cancel')}
</Button>
<Button type="submit" variant="success">
{translations['amp.outcomeoutput:save-outcome'] || 'Save Outcome'}
{t('amp.outcomeoutput:save-outcome')}
</Button>
</Modal.Footer>
</Form>
Expand Down
20 changes: 11 additions & 9 deletions ...ackages/reampv2-app/src/modules/admin/indicator_manager/components/modals/OutputModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { Modal, Button, Form, Row, Col } from 'react-bootstrap';
import { Formik, FormikProps } from 'formik';
import * as Yup from 'yup';
import styles from './css/IndicatorModal.module.css';
import initialTranslations from '../../config/initialTranslations.json';

interface Outcome {
id: number;
Expand Down Expand Up @@ -31,12 +32,13 @@ const OutputModal: React.FC<AddNewOutputModalProps> = ({
loading = false
}) => {
const nodeRef = useRef(null);
const t = (key: string): string => translations[key] ?? initialTranslations[key as keyof typeof initialTranslations] ?? key;

// Only render if selectedOutcome is provided
if (!selectedOutcome) return null;

const validationSchema = Yup.object().shape({
name: Yup.string().required(translations['amp.outcomeoutput:errors-name-required'] || 'Name is required'),
name: Yup.string().required(t('amp.outcomeoutput:errors-name-required')),
description: Yup.string(),
outcomeId: Yup.number().required('Outcome is required')
});
Expand All @@ -62,7 +64,7 @@ const OutputModal: React.FC<AddNewOutputModalProps> = ({
size='lg'
>
<Modal.Header closeButton>
<Modal.Title>{translations['amp.outcomeoutput:modal-title-output'] || 'Add New Output'}</Modal.Title>
<Modal.Title>{t('amp.outcomeoutput:add-new-output')}</Modal.Title>
</Modal.Header>
<Formik
initialValues={initialValues}
Expand All @@ -80,7 +82,7 @@ const OutputModal: React.FC<AddNewOutputModalProps> = ({
<div className={styles.viewmodal_wrapper}>
<Row className={styles.view_row}>
<Form.Group as={Col} className={styles.view_item} controlId="formOutputName">
<Form.Label>{translations['amp.outcomeoutput:output-name'] || 'Output Name'}</Form.Label>
<Form.Label>{t('amp.outcomeoutput:output-name')}</Form.Label>
<Form.Control
defaultValue={props.values.name}
onChange={props.handleChange}
Expand All @@ -90,7 +92,7 @@ const OutputModal: React.FC<AddNewOutputModalProps> = ({
isInvalid={!!props.errors.name}
required
aria-required type="text"
placeholder={translations['amp.outcomeoutput:output-name'] || 'Output Name'}
placeholder={t('amp.outcomeoutput:output-name')}
/>
<Form.Control.Feedback type="invalid" className={styles.text_is_invalid}>
{props.errors.name}
Expand All @@ -99,15 +101,15 @@ const OutputModal: React.FC<AddNewOutputModalProps> = ({
</Row>
<Row className={styles.view_row}>
<Form.Group as={Col} className={styles.view_item} controlId="formOutputDescription">
<Form.Label>{translations['amp.outcomeoutput:output-description'] || 'Output Description'}</Form.Label>
<Form.Label>{t('amp.outcomeoutput:output-description')}</Form.Label>
<Form.Control
defaultValue={props.values.description}
onChange={props.handleChange}
onBlur={props.handleBlur}
name="description"
type="text"
className={`${styles.input_field} ${(props.errors.description && props.touched.description) && styles.text_is_invalid}`}
placeholder={translations['amp.outcomeoutput:output-description'] || 'Output Description'}
placeholder={t('amp.outcomeoutput:output-description')}
/>
<Form.Control.Feedback type="invalid" className={styles.text_is_invalid}>
{props.errors.description}
Expand All @@ -116,7 +118,7 @@ const OutputModal: React.FC<AddNewOutputModalProps> = ({
</Row>
<Row className={styles.view_row}>
<Form.Group as={Col} className={styles.view_item} controlId="formOutputOutcome">
<Form.Label>{translations['amp.outcomeoutput:linked-outcome'] || 'Linked Outcome'}</Form.Label>
<Form.Label>{t('amp.outcomeoutput:linked-outcome')}</Form.Label>
<Form.Control
type="text"
value={`${selectedOutcome.id}: ${selectedOutcome.name}`}
Expand All @@ -130,10 +132,10 @@ const OutputModal: React.FC<AddNewOutputModalProps> = ({
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose} disabled={loading}>
{translations['amp.outcomeoutput:cancel'] || 'Cancel'}
{t('amp.outcomeoutput:cancel')}
</Button>
<Button type="submit" variant="success" disabled={loading}>
{translations['amp.outcomeoutput:save-output'] || 'Save Output'}
{t('amp.outcomeoutput:save-output')}
</Button>
</Modal.Footer>
</Form>
Expand Down
Loading