Skip to content

feat(PermissionShield): add context icons, bottom-left badge placement, and disabled hover cursor #1756

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
banana-three-join merged 1 commit into from
Jul 27, 2026
Merged

feat(PermissionShield): add context icons, bottom-left badge placement, and disabled hover cursor #1756

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 32 additions & 15 deletions src/custom/permissions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@ import type {
} from '../actors/mesheryExtensionContract';
import { MESHERY_EXTENSION_EVENT } from '../actors/mesheryExtensionContract';
import { Box, Chip, ClickAwayListener, Link, Tooltip, Typography } from '../base';
import { OrgHierarchyIcon } from '../icons/OrgHierarchy';
import { RoleKeyIcon } from '../icons/RoleKey';
import { UsersIcon } from '../icons/Users';
import { usePermissionUserContext } from './PermissionProvider';
export type { Key };

Expand All @@ -18,6 +21,10 @@ const DIVIDER_SX = {
my: 1.25
};

/** Monochrome fill used for tooltip-context icons */
const CONTEXT_ICON_COLOR = '#9E9E9E';
const CONTEXT_ICON_SIZE = '14';
Comment on lines +24 to +26

@coderabbitai coderabbitai Bot Jul 27, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

Resolve the tooltip icon color from the active theme.

CONTEXT_ICON_COLOR hard-codes #9E9E9E and is passed to all three new icons. Derive this value from the Sistent theme’s semantic secondary-text/icon token at render time so custom and light/dark themes remain consistent.

As per coding guidelines, theme-aware UI must use Sistent theme exports and semantic palette tokens rather than raw MUI defaults.

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/custom/permissions.tsx` around lines 24 - 26, Update CONTEXT_ICON_COLOR
usage in the tooltip icon rendering to resolve the active Sistent theme’s
semantic secondary-text/icon token at render time instead of using the
hard-coded `#9E9E9E` value. Use the existing Sistent theme exports and pass the
resolved color to all three icons, preserving CONTEXT_ICON_SIZE.

Source: Coding guidelines


export type InvertAction = 'disable' | 'hide';

