[FE] Update remote table schema + refactor Tables list (#5548)

Closes #5062.

Refactoring tables list to avoid rendering all toggles on each sync or
schema update while using fresh data:
- introducing id for RemoteTables in apollo cache
- manually updating the cache for the record that was updated after a
sync or schema update instead of fetching all tables again

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

@@ -0,0 +1,37 @@
+import { FetchResult } from '@apollo/client';
+import styled from '@emotion/styled';
+import { IconReload } from 'twenty-ui';
+
+import { Button } from '@/ui/input/button/components/Button';
+import { SyncRemoteTableSchemaChangesMutation } from '~/generated-metadata/graphql';
+
+const StyledText = styled.h3`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  font-size: ${({ theme }) => theme.font.size.md};
+  font-weight: ${({ theme }) => theme.font.weight.regular};
+  margin: 0;
+`;
+
+type SettingsIntegrationRemoteTableSchemaUpdateProps = {
+  updatesText: string;
+  onUpdate: () => Promise<FetchResult<SyncRemoteTableSchemaChangesMutation>>;
+};
+
+export const SettingsIntegrationRemoteTableSchemaUpdate = ({
+  updatesText,
+  onUpdate,
+}: SettingsIntegrationRemoteTableSchemaUpdateProps) => {
+  return (
+    <>
+      {updatesText && <StyledText>{updatesText}</StyledText>}
+      {updatesText && (
+        <Button
+          Icon={IconReload}
+          title="Update"
+          size="small"
+          onClick={onUpdate}
+        />
+      )}
+    </>
+  );
+};

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

@@ -4,10 +4,12 @@ import { Toggle } from '@/ui/input/components/Toggle';
 import { RemoteTableStatus } from '~/generated-metadata/graphql';
 
 export const SettingsIntegrationRemoteTableSyncStatusToggle = ({
-  table,
+  tableName,
+  tableStatus,
   onSyncUpdate,
 }: {
-  table: { id: string; name: string; status: RemoteTableStatus };
+  tableName: string;
+  tableStatus: RemoteTableStatus;
   onSyncUpdate: (value: boolean, tableName: string) => Promise<void>;
 }) => {
   const [isToggleLoading, setIsToggleLoading] = useState(false);
@@ -15,13 +17,13 @@ export const SettingsIntegrationRemoteTableSyncStatusToggle = ({
   const onChange = async (newValue: boolean) => {
     if (isToggleLoading) return;
     setIsToggleLoading(true);
-    await onSyncUpdate(newValue, table.name);
+    await onSyncUpdate(newValue, tableName);
     setIsToggleLoading(false);
   };
 
   return (
     <Toggle
-      value={table.status === RemoteTableStatus.Synced}
+      value={tableStatus === RemoteTableStatus.Synced}
       disabled={isToggleLoading}
       onChange={onChange}
     />