Refactored teams components.

src/app/(main)/settings/teams/[teamId]/members/TeamMembers.tsx

@@ -0,0 +1,17 @@
+'use client';
+import TeamMembersDataTable from './TeamMembersDataTable';
+import PageHeader from 'components/layout/PageHeader';
+import { useMessages } from 'components/hooks';
+
+export function TeamMembers({ teamId }: { teamId: string }) {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <>
+      <PageHeader title={formatMessage(labels.members)} />
+      <TeamMembersDataTable teamId={teamId} allowEdit={true} />
+    </>
+  );
+}
+
+export default TeamMembers;

src/app/(main)/settings/teams/[teamId]/members/TeamMembersDataTable.tsx

@@ -3,7 +3,13 @@ import DataTable from 'components/common/DataTable';
 import TeamMembersTable from './TeamMembersTable';
 import { useTeamMembers } from 'components/hooks';
 
-export function TeamMembers({ teamId, allowEdit }: { teamId: string; allowEdit: boolean }) {
+export function TeamMembersDataTable({
+  teamId,
+  allowEdit = false,
+}: {
+  teamId: string;
+  allowEdit?: boolean;
+}) {
   const queryResult = useTeamMembers(teamId);
 
   return (
@@ -13,4 +19,4 @@ export function TeamMembers({ teamId, allowEdit }: { teamId: string; allowEdit:
   );
 }
 
-export default TeamMembers;
+export default TeamMembersDataTable;

src/app/(main)/settings/teams/[teamId]/members/page.tsx

@@ -0,0 +1,15 @@
+import TeamMembers from './TeamMembers';
+import TeamProvider from 'app/(main)/teams/[teamId]/TeamProvider';
+import { Metadata } from 'next';
+
+export default function ({ params: { teamId } }) {
+  return (
+    <TeamProvider teamId={teamId}>
+      <TeamMembers teamId={teamId} />
+    </TeamProvider>
+  );
+}
+
+export const metadata: Metadata = {
+  title: 'Team members - Umami',
+};

src/app/(main)/settings/teams/[teamId]/team/Team.tsx

@@ -6,13 +6,11 @@ import { ROLES } from 'lib/constants';
 import Icons from 'components/icons';
 import { useLogin, useMessages } from 'components/hooks';
 import TeamEditForm from './TeamEditForm';
-import TeamMembers from './TeamMembers';
-import TeamWebsites from './TeamWebsites';
-import TeamData from './TeamData';
+import TeamAdmin from './TeamAdmin';
 import LinkButton from 'components/common/LinkButton';
 import { TeamContext } from 'app/(main)/teams/[teamId]/TeamProvider';
 
-export function TeamSettings({ teamId }: { teamId: string }) {
+export function Team({ teamId }: { teamId: string }) {
   const team = useContext(TeamContext);
   const { formatMessage, labels } = useMessages();
   const { user } = useLogin();
@@ -25,25 +23,23 @@ export function TeamSettings({ teamId }: { teamId: string }) {
   return (
     <Flexbox direction="column">
       <PageHeader title={team?.name} icon={<Icons.Users />}>
-        <LinkButton href={`/teams/${teamId}`} variant="primary">
-          <Icon>
-            <Icons.Change />
-          </Icon>
-          <Text>{formatMessage(labels.view)}</Text>
-        </LinkButton>
+        {!canEdit && (
+          <LinkButton href={`/teams/${teamId}`}>
+            <Icon>
+              <Icons.Logout />
+            </Icon>
+            <Text>{formatMessage(labels.leaveTeam)}</Text>
+          </LinkButton>
+        )}
       </PageHeader>
       <Tabs selectedKey={tab} onSelect={(value: any) => setTab(value)} style={{ marginBottom: 30 }}>
         <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>
+        <Item key="admin">{formatMessage(labels.admin)}</Item>
       </Tabs>
       {tab === 'details' && <TeamEditForm teamId={teamId} allowEdit={canEdit} />}
-      {tab === 'members' && <TeamMembers teamId={teamId} allowEdit={canEdit} />}
-      {tab === 'websites' && <TeamWebsites teamId={teamId} allowEdit={canEdit} />}
-      {canEdit && tab === 'data' && <TeamData teamId={teamId} />}
+      {canEdit && tab === 'admin' && <TeamAdmin teamId={teamId} />}
     </Flexbox>
   );
 }
 
-export default TeamSettings;
+export default Team;

src/app/(main)/settings/teams/[teamId]/team/TeamAdmin.tsx

@@ -1,9 +1,9 @@
 'use client';
 import { ActionForm, Button, Modal, ModalTrigger } from 'react-basics';
 import { useMessages } from 'components/hooks';
-import TeamDeleteForm from '../TeamDeleteForm';
+import TeamDeleteForm from './TeamDeleteForm';
 
-export function TeamData({ teamId }: { teamId: string }) {
+export function TeamAdmin({ teamId }: { teamId: string }) {
   const { formatMessage, labels, messages } = useMessages();
 
   return (
@@ -21,4 +21,4 @@ export function TeamData({ teamId }: { teamId: string }) {
   );
 }
 
-export default TeamData;
+export default TeamAdmin;

src/app/(main)/settings/teams/[teamId]/team/page.tsx

@@ -1,10 +1,15 @@
-import TeamSettings from './TeamSettings';
+import Team from './Team';
 import TeamProvider from 'app/(main)/teams/[teamId]/TeamProvider';
+import { Metadata } from 'next';
 
 export default function ({ params: { teamId } }) {
   return (
     <TeamProvider teamId={teamId}>
-      <TeamSettings teamId={teamId} />
+      <Team teamId={teamId} />
     </TeamProvider>
   );
 }
+
+export const metadata: Metadata = {
+  title: 'Teams Settings - Umami',
+};

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

@@ -0,0 +1,17 @@
+'use client';
+import TeamWebsitesDataTable from './TeamWebsitesDataTable';
+import PageHeader from 'components/layout/PageHeader';
+import { useMessages } from 'components/hooks';
+
+export function TeamWebsites({ teamId }: { teamId: string }) {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <>
+      <PageHeader title={formatMessage(labels.websites)} />
+      <TeamWebsitesDataTable teamId={teamId} allowEdit={true} />
+    </>
+  );
+}
+
+export default TeamWebsites;

src/app/(main)/settings/teams/[teamId]/websites/TeamWebsitesDataTable.tsx

@@ -3,7 +3,13 @@ import DataTable from 'components/common/DataTable';
 import { useTeamWebsites } from 'components/hooks';
 import TeamWebsitesTable from './TeamWebsitesTable';
 
-export function TeamWebsites({ teamId, allowEdit }: { teamId: string; allowEdit: boolean }) {
+export function TeamWebsitesDataTable({
+  teamId,
+  allowEdit = false,
+}: {
+  teamId: string;
+  allowEdit?: boolean;
+}) {
   const queryResult = useTeamWebsites(teamId);
 
   return (
@@ -13,4 +19,4 @@ export function TeamWebsites({ teamId, allowEdit }: { teamId: string; allowEdit:
   );
 }
 
-export default TeamWebsites;
+export default TeamWebsitesDataTable;

src/app/(main)/settings/teams/[teamId]/websites/TeamWebsitesTable.tsx

@@ -35,7 +35,7 @@ export function TeamWebsitesTable({
               )}
               <LinkButton href={`/teams/${teamId}/websites/${websiteId}`}>
                 <Icon>
-                  <Icons.Change />
+                  <Icons.ArrowRight />
                 </Icon>
                 <Text>{formatMessage(labels.view)}</Text>
               </LinkButton>

src/app/(main)/settings/teams/[teamId]/websites/page.tsx

@@ -0,0 +1,15 @@
+import TeamWebsites from './TeamWebsites';
+import TeamProvider from 'app/(main)/teams/[teamId]/TeamProvider';
+import { Metadata } from 'next';
+
+export default function ({ params: { teamId } }) {
+  return (
+    <TeamProvider teamId={teamId}>
+      <TeamWebsites teamId={teamId} />
+    </TeamProvider>
+  );
+}
+
+export const metadata: Metadata = {
+  title: 'Teams websites - Umami',
+};

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

@@ -30,12 +30,12 @@ export function UserAddForm({ onSave, onClose }) {
     });
   };
 
-  const renderValue = value => {
+  const renderValue = (value: string) => {
     if (value === ROLES.user) {
       return formatMessage(labels.user);
     }
     if (value === ROLES.admin) {
-      return formatMessage(labels.admin);
+      return formatMessage(labels.administrator);
     }
     if (value === ROLES.viewOnly) {
       return formatMessage(labels.viewOnly);
@@ -59,7 +59,7 @@ export function UserAddForm({ onSave, onClose }) {
           <Dropdown renderValue={renderValue}>
             <Item key={ROLES.viewOnly}>{formatMessage(labels.viewOnly)}</Item>
             <Item key={ROLES.user}>{formatMessage(labels.user)}</Item>
-            <Item key={ROLES.admin}>{formatMessage(labels.admin)}</Item>
+            <Item key={ROLES.admin}>{formatMessage(labels.administrator)}</Item>
           </Dropdown>
         </FormInput>
       </FormRow>

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

@@ -49,7 +49,7 @@ export function UserEditForm({
       return formatMessage(labels.user);
     }
     if (value === ROLES.admin) {
-      return formatMessage(labels.admin);
+      return formatMessage(labels.administrator);
     }
     if (value === ROLES.viewOnly) {
       return formatMessage(labels.viewOnly);
@@ -78,7 +78,7 @@ export function UserEditForm({
           <Dropdown renderValue={renderValue}>
             <Item key={ROLES.viewOnly}>{formatMessage(labels.viewOnly)}</Item>
             <Item key={ROLES.user}>{formatMessage(labels.user)}</Item>
-            <Item key={ROLES.admin}>{formatMessage(labels.admin)}</Item>
+            <Item key={ROLES.admin}>{formatMessage(labels.administrator)}</Item>
           </Dropdown>
         </FormInput>
       </FormRow>