Merge pull request #399 from Ajay-aot/bugfix/FWF-3866-translation-fixes

Bugfix/fwf 3866 translation tags added in components
AOT-Technologies · Jan 15, 2025 · 40fb668 · 40fb668
2 parents 96b36e3 + 21411a3
commit 40fb668
Show file tree

Hide file tree

Showing 14 changed files with 74 additions and 48 deletions.
diff --git 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}`}
         >
-          <span className="mb-3 content-heading">{heading}</span>
-          <span className="content-body">{body}</span>
+          <span className="mb-3 content-heading">{t(heading)}</span>
+          <span className="content-body">{t(body)}</span>
         </button>
       ))}
     </>
@@ -49,6 +51,7 @@ const buildModalContent = (
 
 export const BuildModal: React.FC<BuildModalProps> = React.memo(
   ({ show, onClose, title, contents }) => {
+    const { t } = useTranslation();
     return (
       <Modal
         show={show}
@@ -62,14 +65,14 @@ export const BuildModal: React.FC<BuildModalProps> = React.memo(
       >
         <Modal.Header>
           <Modal.Title id="build-modal-title">
-            <b>{title}</b>
+            <b>{t(title)}</b>
           </Modal.Title>
           <div className="d-flex align-items-center">
             <CloseIcon onClick={onClose} />
           </div>
         </Modal.Header>
         <Modal.Body className="d-flex">
-          {buildModalContent(contents)}
+        {buildModalContent(contents, t)}
         </Modal.Body>
       </Modal>
     );

diff --git 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<CustomButtonProps> = ({
   const toggleRef = useRef<HTMLButtonElement>(null);
   const [menuStyle, setMenuStyle] = useState<React.CSSProperties>({});
   const [dropdownOpen, setDropdownOpen] = useState<boolean>(false);
+  const { t } = useTranslation();
 
   const updateMenuStyle = () => {
     if (buttonRef.current && toggleRef.current) {
@@ -85,7 +87,7 @@ export const CustomButton: React.FC<CustomButtonProps> = ({
           name={name}
           className={`${size !== 'md' ? className : `btn-md ${className}`}`}
         >
-          {label}
+          {t(label)}
         </Button>
 
         <Dropdown.Toggle
@@ -106,7 +108,7 @@ export const CustomButton: React.FC<CustomButtonProps> = ({
               data-testid={item.dataTestid}
               aria-label={item.ariaLabel}
             >
-              {item.label}
+              {t(item.label)}
             </Dropdown.Item>
           ))}
         </Dropdown.Menu>
@@ -131,7 +133,7 @@ export const CustomButton: React.FC<CustomButtonProps> = ({
         }`}
       >
         {icon && <span className="me-2">{icon}</span>}
-        {label}
+        {t(label)}
       </div>
       {buttonLoading && <span className="dotted-spinner"></span>}
     </Button>

