Merge remote-tracking branch 'origin/dev' into dev

# Conflicts:
#	src/components/common/Pager.module.css
#	src/lib/constants.ts
#	src/lib/yup.ts
#	src/pages/api/teams/[id]/users/index.ts
#	src/pages/api/websites/[id]/reports.ts

package.json

@@ -1,6 +1,6 @@
 {
   "name": "umami",
-  "version": "2.6.2",
+  "version": "2.7.0",
   "description": "A simple, fast, privacy-focused alternative to Google Analytics.",
   "author": "Mike Cao <mike@mikecao.com>",
   "license": "MIT",

src/components/input/MonthSelect.js

@@ -12,11 +12,10 @@ import { startOfMonth, endOfMonth } from 'date-fns';
 import Icons from 'components/icons';
 import { useLocale } from 'components/hooks';
 import { formatDate } from 'lib/date';
-import { getDateLocale } from 'lib/lang';
 import styles from './MonthSelect.module.css';
 
 export function MonthSelect({ date = new Date(), onChange }) {
-  const { locale } = useLocale();
+  const { locale, dateLocale } = useLocale();
   const month = formatDate(date, 'MMMM', locale);
   const year = date.getFullYear();
   const ref = useRef();
@@ -40,7 +39,7 @@ export function MonthSelect({ date = new Date(), onChange }) {
             {close => (
               <CalendarMonthSelect
                 date={date}
-                locale={getDateLocale(locale)}
+                locale={dateLocale}
                 onSelect={handleChange.bind(null, close)}
               />
             )}
@@ -57,7 +56,7 @@ export function MonthSelect({ date = new Date(), onChange }) {
             {close => (
               <CalendarYearSelect
                 date={date}
-                locale={getDateLocale(locale)}
+                locale={dateLocale}
                 onSelect={handleChange.bind(null, close)}
               />
             )}

src/components/layout/Page.module.css

@@ -4,4 +4,5 @@
   flex-direction: column;
   background: var(--base50);
   position: relative;
+  height: 100%;
 }

src/components/metrics/DatePickerForm.js

@@ -1,8 +1,7 @@
 import { useState } from 'react';
 import { Button, ButtonGroup, Calendar } from 'react-basics';
-import { isAfter, isBefore, isSameDay } from 'date-fns';
+import { isAfter, isBefore, isSameDay, startOfDay, endOfDay } from 'date-fns';
 import useLocale from 'components/hooks/useLocale';
-import { getDateLocale } from 'lib/lang';
 import { FILTER_DAY, FILTER_RANGE } from 'lib/constants';
 import useMessages from 'components/hooks/useMessages';
 import styles from './DatePickerForm.module.css';
@@ -21,7 +20,7 @@ export function DatePickerForm({
   const [singleDate, setSingleDate] = useState(defaultStartDate);
   const [startDate, setStartDate] = useState(defaultStartDate);
   const [endDate, setEndDate] = useState(defaultEndDate);
-  const { locale } = useLocale();
+  const { dateLocale } = useLocale();
   const { formatMessage, labels } = useMessages();
 
   const disabled =
@@ -31,9 +30,9 @@ export function DatePickerForm({
 
   const handleSave = () => {
     if (selected === FILTER_DAY) {
-      onChange(`range:${singleDate.getTime()}:${singleDate.getTime()}`);
+      onChange(`range:${startOfDay(singleDate).getTime()}:${endOfDay(singleDate).getTime()}`);
     } else {
-      onChange(`range:${startDate.getTime()}:${endDate.getTime()}`);
+      onChange(`range:${startOfDay(startDate).getTime()}:${endOfDay(endDate).getTime()}`);
     }
   };
 
@@ -51,6 +50,7 @@ export function DatePickerForm({
             date={singleDate}
             minDate={minDate}
             maxDate={maxDate}
+            locale={dateLocale}
             onChange={setSingleDate}
           />
         )}
@@ -60,14 +60,14 @@ export function DatePickerForm({
               date={startDate}
               minDate={minDate}
               maxDate={endDate}
-              locale={getDateLocale(locale)}
+              locale={dateLocale}
               onChange={setStartDate}
             />
             <Calendar
               date={endDate}
               minDate={startDate}
               maxDate={maxDate}
-              locale={getDateLocale(locale)}
+              locale={dateLocale}
               onChange={setEndDate}
             />
           </>

src/lib/constants.ts

@@ -30,7 +30,7 @@ export const FILTER_DAY = 'filter-day';
 export const FILTER_RANGE = 'filter-range';
 export const FILTER_REFERRERS = 'filter-referrers';
 export const FILTER_PAGES = 'filter-pages';
-
+export const UNIT_TYPES = ['year', 'month', 'hour', 'day'];
 export const EVENT_COLUMNS = ['url', 'referrer', 'title', 'query', 'event'];
 
 export const SESSION_COLUMNS = [

src/lib/date.ts

@@ -78,7 +78,9 @@ export function parseDateRange(value, locale = 'en-US') {
     const endDate = new Date(+endTime);
 
     return {
-      ...getDateRangeValues(startDate, endDate),
+      startDate,
+      endDate,
+      unit: getMinimumUnit(startDate, endDate),
       value,
     };
   }
@@ -255,14 +257,6 @@ export function getMinimumUnit(startDate, endDate) {
   return 'year';
 }
 
-export function getDateRangeValues(startDate, endDate) {
-  return {
-    startDate: startOfDay(startDate),
-    endDate: endOfDay(endDate),
-    unit: getMinimumUnit(startDate, endDate),
-  };
-}
-
 export function getDateFromString(str) {
   const [ymd, hms] = str.split(' ');
   const [year, month, day] = ymd.split('-');

src/lib/yup.ts

@@ -0,0 +1,15 @@
+import moment from 'moment';
+import * as yup from 'yup';
+import { UNIT_TYPES } from './constants';
+
+export const TimezoneTest = yup.string().test(
+  'timezone',
+  () => `Invalid timezone`,
+  value => moment.tz.zone(value) !== null,
+);
+
+export const UnitTypeTest = yup.string().test(
+  'unit',
+  () => `Invalid unit`,
+  value => UNIT_TYPES.includes(value),
+);

src/pages/api/reports/retention.ts

@@ -1,6 +1,7 @@
 import { canViewWebsite } from 'lib/auth';
 import { useAuth, useCors, useValidate } from 'lib/middleware';
 import { NextApiRequestQueryBody } from 'lib/types';
+import { TimezoneTest } from 'lib/yup';
 import { NextApiResponse } from 'next';
 import { methodNotAllowed, ok, unauthorized } from 'next-basics';
 import { getRetention } from 'queries';
@@ -8,7 +9,7 @@ import * as yup from 'yup';
 
 export interface RetentionRequestBody {
   websiteId: string;
-  dateRange: { startDate: string; endDate: string };
+  dateRange: { startDate: string; endDate: string; timezone: string };
 }
 
 const schema = {
@@ -19,6 +20,7 @@ const schema = {
       .shape({
         startDate: yup.date().required(),
         endDate: yup.date().required(),
+        timezone: TimezoneTest,
       })
       .required(),
   }),
@@ -37,7 +39,7 @@ export default async (
   if (req.method === 'POST') {
     const {
       websiteId,
-      dateRange: { startDate, endDate },
+      dateRange: { startDate, endDate, timezone },
     } = req.body;
 
     if (!(await canViewWebsite(req.auth, websiteId))) {
@@ -47,6 +49,7 @@ export default async (
     const data = await getRetention(websiteId, {
       startDate: new Date(startDate),
       endDate: new Date(endDate),
+      timezone,
     });
 
     return ok(res, data);

src/pages/api/teams/[id]/users/[userId].ts

@@ -5,6 +5,7 @@ import { NextApiResponse } from 'next';
 import { methodNotAllowed, ok, unauthorized } from 'next-basics';
 import { deleteTeamUser } from 'queries';
 import * as yup from 'yup';
+
 export interface TeamUserRequestQuery {
   id: string;
   userId: string;

src/pages/api/teams/[id]/users/index.ts

@@ -1,5 +1,6 @@
+import * as yup from 'yup';
 import { canViewTeam } from 'lib/auth';
-import { useAuth } from 'lib/middleware';
+import { useAuth, useValidate } from 'lib/middleware';
 import { NextApiRequestQueryBody, SearchFilter } from 'lib/types';
 import { NextApiResponse } from 'next';
 import { methodNotAllowed, ok, unauthorized } from 'next-basics';
@@ -9,16 +10,19 @@ export interface TeamUserRequestQuery extends SearchFilter {
   id: string;
 }
 
-export interface TeamUserRequestBody {
-  email: string;
-  roleId: string;
-}
+const schema = {
+  GET: yup.object().shape({
+    id: yup.string().uuid().required(),
+  }),
+};
 
 export default async (
-  req: NextApiRequestQueryBody<TeamUserRequestQuery, TeamUserRequestBody>,
+  req: NextApiRequestQueryBody<TeamUserRequestQuery, any>,
   res: NextApiResponse,
 ) => {
   await useAuth(req, res);
+  req.yup = schema;
+  await useValidate(req, res);
 
   const { id: teamId } = req.query;
 

src/pages/api/websites/[id]/events.ts

@@ -1,32 +1,29 @@
-import { WebsiteMetric, NextApiRequestQueryBody } from 'lib/types';
 import { canViewWebsite } from 'lib/auth';
 import { useAuth, useCors, useValidate } from 'lib/middleware';
-import moment from 'moment-timezone';
-import { NextApiResponse } from 'next';
-import { badRequest, methodNotAllowed, ok, unauthorized } from 'next-basics';
-import { getEventMetrics } from 'queries';
 import { parseDateRangeQuery } from 'lib/query';
-
-const unitTypes = ['year', 'month', 'hour', 'day'];
+import { NextApiRequestQueryBody, WebsiteMetric } from 'lib/types';
+import { TimezoneTest, UnitTypeTest } from 'lib/yup';
+import { NextApiResponse } from 'next';
+import { methodNotAllowed, ok, unauthorized } from 'next-basics';
+import { getEventMetrics } from 'queries';
+import * as yup from 'yup';
 
 export interface WebsiteEventsRequestQuery {
   id: string;
   startAt: string;
   endAt: string;
-  unit: string;
-  timezone: string;
+  unit?: string;
+  timezone?: string;
   url: string;
 }
 
-import * as yup from 'yup';
-
 const schema = {
   GET: yup.object().shape({
     id: yup.string().uuid().required(),
     startAt: yup.number().integer().required(),
     endAt: yup.number().integer().moreThan(yup.ref('startAt')).required(),
-    unit: yup.string().required(),
-    timezone: yup.string().required(),
+    unit: UnitTypeTest,
+    timezone: TimezoneTest,
     url: yup.string(),
   }),
 };
@@ -49,10 +46,6 @@ export default async (
       return unauthorized(res);
     }
 
-    if (!moment.tz.zone(timezone) || !unitTypes.includes(unit)) {
-      return badRequest(res);
-    }
-
     const events = await getEventMetrics(websiteId, {
       startDate,
       endDate,

src/pages/api/websites/[id]/index.ts

@@ -22,6 +22,12 @@ const schema = {
   GET: yup.object().shape({
     id: yup.string().uuid().required(),
   }),
+  POST: yup.object().shape({
+    id: yup.string().uuid().required(),
+    name: yup.string().required(),
+    domain: yup.string().required(),
+    shareId: yup.string().matches(SHARE_ID_REGEX, { excludeEmptyString: true }),
+  }),
 };
 
 export default async (
@@ -55,10 +61,6 @@ export default async (
 
     let website;
 
-    if (shareId && !shareId.match(SHARE_ID_REGEX)) {
-      return serverError(res, 'Invalid share ID.');
-    }
-
     try {
       website = await updateWebsite(websiteId, { name, domain, shareId });
     } catch (e: any) {

src/pages/api/websites/[id]/metrics.ts

@@ -33,6 +33,18 @@ const schema = {
     type: yup.string().required(),
     startAt: yup.number().required(),
     endAt: yup.number().required(),
+    url: yup.string(),
+    referrer: yup.string(),
+    title: yup.string(),
+    query: yup.string(),
+    os: yup.string(),
+    browser: yup.string(),
+    device: yup.string(),
+    country: yup.string(),
+    region: yup.string(),
+    city: yup.string(),
+    language: yup.string(),
+    event: yup.string(),
   }),
 };
 

src/pages/api/websites/[id]/pageviews.ts

@@ -1,18 +1,17 @@
-import moment from 'moment-timezone';
-import { NextApiResponse } from 'next';
-import { badRequest, methodNotAllowed, ok, unauthorized } from 'next-basics';
-import { NextApiRequestQueryBody, WebsitePageviews } from 'lib/types';
 import { canViewWebsite } from 'lib/auth';
 import { useAuth, useCors, useValidate } from 'lib/middleware';
-import { getPageviewStats, getSessionStats } from 'queries';
 import { parseDateRangeQuery } from 'lib/query';
+import { NextApiRequestQueryBody, WebsitePageviews } from 'lib/types';
+import { NextApiResponse } from 'next';
+import { methodNotAllowed, ok, unauthorized } from 'next-basics';
+import { getPageviewStats, getSessionStats } from 'queries';
 
 export interface WebsitePageviewRequestQuery {
   id: string;
   startAt: number;
   endAt: number;
-  unit: string;
-  timezone: string;
+  unit?: string;
+  timezone?: string;
   url?: string;
   referrer?: string;
   title?: string;
@@ -24,10 +23,24 @@ export interface WebsitePageviewRequestQuery {
   city?: string;
 }
 
+import { TimezoneTest, UnitTypeTest } from 'lib/yup';
 import * as yup from 'yup';
 const schema = {
   GET: yup.object().shape({
     id: yup.string().uuid().required(),
+    startAt: yup.number().required(),
+    endAt: yup.number().required(),
+    unit: UnitTypeTest,
+    timezone: TimezoneTest,
+    url: yup.string(),
+    referrer: yup.string(),
+    title: yup.string(),
+    os: yup.string(),
+    browser: yup.string(),
+    device: yup.string(),
+    country: yup.string(),
+    region: yup.string(),
+    city: yup.string(),
   }),
 };
 
@@ -62,10 +75,6 @@ export default async (
 
     const { startDate, endDate, unit } = await parseDateRangeQuery(req);
 
-    if (!moment.tz.zone(timezone)) {
-      return badRequest(res);
-    }
-
     const filters = {
       startDate,
       endDate,

src/pages/api/websites/[id]/reset.ts

@@ -4,14 +4,14 @@ import { useAuth, useCors, useValidate } from 'lib/middleware';
 import { NextApiResponse } from 'next';
 import { methodNotAllowed, ok, unauthorized } from 'next-basics';
 import { resetWebsite } from 'queries';
+import * as yup from 'yup';
 
 export interface WebsiteResetRequestQuery {
   id: string;
 }
 
-import * as yup from 'yup';
 const schema = {
-  GET: yup.object().shape({
+  POST: yup.object().shape({
     id: yup.string().uuid().required(),
   }),
 };
@@ -22,7 +22,6 @@ export default async (
 ) => {
   await useCors(req, res);
   await useAuth(req, res);
-
   req.yup = schema;
   await useValidate(req, res);
 

src/pages/api/websites/[id]/stats.ts

@@ -11,23 +11,36 @@ export interface WebsiteStatsRequestQuery {
   id: string;
   startAt: number;
   endAt: number;
-  url: string;
-  referrer: string;
-  title: string;
-  query: string;
-  event: string;
-  os: string;
-  browser: string;
-  device: string;
-  country: string;
-  region: string;
-  city: string;
+  url?: string;
+  referrer?: string;
+  title?: string;
+  query?: string;
+  event?: string;
+  os?: string;
+  browser?: string;
+  device?: string;
+  country?: string;
+  region?: string;
+  city?: string;
 }
 
 import * as yup from 'yup';
 const schema = {
   GET: yup.object().shape({
     id: yup.string().uuid().required(),
+    startAt: yup.number().required(),
+    endAt: yup.number().required(),
+    url: yup.string(),
+    referrer: yup.string(),
+    title: yup.string(),
+    query: yup.string(),
+    event: yup.string(),
+    os: yup.string(),
+    browser: yup.string(),
+    device: yup.string(),
+    country: yup.string(),
+    region: yup.string(),
+    city: yup.string(),
   }),
 };
 

src/queries/admin/user.ts

@@ -1,6 +1,6 @@
 import { Prisma } from '@prisma/client';
 import cache from 'lib/cache';
-import { ROLES, USER_FILTER_TYPES } from 'lib/constants';
+import { ROLES } from 'lib/constants';
 import prisma from 'lib/prisma';
 import { FilterResult, Role, User, UserSearchFilter } from 'lib/types';
 import { getRandomChars } from 'next-basics';
@@ -37,10 +37,10 @@ export async function getUserByUsername(username: string, options: GetUserOption
 }
 
 export async function getUsers(
-  searchFilter: UserSearchFilter,
+  params: UserSearchFilter,
   options?: { include?: Prisma.UserInclude },
 ): Promise<FilterResult<User[]>> {
-  const { teamId, filter, filterType = USER_FILTER_TYPES.all } = searchFilter;
+  const { teamId, query } = params;
   const mode = prisma.getSearchMode();
 
   const where: Prisma.UserWhereInput = {
@@ -51,17 +51,14 @@ export async function getUsers(
         },
       },
     }),
-    ...(filter && {
+    ...(query && {
       AND: {
         OR: [
           {
-            ...((filterType === USER_FILTER_TYPES.all ||
-              filterType === USER_FILTER_TYPES.username) && {
-              username: {
-                startsWith: filter,
-                ...mode,
-              },
-            }),
+            username: {
+              contains: query,
+              ...mode,
+            },
           },
         ],
       },
@@ -70,7 +67,7 @@ export async function getUsers(
 
   const [pageFilters, getParameters] = prisma.getPageFilters({
     orderBy: 'username',
-    ...searchFilter,
+    ...params,
   });
 
   const users = await prisma.client.user

src/queries/analytics/reports/getRetention.ts

@@ -8,7 +8,7 @@ export async function getRetention(
     filters: {
       startDate: Date;
       endDate: Date;
-      timezone: string;
+      timezone?: string;
     },
   ]
 ) {
@@ -23,7 +23,7 @@ async function relationalQuery(
   filters: {
     startDate: Date;
     endDate: Date;
-    timezone: string;
+    timezone?: string;
   },
 ): Promise<
   {
@@ -103,7 +103,7 @@ async function clickhouseQuery(
   filters: {
     startDate: Date;
     endDate: Date;
-    timezone: string;
+    timezone?: string;
   },
 ): Promise<
   {

src/tracker/index.js

@@ -187,7 +187,8 @@
       headers,
     })
       .then(res => res.text())
-      .then(text => (cache = text));
+      .then(text => (cache = text))
+      .catch(() => {}); // no-op, gulp error
   };
 
   const track = (obj, data) => {