Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-09 15:05:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

✨ Widget menu in error boundary (#979)

Browse Source
This commit is contained in:
Manuel
2023-05-29 00:24:22 +02:00
committed by GitHub
parent 173b40684c
commit a54f03df1f
5 changed files with 87 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/locales/en/widgets/error-boundary.json
View File

@@ -7,7 +7,7 @@
}
},
"modal": {
"text": "",
"text": "An unexpected error has occurred. Please check your configuration. Please report this issue, if you believe that this is a bug.",
"label": "Your error",
"reportButton": "Report this error"
}

10
src/components/Dashboard/Tiles/GenericTileMenu.tsx
View File

@@ -26,7 +26,15 @@ export const GenericTileMenu = ({
return (
<Menu withinPortal withArrow position="right">
<Menu.Target>
<ActionIcon size="md" radius="md" variant="light" pos="absolute" top={8} right={8}>
<ActionIcon
size="md"
radius="md"
variant="light"
pos="absolute"
top={8}
right={8}
style={{ zIndex: 1 }}
>
<IconDots />
</ActionIcon>
</Menu.Target>

2
src/widgets/WidgetWrapper.tsx
View File

@@ -39,7 +39,7 @@ export const WidgetWrapper = ({
const widgetWithDefaultProps = useWidget(widget);
return (
<ErrorBoundary>
<ErrorBoundary integration={widgetType} widget={widgetWithDefaultProps}>
<HomarrCardWrapper className={className}>
<WidgetsMenu integration={widgetType} widget={widgetWithDefaultProps} />
<WidgetComponent widget={widgetWithDefaultProps} />

140
src/widgets/boundary.tsx
View File

@@ -2,8 +2,10 @@ import Consola from 'consola';
import React, { ReactNode } from 'react';
import { openModal } from '@mantine/modals';
import { withTranslation } from 'next-i18next';
import { Button, Card, Center, Code, Group, Stack, Text, Title } from '@mantine/core';
import { Button, Card, Center, Code, Group, ScrollArea, Stack, Text, Title } from '@mantine/core';
import { IconBrandGithub, IconBug, IconInfoCircle, IconRefresh } from '@tabler/icons-react';
import { WidgetsMenu } from '../components/Dashboard/Tiles/Widgets/WidgetsMenu';
import { IWidget } from './widgets';
type ErrorBoundaryState = {
hasError: boolean;
@@ -13,6 +15,8 @@ type ErrorBoundaryState = {
type ErrorBoundaryProps = {
t: (key: string) => string;
children: ReactNode;
integration: string;
widget: IWidget<string, any>;
};
/**
@@ -48,73 +52,77 @@ class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundarySta
radius="lg"
shadow="sm"
withBorder
h="calc(100% - 20px)"
>
<Center>
<Stack align="center">
<IconBug color="white" />
<Stack spacing={0} align="center">
<Title order={4} color="white" align="center">
{this.props.t('card.title')}
</Title>
{this.state.error && (
<Text color="white" align="center" size="sm">
{this.state.error.toString()}
</Text>
)}
<WidgetsMenu integration={this.props.integration} widget={this.props.widget} />
<ScrollArea h="100%" type="auto" offsetScrollbars>
<Center>
<Stack align="center" spacing="xs">
<IconBug color="white" />
<Stack spacing={0} align="center">
<Title order={5} color="white" align="center">
{this.props.t('card.title')}
</Title>
{this.state.error && (
<Text color="white" align="center" size="sm">
{this.state.error.toString()}
</Text>
)}
</Stack>
<Group spacing="xs">
<Button
onClick={() =>
openModal({
title: 'Your widget had an error',
children: (
<>
<Text size="sm" mb="sm">
{this.props.t('modal.text')}
</Text>
{this.state.error && (
<>
<Text weight="bold" size="sm">
{this.props.t('modal.label')}
</Text>
<Code block>{this.state.error.toString()}</Code>
</>
)}
<Button
sx={(theme) => ({
backgroundColor: theme.colors.gray[8],
'&:hover': {
backgroundColor: theme.colors.gray[9],
},
})}
leftIcon={<IconBrandGithub />}
component="a"
href="https://github.com/ajnart/homarr/issues/new?assignees=&labels=%F0%9F%90%9B+Bug&template=bug.yml&title=New%20bug"
target="_blank"
mt="md"
fullWidth
>
{this.props.t('modal.reportButton')}
</Button>
</>
),
})
}
leftIcon={<IconInfoCircle size={16} />}
variant="light"
>
{this.props.t('card.buttons.details')}
</Button>
<Button
onClick={() => this.setState({ hasError: false })}
leftIcon={<IconRefresh size={16} />}
variant="light"
>
{this.props.t('card.buttons.tryAgain')}
</Button>
</Group>
</Stack>
<Group>
<Button
onClick={() =>
openModal({
title: 'Your widget had an error',
children: (
<>
<Text size="sm" mb="sm">
{this.props.t('modal.text')}
</Text>
{this.state.error && (
<>
<Text weight="bold" size="sm">
{this.props.t('modal.label')}
</Text>
<Code block>{this.state.error.toString()}</Code>
</>
)}
<Button
sx={(theme) => ({
backgroundColor: theme.colors.gray[8],
'&:hover': {
backgroundColor: theme.colors.gray[9],
},
})}
leftIcon={<IconBrandGithub />}
component="a"
href="https://github.com/ajnart/homarr/issues/new?assignees=&labels=%F0%9F%90%9B+Bug&template=bug.yml&title=New%20bug"
target="_blank"
mt="md"
fullWidth
>
{this.props.t('modal.reportButton')}
</Button>
</>
),
})
}
leftIcon={<IconInfoCircle size={16} />}
variant="light"
>
{this.props.t('card.buttons.details')}
</Button>
<Button
onClick={() => this.setState({ hasError: false })}
leftIcon={<IconRefresh size={16} />}
variant="light"
>
{this.props.t('card.buttons.tryAgain')}
</Button>
</Group>
</Stack>
</Center>
</Center>
</ScrollArea>
</Card>
);
}

2
src/widgets/date/DateTile.tsx
View File

@@ -34,7 +34,7 @@ interface DateTileProps {
function DateTile({ widget }: DateTileProps) {
const date = useDateState();
const formatString = widget.properties.display24HourFormat ? 'HH:mm' : 'h:mm A';
const { width, height, ref } = useElementSize();
const { width, ref } = useElementSize();
return (
<Stack ref={ref} spacing="xs" justify="space-around" align="center" style={{ height: '100%' }}>