visual components update

package-lock.json

@@ -1315,11 +1315,6 @@
       "resolved": "https://lab.code-rove.com/public-node-registry/@flare/js-utils/-/js-utils-1.0.3.tgz",
       "integrity": "sha512-VgXQHoQEVZ/71B6YQHQP8/Yd/w1smGD+kCCiNvJKZ1xMD3nkN9mjoHxIqbOJMZ2q5PZlV6gXYT7eVol8Wm+D0A=="
     },
-    "@flare/react-hooks": {
-      "version": "1.0.1",
-      "resolved": "https://lab.code-rove.com/public-node-registry/@flare/react-hooks/-/react-hooks-1.0.1.tgz",
-      "integrity": "sha512-mU6zkdETonWv0SnxT1qF/lch6ND1yph6bAw+BaYxl/jj8tasOune+KKfyGcLFR/Kso3q8PlVPT8x4CiLiO6woQ=="
-    },
     "@flare/tuitio-client": {
       "version": "1.1.0",
       "resolved": "https://lab.code-rove.com/public-node-registry/@flare/tuitio-client/-/tuitio-client-1.1.0.tgz",

package.json

@@ -13,7 +13,6 @@
   },
   "private": true,
   "dependencies": {
-    "@flare/react-hooks": "^1.0.1",
     "@flare/js-utils": "^1.0.3",
     "@flare/tuitio-client-react": "^1.1.1",
     "@material-ui/core": "^4.11.2",

public/locales/en/translations.json

@@ -22,7 +22,7 @@
     "Dashboard": "Dashboard",
     "Machines": "Machines",
     "System": "System",
-    "Trash": "Trash",
+    "Administration": "Administration",
     "Settings": "Settings",
     "About": "About"
   },
@@ -43,6 +43,7 @@
       "Description": "{{userName}}, authenticated on {{loginDate}}",
       "OpenPortfolio": "Open portfolio"
     },
+    "Settings": "Settings",
     "Logout": "Logout"
   },
   "Machine": {

public/locales/ro/translations.json

@@ -13,7 +13,7 @@
     "Dashboard": "Bord",
     "Machines": "Mașini",
     "System": "Sistem",
-    "Trash": "Gunoi",
+    "Administration": "Administrare",
     "Settings": "Setări",
     "About": "Despre"
   },
@@ -34,6 +34,7 @@
       "Description": "{{userName}}, autentificat pe {{loginDate}}",
       "OpenPortfolio": "Deschide portofoliu"
     },
