Fixed issue with removing team members.

src/app/(main)/reports/ReportsTable.js

@@ -23,7 +23,7 @@ export function ReportsTable({ data = [], showDomain }) {
       </GridColumn>
       {showDomain && (
         <GridColumn name="domain" label={formatMessage(labels.domain)}>
-          {row => row.website.domain}
+          {row => row?.website?.domain}
         </GridColumn>
       )}
       <GridColumn name="action" label="" alignment="end">

src/app/(main)/reports/[id]/ReportHeader.js

@@ -1,11 +1,12 @@
 import { useContext } from 'react';
 import { useRouter } from 'next/navigation';
-import { Icon, LoadingButton, InlineEditField, useToasts } from 'react-basics';
+import { Icon, LoadingButton, InlineEditField, useToasts, Loading } from 'react-basics';
 import PageHeader from 'components/layout/PageHeader';
 import { useMessages, useApi } from 'components/hooks';
 import { ReportContext } from './Report';
 import styles from './ReportHeader.module.css';
 import reportStyles from './Report.module.css';
+import { REPORT_TYPES } from 'lib/constants';
 
 export function ReportHeader({ icon }) {
   const { report, updateReport } = useContext(ReportContext);
@@ -49,19 +50,30 @@ export function ReportHeader({ icon }) {
 
   const Title = () => {
     return (
-      <>
-        <Icon size="lg">{icon}</Icon>
-        <InlineEditField
-          key={name}
-          name="name"
-          value={name}
-          placeholder={defaultName}
-          onCommit={handleNameChange}
-        />
-      </>
+      <div className={styles.header}>
+        <div className={styles.type}>
+          {formatMessage(
+            labels[Object.keys(REPORT_TYPES).find(key => REPORT_TYPES[key] === report?.type)],
+          )}
+        </div>
+        <div className={styles.title}>
+          <Icon size="lg">{icon}</Icon>
+          <InlineEditField
+            key={name}
+            name="name"
+            value={name}
+            placeholder={defaultName}
+            onCommit={handleNameChange}
+          />
+        </div>
+      </div>
     );
   };
 
+  if (!report) {
+    return <Loading />;
+  }
+
   return (
     <div className={reportStyles.header}>
       <PageHeader title={<Title />}>

src/app/(main)/reports/[id]/ReportHeader.module.css

@@ -1,3 +1,20 @@
 .description {
   color: var(--font-color300);
 }
+
+.header {
+  display: grid;
+}
+
+.title {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+}
+
+.type {
+  font-size: 11px;
+  text-transform: uppercase;
+  color: var(--base600);
+  line-height: 30px;
+}

src/app/(main)/reports/retention/RetentionParameters.js

@@ -19,6 +19,7 @@ export function RetentionParameters() {
   const handleSubmit = (data, e) => {
     e.stopPropagation();
     e.preventDefault();
+
     if (!queryDisabled) {
       runReport(data);
     }

src/app/(main)/settings/teams/TeamLeaveForm.js

@@ -1,6 +1,7 @@
 import { Button, Form, FormButtons, SubmitButton } from 'react-basics';
 import useApi from 'components/hooks/useApi';
 import useMessages from 'components/hooks/useMessages';
+import { setValue } from 'store/cache';
 
 export function TeamLeaveForm({ teamId, userId, teamName, onSave, onClose }) {
   const { formatMessage, labels, messages, FormattedMessage } = useMessages();
@@ -12,6 +13,7 @@ export function TeamLeaveForm({ teamId, userId, teamName, onSave, onClose }) {
       {},
       {
         onSuccess: async () => {
+          setValue('team:members', Date.now());
           onSave();
           onClose();
         },

src/app/(main)/settings/teams/[id]/TeamMembers.js

@@ -20,7 +20,7 @@ export function TeamMembers({ teamId, readOnly }) {
   return (
     <>
       <DataTable queryResult={queryResult}>
-        {({ data }) => <TeamMembersTable data={data} readOnly={readOnly} />}
+        {({ data }) => <TeamMembersTable data={data} teamId={teamId} readOnly={readOnly} />}
       </DataTable>
     </>
   );

src/app/(main)/settings/teams/[id]/TeamMembersTable.js

@@ -1,4 +1,4 @@
-import { GridColumn, GridTable } from 'react-basics';
+import { GridColumn, GridTable, useBreakpoint } from 'react-basics';
 import useMessages from 'components/hooks/useMessages';
 import useUser from 'components/hooks/useUser';
 import { ROLES } from 'lib/constants';
@@ -7,6 +7,7 @@ import TeamMemberRemoveButton from './TeamMemberRemoveButton';
 export function TeamMembersTable({ data = [], teamId, readOnly }) {
   const { formatMessage, labels } = useMessages();
   const { user } = useUser();
+  const breakpoint = useBreakpoint();
 
   const roles = {
     [ROLES.teamOwner]: formatMessage(labels.teamOwner),
@@ -14,7 +15,7 @@ export function TeamMembersTable({ data = [], teamId, readOnly }) {
   };
 
   return (
-    <GridTable data={data}>
+    <GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
       <GridColumn name="username" label={formatMessage(labels.username)} />
       <GridColumn name="role" label={formatMessage(labels.role)}>
         {row => roles[row?.teamUser?.[0]?.role]}

src/app/(main)/settings/teams/[id]/TeamWebsiteAddForm.js

@@ -33,7 +33,7 @@ export function TeamWebsiteAddForm({ teamId, onSave, onClose }) {
 
   return (
     <>
-      {isLoading && !hasData && <Loading />}
+      {isLoading && !hasData && <Loading icon="dots" position="center" />}
       {!isLoading && !hasData && <Empty />}
       {hasData && (
         <Form onSubmit={handleSubmit} error={error}>

src/components/input/WebsiteSelect.js

@@ -5,7 +5,7 @@ import useMessages from 'components/hooks/useMessages';
 export function WebsiteSelect({ websiteId, onSelect }) {
   const { formatMessage, labels } = useMessages();
   const { get, useQuery } = useApi();
-  const { data } = useQuery(['websites:me'], () => get('/me/websites'));
+  const { data } = useQuery(['websites:me'], () => get('/me/websites', { pageSize: 100 }));
 
   const renderValue = value => {
     return data?.data?.find(({ id }) => id === value)?.name;

src/components/layout/PageHeader.tsx

@@ -3,7 +3,7 @@ import React, { ReactNode } from 'react';
 import styles from './PageHeader.module.css';
 
 export interface PageHeaderProps {
-  title?: string;
+  title?: ReactNode;
   className?: string;
   children?: ReactNode;
 }