added reset cache button

public/locales/en/translations.json

@@ -92,8 +92,13 @@
   },
   "Settings": {
     "Navigation": {
+      "System": "System",
       "Appearance": "Appearance",
       "Notifications": "Notifications"
+    },
+    "Cache": {
+      "Title": "Cache settings",
+      "Reset": "Reset"
     }
   },
   "About": {

public/locales/ro/translations.json

@@ -83,8 +83,13 @@
   },
   "Settings": {
     "Navigation": {
+      "System": "Sistem",
       "Appearance": "Aspect",
       "Notifications": "Notificări"
+    },
+    "Cache": {
+      "Title": "Setări cache",
+      "Reset": "Resetați"
     }
   },
   "About": {

src/components/common/PaperTitle.js

@@ -0,0 +1,27 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Typography } from "@material-ui/core";
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles(theme => ({
+  paper: {
+    margin: theme.spacing(1)
+  }
+}));
+
+const PaperTitle = ({ text }) => {
+  const classes = useStyles();
+  return (
+    <div className={classes.paper}>
+      <Typography variant="h5" gutterBottom>
+        {text}
+      </Typography>
+    </div>
+  );
+};
+
+PaperTitle.propTypes = {
+  text: PropTypes.string.isRequired
+};
+
+export default PaperTitle;

src/components/common/index.js

@@ -1,3 +1,4 @@
 import DataLabel from "./DataLabel";
+import PaperTitle from "./PaperTitle";
 
-export { DataLabel };
+export { DataLabel, PaperTitle };

src/features/settings/SettingsContainer.js

@@ -1,18 +1,25 @@
 import React, { useState, useMemo } from "react";
+import BubbleChartIcon from "@material-ui/icons/BubbleChart";
 import BrushIcon from "@material-ui/icons/Brush";
 import NotificationsIcon from "@material-ui/icons/Notifications";
 import { useTranslation } from "react-i18next";
 import PageTitle from "../../components/common/PageTitle";
 import NavigationButtons from "../../components/common/NavigationButtons";
+import SystemContainer from "./system/SystemContainer";
 import AppearanceContainer from "./appearance/AppearanceContainer";
 import NotificationsContainer from "./notifications/NotificationsContainer";
 
 const NavigationTabs = {
+  SYSTEM: "Settings.Navigation.System",
   APPEARANCE: "Settings.Navigation.Appearance",
   NOTIFICATIONS: "Settings.Navigation.Notifications"
 };
 
 const tabs = [
+  {
+    code: NavigationTabs.SYSTEM,
+    icon: BubbleChartIcon
+  },
   {
     code: NavigationTabs.APPEARANCE,
     icon: BrushIcon
@@ -24,7 +31,7 @@ const tabs = [
 ];
 
 const SettingsContainer = () => {
-  const [tab, setTab] = useState(NavigationTabs.APPEARANCE);
+  const [tab, setTab] = useState(NavigationTabs.SYSTEM);
   const { t } = useTranslation();
 
   const navigationTabs = useMemo(
@@ -40,6 +47,7 @@ const SettingsContainer = () => {
           <NavigationButtons tabs={navigationTabs} onTabChange={setTab} />
         }
       />
+      {tab === NavigationTabs.SYSTEM && <SystemContainer />}
       {tab === NavigationTabs.APPEARANCE && <AppearanceContainer />}
       {tab === NavigationTabs.NOTIFICATIONS && <NotificationsContainer />}
     </>

src/features/settings/system/ResetCacheComponent.js

@@ -0,0 +1,31 @@
+import React from "react";
+import { Paper, Button } from "@material-ui/core";
+import { makeStyles } from "@material-ui/core/styles";
+import { useTranslation } from "react-i18next";
+import { PaperTitle } from "../../../components/common";
+
+const useStyles = makeStyles(theme => ({
+  content: {
+    "& > *": {
+      margin: theme.spacing(1)
+    }
+  }
+}));
+
+const ResetCacheComponent = () => {
+  const classes = useStyles();
+  const { t } = useTranslation();
+
+  return (
+    <Paper variant="outlined">
+      <PaperTitle text={t("Settings.Cache.Title")} />
+      <div className={classes.content}>
+        <Button variant="outlined" color="secondary">
+          {t("Settings.Cache.Reset")}
+        </Button>
+      </div>
+    </Paper>
+  );
+};
+
+export default ResetCacheComponent;

src/features/settings/system/SystemContainer.js

@@ -0,0 +1,8 @@
+import React from "react";
+import ResetCacheComponent from "./ResetCacheComponent";
+
+const SystemContainer = () => {
+  return <ResetCacheComponent />;
+};
+
+export default SystemContainer;

src/providers/UserPermissionsProvider.js

@@ -9,7 +9,8 @@ const permissionCodes = {
   VIEW_MACHINES: "VIEW_MACHINES",
   MANAGE_MACHINES: "MANAGE_MACHINES",
   OPERATE_MACHINES: "OPERATE_MACHINES",
-  GUEST_ACCESS: "GUEST_ACCESS"
+  GUEST_ACCESS: "GUEST_ACCESS",
+  SYSTEM_ADMINISTRATION: "SYSTEM_ADMINISTRATION"
 };
 
 const initialState = {
@@ -32,6 +33,8 @@ const getPermissionFlags = permissions => {
     permissions.includes(permissionCodes.OPERATE_MACHINES) ?? false;
   const guestAccess =
     permissions.includes(permissionCodes.GUEST_ACCESS) ?? false;
+  const sysAdmin =
+    permissions.includes(permissionCodes.SYSTEM_ADMINISTRATION) ?? false;
 
   const flags = {
     viewDashboard,
@@ -40,7 +43,8 @@ const getPermissionFlags = permissions => {
     viewMachines,
     manageMachines,
     operateMachines,
-    guestAccess
+    guestAccess,
+    sysAdmin
   };
 
   const isGuest = guestAccess === true;

src/utils/api.js

@@ -11,6 +11,7 @@ const routes = {
   permissions: `${securityRoute}/permissions`,
   systemVersion: `${systemRoute}/version`,
   releaseNotes: `${systemRoute}/release-notes`,
+  resetCache: `${systemRoute}/reset-cache`,
   machines: `${networkRoute}/machines`,
   wakeMachine: `${powerActionsRoute}/wake`,
   pingMachine: `${powerActionsRoute}/ping`,