fix: hide dev ui links for users with viewer rights

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>
         );
     };