Refactor of team websites.

src/app/(main)/dashboard/Dashboard.tsx

@@ -63,7 +63,7 @@ export function Dashboard() {
           {editing && <DashboardEdit />}
           {!editing && (
             <>
-              <WebsiteChartList websites={data} showCharts={showCharts} limit={pageSize} />
+              <WebsiteChartList websites={data as any} showCharts={showCharts} limit={pageSize} />
               <Pager
                 page={page}
                 pageSize={pageSize}

src/app/(main)/dashboard/DashboardEdit.tsx

@@ -19,7 +19,7 @@ export function DashboardEdit() {
   const { get, useQuery } = useApi();
   const { data: result } = useQuery({
     queryKey: ['websites'],
-    queryFn: () => get('/websites', { includeTeams: 1 }),
+    queryFn: () => get('/websites'),
   });
   const { data: websites } = result || {};
 

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

@@ -41,7 +41,7 @@ export default function FieldFilterForm({
       format(values[0]);
     }
     return formatted;
-  }, [values]);
+  }, [formatValue, locale, name, values]);
 
   const renderFilterValue = value => {
     return filters.find(f => f.value === value)?.label;
@@ -65,7 +65,7 @@ export default function FieldFilterForm({
               items={filters}
               value={filter}
               renderValue={renderFilterValue}
-              onSelect={(key: any) => setFilter(key)}
+              onChange={(key: any) => setFilter(key)}
             >
               {({ value, label }) => {
                 return <Item key={value}>{label}</Item>;
@@ -78,7 +78,7 @@ export default function FieldFilterForm({
             items={values}
             value={value}
             renderValue={renderValue}
-            onSelect={(key: any) => setValue(key)}
+            onChange={(key: any) => setValue(key)}
             style={{
               minWidth: '250px',
             }}

src/app/(main)/settings/profile/LanguageSetting.tsx

@@ -29,7 +29,7 @@ export function LanguageSetting() {
         items={options}
         value={locale}
         renderValue={renderValue}
-        onSelect={saveLocale}
+        onChange={saveLocale}
         allowSearch={true}
         onSearch={setSearch}
         menuProps={{ className: styles.menu }}

src/app/(main)/settings/profile/TimezoneSetting.tsx

@@ -21,7 +21,7 @@ export function TimezoneSetting() {
       <Dropdown
         items={options}
         value={timezone}
-        onSelect={saveTimezone}
+        onChange={saveTimezone}
         menuProps={{ className: styles.menu }}
         allowSearch={true}
         onSearch={setSearch}

src/app/(main)/settings/teams/TeamDeleteButton.tsx

@@ -1,33 +0,0 @@
-import { Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
-import useMessages from 'components/hooks/useMessages';
-import TeamDeleteForm from './TeamDeleteForm';
-
-export function TeamDeleteButton({
-  teamId,
-  teamName,
-  onDelete,
-}: {
-  teamId: string;
-  teamName: string;
-  onDelete?: () => void;
-}) {
-  const { formatMessage, labels } = useMessages();
-
-  return (
-    <ModalTrigger>
-      <Button>
-        <Icon>
-          <Icons.Trash />
-        </Icon>
-        <Text>{formatMessage(labels.delete)}</Text>
-      </Button>
-      <Modal title={formatMessage(labels.deleteTeam)}>
-        {(close: any) => (
-          <TeamDeleteForm teamId={teamId} teamName={teamName} onSave={onDelete} onClose={close} />
-        )}
-      </Modal>
-    </ModalTrigger>
-  );
-}
-
-export default TeamDeleteButton;

src/app/(main)/settings/teams/TeamsTable.tsx

@@ -4,7 +4,6 @@ import useUser from 'components/hooks/useUser';
 import { ROLES } from 'lib/constants';
 import Link from 'next/link';
 import { Button, GridColumn, GridTable, Icon, Icons, Text, useBreakpoint } from 'react-basics';
-import TeamDeleteButton from './TeamDeleteButton';
 import TeamLeaveButton from './TeamLeaveButton';
 
 export function TeamsTable({ data = [] }: { data: any[] }) {
@@ -26,13 +25,10 @@ export function TeamsTable({ data = [] }: { data: any[] }) {
 
           return (
             <>
-              {isOwner && <TeamDeleteButton teamId={id} teamName={name} />}
               {!isOwner && <TeamLeaveButton teamId={id} teamName={name} />}
               <Link href={`/settings/teams/${id}`}>
                 <Button>
-                  <Icon>
+                  <Icon>{isOwner ? <Icons.Edit /> : <Icons.ArrowRight />}</Icon>
-                    <Icons.Edit />
-                  </Icon>
                   <Text>{formatMessage(isOwner ? labels.edit : labels.view)}</Text>
                 </Button>
               </Link>

src/app/(main)/settings/teams/[id]/TeamData.tsx

@@ -0,0 +1,27 @@
+import { ActionForm, Button, Modal, ModalTrigger } from 'react-basics';
+import useMessages from 'components/hooks/useMessages';
+import TeamDeleteForm from '../TeamDeleteForm';
+
+export function TeamData({ teamId }: { teamId: string; onSave?: (value: string) => void }) {
+  const { formatMessage, labels, messages } = useMessages();
+
+  const handleSave = () => {};
+
+  return (
+    <ActionForm
+      label={formatMessage(labels.deleteTeam)}
+      description={formatMessage(messages.deleteTeamWarning)}
+    >
+      <ModalTrigger>
+        <Button variant="danger">{formatMessage(labels.delete)}</Button>
+        <Modal title={formatMessage(labels.deleteTeam)}>
+          {(close: () => void) => (
+            <TeamDeleteForm teamId={teamId} teamName={''} onSave={handleSave} onClose={close} />
+          )}
+        </Modal>
+      </ModalTrigger>
+    </ActionForm>
+  );
+}
+
+export default TeamData;

src/app/(main)/settings/teams/[id]/TeamSettings.tsx

@@ -9,6 +9,7 @@ import useMessages from 'components/hooks/useMessages';
 import TeamEditForm from './TeamEditForm';
 import TeamMembers from './TeamMembers';
 import TeamWebsites from './TeamWebsites';
+import TeamData from './TeamData';
 
 export function TeamSettings({ teamId }: { teamId: string }) {
   const { formatMessage, labels, messages } = useMessages();
@@ -52,12 +53,14 @@ export function TeamSettings({ teamId }: { teamId: string }) {
         <Item key="details">{formatMessage(labels.details)}</Item>
         <Item key="members">{formatMessage(labels.members)}</Item>
         <Item key="websites">{formatMessage(labels.websites)}</Item>
+        <Item key="data">{formatMessage(labels.data)}</Item>
       </Tabs>
       {tab === 'details' && (
         <TeamEditForm teamId={teamId} data={values} onSave={handleSave} readOnly={!canEdit} />
       )}
       {tab === 'members' && <TeamMembers teamId={teamId} readOnly={!canEdit} />}
       {tab === 'websites' && <TeamWebsites teamId={teamId} readOnly={!canEdit} />}
+      {canEdit && tab === 'data' && <TeamData teamId={teamId} />}
     </Flexbox>
   );
 }

src/app/(main)/settings/teams/[id]/TeamWebsites.tsx

@@ -1,15 +1,11 @@
-import { ActionForm, Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
 import TeamWebsitesTable from './TeamWebsitesTable';
-import TeamWebsiteAddForm from './TeamWebsiteAddForm';
 import useApi from 'components/hooks/useApi';
-import useMessages from 'components/hooks/useMessages';
 import useUser from 'components/hooks/useUser';
 import useFilterQuery from 'components/hooks/useFilterQuery';
 import DataTable from 'components/common/DataTable';
 import useCache from 'store/cache';
 
 export function TeamWebsites({ teamId, readOnly }: { teamId: string; readOnly: boolean }) {
-  const { formatMessage, labels, messages } = useMessages();
   const { user } = useUser();
   const { get } = useApi();
   const modified = useCache(state => state?.['team:websites']);
@@ -28,26 +24,9 @@ export function TeamWebsites({ teamId, readOnly }: { teamId: string; readOnly: b
   };
 
   return (
-    <>
+    <DataTable queryResult={queryResult}>
-      <ActionForm description={formatMessage(messages.teamWebsitesInfo)}>
+      {({ data }) => <TeamWebsitesTable data={data} onRemove={handleChange} readOnly={readOnly} />}
-        <ModalTrigger>
+    </DataTable>
-          <Button variant="primary">
-            <Icon>
-              <Icons.Plus />
-            </Icon>
-            <Text>{formatMessage(labels.addWebsite)}</Text>
-          </Button>
-          <Modal title={formatMessage(labels.addWebsite)}>
-            {close => <TeamWebsiteAddForm teamId={teamId} onSave={handleChange} onClose={close} />}
-          </Modal>
-        </ModalTrigger>
-      </ActionForm>
-      <DataTable queryResult={queryResult}>
-        {({ data }) => (
-          <TeamWebsitesTable data={data} onRemove={handleChange} readOnly={readOnly} />
-        )}
-      </DataTable>
-    </>
   );
 }
 

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

@@ -12,9 +12,6 @@ export interface WebsitesDataTableProps {
   allowEdit?: boolean;
   allowView?: boolean;
   showActions?: boolean;
-  showTeam?: boolean;
-  includeTeams?: boolean;
-  onlyTeams?: boolean;
   children?: ReactNode;
 }
 
@@ -23,9 +20,6 @@ export function WebsitesDataTable({
   allowEdit = true,
   allowView = true,
   showActions = true,
-  showTeam,
-  includeTeams,
-  onlyTeams,
   children,
 }: WebsitesDataTableProps) {
   const { get } = useApi();
@@ -33,11 +27,9 @@ export function WebsitesDataTable({
   const { websitesUrl } = useContext(SettingsContext);
 
   const queryResult = useFilterQuery({
-    queryKey: ['websites', { includeTeams, onlyTeams, modified }],
+    queryKey: ['websites', { modified }],
     queryFn: (params: any) => {
       return get(websitesUrl, {
-        includeTeams,
-        onlyTeams,
         ...params,
       });
     },
@@ -49,7 +41,6 @@ export function WebsitesDataTable({
       {({ data }) => (
         <WebsitesTable
           data={data}
-          showTeam={showTeam}
           showActions={showActions}
           allowEdit={allowEdit}
           allowView={allowView}

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

@@ -7,7 +7,6 @@ import SettingsContext from '../SettingsContext';
 
 export interface WebsitesTableProps {
   data: any[];
-  showTeam?: boolean;
   showActions?: boolean;
   allowEdit?: boolean;
   allowView?: boolean;
@@ -16,7 +15,6 @@ export interface WebsitesTableProps {
 
 export function WebsitesTable({
   data = [],
-  showTeam,
   showActions,
   allowEdit,
   allowView,
@@ -31,16 +29,6 @@ export function WebsitesTable({
     <GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
       <GridColumn name="name" label={formatMessage(labels.name)} />
       <GridColumn name="domain" label={formatMessage(labels.domain)} />
-      {showTeam && (
-        <GridColumn name="teamName" label={formatMessage(labels.teamName)}>
-          {row => row.teamWebsite[0]?.team.name}
-        </GridColumn>
-      )}
-      {showTeam && (
-        <GridColumn name="owner" label={formatMessage(labels.owner)}>
-          {row => row.user.username}
-        </GridColumn>
-      )}
       {showActions && (
         <GridColumn name="action" label=" " alignment="end">
           {row => {
@@ -51,7 +39,7 @@ export function WebsitesTable({
 
             return (
               <>
-                {allowEdit && (!showTeam || ownerId === user.id) && (
+                {allowEdit && ownerId === user.id && (
                   <Link href={`${settingsPath}/${id}`}>
                     <Button>
                       <Icon>

src/app/(main)/settings/websites/[id]/WebsiteDeleteForm.tsx

@@ -43,7 +43,7 @@ export function WebsiteDeleteForm({
     <Form onSubmit={handleSubmit} error={error}>
       <p>
         <FormattedMessage
-          {...messages.deleteWebsite}
+          {...messages.actionConfirmation}
           values={{ confirmation: <b>{CONFIRM_VALUE}</b> }}
         />
       </p>

src/app/(main)/settings/websites/[id]/WebsiteResetForm.tsx

@@ -43,7 +43,7 @@ export function WebsiteResetForm({
     <Form onSubmit={handleSubmit} error={error}>
       <p>
         <FormattedMessage
-          {...messages.resetWebsite}
+          {...messages.actionConfirmation}
           values={{ confirmation: <b>{CONFIRM_VALUE}</b> }}
         />
       </p>

src/app/(main)/websites/WebsitesBrowse.tsx

@@ -1,37 +1,12 @@
 'use client';
 import WebsitesDataTable from '../settings/websites/WebsitesDataTable';
-import { useMessages, useUser } from 'components/hooks';
+import { useUser } from 'components/hooks';
-import { useState } from 'react';
-import { Item, Tabs } from 'react-basics';
-
-const TABS = {
-  myWebsites: 'my-websites',
-  teamWebsites: 'team-websites',
-};
 
 export function WebsitesBrowse() {
   const { user } = useUser();
-  const { formatMessage, labels } = useMessages();
-  const [tab, setTab] = useState(TABS.myWebsites);
   const allowEdit = !process.env.cloudMode;
 
-  return (
+  return <WebsitesDataTable userId={user.id} allowEdit={allowEdit} />;
-    <>
-      <Tabs selectedKey={tab} onSelect={(tab: any) => setTab(tab)} style={{ marginBottom: 30 }}>
-        <Item key={TABS.myWebsites}>{formatMessage(labels.myWebsites)}</Item>
-        <Item key={TABS.teamWebsites}>{formatMessage(labels.teamWebsites)}</Item>
-      </Tabs>
-      {tab === TABS.myWebsites && <WebsitesDataTable userId={user.id} allowEdit={allowEdit} />}
-      {tab === TABS.teamWebsites && (
-        <WebsitesDataTable
-          userId={user.id}
-          showTeam={true}
-          onlyTeams={true}
-          allowEdit={allowEdit}
-        />
-      )}
-    </>
-  );
 }
 
 export default WebsitesBrowse;

src/app/(main)/websites/[id]/WebsiteExpandedView.tsx

@@ -134,7 +134,7 @@ export default function WebsiteExpandedView({
           items={items}
           value={view}
           renderValue={renderValue}
-          onSelect={handleChange}
+          onChange={handleChange}
           alignment="end"
         >
           {({ key, label }) => <Item key={key}>{label}</Item>}

src/components/input/DateFilter.tsx

@@ -113,7 +113,7 @@ export function DateFilter({
         value={value}
         alignment={alignment}
         placeholder={formatMessage(labels.selectDate)}
-        onSelect={key => handleChange(key as any)}
+        onChange={key => handleChange(key as any)}
       >
         {({ label, value, divider }) => (
           <Item key={value} divider={divider}>

src/components/input/WebsiteSelect.tsx

@@ -50,7 +50,7 @@ export function WebsiteSelect({
       value={selectedId as string}
       renderValue={renderValue}
       renderEmpty={renderEmpty}
-      onSelect={handleSelect}
+      onChange={handleSelect}
       alignment="end"
       placeholder={formatMessage(labels.selectWebsite)}
       allowSearch={true}

src/components/messages.ts

@@ -238,13 +238,9 @@ export const messages = defineMessages({
     id: 'message.team-already-member',
     defaultMessage: 'You are already a member of the team.',
   },
-  deleteAccount: {
+  actionConfirmation: {
-    id: 'message.delete-account',
+    id: 'message.action-confirmation',
-    defaultMessage: 'To delete this account, type {confirmation} in the box below to confirm.',
+    defaultMessage: 'Type {confirmation} in the box below to confirm.',
-  },
-  deleteWebsite: {
-    id: 'message.delete-website',
-    defaultMessage: 'To delete this website, type {confirmation} in the box below to confirm.',
   },
   resetWebsite: {
     id: 'message.reset-website',
@@ -263,6 +259,10 @@ export const messages = defineMessages({
     id: 'message.delete-website-warning',
     defaultMessage: 'All website data will be deleted.',
   },
+  deleteTeamWarning: {
+    id: 'message.delete-team-warning',
+    defaultMessage: 'Deleting a team will also delete all team websites.',
+  },
   noResultsFound: {
     id: 'message.no-results-found',
     defaultMessage: 'No results found.',

src/lib/types.ts

@@ -41,7 +41,6 @@ export interface TeamSearchFilter extends SearchFilter {
 export interface ReportSearchFilter extends SearchFilter {
   userId?: string;
   websiteId?: string;
-  includeTeams?: boolean;
 }
 
 export interface SearchFilter {

src/queries/admin/report.ts

@@ -29,7 +29,7 @@ export async function getReports(
   params: ReportSearchFilter,
   options?: { include?: Prisma.ReportInclude },
 ): Promise<FilterResult<Report[]>> {
-  const { query, userId, websiteId, includeTeams } = params;
+  const { query, userId, websiteId } = params;
 
   const mode = prisma.getQueryMode();
 
@@ -42,23 +42,6 @@ export async function getReports(
           {
             userId,
           },
-          {
-            ...(includeTeams && {
-              website: {
-                teamWebsite: {
-                  some: {
-                    team: {
-                      teamUser: {
-                        some: {
-                          userId,
-                        },
-                      },
-                    },
-                  },
-                },
-              },
-            }),
-          },
         ],
       },
       {

src/queries/admin/website.ts

@@ -1,6 +1,5 @@
 import { Prisma, Website } from '@prisma/client';
 import cache from 'lib/cache';
-import { ROLES } from 'lib/constants';
 import prisma from 'lib/prisma';
 import { FilterResult, WebsiteSearchFilter } from 'lib/types';
 
@@ -22,49 +21,16 @@ export async function getWebsites(
   filters: WebsiteSearchFilter,
   options?: { include?: Prisma.WebsiteInclude },
 ): Promise<FilterResult<Website[]>> {
-  const { userId, teamId, includeTeams, onlyTeams, query } = filters;
+  const { userId, teamId, query } = filters;
   const mode = prisma.getQueryMode();
 
   const where: Prisma.WebsiteWhereInput = {
-    ...(teamId && {
-      teamWebsite: {
-        some: {
-          teamId,
-        },
-      },
-    }),
     AND: [
       {
         OR: [
           {
-            ...(userId &&
+            ...(userId && { userId }),
-              !onlyTeams && {
+            ...(teamId && { teamId }),
-                userId,
-              }),
-          },
-          {
-            ...((includeTeams || onlyTeams) && {
-              AND: [
-                {
-                  teamWebsite: {
-                    some: {
-                      team: {
-                        teamUser: {
-                          some: {
-                            userId,
-                          },
-                        },
-                      },
-                    },
-                  },
-                },
-                {
-                  userId: {
-                    not: userId,
-                  },
-                },
-              ],
-            }),
           },
         ],
       },
@@ -110,15 +76,6 @@ export async function getWebsitesByUserId(
     { userId, ...filters },
     {
       include: {
-        teamWebsite: {
-          include: {
-            team: {
-              select: {
-                name: true,
-              },
-            },
-          },
-        },
         user: {
           select: {
             username: true,
@@ -138,21 +95,9 @@ export async function getWebsitesByTeamId(
     {
       teamId,
       ...filters,
-      includeTeams: true,
     },
     {
       include: {
-        teamWebsite: {
-          include: {
-            team: {
-              include: {
-                teamUser: {
-                  where: { role: ROLES.teamOwner },
-                },
-              },
-            },
-          },
-        },
         user: {
           select: {
             id: true,