Allow users to cancel a currently running sync on a disabled connection

- Changed logic to show/hide action buttons for Connections Status Page
airbytehq · Feb 6, 2023 · 3812186 · 3812186
1 parent 015174a
commit 3812186
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 29 deletions.
diff --git a/airbyte-webapp/src/pages/connections/ConnectionStatusPage/ConnectionStatusPage.module.scss b/airbyte-webapp/src/pages/connections/ConnectionStatusPage/ConnectionStatusPage.module.scss
@@ -11,13 +11,6 @@
 .actions {
   display: flex;
 
-  .resetButton,
-  .syncButton {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
   .resetButton {
     margin-right: variables.$spacing-md;
   }

diff --git a/airbyte-webapp/src/pages/connections/ConnectionStatusPage/ConnectionStatusPage.tsx b/airbyte-webapp/src/pages/connections/ConnectionStatusPage/ConnectionStatusPage.tsx
@@ -162,31 +162,27 @@ export const ConnectionStatusPage: React.FC = () => {
         title={
           <div className={styles.title}>
             <FormattedMessage id="sources.syncHistory" />
-            {connection.status === ConnectionStatus.active && (
+            {connection.status === ConnectionStatus.active && !activeJob?.action && (
               <div className={styles.actions}>
-                {!activeJob?.action && (
-                  <>
-                    <Button className={styles.resetButton} variant="secondary" onClick={onResetDataButtonClick}>
-                      <FormattedMessage id="connection.resetData" />
-                    </Button>
-                    <Button
-                      className={styles.syncButton}
-                      disabled={!allowSync}
-                      onClick={onSyncNowButtonClick}
-                      icon={<RotateIcon height={styles.syncIconHeight} width={styles.syncIconHeight} />}
-                    >
-                      <FormattedMessage id="connection.startSync" />
-                    </Button>
-                  </>
-                )}
-                {activeJob?.action && !activeJob.isCanceling && cancelJobBtn}
-                {activeJob?.action && activeJob.isCanceling && (
-                  <Tooltip control={cancelJobBtn} cursor="not-allowed">
-                    <FormattedMessage id="connection.canceling" />
-                  </Tooltip>
-                )}
+                <Button className={styles.resetButton} variant="secondary" onClick={onResetDataButtonClick}>
+                  <FormattedMessage id="connection.resetData" />
+                </Button>
+                <Button
+                  className={styles.syncButton}
+                  disabled={!allowSync}
+                  onClick={onSyncNowButtonClick}
+                  icon={<RotateIcon height={styles.syncIconHeight} width={styles.syncIconHeight} />}
+                >
+                  <FormattedMessage id="connection.startSync" />
+                </Button>
               </div>
             )}
+            {activeJob?.action && !activeJob.isCanceling && cancelJobBtn}
+            {activeJob?.action && activeJob.isCanceling && (
+              <Tooltip control={cancelJobBtn} cursor="not-allowed">
+                <FormattedMessage id="connection.canceling" />
+              </Tooltip>
+            )}
           </div>
         }
       >