Merge branch 'dev' into analytics

.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

src/app/(main)/reports/[id]/Report.tsx

@@ -1,5 +1,6 @@
 'use client';
 import { createContext, ReactNode } from 'react';
+import { Loading } from 'react-basics';
 import { useReport } from 'components/hooks';
 import styles from './Report.module.css';
 import classNames from 'classnames';
@@ -17,11 +18,11 @@ export function Report({ reportId, defaultParameters, children, className }: Rep
   const report = useReport(reportId, defaultParameters);
 
   if (!report) {
-    return null;
+    return reportId ? <Loading position="page" /> : null;
   }
 
   return (
-    <ReportContext.Provider value={{ ...report }}>
+    <ReportContext.Provider value={report}>
       <div className={classNames(styles.container, className)}>{children}</div>
     </ReportContext.Provider>
   );

src/app/(main)/reports/[id]/ReportBody.tsx

@@ -1,6 +1,14 @@
 import styles from './ReportBody.module.css';
+import { useContext } from 'react';
+import { ReportContext } from './Report';
 
 export function ReportBody({ children }) {
+  const { report } = useContext(ReportContext);
+
+  if (!report) {
+    return null;
+  }
+
   return <div className={styles.body}>{children}</div>;
 }
 

src/app/(main)/reports/[id]/ReportMenu.tsx

@@ -1,6 +1,14 @@
 import styles from './ReportMenu.module.css';
+import { useContext } from 'react';
+import { ReportContext } from './Report';
 
 export function ReportMenu({ children }) {
+  const { report } = useContext(ReportContext);
+
+  if (!report) {
+    return null;
+  }
+
   return <div className={styles.menu}>{children}</div>;
 }
 

src/app/(main)/settings/users/UsersDataTable.tsx

@@ -11,7 +11,7 @@ export function UsersDataTable() {
   const modified = useCache((state: any) => state?.users);
   const queryResult = useFilterQuery({
     queryKey: ['users', { modified }],
-    queryFn: (params: { [key: string]: any }) => get(`/users`, params),
+    queryFn: (params: { [key: string]: any }) => get(`/admin/users`, params),
   });
 
   return (

src/app/(main)/settings/websites/WebsiteSettings.tsx

@@ -17,7 +17,7 @@ export function WebsiteSettings({ websiteId, openExternal = false }) {
   const { formatMessage, labels, messages } = useMessages();
   const { get, useQuery } = useApi();
   const { showToast } = useToasts();
-  const { websitesUrl, settingsUrl } = useContext(SettingsContext);
+  const { websitesUrl, websitesPath, settingsPath } = useContext(SettingsContext);
   const { data, isLoading } = useQuery({
     queryKey: ['website', websiteId],
     queryFn: () => get(`${websitesUrl}/${websiteId}`),
@@ -38,7 +38,7 @@ export function WebsiteSettings({ websiteId, openExternal = false }) {
 
   const handleReset = async (value: string) => {
     if (value === 'delete') {
-      router.push(settingsUrl);
+      router.push(settingsPath);
     } else if (value === 'reset') {
       showSuccess();
     }
@@ -57,7 +57,7 @@ export function WebsiteSettings({ websiteId, openExternal = false }) {
   return (
     <>
       <PageHeader title={values?.name}>
-        <Link href={`${websitesUrl}/${websiteId}`} target={openExternal ? '_blank' : null}>
+        <Link href={`${websitesPath}/${websiteId}`} target={openExternal ? '_blank' : null}>
           <Button variant="primary">
             <Icon>
               <Icons.External />

src/app/(main)/settings/websites/WebsitesTable.tsx

@@ -25,7 +25,7 @@ export function WebsitesTable({
   const { formatMessage, labels } = useMessages();
   const { user } = useUser();
   const breakpoint = useBreakpoint();
-  const { settingsUrl, websitesUrl } = useContext(SettingsContext);
+  const { settingsPath, websitesPath } = useContext(SettingsContext);
 
   return (
     <GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
@@ -52,7 +52,7 @@ export function WebsitesTable({
             return (
               <>
                 {allowEdit && (!showTeam || ownerId === user.id) && (
-                  <Link href={`${settingsUrl}/${id}`}>
+                  <Link href={`${settingsPath}/${id}`}>
                     <Button>
                       <Icon>
                         <Icons.Edit />
@@ -62,7 +62,7 @@ export function WebsitesTable({
                   </Link>
                 )}
                 {allowView && (
-                  <Link href={`${websitesUrl}/${id}`}>
+                  <Link href={`${websitesPath}/${id}`}>
                     <Button>
                       <Icon>
                         <Icons.External />

src/app/Providers.tsx

@@ -33,10 +33,11 @@ function SettingsProvider({ children }) {
     const hostUrl = process.env.hostUrl || window?.location.origin;
 
     setConfig({
-      settingsUrl: '/settings/websites',
       shareUrl: hostUrl,
       trackingCodeUrl: hostUrl,
-      websitesUrl: `/websites`,
+      websitesUrl: '/websites',
+      settingsPath: '/settings/websites',
+      websitesPath: `/websites`,
     });
   }, []);
 

src/components/hooks/useReport.ts

@@ -4,7 +4,7 @@ import { useTimezone } from './useTimezone';
 import useApi from './useApi';
 import useMessages from './useMessages';
 
-export function useReport(reportId, defaultParameters) {
+export function useReport(reportId: string, defaultParameters: { [key: string]: any }) {
   const [report, setReport] = useState(null);
   const [isRunning, setIsRunning] = useState(false);
   const { get, post } = useApi();
@@ -17,7 +17,7 @@ export function useReport(reportId, defaultParameters) {
     parameters: {},
   };
 
-  const loadReport = async id => {
+  const loadReport = async (id: string) => {
     const data: any = await get(`/reports/${id}`);
 
     const { dateRange } = data?.parameters || {};
@@ -32,7 +32,7 @@ export function useReport(reportId, defaultParameters) {
   };
 
   const runReport = useCallback(
-    async parameters => {
+    async (parameters: { [key: string]: any }) => {
       setIsRunning(true);
 
       const { type } = report;
@@ -50,11 +50,11 @@ export function useReport(reportId, defaultParameters) {
 
       setIsRunning(false);
     },
-    [report],
+    [report, timezone],
   );
 
   const updateReport = useCallback(
-    async data => {
+    async (data: { [x: string]: any; parameters: any }) => {
       setReport(
         produce((state: any) => {
           const { parameters, ...rest } = data;

src/pages/api/admin/users.ts

@@ -0,0 +1,53 @@
+import { canViewUsers } from 'lib/auth';
+import { useAuth, useValidate } from 'lib/middleware';
+import { NextApiRequestQueryBody, Role, SearchFilter, User } from 'lib/types';
+import { pageInfo } from 'lib/schema';
+import { NextApiResponse } from 'next';
+import { methodNotAllowed, ok, unauthorized } from 'next-basics';
+import { getUsers } from 'queries';
+import * as yup from 'yup';
+
+export interface UsersRequestQuery extends SearchFilter {}
+export interface UsersRequestBody {
+  username: string;
+  password: string;
+  id: string;
+  role: Role;
+}
+
+const schema = {
+  GET: yup.object().shape({
+    ...pageInfo,
+  }),
+  POST: yup.object().shape({
+    username: yup.string().max(255).required(),
+    password: yup.string().required(),
+    id: yup.string().uuid(),
+    role: yup
+      .string()
+      .matches(/admin|user|view-only/i)
+      .required(),
+  }),
+};
+
+export default async (
+  req: NextApiRequestQueryBody<UsersRequestQuery, UsersRequestBody>,
+  res: NextApiResponse<User[] | User>,
+) => {
+  await useAuth(req, res);
+  await useValidate(schema, req, res);
+
+  if (req.method === 'GET') {
+    if (!(await canViewUsers(req.auth))) {
+      return unauthorized(res);
+    }
+
+    const { page, query, pageSize } = req.query;
+
+    const users = await getUsers({ page, query, pageSize: +pageSize || undefined });
+
+    return ok(res, users);
+  }
+
+  return methodNotAllowed(res);
+};

src/pages/api/admin/websites.ts

@@ -0,0 +1,66 @@
+import { canViewAllWebsites } from 'lib/auth';
+import { useAuth, useCors, useValidate } from 'lib/middleware';
+import { NextApiRequestQueryBody, SearchFilter } from 'lib/types';
+import { NextApiResponse } from 'next';
+import { methodNotAllowed, ok, unauthorized } from 'next-basics';
+import { getWebsites } from 'queries';
+import * as yup from 'yup';
+import { pageInfo } from 'lib/schema';
+
+export interface WebsitesRequestQuery extends SearchFilter {}
+
+export interface WebsitesRequestBody {
+  name: string;
+  domain: string;
+  shareId: string;
+}
+
+const schema = {
+  GET: yup.object().shape({
+    ...pageInfo,
+  }),
+  POST: yup.object().shape({
+    name: yup.string().max(100).required(),
+    domain: yup.string().max(500).required(),
+    shareId: yup.string().max(50).nullable(),
+  }),
+};
+
+export default async (
+  req: NextApiRequestQueryBody<WebsitesRequestQuery, WebsitesRequestBody>,
+  res: NextApiResponse,
+) => {
+  await useCors(req, res);
+  await useAuth(req, res);
+  await useValidate(schema, req, res);
+
+  if (req.method === 'GET') {
+    if (!(await canViewAllWebsites(req.auth))) {
+      return unauthorized(res);
+    }
+
+    const websites = await getWebsites(req.query, {
+      include: {
+        teamWebsite: {
+          include: {
+            team: {
+              select: {
+                name: true,
+              },
+            },
+          },
+        },
+        user: {
+          select: {
+            username: true,
+            id: true,
+          },
+        },
+      },
+    });
+
+    return ok(res, websites);
+  }
+
+  return methodNotAllowed(res);
+};

src/pages/api/users/index.ts

@@ -1,4 +1,4 @@
-import { canCreateUser, canViewUsers } from 'lib/auth';
+import { canCreateUser } from 'lib/auth';
 import { ROLES } from 'lib/constants';
 import { uuid } from 'lib/crypto';
 import { useAuth, useValidate } from 'lib/middleware';
@@ -6,7 +6,7 @@ import { NextApiRequestQueryBody, Role, SearchFilter, User } from 'lib/types';
 import { pageInfo } from 'lib/schema';
 import { NextApiResponse } from 'next';
 import { badRequest, hashPassword, methodNotAllowed, ok, unauthorized } from 'next-basics';
-import { createUser, getUserByUsername, getUsers } from 'queries';
+import { createUser, getUserByUsername } from 'queries';
 import * as yup from 'yup';
 
 export interface UsersRequestQuery extends SearchFilter {}
@@ -39,18 +39,6 @@ export default async (
   await useAuth(req, res);
   await useValidate(schema, req, res);
 
-  if (req.method === 'GET') {
-    if (!(await canViewUsers(req.auth))) {
-      return unauthorized(res);
-    }
-
-    const { page, query, pageSize } = req.query;
-
-    const users = await getUsers({ page, query, pageSize: +pageSize || undefined });
-
-    return ok(res, users);
-  }
-
   if (req.method === 'POST') {
     if (!(await canCreateUser(req.auth))) {
       return unauthorized(res);

src/pages/api/websites/index.ts

@@ -1,10 +1,10 @@
-import { canCreateWebsite, canViewAllWebsites } from 'lib/auth';
+import { canCreateWebsite } from 'lib/auth';
 import { uuid } from 'lib/crypto';
 import { useAuth, useCors, useValidate } from 'lib/middleware';
 import { NextApiRequestQueryBody, SearchFilter } from 'lib/types';
 import { NextApiResponse } from 'next';
 import { methodNotAllowed, ok, unauthorized } from 'next-basics';
-import { createWebsite, getWebsites } from 'queries';
+import { createWebsite } from 'queries';
 import userWebsites from 'pages/api/users/[id]/websites';
 import * as yup from 'yup';
 import { pageInfo } from 'lib/schema';
@@ -41,30 +41,6 @@ export default async (
   } = req.auth;
 
   if (req.method === 'GET') {
-    if (await canViewAllWebsites(req.auth)) {
-      const websites = await getWebsites(req.query, {
-        include: {
-          teamWebsite: {
-            include: {
-              team: {
-                select: {
-                  name: true,
-                },
-              },
-            },
-          },
-          user: {
-            select: {
-              username: true,
-              id: true,
-            },
-          },
-        },
-      });
-
-      return ok(res, websites);
-    }
-
     if (!req.query.id) {
       req.query.id = userId;
     }