// These two reason events are published onto whichever bus the caller supplies,
Expand Down Expand Up @@ -283,10 +290,13 @@ export const PermissionShield: React.FC<PermissionShieldProps> = ({
}}
>
{userContext.userName && (
<Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 1 }}>
<Typography sx={{ fontSize: '0.68rem', color: '#9E9E9E', fontWeight: 500 }}>
User
</Typography>
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 1 }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
<UsersIcon width={CONTEXT_ICON_SIZE} height={CONTEXT_ICON_SIZE} primaryFill={CONTEXT_ICON_COLOR} secondaryFill={CONTEXT_ICON_COLOR} style={{ flexShrink: 0 }} />
<Typography sx={{ fontSize: '0.68rem', color: '#9E9E9E', fontWeight: 500 }}>
User
</Typography>
</Box>
<Typography
sx={{
fontSize: '0.72rem',
Expand All @@ -299,10 +309,13 @@ export const PermissionShield: React.FC<PermissionShieldProps> = ({
</Typography>
</Box>
)}
<Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 1 }}>
<Typography sx={{ fontSize: '0.68rem', color: '#9E9E9E', fontWeight: 500 }}>
Org
</Typography>
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 1 }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
<OrgHierarchyIcon width={CONTEXT_ICON_SIZE} height={CONTEXT_ICON_SIZE} fill={CONTEXT_ICON_COLOR} primaryFill={CONTEXT_ICON_COLOR} secondaryFill={CONTEXT_ICON_COLOR} style={{ flexShrink: 0 }} />
<Typography sx={{ fontSize: '0.68rem', color: '#9E9E9E', fontWeight: 500 }}>
Org
</Typography>
</Box>
<Typography
sx={{
fontSize: '0.72rem',
Expand All @@ -314,10 +327,13 @@ export const PermissionShield: React.FC<PermissionShieldProps> = ({
{userContext.orgName || 'Private Org'}
</Typography>
</Box>
<Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 1 }}>
<Typography sx={{ fontSize: '0.68rem', color: '#9E9E9E', fontWeight: 500 }}>
Role(s)
</Typography>
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 1 }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
<RoleKeyIcon width={CONTEXT_ICON_SIZE} height={CONTEXT_ICON_SIZE} fill={CONTEXT_ICON_COLOR} secondaryFill={CONTEXT_ICON_COLOR} style={{ flexShrink: 0 }} />
<Typography sx={{ fontSize: '0.68rem', color: '#9E9E9E', fontWeight: 500 }}>
Role(s)
</Typography>
</Box>
<Typography
sx={{
fontSize: '0.72rem',
Expand Down Expand Up @@ -356,7 +372,8 @@ export const PermissionShield: React.FC<PermissionShieldProps> = ({
position: 'relative',
display: isBadge ? 'inline-flex' : 'flex',
width: isBadge ? 'auto' : '100%',
alignItems: 'center'
alignItems: 'center',
cursor: 'not-allowed'
}}
>
<Box sx={{ width: '100%', opacity: 0.5, pointerEvents: 'none' }}>{children}</Box>
Expand Down Expand Up @@ -390,8 +407,8 @@ export const PermissionShield: React.FC<PermissionShieldProps> = ({
isBadge
? {
position: 'absolute',
top: -6,
right: -6,
bottom: -6,
left: -6,
backgroundColor: 'rgba(30, 30, 30, 0.9)',
color: '#808080',
borderRadius: '50%',
Expand Down
49 changes: 49 additions & 0 deletions src/icons/OrgHierarchy/OrgHierarchyIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import { FC } from 'react';
import { DEFAULT_HEIGHT, DEFAULT_WIDTH, DEFAULT_FILL, KEPPEL_GREEN_FILL } from '../../constants/constants';
import { CustomIconProps } from '../types';

const DEFAULT_PRIMARY_FILL = '#51636B';

export const OrgHierarchyIcon: FC<CustomIconProps> = ({
width = DEFAULT_WIDTH,
height = DEFAULT_HEIGHT,
fill = DEFAULT_FILL,
primaryFill = DEFAULT_PRIMARY_FILL,
secondaryFill = KEPPEL_GREEN_FILL,
style,
...props
}) => (
<svg
style={style}
xmlns="http://www.w3.org/2000/svg"
height={height}
viewBox="0 0 18 17"
width={width}
fill={fill}
{...props}
>
<path
d="M5.58621 15.9445V16.7425H0V15.9445C0 15.9445 0 14.3485 2.7931 14.3485C5.58621 14.3485 5.58621 15.9445 5.58621 15.9445ZM4.18966 12.1539C4.18966 11.8777 4.10775 11.6077 3.95429 11.378C3.80084 11.1483 3.58273 10.9693 3.32754 10.8636C3.07235 10.7579 2.79155 10.7303 2.52065 10.7842C2.24975 10.838 2.0009 10.9711 1.80559 11.1664C1.61028 11.3617 1.47727 11.6105 1.42339 11.8814C1.3695 12.1523 1.39716 12.4331 1.50286 12.6883C1.60856 12.9435 1.78756 13.1616 2.01722 13.3151C2.24688 13.4685 2.51689 13.5504 2.7931 13.5504C3.16349 13.5504 3.51871 13.4033 3.78061 13.1414C4.04252 12.8795 4.18966 12.5243 4.18966 12.1539Z"
fill={fill}
/>
<path
d="M11.7932 15.9445V16.7425H6.20703V15.9445C6.20703 15.9445 6.20703 14.3485 9.00013 14.3485C11.7932 14.3485 11.7932 15.9445 11.7932 15.9445ZM10.3967 12.1539C10.3967 11.8777 10.3148 11.6077 10.1613 11.378C10.0079 11.1483 9.78976 10.9693 9.53457 10.8636C9.27939 10.7579 8.99859 10.7303 8.72768 10.7842C8.45678 10.838 8.20793 10.9711 8.01262 11.1664C7.81731 11.3617 7.6843 11.6105 7.63042 11.8814C7.57653 12.1523 7.60419 12.4331 7.70989 12.6883C7.81559 12.9435 7.99459 13.1616 8.22425 13.3151C8.45391 13.4685 8.72392 13.5504 9.00013 13.5504C9.37052 13.5504 9.72574 13.4033 9.98765 13.1414C10.2496 12.8795 10.3967 12.5243 10.3967 12.1539Z"
fill={secondaryFill}
/>
<path
d="M18.0003 15.9445V16.7425H12.4141V15.9445C12.4141 15.9445 12.4141 14.3485 15.2072 14.3485C18.0003 14.3485 18.0003 15.9445 18.0003 15.9445ZM16.6037 12.1539C16.6037 11.8777 16.5218 11.6077 16.3684 11.378C16.2149 11.1483 15.9968 10.9693 15.7416 10.8636C15.4864 10.7579 15.2056 10.7303 14.9347 10.7842C14.6638 10.838 14.415 10.9711 14.2197 11.1664C14.0243 11.3617 13.8913 11.6105 13.8374 11.8814C13.7836 12.1523 13.8112 12.4331 13.9169 12.6883C14.0226 12.9435 14.2016 13.1616 14.4313 13.3151C14.6609 13.4685 14.931 13.5504 15.2072 13.5504C15.5776 13.5504 15.9328 13.4033 16.1947 13.1414C16.4566 12.8795 16.6037 12.5243 16.6037 12.1539Z"
fill={fill}
/>
<path
d="M12.1502 6.40511V7.35092H5.5V6.40511C5.5 6.40511 5.5 4.51348 8.82512 4.51348C12.1502 4.51348 12.1502 6.40511 12.1502 6.40511ZM10.4877 1.9125C10.4877 1.58514 10.3902 1.26512 10.2075 0.992933C10.0248 0.720741 9.76515 0.508594 9.46136 0.383317C9.15756 0.258041 8.82328 0.225263 8.50077 0.289129C8.17827 0.352994 7.88203 0.510634 7.64951 0.742114C7.417 0.973594 7.25866 1.26852 7.19451 1.58959C7.13036 1.91066 7.16328 2.24346 7.28912 2.5459C7.41495 2.84835 7.62805 3.10685 7.90145 3.28872C8.17486 3.4706 8.4963 3.56767 8.82512 3.56767C9.26606 3.56767 9.68894 3.39329 10.0007 3.08288C10.3125 2.77248 10.4877 2.35148 10.4877 1.9125Z"
fill={fill}
/>
<line x1="9" y1="8.25732" x2="9" y2="10.2573" stroke={primaryFill} />
<line x1="15.25" y1="8.25732" x2="15.25" y2="10.2573" stroke={primaryFill} />
<line x1="2.75" y1="8.25732" x2="2.75" y2="10.2573" stroke={primaryFill} />
<line x1="3" y1="8.75732" x2="9" y2="8.75733" stroke={primaryFill} />
<line x1="9.25" y1="8.75732" x2="15.25" y2="8.75733" stroke={primaryFill} />
</svg>
);

export default OrgHierarchyIcon;
1 change: 1 addition & 0 deletions src/icons/OrgHierarchy/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default as OrgHierarchyIcon } from './OrgHierarchyIcon';
33 changes: 33 additions & 0 deletions src/icons/RoleKey/RoleKeyIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { FC } from 'react';
import { DEFAULT_HEIGHT, DEFAULT_WIDTH, DEFAULT_FILL, KEPPEL_GREEN_FILL } from '../../constants/constants';
import { CustomIconProps } from '../types';

export const RoleKeyIcon: FC<CustomIconProps> = ({
width = DEFAULT_WIDTH,
height = DEFAULT_HEIGHT,
fill = DEFAULT_FILL,
secondaryFill = KEPPEL_GREEN_FILL,
style,
...props
}) => (
<svg
style={style}
xmlns="http://www.w3.org/2000/svg"
height={height}
viewBox="0 0 18 19"
width={width}
fill={fill}
{...props}
>
<path
d="M12.5 10.5C13.8805 10.5 15 11.6195 15 13C15 13.1565 14.9855 13.3095 14.958 13.458L18 16.5V18C18 18.276 17.776 18.5 17.5 18.5H17V18H16V17H15V16H14L13.351 15.351C13.0855 15.447 12.7985 15.5 12.5 15.5C11.1195 15.5 10 14.3805 10 13C10 11.6195 11.1195 10.5 12.5 10.5ZM11.751 13.001C12.165 13.001 12.501 12.665 12.501 12.251C12.501 11.837 12.165 11.501 11.751 11.501C11.337 11.501 11.001 11.837 11.001 12.251C11.001 12.665 11.337 13.001 11.751 13.001Z"
fill={secondaryFill}
/>
<path
d="M9.02944 0.5C10.2268 0.5 11.3752 0.966785 12.2218 1.79767C13.0685 2.62855 13.5442 3.75547 13.5442 4.93052C13.5442 6.10556 13.0685 7.23248 12.2218 8.06336C11.3752 8.89425 10.2268 9.36103 9.02944 9.36103C7.83206 9.36103 6.68373 8.89425 5.83705 8.06336C4.99038 7.23248 4.51472 6.10556 4.51472 4.93052C4.51472 3.75547 4.99038 2.62855 5.83705 1.79767C6.68373 0.966785 7.83206 0.5 9.02944 0.5ZM9.02944 11.5763C9.78946 11.5763 8 15 11.5 16.5L13 18.2221H0V16.0068C0 13.5589 4.04068 11.5763 9.02944 11.5763Z"
fill={fill}
/>
</svg>
);

export default RoleKeyIcon;
1 change: 1 addition & 0 deletions src/icons/RoleKey/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default as RoleKeyIcon } from './RoleKeyIcon';
35 changes: 35 additions & 0 deletions src/icons/Users/UsersIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { FC } from 'react';
import { DEFAULT_HEIGHT, DEFAULT_WIDTH, KEPPEL_GREEN_FILL } from '../../constants/constants';
import { CustomIconProps } from '../types';

const DEFAULT_PRIMARY_FILL = '#51636B';

export const UsersIcon: FC<CustomIconProps> = ({
width = DEFAULT_WIDTH,
height = DEFAULT_HEIGHT,
primaryFill = DEFAULT_PRIMARY_FILL,
secondaryFill = KEPPEL_GREEN_FILL,
style,
...props
}) => (
<svg
style={style}
xmlns="http://www.w3.org/2000/svg"
height={height}
viewBox="0 0 18 18"
width={width}
fill={primaryFill}
{...props}
>
<path
fill={primaryFill}
d="M12.6,13.9v1.8H0v-1.8c0,0,0-3.6,6.3-3.6S12.6,13.9,12.6,13.9z M9.4,5.4c0-0.6-0.2-1.2-0.5-1.8C8.6,3.1,8.1,2.7,7.5,2.5C6.9,2.3,6.3,2.2,5.7,2.3C5.1,2.4,4.5,2.7,4.1,3.2c-0.4,0.4-0.7,1-0.9,1.6C3.1,5.4,3.2,6,3.4,6.6S4,7.7,4.5,8c0.5,0.3,1.1,0.5,1.8,0.5c0.8,0,1.6-0.3,2.2-0.9C9.1,7,9.4,6.2,9.4,5.4z"
/>
<path
fill={secondaryFill}
d="M12.5,10.4c0.6,0.4,1,1,1.3,1.6c0.3,0.6,0.5,1.3,0.5,2v1.8H18v-1.8C18,13.9,18,10.7,12.5,10.4z M11.7,2.3c-0.6,0-1.2,0.2-1.7,0.5c0.5,0.8,0.8,1.7,0.8,2.6c0,0.9-0.3,1.9-0.8,2.6c0.5,0.3,1.1,0.5,1.7,0.5c0.8,0,1.6-0.3,2.2-0.9c0.6-0.6,0.9-1.4,0.9-2.2s-0.3-1.6-0.9-2.2C13.3,2.6,12.5,2.3,11.7,2.3z"
/>
</svg>
);

export default UsersIcon;
1 change: 1 addition & 0 deletions src/icons/Users/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default as UsersIcon } from './UsersIcon';
3 changes: 3 additions & 0 deletions src/icons/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,7 @@ export * from './MoveFile';
export * from './Open';
export * from './OpenInNew';
export * from './Organization';
export * from './OrgHierarchy';
export { default as OriginalApplicationFileIcon } from './OriginalApplicationFileIcon';
export * from './PanelDragHandle';
export * from './PanTool';
Expand All @@ -165,6 +166,7 @@ export * from './Resize';
export * from './Response';
export * from './RightArrow';
export * from './Ring';
export * from './RoleKey';
export * from './Save';
export * from './Science';
export * from './Screenshot';
Expand Down Expand Up @@ -208,3 +210,4 @@ export * from './Workspace';
export * from './Zoom';
export * from './Checkbox';
export * from './Security';
export * from './Users';
Loading