improvements: address feedback

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>