improvements: address feedback

frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncActionTriggers.tsx

@@ -1,5 +1,6 @@
 import { useCallback } from "react";
 import {
+  faBan,
   faCheck,
   faCopy,
   faDownload,
@@ -24,6 +25,7 @@ import {
   SecretSyncRemoveStatusBadge
 } from "@app/components/secret-syncs";
 import {
+  Badge,
   Button,
   DropdownMenu,
   DropdownMenuContent,
@@ -84,22 +86,22 @@ export const SecretSyncActionTriggers = ({ secretSync }: Props) => {
   }, [isIdCopied]);
 
   const handleToggleEnableSync = async () => {
-    const isEnabled = !secretSync.isEnabled;
+    const isAutoSyncEnabled = !secretSync.isAutoSyncEnabled;
 
     try {
       await updateSync.mutateAsync({
         syncId: secretSync.id,
         destination: secretSync.destination,
-        isEnabled
+        isAutoSyncEnabled
       });
 
       createNotification({
-        text: `Successfully ${isEnabled ? "enabled" : "disabled"} ${destinationName} Sync`,
+        text: `Successfully ${isAutoSyncEnabled ? "enabled" : "disabled"} auto-sync for ${destinationName} Sync`,
         type: "success"
       });
     } catch {
       createNotification({
-        text: `Failed to ${isEnabled ? "enable" : "disable"} ${destinationName} Sync`,
+        text: `Failed to ${isAutoSyncEnabled ? "enable" : "disable"} auto-sync for ${destinationName} Sync`,
         type: "error"
       });
     }
@@ -129,6 +131,27 @@ export const SecretSyncActionTriggers = ({ secretSync }: Props) => {
       <div className="ml-auto mt-4 flex flex-wrap items-center justify-end gap-2">
         <SecretSyncImportStatusBadge secretSync={secretSync} />
         <SecretSyncRemoveStatusBadge secretSync={secretSync} />
+        {secretSync.isAutoSyncEnabled ? (
+          <Badge
+            variant="success"
+            className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap"
+          >
+            <FontAwesomeIcon icon={faRotate} />
+            <span>Auto-Sync Enabled</span>
+          </Badge>
+        ) : (
+          <Tooltip
+            className="text-xs"
+            content="Auto-Sync is disabled. Changes to the source location will not be automatically synced to the destination."
+          >
+            <div>
+              <Badge className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap bg-mineshaft-400/50 text-bunker-300">
+                <FontAwesomeIcon icon={faBan} />
+                <span>Auto-Sync Disabled</span>
+              </Badge>
+            </div>
+          </Tooltip>
+        )}
         <div>
           <ProjectPermissionCan
             I={ProjectPermissionSecretSyncActions.SyncSecrets}
@@ -230,11 +253,13 @@ export const SecretSyncActionTriggers = ({ secretSync }: Props) => {
                   <DropdownMenuItem
                     isDisabled={!isAllowed}
                     icon={
-                      <FontAwesomeIcon icon={secretSync.isEnabled ? faToggleOff : faToggleOn} />
+                      <FontAwesomeIcon
+                        icon={secretSync.isAutoSyncEnabled ? faToggleOff : faToggleOn}
+                      />
                     }
                     onClick={handleToggleEnableSync}
                   >
-                    {secretSync.isEnabled ? "Disable" : "Enable"} Sync
+                    {secretSync.isAutoSyncEnabled ? "Disable" : "Enable"} Auto-Sync
                   </DropdownMenuItem>
                 )}
               </ProjectPermissionCan>

frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDetailsSection.tsx

@@ -1,11 +1,11 @@
 import { useMemo } from "react";
-import { faBan, faEdit } from "@fortawesome/free-solid-svg-icons";
+import { faEdit } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { format } from "date-fns";
 
 import { ProjectPermissionCan } from "@app/components/permissions";
-import { SecretSyncLabel, SecretSyncStatusBadge } from "@app/components/secret-syncs";
-import { Badge, IconButton } from "@app/components/v2";
+import { SecretSyncLabel } from "@app/components/secret-syncs";
+import { IconButton } from "@app/components/v2";
 import { ProjectPermissionSub } from "@app/context";
 import { ProjectPermissionSecretSyncActions } from "@app/context/ProjectPermissionContext/types";
 import { SecretSyncStatus, TSecretSync } from "@app/hooks/api/secretSyncs";
@@ -16,7 +16,7 @@ type Props = {
 };
 
 export const SecretSyncDetailsSection = ({ secretSync, onEditDetails }: Props) => {
-  const { syncStatus, lastSyncMessage, lastSyncedAt, name, description, isEnabled } = secretSync;
+  const { syncStatus, lastSyncMessage, lastSyncedAt, name, description } = secretSync;
 
   const failureMessage = useMemo(() => {
     if (syncStatus === SecretSyncStatus.Failed) {
@@ -57,16 +57,6 @@ export const SecretSyncDetailsSection = ({ secretSync, onEditDetails }: Props) =
         <div className="space-y-3">
           <SecretSyncLabel label="Name">{name}</SecretSyncLabel>
           <SecretSyncLabel label="Description">{description}</SecretSyncLabel>
-          <SecretSyncLabel label="Status">
-            {isEnabled ? (
-              syncStatus && <SecretSyncStatusBadge status={syncStatus} />
-            ) : (
-              <Badge className="flex w-min items-center gap-1.5 bg-mineshaft-400/50 text-bunker-300">
-                <FontAwesomeIcon icon={faBan} />
-                <span>Disabled</span>
-              </Badge>
-            )}
-          </SecretSyncLabel>
           {lastSyncedAt && (
             <SecretSyncLabel label="Last Synced">
               {format(new Date(lastSyncedAt), "yyyy-MM-dd, hh:mm aaa")}