✨ Widget menu in error boundary (#979)

public/locales/en/widgets/error-boundary.json

@@ -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"
   }

src/components/Dashboard/Tiles/GenericTileMenu.tsx

@@ -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>

src/widgets/WidgetWrapper.tsx

@@ -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} />

src/widgets/boundary.tsx

@@ -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>
+          <WidgetsMenu integration={this.props.integration} widget={this.props.widget} />
-            <Stack align="center">
+          <ScrollArea h="100%" type="auto" offsetScrollbars>
-              <IconBug color="white" />
+            <Center>
-              <Stack spacing={0} align="center">
+              <Stack align="center" spacing="xs">
-                <Title order={4} color="white" align="center">
+                <IconBug color="white" />
-                  {this.props.t('card.title')}
+                <Stack spacing={0} align="center">
-                </Title>
+                  <Title order={5} color="white" align="center">
-                {this.state.error && (
+                    {this.props.t('card.title')}
-                  <Text color="white" align="center" size="sm">
+                  </Title>
-                    {this.state.error.toString()}
+                  {this.state.error && (
-                  </Text>
+                    <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>
+            </Center>
-                <Button
+          </ScrollArea>
-                  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>
         </Card>
       );
     }

src/widgets/date/DateTile.tsx

@@ -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%' }}>