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

v2.4.0

.github/workflows/ci.yml

@@ -16,14 +16,14 @@ jobs:
     strategy:
       matrix:
         include:
-        - node-version: 14.x
-          db-type: postgresql
-        - node-version: 14.x
-          db-type: mysql
         - 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
+          db-type: mysql
 
     steps:
     - uses: actions/checkout@v3

.github/workflows/stale-issues.yml

@@ -0,0 +1,22 @@
+name: Close stale issues
+on:
+  schedule:
+    - cron: '30 1 * * *'
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+      pull-requests: write
+    steps:
+      - uses: actions/stale@v8
+        with:
+          days-before-issue-stale: 60
+          days-before-issue-close: 7
+          stale-issue-label: 'stale'
+          stale-issue-message: 'This issue is stale because it has been open for 60 days with no activity.'
+          close-issue-message: 'This issue was closed because it has been inactive for 7 days since being marked as stale.'
+          days-before-pr-stale: -1
+          days-before-pr-close: -1
+          repo-token: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -25,6 +25,7 @@ node_modules
 *.iml
 *.log
 .vscode
+.tool-versions
 
 # debug
 npm-debug.log*

components/common/ConfirmDeleteForm.js

@@ -0,0 +1,29 @@
+import { useState } from 'react';
+import { Button, LoadingButton, Form, FormButtons } from 'react-basics';
+import useMessages from 'hooks/useMessages';
+
+export function ConfirmDeleteForm({ name, onConfirm, onClose }) {
+  const [loading, setLoading] = useState(false);
+  const { formatMessage, labels, messages, FormattedMessage } = useMessages();
+
+  const handleConfirm = () => {
+    setLoading(true);
+    onConfirm();
+  };
+
+  return (
+    <Form>
+      <p>
+        <FormattedMessage {...messages.confirmDelete} values={{ target: <b>{name}</b> }} />
+      </p>
+      <FormButtons flex>
+        <LoadingButton loading={loading} onClick={handleConfirm} variant="danger">
+          {formatMessage(labels.delete)}
+        </LoadingButton>
+        <Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
+      </FormButtons>
+    </Form>
+  );
+}
+
+export default ConfirmDeleteForm;

components/common/LinkButton.js

@@ -0,0 +1,12 @@
+import Link from 'next/link';
+import { Icon, Icons, Text } from 'react-basics';
+import styles from './LinkButton.module.css';
+
+export default function LinkButton({ href, icon, children }) {
+  return (
+    <Link className={styles.button} href={href}>
+      <Icon>{icon || <Icons.ArrowRight />}</Icon>
+      <Text>{children}</Text>
+    </Link>
+  );
+}

components/common/LinkButton.module.css

@@ -0,0 +1,28 @@
+.button {
+  display: flex;
+  align-items: center;
+  align-self: flex-start;
+  white-space: nowrap;
+  gap: var(--size200);
+  font-family: inherit;
+  color: var(--base900);
+  background: var(--base100);
+  border: 1px solid transparent;
+  border-radius: var(--border-radius);
+  min-height: var(--base-height);
+  padding: 0 var(--size600);
+  position: relative;
+  cursor: pointer;
+}
+
+.button:hover {
+  background: var(--base200);
+}
+
+.button:active {
+  background: var(--base300);
+}
+
+.button:visited {
+  color: var(--base900);
+}

components/common/UpdateNotice.js

@@ -1,15 +1,23 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useEffect, useCallback, useState } from 'react';
 import { Button, Row, Column } from 'react-basics';
 import { setItem } from 'next-basics';
 import useStore, { checkVersion } from 'store/version';
 import { REPO_URL, VERSION_CHECK } from 'lib/constants';
 import styles from './UpdateNotice.module.css';
 import useMessages from 'hooks/useMessages';
+import { useRouter } from 'next/router';
 
