Improvements for global select

public/locales/cs/translation.json

@@ -71,7 +71,7 @@
   },
   "faultTreeOverviewTable": {
     "name": "Jméno",
-    "aircraftType": "Typ letadla",
+    "aircraftType": "Typ systému",
     "ata": "ATA",
     "calculatedFailureRate": "Vypočtená intenzita poruch",
     "fhaBasedFailureRate": "Intenzita poruch založená na FHA",
@@ -92,5 +92,9 @@
   },
   "appBar": {
     "selectSystemPlaceholder": "Vyberte systém"
+  },
+  "common": {
+    "defaultErrorMsg": "Došlo k neočekávané chybě",
+    "delete": "Smazat"
   }
 }

public/locales/en/translation.json

@@ -71,7 +71,7 @@
   },
   "faultTreeOverviewTable": {
     "name": "Name",
-    "aircraftType": "Aircraft type",
+    "aircraftType": "System type",
     "ata": "ATA",
     "calculatedFailureRate": "Calculated failure rate",
     "fhaBasedFailureRate": "FHA based failure rate",
@@ -92,5 +92,9 @@
   },
   "appBar": {
     "selectSystemPlaceholder": "Select system"
+  },
+  "common": {
+    "defaultErrorMsg": "Unexpected error occurred",
+    "delete": "Delete"
   }
 }

src/components/appBar/AppBar.styles.tsx

