diff --git a/public/app/core/components/AccessControl/PermissionListItem.tsx b/public/app/core/components/AccessControl/PermissionListItem.tsx
index 77b7e177a2b..0d6eaf15cf7 100644
--- a/public/app/core/components/AccessControl/PermissionListItem.tsx
+++ b/public/app/core/components/AccessControl/PermissionListItem.tsx
@@ -1,6 +1,8 @@
+import { css } from '@emotion/css';
import React from 'react';
-import { Button, Icon, Select, Tooltip } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+import { Box, Button, Icon, Select, Tooltip, useStyles2 } from '@grafana/ui';
import { ResourcePermission } from './types';
@@ -12,42 +14,59 @@ interface Props {
onChange: (item: ResourcePermission, permission: string) => void;
}
-export const PermissionListItem = ({ item, permissionLevels, canSet, onRemove, onChange }: Props) => (
-
- | {getAvatar(item)} |
- {getDescription(item)} |
- {item.isInherited && Inherited from folder} |
-
- |
-
-
-
-
- |
-
- {item.isManaged ? (
- |
+
+ {item.warning ? (
+
+ {item.warning}
+ {getPermissionInfo(item)}
+ >
+ }
+ >
+
+
+ ) : (
+
+
+
+ )}
+ |
+
+ {item.isManaged ? (
+ onRemove(item)}
+ aria-label={`Remove permission for ${getName(item)}`}
+ />
+ ) : (
+
+
+
+ )}
+ |
+
+ );
+};
const getAvatar = (item: ResourcePermission) => {
if (item.teamId) {
@@ -80,3 +99,9 @@ const getDescription = (item: ResourcePermission) => {
};
const getPermissionInfo = (p: ResourcePermission) => `Actions: ${[...new Set(p.actions)].sort().join(' ')}`;
+
+const getStyles = (theme: GrafanaTheme2) => ({
+ warning: css({
+ color: theme.colors.warning.main,
+ }),
+});
diff --git a/public/app/core/components/AccessControl/Permissions.tsx b/public/app/core/components/AccessControl/Permissions.tsx
index fb26d2dde83..2b4f53aa7a3 100644
--- a/public/app/core/components/AccessControl/Permissions.tsx
+++ b/public/app/core/components/AccessControl/Permissions.tsx
@@ -37,6 +37,7 @@ export type Props = {
resource: string;
resourceId: ResourceId;
canSetPermissions: boolean;
+ getWarnings?: (items: ResourcePermission[]) => ResourcePermission[];
};
export const Permissions = ({
@@ -47,15 +48,20 @@ export const Permissions = ({
resourceId,
canSetPermissions,
addPermissionTitle,
+ getWarnings,
}: Props) => {
const styles = useStyles2(getStyles);
const [isAdding, setIsAdding] = useState(false);
const [items, setItems] = useState([]);
const [desc, setDesc] = useState(INITIAL_DESCRIPTION);
- const fetchItems = useCallback(() => {
- return getPermissions(resource, resourceId).then((r) => setItems(r));
- }, [resource, resourceId]);
+ const fetchItems = useCallback(async () => {
+ let items = await getPermissions(resource, resourceId);
+ if (getWarnings) {
+ items = getWarnings(items);
+ }
+ setItems(items);
+ }, [resource, resourceId, getWarnings]);
useEffect(() => {
getDescription(resource).then((r) => {
diff --git a/public/app/core/components/AccessControl/types.ts b/public/app/core/components/AccessControl/types.ts
index e2de980100d..80ceca019bc 100644
--- a/public/app/core/components/AccessControl/types.ts
+++ b/public/app/core/components/AccessControl/types.ts
@@ -13,6 +13,7 @@ export type ResourcePermission = {
builtInRole?: string;
actions: string[];
permission: string;
+ warning?: string;
};
export type SetPermission = {