@wger-project/react-components 25.12.5 → 26.2.26

package/src/components/Dashboard/ConfigurableDashboard.tsx

@@ -1,28 +1,41 @@
-import { Box, Button, IconButton, Tooltip } from "@mui/material";
 import DashboardCustomizeIcon from "@mui/icons-material/DashboardCustomize";
-import RestartAltIcon from "@mui/icons-material/RestartAlt";
 import DoneIcon from '@mui/icons-material/Done';
-import React, { useState, useCallback, useMemo } from "react";
-import { Responsive, WidthProvider, Layout, Layouts } from "react-grid-layout";
-import "react-grid-layout/css/styles.css";
-import "react-resizable/css/styles.css";
+import RestartAltIcon from "@mui/icons-material/RestartAlt";
+import RuleIcon from '@mui/icons-material/Rule';
+import { Box, Button, IconButton, ListItemText, Menu, MenuItem, Switch, Tooltip } from "@mui/material";
+import { CalendarCard } from "components/Dashboard/CalendarCard";
+import { MeasurementCard } from "components/Dashboard/MeasurementCard";
 import { NutritionCard } from "components/Dashboard/NutritionCard";
 import { RoutineCard } from "components/Dashboard/RoutineCard";
+import { TrophiesCard } from "components/Dashboard/TrophiesCard";
 import { WeightCard } from "components/Dashboard/WeightCard";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { Layout, LayoutItem, Responsive, ResponsiveLayouts, useContainerWidth, } from "react-grid-layout";
+import "react-grid-layout/css/styles.css";
+import "react-resizable/css/styles.css";
 import { useTranslation } from "react-i18next";
 
-const ResponsiveGridLayout = WidthProvider(Responsive);
+const DASHBOARD_STORAGE_KEY = "dashboard-state";
 
-// Local storage key for persisting layouts
-const LAYOUT_STORAGE_KEY = "dashboard-layout";
+const VERSION = 1;
+
+type DashboardState = {
+    version: number;
+    selectedWidgetIds: string[];
+    hiddenWidgetIds: string[];
+    layouts: ResponsiveLayouts | null;
+};
+
+const BREAKPOINTS = ['lg', 'md', 'sm', 'xs'] as const;
 
 // Define widget types for extensibility
