Merge pull request umami-software#2429 from umami-software/dev

v2.9.0

.eslintrc.json

@@ -4,6 +4,13 @@
     "es2020": true,
     "node": true
   },
+  "extends": [
+    "eslint:recommended",
+    "plugin:prettier/recommended",
+    "plugin:import/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "next"
+  ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaFeatures": {
@@ -12,13 +19,6 @@
     "ecmaVersion": 11,
     "sourceType": "module"
   },
-  "extends": [
-    "eslint:recommended",
-    "plugin:prettier/recommended",
-    "plugin:import/recommended",
-    "plugin:@typescript-eslint/recommended",
-    "next"
-  ],
   "plugins": ["@typescript-eslint", "prettier"],
   "settings": {
     "import/resolver": {

.github/workflows/ci.yml

@@ -16,10 +16,6 @@ jobs:
     strategy:
       matrix:
         include:
-        - node-version: 16.x
-          db-type: postgresql
-        - node-version: 16.x
-          db-type: mysql
         - node-version: 18.x
           db-type: postgresql
         - node-version: 18.x

Dockerfile

@@ -35,7 +35,9 @@ ENV NEXT_TELEMETRY_DISABLED 1
 RUN addgroup --system --gid 1001 nodejs
 RUN adduser --system --uid 1001 nextjs
 
-RUN yarn add npm-run-all dotenv prisma semver
+RUN set -x \
+    && apk add --no-cache curl \
+    && yarn add npm-run-all dotenv prisma semver
 
 # You only need to copy next.config.js if you are NOT using the default configuration
 COPY --from=builder /app/next.config.js .

docker-compose.yml

@@ -13,6 +13,11 @@ services:
       db:
         condition: service_healthy
     restart: always
+    healthcheck:
+      test: ["CMD-SHELL", "curl http://localhost:3000/api/heartbeat"]
+      interval: 5s
+      timeout: 5s
+      retries: 5
   db:
     image: postgres:15-alpine
     environment:

next.config.js

@@ -3,27 +3,26 @@ require('dotenv').config();
 const path = require('path');
 const pkg = require('./package.json');
 
-const contentSecurityPolicy = `
-  default-src 'self';
-  img-src *;
-  script-src 'self' 'unsafe-eval' 'unsafe-inline';
-  style-src 'self' 'unsafe-inline';
-  connect-src 'self' api.umami.is;
-  frame-ancestors 'self' ${process.env.ALLOWED_FRAME_URLS};
-`;
+const contentSecurityPolicy = [
+  `default-src 'self'`,
+  `img-src *`,
+  `script-src 'self' 'unsafe-eval' 'unsafe-inline'`,
+  `style-src 'self' 'unsafe-inline'`,
+  `connect-src 'self' api.umami.is`,
+  `frame-ancestors 'self' ${process.env.ALLOWED_FRAME_URLS || ''}`,
+];
 
 const headers = [
   {
     key: 'X-DNS-Prefetch-Control',
     value: 'on',
   },
-  {
-    key: 'X-Frame-Options',
-    value: 'SAMEORIGIN',
-  },
   {
     key: 'Content-Security-Policy',
-    value: contentSecurityPolicy.replace(/\s{2,}/g, ' ').trim(),
+    value: contentSecurityPolicy
+      .join(';')
+      .replace(/\s{2,}/g, ' ')
+      .trim(),
   },
 ];
 
@@ -81,14 +80,14 @@ const config = {
   reactStrictMode: false,
   env: {
     basePath: basePath || '',
-    cloudMode: !!process.env.CLOUD_MODE,
-    cloudUrl: process.env.CLOUD_URL,
+    cloudMode: process.env.CLOUD_MODE || '',
+    cloudUrl: process.env.CLOUD_URL || '',
     configUrl: '/config',
     currentVersion: pkg.version,
-    defaultLocale: process.env.DEFAULT_LOCALE,
-    disableLogin: process.env.DISABLE_LOGIN,
-    disableUI: process.env.DISABLE_UI,
-    isProduction: process.env.NODE_ENV === 'production',
+    defaultLocale: process.env.DEFAULT_LOCALE || '',
+    disableLogin: process.env.DISABLE_LOGIN || '',
+    disableUI: process.env.DISABLE_UI || '',
+    hostUrl: process.env.HOST_URL || '',
   },
   basePath,
   output: 'standalone',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "umami",
-  "version": "2.8.0",
+  "version": "2.9.0",
   "description": "A simple, fast, privacy-focused alternative to Google Analytics.",
   "author": "Mike Cao <[email protected]>",
   "license": "MIT",
@@ -63,11 +63,12 @@
   "dependencies": {
     "@clickhouse/client": "^0.2.2",
     "@fontsource/inter": "^4.5.15",
-    "@prisma/client": "5.3.1",
+    "@prisma/client": "5.6.0",
+    "@prisma/extension-read-replicas": "^0.3.0",
     "@react-spring/web": "^9.7.3",
-    "@tanstack/react-query": "^4.33.0",
-    "@umami/prisma-client": "^0.3.0",
-    "@umami/redis-client": "^0.16.0",
+    "@tanstack/react-query": "^5.12.2",
+    "@umami/prisma-client": "^0.8.0",
+    "@umami/redis-client": "^0.18.0",
     "chalk": "^4.1.1",
     "chart.js": "^4.2.1",
     "chartjs-adapter-date-fns": "^3.0.0",
@@ -92,17 +93,17 @@
     "kafkajs": "^2.1.0",
     "maxmind": "^4.3.6",
     "moment-timezone": "^0.5.35",
-    "next": "^13.5.3",
-    "next-basics": "^0.37.0",
+    "next": "14.0.4",
+    "next-basics": "^0.39.0",
     "node-fetch": "^3.2.8",
     "npm-run-all": "^4.1.5",
-    "prisma": "5.3.1",
+    "prisma": "5.6.0",
     "react": "^18.2.0",
-    "react-basics": "^0.105.0",
+    "react-basics": "^0.114.0",
     "react-beautiful-dnd": "^13.1.0",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^4.0.4",
-    "react-intl": "^6.4.7",
+    "react-intl": "^6.5.5",
     "react-simple-maps": "^2.3.0",
     "react-use-measure": "^2.0.4",
     "react-window": "^1.8.6",
@@ -125,9 +126,10 @@
     "@rollup/plugin-replace": "^5.0.2",
     "@svgr/rollup": "^8.1.0",
     "@svgr/webpack": "^8.1.0",
-    "@types/node": "^18.11.9",
-    "@types/react": "^18.0.25",
-    "@types/react-dom": "^18.0.8",
+    "@types/node": "^20.9.0",
+    "@types/react": "^18.2.41",
+    "@types/react-dom": "^18.2.17",
+    "@types/react-window": "^1.8.8",
     "@typescript-eslint/eslint-plugin": "^6.7.3",
     "@typescript-eslint/parser": "^6.7.3",
     "cross-env": "^7.0.3",

src/app/(main)/Shell.tsx → src/app/(main)/App.tsx

@@ -1,14 +1,23 @@
 'use client';
+import { Loading } from 'react-basics';
 import Script from 'next/script';
 import { usePathname } from 'next/navigation';
-import UpdateNotice from 'components/common/UpdateNotice';
-import { useRequireLogin, useConfig } from 'components/hooks';
+import { useLogin, useConfig } from 'components/hooks';
+import UpdateNotice from './UpdateNotice';
 
-export function Shell({ children }) {
-  const { user } = useRequireLogin();
+export function App({ children }) {
+  const { user, isLoading, error } = useLogin();
   const config = useConfig();
   const pathname = usePathname();
 
+  if (isLoading) {
+    return <Loading />;
+  }
+
+  if (error) {
+    window.location.href = `${process.env.basePath || ''}/login`;
+  }
+
   if (!user || !config) {
     return null;
   }
@@ -24,4 +33,4 @@ export function Shell({ children }) {
   );
 }
 
-export default Shell;
+export default App;

src/app/(main)/NavBar.js → src/app/(main)/NavBar.tsx

@@ -14,6 +14,7 @@ import styles from './NavBar.module.css';
 export function NavBar() {
   const pathname = usePathname();
   const { formatMessage, labels } = useMessages();
+  const cloudMode = Boolean(process.env.cloudMode);
 
   const links = [
     { label: formatMessage(labels.dashboard), url: '/dashboard' },
@@ -22,6 +23,40 @@ export function NavBar() {
     { label: formatMessage(labels.settings), url: '/settings' },
   ].filter(n => n);
 
+  const menuItems = [
+    {
+      label: formatMessage(labels.dashboard),
+      url: '/dashboard',
+    },
+    !cloudMode && {
+      label: formatMessage(labels.settings),
+      url: '/settings',
+      children: [
+        {
+          label: formatMessage(labels.websites),
+          url: '/settings/websites',
+        },
+        {
+          label: formatMessage(labels.teams),
+          url: '/settings/teams',
+        },
+        {
+          label: formatMessage(labels.users),
+          url: '/settings/users',
+        },
+        {
+          label: formatMessage(labels.profile),
+          url: '/settings/profile',
+        },
+      ],
+    },
+    cloudMode && {
+      label: formatMessage(labels.profile),
+      url: '/settings/profile',
+    },
+    !cloudMode && { label: formatMessage(labels.logout), url: '/logout' },
+  ].filter(n => n);
+
   return (
     <div className={styles.navbar}>
       <div className={styles.logo}>
@@ -49,7 +84,7 @@ export function NavBar() {
         <ProfileButton />
       </div>
       <div className={styles.mobile}>
-        <HamburgerButton />
+        <HamburgerButton menuItems={menuItems} />
       </div>
     </div>
   );

src/app/(main)/console/TestConsole.js → src/app/(main)/console/TestConsole.tsx

@@ -1,30 +1,33 @@
 'use client';
+import { Button } from 'react-basics';
+import Head from 'next/head';
+import Link from 'next/link';
+import Script from 'next/script';
 import WebsiteSelect from 'components/input/WebsiteSelect';
 import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
 import EventsChart from 'components/metrics/EventsChart';
-import WebsiteChart from '../../(main)/websites/[id]/WebsiteChart';
+import WebsiteChart from 'app/(main)/websites/[id]/WebsiteChart';
 import useApi from 'components/hooks/useApi';
-import Head from 'next/head';
-import Link from 'next/link';
 import useNavigation from 'components/hooks/useNavigation';
-import Script from 'next/script';
-import { Button } from 'react-basics';
 import styles from './TestConsole.module.css';
 
-export function TestConsole({ websiteId }) {
+export function TestConsole({ websiteId }: { websiteId: string }) {
   const { get, useQuery } = useApi();
-  const { data, isLoading, error } = useQuery(['websites:me'], () => get('/me/websites'));
+  const { data, isLoading, error } = useQuery({
+    queryKey: ['websites:me'],
+    queryFn: () => get('/me/websites'),
+  });
   const { router } = useNavigation();
 
-  function handleChange(value) {
+  function handleChange(value: string) {
     router.push(`/console/${value}`);
   }
 
   function handleClick() {
-    window.umami.track({ url: '/page-view', referrer: 'https://www.google.com' });
-    window.umami.track('track-event-no-data');
-    window.umami.track('track-event-with-data', {
+    window['umami'].track({ url: '/page-view', referrer: 'https://www.google.com' });
+    window['umami'].track('track-event-no-data');
+    window['umami'].track('track-event-with-data', {
       test: 'test-data',
       boolean: true,
       booleanError: 'true',
@@ -44,7 +47,7 @@ export function TestConsole({ websiteId }) {
   }
 
   function handleIdentifyClick() {
-    window.umami.identify({
+    window['umami'].identify({
       userId: 123,
       name: 'brian',
       number: Math.random() * 100,
@@ -71,7 +74,7 @@ export function TestConsole({ websiteId }) {
   const website = data?.data.find(({ id }) => websiteId === id);
 
   return (
-    <Page loading={isLoading} error={error}>
+    <Page isLoading={isLoading} error={error}>
       <Head>
         <title>{website ? `${website.name} | Umami Console` : 'Umami Console'}</title>
       </Head>
@@ -113,7 +116,7 @@ export function TestConsole({ websiteId }) {
             </div>
             <div>
               <div className={styles.header}>Click events</div>
-              <Button id="send-event-button" data-umami-event="button-click" variant="action">
+              <Button id="send-event-button" data-umami-event="button-click" variant="primary">
                 Send event
               </Button>
               <p />
@@ -122,18 +125,18 @@ export function TestConsole({ websiteId }) {
                 data-umami-event="button-click"
                 data-umami-event-name="bob"
                 data-umami-event-id="123"
-                variant="action"
+                variant="primary"
               >
                 Send event with data
               </Button>
             </div>
             <div>
               <div className={styles.header}>Javascript events</div>
-              <Button id="manual-button" variant="action" onClick={handleClick}>
+              <Button id="manual-button" variant="primary" onClick={handleClick}>
                 Run script
               </Button>
               <p />
-              <Button id="manual-button" variant="action" onClick={handleIdentifyClick}>
+              <Button id="manual-button" variant="primary" onClick={handleIdentifyClick}>
                 Run identify
               </Button>
             </div>