From cb1f907e77fd9ce7865072a73cb6838ef55b637a Mon Sep 17 00:00:00 2001
From: Aric Lasry <aric@dust.tt>
Date: Fri, 16 Feb 2024 17:03:38 +0100
Subject: [PATCH] Fix the refresh rate of the sync chip (#3784)

* Fix the refresh rate of the sync chip

* format
---
 .../data_source/DataSourceSyncChip.tsx        | 60 +++++++++++--------
 front/lib/swr.ts                              | 19 ++++--
 .../builder/data-sources/[name]/index.tsx     |  5 +-
 .../w/[wId]/builder/data-sources/managed.tsx  |  5 +-
 .../builder/data-sources/public-urls.tsx      |  5 +-
 5 files changed, 59 insertions(+), 35 deletions(-)

diff --git a/front/components/data_source/DataSourceSyncChip.tsx b/front/components/data_source/DataSourceSyncChip.tsx
index 60f3fe487764..9453f7c0a6bd 100644
--- a/front/components/data_source/DataSourceSyncChip.tsx
+++ b/front/components/data_source/DataSourceSyncChip.tsx
@@ -1,37 +1,44 @@
 import { Chip } from "@dust-tt/sparkle";
-import type { ConnectorType } from "@dust-tt/types";
 import { assertNever } from "@dust-tt/types";
-import { useEffect, useState } from "react";
 
 import { CONNECTOR_CONFIGURATIONS } from "@app/lib/connector_providers";
 import { useConnector } from "@app/lib/swr";
 import { timeAgoFrom } from "@app/lib/utils";
 
 export default function ConnectorSyncingChip({
-  connector,
+  workspaceId,
+  dataSourceName,
 }: {
-  connector: ConnectorType;
+  workspaceId: string;
+  dataSourceName: string;
 }) {
-  const [computedTimeAgo, setComputedTimeAgo] = useState<string | null>(null);
-  const refreshedConnector = useConnector({
-    workspaceId: connector.workspaceId,
-    dataSourceName: connector.dataSourceName,
-    refreshInterval: 3000,
+  const { connector, isConnectorLoading, isConnectorError } = useConnector({
+    workspaceId: workspaceId,
+    dataSourceName: dataSourceName,
   });
 
-  useEffect(() => {
-    if (refreshedConnector.connector?.lastSyncSuccessfulTime) {
-      setComputedTimeAgo(
-        timeAgoFrom(refreshedConnector.connector.lastSyncSuccessfulTime)
+  if (!connector) {
+    if (isConnectorError) {
+      return (
+        <Chip color="warning">Error loading synchronization information</Chip>
       );
+    } else if (isConnectorLoading) {
+      return (
+        <Chip color="amber" isBusy>
+          Loading
+        </Chip>
+      );
+    } else {
+      // This should never happen, but is a typescript possible case
+      return <Chip color="warning">Connector not found</Chip>;
     }
-  }, [refreshedConnector.connector?.lastSyncSuccessfulTime]);
+  }
 
-  if (refreshedConnector.connector?.errorType) {
+  if (connector.errorType) {
     return (
       <Chip color="warning">
         {(() => {
-          switch (refreshedConnector.connector?.errorType) {
+          switch (connector.errorType) {
             case "oauth_token_revoked":
               return (
                 <>
@@ -44,30 +51,31 @@ export default function ConnectorSyncingChip({
               return (
                 <>
                   We have encountered an error talking to{" "}
-                  {
-                    CONNECTOR_CONFIGURATIONS[refreshedConnector.connector.type]
-                      .name
-                  }
-                  . We sent you an email with more details to resolve the issue.
+                  {CONNECTOR_CONFIGURATIONS[connector.type].name}. We sent you
+                  an email with more details to resolve the issue.
                 </>
               );
             default:
-              assertNever(refreshedConnector.connector?.errorType);
+              assertNever(connector.errorType);
           }
           return <></>;
         })()}
       </Chip>
     );
-  } else if (!refreshedConnector.connector?.lastSyncSuccessfulTime) {
+  } else if (!connector.lastSyncSuccessfulTime) {
     return (
       <Chip color="amber" isBusy>
         Synchronizing
-        {refreshedConnector.connector?.firstSyncProgress
-          ? ` (${refreshedConnector.connector.firstSyncProgress})`
+        {connector.firstSyncProgress
+          ? ` (${connector.firstSyncProgress})`
           : null}
       </Chip>
     );
   } else {
-    return <Chip color="slate">Last Sync ~ {computedTimeAgo} ago</Chip>;
+    return (
+      <Chip color="slate">
+        Last Sync ~ {timeAgoFrom(connector.lastSyncSuccessfulTime)} ago
+      </Chip>
+    );
   }
 }
diff --git a/front/lib/swr.ts b/front/lib/swr.ts
index 73c7a2d542f4..5cdd54fc83dc 100644
--- a/front/lib/swr.ts
+++ b/front/lib/swr.ts
@@ -363,21 +363,28 @@ export function useConnectorConfig({
 export function useConnector({
   workspaceId,
   dataSourceName,
-  refreshInterval,
 }: {
   workspaceId: string;
   dataSourceName: string;
-  refreshInterval: number;
 }) {
-  if (refreshInterval < 1000) {
-    throw new Error("refreshInterval must be at least 1000ms");
-  }
   const configFetcher: Fetcher<GetConnectorResponseBody> = fetcher;
 
   const url = `/api/w/${workspaceId}/data_sources/${dataSourceName}/connector`;
 
   const { data, error, mutate } = useSWR(url, configFetcher, {
-    refreshInterval,
+    refreshInterval: (connectorResBody) => {
+      if (connectorResBody?.connector.errorType !== undefined) {
+        // We have an error, no need to auto refresh.
+        return 0;
+      }
+      if (connectorResBody?.connector.lastSyncSuccessfulTime) {
+        // no sync in progress, no need to auto refresh.
+        return 0;
+      }
+
+      // We have a synchronization in progress, we'll refresh every 3 seconds.
+      return 3000;
+    },
   });
 
   return {
diff --git a/front/pages/w/[wId]/builder/data-sources/[name]/index.tsx b/front/pages/w/[wId]/builder/data-sources/[name]/index.tsx
index 206270da1b8a..edf4eeb5b0a4 100644
--- a/front/pages/w/[wId]/builder/data-sources/[name]/index.tsx
+++ b/front/pages/w/[wId]/builder/data-sources/[name]/index.tsx
@@ -1017,7 +1017,10 @@ function ManagedDataSourceView({
           )}
         </div>
         <div className="pt-2">
-          <ConnectorSyncingChip connector={connector} />
+          <ConnectorSyncingChip
+            workspaceId={connector.workspaceId}
+            dataSourceName={connector.dataSourceName}
+          />
         </div>
 
         {isAdmin && (
diff --git a/front/pages/w/[wId]/builder/data-sources/managed.tsx b/front/pages/w/[wId]/builder/data-sources/managed.tsx
index a500cf67fd08..5f2075aec4a6 100644
--- a/front/pages/w/[wId]/builder/data-sources/managed.tsx
+++ b/front/pages/w/[wId]/builder/data-sources/managed.tsx
@@ -699,7 +699,10 @@ export default function DataSourcesView({
                           );
                         } else {
                           return (
-                            <ConnectorSyncingChip connector={ds.connector} />
+                            <ConnectorSyncingChip
+                              workspaceId={ds.connector.workspaceId}
+                              dataSourceName={ds.connector.dataSourceName}
+                            />
                           );
                         }
                       })()}
diff --git a/front/pages/w/[wId]/builder/data-sources/public-urls.tsx b/front/pages/w/[wId]/builder/data-sources/public-urls.tsx
index 09cf4b43f9be..5e5c54e70f6a 100644
--- a/front/pages/w/[wId]/builder/data-sources/public-urls.tsx
+++ b/front/pages/w/[wId]/builder/data-sources/public-urls.tsx
@@ -208,7 +208,10 @@ export default function DataSourcesView({
                 </Button.List>
               }
             >
-              <ConnectorSyncingChip connector={ds.connector} />
+              <ConnectorSyncingChip
+                workspaceId={ds.connector.workspaceId}
+                dataSourceName={ds.connector.dataSourceName}
+              />
               <ContextItem.Description>
                 {" "}
                 <br />