fix: display aws connection credentials error and sync status on details page

backend/src/services/app-connection/aws/aws-connection-fns.ts

@@ -81,11 +81,14 @@ export const getAwsConnectionConfig = async (appConnection: TAwsConnectionConfig
 };
 
 export const validateAwsConnectionCredentials = async (appConnection: TAwsConnectionConfig) => {
-  const awsConfig = await getAwsConnectionConfig(appConnection);
-  const sts = new AWS.STS(awsConfig);
-  let resp: Awaited<ReturnType<ReturnType<typeof sts.getCallerIdentity>["promise"]>>;
+  let resp: AWS.STS.GetCallerIdentityResponse & {
+    $response: AWS.Response<AWS.STS.GetCallerIdentityResponse, AWS.AWSError>;
+  };
 
   try {
+    const awsConfig = await getAwsConnectionConfig(appConnection);
+    const sts = new AWS.STS(awsConfig);
+
     resp = await sts.getCallerIdentity().promise();
   } catch (e: unknown) {
     throw new BadRequestError({
@@ -93,7 +96,7 @@ export const validateAwsConnectionCredentials = async (appConnection: TAwsConnec
     });
   }
 
-  if (resp.$response.httpResponse.statusCode !== 200)
+  if (resp?.$response.httpResponse.statusCode !== 200)
     throw new InternalServerError({
       message: `Unable to validate credentials: ${
         resp.$response.error?.message ??

frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/SecretSyncsTable.tsx

@@ -289,7 +289,8 @@ export const SecretSyncsTable = ({ secretSyncs }: Props) => {
           </DropdownMenuTrigger>
           <DropdownMenuContent className="thin-scrollbar max-h-[70vh] overflow-y-auto" align="end">
             <DropdownMenuLabel>Status</DropdownMenuLabel>
-            {Object.values(SecretSyncStatus).map((status) => (
+            {[SecretSyncStatus.Running, SecretSyncStatus.Succeeded, SecretSyncStatus.Failed].map(
+              (status) => (
                 <DropdownMenuItem
                   onClick={(e) => {
                     e.preventDefault();
@@ -316,7 +317,8 @@ export const SecretSyncsTable = ({ secretSyncs }: Props) => {
                     <span className="capitalize">{STATUS_ICON_MAP[status].name}</span>
                   </div>
                 </DropdownMenuItem>
-            ))}
+              )
+            )}
             <DropdownMenuLabel>Service</DropdownMenuLabel>
             {secretSyncs.length ? (
               [...new Set(secretSyncs.map(({ destination }) => destination))].map((destination) => {

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

@@ -4,7 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { format } from "date-fns";
 
 import { ProjectPermissionCan } from "@app/components/permissions";
-import { SecretSyncLabel } from "@app/components/secret-syncs";
+import { SecretSyncLabel, SecretSyncStatusBadge } from "@app/components/secret-syncs";
 import { IconButton } from "@app/components/v2";
 import { ProjectPermissionSub } from "@app/context";
 import { ProjectPermissionSecretSyncActions } from "@app/context/ProjectPermissionContext/types";
@@ -57,6 +57,11 @@ export const SecretSyncDetailsSection = ({ secretSync, onEditDetails }: Props) =
         <div className="space-y-3">
           <SecretSyncLabel label="Name">{name}</SecretSyncLabel>
           <SecretSyncLabel label="Description">{description}</SecretSyncLabel>
+          {syncStatus && (
+            <SecretSyncLabel label="Status">
+              <SecretSyncStatusBadge status={syncStatus} />
+            </SecretSyncLabel>
+          )}
           {lastSyncedAt && (
             <SecretSyncLabel label="Last Synced">
               {format(new Date(lastSyncedAt), "yyyy-MM-dd, hh:mm aaa")}