-export type WidgetType = "routine" | "nutrition" | "weight";
+export type WidgetType = "routine" | "nutrition" | "weight" | "calendar" | "measurement" | "trophies";
 
 export interface WidgetConfig {
     id: string;
     type: WidgetType;
     component: React.ComponentType;
+    translationKey: string; // key for i18n translations
     defaultLayout: {
         w: number;
         h: number;
@@ -39,31 +52,190 @@ export const AVAILABLE_WIDGETS: WidgetConfig[] = [
         id: "routine",
         type: "routine",
         component: RoutineCard,
+        translationKey: 'routines.routine',
         defaultLayout: { w: 4, h: 5, x: 0, y: 0, minW: 3, minH: 2 },
     },
     {
         id: "nutrition",
         type: "nutrition",
         component: NutritionCard,
+        translationKey: 'nutritionalPlan',
         defaultLayout: { w: 4, h: 5, x: 4, y: 0, minW: 3, minH: 2 },
     },
     {
         id: "weight",
         type: "weight",
         component: WeightCard,
+        translationKey: 'weight',
         defaultLayout: { w: 4, h: 5, x: 8, y: 0, minW: 3, minH: 2 },
     },
+    {
+        id: "calendar",
+        type: "calendar",
+        component: CalendarCard,
+        translationKey: 'calendar',
+        defaultLayout: { w: 8, h: 4, x: 0, y: 1, minW: 3, minH: 2 },
+    },
+    {
+        id: "measurement",
+        type: "measurement",
+        component: MeasurementCard,
+        translationKey: 'measurements.measurements',
+        defaultLayout: { w: 4, h: 4, x: 8, y: 1, minW: 3, minH: 2 },
+    },
+    {
+        id: "trophies",
+        type: "trophies",
+        component: TrophiesCard,
+        translationKey: 'trophies.trophies',
+        defaultLayout: { w: 12, h: 2, x: 0, y: 2, minW: 3, minH: 2 },
+    },
 ];
 
+/*
+ * Load dashboard state from local storage, with migration support for older formats.
+ * Returns null if no saved state exists.
+ */
+export const loadDashboardState = (): DashboardState | null => {
+    try {
+        const raw = localStorage.getItem(DASHBOARD_STORAGE_KEY);
+        if (raw === null) {
+            return null;
+        }
+
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const parsedAny = JSON.parse(raw) as any;
+
+        let out: DashboardState | null = null;
+
+        // If version is not present -> treat as old format and migrate
+        //TODO: Once some time has passed, this can be removed after some time, e.g. after 2026-01-31.
+        if (typeof parsedAny.version === 'undefined') {
+            out = migrateOldDashboardState(parsedAny);
+            saveDashboardState(out);
+        } else {
+            out = parsedAny as DashboardState;
+        }
+
+        if (!out) {
+            return null;
+        }
+
+
+        // Sanity checks
+        // -> remove unknown widget ids
+        const allowedWidgets = new Set(AVAILABLE_WIDGETS.map((w) => w.id));
+
+        out.selectedWidgetIds = Array.isArray(out.selectedWidgetIds)
+            ? out.selectedWidgetIds.filter((id) => allowedWidgets.has(id))
+            : [];
+
+        out.hiddenWidgetIds = Array.isArray(out.hiddenWidgetIds)
+            ? out.hiddenWidgetIds.filter((id) => allowedWidgets.has(id))
+            : [];
+
+        // -> If selected list is empty, default to all available, except those explicitly hidden
+        if (out.selectedWidgetIds.length === 0) {
+            out.selectedWidgetIds = AVAILABLE_WIDGETS.map((w) => w.id).filter((id) => !out.hiddenWidgetIds.includes(id));
+        }
+
+        // -> remove unknown ids from the layout
+        for (const bp of BREAKPOINTS) {
+            const arr = (out.layouts as ResponsiveLayouts)[bp] as Layout | undefined;
+            if (Array.isArray(arr)) {
+                (out.layouts as ResponsiveLayouts)[bp] = arr.filter(
+                    (item: LayoutItem) => item && allowedWidgets.has(String(item.i))
+                );
+            }
+        }
+
+        // -> if there are widgets in AVAILABLE_WIDGETS that are not in selected or hidden
+        //   (e.g. because they have been added in the meantime), add them to selected
+        const known = new Set([...out.selectedWidgetIds, ...out.hiddenWidgetIds]);
+        const missing: string[] = AVAILABLE_WIDGETS.map((w) => w.id).filter((id) => !known.has(id));
+        if (missing.length > 0) {
+            out.selectedWidgetIds = [...out.selectedWidgetIds, ...missing];
+            saveDashboardState(out);
+        }
+
+        return out;
+    } catch (error) {
+        console.error('Error loading dashboard state', error);
+        return null;
+    }
+};
+
+const saveDashboardState = (state: DashboardState) => {
+    try {
+        const toSave: DashboardState = {
+            ...state,
+            version: state.version ?? 1,
+            selectedWidgetIds: Array.isArray(state.selectedWidgetIds) ? [...state.selectedWidgetIds].slice().sort() : [],
+            hiddenWidgetIds: Array.isArray(state.hiddenWidgetIds) ? [...state.hiddenWidgetIds].slice().sort() : [],
+        };
+        localStorage.setItem(DASHBOARD_STORAGE_KEY, JSON.stringify(toSave));
+    } catch (error) {
+        console.error('Error saving dashboard state', error);
+    }
+};
+
+// Migrate the old dashboard-state shape into the new DashboardState
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const migrateOldDashboardState = (parsedAny: any): DashboardState => {
+    const parsed = parsedAny as DashboardState;
+    parsed.version = 1;
+
+    // Ensure hiddenWidgetIds exists in migrated state
+    if (!Array.isArray(parsed.hiddenWidgetIds)) parsed.hiddenWidgetIds = [];
+
+    // If selectedWidgetIds missing, try to extract from layouts (or top-level breakpoints)
+    if (!Array.isArray(parsed.selectedWidgetIds)) {
+        const ids = new Set<string>();
+        let layoutsSource: ResponsiveLayouts | undefined;
+        if (parsed && parsed.layouts) {
+            layoutsSource = parsed.layouts as ResponsiveLayouts;
+        } else if (parsedAny && (parsedAny.lg || parsedAny.md || parsedAny.sm || parsedAny.xs)) {
+            layoutsSource = {
+                lg: parsedAny.lg ?? [],
+                md: parsedAny.md ?? [],
+                sm: parsedAny.sm ?? [],
+                xs: parsedAny.xs ?? [],
+            } as ResponsiveLayouts;
+            parsed.layouts = layoutsSource;
+
+            delete parsedAny.lg;
+            delete parsedAny.md;
+            delete parsedAny.sm;
+            delete parsedAny.xs;
+        }
+
+        if (layoutsSource) {
+            for (const bp of BREAKPOINTS) {
+                const arr = layoutsSource[bp] as Layout | undefined;
+                if (Array.isArray(arr)) arr.forEach((item: LayoutItem) => {
+                    if (item && item.i) ids.add(String(item.i));
+                });
+            }
+        }
+
+        if (ids.size > 0) parsed.selectedWidgetIds = Array.from(ids);
+        else parsed.selectedWidgetIds = AVAILABLE_WIDGETS.map((w) => w.id);
+
+    }
+
+    return parsed;
+};
+
+
 // Generate default layouts for all breakpoints
-const generateDefaultLayouts = (): Layouts => {
-    const lg: Layout[] = AVAILABLE_WIDGETS.map((widget) => ({
+const generateDefaultLayouts = (widgets: WidgetConfig[] = AVAILABLE_WIDGETS): ResponsiveLayouts => {
+    const lg: Layout = widgets.map((widget) => ({
         i: widget.id,
         ...widget.defaultLayout,
     }));
 
     // For medium screens, make widgets full width in pairs
-    const md: Layout[] = AVAILABLE_WIDGETS.map((widget, index) => ({
+    const md: Layout = widgets.map((widget, index) => ({
         i: widget.id,
         w: 6,
         h: widget.defaultLayout.h,
@@ -74,7 +246,7 @@ const generateDefaultLayouts = (): Layouts => {
     }));
 
     // For small screens, stack vertically
-    const sm: Layout[] = AVAILABLE_WIDGETS.map((widget, index) => ({
+    const sm: Layout = widgets.map((widget, index) => ({
         i: widget.id,
         w: 12,
         h: widget.defaultLayout.h,
@@ -87,63 +259,129 @@ const generateDefaultLayouts = (): Layouts => {
     return { lg, md, sm, xs: sm };
 };
 
-// Load layouts from localStorage
-const loadLayouts = (): Layouts | null => {
-    try {
-        const saved = localStorage.getItem(LAYOUT_STORAGE_KEY);
-        return saved ? JSON.parse(saved) : null;
-    } catch (error) {
-        console.error("Error loading dashboard layout:", error);
-        return null;
-    }
-};
+interface ConfigurableDashboardProps {
+    /** Optional list of widget IDs to show (defaults to all AVAILABLE_WIDGETS) */
+    enabledWidgetIds?: string[];
+}
 
-// Save layouts to localStorage
-const saveLayouts = (layouts: Layouts) => {
-    try {
-        localStorage.setItem(LAYOUT_STORAGE_KEY, JSON.stringify(layouts));
-    } catch (error) {
-        console.error("Error saving dashboard layout:", error);
-    }
-};
+export const ConfigurableDashboard: React.FC<ConfigurableDashboardProps> = ({ enabledWidgetIds }) => {
+    const [tRaw] = useTranslation();
+    // Cast t to a looser signature so we can call dynamic keys like `dashboard.widgets` without TS errors
+    const t = tRaw as unknown as (key: string) => string;
+
+    const { width, containerRef, mounted } = useContainerWidth();
 
-export const ConfigurableDashboard: React.FC = () => {
-    const [t] = useTranslation();
     const [isEditMode, setIsEditMode] = useState(false);
-    const [layouts, setLayouts] = useState<Layouts>(() => {
-        const savedLayouts = loadLayouts();
-        return savedLayouts || generateDefaultLayouts();
+
+    // Selected widgets (internal state) - initialize from prop or persisted single-state
+    const [selectedWidgetIds, setSelectedWidgetIds] = useState<string[]>(() => {
+        if (enabledWidgetIds && enabledWidgetIds.length > 0) return enabledWidgetIds;
+        const saved = loadDashboardState();
+        if (saved && Array.isArray(saved.selectedWidgetIds)) {
+            return saved.selectedWidgetIds;
+        }
+        return AVAILABLE_WIDGETS.map((w) => w.id);
     });
 
-    const handleLayoutChange = useCallback((_: Layout[], allLayouts: Layouts) => {
+    // Hidden widgets (persisted)
+    const [hiddenWidgetIds, setHiddenWidgetIds] = useState<string[]>(() => {
+        const saved = loadDashboardState();
+        if (saved && Array.isArray(saved.hiddenWidgetIds)) return saved.hiddenWidgetIds;
+        return [];
+    });
+
+    // Menu anchor for widget selection
+    const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+
+    const visibleWidgets = useMemo(() => {
+        return AVAILABLE_WIDGETS.filter((w) => selectedWidgetIds.includes(w.id));
+    }, [selectedWidgetIds]);
+
+    const [layouts, setLayouts] = useState<ResponsiveLayouts>(() => {
+        const saved = loadDashboardState();
+        return (saved && saved.layouts) || generateDefaultLayouts(visibleWidgets);
+    });
+
+    // when selected widgets change, either re-use the saved layouts (if the saved selection matches)
+    // or generate defaults for the new visible set
+    useEffect(() => {
+        const saved = loadDashboardState();
+        if (saved && Array.isArray(saved.selectedWidgetIds) && saved.layouts) {
+            // compare as sets (order-insensitive)
+            const sameLength = saved.selectedWidgetIds.length === selectedWidgetIds.length;
+            const sameMembers = saved.selectedWidgetIds.every((id) => selectedWidgetIds.includes(id));
+            if (sameLength && sameMembers) {
+                setLayouts(saved.layouts);
+                return;
+            }
+        }
+        setLayouts(generateDefaultLayouts(visibleWidgets));
+    }, [selectedWidgetIds, visibleWidgets]);
+
+    const handleLayoutChange = useCallback((_: Layout, allLayouts: ResponsiveLayouts) => {
         setLayouts(allLayouts);
-        saveLayouts(allLayouts);
     }, []);
 
+    // Reset to defaults for all available widgets and make all widgets visible
     const handleResetLayout = useCallback(() => {
-        const defaultLayouts = generateDefaultLayouts();
+        const allWidgetIds = AVAILABLE_WIDGETS.map((w) => w.id);
+        setSelectedWidgetIds(allWidgetIds);
+        setHiddenWidgetIds([]);
+
+        const defaultLayouts = generateDefaultLayouts(AVAILABLE_WIDGETS);
         setLayouts(defaultLayouts);
-        saveLayouts(defaultLayouts);
+        saveDashboardState({
+            selectedWidgetIds: allWidgetIds,
+            hiddenWidgetIds: [],
+            layouts: defaultLayouts,
+            version: VERSION
+        });
     }, []);
 
     const toggleEditMode = useCallback(() => {
         setIsEditMode((prev) => !prev);
     }, []);
 
+    // Widget menu handlers
+    const openWidgetMenu = (e: React.MouseEvent<HTMLElement>) => setAnchorEl(e.currentTarget);
+    const closeWidgetMenu = () => setAnchorEl(null);
+
+    const toggleWidget = (id: string) => {
+        // If currently selected -> remove from selected and add to hidden
+        if (selectedWidgetIds.includes(id)) {
+            setSelectedWidgetIds((prev) => prev.filter((p) => p !== id));
+            setHiddenWidgetIds((prev) => (prev.includes(id) ? prev : [...prev, id]));
+        } else {
+            // If currently hidden or not present -> add to selected and remove from hidden
+            setSelectedWidgetIds((prev) => [...prev, id]);
+            setHiddenWidgetIds((prev) => prev.filter((h) => h !== id));
+        }
+    };
+
+    useEffect(() => {
+        saveDashboardState({ selectedWidgetIds, hiddenWidgetIds, layouts, version: VERSION });
+    }, [selectedWidgetIds, hiddenWidgetIds, layouts]);
+
     // Grid configuration
-    const gridConfig = useMemo(
+    const gridProps = useMemo(
         () => ({
             className: "layout",
             layouts: layouts,
             breakpoints: { lg: 1200, md: 996, sm: 768, xs: 480 },
             cols: { lg: 12, md: 12, sm: 12, xs: 12 },
-            rowHeight: 100,
-            isDraggable: isEditMode,
-            isResizable: isEditMode,
             onLayoutChange: handleLayoutChange,
-            draggableHandle: isEditMode ? undefined : ".no-drag",
-            margin: [16, 16] as [number, number],
-            containerPadding: [0, 0] as [number, number],
+            dragConfig: {
+                enabled: isEditMode,
+                handle: isEditMode ? undefined : ".no-drag",
+            },
+            resizeConfig: {
+                enabled: isEditMode,
+            },
+            gridConfig: {
+                rowHeight: 100,
+                margin: [16, 16],
+                containerPadding: [0, 0],
+            },
         }),
         [layouts, isEditMode, handleLayoutChange]
     );
@@ -160,32 +398,53 @@ export const ConfigurableDashboard: React.FC = () => {
                 }}
             >
                 {isEditMode && (
-                    <Box
-                        sx={{
-                            p: 1,
-                            borderRadius: 1,
-                            fontSize: "0.875rem",
-                        }}
-                    >
-                        {t('dashboard.dragWidgetsHelp')}
-                    </Box>
-                )}
-                {isEditMode && (
-                    <Tooltip title={t('dashboard.resetLayout')}>
+                    <>
+                        <Box
+                            sx={{
+                                p: 1,
+                                borderRadius: 1,
+                                fontSize: "0.875rem",
+                            }}
+                        >
+                            {t('dashboard.dragWidgetsHelp')}
+                        </Box>
                         <IconButton
-                            onClick={handleResetLayout}
                             size="small"
+                            onClick={openWidgetMenu}
                             sx={{
                                 color: "primary.main",
                                 borderRadius: 1,
                                 fontSize: "0.875rem",
                             }}
                         >
-                            <RestartAltIcon />
+                            <RuleIcon />
                         </IconButton>
-                    </Tooltip>
+                        <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={closeWidgetMenu}>
+                            {AVAILABLE_WIDGETS.map((widget) => (
+                                <MenuItem key={widget.id} onClick={() => toggleWidget(widget.id)}>
+                                    <Switch checked={selectedWidgetIds.includes(widget.id)} />
+                                    <ListItemText primary={t(widget.translationKey)} />
+                                </MenuItem>
+                            ))}
+                        </Menu>
+                        <Tooltip title={t('dashboard.resetLayout')}>
+                            <IconButton
+                                onClick={handleResetLayout}
+                                size="small"
+                                sx={{
+                                    color: "primary.main",
+                                    borderRadius: 1,
+                                    fontSize: "0.875rem",
+                                }}
+                            >
+                                <RestartAltIcon />
+                            </IconButton>
+                        </Tooltip>
+                    </>
                 )}
-                <Tooltip title={isEditMode ? t('core.exitEditMode') : t('dashboard.customizeDashboard')}>
+
+                <Tooltip
+                    title={isEditMode ? t('core.exitEditMode') : t('dashboard.customizeDashboard')}>
                     <Button
                         variant={isEditMode ? "contained" : "outlined"}
                         startIcon={isEditMode ? <DoneIcon /> : <DashboardCustomizeIcon />}
@@ -198,31 +457,35 @@ export const ConfigurableDashboard: React.FC = () => {
                 </Tooltip>
             </Box>
 
-            <ResponsiveGridLayout {...gridConfig}>
-                {AVAILABLE_WIDGETS.map((widget) => {
-                    const WidgetComponent = widget.component;
-                    return (
-                        <Box
-                            key={widget.id}
-                            sx={{
-                                // Add visual feedback in edit mode
-                                border: isEditMode ? "1px dashed" : "none",
-                                borderColor: "primary.main",
-                                borderRadius: 1,
-                                transition: "border 0.2s",
-                                cursor: isEditMode ? "move" : "default",
-                                "&:hover": isEditMode
-                                    ? {
-                                        borderColor: "primary.dark",
-                                    }
-                                    : {},
-                            }}
-                        >
-                            <WidgetComponent />
-                        </Box>
-                    );
-                })}
-            </ResponsiveGridLayout>
+            <Box ref={containerRef}>
+                {mounted && (
+                    <Responsive {...gridProps} width={width}>
+                        {visibleWidgets.map((widget) => {
+                            const WidgetComponent = widget.component;
+                            return (
+                                <Box
+                                    key={widget.id}
+                                    sx={{
+                                        // Add visual feedback in edit mode
+                                        border: isEditMode ? "1px dashed" : "none",
+                                        borderColor: "primary.main",
+                                        borderRadius: 1,
+                                        transition: "border 0.2s",
+                                        cursor: isEditMode ? "move" : "default",
+                                        "&:hover": isEditMode
+                                            ? {
+                                                borderColor: "primary.dark",
+                                            }
+                                            : {},
+                                    }}
+                                >
+                                    <WidgetComponent />
+                                </Box>
+                            );
+                        })}
+                    </Responsive>
+                )}
+            </Box>
         </Box>
     );
 };

package/src/components/Dashboard/DashboardCard.tsx

@@ -72,7 +72,8 @@ export interface DashboardCardProps {
  * </DashboardCard>
  * ```
  */
-export const DashboardCard: React.FC<DashboardCardProps> = ({
+export const DashboardCard: React.FC<DashboardCardProps> = (
+    {
     title,
     subheader,
     children,
@@ -92,7 +93,7 @@ export const DashboardCard: React.FC<DashboardCardProps> = ({
                 ...cardSx,
             }}
         >
-            <CardHeader title={title} subheader={subheader} action={headerAction} />
+            {title !== '' && <CardHeader title={title} subheader={subheader} action={headerAction} />}
 
             <CardContent
                 sx={{

package/src/components/Dashboard/MeasurementCard.test.tsx

@@ -0,0 +1,75 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen } from '@testing-library/react';
+import { MeasurementCard } from "components/Dashboard/MeasurementCard";
+import { useMeasurementsCategoryQuery } from "components/Measurements/queries";
+import { TEST_MEASUREMENT_CATEGORY_1, TEST_MEASUREMENT_CATEGORY_2 } from "tests/measurementsTestData";
+
+jest.mock("components/Measurements/queries");
+jest.useFakeTimers();
+
+const queryClient = new QueryClient();
+
+describe("smoke test the MeasurementCard component", () => {
+
+    describe("Measurements available", () => {
+
+        beforeEach(() => {
+            (useMeasurementsCategoryQuery as jest.Mock).mockImplementation(() => ({
+                isSuccess: true,
+                isLoading: false,
+                data: [
+                    TEST_MEASUREMENT_CATEGORY_1,
+                    TEST_MEASUREMENT_CATEGORY_2
+                ]
+            }));
+        });
+
+        test('renders the current categories correctly', async () => {
+
+            // Act
+            render(
+                <QueryClientProvider client={queryClient}>
+                    <MeasurementCard />
+                </QueryClientProvider>
+            );
+
+            // Assert
+            expect(useMeasurementsCategoryQuery).toHaveBeenCalled();
+            expect(screen.getAllByText('Biceps').length).toBeGreaterThan(0);
+            expect(screen.getAllByText('11 %').length).toBeGreaterThan(0);
+            expect(screen.getAllByText('22 %').length).toBeGreaterThan(0);
+            expect(screen.getAllByText('33 %').length).toBeGreaterThan(0);
+            expect(screen.getAllByText('44 %').length).toBeGreaterThan(0);
+        });
+    });
+
+
+    describe("No data available", () => {
+
+        beforeEach(() => {
+            (useMeasurementsCategoryQuery as jest.Mock).mockImplementation(() => ({
+                isSuccess: true,
+                isLoading: false,
+                data: null
+            }));
+        });
+
+        test('renders the overview correctly', async () => {
+
+            // Act
+            render(
+                <QueryClientProvider client={queryClient}>
+                    <MeasurementCard />
+                </QueryClientProvider>
+            );
+
+            // Assert
+            expect(useMeasurementsCategoryQuery).toHaveBeenCalled();
+            expect(screen.getByText('nothingHereYet')).toBeInTheDocument();
+            expect(screen.getByText('nothingHereYetAction')).toBeInTheDocument();
+            expect(screen.getByText('add')).toBeInTheDocument();
+        });
+    });
+});
+
+