Refactor of team websites.

src/app/(main)/settings/profile/LanguageSetting.tsx

@@ -29,7 +29,7 @@ export function LanguageSetting() {
         items={options}
         value={locale}
         renderValue={renderValue}
-        onSelect={saveLocale}
+        onChange={saveLocale}
         allowSearch={true}
         onSearch={setSearch}
         menuProps={{ className: styles.menu }}

src/app/(main)/settings/profile/TimezoneSetting.tsx

@@ -21,7 +21,7 @@ export function TimezoneSetting() {
       <Dropdown
         items={options}
         value={timezone}
-        onSelect={saveTimezone}
+        onChange={saveTimezone}
         menuProps={{ className: styles.menu }}
         allowSearch={true}
         onSearch={setSearch}

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

@@ -1,33 +0,0 @@
-import { Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
-import useMessages from 'components/hooks/useMessages';
-import TeamDeleteForm from './TeamDeleteForm';
-
-export function TeamDeleteButton({
-  teamId,
-  teamName,
-  onDelete,
-}: {
-  teamId: string;
-  teamName: string;
-  onDelete?: () => void;
-}) {
-  const { formatMessage, labels } = useMessages();
-
-  return (
-    <ModalTrigger>
-      <Button>
-        <Icon>
-          <Icons.Trash />
-        </Icon>
-        <Text>{formatMessage(labels.delete)}</Text>
-      </Button>
-      <Modal title={formatMessage(labels.deleteTeam)}>
-        {(close: any) => (
-          <TeamDeleteForm teamId={teamId} teamName={teamName} onSave={onDelete} onClose={close} />
-        )}
-      </Modal>
-    </ModalTrigger>
-  );
-}
-
-export default TeamDeleteButton;

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

@@ -4,7 +4,6 @@ import useUser from 'components/hooks/useUser';
 import { ROLES } from 'lib/constants';
 import Link from 'next/link';
 import { Button, GridColumn, GridTable, Icon, Icons, Text, useBreakpoint } from 'react-basics';
-import TeamDeleteButton from './TeamDeleteButton';
 import TeamLeaveButton from './TeamLeaveButton';
 
 export function TeamsTable({ data = [] }: { data: any[] }) {
@@ -26,13 +25,10 @@ export function TeamsTable({ data = [] }: { data: any[] }) {
 
           return (
             <>
-              {isOwner && <TeamDeleteButton teamId={id} teamName={name} />}
               {!isOwner && <TeamLeaveButton teamId={id} teamName={name} />}
               <Link href={`/settings/teams/${id}`}>
                 <Button>
-                  <Icon>
-                    <Icons.Edit />
-                  </Icon>
+                  <Icon>{isOwner ? <Icons.Edit /> : <Icons.ArrowRight />}</Icon>
                   <Text>{formatMessage(isOwner ? labels.edit : labels.view)}</Text>
                 </Button>
               </Link>

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>
   );
 }
 

src/app/(main)/settings/websites/WebsitesDataTable.tsx

@@ -12,9 +12,6 @@ export interface WebsitesDataTableProps {
   allowEdit?: boolean;
   allowView?: boolean;
   showActions?: boolean;
-  showTeam?: boolean;
-  includeTeams?: boolean;
-  onlyTeams?: boolean;
   children?: ReactNode;
 }
 
@@ -23,9 +20,6 @@ export function WebsitesDataTable({
   allowEdit = true,
   allowView = true,
   showActions = true,
-  showTeam,
-  includeTeams,
-  onlyTeams,
   children,
 }: WebsitesDataTableProps) {
   const { get } = useApi();
@@ -33,11 +27,9 @@ export function WebsitesDataTable({
   const { websitesUrl } = useContext(SettingsContext);
 
   const queryResult = useFilterQuery({
-    queryKey: ['websites', { includeTeams, onlyTeams, modified }],
+    queryKey: ['websites', { modified }],
     queryFn: (params: any) => {
       return get(websitesUrl, {
-        includeTeams,
-        onlyTeams,
         ...params,
       });
     },
@@ -49,7 +41,6 @@ export function WebsitesDataTable({
       {({ data }) => (
         <WebsitesTable
           data={data}
-          showTeam={showTeam}
           showActions={showActions}
           allowEdit={allowEdit}
           allowView={allowView}

src/app/(main)/settings/websites/WebsitesTable.tsx

@@ -7,7 +7,6 @@ import SettingsContext from '../SettingsContext';
 
 export interface WebsitesTableProps {
   data: any[];
-  showTeam?: boolean;
   showActions?: boolean;
   allowEdit?: boolean;
   allowView?: boolean;
@@ -16,7 +15,6 @@ export interface WebsitesTableProps {
 
 export function WebsitesTable({
   data = [],
-  showTeam,
   showActions,
   allowEdit,
   allowView,
@@ -31,16 +29,6 @@ export function WebsitesTable({
     <GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
       <GridColumn name="name" label={formatMessage(labels.name)} />
       <GridColumn name="domain" label={formatMessage(labels.domain)} />
-      {showTeam && (
-        <GridColumn name="teamName" label={formatMessage(labels.teamName)}>
-          {row => row.teamWebsite[0]?.team.name}
-        </GridColumn>
-      )}
-      {showTeam && (
-        <GridColumn name="owner" label={formatMessage(labels.owner)}>
-          {row => row.user.username}
-        </GridColumn>
-      )}
       {showActions && (
         <GridColumn name="action" label=" " alignment="end">
           {row => {
@@ -51,7 +39,7 @@ export function WebsitesTable({
 
             return (
               <>
-                {allowEdit && (!showTeam || ownerId === user.id) && (
+                {allowEdit && ownerId === user.id && (
                   <Link href={`${settingsPath}/${id}`}>
                     <Button>
                       <Icon>

src/app/(main)/settings/websites/[id]/WebsiteDeleteForm.tsx

@@ -43,7 +43,7 @@ export function WebsiteDeleteForm({
     <Form onSubmit={handleSubmit} error={error}>
       <p>
         <FormattedMessage
-          {...messages.deleteWebsite}
+          {...messages.actionConfirmation}
           values={{ confirmation: <b>{CONFIRM_VALUE}</b> }}
         />
       </p>

src/app/(main)/settings/websites/[id]/WebsiteResetForm.tsx

@@ -43,7 +43,7 @@ export function WebsiteResetForm({
     <Form onSubmit={handleSubmit} error={error}>
       <p>
         <FormattedMessage
-          {...messages.resetWebsite}
+          {...messages.actionConfirmation}
           values={{ confirmation: <b>{CONFIRM_VALUE}</b> }}
         />
       </p>