improvements: address feedback

frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/SecretSyncDestinationCol/index.ts

@@ -0,0 +1 @@
+export * from "./SecretSyncDestinationCol";

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

@@ -12,6 +12,7 @@ import {
   faToggleOff,
   faToggleOn,
   faTrash,
+  faTriangleExclamation,
   faXmark
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -38,12 +39,13 @@ import {
   Tr
 } from "@app/components/v2";
 import { ROUTE_PATHS } from "@app/const/routes";
-import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+import { ProjectPermissionSub } from "@app/context";
+import { ProjectPermissionSecretSyncActions } from "@app/context/ProjectPermissionContext/types";
 import { SECRET_SYNC_MAP } from "@app/helpers/secretSyncs";
 import { useToggle } from "@app/hooks";
 import { SecretSyncStatus, TSecretSync, useSecretSyncOption } from "@app/hooks/api/secretSyncs";
-import { SecretSyncDestinationCol } from "@app/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/SecretSyncDestinationCol/SecretSyncDestinationCol";
 
+import { SecretSyncDestinationCol } from "./SecretSyncDestinationCol";
 import { SecretSyncTableCell } from "./SecretSyncTableCell";
 
 type Props = {
@@ -66,7 +68,7 @@ export const SecretSyncRow = ({
   const navigate = useNavigate();
   const {
     id,
-    folder: { path: secretPath },
+    folder,
     lastSyncMessage,
     destination,
     lastSyncedAt,
@@ -130,7 +132,7 @@ export const SecretSyncRow = ({
       className={twMerge(
         "group h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700",
         syncStatus === SecretSyncStatus.Failed && "bg-red/5 hover:bg-red/10",
-        !isEnabled && "bg-mineshaft-400/15 opacity-50"
+        !isEnabled && "bg-mineshaft-400/15 opacity-50 hover:opacity-100"
       )}
       key={`sync-${id}`}
     >
@@ -158,7 +160,23 @@ export const SecretSyncRow = ({
           <p className="truncate text-xs leading-4 text-bunker-300">{destinationDetails.name}</p>
         </div>
       </Td>
-      <SecretSyncTableCell primaryText={secretPath} secondaryText={environment.name} />
+      {folder && environment ? (
+        <SecretSyncTableCell primaryText={folder.path} secondaryText={environment.name} />
+      ) : (
+        <Td>
+          <Tooltip content="The source location for this sync has been deleted. Configure a new source or remove this sync.">
+            <div className="w-min">
+              <Badge
+                className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap"
+                variant="primary"
+              >
+                <FontAwesomeIcon icon={faTriangleExclamation} />
+                <span>Source Folder Deleted</span>
+              </Badge>
+            </div>
+          </Tooltip>
+        </Td>
+      )}
       <SecretSyncDestinationCol secretSync={secretSync} />
       <Td>
         <div className="flex items-center gap-1">
@@ -242,64 +260,100 @@ export const SecretSyncRow = ({
               >
                 Copy Sync ID
               </DropdownMenuItem>
-              <DropdownMenuItem
-                icon={<FontAwesomeIcon icon={faRotate} />}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onTriggerSyncSecrets(secretSync);
-                }}
-              >
-                <Tooltip
-                  position="left"
-                  sideOffset={42}
-                  content={`Manually trigger a sync for this ${destinationName} destination.`}
-                >
-                  <div className="flex h-full w-full items-center justify-between gap-1">
-                    <span> Trigger Sync</span>
-                    <FontAwesomeIcon className="text-bunker-300" size="sm" icon={faInfoCircle} />
-                  </div>
-                </Tooltip>
-              </DropdownMenuItem>
-              {syncOption?.canImportSecrets && (
-                <DropdownMenuItem
-                  icon={<FontAwesomeIcon icon={faDownload} />}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    onTriggerImportSecrets(secretSync);
-                  }}
-                >
-                  <Tooltip
-                    position="left"
-                    sideOffset={42}
-                    content={`Import secrets from this ${destinationName} destination into Infisical.`}
-                  >
-                    <div className="flex h-full w-full items-center justify-between gap-1">
-                      <span>Import Secrets</span>
-                      <FontAwesomeIcon className="text-bunker-300" size="sm" icon={faInfoCircle} />
-                    </div>
-                  </Tooltip>
-                </DropdownMenuItem>
-              )}
-              <DropdownMenuItem
-                icon={<FontAwesomeIcon icon={faEraser} />}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onTriggerRemoveSecrets(secretSync);
-                }}
-              >
-                <Tooltip
-                  position="left"
-                  sideOffset={42}
-                  content={`Remove secrets synced by Infisical from this ${destinationName} destination.`}
-                >
-                  <div className="flex h-full w-full items-center justify-between gap-1">
-                    <span>Remove Secrets</span>
-                    <FontAwesomeIcon className="text-bunker-300" size="sm" icon={faInfoCircle} />
-                  </div>
-                </Tooltip>
-              </DropdownMenuItem>
               <ProjectPermissionCan
-                I={ProjectPermissionActions.Edit}
+                I={ProjectPermissionSecretSyncActions.SyncSecrets}
+                a={ProjectPermissionSub.SecretSyncs}
+              >
+                {(isAllowed: boolean) => (
+                  <DropdownMenuItem
+                    icon={<FontAwesomeIcon icon={faRotate} />}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onTriggerSyncSecrets(secretSync);
+                    }}
+                    isDisabled={!isAllowed}
+                  >
+                    <Tooltip
+                      position="left"
+                      sideOffset={42}
+                      content={`Manually trigger a sync for this ${destinationName} destination.`}
+                    >
+                      <div className="flex h-full w-full items-center justify-between gap-1">
+                        <span> Trigger Sync</span>
+                        <FontAwesomeIcon
+                          className="text-bunker-300"
+                          size="sm"
+                          icon={faInfoCircle}
+                        />
+                      </div>
+                    </Tooltip>
+                  </DropdownMenuItem>
+                )}
+              </ProjectPermissionCan>
+              {syncOption?.canImportSecrets && (
+                <ProjectPermissionCan
+                  I={ProjectPermissionSecretSyncActions.ImportSecrets}
+                  a={ProjectPermissionSub.SecretSyncs}
+                >
+                  {(isAllowed: boolean) => (
+                    <DropdownMenuItem
+                      icon={<FontAwesomeIcon icon={faDownload} />}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onTriggerImportSecrets(secretSync);
+                      }}
+                      isDisabled={!isAllowed}
+                    >
+                      <Tooltip
+                        position="left"
+                        sideOffset={42}
+                        content={`Import secrets from this ${destinationName} destination into Infisical.`}
+                      >
+                        <div className="flex h-full w-full items-center justify-between gap-1">
+                          <span>Import Secrets</span>
+                          <FontAwesomeIcon
+                            className="text-bunker-300"
+                            size="sm"
+                            icon={faInfoCircle}
+                          />
+                        </div>
+                      </Tooltip>
+                    </DropdownMenuItem>
+                  )}
+                </ProjectPermissionCan>
+              )}
+              <ProjectPermissionCan
+                I={ProjectPermissionSecretSyncActions.RemoveSecrets}
+                a={ProjectPermissionSub.SecretSyncs}
+              >
+                {(isAllowed: boolean) => (
+                  <DropdownMenuItem
+                    icon={<FontAwesomeIcon icon={faEraser} />}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onTriggerRemoveSecrets(secretSync);
+                    }}
+                    isDisabled={!isAllowed}
+                  >
+                    <Tooltip
+                      position="left"
+                      sideOffset={42}
+                      content={`Remove secrets synced by Infisical from this ${destinationName} destination.`}
+                    >
+                      <div className="flex h-full w-full items-center justify-between gap-1">
+                        <span>Remove Secrets</span>
+                        <FontAwesomeIcon
+                          className="text-bunker-300"
+                          size="sm"
+                          icon={faInfoCircle}
+                        />
+                      </div>
+                    </Tooltip>
+                  </DropdownMenuItem>
+                )}
+              </ProjectPermissionCan>
+              <ProjectPermissionCan
+                I={ProjectPermissionSecretSyncActions.Edit}
                 a={ProjectPermissionSub.SecretSyncs}
               >
                 {(isAllowed: boolean) => (
@@ -316,7 +370,7 @@ export const SecretSyncRow = ({
                 )}
               </ProjectPermissionCan>
               <ProjectPermissionCan
-                I={ProjectPermissionActions.Delete}
+                I={ProjectPermissionSecretSyncActions.Delete}
                 a={ProjectPermissionSub.SecretSyncs}
               >
                 {(isAllowed: boolean) => (

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

@@ -43,6 +43,7 @@ import { usePagination, usePopUp, useResetPageHelper } from "@app/hooks";
 import { OrderByDirection } from "@app/hooks/api/generic/types";
 import {
   SecretSync,
+  SecretSyncStatus,
   TSecretSync,
   useTriggerSecretSyncSyncSecrets,
   useUpdateSecretSync
@@ -71,6 +72,20 @@ enum SecretSyncStatusCol {
   Disabled = "disabled"
 }
 
+const getSyncStatusOrderValue = (syncStatus: SecretSyncStatus | null) => {
+  switch (syncStatus) {
+    case SecretSyncStatus.Failed:
+      return 0;
+    case SecretSyncStatus.Pending:
+    case SecretSyncStatus.Running:
+      return 1;
+    case SecretSyncStatus.Succeeded:
+      return 2;
+    default:
+      return 3;
+  }
+};
+
 type Props = {
   secretSyncs: TSecretSync[];
 };
@@ -124,7 +139,11 @@ export const SecretSyncsTable = ({ secretSyncs }: Props) => {
           if (filters.destinations.length && !filters.destinations.includes(destination))
             return false;
 
-          if (filters.environmentIds.length && !filters.environmentIds.includes(environment.id))
+          if (
+            filters.environmentIds.length &&
+            environment?.id &&
+            !filters.environmentIds.includes(environment.id)
+          )
             return false;
 
           const status = isEnabled ? syncStatus : SecretSyncStatusCol.Disabled;
@@ -143,8 +162,8 @@ export const SecretSyncsTable = ({ secretSyncs }: Props) => {
           return (
             SECRET_SYNC_MAP[destination].name.toLowerCase().includes(searchValue) ||
             name.toLowerCase().includes(searchValue) ||
-            folder.path.toLowerCase().includes(searchValue) ||
-            environment.name.toLowerCase().includes(searchValue) ||
+            folder?.path.toLowerCase().includes(searchValue) ||
+            environment?.name.toLowerCase().includes(searchValue) ||
             connection.name.toLowerCase().includes(searchValue) ||
             destinationValues.primaryText.toLowerCase().includes(searchValue) ||
             destinationValues.secondaryText?.toLowerCase().includes(searchValue)
@@ -155,9 +174,9 @@ export const SecretSyncsTable = ({ secretSyncs }: Props) => {
 
           switch (orderBy) {
             case SecretSyncsOrderBy.Source:
-              return syncOne.folder.path
+              return (syncOne.folder?.path ?? "")
                 .toLowerCase()
-                .localeCompare(syncTwo.folder.path.toLowerCase());
+                .localeCompare(syncTwo.folder?.path.toLowerCase() ?? "");
             case SecretSyncsOrderBy.Destination:
               return getSecretSyncDestinationColValues(syncOne)
                 .primaryText.toLowerCase()
@@ -165,9 +184,17 @@ export const SecretSyncsTable = ({ secretSyncs }: Props) => {
                   getSecretSyncDestinationColValues(syncTwo).primaryText.toLowerCase()
                 );
             case SecretSyncsOrderBy.Status:
-              return syncOne.connection.name
-                .toLowerCase()
-                .localeCompare(syncTwo.connection.name.toLowerCase());
+              if (!syncOne.isEnabled && syncTwo.isEnabled) return 1;
+              if (syncOne.isEnabled && !syncTwo.isEnabled) return -1;
+
+              if (!syncOne.syncStatus && syncTwo.syncStatus) return 1;
+              if (syncOne.syncStatus && !syncTwo.syncStatus) return -1;
+              if (!syncOne.syncStatus && !syncTwo.syncStatus) return 0;
+
+              return (
+                getSyncStatusOrderValue(syncOne.syncStatus) -
+                getSyncStatusOrderValue(syncTwo.syncStatus)
+              );
             case SecretSyncsOrderBy.Name:
             default:
               return syncOne.name.toLowerCase().localeCompare(syncTwo.name.toLowerCase());

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

@@ -4,7 +4,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import { CreateSecretSyncModal } from "@app/components/secret-syncs";
 import { Button, Spinner } from "@app/components/v2";
-import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { ProjectPermissionSub, useWorkspace } from "@app/context";
+import { ProjectPermissionSecretSyncActions } from "@app/context/ProjectPermissionContext/types";
 import { usePopUp } from "@app/hooks";
 import { useListSecretSyncs } from "@app/hooks/api/secretSyncs";
 
@@ -56,7 +57,7 @@ export const SecretSyncsTab = () => {
             </p>
           </div>
           <ProjectPermissionCan
-            I={ProjectPermissionActions.Create}
+            I={ProjectPermissionSecretSyncActions.Create}
             a={ProjectPermissionSub.SecretSyncs}
           >
             {(isAllowed) => (

frontend/src/pages/secret-manager/IntegrationsListPage/route.tsx

@@ -7,7 +7,9 @@ import { IntegrationsListPageTabs } from "@app/types/integrations";
 import { IntegrationsListPage } from "./IntegrationsListPage";
 
 const IntegrationsListPageQuerySchema = z.object({
-  selectedTab: z.string().catch(IntegrationsListPageTabs.NativeIntegrations)
+  selectedTab: z
+    .nativeEnum(IntegrationsListPageTabs)
+    .catch(IntegrationsListPageTabs.NativeIntegrations)
 });
 
 export const Route = createFileRoute(

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

@@ -8,7 +8,8 @@ import { EditSecretSyncModal } from "@app/components/secret-syncs";
 import { SecretSyncEditFields } from "@app/components/secret-syncs/types";
 import { Button, ContentLoader, EmptyState } from "@app/components/v2";
 import { ROUTE_PATHS } from "@app/const/routes";
-import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+import { ProjectPermissionSub } from "@app/context";
+import { ProjectPermissionSecretSyncActions } from "@app/context/ProjectPermissionContext/types";
 import { SECRET_SYNC_MAP } from "@app/helpers/secretSyncs";
 import { usePopUp } from "@app/hooks";
 import { SecretSync, useGetSecretSync } from "@app/hooks/api/secretSyncs";
@@ -140,7 +141,7 @@ export const SecretSyncDetailsByIDPage = () => {
       <ProjectPermissionCan
         renderGuardBanner
         passThrough={false}
-        I={ProjectPermissionActions.Read}
+        I={ProjectPermissionSecretSyncActions.Read}
         a={ProjectPermissionSub.SecretSyncs}
       >
         <PageContent />

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

@@ -33,7 +33,8 @@ import {
   Tooltip
 } from "@app/components/v2";
 import { ROUTE_PATHS } from "@app/const/routes";
-import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+import { ProjectPermissionSub } from "@app/context";
+import { ProjectPermissionSecretSyncActions } from "@app/context/ProjectPermissionContext/types";
 import { SECRET_SYNC_MAP } from "@app/helpers/secretSyncs";
 import { usePopUp, useToggle } from "@app/hooks";
 import {
@@ -129,14 +130,22 @@ export const SecretSyncActionTriggers = ({ secretSync }: Props) => {
         <SecretSyncImportStatusBadge secretSync={secretSync} />
         <SecretSyncRemoveStatusBadge secretSync={secretSync} />
         <div>
-          <Button
-            variant="outline_bg"
-            leftIcon={<FontAwesomeIcon icon={faRotate} />}
-            onClick={handleTriggerSync}
-            className="h-9 rounded-r-none bg-mineshaft-500"
+          <ProjectPermissionCan
+            I={ProjectPermissionSecretSyncActions.SyncSecrets}
+            a={ProjectPermissionSub.SecretSyncs}
           >
-            Trigger Sync
-          </Button>
+            {(isAllowed: boolean) => (
+              <Button
+                variant="outline_bg"
+                leftIcon={<FontAwesomeIcon icon={faRotate} />}
+                onClick={handleTriggerSync}
+                className="h-9 rounded-r-none bg-mineshaft-500"
+                isDisabled={!isAllowed}
+              >
+                Trigger Sync
+              </Button>
+            )}
+          </ProjectPermissionCan>
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <IconButton
@@ -158,39 +167,63 @@ export const SecretSyncActionTriggers = ({ secretSync }: Props) => {
                 Copy Sync ID
               </DropdownMenuItem>
               {syncOption?.canImportSecrets && (
-                <DropdownMenuItem
-                  icon={<FontAwesomeIcon icon={faDownload} />}
-                  onClick={() => handlePopUpOpen("importSecrets")}
+                <ProjectPermissionCan
+                  I={ProjectPermissionSecretSyncActions.ImportSecrets}
+                  a={ProjectPermissionSub.SecretSyncs}
                 >
-                  <Tooltip
-                    position="left"
-                    sideOffset={42}
-                    content={`Import secrets from this ${destinationName} destination into Infisical.`}
-                  >
-                    <div className="flex h-full w-full items-center justify-between gap-1">
-                      <span>Import Secrets</span>
-                      <FontAwesomeIcon className="text-bunker-300" size="sm" icon={faInfoCircle} />
-                    </div>
-                  </Tooltip>
-                </DropdownMenuItem>
+                  {(isAllowed: boolean) => (
+                    <DropdownMenuItem
+                      icon={<FontAwesomeIcon icon={faDownload} />}
+                      onClick={() => handlePopUpOpen("importSecrets")}
+                      isDisabled={!isAllowed}
+                    >
+                      <Tooltip
+                        position="left"
+                        sideOffset={42}
+                        content={`Import secrets from this ${destinationName} destination into Infisical.`}
+                      >
+                        <div className="flex h-full w-full items-center justify-between gap-1">
+                          <span>Import Secrets</span>
+                          <FontAwesomeIcon
+                            className="text-bunker-300"
+                            size="sm"
+                            icon={faInfoCircle}
+                          />
+                        </div>
+                      </Tooltip>
+                    </DropdownMenuItem>
+                  )}
+                </ProjectPermissionCan>
               )}
-              <DropdownMenuItem
-                icon={<FontAwesomeIcon icon={faEraser} />}
-                onClick={() => handlePopUpOpen("removeSecrets")}
-              >
-                <Tooltip
-                  position="left"
-                  sideOffset={42}
-                  content={`Remove secrets synced by Infisical from this ${destinationName} destination.`}
-                >
-                  <div className="flex h-full w-full items-center justify-between gap-1">
-                    <span>Remove Secrets</span>
-                    <FontAwesomeIcon className="text-bunker-300" size="sm" icon={faInfoCircle} />
-                  </div>
-                </Tooltip>
-              </DropdownMenuItem>
               <ProjectPermissionCan
-                I={ProjectPermissionActions.Edit}
+                I={ProjectPermissionSecretSyncActions.RemoveSecrets}
+                a={ProjectPermissionSub.SecretSyncs}
+              >
+                {(isAllowed: boolean) => (
+                  <DropdownMenuItem
+                    icon={<FontAwesomeIcon icon={faEraser} />}
+                    onClick={() => handlePopUpOpen("removeSecrets")}
+                    isDisabled={!isAllowed}
+                  >
+                    <Tooltip
+                      position="left"
+                      sideOffset={42}
+                      content={`Remove secrets synced by Infisical from this ${destinationName} destination.`}
+                    >
+                      <div className="flex h-full w-full items-center justify-between gap-1">
+                        <span>Remove Secrets</span>
+                        <FontAwesomeIcon
+                          className="text-bunker-300"
+                          size="sm"
+                          icon={faInfoCircle}
+                        />
+                      </div>
+                    </Tooltip>
+                  </DropdownMenuItem>
+                )}
+              </ProjectPermissionCan>
+              <ProjectPermissionCan
+                I={ProjectPermissionSecretSyncActions.Edit}
                 a={ProjectPermissionSub.SecretSyncs}
               >
                 {(isAllowed: boolean) => (
@@ -206,7 +239,7 @@ export const SecretSyncActionTriggers = ({ secretSync }: Props) => {
                 )}
               </ProjectPermissionCan>
               <ProjectPermissionCan
-                I={ProjectPermissionActions.Delete}
+                I={ProjectPermissionSecretSyncActions.Delete}
                 a={ProjectPermissionSub.SecretSyncs}
               >
                 {(isAllowed: boolean) => (

frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/SecretSyncDestinatonSection.tsx

@@ -5,7 +5,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import { SecretSyncLabel } from "@app/components/secret-syncs";
 import { IconButton } from "@app/components/v2";
-import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+import { ProjectPermissionSub } from "@app/context";
+import { ProjectPermissionSecretSyncActions } from "@app/context/ProjectPermissionContext/types";
 import { APP_CONNECTION_MAP } from "@app/helpers/appConnections";
 import { SecretSync, TSecretSync } from "@app/hooks/api/secretSyncs";
 import { AwsParameterStoreSyncDestinationSection } from "@app/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/AwsParameterStoreSyncDestinationSection";
@@ -38,7 +39,7 @@ export const SecretSyncDestinationSection = ({ secretSync, onEditDestination }:
       <div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
         <h3 className="font-semibold text-mineshaft-100">Destination Configuration</h3>
         <ProjectPermissionCan
-          I={ProjectPermissionActions.Edit}
+          I={ProjectPermissionSecretSyncActions.Edit}
           a={ProjectPermissionSub.SecretSyncs}
         >
           {(isAllowed) => (

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

@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import { faBan, faEdit } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { format } from "date-fns";
@@ -5,7 +6,8 @@ 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 { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+import { ProjectPermissionSub } from "@app/context";
+import { ProjectPermissionSecretSyncActions } from "@app/context/ProjectPermissionContext/types";
 import { SecretSyncStatus, TSecretSync } from "@app/hooks/api/secretSyncs";
 
 type Props = {
@@ -16,12 +18,26 @@ type Props = {
 export const SecretSyncDetailsSection = ({ secretSync, onEditDetails }: Props) => {
   const { syncStatus, lastSyncMessage, lastSyncedAt, name, description, isEnabled } = secretSync;
 
+  const failureMessage = useMemo(() => {
+    if (syncStatus === SecretSyncStatus.Failed) {
+      if (lastSyncMessage)
+        try {
+          return JSON.stringify(JSON.parse(lastSyncMessage), null, 2);
+        } catch {
+          return lastSyncMessage;
+        }
+
+      return "An Unknown Error Occurred.";
+    }
+    return null;
+  }, [syncStatus, lastSyncMessage]);
+
   return (
     <div className="flex w-full flex-col gap-3 rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 py-3">
       <div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
         <h3 className="font-semibold text-mineshaft-100">Details</h3>
         <ProjectPermissionCan
-          I={ProjectPermissionActions.Edit}
+          I={ProjectPermissionSecretSyncActions.Edit}
           a={ProjectPermissionSub.SecretSyncs}
         >
           {(isAllowed) => (
@@ -56,9 +72,9 @@ export const SecretSyncDetailsSection = ({ secretSync, onEditDetails }: Props) =
               {format(new Date(lastSyncedAt), "yyyy-MM-dd, hh:mm aaa")}
             </SecretSyncLabel>
           )}
-          {syncStatus === SecretSyncStatus.Failed && lastSyncMessage && (
+          {syncStatus === SecretSyncStatus.Failed && failureMessage && (
             <SecretSyncLabel labelClassName="text-red" label="Last Sync Error">
-              <p className="break-words rounded bg-mineshaft-600 p-2 text-xs">{lastSyncMessage}</p>
+              <p className="break-words rounded bg-mineshaft-600 p-2 text-xs">{failureMessage}</p>
             </SecretSyncLabel>
           )}
         </div>

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

@@ -4,7 +4,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import { SecretSyncLabel } from "@app/components/secret-syncs";
 import { IconButton } from "@app/components/v2";
-import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+import { ProjectPermissionSub } from "@app/context";
+import { ProjectPermissionSecretSyncActions } from "@app/context/ProjectPermissionContext/types";
 import { SECRET_SYNC_INITIAL_SYNC_BEHAVIOR_MAP } from "@app/helpers/secretSyncs";
 import { TSecretSync } from "@app/hooks/api/secretSyncs";
 
@@ -26,7 +27,7 @@ export const SecretSyncOptionsSection = ({ secretSync, onEditOptions }: Props) =
         <div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
           <h3 className="font-semibold text-mineshaft-100">Sync Options</h3>
           <ProjectPermissionCan
-            I={ProjectPermissionActions.Edit}
+            I={ProjectPermissionSecretSyncActions.Edit}
             a={ProjectPermissionSub.SecretSyncs}
           >
             {(isAllowed) => (

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

@@ -1,10 +1,11 @@
-import { faEdit } from "@fortawesome/free-solid-svg-icons";
+import { faEdit, faTriangleExclamation } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { ProjectPermissionCan } from "@app/components/permissions";
 import { SecretSyncLabel } from "@app/components/secret-syncs";
-import { IconButton } from "@app/components/v2";
-import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+import { Badge, IconButton, Tooltip } from "@app/components/v2";
+import { ProjectPermissionSub } from "@app/context";
+import { ProjectPermissionSecretSyncActions } from "@app/context/ProjectPermissionContext/types";
 import { TSecretSync } from "@app/hooks/api/secretSyncs";
 
 type Props = {
@@ -20,27 +21,42 @@ export const SecretSyncSourceSection = ({ secretSync, onEditSource }: Props) =>
       <div className="flex w-full flex-col gap-3 rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 py-3">
         <div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
           <h3 className="font-semibold text-mineshaft-100">Source</h3>
-          <ProjectPermissionCan
-            I={ProjectPermissionActions.Edit}
-            a={ProjectPermissionSub.SecretSyncs}
-          >
-            {(isAllowed) => (
-              <IconButton
-                variant="plain"
-                colorSchema="secondary"
-                isDisabled={!isAllowed}
-                ariaLabel="Edit sync source"
-                onClick={onEditSource}
-              >
-                <FontAwesomeIcon icon={faEdit} />
-              </IconButton>
+          <div>
+            {(!folder || !environment) && (
+              <Tooltip content="The source location for this sync has been deleted. Configure a new source or remove this sync.">
+                <div className="mr-1 inline-block w-min">
+                  <Badge
+                    className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap"
+                    variant="primary"
+                  >
+                    <FontAwesomeIcon icon={faTriangleExclamation} />
+                    <span>Folder Deleted</span>
+                  </Badge>
+                </div>
+              </Tooltip>
             )}
-          </ProjectPermissionCan>
+            <ProjectPermissionCan
+              I={ProjectPermissionSecretSyncActions.Edit}
+              a={ProjectPermissionSub.SecretSyncs}
+            >
+              {(isAllowed) => (
+                <IconButton
+                  variant="plain"
+                  colorSchema="secondary"
+                  isDisabled={!isAllowed}
+                  ariaLabel="Edit sync source"
+                  onClick={onEditSource}
+                >
+                  <FontAwesomeIcon icon={faEdit} />
+                </IconButton>
+              )}
+            </ProjectPermissionCan>
+          </div>
         </div>
         <div>
           <div className="space-y-3">
-            <SecretSyncLabel label="Environment">{environment.name}</SecretSyncLabel>
-            <SecretSyncLabel label="Path">{folder.path}</SecretSyncLabel>
+            <SecretSyncLabel label="Environment">{environment?.name}</SecretSyncLabel>
+            <SecretSyncLabel label="Path">{folder?.path}</SecretSyncLabel>
           </div>
         </div>
       </div>