Refactor of team websites.

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 (
-    <>
-      <ActionForm description={formatMessage(messages.teamWebsitesInfo)}>
-        <ModalTrigger>
-          <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>
-    </>
+    <DataTable queryResult={queryResult}>
+      {({ data }) => <TeamWebsitesTable data={data} onRemove={handleChange} readOnly={readOnly} />}
+    </DataTable>
   );
 }