From 36cb8c38df7e141883a22595ba0967f439e25e0e Mon Sep 17 00:00:00 2001 From: Ajay krishna Date: Mon, 6 Jan 2025 11:00:19 +0530 Subject: [PATCH] translation tags added in components --- .../CustomComponents/BuildModal.tsx | 13 ++++++----- .../components/CustomComponents/Button.tsx | 8 ++++--- .../CustomComponents/ConfirmModal.tsx | 8 ++++--- .../CustomComponents/ErrorModal.tsx | 6 +++-- .../CustomComponents/FormBuilderModal.tsx | 6 ++--- .../components/CustomComponents/FormInput.tsx | 9 ++++---- .../CustomComponents/FormTextArea.tsx | 8 ++++--- .../CustomComponents/HistoryModal.tsx | 2 +- .../CustomComponents/ImportModal.tsx | 22 +++++++++---------- .../CustomComponents/InputDropdown.tsx | 16 ++++++++------ .../src/components/CustomComponents/Pills.tsx | 7 ++++-- .../src/components/CustomComponents/Radio.tsx | 5 ++++- .../components/CustomComponents/Search.tsx | 7 ++++-- .../src/components/CustomComponents/Tabs.tsx | 7 ++++-- 14 files changed, 75 insertions(+), 49 deletions(-) diff --git a/forms-flow-components/src/components/CustomComponents/BuildModal.tsx b/forms-flow-components/src/components/CustomComponents/BuildModal.tsx index bccced82d..41f41a294 100644 --- a/forms-flow-components/src/components/CustomComponents/BuildModal.tsx +++ b/forms-flow-components/src/components/CustomComponents/BuildModal.tsx @@ -1,6 +1,7 @@ import React from "react"; import Modal from "react-bootstrap/Modal"; import { CloseIcon } from "../SvgIcons/index"; +import { useTranslation } from "react-i18next"; interface BuildModalProps { show: boolean; @@ -20,7 +21,8 @@ const buildModalContent = ( heading: string; body: string; onClick?: () => void; - }[] + }[], + t: (key: string) => string ) => { const handleKeyDown = (event, onClick) => { if (event.key === "Enter" || event.key === " ") { @@ -39,8 +41,8 @@ const buildModalContent = ( aria-label={`Button for ${heading}`} data-testid={`button-${id}`} > - {heading} - {body} + {t(heading)} + {t(body)} ))} @@ -49,6 +51,7 @@ const buildModalContent = ( export const BuildModal: React.FC = React.memo( ({ show, onClose, title, contents }) => { + const { t } = useTranslation(); return ( = React.memo( > - {title} + {t(title)}
- {buildModalContent(contents)} + {buildModalContent(contents, t)} ); diff --git a/forms-flow-components/src/components/CustomComponents/Button.tsx b/forms-flow-components/src/components/CustomComponents/Button.tsx index 8e9be450d..9f03c5dab 100644 --- a/forms-flow-components/src/components/CustomComponents/Button.tsx +++ b/forms-flow-components/src/components/CustomComponents/Button.tsx @@ -3,6 +3,7 @@ import Button from "react-bootstrap/Button"; import ButtonGroup from "react-bootstrap/ButtonGroup"; import Dropdown from "react-bootstrap/Dropdown"; import { ChevronIcon } from "../SvgIcons/index"; +import { useTranslation } from "react-i18next"; interface DropdownItem { label: string; @@ -46,6 +47,7 @@ export const CustomButton: React.FC = ({ const toggleRef = useRef(null); const [menuStyle, setMenuStyle] = useState({}); const [dropdownOpen, setDropdownOpen] = useState(false); + const { t } = useTranslation(); const updateMenuStyle = () => { if (buttonRef.current && toggleRef.current) { @@ -85,7 +87,7 @@ export const CustomButton: React.FC = ({ name={name} className={`${size !== 'md' ? className : `btn-md ${className}`}`} > - {label} + {t(label)} = ({ data-testid={item.dataTestid} aria-label={item.ariaLabel} > - {item.label} + {t(item.label)} ))} @@ -131,7 +133,7 @@ export const CustomButton: React.FC = ({ }`} > {icon && {icon}} - {label} + {t(label)} {buttonLoading && } diff --git a/forms-flow-components/src/components/CustomComponents/ConfirmModal.tsx b/forms-flow-components/src/components/CustomComponents/ConfirmModal.tsx index 8748ac80a..7cc82e2f3 100644 --- a/forms-flow-components/src/components/CustomComponents/ConfirmModal.tsx +++ b/forms-flow-components/src/components/CustomComponents/ConfirmModal.tsx @@ -2,6 +2,7 @@ import React from "react"; import Modal from "react-bootstrap/Modal"; import {CustomButton} from "./Button"; import { CloseIcon } from "../SvgIcons/index"; +import { useTranslation } from "react-i18next"; interface ConfirmModalProps { show: boolean; @@ -42,6 +43,7 @@ export const ConfirmModal: React.FC = React.memo(({ secondoryBtnariaLabel = 'Cancel Button', secondaryBtnLoading= false }) => { + const { t } = useTranslation(); return ( <> = React.memo(({ - {title} + {t(title)}
@@ -73,7 +75,7 @@ export const ConfirmModal: React.FC = React.memo(({ data-testid="confirm-modal-primary-message" aria-label="Primary message" > - {message} + {t(message)}
{messageSecondary && (
= React.memo(({ data-testid="confirm-modal-secondary-message" aria-label="Secondary message" > - {messageSecondary} + {t(messageSecondary)}
)} diff --git a/forms-flow-components/src/components/CustomComponents/ErrorModal.tsx b/forms-flow-components/src/components/CustomComponents/ErrorModal.tsx index 582ee4187..2f9497953 100644 --- a/forms-flow-components/src/components/CustomComponents/ErrorModal.tsx +++ b/forms-flow-components/src/components/CustomComponents/ErrorModal.tsx @@ -2,6 +2,7 @@ import React from "react"; import Modal from "react-bootstrap/Modal"; import {CustomButton} from "./Button"; import { CloseIcon } from "../SvgIcons/index"; +import { useTranslation } from "react-i18next"; interface ErrorModalProps { show: boolean; @@ -25,6 +26,7 @@ export const ErrorModal: React.FC = React.memo(({ primaryBtndataTestid = 'Dismiss-button', primaryBtnariaLabel = 'Dismiss', }) => { + const { t } = useTranslation(); return ( = React.memo(({ - {title} + {t(title)}
@@ -55,7 +57,7 @@ export const ErrorModal: React.FC = React.memo(({ data-testid="error-modal-primary-message" aria-label="Primary message" > - {message} + {t(message)}
diff --git a/forms-flow-components/src/components/CustomComponents/FormBuilderModal.tsx b/forms-flow-components/src/components/CustomComponents/FormBuilderModal.tsx index 831562379..93ea8cf5c 100644 --- a/forms-flow-components/src/components/CustomComponents/FormBuilderModal.tsx +++ b/forms-flow-components/src/components/CustomComponents/FormBuilderModal.tsx @@ -126,7 +126,7 @@ export const FormBuilderModal: React.FC = React.memo( > - {modalHeader} + {t(modalHeader)}
@@ -136,7 +136,7 @@ export const FormBuilderModal: React.FC = React.memo( = React.memo( /> = ({ turnOnLoader = false, autoFocusInput = false, },) => { - + const { t } = useTranslation(); const inputClassNames = `form-control-input ${icon ? 'with-icon' : ''} ${className}`; const inputRef = useRef(null); useEffect(()=>{ @@ -67,7 +68,7 @@ export const FormInput: React.FC = ({ {label && ( - {label} {required && *} + {t(label)} {required && *} )} @@ -77,7 +78,7 @@ export const FormInput: React.FC = ({ value={value} onChange={onChange} onBlur={onBlur} - placeholder={placeholder} + placeholder={t(placeholder)} isInvalid={isInvalid} disabled={disabled} size={size} @@ -103,7 +104,7 @@ export const FormInput: React.FC = ({ {isInvalid && ( - {feedback} + {t(feedback)} )} diff --git a/forms-flow-components/src/components/CustomComponents/FormTextArea.tsx b/forms-flow-components/src/components/CustomComponents/FormTextArea.tsx index 7b2be506f..9632f1cfa 100644 --- a/forms-flow-components/src/components/CustomComponents/FormTextArea.tsx +++ b/forms-flow-components/src/components/CustomComponents/FormTextArea.tsx @@ -1,5 +1,6 @@ import React, { ChangeEvent, FocusEvent, KeyboardEvent, useRef, forwardRef, useEffect } from 'react'; import { Form, InputGroup } from 'react-bootstrap'; +import { useTranslation } from "react-i18next"; interface FormTextAreaProps { type?: string; @@ -47,6 +48,7 @@ export const FormTextArea = forwardRef(( maxRows = 5, iconPosition = "top" }, ref) => { + const { t } = useTranslation(); const internalRef = useRef(null); const combinedRef = (ref || internalRef) as React.RefObject; @@ -76,7 +78,7 @@ export const FormTextArea = forwardRef(( {label && ( - {label} {required && *} + {t(label)} {required && *} )} @@ -87,7 +89,7 @@ export const FormTextArea = forwardRef(( value={value} onChange={onChange} onBlur={onBlur} - placeholder={placeholder} + placeholder={t(placeholder)} isInvalid={isInvalid} disabled={disabled} size={size} @@ -109,7 +111,7 @@ export const FormTextArea = forwardRef(( )} {isInvalid && ( - {feedback} + {t(feedback)} )} diff --git a/forms-flow-components/src/components/CustomComponents/HistoryModal.tsx b/forms-flow-components/src/components/CustomComponents/HistoryModal.tsx index 58e9d33a4..b6575c3b1 100644 --- a/forms-flow-components/src/components/CustomComponents/HistoryModal.tsx +++ b/forms-flow-components/src/components/CustomComponents/HistoryModal.tsx @@ -290,7 +290,7 @@ export const HistoryModal: React.FC = React.memo( > - {title} + {t(title)}
diff --git a/forms-flow-components/src/components/CustomComponents/ImportModal.tsx b/forms-flow-components/src/components/CustomComponents/ImportModal.tsx index 1795cdc32..8ce57b2a3 100644 --- a/forms-flow-components/src/components/CustomComponents/ImportModal.tsx +++ b/forms-flow-components/src/components/CustomComponents/ImportModal.tsx @@ -76,7 +76,7 @@ export const ImportModal: React.FC = React.memo( const redColor = computedStyle.getPropertyValue("--ff-red-000"); const [selectedFile, setSelectedFile] = useState(null); const [uploadProgress, setUploadProgress] = useState(0); - const skipImport = "Skip, do not import"; + const skipImport = t("Skip, do not import"); const [selectedLayoutVersion, setSelectedLayoutVersion] = useState<{ value: any; label: string; @@ -96,28 +96,28 @@ export const ImportModal: React.FC = React.memo( const [inprogress, setInprogress] = useState(true); const layoutOptions = [ - { value: true, label: "Skip, do not import" }, + { value: true, label: t("Skip, do not import") }, { value: "major", - label: `import as version ${ + label: t(`import as version ${ fileItems?.form?.majorVersion + 1 - }.0 (only impacts new submissions)`, + }.0 (only impacts new submissions)`), }, { value: "minor", - label: `import as version ${fileItems?.form?.majorVersion}.${ + label: t(`import as version ${fileItems?.form?.majorVersion}.${ fileItems?.form?.minorVersion + 1 - } (impacts previous and new submissions)`, + } (impacts previous and new submissions)`), }, ]; const flowOptions = [ - { value: true, label: "Skip, do not import" }, + { value: true, label: t("Skip, do not import") }, { value: "major", - label: `import as version ${fileItems?.workflow?.majorVersion ?? 1}.${ + label: t(`import as version ${fileItems?.workflow?.majorVersion ?? 1}.${ fileItems?.workflow?.minorVersion ?? 0 - } (only impacts new submissions)`, + } (only impacts new submissions)`), }, ]; @@ -369,7 +369,7 @@ export const ImportModal: React.FC = React.memo(
{selectedLayoutVersion ? selectedLayoutVersion.label - : "Skip, do not import"} + : t("Skip, do not import")}
@@ -404,7 +404,7 @@ export const ImportModal: React.FC = React.memo(
{selectedFlowVersion ? selectedFlowVersion.label - : "Skip, do not import"} + : t("Skip, do not import")}
diff --git a/forms-flow-components/src/components/CustomComponents/InputDropdown.tsx b/forms-flow-components/src/components/CustomComponents/InputDropdown.tsx index 3ad19539d..49776d41e 100644 --- a/forms-flow-components/src/components/CustomComponents/InputDropdown.tsx +++ b/forms-flow-components/src/components/CustomComponents/InputDropdown.tsx @@ -3,6 +3,7 @@ import { InputGroup } from 'react-bootstrap'; import ListGroup from 'react-bootstrap/ListGroup'; import { FormInput } from './FormInput'; import { CloseIcon , ChevronIcon } from "../SvgIcons/index"; +import { useTranslation } from "react-i18next"; interface DropdownItem { @@ -47,6 +48,7 @@ export const InputDropdown: React.FC = ({ inputClassName='', onBlurDropDown }) => { + const { t } = useTranslation(); const [isDropdownOpen, setIsDropdownOpen] = useState(false); const [inputValue, setInputValue] = useState(selectedOption || ''); const [filteredItems, setFilteredItems] = useState([]); @@ -126,14 +128,14 @@ export const InputDropdown: React.FC = ({ isInvalid={isInvalid} icon={} className="input-with-close" - label={dropdownLabel} - feedback={feedback} + label={t(dropdownLabel)} + feedback={t(feedback)} /> ) : ( = ({ icon={} className={`${inputClassName} ${isDropdownOpen ? 'border-input collapsed' : ''}`} onIconClick={toggleDropdown} - label={dropdownLabel} + label={t(dropdownLabel)} required={required} onBlur={onBlurDropDown} isInvalid={!(isDropdownOpen || selectedOption) && isInvalid} - feedback={feedback} + feedback={t(feedback)} /> )} @@ -159,7 +161,7 @@ export const InputDropdown: React.FC = ({ className="list-first-item-btn" data-testid="list-first-item" > - {firstItemLabel} + {t(firstItemLabel)} )} {(filteredItems.length > 0 ? filteredItems : Options).map((item, index) => ( @@ -169,7 +171,7 @@ export const InputDropdown: React.FC = ({ data-testid={`list-${index}-item`} aria-label={`list-${item.label}-item`} > - {item.label} + {t(item.label)} ))} diff --git a/forms-flow-components/src/components/CustomComponents/Pills.tsx b/forms-flow-components/src/components/CustomComponents/Pills.tsx index b7df7e5a5..9e47245f7 100644 --- a/forms-flow-components/src/components/CustomComponents/Pills.tsx +++ b/forms-flow-components/src/components/CustomComponents/Pills.tsx @@ -1,5 +1,7 @@ import React from "react"; import Badge from "react-bootstrap/Badge"; +import { useTranslation } from "react-i18next"; + interface CustomPillProps { label: string; @@ -20,11 +22,12 @@ export const CustomPill: React.FC = ({ secondaryLabel="", onClick, }) => { + const { t } = useTranslation(); return (
- {label} - { secondaryLabel && ({secondaryLabel})} + {t(label)} + { secondaryLabel && ({t(secondaryLabel)})} {icon &&