Allow users to cancel a currently running sync on a disabled connecti…

…on (#22241) * 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 · e8386a2 · e8386a2
1 parent dfdec66
commit e8386a2
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 34 deletions.
diff --git a/airbyte-webapp/src/pages/connections/ConnectionStatusPage/ConnectionStatusPage.module.scss b/airbyte-webapp/src/pages/connections/ConnectionStatusPage/ConnectionStatusPage.module.scss
@@ -1,26 +1,16 @@
-@use "scss/colors";
 @use "scss/variables";
 
 .title {
   display: flex;
   justify-content: space-between;
   flex-direction: row;
   align-items: center;
+  min-height: 32px;
 }
 
 .actions {
   display: flex;
-
-  .resetButton,
-  .syncButton {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .resetButton {
-    margin-right: variables.$spacing-md;
-  }
+  gap: variables.$spacing-md;
 }
 
 .footer {

diff --git a/airbyte-webapp/src/pages/connections/ConnectionStatusPage/ConnectionStatusPage.tsx b/airbyte-webapp/src/pages/connections/ConnectionStatusPage/ConnectionStatusPage.tsx
@@ -162,31 +162,26 @@ 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 variant="secondary" onClick={onResetDataButtonClick}>
+                  <FormattedMessage id="connection.resetData" />
+                </Button>
+                <Button
+                  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>
         }
       >