Website transfer.

src/app/(main)/settings/websites/[websiteId]/WebsiteData.tsx

@@ -3,6 +3,7 @@ import { useRouter } from 'next/navigation';
 import { useMessages, useModified, useTeamUrl } from 'components/hooks';
 import WebsiteDeleteForm from './WebsiteDeleteForm';
 import WebsiteResetForm from './WebsiteResetForm';
+import WebsiteTransferForm from './WebsiteTransferForm';
 
 export function WebsiteData({ websiteId, onSave }: { websiteId: string; onSave?: () => void }) {
   const { formatMessage, labels, messages } = useMessages();
@@ -11,23 +12,42 @@ export function WebsiteData({ websiteId, onSave }: { websiteId: string; onSave?:
   const { touch } = useModified();
   const { teamId, renderTeamUrl } = useTeamUrl();
 
+  const handleTransfer = () => {
+    touch('websites');
+
+    router.push(renderTeamUrl(`/settings/websites`));
+  };
+
   const handleReset = async () => {
     showToast({ message: formatMessage(messages.saved), variant: 'success' });
     onSave?.();
   };
 
   const handleDelete = async () => {
+    touch('websites');
+
     if (teamId) {
-      touch('teams:websites');
       router.push(renderTeamUrl('/settings/websites'));
     } else {
-      touch('websites');
       router.push('/settings/websites');
     }
   };
 
   return (
     <>
+      <ActionForm
+        label={formatMessage(labels.transferWebsite)}
+        description={formatMessage(messages.transferWebsite)}
+      >
+        <ModalTrigger>
+          <Button variant="secondary">{formatMessage(labels.transfer)}</Button>
+          <Modal title={formatMessage(labels.transferWebsite)}>
+            {(close: () => void) => (
+              <WebsiteTransferForm websiteId={websiteId} onSave={handleTransfer} onClose={close} />
+            )}
+          </Modal>
+        </ModalTrigger>
+      </ActionForm>
       <ActionForm
         label={formatMessage(labels.resetWebsite)}
         description={formatMessage(messages.resetWebsiteWarning)}

src/app/(main)/settings/websites/[websiteId]/WebsiteTransferForm.tsx

@@ -0,0 +1,102 @@
+import { Key, useContext, useState } from 'react';
+import {
+  Button,
+  Form,
+  FormButtons,
+  FormRow,
+  LoadingButton,
+  Loading,
+  Dropdown,
+  Item,
+  Flexbox,
+  useToasts,
+} from 'react-basics';
+import { useApi, useLogin, useMessages, useTeams } from 'components/hooks';
+import { WebsiteContext } from 'app/(main)/websites/[websiteId]/WebsiteProvider';
+import { ROLES } from 'lib/constants';
+
+export function WebsiteTransferForm({
+  websiteId,
+  onSave,
+  onClose,
+}: {
+  websiteId: string;
+  onSave?: () => void;
+  onClose?: () => void;
+}) {
+  const { user } = useLogin();
+  const website = useContext(WebsiteContext);
+  const [teamId, setTeamId] = useState<string>(null);
+  const { formatMessage, labels, messages } = useMessages();
+  const { post, useMutation } = useApi();
+  const { mutate, isPending, error } = useMutation({
+    mutationFn: (data: any) => post(`/websites/${websiteId}/transfer`, data),
+  });
+  const { result, query } = useTeams(user.id);
+  const isTeamWebsite = !!website?.teamId;
+  const { showToast } = useToasts();
+
+  const handleSubmit = async () => {
+    mutate(
+      {
+        userId: website.teamId ? user.id : undefined,
+        teamId: website.userId ? teamId : undefined,
+      },
+      {
+        onSuccess: async () => {
+          showToast({ message: formatMessage(messages.saved), variant: 'success' });
+          onSave?.();
+          onClose?.();
+        },
+      },
+    );
+  };
+
+  const handleChange = (key: Key) => {
+    setTeamId(key as string);
+  };
+
+  const renderValue = (teamId: string) => result?.data?.find(({ id }) => id === teamId)?.name;
+
+  if (query.isLoading) {
+    return <Loading icon="dots" position="center" />;
+  }
+
+  return (
+    <Form error={error}>
+      <FormRow>
+        <Flexbox direction="column" gap={20}>
+          {formatMessage(
+            isTeamWebsite ? messages.transferTeamWebsiteToUser : messages.transferUserWebsiteToTeam,
+          )}
+          {!isTeamWebsite && (
+            <Dropdown onChange={handleChange} value={teamId} renderValue={renderValue}>
+              {result.data
+                .filter(({ teamUser }) =>
+                  teamUser.find(
+                    ({ role, userId }) => role === ROLES.teamOwner && userId === user.id,
+                  ),
+                )
+                .map(({ id, name }) => {
+                  return <Item key={id}>{name}</Item>;
+                })}
+            </Dropdown>
+          )}
+        </Flexbox>
+      </FormRow>
+      <FormButtons flex>
+        <LoadingButton
+          variant="primary"
+          isLoading={isPending}
+          disabled={!isTeamWebsite && !teamId}
+          onClick={handleSubmit}
+        >
+          {formatMessage(labels.transfer)}
+        </LoadingButton>
+        <Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
+      </FormButtons>
+    </Form>
+  );
+}
+
+export default WebsiteTransferForm;

src/components/common/DataTable.tsx

@@ -5,7 +5,7 @@ import { useMessages } from 'components/hooks';
 import Empty from 'components/common/Empty';
 import Pager from 'components/common/Pager';
 import styles from './DataTable.module.css';
-import { FilterQueryResult } from 'components/hooks';
+import { FilterQueryResult } from 'lib/types';
 
 const DEFAULT_SEARCH_DELAY = 600;
 
@@ -64,7 +64,7 @@ export function DataTable({
         className={classNames(styles.body, { [styles.status]: isLoading || noResults || !hasData })}
       >
         {hasData ? (typeof children === 'function' ? children(result) : children) : null}
-        {isLoading && <Loading icon="dots" />}
+        {isLoading && <Loading position="page" />}
         {!isLoading && !hasData && !query && <Empty />}
         {noResults && <Empty message={formatMessage(messages.noResultsFound)} />}
       </div>

src/components/hooks/queries/useFilterQuery.ts

@@ -1,14 +1,7 @@
 import { UseQueryOptions } from '@tanstack/react-query';
-import { useState, Dispatch, SetStateAction } from 'react';
+import { useState } from 'react';
 import { useApi } from './useApi';
-import { FilterResult, SearchFilter } from 'lib/types';
-
-export interface FilterQueryResult<T> {
-  result: FilterResult<T>;
-  query: any;
-  params: SearchFilter;
-  setParams: Dispatch<SetStateAction<T | SearchFilter>>;
-}
+import { FilterResult, SearchFilter, FilterQueryResult } from 'lib/types';
 
 export function useFilterQuery<T = any>({
   queryKey,

src/components/layout/SideNav.module.css

@@ -17,5 +17,4 @@
 
 .selected {
   font-weight: 700;
-  background: var(--base75);
 }

src/components/messages.ts

@@ -53,6 +53,7 @@ export const labels = defineMessages({
   websiteId: { id: 'label.website-id', defaultMessage: 'Website ID' },
   resetWebsite: { id: 'label.reset-website', defaultMessage: 'Reset website' },
   deleteWebsite: { id: 'label.delete-website', defaultMessage: 'Delete website' },
+  transferWebsite: { id: 'label.transfer-website', defaultMessage: 'Transfer website' },
   deleteReport: { id: 'label.delete-report', defaultMessage: 'Delete report' },
   reset: { id: 'label.reset', defaultMessage: 'Reset' },
   addWebsite: { id: 'label.add-website', defaultMessage: 'Add website' },
@@ -207,7 +208,7 @@ export const labels = defineMessages({
   },
   select: { id: 'label.select', defaultMessage: 'Select' },
   myAccount: { id: 'label.my-account', defaultMessage: 'My account' },
-  switch: { id: 'label.switch', defaultMessage: 'Switch' },
+  transfer: { id: 'label.transfer', defaultMessage: 'Transfer' },
 });
 
 export const messages = defineMessages({
@@ -327,4 +328,16 @@ export const messages = defineMessages({
     id: 'message.new-version-available',
     defaultMessage: 'A new version of Umami {version} is available!',
   },
+  transferWebsite: {
+    id: 'message.transfer-website',
+    defaultMessage: 'Transfer website ownership to another user or team.',
+  },
+  transferTeamWebsiteToUser: {
+    id: 'message.transfer-team-website-to-user',
+    defaultMessage: 'Do you want to transfer this website to your account?',
+  },
+  transferUserWebsiteToTeam: {
+    id: 'message.transfer-user-website-to-team',
+    defaultMessage: 'Which team do you want to transfer this website to?',
+  },
 });

src/lib/auth.ts

@@ -1,7 +1,7 @@
 import { Report } from '@prisma/client';
 import redis from '@umami/redis-client';
 import debug from 'debug';
-import { PERMISSIONS, ROLE_PERMISSIONS, SHARE_TOKEN_HEADER } from 'lib/constants';
+import { PERMISSIONS, ROLE_PERMISSIONS, SHARE_TOKEN_HEADER, ROLES } from 'lib/constants';
 import { secret } from 'lib/crypto';
 import { NextApiRequest } from 'next';
 import { createSecureToken, ensureArray, getRandomChars, parseToken } from 'next-basics';
@@ -101,6 +101,38 @@ export async function canUpdateWebsite({ user }: Auth, websiteId: string) {
   return false;
 }
 
+export async function canTransferWebsiteToUser({ user }: Auth, websiteId: string, userId: string) {
+  if (user.isAdmin) {
+    return true;
+  }
+
+  const website = await loadWebsite(websiteId);
+
+  if (website.teamId && user.id === userId) {
+    const teamUser = await getTeamUser(website.teamId, userId);
+
+    return teamUser?.role === ROLES.teamOwner;
+  }
+
+  return false;
+}
+
+export async function canTransferWebsiteToTeam({ user }: Auth, websiteId: string, teamId: string) {
+  if (user.isAdmin) {
+    return true;
+  }
+
+  const website = await loadWebsite(websiteId);
+
+  if (website.userId === user.id) {
+    const teamUser = await getTeamUser(teamId, user.id);
+
+    return teamUser?.role === ROLES.teamOwner;
+  }
+
+  return false;
+}
+
 export async function canDeleteWebsite({ user }: Auth, websiteId: string) {
   if (user.isAdmin) {
     return true;

src/lib/types.ts

@@ -10,6 +10,7 @@ import {
 } from './constants';
 import * as yup from 'yup';
 import { TIME_UNIT } from './date';
+import { Dispatch, SetStateAction } from 'react';
 
 type ObjectValues<T> = T[keyof T];
 
@@ -64,6 +65,13 @@ export interface FilterResult<T> {
   sortDescending?: boolean;
 }
 
+export interface FilterQueryResult<T> {
+  result: FilterResult<T>;
+  query: any;
+  params: SearchFilter;
+  setParams: Dispatch<SetStateAction<T | SearchFilter>>;
+}
+
 export interface DynamicData {
   [key: string]: number | string | DynamicData | number[] | string[] | DynamicData[];
 }

src/pages/api/websites/[websiteId]/transfer.ts

@@ -0,0 +1,66 @@
+import { NextApiRequestQueryBody } from 'lib/types';
+import { canTransferWebsiteToTeam, canTransferWebsiteToUser } from 'lib/auth';
+import { useAuth, useCors, useValidate } from 'lib/middleware';
+import { NextApiResponse } from 'next';
+import { badRequest, methodNotAllowed, ok, unauthorized } from 'next-basics';
+import { updateWebsite } from 'queries';
+import * as yup from 'yup';
+
+export interface WebsiteTransferRequestQuery {
+  websiteId: string;
+}
+
+export interface WebsiteTransferRequestBody {
+  userId?: string;
+  teamId?: string;
+}
+
+const schema = {
+  POST: yup.object().shape({
+    websiteId: yup.string().uuid().required(),
+    userId: yup.string().uuid(),
+    teamId: yup.string().uuid(),
+  }),
+};
+
+export default async (
+  req: NextApiRequestQueryBody<WebsiteTransferRequestQuery, WebsiteTransferRequestBody>,
+  res: NextApiResponse,
+) => {
+  await useCors(req, res);
+  await useAuth(req, res);
+  await useValidate(schema, req, res);
+
+  const { websiteId } = req.query;
+  const { userId, teamId } = req.body;
+
+  if (req.method === 'POST') {
+    if (userId) {
+      if (!(await canTransferWebsiteToUser(req.auth, websiteId, userId))) {
+        return unauthorized(res);
+      }
+
+      const website = await updateWebsite(websiteId, {
+        userId,
+        teamId: null,
+      });
+
+      return ok(res, website);
+    } else if (teamId) {
+      if (!(await canTransferWebsiteToTeam(req.auth, websiteId, teamId))) {
+        return unauthorized(res);
+      }
+
+      const website = await updateWebsite(websiteId, {
+        userId: null,
+        teamId,
+      });
+
+      return ok(res, website);
+    }
+
+    return badRequest(res);
+  }
+
+  return methodNotAllowed(res);
+};