-export function UpdateNotice() {
+export function UpdateNotice({ user, config }) {
   const { formatMessage, labels, messages } = useMessages();
   const { latest, checked, hasUpdate, releaseUrl } = useStore();
-  const [dismissed, setDismissed] = useState(false);
+  const { pathname } = useRouter();
+  const [dismissed, setDismissed] = useState(checked);
+  const allowUpdate =
+    user?.isAdmin &&
+    !config?.updatesDisabled &&
+    !config?.cloudMode &&
+    !pathname.includes('/share/') &&
+    !dismissed;
 
   const updateCheck = useCallback(() => {
     setItem(VERSION_CHECK, { version: latest, time: Date.now() });
@@ -27,12 +35,12 @@ export function UpdateNotice() {
   }
 
   useEffect(() => {
-    if (!checked) {
+    if (allowUpdate) {
       checkVersion();
     }
-  }, [checked]);
+  }, [allowUpdate]);
 
-  if (!hasUpdate || dismissed) {
+  if (!allowUpdate || !hasUpdate) {
     return null;
   }
 

components/common/UpdateNotice.module.css

@@ -4,7 +4,7 @@
   gap: 20px;
   margin: 20px auto;
   justify-self: center;
-  background: #fff;
+  background: var(--base50);
   padding: 20px;
   border: 1px solid var(--base300);
   border-radius: var(--border-radius);
@@ -15,7 +15,8 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  font-weight: 600;
+  color: var(--font-color100);
+  font-weight: 700;
 }
 
 .buttons {

components/icons.ts

@@ -1,5 +1,7 @@
 import { Icons } from 'react-basics';
 import AddUser from 'assets/add-user.svg';
+import Bars from 'assets/bars.svg';
+import BarChart from 'assets/bar-chart.svg';
 import Bolt from 'assets/bolt.svg';
 import Calendar from 'assets/calendar.svg';
 import Clock from 'assets/clock.svg';
@@ -22,6 +24,8 @@ import Visitor from 'assets/visitor.svg';
 const icons = {
   ...Icons,
   AddUser,
+  Bars,
+  BarChart,
   Bolt,
   Calendar,
   Clock,

components/input/RefreshButton.js

@@ -10,11 +10,7 @@ export function RefreshButton({ websiteId, isLoading }) {
 
   function handleClick() {
     if (!isLoading && dateRange) {
-      if (/^\d+/.test(dateRange.value)) {
-        setWebsiteDateRange(websiteId, dateRange.value);
-      } else {
-        setWebsiteDateRange(websiteId, dateRange);
-      }
+      setWebsiteDateRange(websiteId, dateRange);
     }
   }
 

components/input/WebsiteDateFilter.js

@@ -1,25 +1,13 @@
-import useApi from 'hooks/useApi';
 import useDateRange from 'hooks/useDateRange';
 import DateFilter from './DateFilter';
 import styles from './WebsiteDateFilter.module.css';
 
 export default function WebsiteDateFilter({ websiteId }) {
-  const { get } = useApi();
   const [dateRange, setDateRange] = useDateRange(websiteId);
   const { value, startDate, endDate } = dateRange;
 
   const handleChange = async value => {
-    if (value === 'all' && websiteId) {
-      const data = await get(`/websites/${websiteId}`);
-
-      if (data) {
-        const start = new Date(data.createdAt).getTime();
-        const end = Date.now();
-        setDateRange(`range:${start}:${end}`);
-      }
-    } else if (value !== 'all') {
-      setDateRange(value);
-    }
+    setDateRange(value);
   };
 
   return (

components/layout/AppLayout.js

@@ -11,17 +11,14 @@ import styles from './AppLayout.module.css';
 export function AppLayout({ title, children }) {
   const { user } = useRequireLogin();
   const config = useConfig();
-  const { pathname } = useRouter();
 
   if (!user || !config) {
     return null;
   }
 
-  const allowUpdate = user?.isAdmin && !config?.updatesDisabled && !pathname.includes('/share/');
-
   return (
     <div className={styles.layout} data-app-version={CURRENT_VERSION}>
-      {allowUpdate && <UpdateNotice />}
+      <UpdateNotice user={user} config={config} />
       <Head>
         <title>{title ? `${title} | umami` : 'umami'}</title>
       </Head>

components/layout/AppLayout.module.css

@@ -8,7 +8,6 @@
 .nav {
   height: 60px;
   width: 100vw;
-  z-index: var(--z-index-overlay);
   grid-column: 1;
   grid-row: 1 / 2;
 }

components/messages.js

@@ -81,6 +81,7 @@ export const labels = defineMessages({
   devices: { id: 'label.devices', defaultMessage: 'Devices' },
   countries: { id: 'label.countries', defaultMessage: 'Countries' },
   languages: { id: 'label.languages', defaultMessage: 'Languages' },
+  event: { id: 'label.event', defaultMessage: 'Event' },
   events: { id: 'label.events', defaultMessage: 'Events' },
   query: { id: 'label.query', defaultMessage: 'Query' },
   queryParameters: { id: 'label.query-parameters', defaultMessage: 'Query parameters' },
@@ -159,6 +160,8 @@ export const labels = defineMessages({
   value: { id: 'labels.value', defaultMessage: 'Value' },
   overview: { id: 'labels.overview', defaultMessage: 'Overview' },
   totalRecords: { id: 'labels.total-records', defaultMessage: 'Total records' },
+  insights: { id: 'label.insights', defaultMessage: 'Insights' },
+  dropoff: { id: 'label.dropoff', defaultMessage: 'Dropoff' },
 });
 
 export const messages = defineMessages({
@@ -270,4 +273,8 @@ export const messages = defineMessages({
     id: 'message.no-event-data',
     defaultMessage: 'No event data is available.',
   },
+  newVersionAvailable: {
+    id: 'new-version-available',
+    defaultMessage: 'A new version of Umami {version} is available!',
+  },
 });

components/metrics/ActiveUsers.js

@@ -29,7 +29,7 @@ export function ActiveUsers({ websiteId, value, refetchInterval = 60000 }) {
   }
 
   return (
-    <StatusLight variant="success">
+    <StatusLight className={styles.container} variant="success">
       <div className={styles.text}>{formatMessage(messages.activeUsers, { x: count })}</div>
     </StatusLight>
   );

components/metrics/ActiveUsers.module.css

@@ -1,10 +1,14 @@
 .container {
   display: flex;
   align-items: center;
+  margin-left: 20px;
 }
 
 .text {
   display: flex;
+  white-space: nowrap;
+  font-size: var(--font-size-md);
+  font-weight: 400;
 }
 
 .value {

components/metrics/PageviewsChart.js

@@ -3,7 +3,7 @@ import BarChart from './BarChart';
 import { useLocale, useTheme, useMessages } from 'hooks';
 import { renderDateLabels, renderStatusTooltipPopup } from 'lib/charts';
 
-export function PageviewsChart({ websiteId, data, unit, className, loading, ...props }) {
+export function PageviewsChart({ websiteId, data, unit, loading, ...props }) {
   const { formatMessage, labels } = useMessages();
   const { colors } = useTheme();
   const { locale } = useLocale();
@@ -31,7 +31,6 @@ export function PageviewsChart({ websiteId, data, unit, className, loading, ...p
     <BarChart
       {...props}
       key={websiteId}
-      className={className}
       datasets={datasets}
       unit={unit}
       loading={loading}

components/pages/dashboard/Dashboard.js

@@ -18,7 +18,9 @@ export function Dashboard({ userId }) {
   const { showCharts, limit, editing } = dashboard;
   const [max, setMax] = useState(limit);
   const { get, useQuery } = useApi();
-  const { data, isLoading, error } = useQuery(['websites'], () => get('/websites', { userId }));
+  const { data, isLoading, error } = useQuery(['websites'], () =>
+    get('/websites', { userId, includeTeams: 1 }),
+  );
   const hasData = data && data.length !== 0;
   const { dir } = useLocale();