Updated edit permissions on settings components.

src/app/(main)/teams/TeamJoinForm.tsx

@@ -6,12 +6,11 @@ import {
   Button,
   FormSubmitButton,
 } from '@umami/react-zen';
-import { useMessages, useModified, useUpdateQuery } from '@/components/hooks';
+import { useMessages, useUpdateQuery } from '@/components/hooks';
 
 export function TeamJoinForm({ onSave, onClose }: { onSave: () => void; onClose: () => void }) {
   const { formatMessage, labels, getErrorMessage } = useMessages();
-  const { mutate, error } = useUpdateQuery('/teams/join');
-  const { touch } = useModified();
+  const { mutate, error, isPending, touch } = useUpdateQuery('/teams/join');
 
   const handleSubmit = async (data: any) => {
     mutate(data, {
@@ -34,7 +33,9 @@ export function TeamJoinForm({ onSave, onClose }: { onSave: () => void; onClose:
       </FormField>
       <FormButtons>
         <Button onPress={onClose}>{formatMessage(labels.cancel)}</Button>
-        <FormSubmitButton variant="primary">{formatMessage(labels.join)}</FormSubmitButton>
+        <FormSubmitButton variant="primary" isLoading={isPending} isDisabled={isPending}>
+          {formatMessage(labels.join)}
+        </FormSubmitButton>
       </FormButtons>
     </Form>
   );

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

@@ -1,17 +1,13 @@
-import { DataColumn, DataTable, Icon, MenuItem, Text, Row } from '@umami/react-zen';
+import { DataColumn, DataTable } from '@umami/react-zen';
 import { useMessages } from '@/components/hooks';
-import { Eye, Edit } from '@/components/icons';
 import { ROLES } from '@/lib/constants';
-import { MenuButton } from '@/components/input/MenuButton';
 import { ReactNode } from 'react';
 
 export function TeamsTable({
   data = [],
-  showActions = false,
   renderLink,
 }: {
   data: any[];
-  showActions?: boolean;
   renderLink?: (row: any) => ReactNode;
 }) {
   const { formatMessage, labels } = useMessages();
@@ -30,34 +26,6 @@ export function TeamsTable({
       <DataColumn id="members" label={formatMessage(labels.members)} align="end">
         {(row: any) => row?._count?.members}
       </DataColumn>
-      {showActions ? (
-        <DataColumn id="action" label=" " align="end">
-          {(row: any) => {
-            const { id } = row;
-
-            return (
-              <MenuButton>
-                <MenuItem href={`/teams/${id}`}>
-                  <Row alignItems="center" gap>
-                    <Icon>
-                      <Eye />
-                    </Icon>
-                    <Text>{formatMessage(labels.view)}</Text>
-                  </Row>
-                </MenuItem>
-                <MenuItem href={`/settings/teams/${id}`}>
-                  <Row alignItems="center" gap>
-                    <Icon>
-                      <Edit />
-                    </Icon>
-                    <Text>{formatMessage(labels.edit)}</Text>
-                  </Row>
-                </MenuItem>
-              </MenuButton>
-            );
-          }}
-        </DataColumn>
-      ) : null}
     </DataTable>
   );
 }

src/app/(main)/teams/[teamId]/TeamEditForm.tsx

@@ -14,10 +14,12 @@ const generateId = () => `team_${getRandomChars(16)}`;
 export function TeamEditForm({
   teamId,
   allowEdit,
+  showAccessCode,
   onSave,
 }: {
   teamId: string;
   allowEdit?: boolean;
+  showAccessCode?: boolean;
   onSave?: () => void;
 }) {
   const team = useTeam();
@@ -51,9 +53,11 @@ export function TeamEditForm({
             >
               <TextField isReadOnly={!allowEdit} />
             </FormField>
-            <FormField name="accessCode" label={formatMessage(labels.accessCode)}>
-              <TextField isReadOnly allowCopy />
-            </FormField>
+            {showAccessCode && (
+              <FormField name="accessCode" label={formatMessage(labels.accessCode)}>
+                <TextField isReadOnly allowCopy />
+              </FormField>
+            )}
             {allowEdit && (
               <FormButtons justifyContent="space-between">
                 <Button onPress={() => setValue('accessCode', generateId(), { shouldDirty: true })}>

src/app/(main)/teams/[teamId]/TeamMembersPage.tsx

@@ -1,25 +0,0 @@
-'use client';
-import { TeamMembersDataTable } from './TeamMembersDataTable';
-import { SectionHeader } from '@/components/common/SectionHeader';
-import { useLoginQuery, useMessages, useTeam } from '@/components/hooks';
-import { ROLES } from '@/lib/constants';
-import { Column } from '@umami/react-zen';
-
-export function TeamMembersPage({ teamId }: { teamId: string }) {
-  const team = useTeam();
-  const { user } = useLoginQuery();
-  const { formatMessage, labels } = useMessages();
-
-  const canEdit =
-    team?.members?.find(
-      ({ userId, role }) =>
-        (role === ROLES.teamOwner || role === ROLES.teamManager) && userId === user.id,
-    ) && user.role !== ROLES.viewOnly;
-
-  return (
-    <Column gap>
-      <SectionHeader title={formatMessage(labels.members)} />
-      <TeamMembersDataTable teamId={teamId} allowEdit={canEdit} />
-    </Column>
-  );
-}

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

@@ -1,23 +1,20 @@
-import { useState } from 'react';
-import { Column, Tabs, TabList, Tab, TabPanel } from '@umami/react-zen';
+import Link from 'next/link';
+import { Column, Icon, Text, Row } from '@umami/react-zen';
 import { useLoginQuery, useMessages, useNavigation, useTeam } from '@/components/hooks';
-
 import { ROLES } from '@/lib/constants';
-import { Users } from '@/components/icons';
+import { Users, Arrow } from '@/components/icons';
 import { TeamLeaveButton } from '@/app/(main)/teams/TeamLeaveButton';
 import { TeamManage } from './TeamManage';
 import { TeamEditForm } from './TeamEditForm';
-import { TeamWebsitesDataTable } from './TeamWebsitesDataTable';
 import { TeamMembersDataTable } from './TeamMembersDataTable';
 import { PageHeader } from '@/components/common/PageHeader';
 import { Panel } from '@/components/common/Panel';
 
 export function TeamSettings({ teamId }: { teamId: string }) {
   const team: any = useTeam();
-  const { formatMessage, labels } = useMessages();
   const { user } = useLoginQuery();
-  const { query, pathname } = useNavigation();
-  const [tab, setTab] = useState(query?.tab || 'details');
+  const { formatMessage, labels } = useMessages();
+  const { pathname } = useNavigation();
 
   const isAdmin = pathname.includes('/admin');
 
@@ -34,32 +31,32 @@ export function TeamSettings({ teamId }: { teamId: string }) {
       user.role !== ROLES.viewOnly);
 
   return (
-    <Column gap="6">
-      <PageHeader title={team?.name} icon={<Users />}>
-        {!isTeamOwner && !isAdmin && <TeamLeaveButton teamId={team.id} teamName={team.name} />}
-      </PageHeader>
-      <Panel>
-        <Tabs selectedKey={tab} onSelectionChange={(value: any) => setTab(value)}>
-          <TabList>
-            <Tab id="details">{formatMessage(labels.details)}</Tab>
-            <Tab id="members">{formatMessage(labels.members)}</Tab>
-            <Tab id="websites">{formatMessage(labels.websites)}</Tab>
-            {isTeamOwner && <Tab id="manage">{formatMessage(labels.manage)}</Tab>}
-          </TabList>
-          <TabPanel id="details" style={{ width: 500 }}>
-            <TeamEditForm teamId={teamId} allowEdit={canEdit} />
-          </TabPanel>
-          <TabPanel id="members">
-            <TeamMembersDataTable teamId={teamId} allowEdit />
-          </TabPanel>
-          <TabPanel id="websites">
-            <TeamWebsitesDataTable teamId={teamId} allowEdit />
-          </TabPanel>
-          <TabPanel id="manage">
+    <>
+      <Link href="/settings/teams">
+        <Row marginTop="2" alignItems="center" gap>
+          <Icon rotate={180}>
+            <Arrow />
+          </Icon>
+          <Text>{formatMessage(labels.teams)}</Text>
+        </Row>
+      </Link>
+
+      <Column gap="6">
+        <PageHeader title={team?.name} icon={<Users />}>
+          {!isTeamOwner && !isAdmin && <TeamLeaveButton teamId={team.id} teamName={team.name} />}
+        </PageHeader>
+        <Panel>
+          <TeamEditForm teamId={teamId} allowEdit={canEdit} showAccessCode={canEdit} />
+        </Panel>
+        <Panel>
+          <TeamMembersDataTable teamId={teamId} allowEdit={canEdit} />
+        </Panel>
+        {isTeamOwner && (
+          <Panel>
             <TeamManage teamId={teamId} />
-          </TabPanel>
-        </Tabs>
-      </Panel>
-    </Column>
+          </Panel>
+        )}
+      </Column>
+    </>
   );
 }