fix: hide dev ui links for users with viewer rights (#1824)

Author: artemmufazalov

src/components/BasicNodeViewer/BasicNodeViewer.tsx

@@ -3,13 +3,15 @@ import React from 'react';
 import {ArrowUpRightFromSquare} from '@gravity-ui/icons';
 import {Icon} from '@gravity-ui/uikit';
 
+import {selectIsUserAllowedToMakeChanges} from '../../store/reducers/authentication/authentication';
 import type {PreparedNode} from '../../store/reducers/node/types';
 import type {AdditionalNodesProps} from '../../types/additionalProps';
 import {cn} from '../../utils/cn';
 import {
     createDeveloperUIInternalPageHref,
     createDeveloperUILinkWithNodeId,
 } from '../../utils/developerUI/developerUI';
+import {useTypedSelector} from '../../utils/hooks';
 import {EntityStatus} from '../EntityStatus/EntityStatus';
 import {Tags} from '../Tags';
 
@@ -24,6 +26,8 @@ interface BasicNodeViewerProps {
 }
 
 export const BasicNodeViewer = ({node, additionalNodesProps, className}: BasicNodeViewerProps) => {
+    const isUserAllowedToMakeChanges = useTypedSelector(selectIsUserAllowedToMakeChanges);
+
     let developerUIInternalHref: string | undefined;
 
     if (additionalNodesProps?.getNodeRef) {
@@ -42,7 +46,7 @@ export const BasicNodeViewer = ({node, additionalNodesProps, className}: BasicNo
                 <React.Fragment>
                     <div className={b('title')}>Node</div>
                     <EntityStatus status={node.SystemState} name={node.Host} />
-                    {developerUIInternalHref && (
+                    {developerUIInternalHref && isUserAllowedToMakeChanges ? (
                         <a
                             rel="noopener noreferrer"
                             className={b('link', {external: true})}
@@ -51,7 +55,7 @@ export const BasicNodeViewer = ({node, additionalNodesProps, className}: BasicNo
                         >
                             <Icon data={ArrowUpRightFromSquare} />
                         </a>
-                    )}
+                    ) : null}
 
                     <div className={b('id')}>
                         <label className={b('label')}>NodeID</label>

src/containers/Header/Header.tsx

@@ -4,6 +4,7 @@ import {Breadcrumbs} from '@gravity-ui/uikit';
 
 import {InternalLink} from '../../components/InternalLink';
 import {LinkWithIcon} from '../../components/LinkWithIcon/LinkWithIcon';
+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';
@@ -23,6 +24,7 @@ interface HeaderProps {
 
 function Header({mainPage}: HeaderProps) {
     const {page, pageBreadcrumbsOptions} = useTypedSelector((state) => state.header);
+    const isUserAllowedToMakeChanges = useTypedSelector(selectIsUserAllowedToMakeChanges);
 
     const clusterInfo = useClusterBaseInfo();
 
@@ -78,10 +80,12 @@ function Header({mainPage}: HeaderProps) {
                     }}
                 />
 
-                <LinkWithIcon
-                    title={DEVELOPER_UI_TITLE}
-                    url={createDeveloperUIInternalPageHref()}
-                />
+                {isUserAllowedToMakeChanges ? (
+                    <LinkWithIcon
+                        title={DEVELOPER_UI_TITLE}
+                        url={createDeveloperUIInternalPageHref()}
+                    />
+                ) : null}
             </header>
         );
     };

src/containers/Node/NodeStructure/Pdisk.tsx

@@ -10,6 +10,7 @@ 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,
@@ -22,6 +23,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 i18n from '../i18n';
 
 import {PDiskTitleBadge} from './PDiskTitleBadge';
@@ -56,10 +58,12 @@ function getColumns({
     pDiskId,
     selectedVdiskId,
     nodeId,
+    withDeveloperUILink,
 }: {
     pDiskId: number | undefined;
     selectedVdiskId?: string;
     nodeId?: string | number;
+    withDeveloperUILink?: boolean;
 }) {
     const columns: Column<PreparedStructureVDisk>[] = [
         {
@@ -85,7 +89,7 @@ function getColumns({
                 return (
                     <div className={b('vdisk-id', {selected: row.id === selectedVdiskId})}>
                         <span>{vDiskSlotId}</span>
-                        {vdiskInternalViewerLink && (
+                        {vdiskInternalViewerLink && withDeveloperUILink ? (
                             <Button
                                 size="s"
                                 className={b('external-button', {hidden: true})}
@@ -95,7 +99,7 @@ function getColumns({
                             >
                                 <Icon data={ArrowUpRightFromSquare} />
                             </Button>
-                        )}
+                        ) : null}
                     </div>
                 );
             },
@@ -167,6 +171,8 @@ export function PDisk({
     nodeId,
     unfolded: unfoldedFromProps,
 }: PDiskProps) {
+    const isUserAllowedToMakeChanges = useTypedSelector(selectIsUserAllowedToMakeChanges);
+
     const [unfolded, setUnfolded] = React.useState(unfoldedFromProps ?? false);
 
     const {TotalSize = 0, AvailableSize = 0, Device, PDiskId, Type, vDisks} = data;
@@ -186,7 +192,12 @@ export function PDisk({
             <DataTable
                 theme="yandex-cloud"
                 data={vDisks}
-                columns={getColumns({nodeId, pDiskId: PDiskId, selectedVdiskId})}
+                columns={getColumns({
+                    nodeId,
+                    pDiskId: PDiskId,
+                    selectedVdiskId,
+                    withDeveloperUILink: isUserAllowedToMakeChanges,
+                })}
                 settings={{...DEFAULT_TABLE_SETTINGS, dynamicRender: false}}
                 rowClassName={(row) => {
                     return row.id === selectedVdiskId ? b('selected-vdisk') : '';