From 1e1f3ce3a12ea6167dc5e0e903eff40a876e752e Mon Sep 17 00:00:00 2001
From: Khaliq <khaliq@nango.dev>
Date: Thu, 15 Feb 2024 08:56:17 +0200
Subject: [PATCH] [nan-377] restore connection details (#1677)

---
 .../webapp/src/pages/ConnectionDetails.tsx    | 135 ++++++++----------
 1 file changed, 57 insertions(+), 78 deletions(-)

diff --git a/packages/webapp/src/pages/ConnectionDetails.tsx b/packages/webapp/src/pages/ConnectionDetails.tsx
index e1f5155246..7dbf15f739 100644
--- a/packages/webapp/src/pages/ConnectionDetails.tsx
+++ b/packages/webapp/src/pages/ConnectionDetails.tsx
@@ -38,7 +38,6 @@ interface Connection {
 export default function ConnectionDetails() {
     const [loaded, setLoaded] = useState(false);
     const [syncLoaded, setSyncLoaded] = useState(false);
-    const [lastCommand, setLastCommand] = useState<RunSyncCommand | null>();
     const [fetchingRefreshToken, setFetchingRefreshToken] = useState(false);
     const [syncs, setSyncs] = useState([]);
     const [serverErrorMessage, setServerErrorMessage] = useState('');
@@ -127,7 +126,6 @@ We could not retrieve and/or refresh your access token due to the following erro
                 try {
                     const data = await res.json();
                     setSyncs(data);
-                    setLastCommand(null);
                 } catch (e) {
                     console.log(e);
                 }
@@ -145,12 +143,10 @@ We could not retrieve and/or refresh your access token due to the following erro
         const res = await runCommandSyncAPI(command, scheduleId, nango_connection_id, syncId, syncName, connection?.provider);
 
         if (res?.status === 200) {
-            if (command === 'RUN' || command === 'UNPAUSE') {
-                setLastCommand('RUN');
-            } else if (command === 'CANCEL') {
-                setLastCommand('CANCEL');
-            } else {
+            try {
                 setSyncLoaded(false);
+            } catch (e) {
+                console.log(e);
             }
         }
     };
@@ -484,71 +480,62 @@ We could not retrieve and/or refresh your access token due to the following erro
                                                     </li>
                                                 </Tooltip>
                                                 <li className="w-28">
-                                                    {lastCommand !== 'RUN' && (
-                                                        <>
-                                                            {sync.schedule_status === 'PAUSED' && sync.latest_sync?.status !== 'RUNNING' && (
-                                                                <div className="inline-flex justify-center items-center rounded-full py-1 px-4 bg-red-500 bg-opacity-20">
-                                                                    <X className="stroke-red-500 mr-2" size="12" />
-                                                                    <p className="inline-block text-red-500 text-sm">stopped</p>
-                                                                </div>
-                                                            )}
-
-                                                            {sync?.schedule_status === 'RUNNING' && sync?.latest_sync === null && (
-                                                                <div className={errorBubbleStyles}>
-                                                                    <ErrorBubble />
-                                                                </div>
-                                                            )}
-                                                            {sync?.latest_sync?.status === 'STOPPED' &&
-                                                                sync.schedule_status !== 'PAUSED' &&
-                                                                (sync.latest_sync.activity_log_id && sync.latest_sync.activity_log_id !== null ? (
-                                                                    <Link
-                                                                        to={`/activity?activity_log_id=${sync.latest_sync?.activity_log_id}`}
-                                                                        className={errorBubbleStyles}
-                                                                    >
-                                                                        <ErrorBubble />
-                                                                    </Link>
-                                                            ) : (
-                                                                <div className={errorBubbleStyles}>
-                                                                    <ErrorBubble />
-                                                                </div>
-                                                            ))}
-                                                            {sync.latest_sync?.status === 'SUCCESS' &&
-                                                                sync.schedule_status !== 'PAUSED' &&
-                                                                (sync.latest_sync?.activity_log_id !== null ? (
-                                                                    <Tooltip text={`Last run time: ${getRunTime(sync.latest_sync?.created_at, sync.latest_sync?.updated_at)}`} type="dark">
-                                                                        <Link
-                                                                            to={`/activity?activity_log_id=${sync.latest_sync?.activity_log_id}`}
-                                                                            className={successBubbleStyles}
-                                                                        >
-                                                                            <SuccessBubble />
-                                                                        </Link>
-                                                                    </Tooltip>
-                                                            ) : (
-                                                                <Tooltip text={`Last run time: ${getRunTime(sync.latest_sync?.created_at, sync.latest_sync?.updated_at)}`} type="dark">
-                                                                    <div className={successBubbleStyles}>
-                                                                        <SuccessBubble />
-                                                                    </div>
-                                                                </Tooltip>
-                                                            ))}
-                                                        </>
+                                                    {sync.schedule_status === 'PAUSED' && sync.latest_sync?.status !== 'RUNNING' && (
+                                                        <div className="inline-flex justify-center items-center rounded-full py-1 px-4 bg-red-500 bg-opacity-20">
+                                                            <X className="stroke-red-500 mr-2" size="12" />
+                                                            <p className="inline-block text-red-500 text-sm">stopped</p>
+                                                        </div>
                                                     )}
-                                                    {lastCommand !== 'CANCEL' && (
-                                                        <>
-                                                            {(sync.latest_sync?.status === 'RUNNING' || lastCommand === 'RUN') &&
-                                                                (sync.latest_sync.activity_log_id && sync.latest_sync?.activity_log_id !== null ? (
-                                                                    <Link
-                                                                        to={`/activity?activity_log_id=${sync.latest_sync?.activity_log_id}`}
-                                                                        className={runningBubbleStyles}
-                                                                    >
-                                                                        <RunningBubble />
-                                                                    </Link>
-                                                            ) : (
-                                                                <div className={runningBubbleStyles}>
-                                                                    <RunningBubble />
-                                                                </div>
-                                                            ))}
-                                                        </>
+                                                    {sync?.schedule_status === 'RUNNING' && sync?.latest_sync === null && (
+                                                        <div className={errorBubbleStyles}>
+                                                            <ErrorBubble />
+                                                        </div>
                                                     )}
+                                                    {sync?.latest_sync?.status === 'STOPPED' &&
+                                                        sync.schedule_status !== 'PAUSED' &&
+                                                        (sync.latest_sync.activity_log_id && sync.latest_sync.activity_log_id !== null ? (
+                                                            <Link
+                                                                to={`/activity?activity_log_id=${sync.latest_sync?.activity_log_id}`}
+                                                                className={errorBubbleStyles}
+                                                            >
+                                                                <ErrorBubble />
+                                                            </Link>
+                                                    ) : (
+                                                        <div className={errorBubbleStyles}>
+                                                            <ErrorBubble />
+                                                        </div>
+                                                    ))}
+                                                    {sync.latest_sync?.status === 'RUNNING' &&
+                                                        (sync.latest_sync.activity_log_id && sync.latest_sync?.activity_log_id !== null ? (
+                                                            <Link
+                                                                to={`/activity?activity_log_id=${sync.latest_sync?.activity_log_id}`}
+                                                                className={runningBubbleStyles}
+                                                            >
+                                                                <RunningBubble />
+                                                            </Link>
+                                                    ) : (
+                                                        <div className={runningBubbleStyles}>
+                                                            <RunningBubble />
+                                                        </div>
+                                                    ))}
+                                                    {sync.latest_sync?.status === 'SUCCESS' &&
+                                                        sync.schedule_status !== 'PAUSED' &&
+                                                        (sync.latest_sync?.activity_log_id !== null ? (
+                                                            <Tooltip text={`Last run time: ${getRunTime(sync.latest_sync?.created_at, sync.latest_sync?.updated_at)}`} type="dark">
+                                                                <Link
+                                                                    to={`/activity?activity_log_id=${sync.latest_sync?.activity_log_id}`}
+                                                                    className={successBubbleStyles}
+                                                                >
+                                                                    <SuccessBubble />
+                                                                </Link>
+                                                            </Tooltip>
+                                                    ) : (
+                                                        <Tooltip text={`Last run time: ${getRunTime(sync.latest_sync?.created_at, sync.latest_sync?.updated_at)}`} type="dark">
+                                                            <div className={successBubbleStyles}>
+                                                                <SuccessBubble />
+                                                            </div>
+                                                        </Tooltip>
+                                                    ))}
                                                 </li>
                                                 {sync.latest_sync?.result && Object.keys(sync.latest_sync?.result).length > 0 ? (
                                                     <Tooltip text={<pre>{parseLatestSyncResult(sync.latest_sync.result, sync.latest_sync.models)}</pre>} type="dark">
@@ -626,14 +613,6 @@ We could not retrieve and/or refresh your access token due to the following erro
                                                     >
                                                         <p>Trigger</p>
                                                     </button>
-                                                    {(sync.latest_sync?.status === 'RUNNING' || lastCommand === 'RUN') && (
-                                                        <button
-                                                            className="flex h-8 mr-2 rounded-md pl-2 pr-3 pt-1.5 text-sm text-white bg-red-500 hover:bg-red-700"
-                                                            onClick={() => syncCommand('CANCEL', sync.nango_connection_id, sync.schedule_id, sync.id, sync.name)}
-                                                        >
-                                                            <p>Cancel</p>
-                                                        </button>
-                                                    )}
                                                     {/*
                                                     <button
                                                         className="inline-flex items-center justify-center h-8 mr-2 rounded-md pl-2 pr-3 text-sm text-white bg-gray-800 hover:bg-gray-700 leading-none"