From b9a9b6b4d9f53e7dd145fe6a6467a547defd6dfa Mon Sep 17 00:00:00 2001
From: Sheen Capadngan <sheensantoscapadngan@gmail.com>
Date: Wed, 22 May 2024 00:06:06 +0800
Subject: [PATCH] misc: applied ui/ux changes

---
 .../src/hooks/api/integrations/queries.tsx    |  29 ++--
 frontend/src/hooks/api/workspace/queries.tsx  |   3 +-
 .../IntegrationsSection.tsx                   | 127 ++++++++----------
 3 files changed, 65 insertions(+), 94 deletions(-)

diff --git a/frontend/src/hooks/api/integrations/queries.tsx b/frontend/src/hooks/api/integrations/queries.tsx
index f5c0e9580..9a1ee6fbf 100644
--- a/frontend/src/hooks/api/integrations/queries.tsx
+++ b/frontend/src/hooks/api/integrations/queries.tsx
@@ -1,10 +1,10 @@
-import { MutableRefObject } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 
+import { createNotification } from "@app/components/notifications";
 import { apiRequest } from "@app/config/request";
 
 import { workspaceKeys } from "../workspace/queries";
-import { TCloudIntegration, TIntegration } from "./types";
+import { TCloudIntegration } from "./types";
 
 export const integrationQueryKeys = {
   getIntegrations: () => ["integrations"] as const
@@ -112,27 +112,14 @@ export const useDeleteIntegration = () => {
   });
 };
 
