feat(deps): move to pnpm and update dependencies

Reviewed-on: #51
Co-authored-by: Varakh <varakh@varakh.de>
Co-committed-by: Varakh <varakh@varakh.de>

.forgejo/workflows/build.yaml

@@ -32,6 +32,7 @@ jobs:
         uses: actions/checkout@v3
       - name: Test native build
         run: |
+          npm install --global pnpm@^9
           make ci
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v2

.forgejo/workflows/release.yaml

@@ -37,6 +37,7 @@ jobs:
         uses: actions/checkout@v3
       - name: Test native build
         run: |
+          npm install --global pnpm@^9
           make ci
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v2

CHANGELOG.md

@@ -5,6 +5,7 @@ Changes adhere to [semantic versioning](https://semver.org).
 ## [4.0.1] - UNRELEASED
 
 * Library updates
+* Move away from `npm` to `pnpm` 
 
 ## [4.0.0] - 2024/10/25
 

Dockerfile

@@ -14,6 +14,7 @@ RUN apk --update upgrade && \
 WORKDIR /app
 COPY . .
 RUN rm -rf bin/ && \
+    npm install --global pnpm@^9 && \
     CC=gcc make ci
 
 #

Makefile

@@ -16,21 +16,21 @@ dependencies: dependencies-web dependencies-server
 dependencies-server:
 	GO111MODULE=on go mod download
 dependencies-web:
-	cd ${WEB_DIR}; npm install
+	cd ${WEB_DIR}; pnpm install
 
 # checkstyle steps
 checkstyle: checkstyle-web checkstyle-server
 checkstyle-server:
 	go vet ./...
 checkstyle-web:
-	cd ${WEB_DIR}; npm run checkstyle
+	cd ${WEB_DIR}; pnpm run checkstyle
 
 # test steps
 test: test-web test-server
 test-server:
 	go test -race ./...
 test-web:
-	cd ${WEB_DIR}; npm run test:ci
+	cd ${WEB_DIR}; pnpm run test:ci
 
 # build steps
 
@@ -74,7 +74,7 @@ build-cli-windows-arm64:
 
 # remove built build/conf directory to be served live from the running binary
 build-web:
-	cd ${WEB_DIR}; npm run build; rm -rf build/conf
+	cd ${WEB_DIR}; pnpm run build; rm -rf build/conf
 
 # ci
 clean-ci: clean

go.mod

@@ -23,8 +23,8 @@ require (
 	github.com/urfave/cli/v2 v2.27.5
 	go.uber.org/automaxprocs v1.6.0
 	go.uber.org/zap v1.27.0
-	gorm.io/driver/postgres v1.5.10
+	gorm.io/driver/postgres v1.5.11
-	gorm.io/driver/sqlite v1.5.6
+	gorm.io/driver/sqlite v1.5.7
 	gorm.io/gorm v1.25.12
 	moul.io/zapgorm2 v1.3.0
 )

go.sum

@@ -332,10 +332,10 @@ gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C
 gopkg.in/yaml.v3 v3.0.0-20210107192922-496545a6307b/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
 gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
 gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
-gorm.io/driver/postgres v1.5.10 h1:7Lggqempgy496c0WfHXsYWxk3Th+ZcW66/21QhVFdeE=
+gorm.io/driver/postgres v1.5.11 h1:ubBVAfbKEUld/twyKZ0IYn9rSQh448EdelLYk9Mv314=
-gorm.io/driver/postgres v1.5.10/go.mod h1:DX3GReXH+3FPWGrrgffdvCk3DQ1dwDPdmbenSkweRGI=
+gorm.io/driver/postgres v1.5.11/go.mod h1:DX3GReXH+3FPWGrrgffdvCk3DQ1dwDPdmbenSkweRGI=
-gorm.io/driver/sqlite v1.5.6 h1:fO/X46qn5NUEEOZtnjJRWRzZMe8nqJiQ9E+0hi+hKQE=
+gorm.io/driver/sqlite v1.5.7 h1:8NvsrhP0ifM7LX9G4zPB97NwovUakUxc+2V2uuf3Z1I=
-gorm.io/driver/sqlite v1.5.6/go.mod h1:U+J8craQU6Fzkcvu8oLeAQmi50TkwPEhHDEjQZXDah4=
+gorm.io/driver/sqlite v1.5.7/go.mod h1:U+J8craQU6Fzkcvu8oLeAQmi50TkwPEhHDEjQZXDah4=
 gorm.io/gorm v1.23.6/go.mod h1:l2lP/RyAtc1ynaTjFksBde/O8v9oOGIApu2/xRitmZk=
 gorm.io/gorm v1.25.12 h1:I0u8i2hWQItBq1WfE0o2+WuL9+8L21K9e2HHSTE/0f8=
 gorm.io/gorm v1.25.12/go.mod h1:xh7N7RHfYlNc5EmcI/El95gXusucDrQnHXe0+CgWcLQ=

server/web/README.md

@@ -16,26 +16,29 @@ Contributions are very welcome!
 
 It's probably worth checking out a node environment manager like [nvm manager](https://github.com/nvm-sh/nvm).
 
-Required node and npm versions are outlined in the `package.json`.
+Required node and npm versions are outlined in the `package.json` in the `"engines"` section.
+
+The application uses `pnpm`. Make sure to install it. For this you can use your global npm installation and invoke
+`npm install --global pnpm@^9` or have it as system package.
 
 ### Setup instructions
 
-Run `npm install` which should install all dependencies.
+Run `pnpm install` which should install all dependencies.
 
 ### Start
 
-Use the `npm run start` command to start the development setup. Backend should be running.
+Use the `pnpm start` command to start the development setup. Backend should be running.
 
 ### Translation files
 
-Pipeline checks for existing i18n keys, if you need to manually sync any language file, run `npm run i18n-sync`.
+Pipeline checks for existing i18n keys, if you need to manually sync any language file, run `pnpm i18n-sync`.
 
 #### New translation languages
 
 Adapt `package.json` and add the respective key to `i18n-sync` and `checkstyle:i18n` for the `--languages` argument,
 e.g. `--languages en,new`.
 
-Run `npm run i18n-sync` to create and sync new language
+Run `pnpm i18n-sync` to create and sync new language
 
 Adapt `languages.ts`
 
@@ -104,8 +107,21 @@ To track unused dependencies
 
 ```shell
 # install (if not yet present)
-npm install -g depcheck typescript
+npm install --global depcheck typescript
 
 # run
 depcheck
 ```
+
+To manage (outdated) dependencies, `pnpm` helps:
+
+```shell
+# shows outdated dependencies
+pnpm outdated
+
+# upgrades to latest in range definition of package.json
+pnpm up
+
+# upgrades to latest available, this includes major upgrades
+pnpm up --latest
+```

server/web/package.json

@@ -6,7 +6,8 @@
   "type": "module",
   "engines": {
     "node": "^20",
-    "npm": "^10"
+    "npm": "^10",
+    "pnpm": "^9"
   },
   "scripts": {
     "start": "vite",
@@ -22,8 +23,8 @@
     "lintfix": "eslint --fix \"./src/**/*.{tsx,ts}\"",
     "lint:style": "stylelint \"./src/**/*.less\"",
     "lint-style-fix": "stylelint \"./src/**/*.less\" --fix",
-    "checkstyle": "npm run checkstyle:ts && npm run checkstyle:less && npm run checkstyle:format && npm run checkstyle:i18n",
+    "checkstyle": "pnpm run checkstyle:ts && pnpm run checkstyle:less && pnpm run checkstyle:format && pnpm run checkstyle:i18n",
-    "checkstyle:format": "npm run format:check",
+    "checkstyle:format": "pnpm run format:check",
     "checkstyle:ts": "eslint \"./src/**/*.{ts,tsx}\" -f checkstyle > ci/eslint.xml",
     "checkstyle:less": "stylelint \"./src/**/*.less\"",
     "checkstyle:i18n": "sync-i18n --check --files '**/translations/*.json' --primary en --languages en --space 2 --lineendings LF",
@@ -34,62 +35,62 @@
     "@ant-design/icons": "^5.5.2",
     "@ant-design/pro-layout": "^7.21.2",
     "@reduxjs/toolkit": "^2.4.0",
-    "@types/react": "^18.3.12",
+    "@types/react": "^18.3.14",
-    "@types/react-dom": "^18.3.1",
+    "@types/react-dom": "^18.3.3",
-    "antd": "^5.22.2",
+    "antd": "^5.22.4",
     "file-saver": "^2.0.5",
-    "html-react-parser": "^5.1.18",
+    "html-react-parser": "^5.2.0",
-    "i18next": "^24.0.2",
+    "i18next": "^24.0.5",
-    "i18next-browser-languagedetector": "^8.0.0",
+    "i18next-browser-languagedetector": "^8.0.2",
-    "linkify-html": "^4.1.4",
+    "linkify-html": "^4.2.0",
-    "linkifyjs": "^4.1.4",
+    "linkifyjs": "^4.2.0",
     "lodash": "^4.17.21",
     "moment-timezone": "^0.5.46",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-i18next": "^15.1.3",
+    "react-i18next": "^15.1.4",
     "react-redux": "^9.1.2",
-    "react-router": "^7.0.1",
+    "react-router": "^7.0.2",
     "typescript": "^5.7.2"
   },
   "devDependencies": {
-    "@eslint/compat": "^1.2.3",
+    "@eslint/compat": "^1.2.4",
     "@eslint/js": "^9.16.0",
     "@types/file-saver": "^2.0.7",
     "@types/lodash": "^4.17.13",
-    "@types/node": "^20.16.15",
+    "@types/node": "^22.10.1",
-    "@typescript-eslint/eslint-plugin": "^8.16.0",
+    "@typescript-eslint/eslint-plugin": "^8.18.0",
-    "@typescript-eslint/parser": "^8.16.0",
+    "@typescript-eslint/parser": "^8.18.0",
     "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/coverage-v8": "^2.1.6",
+    "@vitest/coverage-v8": "^2.1.8",
     "eslint": "^9.16.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-formatter-checkstyle": "^8.40.0",
-    "eslint-import-resolver-typescript": "^3.6.3",
+    "eslint-import-resolver-typescript": "^3.7.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-sonarjs": "^2.0.4",
+    "eslint-plugin-sonarjs": "^3.0.1",
-    "eslint-plugin-testing-library": "^7.0.0",
+    "eslint-plugin-testing-library": "^7.1.1",
     "i18next-json-sync": "^3.1.2",
     "jsdom": "^25.0.1",
     "less": "^4.2.1",
     "postcss-less": "^6.0.0",
-    "prettier": "^3.4.1",
+    "prettier": "^3.4.2",
     "rimraf": "^6.0.1",
     "stylelint": "^16.11.0",
     "stylelint-config-standard": "^36.0.1",
     "stylelint-declaration-block-no-ignored-properties": "^2.8.0",
     "stylelint-order": "^6.0.4",
     "stylelint-prettier": "^5.0.2",
-    "vite": "^5.4.11",
+    "vite": "^6.0.3",
     "vite-plugin-eslint2": "^5.0.3",
-    "vite-plugin-stylelint": "^5.3.1",
+    "vite-plugin-stylelint": "^6.0.0",
     "vite-plugin-svgr": "^4.3.0",
-    "vite-tsconfig-paths": "^5.1.3",
+    "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^2.1.6"
+    "vitest": "^2.1.8"
   },
   "browserslist": {
     "production": [

server/web/src/layout/HealthHandler.tsx

@@ -5,7 +5,7 @@ import { Modal, ModalFuncProps, Skeleton } from 'antd';
 import { FC, ReactNode, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-const HealthHandler: FC<{ children: ReactNode | ReactNode[] }> = ({ children }): JSX.Element => {
+const HealthHandler: FC<{ children: ReactNode | ReactNode[] }> = ({ children }): ReactNode => {
 	const [t] = useTranslation('health');
 	const { isLoading, isSuccess, isError, data } = useGetHealthQuery(undefined);
 

server/web/src/layout/PrimaryMenu.tsx

@@ -17,14 +17,14 @@ import {
 import { Menu, Typography } from 'antd';
 import { TFunction } from 'i18next';
 import { forEach } from 'lodash';
-import { FC, useMemo } from 'react';
+import { FC, ReactNode, useMemo } from 'react';
 import { useNavigate } from 'react-router';
 
 export type PrimaryMenuProps = {
 	t: TFunction;
 };
 
-const PrimaryMenu: FC<PrimaryMenuProps> = ({ t }): JSX.Element => {
+const PrimaryMenu: FC<PrimaryMenuProps> = ({ t }): ReactNode => {
 	const navigate = useNavigate();
 	const isAuthenticated = useAuthenticatedSelector();
 	const { logout, getUserName } = useAuthorization();

server/web/src/pages/action-invocations/ActionInvocationsPage.tsx

@@ -24,7 +24,7 @@ import { Button, Result, Skeleton, Space, Switch, Table, TablePaginationConfig,
 import { ColumnsType } from 'antd/es/table';
 import { FilterValue, SorterResult } from 'antd/es/table/interface';
 import parse from 'html-react-parser';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSearchParams } from 'react-router';
 
@@ -109,7 +109,7 @@ const ActionInvocationsPage = () => {
 	}, [isError, setPollingInterval, t]);
 
 	const renderState = useCallback(
-		(state: ActionInvocationState): JSX.Element => {
+		(state: ActionInvocationState): ReactNode => {
 			switch (state) {
 				case ActionInvocationState.CREATED:
 					return (

server/web/src/pages/action-invocations/DeleteActionInvocation.tsx

@@ -2,14 +2,14 @@ import { useDeleteActionInvocationMutation } from '../../api/actionInvocationsAp
 import { apiNotification } from '../common/apiNotification';
 import { DeleteOutlined, DeleteTwoTone } from '@ant-design/icons';
 import { Button, Popconfirm, Tooltip } from 'antd';
-import { FC, useEffect } from 'react';
+import { FC, ReactNode, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 export interface DeleteActionInvocationProps {
 	id: string;
 }
 
-const DeleteActionInvocation: FC<DeleteActionInvocationProps> = ({ id }): JSX.Element => {
+const DeleteActionInvocation: FC<DeleteActionInvocationProps> = ({ id }): ReactNode => {
 	const [t] = useTranslation('action_invocation_delete');
 
 	const [deleteActionInvocation, { isLoading, isError, error }] = useDeleteActionInvocationMutation();

server/web/src/pages/action-invocations/ItemActionInvocation.tsx

@@ -6,7 +6,7 @@ import ActionTextType from '../actions/ActionTextType';
 import EventText from '../events/EventText';
 import { ReloadOutlined } from '@ant-design/icons';
 import { Button, Descriptions, Result, Skeleton, Tooltip, Typography } from 'antd';
-import { FC, useCallback } from 'react';
+import { FC, ReactNode, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const { Text } = Typography;
@@ -16,7 +16,7 @@ export interface ItemActionInvocationProps {
 	e: ActionInvocationResponse;
 }
 
-const ItemActionInvocation: FC<ItemActionInvocationProps> = ({ e }): JSX.Element => {
+const ItemActionInvocation: FC<ItemActionInvocationProps> = ({ e }): ReactNode => {
 	const [t] = useTranslation('action_invocation_item');
 
 	const {

server/web/src/pages/actions/ActionFormPayloadShoutrrr.tsx

@@ -1,13 +1,13 @@
 import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 import { Button, Form, Input } from 'antd';
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 
 export interface ActionFormShoutrrrProps {
 	isLoading: boolean;
 }
 
-const ActionFormPayloadShoutrrr: FC<ActionFormShoutrrrProps> = ({ isLoading }): JSX.Element => {
+const ActionFormPayloadShoutrrr: FC<ActionFormShoutrrrProps> = ({ isLoading }): ReactNode => {
 	const [t] = useTranslation('action_form_shoutrrrr');
 
 	return (

server/web/src/pages/actions/ActionFormPayloadSwitch.tsx

@@ -1,13 +1,13 @@
 import ActionFormPayloadShoutrrr from './ActionFormPayloadShoutrrr';
 import { ActionType } from '../../types';
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 
 export interface ActionFormPayloadSwitchProps {
 	isLoading: boolean;
 	type: ActionType;
 }
 
-const ActionFormPayloadSwitch: FC<ActionFormPayloadSwitchProps> = ({ isLoading, type }): JSX.Element => {
+const ActionFormPayloadSwitch: FC<ActionFormPayloadSwitchProps> = ({ isLoading, type }): ReactNode => {
 	return <>{ActionType.SHOUTRRR == type && <ActionFormPayloadShoutrrr isLoading={isLoading} />}</>;
 };
 

server/web/src/pages/actions/ActionFormType.tsx

@@ -1,6 +1,6 @@
 import { ActionType } from '../../types';
 import { Select, Form } from 'antd';
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 
 export interface ActionFormTypeProps {
@@ -8,7 +8,7 @@ export interface ActionFormTypeProps {
 	initialValue?: ActionType;
 }
 
-const ActionFormType: FC<ActionFormTypeProps> = ({ isLoading, initialValue }): JSX.Element => {
+const ActionFormType: FC<ActionFormTypeProps> = ({ isLoading, initialValue }): ReactNode => {
 	const [t] = useTranslation('action_form_type');
 
 	return (

server/web/src/pages/actions/ActionSelectEvent.tsx

@@ -1,6 +1,6 @@
 import { EventName } from '../../types/event';
 import { Select } from 'antd';
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 
 export interface ActionSelectEventProps {
@@ -13,7 +13,7 @@ const noop = () => {
 	return;
 };
 
-const ActionSelectEvent: FC<ActionSelectEventProps> = ({ name, onChange = noop, loading }): JSX.Element => {
+const ActionSelectEvent: FC<ActionSelectEventProps> = ({ name, onChange = noop, loading }): ReactNode => {
 	const [t] = useTranslation('action_select_event');
 
 	return (

server/web/src/pages/actions/ActionTextType.tsx

@@ -1,6 +1,6 @@
 import { ActionType } from '../../types';
 import { Typography } from 'antd';
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const { Text } = Typography;
@@ -9,7 +9,7 @@ export interface ActionTextTypeProps {
 	type: ActionType;
 }
 
-const ActionTextType: FC<ActionTextTypeProps> = ({ type }): JSX.Element => {
+const ActionTextType: FC<ActionTextTypeProps> = ({ type }): ReactNode => {
 	const [t] = useTranslation('action_text_type');
 
 	return <Text>{t(type)}</Text>;

server/web/src/pages/actions/CreateAction.tsx

@@ -6,12 +6,12 @@ import { ActionPayloadShoutrrr, ActionType } from '../../types';
 import { apiNotification } from '../common/apiNotification';
 import { PlusOutlined } from '@ant-design/icons';
 import { Button, Collapse, Divider, Form, Input, Switch } from 'antd';
-import { useCallback, useEffect, useState } from 'react';
+import { ReactNode, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const COLLAPSE_KEY = 'edit_type_payload';
 
-const CreateAction = (): JSX.Element => {
+const CreateAction = (): ReactNode => {
 	const [t] = useTranslation('action_create');
 	const [form] = Form.useForm();
 	const type = Form.useWatch('type', form);

server/web/src/pages/actions/DeleteAction.tsx

@@ -2,14 +2,14 @@ import { useDeleteActionMutation } from '../../api/actionsApi';
 import { apiNotification } from '../common/apiNotification';
 import { DeleteOutlined, DeleteTwoTone } from '@ant-design/icons';
 import { Button, Popconfirm, Tooltip } from 'antd';
-import { FC, useEffect } from 'react';
+import { FC, ReactNode, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 export interface DeleteActionProps {
 	id: string;
 }
 
-const DeleteAction: FC<DeleteActionProps> = ({ id }): JSX.Element => {
+const DeleteAction: FC<DeleteActionProps> = ({ id }): ReactNode => {
 	const [t] = useTranslation('action_delete');
 
 	const [deleteAction, { isLoading, isError, error }] = useDeleteActionMutation();

server/web/src/pages/actions/ItemAction.tsx

@@ -7,7 +7,7 @@ import UpdateMatchProviderAction from './UpdateMatchProviderAction';
 import UpdatePayloadAction from './UpdatePayloadAction';
 import { ActionResponse } from '../../types';
 import { Descriptions, Space } from 'antd';
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const { Item } = Descriptions;
@@ -16,7 +16,7 @@ export interface ItemActionProps {
 	e: ActionResponse;
 }
 
-const ItemActionInvocation: FC<ItemActionProps> = ({ e }): JSX.Element => {
+const ItemActionInvocation: FC<ItemActionProps> = ({ e }): ReactNode => {
 	const [t] = useTranslation('action_item');
 
 	return (

server/web/src/pages/actions/TestAction.tsx

@@ -2,14 +2,14 @@ import { useTestActionMutation } from '../../api/actionsApi';
 import { apiNotification } from '../common/apiNotification';
 import { PlayCircleTwoTone } from '@ant-design/icons';
 import { Button } from 'antd';
-import { FC, useCallback, useEffect } from 'react';
+import { FC, ReactNode, useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 export interface TestActionProps {
 	id: string;
 }
 
-const TestAction: FC<TestActionProps> = ({ id }): JSX.Element => {
+const TestAction: FC<TestActionProps> = ({ id }): ReactNode => {
 	const [t] = useTranslation('action_test');
 
 	const [test, { data, isLoading, isSuccess, isError, error }] = useTestActionMutation();

server/web/src/pages/actions/UpdateEnabledAction.tsx

@@ -2,7 +2,7 @@ import { useModifyEnabledActionMutation } from '../../api/actionsApi';
 import { apiNotification } from '../common/apiNotification';
 import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
 import { Switch } from 'antd';
-import { FC, useCallback, useEffect } from 'react';
+import { FC, ReactNode, useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 export interface UpdateEnabledActionProps {
@@ -10,7 +10,7 @@ export interface UpdateEnabledActionProps {
 	enabled: boolean;
 }
 
-const UpdateEnabledAction: FC<UpdateEnabledActionProps> = ({ id, enabled }): JSX.Element => {
+const UpdateEnabledAction: FC<UpdateEnabledActionProps> = ({ id, enabled }): ReactNode => {
 	const [t] = useTranslation('action_update_enabled');
 
 	const [modify, { isLoading, isError, error }] = useModifyEnabledActionMutation();

server/web/src/pages/actions/UpdateLabelAction.tsx

@@ -1,7 +1,7 @@
 import { useModifyLabelActionMutation } from '../../api/actionsApi';
 import { apiNotification } from '../common/apiNotification';
 import InlineInputValueEditor from '../common/InlineInputValueEditor';
-import { FC, useCallback, useEffect } from 'react';
+import { FC, ReactNode, useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 export interface UpdateLabelActionProps {
@@ -9,7 +9,7 @@ export interface UpdateLabelActionProps {
 	label: string;
 }
 
-const UpdateLabelAction: FC<UpdateLabelActionProps> = ({ id, label }): JSX.Element => {
+const UpdateLabelAction: FC<UpdateLabelActionProps> = ({ id, label }): ReactNode => {
 	const [t] = useTranslation('action_update_label');
 
 	const [modify, { isLoading, isError, isSuccess, error }] = useModifyLabelActionMutation();

server/web/src/pages/actions/UpdateMatchApplicationAction.tsx

@@ -1,7 +1,7 @@
 import { useModifyMatchApplicationActionMutation } from '../../api/actionsApi';
 import { apiNotification } from '../common/apiNotification';
 import InlineInputValueEditor from '../common/InlineInputValueEditor';
-import { FC, useCallback, useEffect } from 'react';
+import { FC, ReactNode, useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 export interface UpdateMatchApplicationActionProps {
@@ -9,7 +9,7 @@ export interface UpdateMatchApplicationActionProps {
 	matchApplication?: string;
 }
 
-const UpdateMatchApplicationAction: FC<UpdateMatchApplicationActionProps> = ({ id, matchApplication }): JSX.Element => {
+const UpdateMatchApplicationAction: FC<UpdateMatchApplicationActionProps> = ({ id, matchApplication }): ReactNode => {
 	const [t] = useTranslation('action_update_match_application');
 
 	const [modify, { isLoading, isError, isSuccess, error }] = useModifyMatchApplicationActionMutation();

server/web/src/pages/actions/UpdateMatchEventAction.tsx

@@ -2,7 +2,7 @@ import ActionSelectEvent from './ActionSelectEvent';
 import { useModifyMatchEventActionMutation } from '../../api/actionsApi';
 import { EventName } from '../../types/event';
 import { apiNotification } from '../common/apiNotification';
-import { FC, useCallback, useEffect } from 'react';
+import { FC, ReactNode, useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 export interface UpdateMatchEventActionProps {
@@ -10,7 +10,7 @@ export interface UpdateMatchEventActionProps {
 	matchEvent?: EventName;
 }
 
-const UpdateMatchEventAction: FC<UpdateMatchEventActionProps> = ({ id, matchEvent }): JSX.Element => {
+const UpdateMatchEventAction: FC<UpdateMatchEventActionProps> = ({ id, matchEvent }): ReactNode => {
 	const [t] = useTranslation('action_update_match_event');
 
 	const [modify, { isLoading, isError, error }] = useModifyMatchEventActionMutation();

server/web/src/pages/actions/UpdateMatchHostAction.tsx

@@ -1,7 +1,7 @@
 import { useModifyMatchHostActionMutation } from '../../api/actionsApi';
 import { apiNotification } from '../common/apiNotification';
 import InlineInputValueEditor from '../common/InlineInputValueEditor';
-import { FC, useCallback, useEffect } from 'react';
+import { FC, ReactNode, useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 export interface UpdateMatchHostActionProps {
@@ -9,7 +9,7 @@ export interface UpdateMatchHostActionProps {
 	matchHost?: string;
 }
 
-const UpdateMatchHostAction: FC<UpdateMatchHostActionProps> = ({ id, matchHost }): JSX.Element => {
+const UpdateMatchHostAction: FC<UpdateMatchHostActionProps> = ({ id, matchHost }): ReactNode => {
 	const [t] = useTranslation('action_update_match_host');
 
 	const [modify, { isLoading, isError, isSuccess, error }] = useModifyMatchHostActionMutation();

server/web/src/pages/actions/UpdateMatchProviderAction.tsx

@@ -1,7 +1,7 @@
 import { useModifyMatchProviderActionMutation } from '../../api/actionsApi';
 import { apiNotification } from '../common/apiNotification';
 import InlineInputValueEditor from '../common/InlineInputValueEditor';
-import { FC, useCallback, useEffect } from 'react';
+import { FC, ReactNode, useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 export interface UpdateMatchProviderActionProps {
@@ -9,7 +9,7 @@ export interface UpdateMatchProviderActionProps {
 	matchProvider?: string;
 }
 
-const UpdateMatchProviderAction: FC<UpdateMatchProviderActionProps> = ({ id, matchProvider }): JSX.Element => {
+const UpdateMatchProviderAction: FC<UpdateMatchProviderActionProps> = ({ id, matchProvider }): ReactNode => {
 	const [t] = useTranslation('action_update_match_provider');
 
 	const [modify, { isLoading, isError, isSuccess, error }] = useModifyMatchProviderActionMutation();

server/web/src/pages/actions/UpdatePayloadAction.tsx

@@ -5,7 +5,7 @@ import { ActionPayloadShoutrrr, ActionType } from '../../types';
 import { apiNotification } from '../common/apiNotification';
 import { SettingOutlined } from '@ant-design/icons';
 import { Button, Collapse, Form, Space, Typography } from 'antd';
-import { FC, useCallback, useEffect } from 'react';
+import { FC, ReactNode, useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 export interface UpdatePayloadActionProps {
@@ -16,7 +16,7 @@ export interface UpdatePayloadActionProps {
 
 const COLLAPSE_KEY = 'update_type_and_payload';
 
-const UpdateTypeAndPayloadAction: FC<UpdatePayloadActionProps> = ({ id, type, payload }): JSX.Element => {
+const UpdateTypeAndPayloadAction: FC<UpdatePayloadActionProps> = ({ id, type, payload }): ReactNode => {
 	const [t] = useTranslation('action_update_payload');
 	const [form] = Form.useForm();
 	const typeValue = Form.useWatch('type', form);

server/web/src/pages/events/Event.tsx

@@ -7,7 +7,7 @@ import { formatDateTimeWithTimeZone } from '../../utils/datetimeHelper';
 import { apiNotification } from '../common/apiNotification';
 import { DeleteOutlined, DeleteTwoTone } from '@ant-design/icons';
 import { Button, Card, Popconfirm, Tooltip, Typography } from 'antd';
-import { FC, useEffect } from 'react';
+import { FC, ReactNode, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const { Text } = Typography;
@@ -17,7 +17,7 @@ export interface EventProps {
 	onDeleteSuccess?: () => void;
 }
 
-const Event: FC<EventProps> = ({ entity, onDeleteSuccess }): JSX.Element => {
+const Event: FC<EventProps> = ({ entity, onDeleteSuccess }): ReactNode => {
 	const [t] = useTranslation('event');
 	const { locale } = useLocaleProviderContext();
 

server/web/src/pages/events/EventText.tsx

@@ -1,7 +1,7 @@
 import { EventName } from '../../types/event';
 import { Typography } from 'antd';
 import parse from 'html-react-parser';
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const { Text } = Typography;
@@ -11,7 +11,7 @@ export interface EventTextProps {
 	payload: Record<string, string>;
 }
 
-const EventText: FC<EventTextProps> = ({ name, payload }): JSX.Element => {
+const EventText: FC<EventTextProps> = ({ name, payload }): ReactNode => {
 	const [t] = useTranslation('event_text');
 
 	return <Text>{parse(t(`${name.toLowerCase()}`, payload))}</Text>;

server/web/src/pages/secrets/DeleteSecret.tsx

@@ -2,14 +2,14 @@ import { useDeleteSecretMutation } from '../../api/secretsApi';
 import { apiNotification } from '../common/apiNotification';
 import { DeleteOutlined, DeleteTwoTone } from '@ant-design/icons';
 import { Button, Popconfirm, Tooltip } from 'antd';
-import { FC, useEffect } from 'react';
+import { FC, ReactNode, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 export interface DeleteSecretProps {
 	id: string;
 }
 
-const DeleteSecret: FC<DeleteSecretProps> = ({ id }): JSX.Element => {
+const DeleteSecret: FC<DeleteSecretProps> = ({ id }): ReactNode => {
 	const [t] = useTranslation('secret_delete');
 
 	const [deleteSecret, { isLoading, isError, error }] = useDeleteSecretMutation();

server/web/src/pages/secrets/UpdateValueSecret.tsx

@@ -1,7 +1,7 @@
 import { useModifyValueSecretMutation } from '../../api/secretsApi';
 import { apiNotification } from '../common/apiNotification';
 import InlineInputValueEditor from '../common/InlineInputValueEditor';
-import { FC, useCallback, useEffect } from 'react';
+import { FC, ReactNode, useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 export interface UpdateValueSecretProps {
@@ -9,7 +9,7 @@ export interface UpdateValueSecretProps {
 	entityValue?: string;
 }
 
-const UpdateValueSecret: FC<UpdateValueSecretProps> = ({ id, entityValue }): JSX.Element => {
+const UpdateValueSecret: FC<UpdateValueSecretProps> = ({ id, entityValue }): ReactNode => {
 	const [t] = useTranslation('secret_update_value');
 
 	const [modify, { isLoading, isError, isSuccess, error }] = useModifyValueSecretMutation();

server/web/src/pages/updates/Update.tsx

@@ -18,7 +18,7 @@ import {
 	StopTwoTone
 } from '@ant-design/icons';
 import { Badge, Button, Card, Col, Popconfirm, Row, Space, Tooltip, Typography } from 'antd';
-import { FC, useCallback, useEffect } from 'react';
+import { FC, ReactNode, useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router';
 
@@ -28,7 +28,7 @@ export interface UpdateProps {
 	entity: UpdateResponse;
 }
 
-const Update: FC<UpdateProps> = ({ entity }): JSX.Element => {
+const Update: FC<UpdateProps> = ({ entity }): ReactNode => {
 	const [t] = useTranslation('update');
 	const { locale } = useLocaleProviderContext();
 	const navigate = useNavigate();

server/web/src/pages/updates/UpdateMetadata.tsx

@@ -2,7 +2,7 @@ import { UpdateMetadataResponse } from '../../types';
 import { Typography } from 'antd';
 import parse from 'html-react-parser';
 import linkifyHtml from 'linkify-html';
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 
 export interface UpdateMetadataProps {
 	metadata: UpdateMetadataResponse;
@@ -10,7 +10,7 @@ export interface UpdateMetadataProps {
 
 const { Paragraph } = Typography;
 
-const UpdateMetadata: FC<UpdateMetadataProps> = ({ metadata }): JSX.Element => {
+const UpdateMetadata: FC<UpdateMetadataProps> = ({ metadata }): ReactNode => {
 	return (
 		<Paragraph>
 			<pre>

server/web/src/pages/updates/UpdateSinglePage.tsx

@@ -11,13 +11,13 @@ import { getPageFullPath } from '../../utils/urlHelper';
 import AppBreadcrumb from '../common/AppBreadcrumb';
 import { PageHeader } from '@ant-design/pro-layout';
 import { Descriptions, Result, Skeleton, Typography } from 'antd';
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router';
 
 const { Text } = Typography;
 
-const UpdateSinglePage: FC = (): JSX.Element => {
+const UpdateSinglePage: FC = (): ReactNode => {
 	const [t] = useTranslation('updates_single');
 	const { locale } = useLocaleProviderContext();
 

server/web/src/pages/updates/UpdateStateTag.tsx

@@ -1,14 +1,14 @@
 import { UpdateState } from '../../types';
 import { getUpdateStateColor } from '../../utils/updateHelper';
 import { Tag } from 'antd';
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 
 export interface UpdateStateProps {
 	state: UpdateState;
 }
 
-const UpdateStateTag: FC<UpdateStateProps> = ({ state }): JSX.Element => {
+const UpdateStateTag: FC<UpdateStateProps> = ({ state }): ReactNode => {
 	const [t] = useTranslation('update_state_tag');
 
 	return <Tag color={getUpdateStateColor(state)}>{t(`state_${state.toLocaleLowerCase()}`)}</Tag>;

server/web/src/pages/webhooks/Webhook.tsx

@@ -12,7 +12,7 @@ import { apiNotification } from '../common/apiNotification';
 import InlineInputValueEditor from '../common/InlineInputValueEditor';
 import { CheckOutlined, CloseOutlined, DeleteOutlined, DeleteTwoTone, FieldTimeOutlined } from '@ant-design/icons';
 import { Button, Card, Col, Popconfirm, Row, Space, Switch, Tag, Tooltip, Typography } from 'antd';
-import { FC, useCallback, useEffect } from 'react';
+import { FC, ReactNode, useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const { Text } = Typography;
@@ -21,7 +21,7 @@ export interface WebhookProps {
 	entity: WebhookResponse;
 }
 
-const Webhook: FC<WebhookProps> = ({ entity }): JSX.Element => {
+const Webhook: FC<WebhookProps> = ({ entity }): ReactNode => {
 	const [t] = useTranslation('webhook');
 	const { locale } = useLocaleProviderContext();
 

server/web/src/providers/LocaleContextProvider.tsx

@@ -19,7 +19,7 @@ type LocaleProviderProviderProps = {
 
 const LocaleContext = createContext<LocaleProviderContextType | undefined>(undefined);
 
-const LocaleContextProvider: FC<LocaleProviderProviderProps> = ({ children }): React.JSX.Element => {
+const LocaleContextProvider: FC<LocaleProviderProviderProps> = ({ children }): ReactNode => {
 	const { i18n, t } = useTranslation();
 	const [antLocale, setAntLocale] = useState<Locale>();
 	const [language, setLanguage] = useState<string>(Languages.DEFAULT);

server/web/src/router/RequireAuth.tsx

@@ -4,7 +4,7 @@ import { getPageFullPath } from '../utils/urlHelper';
 import { FC, ReactNode } from 'react';
 import { Navigate } from 'react-router';
 
-export const RequireAuth: FC<{ children: ReactNode | ReactNode[] }> = ({ children }): JSX.Element => {
+export const RequireAuth: FC<{ children: ReactNode | ReactNode[] }> = ({ children }): ReactNode => {
 	const isAuthenticated = useAuthenticatedSelector();
 
 	if (isAuthenticated) {

server/web/vite.config.ts

@@ -7,17 +7,11 @@ import svgrPlugin from 'vite-plugin-svgr';
 import viteTsconfigPaths from 'vite-tsconfig-paths';
 
 const stylelintOptions = {
-	fix: true,
+	dev: true
-	test: true,
-	dev: true,
-	build: true
 };
 
 const eslintOptions = {
-	fix: true,
+	dev: true
-	test: true,
-	dev: true,
-	build: true
 };
 
 // https://vitejs.dev/config/
@@ -31,6 +25,7 @@ export default defineConfig({
 	build: {
 		outDir: 'build'
 	},
+	// @ts-ignore
 	test: {
 		globals: true,
 		environment: 'jsdom',