Skip to content
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

Bugfix/fwf 3866 translation tags added in components #399

Merged
merged 3 commits into from
Jan 15, 2025
Merged

Bugfix/fwf 3866 translation tags added in components #399

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
36cb8c3
translation tags added in components
Ajay-aot Jan 6, 2025
f94ddfc
Merge branch 'develop' of https://github.com/Ajay-aot/forms-flow-ai-m…
Ajay-aot Jan 6, 2025
21411a3
Merge branch 'develop' of https://github.com/Ajay-aot/forms-flow-ai-m…
Ajay-aot Jan 15, 2025
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
13 changes: 8 additions & 5 deletions forms-flow-components/src/components/CustomComponents/BuildModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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 === " ") {
Expand All @@ -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>
))}
</>
Expand All @@ -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}
Expand All @@ -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>
);
Expand Down
8 changes: 5 additions & 3 deletions forms-flow-components/src/components/CustomComponents/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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
Expand All @@ -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>
Expand All @@ -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>
Expand Down
8 changes: 5 additions & 3 deletions forms-flow-components/src/components/CustomComponents/ConfirmModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -42,6 +43,7 @@ export const ConfirmModal: React.FC<ConfirmModalProps> = React.memo(({
secondoryBtnariaLabel = 'Cancel Button',
secondaryBtnLoading= false
}) => {
const { t } = useTranslation();
return (
<>
<Modal
Expand All @@ -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">
Expand All @@ -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>
Expand Down
6 changes: 4 additions & 2 deletions forms-flow-components/src/components/CustomComponents/ErrorModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -25,6 +26,7 @@ export const ErrorModal: React.FC<ErrorModalProps> = React.memo(({
primaryBtndataTestid = 'Dismiss-button',
primaryBtnariaLabel = 'Dismiss',
}) => {
const { t } = useTranslation();
return (
<Modal
show={show}
Expand All @@ -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">
Expand All @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions forms-flow-components/src/components/CustomComponents/FormBuilderModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand All @@ -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}
Expand All @@ -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")}
Expand Down
7 changes: 4 additions & 3 deletions forms-flow-components/src/components/CustomComponents/FormInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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(()=>{
Expand All @@ -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">
Expand Down Expand Up @@ -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>
Expand Down
8 changes: 5 additions & 3 deletions forms-flow-components/src/components/CustomComponents/FormTextArea.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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>;

Expand Down Expand Up @@ -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">
Expand All @@ -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}
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion forms-flow-components/src/components/CustomComponents/HistoryModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand Down
22 changes: 11 additions & 11 deletions forms-flow-components/src/components/CustomComponents/ImportModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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)`),
},
];

Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
Loading
Loading