From b81b3e3d248b22c563c90553aca9f80b96445f92 Mon Sep 17 00:00:00 2001 From: Sergio Betanzos Date: Thu, 26 May 2022 13:46:16 +0200 Subject: [PATCH] F #5422: Fix switcher group on header (#2089) --- .../src/client/components/HOC/AuthLayout.js | 3 +- .../src/client/components/Header/Group.js | 27 +++++---- .../src/client/features/Auth/hooks.js | 6 +- .../src/client/features/Auth/slice.js | 16 +++--- .../src/client/features/General/slice.js | 8 +-- .../src/client/features/Guacamole/slice.js | 5 +- .../{AuthApi/index.js => OneApi/auth.js} | 55 ++++++++----------- .../src/client/features/OneApi/index.js | 13 ++++- .../src/client/features/OneApi/user.js | 3 +- src/fireedge/src/client/store/index.js | 3 - src/fireedge/src/client/store/reducers.js | 2 - 11 files changed, 71 insertions(+), 70 deletions(-) rename src/fireedge/src/client/features/{AuthApi/index.js => OneApi/auth.js} (74%) diff --git a/src/fireedge/src/client/components/HOC/AuthLayout.js b/src/fireedge/src/client/components/HOC/AuthLayout.js index d0ca542285..c95f7e97a1 100644 --- a/src/fireedge/src/client/components/HOC/AuthLayout.js +++ b/src/fireedge/src/client/components/HOC/AuthLayout.js @@ -18,8 +18,8 @@ import { useDispatch } from 'react-redux' import PropTypes from 'prop-types' import { useAuth, useAuthApi } from 'client/features/Auth' -import { authApi } from 'client/features/AuthApi' import { oneApi } from 'client/features/OneApi' +import authApi from 'client/features/OneApi/auth' import groupApi from 'client/features/OneApi/group' import FullscreenProgress from 'client/components/LoadingScreen' import { findStorageData, findExternalToken, storage } from 'client/utils' @@ -47,7 +47,6 @@ const AuthLayout = ({ subscriptions = [], children }) => { return () => { authSubscription.unsubscribe() - dispatch(authApi.util.resetApiState()) dispatch(oneApi.util.resetApiState()) } }, [dispatch, jwt]) diff --git a/src/fireedge/src/client/components/Header/Group.js b/src/fireedge/src/client/components/Header/Group.js index 137c60dff4..1ca80c1264 100644 --- a/src/fireedge/src/client/components/Header/Group.js +++ b/src/fireedge/src/client/components/Header/Group.js @@ -16,11 +16,11 @@ import { useMemo, memo, JSXElementConstructor } from 'react' import PropTypes from 'prop-types' -import { Button, Stack, CircularProgress } from '@mui/material' -import { Group as GroupIcon, VerifiedBadge as SelectIcon } from 'iconoir-react' +import { Stack, Button, Typography, CircularProgress } from '@mui/material' +import { Group as GroupIcon, VerifiedUser, Check } from 'iconoir-react' import { useAuth } from 'client/features/Auth' -import { useChangeAuthGroupMutation } from 'client/features/AuthApi' +import { useChangeAuthGroupMutation } from 'client/features/OneApi/auth' import Search from 'client/components/Search' import HeaderPopover from 'client/components/Header/Popover' import { Tr, Translate } from 'client/components/HOC' @@ -33,25 +33,32 @@ const ButtonGroup = memo( const { user, filterPool } = useAuth() const { ID, NAME } = group + const isPrimaryGroup = user?.GID === ID + const isSelected = (filterPool === ALL_RESOURCES && ALL_RESOURCES === ID) || - (filterPool === PRIMARY_GROUP_RESOURCES && user?.GID === ID) + (filterPool === PRIMARY_GROUP_RESOURCES && isPrimaryGroup) return ( ) }, @@ -88,7 +95,7 @@ const Group = () => { headerTitle={ - {isLoading && } + {isLoading && } } > diff --git a/src/fireedge/src/client/features/Auth/hooks.js b/src/fireedge/src/client/features/Auth/hooks.js index 9a71b91798..3635a427e6 100644 --- a/src/fireedge/src/client/features/Auth/hooks.js +++ b/src/fireedge/src/client/features/Auth/hooks.js @@ -18,7 +18,7 @@ import { useCallback, useMemo } from 'react' import { useDispatch, useSelector, shallowEqual } from 'react-redux' import { name as generalSlice } from 'client/features/General/slice' -import { name as authSlice, actions } from 'client/features/Auth/slice' +import { name as authSlice, actions, logout } from 'client/features/Auth/slice' import groupApi from 'client/features/OneApi/group' import systemApi from 'client/features/OneApi/system' import { ResourceView } from 'client/apps/sunstone/routes' @@ -91,10 +91,10 @@ export const useAuthApi = () => { return { stopFirstRender: () => dispatch(actions.stopFirstRender()), - logout: () => dispatch(actions.logout()), + logout: () => dispatch(logout()), changeView: (view) => dispatch(actions.changeView(view)), changeJwt: (jwt) => dispatch(actions.changeJwt(jwt)), - changeAuthUser: (user) => dispatch(actions.changeAuthUser({ user })), + changeAuthUser: (user) => dispatch(actions.changeAuthUser(user)), } } diff --git a/src/fireedge/src/client/features/Auth/slice.js b/src/fireedge/src/client/features/Auth/slice.js index 75a2d2b3ce..503091a748 100644 --- a/src/fireedge/src/client/features/Auth/slice.js +++ b/src/fireedge/src/client/features/Auth/slice.js @@ -31,10 +31,13 @@ const slice = createSlice({ name: 'auth', initialState: { ...initial(), firstRender: true }, reducers: { - changeAuthUser: (state, { payload }) => ({ - ...state, - ...payload, - }), + changeAuthUser: (state, { payload: { isLoginInProgress, ...user } }) => { + state.user = { ...state.user, ...user } + + if (isLoginInProgress !== undefined) { + state.isLoginInProgress = isLoginInProgress + } + }, changeJwt: (state, { payload }) => { state.jwt = payload }, @@ -58,7 +61,4 @@ const slice = createSlice({ }, }) -export const { name, reducer } = slice - -const actions = { ...slice.actions, logout } -export { actions } +export const { name, reducer, actions } = slice diff --git a/src/fireedge/src/client/features/General/slice.js b/src/fireedge/src/client/features/General/slice.js index d9c7be9367..6be92feac6 100644 --- a/src/fireedge/src/client/features/General/slice.js +++ b/src/fireedge/src/client/features/General/slice.js @@ -15,7 +15,7 @@ * ------------------------------------------------------------------------- */ import { createSlice } from '@reduxjs/toolkit' -import { actions as authActions } from 'client/features/Auth/slice' +import { logout } from 'client/features/Auth/slice' import * as actions from 'client/features/General/actions' import { generateKey } from 'client/utils' import { APPS_IN_BETA, APPS_WITH_SWITCHER } from 'client/constants' @@ -30,13 +30,13 @@ const initial = { notifications: [], } -const { name, reducer } = createSlice({ +const slice = createSlice({ name: 'general', initialState: initial, extraReducers: (builder) => { builder /* LOGOUT ACTION */ - .addCase(authActions.logout, (state) => ({ + .addCase(logout, (state) => ({ ...initial, // persistent app state appTitle: state.appTitle, @@ -127,4 +127,4 @@ const { name, reducer } = createSlice({ }, }) -export { name, reducer } +export const { name, reducer } = slice diff --git a/src/fireedge/src/client/features/Guacamole/slice.js b/src/fireedge/src/client/features/Guacamole/slice.js index 1e58879c20..20fd7bc88d 100644 --- a/src/fireedge/src/client/features/Guacamole/slice.js +++ b/src/fireedge/src/client/features/Guacamole/slice.js @@ -16,7 +16,7 @@ import { createSlice } from '@reduxjs/toolkit' import { Status } from 'guacamole-common-js' -import { actions as authActions } from 'client/features/Auth/slice' +import { logout } from 'client/features/Auth/slice' import { GUACAMOLE_STATES_STR } from 'client/constants' const { @@ -119,7 +119,8 @@ const slice = createSlice({ }, }, extraReducers: (builder) => { - builder.addCase(authActions.logout, () => ({})) + /* LOGOUT ACTION */ + builder.addCase(logout, () => ({})) }, }) diff --git a/src/fireedge/src/client/features/AuthApi/index.js b/src/fireedge/src/client/features/OneApi/auth.js similarity index 74% rename from src/fireedge/src/client/features/AuthApi/index.js rename to src/fireedge/src/client/features/OneApi/auth.js index 73731d20d2..24866447b4 100644 --- a/src/fireedge/src/client/features/AuthApi/index.js +++ b/src/fireedge/src/client/features/OneApi/auth.js @@ -13,37 +13,20 @@ * See the License for the specific language governing permissions and * * limitations under the License. * * ------------------------------------------------------------------------- */ -import { createApi } from '@reduxjs/toolkit/query/react' - import { Actions, Commands } from 'server/routes/api/auth/routes' + +import { actions as authActions } from 'client/features/Auth/slice' import { dismissSnackbar } from 'client/features/General/actions' -import { actions } from 'client/features/Auth/slice' +import { oneApi, ONE_RESOURCES_POOL } from 'client/features/OneApi' import userApi from 'client/features/OneApi/user' -import http from 'client/utils/rest' -import { requestConfig, storage } from 'client/utils' +import { storage } from 'client/utils' import { JWT_NAME, FILTER_POOL, ONEADMIN_ID } from 'client/constants' +const { GROUP_POOL, ...restOfPool } = ONE_RESOURCES_POOL const { ALL_RESOURCES, PRIMARY_GROUP_RESOURCES } = FILTER_POOL -const authApi = createApi({ - reducerPath: 'authApi', - baseQuery: async ({ params, command, needState }, { getState, signal }) => { - try { - const config = requestConfig(params, command) - const response = await http.request({ ...config, signal }) - const state = needState ? getState() : {} - - return { data: response.data ?? {}, meta: { state } } - } catch (axiosError) { - const { message, data = {}, status, statusText } = axiosError - const { message: messageFromServer, data: errorFromOned } = data - - const error = message ?? errorFromOned ?? messageFromServer ?? statusText - - return { error: { status: status, data: error } } - } - }, +const authApi = oneApi.injectEndpoints({ endpoints: (builder) => ({ getAuthUser: builder.query({ /** @@ -55,7 +38,7 @@ const authApi = createApi({ async onQueryStarted(_, { queryFulfilled, dispatch }) { try { const { data: user } = await queryFulfilled - dispatch(actions.changeAuthUser({ user })) + dispatch(authActions.changeAuthUser(user)) } catch {} }, }), @@ -91,13 +74,15 @@ const authApi = createApi({ async onQueryStarted(_, { queryFulfilled, dispatch }) { try { const { data: queryData } = await queryFulfilled + const { jwt, ...user } = queryData - if (queryData?.jwt) { - storage(JWT_NAME, queryData?.jwt) + if (jwt) { + storage(JWT_NAME, jwt) dispatch(dismissSnackbar({ dismissAll: true })) } - dispatch(actions.changeAuthUser(queryData)) + dispatch(authActions.changeJwt(queryData)) + dispatch(authActions.changeAuthUser(user)) } catch {} }, }), @@ -111,35 +96,39 @@ const authApi = createApi({ queryFn: async ({ group } = {}, { getState, dispatch }) => { try { if (group === ALL_RESOURCES) { - dispatch(actions.changeFilterPool(ALL_RESOURCES)) + dispatch(authActions.changeFilterPool(ALL_RESOURCES)) return { data: '' } } const authUser = getState().auth.user - const queryData = { id: authUser.ID, group: group } + const queryData = { id: authUser.ID, group } - const response = await dispatch( + const newGroup = await dispatch( userApi.endpoints.changeGroup.initiate(queryData) ).unwrap() - dispatch(actions.changeFilterPool(PRIMARY_GROUP_RESOURCES)) + dispatch(authActions.changeFilterPool(PRIMARY_GROUP_RESOURCES)) + dispatch(authActions.changeAuthUser({ GID: `${group}` })) - return { data: response } + return { data: newGroup } } catch (error) { return { error } } }, + invalidatesTags: [...Object.values(restOfPool)], }), }), }) export const { + // Queries useGetAuthUserQuery, useLazyGetAuthUserQuery, + // Mutations useLoginMutation, useChangeAuthGroupMutation, } = authApi -export { authApi } +export default authApi diff --git a/src/fireedge/src/client/features/OneApi/index.js b/src/fireedge/src/client/features/OneApi/index.js index 058194a312..d83837d063 100644 --- a/src/fireedge/src/client/features/OneApi/index.js +++ b/src/fireedge/src/client/features/OneApi/index.js @@ -78,12 +78,21 @@ const PROVISION_RESOURCES = { const oneApi = createApi({ reducerPath: 'oneApi', - baseQuery: async ({ params, command }, { dispatch, signal }) => { + baseQuery: async ( + { params = {}, command, needStateInMeta = false }, + { getState, dispatch, signal } + ) => { try { + // set filter flag if filter is present in command params + if (command?.params?.filter) { + params.filter = getState().auth?.filterPool + } + const config = requestConfig(params, command) const response = await http.request({ ...config, signal }) + const state = needStateInMeta ? getState() : {} - return { data: response.data ?? {} } + return { data: response.data ?? {}, meta: { state } } } catch (axiosError) { const { message, data = {}, status, statusText } = axiosError const { message: messageFromServer, data: errorFromOned } = data diff --git a/src/fireedge/src/client/features/OneApi/user.js b/src/fireedge/src/client/features/OneApi/user.js index d4c28ddd85..271c8e00e0 100644 --- a/src/fireedge/src/client/features/OneApi/user.js +++ b/src/fireedge/src/client/features/OneApi/user.js @@ -14,12 +14,13 @@ * limitations under the License. * * ------------------------------------------------------------------------- */ import { Actions, Commands } from 'server/utils/constants/commands/user' + import { oneApi, ONE_RESOURCES, ONE_RESOURCES_POOL, } from 'client/features/OneApi' -import { authApi } from 'client/features/AuthApi' +import authApi from 'client/features/OneApi/auth' import { User } from 'client/constants' const { USER } = ONE_RESOURCES diff --git a/src/fireedge/src/client/store/index.js b/src/fireedge/src/client/store/index.js index 403edf6a33..67cb072528 100644 --- a/src/fireedge/src/client/store/index.js +++ b/src/fireedge/src/client/store/index.js @@ -21,7 +21,6 @@ import { isDevelopment } from 'client/utils' import * as Auth from 'client/features/Auth/slice' import * as General from 'client/features/General/slice' import * as Guacamole from 'client/features/Guacamole/slice' -import { authApi } from 'client/features/AuthApi' import { oneApi } from 'client/features/OneApi' import { unauthenticatedMiddleware } from 'client/features/middleware' @@ -37,7 +36,6 @@ export const createStore = ({ initState = {}, extraMiddleware = [] }) => { [Auth.name]: Auth.reducer, [General.name]: General.reducer, [Guacamole.name]: Guacamole.reducer, - [authApi.reducerPath]: authApi.reducer, [oneApi.reducerPath]: oneApi.reducer, }, devTools: isDevelopment(), @@ -47,7 +45,6 @@ export const createStore = ({ initState = {}, extraMiddleware = [] }) => { }).concat([ ...extraMiddleware, unauthenticatedMiddleware, - authApi.middleware, oneApi.middleware, ]), preloadedState: initState, diff --git a/src/fireedge/src/client/store/reducers.js b/src/fireedge/src/client/store/reducers.js index 4e226955d8..3081ef4ad9 100644 --- a/src/fireedge/src/client/store/reducers.js +++ b/src/fireedge/src/client/store/reducers.js @@ -16,13 +16,11 @@ const { combineReducers } = require('@reduxjs/toolkit') const Auth = require('client/features/Auth/slice') const General = require('client/features/General/slice') -const { authApi } = require('client/features/AuthApi') const { oneApi } = require('client/features/OneApi') const rootReducer = combineReducers({ general: General.reducer, auth: Auth.reducer, - [authApi.reducerPath]: authApi.reducer, [oneApi.reducerPath]: oneApi.reducer, })