diff --git a/src/custom/permissions.tsx b/src/custom/permissions.tsx index c809673e3..5b277bfbb 100644 --- a/src/custom/permissions.tsx +++ b/src/custom/permissions.tsx @@ -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 }; @@ -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'; + export type InvertAction = 'disable' | 'hide'; // These two reason events are published onto whichever bus the caller supplies, @@ -283,10 +290,13 @@ export const PermissionShield: React.FC = ({ }} > {userContext.userName && ( - - - User - + + + + + User + + = ({ )} - - - Org - + + + + + Org + + = ({ {userContext.orgName || 'Private Org'} - - - Role(s) - + + + + + Role(s) + + = ({ position: 'relative', display: isBadge ? 'inline-flex' : 'flex', width: isBadge ? 'auto' : '100%', - alignItems: 'center' + alignItems: 'center', + cursor: 'not-allowed' }} > {children} @@ -390,8 +407,8 @@ export const PermissionShield: React.FC = ({ isBadge ? { position: 'absolute', - top: -6, - right: -6, + bottom: -6, + left: -6, backgroundColor: 'rgba(30, 30, 30, 0.9)', color: '#808080', borderRadius: '50%', diff --git a/src/icons/OrgHierarchy/OrgHierarchyIcon.tsx b/src/icons/OrgHierarchy/OrgHierarchyIcon.tsx new file mode 100644 index 000000000..45f0ebc2a --- /dev/null +++ b/src/icons/OrgHierarchy/OrgHierarchyIcon.tsx @@ -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 = ({ + width = DEFAULT_WIDTH, + height = DEFAULT_HEIGHT, + fill = DEFAULT_FILL, + primaryFill = DEFAULT_PRIMARY_FILL, + secondaryFill = KEPPEL_GREEN_FILL, + style, + ...props +}) => ( + + + + + + + + + + + +); + +export default OrgHierarchyIcon; diff --git a/src/icons/OrgHierarchy/index.ts b/src/icons/OrgHierarchy/index.ts new file mode 100644 index 000000000..395dc4c49 --- /dev/null +++ b/src/icons/OrgHierarchy/index.ts @@ -0,0 +1 @@ +export { default as OrgHierarchyIcon } from './OrgHierarchyIcon'; diff --git a/src/icons/RoleKey/RoleKeyIcon.tsx b/src/icons/RoleKey/RoleKeyIcon.tsx new file mode 100644 index 000000000..840684c41 --- /dev/null +++ b/src/icons/RoleKey/RoleKeyIcon.tsx @@ -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 = ({ + width = DEFAULT_WIDTH, + height = DEFAULT_HEIGHT, + fill = DEFAULT_FILL, + secondaryFill = KEPPEL_GREEN_FILL, + style, + ...props +}) => ( + + + + +); + +export default RoleKeyIcon; diff --git a/src/icons/RoleKey/index.ts b/src/icons/RoleKey/index.ts new file mode 100644 index 000000000..ab658deef --- /dev/null +++ b/src/icons/RoleKey/index.ts @@ -0,0 +1 @@ +export { default as RoleKeyIcon } from './RoleKeyIcon'; diff --git a/src/icons/Users/UsersIcon.tsx b/src/icons/Users/UsersIcon.tsx new file mode 100644 index 000000000..cc6612dd1 --- /dev/null +++ b/src/icons/Users/UsersIcon.tsx @@ -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 = ({ + width = DEFAULT_WIDTH, + height = DEFAULT_HEIGHT, + primaryFill = DEFAULT_PRIMARY_FILL, + secondaryFill = KEPPEL_GREEN_FILL, + style, + ...props +}) => ( + + + + +); + +export default UsersIcon; diff --git a/src/icons/Users/index.ts b/src/icons/Users/index.ts new file mode 100644 index 000000000..06d9b8751 --- /dev/null +++ b/src/icons/Users/index.ts @@ -0,0 +1 @@ +export { default as UsersIcon } from './UsersIcon'; diff --git a/src/icons/index.ts b/src/icons/index.ts index b0f87d1bd..8299cb93e 100644 --- a/src/icons/index.ts +++ b/src/icons/index.ts @@ -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'; @@ -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'; @@ -208,3 +210,4 @@ export * from './Workspace'; export * from './Zoom'; export * from './Checkbox'; export * from './Security'; +export * from './Users';