F #3951: Add effective group login and switcher (#159)

* Fix actions and commands
* Add effective group login and switcher
* Fix sidebar component
* Fix header component and test api
* Add pool actions and system section
* Remove package lock json

src/fireedge/package.json

@@ -29,6 +29,7 @@
     "@hookform/resolvers": "0.0.6",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "^4.0.0-alpha.56",
     "ace-builds": "^1.4.11",
     "atob": "^2.1.2",
     "axios": "^0.19.2",

src/fireedge/src/public/actions/general.js

@@ -1,18 +1,25 @@
-export const CHANGE_ZONE = 'CHANGE_ZONE';
-export const DISPLAY_LOADING = 'DISPLAY_LOADING';
-export const TOGGLE_MENU = 'TOGGLE_MENU';
+const CHANGE_ZONE = 'CHANGE_ZONE';
+const DISPLAY_LOADING = 'DISPLAY_LOADING';
+const TOGGLE_MENU = 'TOGGLE_MENU';
 
-export const changeZone = zone => ({
-  type: CHANGE_ZONE,
-  payload: { zone }
-});
+const Actions = {
+  CHANGE_ZONE,
+  DISPLAY_LOADING,
+  TOGGLE_MENU
+};
 
-export const changeLoading = isLoading => ({
-  type: DISPLAY_LOADING,
-  payload: { isLoading }
-});
-
-export const openMenu = isOpen => ({
-  type: TOGGLE_MENU,
-  isOpen
-});
+module.exports = {
+  Actions,
+  changeZone: zone => ({
+    type: CHANGE_ZONE,
+    payload: { zone }
+  }),
+  changeLoading: isLoading => ({
+    type: DISPLAY_LOADING,
+    payload: { isLoading }
+  }),
+  openMenu: isOpen => ({
+    type: TOGGLE_MENU,
+    isOpen
+  })
+};

src/fireedge/src/public/actions/pool.js

@@ -0,0 +1,100 @@
+const START_ONE_REQUEST = 'START_ONE_REQUEST';
+const SUCCESS_ONE_REQUEST = 'SUCCESS_ONE_REQUEST';
+const FAILURE_ONE_REQUEST = 'FAILURE_ONE_REQUEST';
+
+const Actions = {
+  START_ONE_REQUEST,
+  SUCCESS_ONE_REQUEST,
+  FAILURE_ONE_REQUEST
+};
+
+module.exports = {
+  Actions,
+  setVms: vms => ({
+    type: SUCCESS_ONE_REQUEST,
+    payload: { vms }
+  }),
+  setTemplates: templates => ({
+    type: SUCCESS_ONE_REQUEST,
+    payload: { templates }
+  }),
+  setServices: services => ({
+    type: SUCCESS_ONE_REQUEST,
+    payload: { services }
+  }),
+  setDatastores: datastores => ({
+    type: SUCCESS_ONE_REQUEST,
+    payload: { datastores }
+  }),
+  setVRouters: virtualRouters => ({
+    type: SUCCESS_ONE_REQUEST,
+    payload: { virtualRouters }
+  }),
+  setVmGroups: vmGroups => ({
+    type: SUCCESS_ONE_REQUEST,
+    payload: { vmGroups }
+  }),
+  setImages: images => ({
+    type: SUCCESS_ONE_REQUEST,
+    payload: { images }
+  }),
+  setFiles: files => ({
+    type: SUCCESS_ONE_REQUEST,
+    payload: { files }
+  }),
+  setMarketplaces: marketPlaces => ({
+    type: SUCCESS_ONE_REQUEST,
+    payload: { marketPlaces }
+  }),
+  setApps: apps => ({
+    type: SUCCESS_ONE_REQUEST,
+    payload: { apps }
+  }),
+  setVNetworks: virtualNetworks => ({
+    type: SUCCESS_ONE_REQUEST,
+    payload: { virtualNetworks }
+  }),
+  setNetworkTemplates: networkTemplates => ({
+    type: SUCCESS_ONE_REQUEST,
+    payload: { networkTemplates }
+  }),
+  setSecGroups: securityGroups => ({
+    type: SUCCESS_ONE_REQUEST,
+    payload: { securityGroups }
+  }),
+  setCluster: clusters => ({
+    type: SUCCESS_ONE_REQUEST,
+    payload: { clusters }
+  }),
+  setHosts: hosts => ({
+    type: SUCCESS_ONE_REQUEST,
+    payload: { hosts }
+  }),
+  setZones: zones => ({
+    type: SUCCESS_ONE_REQUEST,
+    payload: { zones }
+  }),
+  setUsers: users => ({
+    type: SUCCESS_ONE_REQUEST,
+    payload: { users }
+  }),
+  setGroups: groups => ({
+    type: SUCCESS_ONE_REQUEST,
+    payload: { groups }
+  }),
+  setVdc: vdc => ({
+    type: SUCCESS_ONE_REQUEST,
+    payload: { vdc }
+  }),
+  setAcl: acl => ({
+    type: SUCCESS_ONE_REQUEST,
+    payload: { acl }
+  }),
+  startOneRequest: () => ({
+    type: START_ONE_REQUEST
+  }),
+  failureOneRequest: error => ({
+    type: FAILURE_ONE_REQUEST,
+    payload: { error }
+  })
+};

