feat: add new role IsDatabaseAllowed and shrink breadcrumbs (#2672)

Author: Raubzeug

src/containers/Header/Header.tsx

@@ -14,7 +14,10 @@ import {DEVELOPER_UI_TITLE} from '../../utils/constants';
 import {createDeveloperUIInternalPageHref} from '../../utils/developerUI/developerUI';
 import {useTypedSelector} from '../../utils/hooks';
 import {useDatabaseFromQuery} from '../../utils/hooks/useDatabaseFromQuery';
-import {useIsUserAllowedToMakeChanges} from '../../utils/hooks/useIsUserAllowedToMakeChanges';
+import {
+    useIsUserAllowedToMakeChanges,
+    useIsViewerUser,
+} from '../../utils/hooks/useIsUserAllowedToMakeChanges';
 
 import {getBreadcrumbs} from './breadcrumbs';
 import {headerKeyset} from './i18n';
@@ -27,6 +30,7 @@ function Header() {
     const {page, pageBreadcrumbsOptions} = useTypedSelector((state) => state.header);
     const singleClusterMode = useTypedSelector((state) => state.singleClusterMode);
     const isUserAllowedToMakeChanges = useIsUserAllowedToMakeChanges();
+    const isViewerUser = useIsViewerUser();
 
     const {title: clusterTitle} = useClusterBaseInfo();
 
@@ -39,7 +43,11 @@ function Header() {
         useAddClusterFeatureAvailable() && uiFactory.onAddCluster !== undefined;
 
     const breadcrumbItems = React.useMemo(() => {
-        let options = {...pageBreadcrumbsOptions, singleClusterMode};
+        let options = {
+            ...pageBreadcrumbsOptions,
+            singleClusterMode,
+            isViewerUser,
+        };
 
         if (clusterTitle) {
             options = {
@@ -53,7 +61,7 @@ function Header() {
         return breadcrumbs.map((item) => {
             return {...item, action: () => {}};
         });
-    }, [clusterTitle, page, pageBreadcrumbsOptions, singleClusterMode]);
+    }, [clusterTitle, page, pageBreadcrumbsOptions, singleClusterMode, isViewerUser]);
 
     const renderRightControls = () => {
         const elements: React.ReactNode[] = [];

src/containers/Header/breadcrumbs.tsx

@@ -46,7 +46,10 @@ const getQueryForTenant = (type: 'nodes' | 'tablets') => ({
     [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS[type],
 });
 
-const getClustersBreadcrumbs: GetBreadcrumbs<ClustersBreadcrumbsOptions> = () => {
+const getClustersBreadcrumbs: GetBreadcrumbs<ClustersBreadcrumbsOptions> = (options) => {
+    if (!options.isViewerUser) {
+        return [];
+    }
     return [
         {
             text: headerKeyset('breadcrumbs.clusters'),
@@ -56,7 +59,11 @@ const getClustersBreadcrumbs: GetBreadcrumbs<ClustersBreadcrumbsOptions> = () =>
 };
 
 const getClusterBreadcrumbs: GetBreadcrumbs<ClusterBreadcrumbsOptions> = (options, query = {}) => {
-    const {clusterName, clusterTab, singleClusterMode} = options;
+    const {clusterName, clusterTab, singleClusterMode, isViewerUser} = options;
+
+    if (!isViewerUser) {
+        return [];
+    }
 
     let breadcrumbs: RawBreadcrumbItem[] = [];
 

src/store/reducers/authentication/authentication.ts

@@ -26,7 +26,7 @@ export const slice = createSlice({
             }
         },
         setUser: (state, action: PayloadAction<TUserToken>) => {
-            const {UserSID, AuthType, IsMonitoringAllowed} = action.payload;
+            const {UserSID, AuthType, IsMonitoringAllowed, IsViewerAllowed} = action.payload;
 
             state.user = AuthType === 'Login' ? UserSID : undefined;
 
@@ -35,17 +35,19 @@ export const slice = createSlice({
             // Otherwise every user is allowed to make changes
             // Anyway there will be guards on backend
             state.isUserAllowedToMakeChanges = IsMonitoringAllowed !== false;
+            state.isViewerUser = IsViewerAllowed;
         },
     },
     selectors: {
         selectIsUserAllowedToMakeChanges: (state) => state.isUserAllowedToMakeChanges,
+        selectIsViewerUser: (state) => state.isViewerUser,
         selectUser: (state) => state.user,
     },
 });
 
 export default slice.reducer;
 export const {setIsAuthenticated, setUser} = slice.actions;
-export const {selectIsUserAllowedToMakeChanges, selectUser} = slice.selectors;
+export const {selectIsUserAllowedToMakeChanges, selectIsViewerUser, selectUser} = slice.selectors;
 
 export const authenticationApi = api.injectEndpoints({
     endpoints: (build) => ({

src/store/reducers/authentication/types.ts

@@ -1,5 +1,6 @@
 export interface AuthenticationState {
     isAuthenticated: boolean;
     isUserAllowedToMakeChanges?: boolean;
+    isViewerUser?: boolean;
     user: string | undefined;
 }

src/store/reducers/header/types.ts

@@ -15,7 +15,9 @@ export type Page =
     | 'storageGroup'
     | undefined;
 
-export interface ClustersBreadcrumbsOptions {}
+export interface ClustersBreadcrumbsOptions {
+    isViewerUser?: boolean;
+}
 
 export interface ClusterBreadcrumbsOptions extends ClustersBreadcrumbsOptions {
     clusterName?: string;

src/types/api/whoami.ts

@@ -9,7 +9,9 @@ export interface TUserToken {
     OriginalUserToken?: string;
     AuthType?: string;
 
-    /** Is user allowed to view data */
+    /** Is user allowed to view only database specific data */
+    IsDatabaseAllowed?: boolean;
+    /** Is user allowed to view data (includes IsDatabaseAllowed rights) */
     IsViewerAllowed?: boolean;
     /** Is user allowed to view deeper and make simple changes */
     IsMonitoringAllowed?: boolean;

src/utils/hooks/useIsUserAllowedToMakeChanges.ts

@@ -1,7 +1,13 @@
-import {selectIsUserAllowedToMakeChanges} from '../../store/reducers/authentication/authentication';
+import {
+    selectIsUserAllowedToMakeChanges,
+    selectIsViewerUser,
+} from '../../store/reducers/authentication/authentication';
 
 import {useTypedSelector} from './useTypedSelector';
 
 export function useIsUserAllowedToMakeChanges() {
     return useTypedSelector(selectIsUserAllowedToMakeChanges);
 }
+export function useIsViewerUser() {
+    return useTypedSelector(selectIsViewerUser);
+}