Merge pull request #616 from kbss-cvut/fix/568-fix-localization

Fix localization

public/locales/cs/translation.json

@@ -1,4 +1,8 @@
 {
+  "user": {
+    "logout": "Odhlásit se",
+    "changePassword": "Změnit heslo"
+  },
   "categories": {
     "systems": "Systémy",
     "trees": "Poruchové stromy",
@@ -30,6 +34,10 @@
     "gateType": "Typ hradla",
     "noSystemError": "Na panelu Navigační panel vyberte možnost Systém"
   },
+  "deleteFtaModal": {
+    "title": "Smazat strom poruch",
+    "explanation": "Smazáním stromu chyb se smaže celá stromová struktura. Pokračovat ve smazání stromu?"
+  },
   "newFmeaModal": {
     "title": "FMEA agregáty",
     "namePlaceholder": "Název FMEA",
@@ -38,7 +46,8 @@
   },
   "diagramSidePanel": {
     "cutsetToggleToolTip": "Přepnout do pohledu řezu",
-    "minimumOperationalHours": "Min. provozní doba"
+    "minimumOperationalHours": "Min. provozní doba",
+    "diagramOptions": "Možnosti diagramu"
   },
   "faultEventScenariosTable": {
     "cutset": "Řez",
@@ -95,6 +104,12 @@
     "created": "Vytvořeno",
     "operationalHours": "Doba provozu"
   },
+  "systemComponentMenu": {
+    "editComponent": "Upravit komponentu",
+    "notSelected": "Není vybrána žádná komponenta",
+    "functions": "Funkce",
+    "linkedComponent": "Propojená komponenta"
+  },
   "faultEventMenu": {
     "eventName": "Název události",
     "criticality": "Kritičnost",

public/locales/en/translation.json

@@ -1,4 +1,8 @@
 {
+  "user": {
+    "logout": "Logout",
+    "changePassword": "Change password"
+  },
   "categories": {
     "systems": "Systems",
     "trees": "Fault trees",
@@ -30,6 +34,10 @@
     "gateType": "Gate type",
     "noSystemError": "Select the System from the Navbar"
   },
+  "deleteFtaModal": {
+    "title": "Delete Fault Tree",
+    "explanation": "Deleting fault tree will delete the whole tree structure. Proceed to delete the tree?"
+  },
   "newFmeaModal": {
     "title": "FMEA Aggregates",
     "namePlaceholder": "FMEA Name",
@@ -38,7 +46,8 @@
   },
   "diagramSidePanel": {
     "cutsetToggleToolTip": "Switch to cutsets view",
-    "minimumOperationalHours": "Min. operational hours"
+    "minimumOperationalHours": "Min. operational hours",
+    "diagramOptions": "Diagram Options"
   },
   "faultEventScenariosTable": {
     "cutset": "Cutset",
@@ -95,6 +104,12 @@
     "created": "Created",
     "operationalHours": "Operational Hours"
   },
+  "systemComponentMenu": {
+    "editComponent": "Edit Component",
+    "notSelected": "No component selected",
+    "functions": "Functions",
+    "linkedComponent": "Linked Component"
+  },
   "faultEventMenu": {
     "eventName": "Event name",
     "criticality": "Criticality",

src/components/appBar/AppBar.tsx

@@ -108,9 +108,9 @@ const AppBar = ({ title, showBackButton = false, topPanelHeight }: Props) => {
       {loggedUser.roles && loggedUser.roles.indexOf("ROLE_ADMIN") >= 0 && (
         <MenuItem onClick={navigateToAdmin}>Administration</MenuItem>
       )}
-      {!isUsingOidcAuth() && <MenuItem onClick={handleChangePasswordDialogOpen}>Change Password</MenuItem>}
+      {!isUsingOidcAuth() && <MenuItem onClick={handleChangePasswordDialogOpen}>{t("user.changePassword")}</MenuItem>}
 
-      <MenuItem onClick={handleLogout}>Logout</MenuItem>
+      <MenuItem onClick={handleLogout}>{t("user.logout")}</MenuItem>
     </Menu>
   );
 

src/components/dashboard/content/list/DashboardFaultTreeList.tsx

@@ -22,9 +22,12 @@ import { Link as RouterLink } from "react-router-dom";
 import { extractFragment } from "@services/utils/uriIdentifierUtils";
 import { ROUTES } from "@utils/constants";
 import { contextMenuDefaultAnchor, ElementContextMenuAnchor } from "@utils/contextMenu";
+import { useTranslation } from "react-i18next";
 
 const DashboardFaultTreeList = () => {
   const { classes } = useStyles();
+  const { t } = useTranslation();
+
   const [faultTrees, , , removeTree] = useFaultTrees();
 
   const [contextMenuSelectedTree, setContextMenuSelectedTree] = useState<FaultTree>(null);
@@ -39,9 +42,8 @@ const DashboardFaultTreeList = () => {
 
   const handleDelete = (treeToDelete: FaultTree) => {
     showConfirmDialog({
-      title: "Delete Fault Tree",
-      explanation:
-        "Deleting fault tree will delete the whole tree structure. Events will remain. Proceed to delete the tree?",
+      title: t("deleteFtaModal.title"),
+      explanation: t("deleteFtaModal.explanation"),
       onConfirm: () => {
         removeTree(treeToDelete);
       },

src/components/dashboard/content/list/FaultTreeOverview.tsx

@@ -76,9 +76,8 @@ const FaultTreeOverview = () => {
 
   const handleDelete = (treeToDelete: FaultTree) => {
     showConfirmDialog({
-      title: "Delete Fault Tree",
-      explanation:
-        "Deleting fault tree will delete the whole tree structure. Events will remain. Proceed to delete the tree?",
+      title: t("deleteFtaModal.title"),
+      explanation: t("deleteFtaModal.explanation"),
       onConfirm: () => {
         removeTree(treeToDelete);
       },

src/components/editor/faultTree/menu/faultEvent/FaultEventMenu.tsx

@@ -518,10 +518,6 @@ const FaultEventMenu = ({ selectedShapeToolData, onEventUpdated, refreshTree, ro
 
           <EventFailureModeList onFailureModeClick={handleFailureModeClicked} />
 
-          <Button color="primary" onClick={() => setFailureModeDialogOpen(true)}>
-            Set Failure Mode
-          </Button>
-
           <FailureModeDialog
             open={failureModeDialogOpen && Boolean(shapeToolData)}
             onClose={() => setFailureModeDialogOpen(false)}

src/components/editor/menu/DiagramOptions.tsx

@@ -30,7 +30,7 @@ const DiagramOptions = ({
   return (
     <React.Fragment>
       <Typography variant="h5" gutterBottom>
-        Diagram Options
+        {t("diagramSidePanel.diagramOptions")}
       </Typography>
       <div>
         <IconButton color="primary" onClick={onApplyAutomaticLayout} aria-label="restore layout" size="large">

src/components/editor/system/menu/SystemContextMenu.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { Menu, MenuItem } from "@mui/material";
 import { ElementContextMenuAnchor } from "@utils/contextMenu";
+import { useTranslation } from "react-i18next";
 
 interface Props {
   anchorPosition: ElementContextMenuAnchor;
@@ -10,6 +11,7 @@ interface Props {
 }
 
 const SystemContextMenu = ({ anchorPosition, onClose, onEditClick, onDelete }: Props) => {
+  const { t } = useTranslation();
   const handleEditClick = () => {
     onClose();
     onEditClick();
@@ -36,10 +38,10 @@ const SystemContextMenu = ({ anchorPosition, onClose, onEditClick, onDelete }: P
       }
     >
       <MenuItem key="system-menu-rename" onClick={handleEditClick}>
-        Rename
+        {t("common.rename")}
       </MenuItem>
       <MenuItem key="system-delete" onClick={handleDeleteClick}>
-        Delete
+        {t("common.delete")}
       </MenuItem>
     </Menu>
   );

src/components/editor/system/menu/component/ComponentSidebarMenu.tsx

@@ -13,6 +13,7 @@ import ControlledAutocomplete from "@components/materialui/ControlledAutocomplet
 import { useForm } from "react-hook-form";
 import { FailureModeProvider } from "@hooks/useFailureModes";
 import { simplifyReferences } from "@utils/utils";
+import { useTranslation } from "react-i18next";
 
 interface Props {
   component: Component;
@@ -22,6 +23,7 @@ interface Props {
 
 const ComponentSidebarMenu = ({ component, onComponentUpdated, systemComponents }: Props) => {
   const [showSnackbar] = useSnackbar();
+  const { t } = useTranslation();
 
   const allowedComponents = filter(flatten([systemComponents]), (o) => o.iri !== component?.iri);
 
@@ -61,21 +63,21 @@ const ComponentSidebarMenu = ({ component, onComponentUpdated, systemComponents
   return (
     <React.Fragment>
       <Typography variant="h5" gutterBottom>
-        Edit Component
+        {t("systemComponentMenu.editComponent")}
       </Typography>
       {component ? (
         <ComponentEditMenu component={component} onComponentUpdated={onComponentUpdated} />
       ) : (
         <Typography variant="subtitle1" gutterBottom>
-          No component selected
+          {t("systemComponentMenu.notSelected")}
         </Typography>
       )}
       <Divider />
 
       {component && (
         <React.Fragment>
           <Typography variant="h6" gutterBottom>
-            Functions
+            {t("systemComponentMenu.functions")}
           </Typography>
           <FunctionsProvider componentUri={component?.iri}>
             <FailureModeProvider component={component}>
@@ -90,7 +92,7 @@ const ComponentSidebarMenu = ({ component, onComponentUpdated, systemComponents
       {component && (
         <React.Fragment>
           <Typography variant="h6" gutterBottom>
-            Linked Component
+            {t("systemComponentMenu.linkedComponent")}
           </Typography>
           <ControlledAutocomplete
             control={control}

src/components/materialui/FaultTreeListItem.tsx

@@ -12,13 +12,15 @@ import { FaultTree } from "@models/faultTreeModel";
 import { useConfirmDialog } from "@hooks/useConfirmDialog";
 import { useFaultTrees } from "@hooks/useFaultTrees";
 import FaultTreeEditDialog from "@components/dialog/faultTree/FaultTreeEditDialog";
+import { useTranslation } from "react-i18next";
 
 interface Props {
   faultTree: FaultTree;
   onClick: (any) => void;
 }
 
 const FaultTreeListItem = ({ faultTree, onClick }: Props) => {
+  const { t } = useTranslation();
   const [contextMenuSelectedTree, setContextMenuSelectedTree] = useState<FaultTree>(null);
   const [contextMenuAnchor, setContextMenuAnchor] = useState<ElementContextMenuAnchor>(contextMenuDefaultAnchor);
 
@@ -32,9 +34,8 @@ const FaultTreeListItem = ({ faultTree, onClick }: Props) => {
 
   const handleDelete = (treeToDelete: FaultTree) => {
     showConfirmDialog({
-      title: "Delete Fault Tree",
-      explanation:
-        "Deleting fault tree will delete the whole tree structure. Events will remain. Proceed to delete the tree?",
+      title: t("deleteFtaModal.title"),
+      explanation: t("deleteFtaModal.explanation"),
       onConfirm: () => {
         removeTree(treeToDelete);
       },

src/components/table/FaultTreeTableHead.tsx

@@ -2,6 +2,7 @@ import React, { FC } from "react";
 import { TableCell, TableRow, Box, TableSortLabel } from "@mui/material";
 import FilterListIcon from "@mui/icons-material/FilterList";
 import useStyles from "./FaultTreeOverviewTable.styles";
+import { useTranslation } from "react-i18next";
 
 interface FaultTreeTableHeadProps {
   sortConfig: { key: string; direction: "asc" | "desc" };
@@ -12,13 +13,13 @@ interface FaultTreeTableHeadProps {
 
 const FaultTreeTableHead: FC<FaultTreeTableHeadProps> = ({ sortConfig, onSortChange, onFilterClick, filterValues }) => {
   const { classes } = useStyles();
-
+  const { t } = useTranslation();
   return (
     <TableRow>
       <TableCell className={classes.tableHeaderCell}>
         <Box display="flex" alignItems="center">
           <span onClick={(e) => onFilterClick(e, "label")} style={{ cursor: "pointer", marginRight: "8px" }}>
-            FHA Label
+            {t("faultTreeOverviewTable.name")}
           </span>
           {filterValues.label && <FilterListIcon />}
           <TableSortLabel
@@ -28,11 +29,11 @@ const FaultTreeTableHead: FC<FaultTreeTableHeadProps> = ({ sortConfig, onSortCha
           />
         </Box>
       </TableCell>
-      <TableCell className={classes.tableHeaderCell}>Aircraft Type</TableCell>
+      <TableCell className={classes.tableHeaderCell}>{t("faultTreeOverviewTable.aircraftType")}</TableCell>
       <TableCell className={classes.tableHeaderCell}>
         <Box>
           <span onClick={(e) => onFilterClick(e, "snsLabel")} style={{ cursor: "pointer" }}>
-            SNS Label
+            {t("faultTreeOverviewTable.sns")}
           </span>
           {filterValues.snsLabel && <FilterListIcon />}
           <TableSortLabel
@@ -42,21 +43,21 @@ const FaultTreeTableHead: FC<FaultTreeTableHeadProps> = ({ sortConfig, onSortCha
           />
         </Box>
       </TableCell>
-      <TableCell className={classes.tableHeaderCell}>Calculated Failure Rate</TableCell>
-      <TableCell className={classes.tableHeaderCell}>FHA Based Failure Rate</TableCell>
-      <TableCell className={classes.tableHeaderCell}>Required Failure Rate</TableCell>
-      <TableCell className={classes.tableHeaderCell}>Last Modified</TableCell>
+      <TableCell className={classes.tableHeaderCell}>{t("faultTreeOverviewTable.calculatedFailureRate")}</TableCell>
+      <TableCell className={classes.tableHeaderCell}>{t("faultTreeOverviewTable.fhaBasedFailureRate")}</TableCell>
+      <TableCell className={classes.tableHeaderCell}>{t("faultTreeOverviewTable.requiredFailureRate")}</TableCell>
+      <TableCell className={classes.tableHeaderCell}>{t("faultTreeOverviewTable.lastModified")}</TableCell>
       <TableCell className={classes.tableHeaderCell}>
         <Box>
-          Created
+          {t("faultTreeOverviewTable.created")}
           <TableSortLabel
             active={sortConfig.key === "date"}
             direction={sortConfig.key === "date" ? sortConfig.direction : "desc"}
             onClick={() => onSortChange("date")}
           />
         </Box>
       </TableCell>
-      <TableCell className={classes.tableHeaderCell}>Last Editor</TableCell>
+      <TableCell className={classes.tableHeaderCell}>{t("faultTreeOverviewTable.lastEditor")}</TableCell>
     </TableRow>
   );
 };