@@ -28,8 +28,8 @@ const useStyles = makeStyles()((theme: Theme) => ({
     minWidth: 120,
   },
   textfieldSelect: {
+    marginRight: 8,
     minWidth: 160,
-    marginRight: 16,
     "& .MuiSelect-icon": {
       color: theme.button.secondary,
     },
@@ -64,6 +64,18 @@ const useStyles = makeStyles()((theme: Theme) => ({
     left: 12,
     pointerEvents: "none",
   },
+  dropdownContainer: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  tooltipContainer: {
+    height: 24,
+    width: 24,
+  },
+  tooltip: {
+    cursor: "pointer",
+  },
 }));
 
 // TODO jss-to-tss-react codemod: usages of this hook outside of this file will not be converted.

src/components/appBar/AppBar.tsx

@@ -1,10 +1,20 @@
-import Toolbar from "@mui/material/Toolbar";
-import IconButton from "@mui/material/IconButton";
-import Typography from "@mui/material/Typography";
 import * as React from "react";
+import { useEffect } from "react";
 import useStyles from "@components/appBar/AppBar.styles";
 import { AccountCircle } from "@mui/icons-material";
-import { Menu, MenuItem, AppBar as MaterialAppBar, Box, FormControl, InputLabel, TextField } from "@mui/material";
+import {
+  Menu,
+  MenuItem,
+  AppBar as MaterialAppBar,
+  Box,
+  FormControl,
+  InputLabel,
+  TextField,
+  IconButton,
+  Typography,
+  Toolbar,
+  Tooltip,
+} from "@mui/material";
 import { FormEvent, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import ChangePasswordDialog from "@components/dialog/password/ChangePasswordDialog";
@@ -14,11 +24,9 @@ import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import { useTranslation } from "react-i18next";
 import LanguageIcon from "@mui/icons-material/Language";
 import { PRIMARY_LANGUAGE, SECONDARY_LANGUAGE, SELECTED_LANGUAGE_KEY, SELECTED_SYSTEM } from "@utils/constants";
-import { useAppBarTitle } from "../../contexts/AppBarTitleContext";
-import * as systemService from "@services/systemService";
-import { System } from "@models/systemModel";
-import { SnackbarType, useSnackbar } from "@hooks/useSnackbar";
-import { axiosSource } from "@services/utils/axiosUtils";
+import { useAppBar } from "../../contexts/AppBarContext";
+import { useLocation } from "react-router-dom";
+import CancelIcon from "@mui/icons-material/Cancel";
 
 interface Props {
   title: string;
@@ -30,29 +38,20 @@ const AppBar = ({ title, showBackButton = false, topPanelHeight }: Props) => {
   const [loggedUser] = useLoggedUser();
   const { classes } = useStyles();
   const history = useNavigate();
-  const { i18n } = useTranslation();
-  const { t } = useTranslation();
-  const { appBarTitle } = useAppBarTitle();
-  const [showSnackbar] = useSnackbar();
+  const { i18n, t } = useTranslation();
+  const location = useLocation();
+  const { appBarTitle, systemsList } = useAppBar();
 
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const [selectedSystem, setSelectedSystem] = useState<string>(() => sessionStorage.getItem(SELECTED_SYSTEM) || "");
-  const [systems, setSystems] = useState<System[]>([]);
+  const [changePasswordDialogOpen, setChangePasswordDialogOpen] = useState(false);
 
   const isMenuOpen = Boolean(anchorEl);
 
-  React.useEffect(() => {
-    const fetchSystems = async () => {
-      systemService
-        .findAll()
-        .then((value) => setSystems(value))
-        .catch((reason) => showSnackbar(reason, SnackbarType.ERROR));
-    };
-
-    fetchSystems();
-
-    return () => axiosSource.cancel("SystemsProvider - unmounting");
-  }, []);
+  useEffect(() => {
+    const currentItem = sessionStorage.getItem(SELECTED_SYSTEM);
+    if (selectedSystem !== currentItem) setSelectedSystem(currentItem);
+  }, [location.pathname]);
 
   const handleProfileMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
@@ -100,8 +99,6 @@ const AppBar = ({ title, showBackButton = false, topPanelHeight }: Props) => {
     </Menu>
   );
 
-  const [changePasswordDialogOpen, setChangePasswordDialogOpen] = useState(false);
-
   const toggleLanguage = () => {
     if (i18n.resolvedLanguage === PRIMARY_LANGUAGE) {
       i18n.changeLanguage(SECONDARY_LANGUAGE);
@@ -138,22 +135,35 @@ const AppBar = ({ title, showBackButton = false, topPanelHeight }: Props) => {
               {!selectedSystem && (
                 <InputLabel className={classes.inputLabel}>{t("appBar.selectSystemPlaceholder")}</InputLabel>
               )}
-              {systems && (
-                <TextField
-                  select
-                  InputLabelProps={{ shrink: false }}
-                  className={classes.textfieldSelect}
-                  value={selectedSystem}
-                  onChange={handleSystemChange}
-                >
-                  {systems.map((s, i) => {
-                    return (
-                      <MenuItem key={`${s.name}-${i}`} value={s.name}>
-                        {s.name}
-                      </MenuItem>
-                    );
-                  })}
-                </TextField>
+              {systemsList && (
+                <Box className={classes.dropdownContainer}>
+                  <TextField
+                    select
+                    InputLabelProps={{ shrink: false }}
+                    className={classes.textfieldSelect}
+                    value={selectedSystem}
+                    onChange={handleSystemChange}
+                  >
+                    {systemsList.map((s, i) => {
+                      return (
+                        <MenuItem key={`${s.name}-${i}`} value={s.name}>
+                          {s.name}
+                        </MenuItem>
+                      );
+                    })}
+                  </TextField>
+                  <Box className={classes.tooltipContainer}>
+                    {selectedSystem && (
+                      <Tooltip
+                        title={t("common.delete")}
+                        className={classes.tooltip}
+                        onClick={() => setSelectedSystem("")}
+                      >
+                        <CancelIcon />
+                      </Tooltip>
+                    )}
+                  </Box>
+                </Box>
               )}
             </FormControl>
           </Box>

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

@@ -1,5 +1,5 @@
 import React, { FC, useState } from "react";
-import { Box, Grid, Typography, Button } from "@mui/material";
+import { Box, Grid, Typography, Button, useTheme } from "@mui/material";
 import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
 import useStyles from "./FaultTreeOverviewCardsList.styles";
 import { useTranslation } from "react-i18next";
@@ -39,17 +39,19 @@ const FaultTreeAndSystemOverviewCardsList: FC<FaultTreeOverviewCardsListProps> =
   const { classes } = useStyles();
   const { t } = useTranslation();
   const navigate = useNavigate();
+  const theme = useTheme();
 
   const [hoveredIndex, setHoveredIndex] = useState(null);
 
   const modifiedSystemsList = getModifiedSystemsList(systems, selectedSystem);
 
   const Card: FC<CardProps> = ({ name, onRedirect, onOpenMenu, border, index }) => {
+    const bgColor = name === selectedSystem ? theme.sidePanel.colors.hover : "transparent";
     return (
       <Grid item xs={12} sm={12} md={6} lg={4}>
         <Box
           className={classes.cardContainer}
-          style={{ border: border }}
+          style={{ border: border, backgroundColor: bgColor }}
           onMouseEnter={() => setHoveredIndex(index)}
           onMouseLeave={() => setHoveredIndex(null)}
         >

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

@@ -1,11 +1,11 @@
 import React, { FC } from "react";
-import { Box, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Button } from "@mui/material";
+import { Box, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Button, useTheme } from "@mui/material";
 import MoreVertIcon from "@mui/icons-material/MoreVert";
 import { useTranslation } from "react-i18next";
 import useStyles from "./FaultTreeOverviewTable.styles";
 import { FaultTree } from "@models/faultTreeModel";
 import { useNavigate } from "react-router-dom";
-import { ROUTES } from "@utils/constants";
+import { ROUTES, SELECTED_SYSTEM } from "@utils/constants";
 import { extractFragment } from "@services/utils/uriIdentifierUtils";
 import { System } from "@models/systemModel";
 import { getModifiedSystemsList, getModifiedFaultTreesList, formatDate } from "@utils/utils";
@@ -42,10 +42,18 @@ const FaultTreeAndSystemOverviewTable: FC<FaultTreeOverviewTableProps> = ({
   const navigate = useNavigate();
   const { classes } = useStyles();
   const { t } = useTranslation();
+  const theme = useTheme();
 
   const modifiedSystemsList = getModifiedSystemsList(systems, selectedSystem);
   const modifiedFaultTreesList = getModifiedFaultTreesList(faultTrees, selectedSystem);
 
+  const redirectToPath = (routePath: string, systemName?: string) => {
+    if (systemName) {
+      sessionStorage.setItem(SELECTED_SYSTEM, systemName);
+    }
+    navigate(routePath);
+  };
+
   return (
     <Box className={classes.tableContainer}>
       <TableContainer>
@@ -91,7 +99,11 @@ const FaultTreeAndSystemOverviewTable: FC<FaultTreeOverviewTableProps> = ({
                     <TableCell className={classes.tableCell}>{/* <DoneIcon /> */}</TableCell>
                     <TableCell className={classes.tableCell}>
                       <Box className={classes.rowOptionsContainer}>
-                        <Button variant="contained" className={classes.editButton} onClick={() => navigate(routePath)}>
+                        <Button
+                          variant="contained"
+                          className={classes.editButton}
+                          onClick={() => redirectToPath(routePath, faultTree.system.name)}
+                        >
                           {t("faultTreeOverviewTable.edit")}
                         </Button>
                         <MoreVertIcon
@@ -106,12 +118,17 @@ const FaultTreeAndSystemOverviewTable: FC<FaultTreeOverviewTableProps> = ({
             {systems &&
               modifiedSystemsList.map((system, rowIndex) => {
                 const routePath = ROUTES.SYSTEMS + `/${extractFragment(system.iri)}`;
+                const bgColor = system.name === selectedSystem ? theme.sidePanel.colors.hover : "transparent";
                 return (
-                  <TableRow key={rowIndex} className={classes.noBorder}>
+                  <TableRow key={rowIndex} className={classes.noBorder} style={{ backgroundColor: bgColor }}>
                     <TableCell className={classes.systemFirstColumn}>{system.name}</TableCell>
                     <TableCell className={classes.tableCell}>
                       <Box className={classes.rowOptionsContainer}>
-                        <Button variant="contained" className={classes.editButton} onClick={() => navigate(routePath)}>
+                        <Button
+                          variant="contained"
+                          className={classes.editButton}
+                          onClick={() => redirectToPath(routePath)}
+                        >
                           {t("faultTreeOverviewTable.edit")}
                         </Button>
                         <MoreVertIcon

src/components/dialog/system/SystemDialog.tsx

@@ -11,11 +11,13 @@ import { useSystems } from "@hooks/useSystems";
 import { System } from "@models/systemModel";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { useTranslation } from "react-i18next";
+import { useAppBar } from "../../../contexts/AppBarContext";
 
 const SystemDialog = ({ open, handleCloseDialog }) => {
   const { t } = useTranslation();
 
   const [, addSystem] = useSystems();
+  const { addSystemToList } = useAppBar();
   const [processing, setIsProcessing] = useState(false);
 
   const useFormMethods = useForm({ resolver: yupResolver(schema) });
@@ -31,8 +33,9 @@ const SystemDialog = ({ open, handleCloseDialog }) => {
     const system = {
       name: values.systemName,
     } as System;
-
+    // TODO: Add correct error handling
     await addSystem(system);
+    addSystemToList(system);
 
     setIsProcessing(false);
     handleCloseDialog();

src/components/editor/faultTree/Editor.tsx

@@ -20,13 +20,13 @@ import { Rectangle } from "@models/utils/Rectangle";
 import { JOINTJS_NODE_MODEL } from "@components/editor/faultTree/shapes/constants";
 import { calculateCutSets } from "@services/faultTreeService";
 import { FaultEventScenario } from "@models/faultEventScenario";
-import { useAppBarTitle } from "../../../contexts/AppBarTitleContext";
+import { useAppBar } from "../../../contexts/AppBarContext";
 
 const Editor = () => {
   const history = useNavigate();
   const [showSnackbar] = useSnackbar();
   const [requestConfirmation] = useConfirmDialog();
-  const { setAppBarTitle } = useAppBarTitle();
+  const { setAppBarTitle } = useAppBar();
 
   const [faultTree, refreshTree] = useCurrentFaultTree();
   const [rootEvent, setRootEvent] = useState<FaultEvent>();

src/components/editor/system/Editor.tsx

@@ -13,12 +13,12 @@ import * as componentService from "@services/componentService";
 import { SnackbarType, useSnackbar } from "@hooks/useSnackbar";
 import * as joint from "jointjs";
 import { FTABoundary } from "@components/editor/faultTree/shapes/shapesDefinitions";
-import { useAppBarTitle } from "../../../contexts/AppBarTitleContext";
+import { useAppBar } from "../../../contexts/AppBarContext";
 
 const Editor = () => {
   const [requestConfirmation] = useConfirmDialog();
   const [showSnackbar] = useSnackbar();
-  const { setAppBarTitle } = useAppBarTitle();
+  const { setAppBarTitle } = useAppBar();
 
   const [system, addComponent, updateComponent, removeComponent, fetchSystem] = useCurrentSystem();
 

src/components/navigation/Navigation.tsx

@@ -6,7 +6,7 @@ import { ROUTES } from "@utils/constants";
 import AppBar from "../appBar/AppBar";
 import { SIDE_PANEL_STATE_KEY } from "../../utils/constants";
 import useStyles from "./Navigation.styles";
-import { AppBarTitleProvider } from "../../contexts/AppBarTitleContext";
+import { AppBarProvider } from "../../contexts/AppBarContext";
 import DashboardContentProvider from "@hooks/DashboardContentProvider";
 
 interface SideNavigationProps {
@@ -61,7 +61,7 @@ const Navigation: FC<SideNavigationProps> = ({ children }) => {
   const mgLeft = shouldHideSidePanel ? 0 : isCollapsed ? SIDE_PANEL_COLLAPSED_WIDTH : SIDE_PANEL_WIDTH;
 
   return (
-    <AppBarTitleProvider>
+    <AppBarProvider>
       <DashboardContentProvider>
         <Box className={classes.container}>
           {!shouldHideSidePanel && (
@@ -87,7 +87,7 @@ const Navigation: FC<SideNavigationProps> = ({ children }) => {
           </Box>
         </Box>
       </DashboardContentProvider>
-    </AppBarTitleProvider>
+    </AppBarProvider>
   );
 };