🔀 Merge branch 'dev' into tests/add-tests

src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx

@@ -1,18 +1,20 @@
+import { ActionIcon, Button, Group, Text, Title, Tooltip } from '@mantine/core';
+import { useHotkeys, useWindowEvent } from '@mantine/hooks';
+import { hideNotification, showNotification } from '@mantine/notifications';
+import { IconEditCircle, IconEditCircleOff } from '@tabler/icons';
 import axios from 'axios';
 import Consola from 'consola';
-import { ActionIcon, Button, Group, Text, Title, Tooltip } from '@mantine/core';
-import { IconEditCircle, IconEditCircleOff } from '@tabler/icons';
 import { getCookie } from 'cookies-next';
 import { Trans, useTranslation } from 'next-i18next';
-import { useHotkeys } from '@mantine/hooks';
-import { hideNotification, showNotification } from '@mantine/notifications';
 import { useConfigContext } from '../../../../../config/provider';
 import { useScreenSmallerThan } from '../../../../../hooks/useScreenSmallerThan';
 
 import { useEditModeStore } from '../../../../Dashboard/Views/useEditModeStore';
-import { AddElementAction } from '../AddElementAction/AddElementAction';
 import { useNamedWrapperColumnCount } from '../../../../Dashboard/Wrappers/gridstack/store';
 import { useCardStyles } from '../../../useCardStyles';
+import { AddElementAction } from '../AddElementAction/AddElementAction';
+
+const beforeUnloadEventText = 'Exit the edit mode to save your changes';
 
 export const ToggleEditModeAction = () => {
   const { enabled, toggleEditMode } = useEditModeStore();
@@ -29,6 +31,16 @@ export const ToggleEditModeAction = () => {
 
   useHotkeys([['ctrl+E', toggleEditMode]]);
 
+  useWindowEvent('beforeunload', (event: BeforeUnloadEvent) => {
+    if (enabled) {
+      // eslint-disable-next-line no-param-reassign
+      event.returnValue = beforeUnloadEventText;
+      return beforeUnloadEventText;
+    }
+
+    return undefined;
+  });
+
   const toggleButtonClicked = () => {
     toggleEditMode();
     if (enabled || config === undefined || config?.schemaVersion === undefined) {

src/pages/_app.tsx

@@ -38,6 +38,7 @@ function App(
     colorScheme: ColorScheme;
     packageAttributes: ServerSidePackageAttributesType;
     editModeEnabled: boolean;
+    defaultColorScheme: ColorScheme;
   }
 ) {
   const { Component, pageProps } = props;
@@ -55,7 +56,7 @@ function App(
 
   // hook will return either 'dark' or 'light' on client
   // and always 'light' during ssr as window.matchMedia is not available
-  const preferredColorScheme = useColorScheme();
+  const preferredColorScheme = useColorScheme(props.defaultColorScheme);
   const [colorScheme, setColorScheme] = useLocalStorage<ColorScheme>({
     key: 'mantine-color-scheme',
     defaultValue: preferredColorScheme,
@@ -144,10 +145,18 @@ App.getInitialProps = ({ ctx }: { ctx: GetServerSidePropsContext }) => {
       'EXPERIMENTAL: You have disabled the edit mode. Modifications are no longer possible and any requests on the API will be dropped. If you want to disable this, unset the DISABLE_EDIT_MODE environment variable. This behaviour may be removed in future versions of Homarr'
     );
   }
+
+  if (process.env.DEFAULT_COLOR_SCHEME !== undefined) {
+    Consola.debug(`Overriding the default color scheme with ${process.env.DEFAULT_COLOR_SCHEME}`);
+  }
+
+  const colorScheme: ColorScheme = process.env.DEFAULT_COLOR_SCHEME as ColorScheme ?? 'light';
+
   return {
     colorScheme: getCookie('color-scheme', ctx) || 'light',
     packageAttributes: getServiceSidePackageAttributes(),
     editModeEnabled: !disableEditMode,
+    defaultColorScheme: colorScheme,
   };
 };
 

src/tools/server/translation-namespaces.ts

@@ -36,6 +36,7 @@ export const dashboardNamespaces = [
   'modules/media-server',
   'modules/common-media-cards',
   'modules/video-stream',
+  'widgets/error-boundary',
 ];
 
 export const loginNamespaces = ['authentication/login'];

src/widgets/WidgetWrapper.tsx

@@ -2,6 +2,7 @@ import { ComponentType, useMemo } from 'react';
 import Widgets from '.';
 import { HomarrCardWrapper } from '../components/Dashboard/Tiles/HomarrCardWrapper';
 import { WidgetsMenu } from '../components/Dashboard/Tiles/Widgets/WidgetsMenu';
+import ErrorBoundary from './boundary';
 import { IWidget } from './widgets';
 
 interface WidgetWrapperProps {
@@ -40,9 +41,11 @@ export const WidgetWrapper = ({
   const widgetWithDefaultProps = useWidget(widget);
 
   return (
-    <HomarrCardWrapper className={className}>
-      <WidgetsMenu integration={widgetId} widget={widgetWithDefaultProps} />
-      <WidgetComponent widget={widgetWithDefaultProps} />
-    </HomarrCardWrapper>
+    <ErrorBoundary>
+      <HomarrCardWrapper className={className}>
+        <WidgetsMenu integration={widgetId} widget={widgetWithDefaultProps} />
+        <WidgetComponent widget={widgetWithDefaultProps} />
+      </HomarrCardWrapper>
+    </ErrorBoundary>
   );
 };

src/widgets/boundary.tsx

@@ -0,0 +1,127 @@
+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 { IconBrandGithub, IconBug, IconInfoCircle, IconRefresh } from '@tabler/icons';
+
+type ErrorBoundaryState = {
+  hasError: boolean;
+  error: Error | undefined;
+};
+
+type ErrorBoundaryProps = {
+  t: (key: string) => string;
+  children: ReactNode;
+};
+
+/**
+ * A custom error boundary, that catches errors within widgets and renders an error component.
+ * The error component can be refreshed and shows a modal with error details
+ */
+class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: any) {
+    super(props);
+
+    // Define a state variable to track whether is an error or not
+    this.state = { hasError: false, error: undefined };
+  }
+
+  static getDerivedStateFromError(error: Error) {
+    // Update state so the next render will show the fallback UI
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: any) {
+    Consola.error(`Error while rendering widget, ${error}: ${errorInfo}`);
+  }
+
+  render() {
+    // Check if the error is thrown
+    if (this.state.hasError) {
+      return (
+        <Card
+          m={10}
+          sx={(theme) => ({
+            backgroundColor: theme.colors.red[5],
+          })}
+          radius="lg"
+          shadow="sm"
+          withBorder
+        >
+          <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>
+                )}
+              </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>
+        </Card>
+      );
+    }
+
+    // Return children components in case of no error
+    return this.props.children;
+  }
+}
+
+export default withTranslation('widgets/error-boundary')(ErrorBoundary);