-export const useSyncIntegration = (pollingRef: MutableRefObject<NodeJS.Timeout | null>) => {
-  const queryClient = useQueryClient();
-
+export const useSyncIntegration = () => {
   return useMutation<{}, {}, { id: string; workspaceId: string; lastUsed: string }>({
     mutationFn: ({ id }) => apiRequest.post(`/api/v1/integration/${id}/sync`),
-    onSuccess: (_, { id, workspaceId, lastUsed }) => {
-      // eslint-disable-next-line no-param-reassign
-      pollingRef.current = setInterval(() => {
-        const integrations: TIntegration[] | undefined = queryClient.getQueryData(
-          workspaceKeys.getWorkspaceIntegrations(workspaceId)
-        );
-
-        const integration = integrations?.find((entry) => entry.id === id);
-        if (!integration || integration.lastUsed !== lastUsed) {
-          clearInterval(pollingRef.current as NodeJS.Timeout);
-          // eslint-disable-next-line no-param-reassign
-          pollingRef.current = null;
-          return;
-        }
-        queryClient.invalidateQueries(workspaceKeys.getWorkspaceIntegrations(workspaceId));
-      }, 3500);
+    onSuccess: () => {
+      createNotification({
+        text: "Successfully triggered manual sync",
+        type: "success"
+      });
     }
   });
 };
diff --git a/frontend/src/hooks/api/workspace/queries.tsx b/frontend/src/hooks/api/workspace/queries.tsx
index cca544df3..71dbb8e01 100644
--- a/frontend/src/hooks/api/workspace/queries.tsx
+++ b/frontend/src/hooks/api/workspace/queries.tsx
@@ -198,7 +198,8 @@ export const useGetWorkspaceIntegrations = (workspaceId: string) =>
   useQuery({
     queryKey: workspaceKeys.getWorkspaceIntegrations(workspaceId),
     queryFn: () => fetchWorkspaceIntegrations(workspaceId),
-    enabled: Boolean(workspaceId)
+    enabled: Boolean(workspaceId),
+    refetchInterval: 4000
   });
 
 export const createWorkspace = ({
diff --git a/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx b/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx
index fc231f0fa..a6e3a45e7 100644
--- a/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx
+++ b/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx
@@ -1,7 +1,6 @@
-import { useEffect, useRef } from "react";
 import Link from "next/link";
 import { faCalendarCheck } from "@fortawesome/free-regular-svg-icons";
-import { faArrowRight, faRefresh, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { faArrowRight, faRefresh, faWarning, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { format } from "date-fns";
 import { integrationSlugNameMapping } from "public/data/frequentConstants";
@@ -45,16 +44,7 @@ export const IntegrationsSection = ({
     "deleteConfirmation"
   ] as const);
 
-  const syncPollingRef = useRef<NodeJS.Timeout | null>(null);
-  const { mutate: syncIntegration } = useSyncIntegration(syncPollingRef);
-
-  useEffect(() => {
-    return () => {
-      if (syncPollingRef.current) {
-        clearInterval(syncPollingRef.current);
-      }
-    };
-  }, []);
+  const { mutate: syncIntegration } = useSyncIntegration();
 
   return (
     <div className="mb-8">
@@ -207,69 +197,62 @@ export const IntegrationsSection = ({
               </div>
               <div className="mt-[1.5rem] flex cursor-default">
                 {integration.isSynced != null && integration.lastUsed != null && (
-                  <>
-                    <Tag
-                      key={integration.id}
-                      className={integration.isSynced ? "bg-green/50" : "bg-red/80"}
-                    >
-                      <Tooltip
-                        center
-                        className="max-w-xs whitespace-normal break-words"
-                        content={
-                          <div className="flex max-h-[10rem] flex-col overflow-auto ">
-                            <div className="flex self-start">
-                              <FontAwesomeIcon
-                                icon={faCalendarCheck}
-                                className="pt-0.5 pr-2 text-sm"
-                              />
-                              <div className="text-sm">Last sync</div>
-                            </div>
-                            <div className="pl-5 text-left text-xs">
-                              {format(new Date(integration.lastUsed), "yyyy-MM-dd, hh:mm aaa")}
-                            </div>
-                            {!integration.isSynced && (
-                              <>
-                                <div className="mt-2 flex self-start">
-                                  <FontAwesomeIcon icon={faXmark} className="pt-1 pr-2 text-sm" />
-                                  <div className="text-sm">Fail reason</div>
-                                </div>
-                                <div className="pl-5 text-left text-xs">
-                                  {integration.syncMessage}
-                                </div>
-                              </>
-                            )}
+                  <Tag
+                    key={integration.id}
+                    className={integration.isSynced ? "bg-green-800" : "bg-red/80"}
+                  >
+                    <Tooltip
+                      center
+                      className="max-w-xs whitespace-normal break-words"
+                      content={
+                        <div className="flex max-h-[10rem] flex-col overflow-auto ">
+                          <div className="flex self-start">
+                            <FontAwesomeIcon
+                              icon={faCalendarCheck}
+                              className="pt-0.5 pr-2 text-sm"
+                            />
+                            <div className="text-sm">Last sync</div>
                           </div>
-                        }
-                      >
-                        <div className="px-2 text-white">Sync Status</div>
-                      </Tooltip>
-                    </Tag>
-                    {!integration.isSynced && integration.lastUsed != null && (
-                      <div className="mr-1 flex items-end opacity-80 duration-200 hover:opacity-100">
-                        <Tooltip
-                          className="text-center"
-                          content="Manually sync integration secrets"
-                        >
-                          <Button
-                            onClick={() =>
-                              syncIntegration({
-                                workspaceId,
-                                id: integration.id,
-                                lastUsed: integration.lastUsed as string
-                              })
-                            }
-                            isLoading={!!syncPollingRef.current}
-                            className="max-w-[2.5rem] bg-mineshaft-500"
-                            colorSchema="primary"
-                            variant="outline"
-                          >
-                            <FontAwesomeIcon icon={faRefresh} className="px-1 text-bunker-200" />
-                          </Button>
-                        </Tooltip>
+                          <div className="pl-5 text-left text-xs">
+                            {format(new Date(integration.lastUsed), "yyyy-MM-dd, hh:mm aaa")}
+                          </div>
+                          {!integration.isSynced && (
+                            <>
+                              <div className="mt-2 flex self-start">
+                                <FontAwesomeIcon icon={faXmark} className="pt-1 pr-2 text-sm" />
+                                <div className="text-sm">Fail reason</div>
+                              </div>
+                              <div className="pl-5 text-left text-xs">
+                                {integration.syncMessage}
+                              </div>
+                            </>
+                          )}
+                        </div>
+                      }
+                    >
+                      <div className="flex items-center space-x-2 text-white">
+                        <div>Sync Status</div>
+                        {!integration.isSynced && <FontAwesomeIcon icon={faWarning} />}
                       </div>
-                    )}
-                  </>
+                    </Tooltip>
+                  </Tag>
                 )}
+                <div className="mr-1 flex items-end opacity-80 duration-200 hover:opacity-100">
+                  <Tooltip className="text-center" content="Manually sync integration secrets">
+                    <Button
+                      onClick={() =>
+                        syncIntegration({
+                          workspaceId,
+                          id: integration.id,
+                          lastUsed: integration.lastUsed as string
+                        })
+                      }
+                      className="max-w-[2.5rem] border-none bg-mineshaft-500"
+                    >
+                      <FontAwesomeIcon icon={faRefresh} className="px-1 text-bunker-200" />
+                    </Button>
+                  </Tooltip>
+                </div>
                 <ProjectPermissionCan
                   I={ProjectPermissionActions.Delete}
                   a={ProjectPermissionSub.Integrations}