Updated add team website form.

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

@@ -6,16 +6,10 @@ import DataTable from 'components/common/DataTable';
 import useFilterQuery from 'components/hooks/useFilterQuery';
 import WebsitesHeader from './WebsitesHeader';
 
-export function Websites({
-  showHeader = true,
-  showEditButton = true,
-  showTeam,
-  includeTeams,
-  onlyTeams,
-}) {
+function useWebsites({ includeTeams, onlyTeams }) {
   const { user } = useUser();
   const { get } = useApi();
-  const filterQuery = useFilterQuery(
+  return useFilterQuery(
     ['websites', { includeTeams, onlyTeams }],
     params => {
       return get(`/users/${user?.id}/websites`, {
@@ -26,18 +20,38 @@ export function Websites({
     },
     { enabled: !!user },
   );
-  const { getProps } = filterQuery;
+}
+
+export function WebsitesDataTable({
+  showHeader = true,
+  showEditButton = true,
+  showViewButton = true,
+  showActions = true,
+  showTeam,
+  includeTeams,
+  onlyTeams,
+  children,
+}) {
+  const queryResult = useWebsites({ includeTeams, onlyTeams });
 
   return (
     <>
       {showHeader && <WebsitesHeader />}
-      <DataTable {...getProps()}>
+      <DataTable queryResult={queryResult}>
         {({ data }) => (
-          <WebsitesTable data={data} showTeam={showTeam} showEditButton={showEditButton} />
+          <WebsitesTable
+            data={data}
+            showTeam={showTeam}
+            showActions={showActions}
+            showEditButton={showEditButton}
+            showViewButton={showViewButton}
+          >
+            {children}
+          </WebsitesTable>
         )}
       </DataTable>
     </>
   );
 }
 
-export default Websites;
+export default WebsitesDataTable;

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

@@ -3,7 +3,14 @@ import { Button, Text, Icon, Icons, GridTable, GridColumn } from 'react-basics';
 import useMessages from 'components/hooks/useMessages';
 import useUser from 'components/hooks/useUser';
 
-export function WebsitesTable({ data = [], showTeam, showEditButton }) {
+export function WebsitesTable({
+  data = [],
+  showTeam,
+  showActions,
+  showEditButton,
+  showViewButton,
+  children,
+}) {
   const { formatMessage, labels } = useMessages();
   const { user } = useUser();
 
@@ -30,7 +37,7 @@ export function WebsitesTable({ data = [], showTeam, showEditButton }) {
 
           return (
             <>
-              {showEditButton && (!showTeam || ownerId === user.id) && (
+              {showActions && showEditButton && (!showTeam || ownerId === user.id) && (
                 <Link href={`/settings/websites/${id}`}>
                   <Button>
                     <Icon>
@@ -40,18 +47,21 @@ export function WebsitesTable({ data = [], showTeam, showEditButton }) {
                   </Button>
                 </Link>
               )}
-              <Link href={`/websites/${id}`}>
-                <Button>
-                  <Icon>
-                    <Icons.External />
-                  </Icon>
-                  <Text>{formatMessage(labels.view)}</Text>
-                </Button>
-              </Link>
+              {showActions && showViewButton && (
+                <Link href={`/websites/${id}`}>
+                  <Button>
+                    <Icon>
+                      <Icons.External />
+                    </Icon>
+                    <Text>{formatMessage(labels.view)}</Text>
+                  </Button>
+                </Link>
+              )}
             </>
           );
         }}
       </GridColumn>
+      {children}
     </GridTable>
   );
 }

src/app/(main)/settings/websites/page.js

@@ -1,9 +1,9 @@
-import Websites from './Websites';
+import WebsitesDataTable from './WebsitesDataTable';
 
 export default function () {
   if (process.env.cloudMode) {
     return null;
   }
 
-  return <Websites />;
+  return <WebsitesDataTable />;
 }