diff --git 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<ConfirmModalProps> = React.memo(({
   secondoryBtnariaLabel = 'Cancel Button',
   secondaryBtnLoading= false
 }) => {
+  const { t } = useTranslation();
   return (
     <>
       <Modal
@@ -56,7 +58,7 @@ export const ConfirmModal: React.FC<ConfirmModalProps> = React.memo(({
         <Modal.Header>
           <Modal.Title id="confirm-modal-title">
             <b>
-              {title}
+              {t(title)}
             </b>
           </Modal.Title>
           <div className="d-flex align-items-center">
@@ -73,15 +75,15 @@ export const ConfirmModal: React.FC<ConfirmModalProps> = React.memo(({
               data-testid="confirm-modal-primary-message"
               aria-label="Primary message"
             >
-              {message}
+              {t(message)}
             </div>
             {messageSecondary && (
               <div
                 className="message-secondary"
                 data-testid="confirm-modal-secondary-message"
                 aria-label="Secondary message"
               >
-                {messageSecondary}
+                {t(messageSecondary)}
               </div>
             )}
           </div>

diff --git 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<ErrorModalProps> = React.memo(({
   primaryBtndataTestid = 'Dismiss-button',
   primaryBtnariaLabel = 'Dismiss',
 }) => {
+  const { t } = useTranslation();
   return (
       <Modal
         show={show}
@@ -38,7 +40,7 @@ export const ErrorModal: React.FC<ErrorModalProps> = React.memo(({
         <Modal.Header>
           <Modal.Title id="error-modal-title" className="text-danger">
             <b>
-              {title}
+              {t(title)}
             </b>
           </Modal.Title>
           <div className="d-flex align-items-center">
@@ -55,7 +57,7 @@ export const ErrorModal: React.FC<ErrorModalProps> = React.memo(({
               data-testid="error-modal-primary-message"
               aria-label="Primary message"
             >
-              {message}
+              {t(message)}
             </div>
           </div>
         </Modal.Body>

diff --git 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<BuildFormModalProps> = React.memo(
         >
           <Modal.Header>
             <Modal.Title>
-              <b>{modalHeader}</b>
+              <b>{t(modalHeader)}</b>
             </Modal.Title>
             <div className="d-flex align-items-center">
               <CloseIcon onClick={onClose} />
@@ -136,7 +136,7 @@ export const FormBuilderModal: React.FC<BuildFormModalProps> = React.memo(
             <FormInput
               name="title"
               type="text"
-              placeholder={placeholderForForm}
+              placeholder={t(placeholderForForm)}
               label={nameLabel}
               aria-label={t("Name of the form")}
               data-testid={nameInputDataTestid}
@@ -155,7 +155,7 @@ export const FormBuilderModal: React.FC<BuildFormModalProps> = React.memo(
             />
            <FormTextArea
               name="description"
-              placeholder={placeholderForDescription}
+              placeholder={t(placeholderForDescription)}
               label={descriptionLabel}
               className="form-input"
               aria-label={t("Description of the new form")}

diff --git a/forms-flow-components/src/components/CustomComponents/FormInput.tsx b/forms-flow-components/src/components/CustomComponents/FormInput.tsx
@@ -1,5 +1,6 @@
 import React, { ChangeEvent, FocusEvent, KeyboardEvent, useEffect, useRef } from 'react';
 import { Form, InputGroup } from 'react-bootstrap';
+import { useTranslation } from "react-i18next";
 
 interface FormInputProps {
   type?: string;
@@ -52,7 +53,7 @@ export const FormInput: React.FC<FormInputProps> = ({
   minLength,
   maxLength, 
 }) => {
-
+  const { t } = useTranslation();
   const inputClassNames = `form-control-input ${icon ? 'with-icon' : ''} ${className}`;
   const inputRef = useRef(null);
   useEffect(()=>{ 
@@ -71,7 +72,7 @@ export const FormInput: React.FC<FormInputProps> = ({
     <Form.Group controlId={id}>
       {label && (
         <Form.Label className='custom-form-control-label'>
-          {label} {required && <span className='required-icon'>*</span>}
+          {t(label)}{required && <span className='required-icon'>*</span>}
         </Form.Label>
       )}
       <InputGroup className="custom-form-input-group">
@@ -109,7 +110,7 @@ export const FormInput: React.FC<FormInputProps> = ({
         </InputGroup>
         {isInvalid && (
             <Form.Control.Feedback className='custom-feedback' type="invalid">
-              {feedback}
+              {t(feedback)}
             </Form.Control.Feedback>
           )}
       </Form.Group>

diff --git 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;
@@ -51,6 +52,7 @@ export const FormTextArea = forwardRef<HTMLTextAreaElement, FormTextAreaProps>((
     minLength, 
     maxLength, 
 }, ref) => {
+    const { t } = useTranslation();
     const internalRef = useRef<HTMLTextAreaElement>(null);
     const combinedRef = (ref || internalRef) as React.RefObject<HTMLTextAreaElement>;
 
@@ -80,7 +82,7 @@ export const FormTextArea = forwardRef<HTMLTextAreaElement, FormTextAreaProps>((
             <Form.Group controlId={id}>
                 {label && (
                     <Form.Label className="custom-form-control-label">
-                        {label} {required && <span className="required-icon">*</span>}
+                        {t(label)} {required && <span className="required-icon">*</span>}
                     </Form.Label>
                 )}
                 <InputGroup className="custom-form-input-group">
@@ -91,7 +93,7 @@ export const FormTextArea = forwardRef<HTMLTextAreaElement, FormTextAreaProps>((
                         value={value}
                         onChange={onChange}
                         onBlur={onBlur}
-                        placeholder={placeholder}
+                        placeholder={t(placeholder)}
                         isInvalid={isInvalid}
                         disabled={disabled}
                         size={size}
@@ -115,7 +117,7 @@ export const FormTextArea = forwardRef<HTMLTextAreaElement, FormTextAreaProps>((
                     )}
                     {isInvalid && (
                         <Form.Control.Feedback className="custom-feedback" type="invalid">
-                            {feedback}
+                            {t(feedback)}
                         </Form.Control.Feedback>
                     )}
                 </InputGroup>

diff --git 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<HistoryModalProps> = React.memo(
         >
           <Modal.Header>
             <Modal.Title id="history-modal-title">
-              <b>{title}</b>
+              <b>{t(title)}</b>
             </Modal.Title>
             <div className="d-flex align-items-center ">
               <CloseIcon onClick={handleClose} />

diff --git 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<ImportModalProps> = React.memo(
     const redColor = computedStyle.getPropertyValue("--ff-red-000");
     const [selectedFile, setSelectedFile] = useState<File | null>(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<ImportModalProps> = 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<ImportModalProps> = React.memo(
                     <div className="text-truncate">
                       {selectedLayoutVersion
                         ? selectedLayoutVersion.label
-                        : "Skip, do not import"}
+                        : t("Skip, do not import")}
                     </div>
                     <DropdownIcon />
                   </div>
@@ -404,7 +404,7 @@ export const ImportModal: React.FC<ImportModalProps> = React.memo(
                     <div className="text-truncate">
                       {selectedFlowVersion
                         ? selectedFlowVersion.label
-                        : "Skip, do not import"}
+                        : t("Skip, do not import")}
                     </div>
                     <DropdownIcon />
                   </div>