feat: disable controls for users with viewer rights

src/components/ButtonWithConfirmDialog/ButtonWithConfirmDialog.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import {Button} from '@gravity-ui/uikit';
-import type {ButtonProps} from '@gravity-ui/uikit';
+import {Button, Popover} from '@gravity-ui/uikit';
+import type {ButtonProps, PopoverProps} from '@gravity-ui/uikit';
 
 import {CriticalActionDialog} from '../CriticalActionDialog';
 
@@ -13,6 +13,10 @@ interface ButtonWithConfirmDialogProps<T, K> {
     buttonDisabled?: ButtonProps['disabled'];
     buttonView?: ButtonProps['view'];
     buttonClassName?: ButtonProps['className'];
+    withPopover?: boolean;
+    popoverContent?: PopoverProps['content'];
+    popoverPlacement?: PopoverProps['placement'];
+    popoverDisabled?: PopoverProps['disabled'];
 }
 
 export function ButtonWithConfirmDialog<T, K>({
@@ -23,6 +27,10 @@ export function ButtonWithConfirmDialog<T, K>({
     buttonDisabled = false,
     buttonView = 'action',
     buttonClassName,
+    withPopover = false,
+    popoverContent,
+    popoverPlacement = 'right',
+    popoverDisabled = true,
 }: ButtonWithConfirmDialogProps<T, K>) {
     const [isConfirmDialogVisible, setIsConfirmDialogVisible] = React.useState(false);
     const [buttonLoading, setButtonLoading] = React.useState(false);
@@ -50,6 +58,36 @@ export function ButtonWithConfirmDialog<T, K>({
         setButtonLoading(false);
     };
 
+    const renderButton = () => {
+        return (
+            <Button
+                onClick={() => setIsConfirmDialogVisible(true)}
+                view={buttonView}
+                disabled={buttonDisabled}
+                loading={!buttonDisabled && buttonLoading}
+                className={buttonClassName}
+            >
+                {children}
+            </Button>
+        );
+    };
+
+    const renderContent = () => {
+        if (withPopover) {
+            return (
+                <Popover
+                    content={popoverContent}
+                    placement={popoverPlacement}
+                    disabled={popoverDisabled}
+                >
+                    {renderButton()}
+                </Popover>
+            );
+        }
+
+        return renderButton();
+    };
+
     return (
         <React.Fragment>
             <CriticalActionDialog
@@ -62,15 +100,7 @@ export function ButtonWithConfirmDialog<T, K>({
                     setIsConfirmDialogVisible(false);
                 }}
             />
-            <Button
-                onClick={() => setIsConfirmDialogVisible(true)}
-                view={buttonView}
-                disabled={buttonDisabled}
-                loading={!buttonDisabled && buttonLoading}
-                className={buttonClassName}
-            >
-                {children}
-            </Button>
+            {renderContent()}
         </React.Fragment>
     );
 }

src/containers/PDiskPage/PDiskPage.tsx

@@ -29,6 +29,7 @@ export function PDiskPage() {
     const dispatch = useTypedDispatch();
 
     const nodesMap = useTypedSelector(selectNodesMap);
+    const {isUserAllowedToMakeChanges} = useTypedSelector((state) => state.authentication);
 
     const [{nodeId, pDiskId}] = useQueryParams({
         nodeId: StringParam,
@@ -117,9 +118,12 @@ export function PDiskPage() {
                 <ButtonWithConfirmDialog
                     onConfirmAction={handleRestart}
                     onConfirmActionSuccess={handleAfterRestart}
-                    buttonDisabled={!nodeId || !pDiskId}
+                    buttonDisabled={!nodeId || !pDiskId || !isUserAllowedToMakeChanges}
                     buttonView="normal"
                     dialogContent={pDiskPageKeyset('restart-pdisk-dialog')}
+                    withPopover
+                    popoverContent={pDiskPageKeyset('restart-pdisk-not-allowed')}
+                    popoverDisabled={isUserAllowedToMakeChanges}
                 >
                     <Icon data={ArrowRotateLeft} />
                     {pDiskPageKeyset('restart-pdisk-button')}

src/containers/PDiskPage/i18n/en.json

@@ -5,5 +5,6 @@
   "node": "Node",
 
   "restart-pdisk-button": "Restart PDisk",
-  "restart-pdisk-dialog": "PDisk will be restarted. Do you want to proceed?"
+  "restart-pdisk-dialog": "PDisk will be restarted. Do you want to proceed?",
+  "restart-pdisk-not-allowed": "You don't have enough rights to restart PDisk"
 }

src/containers/Tablet/TabletControls/TabletControls.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import {ButtonWithConfirmDialog} from '../../../components/ButtonWithConfirmDialog/ButtonWithConfirmDialog';
 import {ETabletState} from '../../../types/api/tablet';
 import type {TTabletStateInfo} from '../../../types/api/tablet';
+import {useTypedSelector} from '../../../utils/hooks';
 import {b} from '../Tablet';
 import i18n from '../i18n';
 
@@ -14,6 +15,8 @@ interface TabletControlsProps {
 export const TabletControls = ({tablet, fetchData}: TabletControlsProps) => {
     const {TabletId, HiveId} = tablet;
 
+    const {isUserAllowedToMakeChanges} = useTypedSelector((state) => state.authentication);
+
     const _onKillClick = () => {
         return window.api.killTablet(TabletId);
     };
@@ -43,7 +46,11 @@ export const TabletControls = ({tablet, fetchData}: TabletControlsProps) => {
                 onConfirmAction={_onKillClick}
                 onConfirmActionSuccess={fetchData}
                 buttonClassName={b('control')}
-                buttonDisabled={isDisabledRestart}
+                buttonDisabled={isDisabledRestart || !isUserAllowedToMakeChanges}
+                withPopover
+                popoverContent={i18n('controls.kill-not-allowed')}
+                popoverPlacement={'bottom'}
+                popoverDisabled={isUserAllowedToMakeChanges}
             >
                 {i18n('controls.kill')}
             </ButtonWithConfirmDialog>
@@ -54,7 +61,11 @@ export const TabletControls = ({tablet, fetchData}: TabletControlsProps) => {
                         onConfirmAction={_onStopClick}
                         onConfirmActionSuccess={fetchData}
                         buttonClassName={b('control')}
-                        buttonDisabled={isDisabledStop}
+                        buttonDisabled={isDisabledStop || !isUserAllowedToMakeChanges}
+                        withPopover
+                        popoverContent={i18n('controls.stop-not-allowed')}
+                        popoverPlacement={'bottom'}
+                        popoverDisabled={isUserAllowedToMakeChanges}
                     >
                         {i18n('controls.stop')}
                     </ButtonWithConfirmDialog>
@@ -63,7 +74,11 @@ export const TabletControls = ({tablet, fetchData}: TabletControlsProps) => {
                         onConfirmAction={_onResumeClick}
                         onConfirmActionSuccess={fetchData}
                         buttonClassName={b('control')}
-                        buttonDisabled={isDisabledResume}
+                        buttonDisabled={isDisabledResume || !isUserAllowedToMakeChanges}
+                        withPopover
+                        popoverContent={i18n('controls.resume-not-allowed')}
+                        popoverPlacement={'bottom'}
+                        popoverDisabled={isUserAllowedToMakeChanges}
                     >
                         {i18n('controls.resume')}
                     </ButtonWithConfirmDialog>

src/containers/Tablet/i18n/en.json

@@ -1,10 +1,17 @@
 {
   "tablet.header": "Tablet",
+
   "controls.kill": "Restart",
   "controls.stop": "Stop",
   "controls.resume": "Resume",
+
+  "controls.kill-not-allowed": "You don't have enough rights to restart tablet",
+  "controls.stop-not-allowed": "You don't have enough rights to stop tablet",
+  "controls.resume-not-allowed": "You don't have enough rights to resume tablet",
+
   "dialog.kill": "The tablet will be restarted. Do you want to proceed?",
   "dialog.stop": "The tablet will be stopped. Do you want to proceed?",
   "dialog.resume": "The tablet will be resumed. Do you want to proceed?",
+
   "emptyState": "The tablet was not found"
 }

src/containers/Tablet/i18n/index.ts

@@ -1,8 +1,7 @@
 import {registerKeysets} from '../../../utils/i18n';
 
 import en from './en.json';
-import ru from './ru.json';
 
 const COMPONENT = 'ydb-tablet-page';
 
-export default registerKeysets(COMPONENT, {en, ru});
+export default registerKeysets(COMPONENT, {en});

src/containers/Tablets/Tablets.tsx

@@ -116,6 +116,8 @@ const columns: DataTableColumn<TTabletStateInfo & {fqdn?: string}>[] = [
 function TabletActions(tablet: TTabletStateInfo) {
     const isDisabledRestart = tablet.State === ETabletState.Stopped;
     const dispatch = useTypedDispatch();
+    const {isUserAllowedToMakeChanges} = useTypedSelector((state) => state.authentication);
+
     return (
         <ButtonWithConfirmDialog
             buttonView="outlined"
@@ -126,7 +128,10 @@ function TabletActions(tablet: TTabletStateInfo) {
             onConfirmActionSuccess={() => {
                 dispatch(tabletsApi.util.invalidateTags(['All']));
             }}
-            buttonDisabled={isDisabledRestart}
+            buttonDisabled={isDisabledRestart || !isUserAllowedToMakeChanges}
+            withPopover
+            popoverContent={i18n('controls.kill-not-allowed')}
+            popoverDisabled={isUserAllowedToMakeChanges}
         >
             <Icon data={ArrowsRotateRight} />
         </ButtonWithConfirmDialog>

src/containers/Tablets/i18n/en.json

@@ -7,5 +7,6 @@
   "Node FQDN": "Node FQDN",
   "Generation": "Generation",
   "Uptime": "Uptime",
-  "dialog.kill": "The tablet will be restarted. Do you want to proceed?"
+  "dialog.kill": "The tablet will be restarted. Do you want to proceed?",
+  "controls.kill-not-allowed": "You don't have enough rights to restart tablet"
 }

src/containers/VDiskPage/VDiskPage.tsx

@@ -33,6 +33,7 @@ export function VDiskPage() {
     const dispatch = useTypedDispatch();
 
     const nodesMap = useTypedSelector(selectNodesMap);
+    const {isUserAllowedToMakeChanges} = useTypedSelector((state) => state.authentication);
 
     const [{nodeId, pDiskId, vDiskSlotId}] = useQueryParams({
         nodeId: StringParam,
@@ -129,9 +130,12 @@ export function VDiskPage() {
                 <ButtonWithConfirmDialog
                     onConfirmAction={handleEvictVDisk}
                     onConfirmActionSuccess={handleAfterEvictVDisk}
-                    buttonDisabled={!VDiskId}
+                    buttonDisabled={!VDiskId || !isUserAllowedToMakeChanges}
                     buttonView="normal"
                     dialogContent={vDiskPageKeyset('evict-vdisk-dialog')}
+                    withPopover
+                    popoverContent={vDiskPageKeyset('evict-vdisk-not-allowed')}
+                    popoverDisabled={isUserAllowedToMakeChanges}
                 >
                     <Icon data={ArrowsOppositeToDots} />
                     {vDiskPageKeyset('evict-vdisk-button')}

src/containers/VDiskPage/i18n/en.json

@@ -6,5 +6,6 @@
   "group": "Group",
 
   "evict-vdisk-button": "Evict VDisk",
-  "evict-vdisk-dialog": "VDisk will be evicted. Do you want to proceed?"
+  "evict-vdisk-dialog": "VDisk will be evicted. Do you want to proceed?",
+  "evict-vdisk-not-allowed": "You don't have enough rights to evict VDisk"
 }

src/store/reducers/authentication/authentication.ts

@@ -32,7 +32,13 @@ const authentication: Reducer<AuthenticationState, AuthenticationAction> = (
             return {...state, error: action.error};
         }
         case FETCH_USER.SUCCESS: {
-            return {...state, user: action.data};
+            const {user, isUserAllowedToMakeChanges} = action.data;
+
+            return {
+                ...state,
+                user,
+                isUserAllowedToMakeChanges,
+            };
         }
 
         default:
@@ -59,8 +65,15 @@ export const getUser = () => {
         request: window.api.whoami(),
         actions: FETCH_USER,
         dataHandler: (data) => {
-            const {UserSID, AuthType} = data;
-            return AuthType === 'Login' ? UserSID : undefined;
+            const {UserSID, AuthType, IsMonitoringAllowed} = data;
+            return {
+                user: AuthType === 'Login' ? UserSID : undefined,
+                // If ydb version supports this feature,
+                // There should be explicit flag in whoami response
+                // Otherwise every user is allowed to make changes
+                // Anyway there will be guards on backend
+                isUserAllowedToMakeChanges: IsMonitoringAllowed !== false,
+            };
         },
     });
 };

src/store/reducers/authentication/types.ts

@@ -5,11 +5,16 @@ import type {FETCH_USER, SET_AUTHENTICATED, SET_UNAUTHENTICATED} from './authent
 
 export interface AuthenticationState {
     isAuthenticated: boolean;
+    isUserAllowedToMakeChanges?: boolean;
     user: string | undefined;
     error: AuthErrorResponse | undefined;
 }
 
 export type AuthenticationAction =
     | ApiRequestAction<typeof SET_UNAUTHENTICATED, unknown, unknown>
     | ApiRequestAction<typeof SET_AUTHENTICATED, unknown, AuthErrorResponse>
-    | ApiRequestAction<typeof FETCH_USER, string | undefined, unknown>;
+    | ApiRequestAction<
+          typeof FETCH_USER,
+          {user: string | undefined; isUserAllowedToMakeChanges: boolean},
+          unknown
+      >;

src/types/api/whoami.ts

@@ -8,6 +8,13 @@ export interface TUserToken {
     GroupSIDs?: TProtoHashTable;
     OriginalUserToken?: string;
     AuthType?: string;
+
+    /** Is user allowed to view data */
+    IsViewerAllowed?: boolean;
+    /** Is user allowed to view deeper and make simple changes */
+    IsMonitoringAllowed?: boolean;
+    /** Is user allowed to do unrestricted changes in the system */
+    IsAdministrationAllowed?: boolean;
 }
 
 interface TProtoHashTable {