src/fireedge/src/public/actions/user.js

@@ -1,40 +1,29 @@
-export const LOGIN_REQUEST = 'LOGIN_REQUEST';
-export const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
-export const LOGIN_FAILURE = 'LOGIN_FAILURE';
-export const LOGOUT = 'LOGOUT';
-
-export const USER_REQUEST = 'USER_REQUEST';
-export const USER_SUCCESS = 'USER_SUCCESS';
-export const USER_FAILURE = 'USER_FAILURE';
-
-export const loginRequest = () => ({
-  type: LOGIN_REQUEST
-});
-
-export const loginSuccess = jwt => ({
-  type: LOGIN_SUCCESS,
-  jwt
-});
-
-export const loginFailure = message => ({
-  type: LOGIN_FAILURE,
-  message
-});
-
-export const logout = () => ({
-  type: LOGOUT
-});
-
-export const userRequest = () => ({
-  type: USER_REQUEST
-});
-
-export const userSuccess = user => ({
-  type: USER_SUCCESS,
-  user
-});
-
-export const userFailure = message => ({
-  type: USER_FAILURE,
-  message
-});
+const START_AUTH = 'START_AUTH';
+const SUCCESS_AUTH = 'SUCCESS_AUTH';
+const FAILURE_AUTH = 'FAILURE_AUTH';
+const LOGOUT = 'LOGOUT';
+
+const Actions = {
+  START_AUTH,
+  SUCCESS_AUTH,
+  FAILURE_AUTH,
+  LOGOUT
+};
+
+module.exports = {
+  Actions,
+  startAuth: () => ({
+    type: START_AUTH
+  }),
+  successAuth: payload => ({
+    type: SUCCESS_AUTH,
+    payload
+  }),
+  failureAuth: payload => ({
+    type: FAILURE_AUTH,
+    payload
+  }),
+  logout: () => ({
+    type: LOGOUT
+  })
+};

src/fireedge/src/public/components/FormControl/ErrorHelper.js

@@ -1,6 +1,12 @@
 import React from 'react';
 
-import { Box, darken, lighten, makeStyles, Typography } from '@material-ui/core';
+import {
+  Box,
+  darken,
+  lighten,
+  makeStyles,
+  Typography
+} from '@material-ui/core';
 import { Info as InfoIcon } from '@material-ui/icons';
 
 import { Translate } from 'client/components/HOC';
@@ -32,7 +38,7 @@ const ErrorHelper = ({ label = 'Error', ...rest }) => {
     <Box className={classes.root} {...rest}>
       <InfoIcon className={classes.icon} />
       <Typography className={classes.text} data-cy="error-text">
-        <Translate word={label} />
+        {label}
       </Typography>
     </Box>
   );

src/fireedge/src/public/components/FormControl/GroupSelect.js

