Teams context settings.

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

@@ -1,3 +1,4 @@
+'use client';
 import { ActionForm, Button, Modal, ModalTrigger } from 'react-basics';
 import { useMessages } from 'components/hooks';
 import TeamDeleteForm from '../TeamDeleteForm';

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

@@ -1,3 +1,4 @@
+'use client';
 import {
   SubmitButton,
   Form,

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

@@ -1,3 +1,4 @@
+'use client';
 import { useApi, useMessages } from 'components/hooks';
 import { Icon, Icons, LoadingButton, Text } from 'react-basics';
 import { touch } from 'store/cache';

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

@@ -1,3 +1,4 @@
+'use client';
 import DataTable from 'components/common/DataTable';
 import TeamMembersTable from './TeamMembersTable';
 import useTeamMembers from 'components/hooks/queries/useTeamMembers';

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

@@ -1,3 +1,4 @@
+'use client';
 import { GridColumn, GridTable, useBreakpoint } from 'react-basics';
 import { useMessages, useLogin } from 'components/hooks';
 import { ROLES } from 'lib/constants';

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

@@ -1,7 +1,6 @@
 'use client';
 import { useState } from 'react';
 import { Item, Loading, Tabs, Flexbox, Text, Icon } from 'react-basics';
-import TeamsContext from 'app/(main)/teams/TeamsContext';
 import PageHeader from 'components/layout/PageHeader';
 import { ROLES } from 'lib/constants';
 import Icons from 'components/icons';
@@ -27,32 +26,26 @@ export function TeamSettings({ teamId }: { teamId: string }) {
   );
 
   return (
-    <TeamsContext.Provider value={team}>
-      <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>
-        </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>
-        </Tabs>
-        {tab === 'details' && <TeamEditForm teamId={teamId} data={team} allowEdit={canEdit} />}
-        {tab === 'members' && <TeamMembers teamId={teamId} allowEdit={canEdit} />}
-        {tab === 'websites' && <TeamWebsites teamId={teamId} allowEdit={canEdit} />}
-        {canEdit && tab === 'data' && <TeamData teamId={teamId} />}
-      </Flexbox>
-    </TeamsContext.Provider>
+    <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>
+      </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>
+      </Tabs>
+      {tab === 'details' && <TeamEditForm teamId={teamId} data={team} allowEdit={canEdit} />}
+      {tab === 'members' && <TeamMembers teamId={teamId} allowEdit={canEdit} />}
+      {tab === 'websites' && <TeamWebsites teamId={teamId} allowEdit={canEdit} />}
+      {canEdit && tab === 'data' && <TeamData teamId={teamId} />}
+    </Flexbox>
   );
 }
 

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

@@ -1,3 +1,4 @@
+'use client';
 import { useApi, useMessages } from 'components/hooks';
 import { Icon, Icons, LoadingButton, Text } from 'react-basics';
 

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

@@ -1,3 +1,4 @@
+'use client';
 import WebsitesDataTable from 'app/(main)/settings/websites/WebsitesDataTable';
 
 export function TeamWebsites({ teamId, allowEdit }: { teamId: string; allowEdit: boolean }) {

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

@@ -1,3 +1,4 @@
+'use client';
 import Link from 'next/link';
 import { Button, GridColumn, GridTable, Icon, Text } from 'react-basics';
 import { useMessages } from 'components/hooks';

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

@@ -1,9 +1,5 @@
 import TeamSettings from './TeamSettings';
 
 export default function ({ params: { teamId } }) {
-  if (process.env.cloudMode) {
-    return null;
-  }
-
   return <TeamSettings teamId={teamId} />;
 }

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

@@ -3,10 +3,6 @@ import TeamsDataTable from './TeamsDataTable';
 import TeamsHeader from './TeamsHeader';
 
 export default function () {
-  if (process.env.cloudMode) {
-    return null;
-  }
-
   return (
     <>
       <TeamsHeader />