feat: hide some columns and storage nodes for users-viewers (#1967)

Author: artemmufazalov

src/components/PDiskInfo/PDiskInfo.tsx

@@ -1,14 +1,13 @@
 import {Flex} from '@gravity-ui/uikit';
 
 import {getPDiskPagePath} from '../../routes';
-import {selectIsUserAllowedToMakeChanges} from '../../store/reducers/authentication/authentication';
 import {valueIsDefined} from '../../utils';
 import {formatBytes} from '../../utils/bytesParsers';
 import {cn} from '../../utils/cn';
 import {formatStorageValuesToGb} from '../../utils/dataFormatters/dataFormatters';
 import {createPDiskDeveloperUILink} from '../../utils/developerUI/developerUI';
 import type {PreparedPDisk} from '../../utils/disks/types';
-import {useTypedSelector} from '../../utils/hooks';
+import {useIsUserAllowedToMakeChanges} from '../../utils/hooks/useIsUserAllowedToMakeChanges';
 import type {InfoViewerItem} from '../InfoViewer';
 import {InfoViewer} from '../InfoViewer/InfoViewer';
 import {LinkWithIcon} from '../LinkWithIcon/LinkWithIcon';
@@ -189,7 +188,7 @@ export function PDiskInfo<T extends PreparedPDisk>({
     withPDiskPageLink,
     className,
 }: PDiskInfoProps<T>) {
-    const isUserAllowedToMakeChanges = useTypedSelector(selectIsUserAllowedToMakeChanges);
+    const isUserAllowedToMakeChanges = useIsUserAllowedToMakeChanges();
 
     const [generalInfo, statusInfo, spaceInfo, additionalInfo] = getPDiskInfo({
         pDisk,

src/components/PDiskPopup/PDiskPopup.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 
-import {selectIsUserAllowedToMakeChanges} from '../../store/reducers/authentication/authentication';
 import {selectNodesMap} from '../../store/reducers/nodesList';
 import {EFlag} from '../../types/api/enums';
 import {valueIsDefined} from '../../utils';
 import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
 import {createPDiskDeveloperUILink} from '../../utils/developerUI/developerUI';
 import type {PreparedPDisk} from '../../utils/disks/types';
 import {useTypedSelector} from '../../utils/hooks';
+import {useIsUserAllowedToMakeChanges} from '../../utils/hooks/useIsUserAllowedToMakeChanges';
 import {bytesToGB, isNumeric} from '../../utils/utils';
 import {InfoViewer} from '../InfoViewer';
 import type {InfoViewerItem} from '../InfoViewer';
@@ -92,7 +92,7 @@ interface PDiskPopupProps {
 }
 
 export const PDiskPopup = ({data}: PDiskPopupProps) => {
-    const isUserAllowedToMakeChanges = useTypedSelector(selectIsUserAllowedToMakeChanges);
+    const isUserAllowedToMakeChanges = useIsUserAllowedToMakeChanges();
     const nodesMap = useTypedSelector(selectNodesMap);
     const nodeData = valueIsDefined(data.NodeId) ? nodesMap?.get(data.NodeId) : undefined;
     const info = React.useMemo(

src/components/TabletNameWrapper/TabletNameWrapper.tsx

@@ -1,9 +1,8 @@
 import {DefinitionList, PopoverBehavior} from '@gravity-ui/uikit';
 
 import {getTabletPagePath} from '../../routes';
-import {selectIsUserAllowedToMakeChanges} from '../../store/reducers/authentication/authentication';
 import {createTabletDeveloperUIHref} from '../../utils/developerUI/developerUI';
-import {useTypedSelector} from '../../utils/hooks';
+import {useIsUserAllowedToMakeChanges} from '../../utils/hooks/useIsUserAllowedToMakeChanges';
 import {CellWithPopover} from '../CellWithPopover/CellWithPopover';
 import {EntityStatus} from '../EntityStatus/EntityStatus';
 import {LinkWithIcon} from '../LinkWithIcon/LinkWithIcon';
@@ -16,7 +15,7 @@ interface TabletNameWrapperProps {
 }
 
 export function TabletNameWrapper({tabletId, database}: TabletNameWrapperProps) {
-    const isUserAllowedToMakeChanges = useTypedSelector(selectIsUserAllowedToMakeChanges);
+    const isUserAllowedToMakeChanges = useIsUserAllowedToMakeChanges();
 
     const tabletPath = getTabletPagePath(tabletId, {database});
 

src/components/TenantNameWrapper/TenantNameWrapper.tsx

@@ -1,10 +1,9 @@
 import {DefinitionList, PopoverBehavior} from '@gravity-ui/uikit';
 
 import {getTenantPath} from '../../containers/Tenant/TenantPages';
-import {selectIsUserAllowedToMakeChanges} from '../../store/reducers/authentication/authentication';
 import type {PreparedTenant} from '../../store/reducers/tenants/types';
 import type {AdditionalTenantsProps, NodeAddress} from '../../types/additionalProps';
-import {useTypedSelector} from '../../utils/hooks';
+import {useIsUserAllowedToMakeChanges} from '../../utils/hooks/useIsUserAllowedToMakeChanges';
 import {CellWithPopover} from '../CellWithPopover/CellWithPopover';
 import {EntityStatus} from '../EntityStatus/EntityStatus';
 import {LinkWithIcon} from '../LinkWithIcon/LinkWithIcon';
@@ -34,7 +33,7 @@ const getTenantBackend = (
 };
 
 export function TenantNameWrapper({tenant, additionalTenantsProps}: TenantNameWrapperProps) {
-    const isUserAllowedToMakeChanges = useTypedSelector(selectIsUserAllowedToMakeChanges);
+    const isUserAllowedToMakeChanges = useIsUserAllowedToMakeChanges();
 
     const backend = getTenantBackend(tenant, additionalTenantsProps);
     const isExternalLink = Boolean(backend);

src/components/TooltipsContent/NodeEndpointsTooltipContent/NodeEndpointsTooltipContent.tsx

@@ -1,10 +1,9 @@
 import type {DefinitionListItemProps} from '@gravity-ui/uikit';
 import {DefinitionList} from '@gravity-ui/uikit';
 
-import {selectIsUserAllowedToMakeChanges} from '../../../store/reducers/authentication/authentication';
 import type {TSystemStateInfo} from '../../../types/api/nodes';
 import {cn} from '../../../utils/cn';
-import {useTypedSelector} from '../../../utils/hooks';
+import {useIsUserAllowedToMakeChanges} from '../../../utils/hooks/useIsUserAllowedToMakeChanges';
 import {LinkWithIcon} from '../../LinkWithIcon/LinkWithIcon';
 
 import i18n from './i18n';
@@ -19,7 +18,7 @@ interface NodeEdpointsTooltipProps {
 }
 
 export const NodeEndpointsTooltipContent = ({data, nodeHref}: NodeEdpointsTooltipProps) => {
-    const isUserAllowedToMakeChanges = useTypedSelector(selectIsUserAllowedToMakeChanges);
+    const isUserAllowedToMakeChanges = useIsUserAllowedToMakeChanges();
     const info: (DefinitionListItemProps & {key: string})[] = [];
 
     if (data?.Roles?.length) {

src/components/VDiskInfo/VDiskInfo.tsx

@@ -1,14 +1,13 @@
 import React from 'react';
 
 import {getVDiskPagePath} from '../../routes';
-import {selectIsUserAllowedToMakeChanges} from '../../store/reducers/authentication/authentication';
 import {valueIsDefined} from '../../utils';
 import {cn} from '../../utils/cn';
 import {formatStorageValuesToGb} from '../../utils/dataFormatters/dataFormatters';
 import {createVDiskDeveloperUILink} from '../../utils/developerUI/developerUI';
 import {getSeverityColor} from '../../utils/disks/helpers';
 import type {PreparedVDisk} from '../../utils/disks/types';
-import {useTypedSelector} from '../../utils/hooks';
+import {useIsUserAllowedToMakeChanges} from '../../utils/hooks/useIsUserAllowedToMakeChanges';
 import {bytesToSpeed} from '../../utils/utils';
 import {InfoViewer} from '../InfoViewer';
 import type {InfoViewerProps} from '../InfoViewer/InfoViewer';
@@ -35,7 +34,7 @@ export function VDiskInfo<T extends PreparedVDisk>({
     withTitle,
     ...infoViewerProps
 }: VDiskInfoProps<T>) {
-    const isUserAllowedToMakeChanges = useTypedSelector(selectIsUserAllowedToMakeChanges);
+    const isUserAllowedToMakeChanges = useIsUserAllowedToMakeChanges();
 
     const {
         AllocatedSize,

src/components/VDiskPopup/VDiskPopup.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 
 import {Label} from '@gravity-ui/uikit';
 
-import {selectIsUserAllowedToMakeChanges} from '../../store/reducers/authentication/authentication';
 import {selectNodesMap} from '../../store/reducers/nodesList';
 import {EFlag} from '../../types/api/enums';
 import {valueIsDefined} from '../../utils';
@@ -12,6 +11,7 @@ import {createVDiskDeveloperUILink} from '../../utils/developerUI/developerUI';
 import {isFullVDiskData} from '../../utils/disks/helpers';
 import type {PreparedVDisk, UnavailableDonor} from '../../utils/disks/types';
 import {useTypedSelector} from '../../utils/hooks';
+import {useIsUserAllowedToMakeChanges} from '../../utils/hooks/useIsUserAllowedToMakeChanges';
 import {bytesToGB, bytesToSpeed} from '../../utils/utils';
 import type {InfoViewerItem} from '../InfoViewer';
 import {InfoViewer} from '../InfoViewer';
@@ -178,7 +178,7 @@ interface VDiskPopupProps {
 export const VDiskPopup = ({data}: VDiskPopupProps) => {
     const isFullData = isFullVDiskData(data);
 
-    const isUserAllowedToMakeChanges = useTypedSelector(selectIsUserAllowedToMakeChanges);
+    const isUserAllowedToMakeChanges = useIsUserAllowedToMakeChanges();
 
     const vdiskInfo = React.useMemo(
         () =>

src/components/nodesColumns/constants.ts

@@ -35,6 +35,13 @@ export const NODES_COLUMNS_IDS = {
 
 export type NodesColumnId = ValueOf<typeof NODES_COLUMNS_IDS>;
 
+// Columns, that should displayed only for users with isMonitoringAllowed:true
+const MONITORING_USER_COLUMNS_IDS: NodesColumnId[] = ['Pools', 'Memory'];
+
+export function isMonitoringUserNodesColumn(columnId: string): boolean {
+    return MONITORING_USER_COLUMNS_IDS.includes(columnId as NodesColumnId);
+}
+
 // This code is running when module is initialized and correct language may not be set yet
 // get functions guarantee that i18n fields will be inited on render with current render language
 export const NODES_COLUMNS_TITLES = {

src/containers/Header/Header.tsx

@@ -6,13 +6,13 @@ import {useLocation} from 'react-router-dom';
 
 import {getConnectToDBDialog} from '../../components/ConnectToDB/ConnectToDBDialog';
 import {InternalLink} from '../../components/InternalLink';
-import {selectIsUserAllowedToMakeChanges} from '../../store/reducers/authentication/authentication';
 import {useClusterBaseInfo} from '../../store/reducers/cluster/cluster';
 import {cn} from '../../utils/cn';
 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 type {RawBreadcrumbItem} from './breadcrumbs';
 import {getBreadcrumbs} from './breadcrumbs';
@@ -28,7 +28,7 @@ interface HeaderProps {
 
 function Header({mainPage}: HeaderProps) {
     const {page, pageBreadcrumbsOptions} = useTypedSelector((state) => state.header);
-    const isUserAllowedToMakeChanges = useTypedSelector(selectIsUserAllowedToMakeChanges);
+    const isUserAllowedToMakeChanges = useIsUserAllowedToMakeChanges();
 
     const clusterInfo = useClusterBaseInfo();
 

src/containers/Node/NodeStructure/Pdisk.tsx

@@ -10,7 +10,6 @@ import {PDiskInfo} from '../../../components/PDiskInfo/PDiskInfo';
 import {ProgressViewer} from '../../../components/ProgressViewer/ProgressViewer';
 import {StatusIcon} from '../../../components/StatusIcon/StatusIcon';
 import {VDiskInfo} from '../../../components/VDiskInfo/VDiskInfo';
-import {selectIsUserAllowedToMakeChanges} from '../../../store/reducers/authentication/authentication';
 import type {
     PreparedStructurePDisk,
     PreparedStructureVDisk,
@@ -23,7 +22,7 @@ import {cn} from '../../../utils/cn';
 import {DEFAULT_TABLE_SETTINGS} from '../../../utils/constants';
 import {formatStorageValuesToGb} from '../../../utils/dataFormatters/dataFormatters';
 import {createVDiskDeveloperUILink} from '../../../utils/developerUI/developerUI';
-import {useTypedSelector} from '../../../utils/hooks';
+import {useIsUserAllowedToMakeChanges} from '../../../utils/hooks/useIsUserAllowedToMakeChanges';
 import i18n from '../i18n';
 
 import {PDiskTitleBadge} from './PDiskTitleBadge';
@@ -171,7 +170,7 @@ export function PDisk({
     nodeId,
     unfolded: unfoldedFromProps,
 }: PDiskProps) {
-    const isUserAllowedToMakeChanges = useTypedSelector(selectIsUserAllowedToMakeChanges);
+    const isUserAllowedToMakeChanges = useIsUserAllowedToMakeChanges();
 
     const [unfolded, setUnfolded] = React.useState(unfoldedFromProps ?? false);