inventree/InvenTree
2
0
Fork 0
mirror of https://github.com/inventree/InvenTree.git synced 2025-05-11 09:48:50 +00:00
Code

Adjust layout of warning / error messages (#9484)

Browse Source
This commit is contained in:
Oliver 2025-04-10 06:49:00 +10:00 committed by GitHub
parent bb1faf236a
commit 4ea8f68819
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/frontend/src/components/nav/Alerts.tsx
View File

@ -1,4 +1,4 @@
import { ActionIcon, Alert, Menu, Tooltip } from '@mantine/core'; import { ActionIcon, Alert, Group, Menu, Stack, Tooltip } from '@mantine/core';
import { IconExclamationCircle } from '@tabler/icons-react'; import { IconExclamationCircle } from '@tabler/icons-react';
import { useMemo, useState } from 'react'; import { useMemo, useState } from 'react';
@ -13,6 +13,7 @@ interface AlertInfo {
title: string; title: string;
code?: string; code?: string;
message: string; message: string;
error?: boolean;
} }
/** /**
@ -84,6 +85,11 @@ export function Alerts() {
return _alerts.filter((alert) => !dismissed.includes(alert.key)); return _alerts.filter((alert) => !dismissed.includes(alert.key));
}, [server, dismissed, globalSettings]); }, [server, dismissed, globalSettings]);
const anyErrors: boolean = useMemo(
() => alerts.some((alert) => alert.error),
[alerts]
);
if (user.isStaff() && alerts.length > 0) if (user.isStaff() && alerts.length > 0)
return ( return (
<Menu withinPortal={true} position='bottom-end'> <Menu withinPortal={true} position='bottom-end'>
@ -92,7 +98,7 @@ export function Alerts() {
<ActionIcon <ActionIcon
variant='transparent' variant='transparent'
aria-label='open-alerts' aria-label='open-alerts'
color='red' color={anyErrors ? 'red' : 'orange'}
> >
<IconExclamationCircle /> <IconExclamationCircle />
</ActionIcon> </ActionIcon>
@ -103,12 +109,19 @@ export function Alerts() {
<Menu.Item key={`alert-item-${alert.key}`}> <Menu.Item key={`alert-item-${alert.key}`}>
<Alert <Alert
withCloseButton withCloseButton
color='red' color={alert.error ? 'red' : 'orange'}
title={alert.title} title={
<Group gap='xs'>
{alert.code && `${alert.code}: `}
{alert.title}
</Group>
}
onClose={() => setDismissed([...dismissed, alert.key])} onClose={() => setDismissed([...dismissed, alert.key])}
> >
{alert.message} <Stack gap='xs'>
{alert.code && errorCodeLink(alert.code)} {alert.message}
{alert.code && errorCodeLink(alert.code)}
</Stack>
</Alert> </Alert>
</Menu.Item> </Menu.Item>
))} ))}