@@ -0,0 +1,77 @@
+/* Copyright 2002-2019, OpenNebula Project, OpenNebula Systems                */
+/*                                                                            */
+/* Licensed under the Apache License, Version 2.0 (the "License"); you may    */
+/* not use this file except in compliance with the License. You may obtain    */
+/* a copy of the License at                                                   */
+/*                                                                            */
+/* http://www.apache.org/licenses/LICENSE-2.0                                 */
+/*                                                                            */
+/* Unless required by applicable law or agreed to in writing, software        */
+/* distributed under the License is distributed on an "AS IS" BASIS,          */
+/* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   */
+/* See the License for the specific language governing permissions and        */
+/* limitations under the License.                                             */
+/* -------------------------------------------------------------------------- */
+
+import React from 'react';
+import { func } from 'prop-types';
+
+import { MenuItem, TextField } from '@material-ui/core';
+import { FilterVintage } from '@material-ui/icons';
+
+import useAuth from 'client/hooks/useAuth';
+import useOpennebula from 'client/hooks/useOpennebula';
+import { Translate } from 'client/components/HOC';
+import { FILTER_POOL } from 'client/constants';
+
+const GroupSelect = ({ handleChange }) => {
+  const { filterPool, authUser } = useAuth();
+  const { groups } = useOpennebula();
+
+  const defaultValue = React.useMemo(
+    () =>
+      filterPool === FILTER_POOL.ALL_RESOURCES
+        ? FILTER_POOL.ALL_RESOURCES
+        : authUser?.GID,
+    [filterPool]
+  );
+
+  const orderGroups = React.useMemo(
+    () =>
+      groups
+        ?.sort((a, b) => a.ID - b.ID)
+        ?.map(({ ID, NAME }) => (
+          <MenuItem key={`selector-group-${ID}`} value={String(ID)}>
+            {`${ID} - ${String(NAME)}`}
+            {authUser?.GID === ID && <FilterVintage fontSize="small" />}
+          </MenuItem>
+        )),
+    [groups]
+  );
+
+  return (
+    <TextField
+      select
+      fullWidth
+      onChange={handleChange}
+      defaultValue={defaultValue}
+      variant="outlined"
+      inputProps={{ 'data-cy': 'select-group' }}
+      label={<Translate word="Select a group" />}
+      FormHelperTextProps={{ 'data-cy': 'select-group-error' }}
+    >
+      <MenuItem value={FILTER_POOL.ALL_RESOURCES}>{`Show all`}</MenuItem>
+      {orderGroups}
+    </TextField>
+  );
+};
+
+GroupSelect.propTypes = {
+  handleChange: func
+};
+
+GroupSelect.defaultProps = {
+  handleChange: () => undefined
+};
+
+export default GroupSelect;

src/fireedge/src/public/components/HOC/AuthLayout.js

@@ -17,18 +17,20 @@ import React, { Fragment, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Redirect } from 'react-router-dom';
 
-import useAuth from 'client/hooks/auth/useAuth';
-import routes from 'client/router/endpoints';
+import useAuth from 'client/hooks/useAuth';
+import { PATH } from 'client/router/endpoints';
 
 const AuthLayout = ({ children }) => {
-  const { isLogged, getAuthUser } = useAuth();
+  const { isLogging, isLogged, getAuthInfo } = useAuth();
 
   useEffect(() => {
-    if (isLogged) getAuthUser();
-  }, [isLogged, getAuthUser]);
+    if (isLogged && !isLogging) {
+      getAuthInfo();
+    }
+  }, [isLogged, isLogging]);
 
   if (!isLogged) {
-    return <Redirect to={routes.login.path} />;
+    return <Redirect to={PATH.LOGIN} />;
   }
 
   return <Fragment>{children}</Fragment>;

src/fireedge/src/public/components/HOC/GuessLayout.js

@@ -19,14 +19,14 @@ import { Redirect } from 'react-router-dom';
 
 import { LinearProgress } from '@material-ui/core';
 
-import useAuth from 'client/hooks/auth/useAuth';
-import routes from 'client/router/endpoints';
+import useAuth from 'client/hooks/useAuth';
+import { PATH } from 'client/router/endpoints';
 
 const GuessLayout = ({ children }) => {
-  const { isLogged, firstRender } = useAuth();
+  const { isLogging, isLogged, firstRender } = useAuth();
 
-  if (isLogged) {
-    return <Redirect to={routes.dashboard.path} />;
+  if (isLogged && !isLogging) {
+    return <Redirect to={PATH.DASHBOARD} />;
   }
 
   if (firstRender) {