From 1f586ea6df42fe51df7779f8b3d657376f83cafc Mon Sep 17 00:00:00 2001 From: erikataot Date: Thu, 19 Oct 2023 11:52:26 -0700 Subject: [PATCH 1/5] ORV2 remove i18n deps and uses --- frontend/package-lock.json | 61 ------------------- frontend/package.json | 2 - .../components/form/CustomFormComponents.tsx | 22 +------ .../components/dashboard/AddVehicleButton.tsx | 14 +++-- .../form/subsections/AxleGroupForm.tsx | 35 +++++------ frontend/src/i18n/i18n.ts | 16 ----- frontend/src/i18n/translations/en.json | 10 +-- frontend/src/index.tsx | 1 - frontend/src/setupTests.ts | 4 -- 9 files changed, 28 insertions(+), 137 deletions(-) delete mode 100644 frontend/src/i18n/i18n.ts diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 34ee9e57a..0ab2d1b99 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -21,7 +21,6 @@ "@tanstack/react-query": "^4.29.7", "axios": "^1.4.0", "dayjs": "^1.11.7", - "i18next": "^22.5.0", "lottie-web": "^5.12.2", "material-react-table": "^1.10.0", "mui-nested-menu": "^3.2.1", @@ -29,7 +28,6 @@ "react-dom": "^18.2.0", "react-error-boundary": "^4.0.7", "react-hook-form": "^7.43.9", - "react-i18next": "^12.2.2", "react-modal": "^3.16.1", "react-oidc-context": "^2.2.2", "react-router-dom": "^6.11.0", @@ -5357,14 +5355,6 @@ "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==", "dev": true }, - "node_modules/html-parse-stringify": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz", - "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==", - "dependencies": { - "void-elements": "3.1.0" - } - }, "node_modules/http-proxy-agent": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz", @@ -5392,28 +5382,6 @@ "node": ">= 6" } }, - "node_modules/i18next": { - "version": "22.5.0", - "resolved": "https://registry.npmjs.org/i18next/-/i18next-22.5.0.tgz", - "integrity": "sha512-sqWuJFj+wJAKQP2qBQ+b7STzxZNUmnSxrehBCCj9vDOW9RDYPfqCaK1Hbh2frNYQuPziz6O2CGoJPwtzY3vAYA==", - "funding": [ - { - "type": "individual", - "url": "https://locize.com" - }, - { - "type": "individual", - "url": "https://locize.com/i18next.html" - }, - { - "type": "individual", - "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project" - } - ], - "dependencies": { - "@babel/runtime": "^7.20.6" - } - }, "node_modules/iconv-lite": { "version": "0.6.3", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", @@ -8095,27 +8063,6 @@ "react": "^16.8.0 || ^17 || ^18" } }, - "node_modules/react-i18next": { - "version": "12.2.2", - "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-12.2.2.tgz", - "integrity": "sha512-KBB6buBmVKXUWNxXHdnthp+38gPyBT46hJCAIQ8rX19NFL/m2ahte2KARfIDf2tMnSAL7wwck6eDOd/9zn6aFg==", - "dependencies": { - "@babel/runtime": "^7.20.6", - "html-parse-stringify": "^3.0.1" - }, - "peerDependencies": { - "i18next": ">= 19.0.0", - "react": ">= 16.8.0" - }, - "peerDependenciesMeta": { - "react-dom": { - "optional": true - }, - "react-native": { - "optional": true - } - } - }, "node_modules/react-is": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", @@ -9509,14 +9456,6 @@ "vitest": "*" } }, - "node_modules/void-elements": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz", - "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==", - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/w3c-xmlserializer": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index ce1d94149..c03e13ff7 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -16,7 +16,6 @@ "@tanstack/react-query": "^4.29.7", "axios": "^1.4.0", "dayjs": "^1.11.7", - "i18next": "^22.5.0", "lottie-web": "^5.12.2", "material-react-table": "^1.10.0", "mui-nested-menu": "^3.2.1", @@ -24,7 +23,6 @@ "react-dom": "^18.2.0", "react-error-boundary": "^4.0.7", "react-hook-form": "^7.43.9", - "react-i18next": "^12.2.2", "react-modal": "^3.16.1", "react-oidc-context": "^2.2.2", "react-router-dom": "^6.11.0", diff --git a/frontend/src/common/components/form/CustomFormComponents.tsx b/frontend/src/common/components/form/CustomFormComponents.tsx index 4a663b7c8..4bc32d7c1 100644 --- a/frontend/src/common/components/form/CustomFormComponents.tsx +++ b/frontend/src/common/components/form/CustomFormComponents.tsx @@ -6,7 +6,6 @@ import { RegisterOptions, useFormContext, } from "react-hook-form"; -import { useTranslation } from "react-i18next"; import { ORBC_FormTypes } from "../../types/common"; import { CustomDatePicker } from "./subFormComponents/CustomDatePicker"; import { CustomOutlinedInput } from "./subFormComponents/CustomOutlinedInput"; @@ -20,7 +19,6 @@ export interface CustomFormComponentProps { type: "input" | "select" | "phone" | "datePicker"; feature: string; options: CustomFormOptionsProps; - i18options?: InternationalOptionsProps; menuOptions?: JSX.Element[]; className?: string; disabled?: boolean; @@ -40,15 +38,6 @@ interface CustomFormOptionsProps { inputType?: "number"; // currently only support number, add "date", "email" and other types later } -/** - * Optional Internationalization properties - */ -interface InternationalOptionsProps { - label_i18?: string; - inValidMessage_i18?: string; - inValidMessage_fieldName_i18?: string; -} - /** * Recursive method to dynamically get the error message of a fieldname that has nested json * Example: Field name of primaryContact.provinceCode @@ -81,7 +70,6 @@ export const getErrorMessage = (errors: any, fieldPath: string): string => { * @param label Text to label the field. Must be identical to the value in i18/translations/en.json if integrating with i18 * @param inputProps MUI component attributes applied to the html input element. * @param width Width of the MUI Box container that contains all of the code for the form component. Defaults t0 520px - * @param i18options Optional Internationalization integration using i18 * @param customHelperText Non-bold text to appear in parenthesis beside the label * @param menuOptions Menu items array for MUI Select component * @@ -99,7 +87,6 @@ export const CustomFormComponent = ({ customHelperText, inputType, // currently only used for "input" types, add for "select" types later }, - i18options, menuOptions, className, disabled, @@ -109,7 +96,6 @@ export const CustomFormComponent = ({ control, formState: { errors }, } = useFormContext(); - const { t } = useTranslation(); /** * Function to check the rules object for either required or required: { value: true} @@ -190,7 +176,7 @@ export const CustomFormComponent = ({ id={`${feature}-${name}-label`} sx={{ fontWeight: "bold", marginBottom: "8px" }} > - {i18options?.label_i18 ? t(i18options?.label_i18) : label} + {label} {!isRequired() && ( (optional) )} @@ -207,11 +193,7 @@ export const CustomFormComponent = ({ data-testid={`alert-${name}`} error > - {i18options?.inValidMessage_i18 - ? t(i18options?.inValidMessage_i18, { - fieldName: label, - }) - : getErrorMessage(errors, name)} + {getErrorMessage(errors, name)} )} diff --git a/frontend/src/features/manageVehicles/components/dashboard/AddVehicleButton.tsx b/frontend/src/features/manageVehicles/components/dashboard/AddVehicleButton.tsx index 99f8bd6c8..929a45152 100644 --- a/frontend/src/features/manageVehicles/components/dashboard/AddVehicleButton.tsx +++ b/frontend/src/features/manageVehicles/components/dashboard/AddVehicleButton.tsx @@ -7,7 +7,7 @@ import Popper from "@mui/material/Popper"; import MenuItem from "@mui/material/MenuItem"; import MenuList from "@mui/material/MenuList"; import Stack from "@mui/material/Stack"; -import { useTranslation } from "react-i18next"; +//import { useTranslation } from "react-i18next"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faChevronDown } from "@fortawesome/free-solid-svg-icons"; @@ -30,16 +30,18 @@ export const AddVehicleButton = () => { const [isMenuOpen, setIsMenuOpen] = React.useState(false); const anchorRef = React.useRef(null); - const { t } = useTranslation(); + //const { t } = useTranslation(); const options = [ { vehicleMode: VEHICLE_TYPES_ENUM.POWER_UNIT, - translationKey: "vehicle.power-unit", + //translationKey: "vehicle.power-unit", + labelValue: "Power Unit" }, { vehicleMode: VEHICLE_TYPES_ENUM.TRAILER, - translationKey: "vehicle.trailer", + //translationKey: "vehicle.trailer", + labelValue: "Trailer" }, ]; @@ -133,7 +135,7 @@ export const AddVehicleButton = () => { onKeyDown={handleListKeyDown} > {options.map((option, index) => { - const { vehicleMode, translationKey } = option; + const { vehicleMode, labelValue } = option; return ( { handleMenuItemClick(event, index, vehicleMode) } > - {t(translationKey)} + {labelValue} ); })} diff --git a/frontend/src/features/manageVehicles/components/form/subsections/AxleGroupForm.tsx b/frontend/src/features/manageVehicles/components/form/subsections/AxleGroupForm.tsx index 80d98af96..fdc5c1ae9 100644 --- a/frontend/src/features/manageVehicles/components/form/subsections/AxleGroupForm.tsx +++ b/frontend/src/features/manageVehicles/components/form/subsections/AxleGroupForm.tsx @@ -1,5 +1,4 @@ import { useFormContext } from "react-hook-form"; -import { useTranslation } from "react-i18next"; import "./VehicleForm.scss"; import Radio from "@mui/material/Radio"; import RadioGroup from "@mui/material/RadioGroup"; @@ -30,20 +29,18 @@ interface AxleGroupFormProps { * @returns A react component with axle group form fields. */ export const AxleGroupForm = ({ axleGroup }: AxleGroupFormProps) => { - const translationPrefix = "vehicle.axle-group"; const { register } = useFormContext(); const boldTextStyle = { fontWeight: "bold", }; - const { t } = useTranslation(); return (
- {t(`${translationPrefix}.axle-front-group`)} + Axle Front Group { } - label={t(`${translationPrefix}.axle-front-group.single`)} + label="Single" /> } - label={t(`${translationPrefix}.axle-front-group.tandem`)} + label="Tandem" /> } - label={t(`${translationPrefix}.axle-front-group.tridem`)} + label="Tridem" /> @@ -74,7 +71,7 @@ export const AxleGroupForm = ({ axleGroup }: AxleGroupFormProps) => {
- {t(`${translationPrefix}.axle-type-front`)} + Axle Type Front { } - label={t(`${translationPrefix}.axle-type.steering`)} + label="Steering" /> } - label={t(`${translationPrefix}.axle-type.drive`)} + label="Drive" /> @@ -100,7 +97,7 @@ export const AxleGroupForm = ({ axleGroup }: AxleGroupFormProps) => {
- {t(`${translationPrefix}.axle-type-rear`)} + Axle Type Rear { } - label={t(`${translationPrefix}.axle-type.steering`)} + label="Steering" /> } - label={t(`${translationPrefix}.axle-type.drive`)} + label="Drive" /> @@ -127,7 +124,7 @@ export const AxleGroupForm = ({ axleGroup }: AxleGroupFormProps) => { {/* {t('vehicle.axle-group.axle-group-number')} */} - {t("vehicle.axle-group.axle-group-number")} + Axle Group Number {
- {t("vehicle.axle-group.axle-group-spacing")} + Axle Group Spacing {
- {t("vehicle.axle-group.interaxle-spread-front")} + Interaxle Spread Front (m) {
- {t("vehicle.axle-group.interaxle-spread-rear")} + Interaxle Spread Rear (m) {
- {t("vehicle.axle-group.interaxle-spread-front")} + Number of Tires Front {
- {t("vehicle.axle-group.number-of-tires-rear")} + Number of Tires Rear ({ - useTranslation: () => ({ t: (key: any) => key }), -})); From 52a8370e5382bb204745874b0244e990a9eed0d7 Mon Sep 17 00:00:00 2001 From: erikataot Date: Thu, 19 Oct 2023 11:53:38 -0700 Subject: [PATCH 2/5] remove translation file --- frontend/src/i18n/translations/en.json | 38 -------------------------- 1 file changed, 38 deletions(-) delete mode 100644 frontend/src/i18n/translations/en.json diff --git a/frontend/src/i18n/translations/en.json b/frontend/src/i18n/translations/en.json deleted file mode 100644 index b502a4d8c..000000000 --- a/frontend/src/i18n/translations/en.json +++ /dev/null @@ -1,38 +0,0 @@ -{ - "vehicle.dashboard.vehicle-inventory": "Vehicle Inventory", - "vehicle.power-unit.make": "Make", - "vehicle.power-unit.required": "{{fieldName}} is required.", - "vehicle.power-unit.unit-number": "Unit #", - "vehicle.power-unit.year": "Year", - "vehicle.power-unit.vin": "VIN", - "vehicle.power-unit.plate": "Plate", - "vehicle.power-unit.licensed-gvw": "Licensed GVW (kg)", - "vehicle.power-unit.steer-axle-tire-size": "Steer Axle Tire Size (mm)", - "vehicle.power-unit.power-unit-type": "Vehicle Sub-type", - "vehicle.power-unit.country": "Country", - "vehicle.power-unit.province": "Province / State Registered", - "vehicle.add-vehicle.power-unit": "Add Vehicle: Power Unit", - "vehicle.add-vehicle.trailer": "Add Vehicle: Trailer", - "vehicle.add-vehicle.add-power-unit-success": "Power unit has been added successfully", - "vehicle.power-unit": "Power Unit", - "vehicle.vehicle-configuration": "Vehicle Configuration", - "vehicle.power-unit-details": "Power Unit Details", - "vehicle.trailer": "Trailer", - "vehicle.axle-group": "Axle Group", - "vehicle.axle-group.axle-front-group": "Axle Front Group", - "vehicle.axle-group.axle-front-group.single": "Single", - "vehicle.axle-group.axle-front-group.tandem": "Tandem", - "vehicle.axle-group.axle-front-group.tridem": "Tridem", - "vehicle.axle-group.axle-type-front": "Axle Type Front", - "vehicle.axle-group.axle-type-rear": "Axle Type Rear", - "vehicle.axle-group.axle-type.steering": "Steering", - "vehicle.axle-group.axle-type.drive": "Drive", - "vehicle.axle-group.axle-group-number": "Axle Group Number", - "vehicle.axle-group.axle-group-spacing": "Axle Group Spacing", - "vehicle.axle-group.interaxle-spread-front": "Interaxle Spread Front (m)", - "vehicle.axle-group.interaxle-spread-rear": "Interaxle Spread Rear (m)", - "vehicle.axle-group.number-of-tires-front": "Number of Tires Front", - "vehicle.axle-group.number-of-tires-rear": "v", - "vehicle.form.add-axle-group": "Add Axle Group", - "vehicle.form.submit": "Add Vehicle" -} From 152af617e288d7ad940f6399b53b5acd742a5e0e Mon Sep 17 00:00:00 2001 From: erikataot Date: Thu, 19 Oct 2023 12:02:42 -0700 Subject: [PATCH 3/5] ORV2 remove i18next references --- .../manageVehicles/components/dashboard/AddVehicleButton.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/frontend/src/features/manageVehicles/components/dashboard/AddVehicleButton.tsx b/frontend/src/features/manageVehicles/components/dashboard/AddVehicleButton.tsx index 929a45152..ef88029d0 100644 --- a/frontend/src/features/manageVehicles/components/dashboard/AddVehicleButton.tsx +++ b/frontend/src/features/manageVehicles/components/dashboard/AddVehicleButton.tsx @@ -7,7 +7,6 @@ import Popper from "@mui/material/Popper"; import MenuItem from "@mui/material/MenuItem"; import MenuList from "@mui/material/MenuList"; import Stack from "@mui/material/Stack"; -//import { useTranslation } from "react-i18next"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faChevronDown } from "@fortawesome/free-solid-svg-icons"; @@ -30,17 +29,13 @@ export const AddVehicleButton = () => { const [isMenuOpen, setIsMenuOpen] = React.useState(false); const anchorRef = React.useRef(null); - //const { t } = useTranslation(); - const options = [ { vehicleMode: VEHICLE_TYPES_ENUM.POWER_UNIT, - //translationKey: "vehicle.power-unit", labelValue: "Power Unit" }, { vehicleMode: VEHICLE_TYPES_ENUM.TRAILER, - //translationKey: "vehicle.trailer", labelValue: "Trailer" }, ]; From 9ff0f60143e179b66749b340b48f0ff606a53915 Mon Sep 17 00:00:00 2001 From: erikataot Date: Thu, 19 Oct 2023 13:02:46 -0700 Subject: [PATCH 4/5] ORV2-1394 removing i18options --- .../manageVehicles/components/form/PowerUnitForm.tsx | 9 --------- 1 file changed, 9 deletions(-) diff --git a/frontend/src/features/manageVehicles/components/form/PowerUnitForm.tsx b/frontend/src/features/manageVehicles/components/form/PowerUnitForm.tsx index 6936ccb19..561565b3b 100644 --- a/frontend/src/features/manageVehicles/components/form/PowerUnitForm.tsx +++ b/frontend/src/features/manageVehicles/components/form/PowerUnitForm.tsx @@ -149,9 +149,6 @@ export const PowerUnitForm = ({ powerUnit }: PowerUnitFormProps) => { label: "Unit #", width: formFieldStyle.width, }} - i18options={{ - label_i18: "vehicle.power-unit.unit-number", - }} /> { label: "Make", width: formFieldStyle.width, }} - i18options={{ - label_i18: "vehicle.power-unit.make", - }} /> { label: "Plate", width: formFieldStyle.width, }} - i18options={{ - label_i18: "vehicle.power-unit.plate", - }} /> Date: Thu, 19 Oct 2023 13:10:57 -0700 Subject: [PATCH 5/5] ORV2-1394 more cleanup --- .../src/common/components/form/CustomFormComponents.tsx | 2 +- .../components/form/VehicleDetails/VehicleDetails.tsx | 6 ------ 2 files changed, 1 insertion(+), 7 deletions(-) diff --git a/frontend/src/common/components/form/CustomFormComponents.tsx b/frontend/src/common/components/form/CustomFormComponents.tsx index 4bc32d7c1..bee3e8c5b 100644 --- a/frontend/src/common/components/form/CustomFormComponents.tsx +++ b/frontend/src/common/components/form/CustomFormComponents.tsx @@ -67,7 +67,7 @@ export const getErrorMessage = (errors: any, fieldPath: string): string => { * @param options These options are used to customize the component through styles, validation rules, and TanStack React Query integration * @param name The name of the field, which is the Unique name of your input. * @param rules Validation rules such as required, min, max, etc - * @param label Text to label the field. Must be identical to the value in i18/translations/en.json if integrating with i18 + * @param label Text to label the field. * @param inputProps MUI component attributes applied to the html input element. * @param width Width of the MUI Box container that contains all of the code for the form component. Defaults t0 520px * @param customHelperText Non-bold text to appear in parenthesis beside the label diff --git a/frontend/src/features/permits/pages/TermOversize/components/form/VehicleDetails/VehicleDetails.tsx b/frontend/src/features/permits/pages/TermOversize/components/form/VehicleDetails/VehicleDetails.tsx index 3d463b967..2699e401d 100644 --- a/frontend/src/features/permits/pages/TermOversize/components/form/VehicleDetails/VehicleDetails.tsx +++ b/frontend/src/features/permits/pages/TermOversize/components/form/VehicleDetails/VehicleDetails.tsx @@ -284,9 +284,6 @@ export const VehicleDetails = ({ label: "Plate", width: formFieldStyle.width, }} - i18options={{ - label_i18: "vehicle.power-unit.plate", - }} />