feat: add Tables settings to Settings/Integrations/Database/Connectio… (#4851)

…n page

Closes #4560

packages/twenty-front/src/modules/settings/components/SettingsListCard.tsx

@@ -42,7 +42,7 @@ type SettingsListCardProps<ListItem extends { id: string }> = {
   hasFooter?: boolean;
   isLoading?: boolean;
   onRowClick?: (item: ListItem) => void;
-  RowIcon: IconComponent;
+  RowIcon?: IconComponent;
   RowRightComponent: ComponentType<{ item: ListItem }>;
   footerButtonLabel?: string;
   onFooterButtonClick?: () => void;

packages/twenty-front/src/modules/settings/components/SettingsListItemCardContent.tsx

@@ -14,16 +14,17 @@ const StyledRow = styled(CardContent)`
   gap: ${({ theme }) => theme.spacing(2)};
   padding: ${({ theme }) => theme.spacing(2)};
   padding-left: ${({ theme }) => theme.spacing(3)};
+  min-height: ${({ theme }) => theme.spacing(6)};
 `;
 
-const StyledAccountHandle = styled.span`
+const StyledLabel = styled.span`
   flex: 1 0 auto;
 `;
 
 type SettingsListItemCardContentProps = {
   label: string;
   divider?: boolean;
-  LeftIcon: IconComponent;
+  LeftIcon?: IconComponent;
   onClick?: () => void;
   rightComponent: ReactNode;
 };
@@ -39,8 +40,8 @@ export const SettingsListItemCardContent = ({
 
   return (
     <StyledRow onClick={onClick} divider={divider}>
-      <LeftIcon size={theme.icon.size.md} />
-      <StyledAccountHandle>{label}</StyledAccountHandle>
+      {!!LeftIcon && <LeftIcon size={theme.icon.size.md} />}
+      <StyledLabel>{label}</StyledLabel>
       {rightComponent}
     </StyledRow>
   );

packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationDatabaseTablesListCard.tsx

@@ -0,0 +1,50 @@
+import { Controller, useFormContext } from 'react-hook-form';
+import styled from '@emotion/styled';
+import { z } from 'zod';
+
+import { SettingsListCard } from '@/settings/components/SettingsListCard';
+import { Toggle } from '@/ui/input/components/Toggle';
+
+export const settingsIntegrationsDatabaseTablesSchema = z.object({
+  syncedTablesById: z.record(z.boolean()),
+});
+
+export type SettingsIntegrationsDatabaseTablesFormValues = z.infer<
+  typeof settingsIntegrationsDatabaseTablesSchema
+>;
+
+type SettingsIntegrationDatabaseTablesListCardProps = {
+  tables: { id: string; name: string; isSynced?: boolean }[];
+};
+
+const StyledRowRightContainer = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(1)};
+`;
+
+export const SettingsIntegrationDatabaseTablesListCard = ({
+  tables,
+}: SettingsIntegrationDatabaseTablesListCardProps) => {
+  const { control } =
+    useFormContext<SettingsIntegrationsDatabaseTablesFormValues>();
+
+  return (
+    <SettingsListCard
+      items={tables}
+      RowRightComponent={({ item: table }) => (
+        <StyledRowRightContainer>
+          <Controller
+            name={`syncedTablesById.${table.id}`}
+            control={control}
+            defaultValue={!!table.isSynced}
+            render={({ field: { onChange, value } }) => (
+              <Toggle value={value} onChange={onChange} />
+            )}
+          />
+        </StyledRowRightContainer>
+      )}
+      getItemLabel={(table) => table.name}
+    />
+  );
+};