📈 Add umami analytics using homarr.dev

src/components/Dashboard/Modals/SelectElement/Components/Shared/GenericElementType.tsx

@@ -8,6 +8,7 @@ import { useStyles } from './styles';
 
 interface GenericAvailableElementTypeProps {
   name: string;
+  id: string;
   handleAddition: () => Promise<void>;
   description?: string;
   image: string | Icon;
@@ -16,6 +17,7 @@ interface GenericAvailableElementTypeProps {
 
 export const GenericAvailableElementType = ({
   name,
+  id,
   description,
   image,
   disabled,

src/components/Dashboard/Modals/SelectElement/Components/StaticElementsTab/AvailableStaticElementsTab.tsx

@@ -1,4 +1,4 @@
-import { Grid, Text } from '@mantine/core';
+import { Container, Grid, Text } from '@mantine/core';
 import { IconCursorText } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 
@@ -21,12 +21,13 @@ export const AvailableStaticTypes = ({ onClickBack }: AvailableStaticTypesProps)
       </Text>
 
       <Grid grow>
+        {/*
         <GenericAvailableElementType
           name="Static Text"
           description="Display a fixed string on your dashboard"
           image={IconCursorText}
-          handleAddition={/* TODO: add something? */ async () => {}}
-        />
+          handleAddition={async () => {}}
+        /> */}
       </Grid>
     </>
   );

src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/WidgetElementType.tsx

@@ -3,10 +3,10 @@ import { showNotification } from '@mantine/notifications';
 import { Icon, IconChecks } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { v4 as uuidv4 } from 'uuid';
-
 import { useConfigContext } from '~/config/provider';
 import { useConfigStore } from '~/config/store';
 import { IWidget, IWidgetDefinition } from '~/widgets/widgets';
+
 import { useEditModeStore } from '../../../../Views/useEditModeStore';
 import { GenericAvailableElementType } from '../Shared/GenericElementType';
 
@@ -97,6 +97,7 @@ export const WidgetElementType = ({ id, image, disabled, widget }: WidgetElement
       icon: <IconChecks stroke={1.5} />,
       color: 'teal',
     });
+    umami.track('Add widget', { id: widget.id });
   };
 
   return (
@@ -104,6 +105,7 @@ export const WidgetElementType = ({ id, image, disabled, widget }: WidgetElement
       name={t('descriptor.name')}
       description={t('descriptor.description') ?? undefined}
       image={image}
+      id={widget.id}
       disabled={disabled}
       handleAddition={handleAddition}
     />

src/components/Manage/Board/create-board.modal.tsx

@@ -58,7 +58,9 @@ export const CreateBoardModal = ({ id }: ContextModalProps<{}>) => {
           </Button>
           <Button
             type="submit"
-            onClick={async () => {}}
+            onClick={async () => {
+              umami.track('Create new board')
+            }}
             disabled={isLoading}
             variant="light"
             color="green"

src/components/Manage/Tools/Docker/docker-select-board.modal.tsx

@@ -117,4 +117,5 @@ export const openDockerSelectBoardModal = (innerProps: InnerProps) => {
     ),
     innerProps,
   });
+  umami.track('Add to homarr modal')
 };

src/components/Manage/User/Create/review-input-step.tsx

@@ -106,6 +106,7 @@ export const ReviewInputStep = ({ values, prevStep, nextStep }: ReviewInputStepP
               password: values.security.password,
               email: values.account.eMail === '' ? undefined : values.account.eMail,
             });
+            umami.track('Create user', { username: values.account.username});
           }}
           loading={isLoading}
           rightIcon={<IconCheck size="1rem" />}

src/components/Manage/User/Create/security-step.tsx

@@ -66,6 +66,7 @@ export const CreateAccountSecurityStep = ({
                 onClick={async () => {
                   const randomPassword = await mutateAsync();
                   form.setFieldValue('password', randomPassword);
+                  umami.track('Generate random password');
                 }}
                 loading={isLoading}
                 variant="default"

src/components/Onboarding/step-create-account.tsx

@@ -59,6 +59,7 @@ export const StepCreateAccount = ({
       <Text>
         Your administrator account <b>must be secure</b>, that's why we have so many rules surrounding it.
        <br/>Try not to make it adminadmin this time...
+       <br/>Note: these password requirements <b>are not forced</b>, they are just recommendations.
       </Text>
       <form onSubmit={form.onSubmit(handleSubmit)}>
         <Stack>

src/components/layout/Templates/BoardLayout.tsx

@@ -23,6 +23,7 @@ import { useScreenLargerThan } from '~/hooks/useScreenLargerThan';
 import { api } from '~/utils/api';
 
 import { MainLayout } from './MainLayout';
+import { env } from 'process';
 
 type BoardLayoutProps = {
   dockerEnabled: boolean;