added user permissions provider

package-lock.json

@@ -1325,9 +1325,9 @@
       }
     },
     "@flare/tuitio-client-react": {
-      "version": "1.2.5",
-      "resolved": "https://lab.code-rove.com/public-node-registry/@flare/tuitio-client-react/-/tuitio-client-react-1.2.5.tgz",
-      "integrity": "sha512-Qx2EFe8WhPhP53Fpai+fhWa7QGG18vwyPvBp8CkWqf+ivHFzz+Rfa9Rrkck3gstQW7b02sYWBFwHMHLmGj8YuA==",
+      "version": "1.2.6",
+      "resolved": "https://lab.code-rove.com/public-node-registry/@flare/tuitio-client-react/-/tuitio-client-react-1.2.6.tgz",
+      "integrity": "sha512-T2uo9r9fQKTsbC25EaQnSifoDKrw3tgwy6fT/O1BdO4RPCUiRDr0YHiIssgPat+sB1G7iiUtV9CS8UNTJkacXw==",
       "requires": {
         "@flare/js-utils": "^1.1.0",
         "@flare/tuitio-client": "^1.2.5"

package.json

@@ -14,7 +14,7 @@
   "private": true,
   "dependencies": {
     "@flare/js-utils": "^1.1.0",
-    "@flare/tuitio-client-react": "^1.2.5",
+    "@flare/tuitio-client-react": "^1.2.6",
     "@material-ui/core": "^4.11.2",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.61",

src/api/useApi.js

@@ -1,12 +1,10 @@
-import { useToast } from "../hooks";
 import { get, post } from "../utils/axios";
+import { toast } from "react-toastify";
 
 const networkRoute = `${process.env.REACT_APP_NETWORK_RESURRECTOR_API_URL}/network`;
 const systemRoute = `${process.env.REACT_APP_NETWORK_RESURRECTOR_API_URL}/system`;
 const powerActionsRoute = `${process.env.REACT_APP_NETWORK_RESURRECTOR_API_URL}/resurrector`;
-
-const useApi = () => {
-  const { error } = useToast();
+const securityRoute = `${process.env.REACT_APP_NETWORK_RESURRECTOR_API_URL}/security`;
 
 const handleError = err => {
   let message;
@@ -23,7 +21,7 @@ const useApi = () => {
       message = err.title;
   }
 
-    error(message);
+  toast.error(message);
 };
 
 const defaultOptions = {
@@ -43,6 +41,11 @@ const useApi = () => {
   }
 };
 
+const getPermissions = (options = defaultOptions) => {
+  const promise = call(() => get(`${securityRoute}/permissions`), options);
+  return promise;
+};
+
 const getSystemVersion = (options = defaultOptions) => {
   const releaseNotesPromise = call(
     () => get(`${systemRoute}/version`),
@@ -60,10 +63,7 @@ const useApi = () => {
 };
 
 const readMachines = (options = defaultOptions) => {
-    const machinesPromise = call(
-      () => get(`${networkRoute}/machines`),
-      options
-    );
+  const machinesPromise = call(() => get(`${networkRoute}/machines`), options);
   return machinesPromise;
 };
 
@@ -83,12 +83,7 @@ const useApi = () => {
   return promise;
 };
 
-  const shutdownMachine = (
-    machineId,
-    delay,
-    force,
-    options = defaultOptions
-  ) => {
+const shutdownMachine = (machineId, delay, force, options = defaultOptions) => {
   const promise = call(
     () => post(`${powerActionsRoute}/shutdown`, { machineId, delay, force }),
     options
@@ -96,12 +91,7 @@ const useApi = () => {
   return promise;
 };
 
-  const restartMachine = (
-    machineId,
-    delay,
-    force,
-    options = defaultOptions
-  ) => {
+const restartMachine = (machineId, delay, force, options = defaultOptions) => {
   const promise = call(
     () => post(`${powerActionsRoute}/restart`, { machineId, delay, force }),
     options
@@ -109,7 +99,9 @@ const useApi = () => {
   return promise;
 };
 
+const useApi = () => {
   return {
+    getPermissions,
     getSystemVersion,
     readReleaseNotes,
     readMachines,

src/components/App.js

@@ -1,72 +1,14 @@
 import React from "react";
-import PropTypes from "prop-types";
+import { UserPermissionsProvider, SensitiveInfoProvider } from "../providers";
 import AppLayout from "./layout/AppLayout";
-import { BrowserRouter, Switch, Redirect, Route } from "react-router-dom";
-import { useTuitioToken } from "@flare/tuitio-client-react";
-import LoginContainer from "../features/login/components/LoginContainer";
-
-const PrivateRoute = ({ component, ...rest }) => {
-  const { valid } = useTuitioToken();
-
-  return (
-    <Route
-      {...rest}
-      render={props =>
-        valid ? (
-          React.createElement(component, props)
-        ) : (
-          <Redirect
-            to={{
-              pathname: "/login",
-              state: {
-                from: props.location
-              }
-            }}
-          />
-        )
-      }
-    />
-  );
-};
-
-PrivateRoute.propTypes = {
-  component: PropTypes.func.isRequired,
-  location: PropTypes.object
-};
-
-const PublicRoute = ({ component, ...rest }) => {
-  const { valid } = useTuitioToken();
-  return (
-    <Route
-      {...rest}
-      render={props =>
-        valid ? (
-          <Redirect
-            to={{
-              pathname: "/"
-            }}
-          />
-        ) : (
-          React.createElement(component, props)
-        )
-      }
-    />
-  );
-};
-
-PublicRoute.propTypes = {
-  component: PropTypes.func.isRequired
-};
 
 const App = () => {
   return (
-    <BrowserRouter basename={process.env.PUBLIC_URL || ""}>
-      <Switch>
-        <Route exact path="/" render={() => <Redirect to="/dashboard" />} />
-        <PublicRoute path="/login" component={LoginContainer} />
-        <PrivateRoute path="/" component={AppLayout} />
-      </Switch>
-    </BrowserRouter>
+    <UserPermissionsProvider>
+      <SensitiveInfoProvider>
+        <AppLayout />
+      </SensitiveInfoProvider>
+    </UserPermissionsProvider>
   );
 };
 

src/components/AppRouter.js

@@ -0,0 +1,73 @@
+import React from "react";
+import PropTypes from "prop-types";
+import App from "./App";
+import { BrowserRouter, Switch, Redirect, Route } from "react-router-dom";
+import { useTuitioToken } from "@flare/tuitio-client-react";
+import LoginContainer from "../features/login/components/LoginContainer";
+
+const PrivateRoute = ({ component, ...rest }) => {
+  const { valid } = useTuitioToken();
+
+  return (
+    <Route
+      {...rest}
+      render={props =>
+        valid ? (
+          React.createElement(component, props)
+        ) : (
+          <Redirect
+            to={{
+              pathname: "/login",
+              state: {
+                from: props.location
+              }
+            }}
+          />
+        )
+      }
+    />
+  );
+};
+
+PrivateRoute.propTypes = {
+  component: PropTypes.func.isRequired,
+  location: PropTypes.object
+};
+
+const PublicRoute = ({ component, ...rest }) => {
+  const { valid } = useTuitioToken();
+  return (
+    <Route
+      {...rest}
+      render={props =>
+        valid ? (
+          <Redirect
+            to={{
+              pathname: "/"
+            }}
+          />
+        ) : (
+          React.createElement(component, props)
+        )
+      }
+    />
+  );
+};
+
+PublicRoute.propTypes = {
+  component: PropTypes.func.isRequired
+};
+
+const AppRouter = () => {
+  return (
+    <BrowserRouter basename={process.env.PUBLIC_URL || ""}>
+      <Switch>
+        <Route exact path="/" render={() => <Redirect to="/dashboard" />} />
+        <PublicRoute path="/login" component={LoginContainer} />
+        <PrivateRoute path="/" component={App} />
+      </Switch>
+    </BrowserRouter>
+  );
+};
+
+export default AppRouter;

src/features/dashboard/announcements/AnnouncementsSection.js

@@ -1,17 +1,15 @@
 import React from "react";
 import GuestAnnouncement from "./GuestAnnouncement";
 import UserAnnouncement from "./UserAnnouncement";
-import { useTuitioUserInfo } from "@flare/tuitio-client-react";
+import { usePermissions } from "../../../hooks";
 
 const AnnouncementsSection = () => {
-  const { userInfo, isGuest } = useTuitioUserInfo();
-  const loading = !userInfo;
-
+  const { loading, isGuest, isUser } = usePermissions();
   if (loading) return "";
   return (
     <>
+      {isUser && <UserAnnouncement />}
       {isGuest && <GuestAnnouncement />}
-      {!isGuest && <UserAnnouncement userData={userInfo} />}
     </>
   );
 };

src/features/dashboard/announcements/UserAnnouncement.js

@@ -1,22 +1,23 @@
 import React from "react";
-import PropTypes from "prop-types";
 import { makeStyles } from "@material-ui/core/styles";
 import { Alert, AlertTitle } from "@material-ui/lab";
 import styles from "../styles";
 import { useTranslation } from "react-i18next";
+import { useTuitioUser } from "@flare/tuitio-client-react";
 
 const useStyles = makeStyles(styles);
 
-export default function UserAnnouncement({ userData }) {
+export default function UserAnnouncement() {
   const classes = useStyles();
   const { t } = useTranslation();
+  const { userName } = useTuitioUser();
 
   return (
     <div className={classes.alert}>
       <Alert variant="outlined" severity="info">
         <AlertTitle>
           {t("Dashboard.Announcements.User.Title", {
-            userName: userData.firstName
+            userName
           })}
         </AlertTitle>
         {t("Dashboard.Announcements.User.Message")}
@@ -24,7 +25,3 @@ export default function UserAnnouncement({ userData }) {
     </div>
   );
 }
-
-UserAnnouncement.propTypes = {
-  userData: PropTypes.object.isRequired
-};

src/features/machines/components/common/ActionsGroup.js

@@ -5,13 +5,13 @@ import ActionButton from "./ActionButton";
 import { Menu } from "@material-ui/core";
 import { MoreHoriz } from "@material-ui/icons";
 import { useTranslation } from "react-i18next";
-import { useTuitioUserInfo } from "@flare/tuitio-client-react";
+import { usePermissions } from "../../../../hooks";
 
 const ActionsGroup = ({ machine, actions, addLog }) => {
   const [menuAnchor, setMenuAnchor] = useState(null);
 
   const { t } = useTranslation();
-  const { isSysAdmin } = useTuitioUserInfo();
+  const { operateMachines: canOperateMachines } = usePermissions();
 
   const mainActions = useMemo(
     () => actions.filter(a => a.main === true),
@@ -33,13 +33,16 @@ const ActionsGroup = ({ machine, actions, addLog }) => {
 
   return (
     <>
-      <WakeComponent machine={machine} addLog={addLog} disabled={!isSysAdmin} />
+      <WakeComponent
+        machine={machine}
+        addLog={addLog}
+        disabled={!canOperateMachines}
+      />
       {mainActions.map(action => (
         <ActionButton
           key={`machine-item-${machine.machineId}-${action.code}`}
           action={action}
           machine={machine}
-          disabled={!isSysAdmin}
         />
       ))}
       <ActionButton
@@ -65,7 +68,7 @@ const ActionsGroup = ({ machine, actions, addLog }) => {
             action={action}
             machine={machine}
             callback={handleMenuClose}
-            disabled={!isSysAdmin}
+            disabled={!canOperateMachines}
           />
         ))}
       </Menu>

src/hooks/index.js

@@ -1,5 +1,6 @@
 import { useToast } from "./useToast";
 import { useSensitiveInfo } from "../providers/SensitiveInfoProvider";
+import { usePermissions } from "../providers/UserPermissionsProvider";
 import { useClipboard } from "./useClipboard";
 
-export { useToast, useSensitiveInfo, useClipboard };
+export { useToast, useSensitiveInfo, usePermissions, useClipboard };

src/hooks/useToast.js

@@ -1,11 +1,11 @@
 import { toast } from "react-toastify";
 
-export const useToast = () => {
 const info = message => toast.info(message);
 const success = message => toast.success(message);
 const warning = message => toast.warning(message);
 const error = message => toast.error(message);
 const dark = message => toast.dark(message);
 
+export const useToast = () => {
   return { info, success, warning, error, dark };
 };

src/index.js

@@ -2,23 +2,20 @@ import React, { Suspense } from "react";
 import ReactDOM from "react-dom";
 import ThemeProvider from "./providers/ThemeProvider";
 import CssBaseline from "@material-ui/core/CssBaseline";
-import App from "./components/App";
+import AppRouter from "./components/AppRouter";
 import { TuitioProvider } from "@flare/tuitio-client-react";
-import ToastProvider from "./providers/ToastProvider";
-import SensitiveInfoProvider from "./providers/SensitiveInfoProvider";
+import { ToastProvider } from "./providers";
 import "./utils/i18n";
 
 ReactDOM.render(
   <TuitioProvider tuitioUrl={process.env.REACT_APP_TUITIO_URL}>
     <ThemeProvider>
       <CssBaseline />
-      <SensitiveInfoProvider>
       <Suspense fallback={<div>Loading...</div>}>
         <ToastProvider>
-            <App />
+          <AppRouter />
         </ToastProvider>
       </Suspense>
-      </SensitiveInfoProvider>
     </ThemeProvider>
   </TuitioProvider>,
   document.getElementById("root")

src/providers/UserPermissionsProvider.js

@@ -0,0 +1,87 @@
+import React, { useState, useEffect, useContext, useMemo } from "react";
+import PropTypes from "prop-types";
+import useApi from "../api";
+
+const permissionCodes = {
+  VIEW_DASHBOARD: "VIEW_DASHBOARD",
+  MANAGE_USERS: "MANAGE_USERS",
+  MANAGE_SETTINGS: "MANAGE_SETTINGS",
+  VIEW_MACHINES: "VIEW_MACHINES",
+  MANAGE_MACHINES: "MANAGE_MACHINES",
+  OPERATE_MACHINES: "OPERATE_MACHINES",
+  GUEST_ACCESS: "GUEST_ACCESS"
+};
+
+const initialState = {
+  permissions: [],
+  loading: true
+};
+
+const getPermissionFlags = permissions => {
+  const viewDashboard =
+    permissions.includes(permissionCodes.VIEW_DASHBOARD) ?? false;
+  const manageUsers =
+    permissions.includes(permissionCodes.MANAGE_USERS) ?? false;
+  const manageSettings =
+    permissions.includes(permissionCodes.MANAGE_SETTINGS) ?? false;
+  const viewMachines =
+    permissions.includes(permissionCodes.VIEW_MACHINES) ?? false;
+  const manageMachines =
+    permissions.includes(permissionCodes.MANAGE_MACHINES) ?? false;
+  const operateMachines =
+    permissions.includes(permissionCodes.OPERATE_MACHINES) ?? false;
+  const guestAccess =
+    permissions.includes(permissionCodes.GUEST_ACCESS) ?? false;
+
+  const flags = {
+    viewDashboard,
+    manageUsers,
+    manageSettings,
+    viewMachines,
+    manageMachines,
+    operateMachines,
+    guestAccess
+  };
+
+  const isGuest = guestAccess === true;
+  const isUser = Object.values(flags).includes(true) && !flags.guestAccess;
+
+  return {
+    ...flags,
+    isGuest,
+    isUser
+  };
+};
+
+const UserPermissionsContext = React.createContext(initialState);
+
+const usePermissions = () => {
+  const { permissions, loading } = useContext(UserPermissionsContext);
+  const flags = useMemo(() => getPermissionFlags(permissions), [permissions]);
+  return { loading, ...flags };
+};
+
+const UserPermissionsProvider = ({ children }) => {
+  const [permissions, setPermissions] = useState(initialState);
+
+  const { getPermissions } = useApi();
+
+  useEffect(() => {
+    getPermissions({
+      onCompleted: data => setPermissions({ ...data, loading: false })
+    });
+  }, [getPermissions]);
+
+  return (
+    <UserPermissionsContext.Provider value={permissions}>
+      {children}
+    </UserPermissionsContext.Provider>
+  );
+};
+
+UserPermissionsProvider.propTypes = {
+  children: PropTypes.node.isRequired
+};
+
+export { UserPermissionsProvider, usePermissions };
+export default UserPermissionsProvider;

src/providers/index.js

@@ -0,0 +1,11 @@
+import ThemeProvider from "./ThemeProvider";
+import ToastProvider from "./ToastProvider";
+import SensitiveInfoProvider from "./SensitiveInfoProvider";
+import UserPermissionsProvider from "./UserPermissionsProvider";
+
+export {
+  ThemeProvider,
+  ToastProvider,
+  SensitiveInfoProvider,
+  UserPermissionsProvider
+};