+    "Settings": "Setări",
     "Logout": "Deconectare"
   },
   "Machine": {

src/components/common/PageTitle.js

@@ -19,24 +19,26 @@ const useStyles = makeStyles(theme => ({
   titleText: { textTransform: "uppercase" }
 }));
 
-const PageTitle = ({ text, toolBar }) => {
+const PageTitle = ({ text, toolBar, navigation }) => {
   const classes = useStyles();
 
   return (
     <div className={classes.box}>
+      {navigation && navigation}
       <div className={classes.title}>
         <Typography className={classes.titleText} variant="h3" size="sm">
           {text}
         </Typography>
       </div>
-      {toolBar}
+      {toolBar && toolBar}
     </div>
   );
 };
 
 PageTitle.propTypes = {
   text: PropTypes.string.isRequired,
-  toolBar: PropTypes.node
+  toolBar: PropTypes.node,
+  navigation: PropTypes.node
 };
 
 export default PageTitle;

src/components/layout/AppRoutes.js

@@ -5,6 +5,7 @@ import NetworkContainer from "../../features/network/components/NetworkContainer
 import SettingsContainer from "../../features/settings/components/SettingsContainer";
 import DashboardContainer from "../../features/dashboard/components/DashboardContainer";
 import UserProfileContainer from "../../features/user/profile/components/UserProfileContainer";
+import AboutContainer from "../../features/about/components/AboutContainer";
 
 const AppRoutes = () => {
   return (
@@ -13,6 +14,7 @@ const AppRoutes = () => {
       <Route exact path="/user-profile" component={UserProfileContainer} />
       <Route exact path="/machines" component={NetworkContainer} />
       <Route exact path="/settings" component={SettingsContainer} />
+      <Route exact path="/about" component={AboutContainer} />
       <Route component={PageNotFound} />
     </Switch>
   );

src/components/layout/ProfileButton.js

@@ -9,6 +9,7 @@ import {
 import AccountCircle from "@material-ui/icons/AccountCircle";
 import ExitToAppIcon from "@material-ui/icons/ExitToApp";
 import AccountBoxIcon from "@material-ui/icons/AccountBox";
+import SettingsIcon from "@material-ui/icons/Settings";
 import { useHistory } from "react-router-dom";
 import { useTuitioClient } from "@flare/tuitio-client-react";
 import { useToast } from "../../hooks";
@@ -77,6 +78,17 @@ const ProfileButton = () => {
           </ListItemIcon>
           <Typography variant="inherit">{t("User.Profile.Label")}</Typography>
         </MenuItem>
+        <MenuItem
+          onClick={() => {
+            history.push("/settings");
+            handleClose();
+          }}
+        >
+          <ListItemIcon className={classes.menuItemIcon}>
+            <SettingsIcon fontSize="small" />
+          </ListItemIcon>
+          <Typography variant="inherit">{t("User.Settings")}</Typography>
+        </MenuItem>
         <MenuItem onClick={logout}>
           <ListItemIcon className={classes.menuItemIcon}>
             <ExitToAppIcon fontSize="small" />

src/components/layout/Sidebar.js

@@ -13,7 +13,7 @@ import {
 import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
 import ChevronRightIcon from "@material-ui/icons/ChevronRight";
 import ListItem from "@material-ui/core/ListItem";
-import DeleteIcon from "@material-ui/icons/Delete";
+import BuildIcon from "@material-ui/icons/Build";
 import DnsIcon from "@material-ui/icons/Dns";
 import DeviceHubIcon from "@material-ui/icons/DeviceHub";
 import SettingsIcon from "@material-ui/icons/Settings";
@@ -85,11 +85,15 @@ const Sidebar = ({ open, handleDrawerClose }) => {
       </List>
       <Divider />
       <List>
-        <ListItem button key="trash" onClick={() => history.push("/trash")}>
+        <ListItem
+          button
+          key="administration"
+          onClick={() => history.push("/administration")}
+        >
           <ListItemIcon>
-            <DeleteIcon />
+            <BuildIcon />
           </ListItemIcon>
-          <ListItemText primary={t("Menu.Trash")} />
+          <ListItemText primary={t("Menu.Administration")} />
         </ListItem>
         <ListItem
           button

src/features/about/components/AboutComponent.js

@@ -0,0 +1,39 @@
+import React, { useState } from "react";
+//import PropTypes from "prop-types";
+import PageTitle from "../../../components/common/PageTitle";
+import ViewListIcon from "@material-ui/icons/ViewList";
+import AboutPageNavigation from "./AboutPageNavigation";
+
+const NavigationTabs = {
+  ABOUT: "About.Navigation.System",
+  RELEASE_NOTES: "About.Navigation.ReleaseNotes"
+};
+
+const tabs = [
+  {
+    code: NavigationTabs.ABOUT,
+    tooltip: NavigationTabs.ABOUT,
+    icon: ViewListIcon
+  },
+  {
+    code: NavigationTabs.RELEASE_NOTES,
+    tooltip: NavigationTabs.RELEASE_NOTES,
+    icon: ViewListIcon
+  }
+];
+
+const AboutComponent = () => {
+  const [tab, setTab] = useState(null);
+  return (
+    <>
+      <PageTitle
+        text={"Release notes"}
+        navigation={<AboutPageNavigation tabs={tabs} onTabChange={setTab} />}
+      />
+    </>
+  );
+};
+
+AboutComponent.propTypes = {};
+
+export default AboutComponent;

src/features/about/components/AboutContainer.js

@@ -1,7 +1,8 @@
 import React from "react";
+import AboutComponent from "./AboutComponent";
 
 const AboutContainer = () => {
-  return <div>TEST</div>;
+  return <AboutComponent />;
 };
 
 export default AboutContainer;

src/features/about/components/AboutPageNavigation.js

@@ -0,0 +1,45 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import ToggleButton from "@material-ui/lab/ToggleButton";
+import ToggleButtonGroup from "@material-ui/lab/ToggleButtonGroup";
+import { Tooltip } from "@material-ui/core";
+
+const AboutPageNavigation = ({ tabs, onTabChange }) => {
+  const [selected, setSelected] = useState(tabs[0].code);
+
+  const handleTabSelection = (_event, tabCode) => {
+    setSelected(tabCode);
+    onTabChange && onTabChange(tabCode);
+  };
+
+  return (
+    <ToggleButtonGroup
+      size="small"
+      value={selected}
+      exclusive
+      onChange={handleTabSelection}
+    >
+      {tabs.map(tab => (
+        <ToggleButton
+          key={tab.code}
+          value={tab.code}
+          aria-label="navigation tabs"
+          disabled={tab === tab.code}
+        >
+          <Tooltip title={tab.tooltip}>
+            <tab.icon />
+          </Tooltip>
+        </ToggleButton>
+      ))}
+    </ToggleButtonGroup>
+  );
+};
+
+AboutPageNavigation.propTypes = {
+  tabs: PropTypes.arrayOf(
+    PropTypes.shape({ code: PropTypes.string.isRequired })
+  ).isRequired,
+  onTabChange: PropTypes.func
+};
+
+export default AboutPageNavigation;

src/features/machines/components/MachineAccordion.js

@@ -22,11 +22,21 @@ const useStyles = makeStyles(() => ({
   }
 }));
 
-const IconLeftAccordionSummary = withStyles({
+const IconLeftAccordionSummary = withStyles(theme => ({
+  root: {
+    minHeight: "20px",
+    height: "42px",
+    [theme.breakpoints.down("md")]: {
+      height: "62px"
+    },
+    [theme.breakpoints.down("sm")]: {
+      height: "102px"
+    }
+  },
   expandIcon: {
     order: -1
   }
-})(AccordionSummary);
+}))(AccordionSummary);
 
 const GridCell = ({ label, value }) => {
   const { mask } = useSensitiveInfo();

src/features/machines/components/MachinesContainer.js

@@ -10,7 +10,7 @@ import { useTranslation } from "react-i18next";
 import ViewModeSelection, { ViewModes } from "./ViewModeSelection";
 
 const MachinesContainer = () => {
-  const [viewMode, setViewMode] = useState(ViewModes.TABLE);
+  const [viewMode, setViewMode] = useState(null);
 
   const state = useContext(NetworkStateContext);
   const dispatchActions = useContext(NetworkDispatchContext);
@@ -37,12 +37,19 @@ const MachinesContainer = () => {
     <>
       <PageTitle
         text={t("Menu.Machines")}
-        toolBar={<ViewModeSelection callback={setViewMode} />}
-      />
-      <MachinesListComponent
-        machines={state.network.machines}
-        viewMode={viewMode}
+        toolBar={
+          <ViewModeSelection
+            callback={setViewMode}
+            initialMode={ViewModes.TABLE}
+          />
+        }
       />
+      {viewMode && (
+        <MachinesListComponent
+          machines={state.network.machines}
+          viewMode={viewMode}
+        />
+      )}
     </>
   );
 };

src/features/machines/components/ViewModeSelection.js

@@ -5,7 +5,6 @@ import ViewListIcon from "@material-ui/icons/ViewList";
 import ToggleButton from "@material-ui/lab/ToggleButton";
 import ToggleButtonGroup from "@material-ui/lab/ToggleButtonGroup";
 import { Tooltip } from "@material-ui/core";
-import { useWindowSize } from "@flare/react-hooks";
 import { useTranslation } from "react-i18next";
 
 export const ViewModes = {
@@ -13,28 +12,36 @@ export const ViewModes = {
   ACCORDION: "accordion"
 };
 
-const ViewModeSelection = ({ callback }) => {
+const ViewModeSelection = ({ initialMode, callback }) => {
   const [state, setState] = useState({
-    mode: ViewModes.TABLE,
+    mode: initialMode,
     manual: false
   });
-  const { isMobile } = useWindowSize();
+
   const { t } = useTranslation();
 
-  const handleViewModeSelection = useCallback(
-    (event, mode) => {
-      setState({ mode, manual: true });
-      callback && callback(mode);
-    },
-    [callback]
-  );
+  const handleViewModeSelection = useCallback((event, mode) => {
+    setState({ mode, manual: true });
+  }, []);
 
   useEffect(() => {
-    if (state.manual === true) return;
-    const mode = isMobile ? ViewModes.ACCORDION : ViewModes.TABLE;
-    setState({ mode, manual: false });
-    callback && callback(mode);
-  }, [callback, isMobile, state.manual]);
+    const mediaQuery = window.matchMedia("(max-width: 1100px)");
+
+    function handleMatches(event) {
+      if (state.manual === true) return;
+      const mode = event.matches ? ViewModes.ACCORDION : ViewModes.TABLE;
+      setState({ mode, manual: false });
+    }
+
+    handleMatches(mediaQuery);
+    mediaQuery.addListener(handleMatches);
+
+    return () => {
+      mediaQuery.removeListener(handleMatches);
+    };
+  }, [state.manual]);
+
+  useEffect(() => callback && callback(state.mode), [callback, state.mode]);
 
   return (
     <ToggleButtonGroup

src/providers/SensitiveInfoProvider.js

@@ -34,12 +34,12 @@ const useSensitiveInfo = () => {
 
   const mask = text => {
     if (!enabled) return text;
-    return obfuscate(text, "#");
+    return obfuscate(text, "◾");
   };
 
   const maskElements = list => {
     if (!enabled) return list;
-    const maskedList = list.map(z => obfuscate(z, "#"));
+    const maskedList = list.map(z => obfuscate(z, "◻️"));
     return maskedList;
   };