improvements: address feedback

frontend/src/components/secret-syncs/CreateSecretSyncModal.tsx

@@ -51,6 +51,7 @@ export const CreateSecretSyncModal = ({ onOpenChange, ...props }: Props) => {
             "Add Sync"
           )
         }
+        onPointerDownOutside={(e) => e.preventDefault()}
         className="max-w-2xl"
         subTitle={selectedSync ? undefined : "Select a third-party service to sync secrets to."}
         bodyClassName="overflow-visible"

frontend/src/components/secret-syncs/DeleteSecretSyncModal.tsx

@@ -1,5 +1,7 @@
+import { useState } from "react";
+
 import { createNotification } from "@app/components/notifications";
-import { DeleteActionModal } from "@app/components/v2";
+import { DeleteActionModal, Switch } from "@app/components/v2";
 import { SECRET_SYNC_MAP } from "@app/helpers/secretSyncs";
 import { TSecretSync, useDeleteSecretSync } from "@app/hooks/api/secretSyncs";
 
@@ -12,6 +14,7 @@ type Props = {
 
 export const DeleteSecretSyncModal = ({ isOpen, onOpenChange, secretSync, onComplete }: Props) => {
   const deleteSync = useDeleteSecretSync();
+  const [removeSecrets, setRemoveSecrets] = useState(false);
 
   if (!secretSync) return null;
 
@@ -23,7 +26,8 @@ export const DeleteSecretSyncModal = ({ isOpen, onOpenChange, secretSync, onComp
     try {
       await deleteSync.mutateAsync({
         syncId,
-        destination
+        destination,
+        removeSecrets
       });
 
       createNotification({
@@ -37,7 +41,7 @@ export const DeleteSecretSyncModal = ({ isOpen, onOpenChange, secretSync, onComp
       console.error(err);
 
       createNotification({
-        text: `Failed remove ${destinationName} Sync`,
+        text: `Failed to remove ${destinationName} Sync`,
         type: "error"
       });
     }
@@ -50,6 +54,17 @@ export const DeleteSecretSyncModal = ({ isOpen, onOpenChange, secretSync, onComp
       title={`Are you sure want to delete ${name}?`}
       deleteKey={name}
       onDeleteApproved={handleDeleteSecretSync}
-    />
+    >
+      <Switch
+        containerClassName="mt-4"
+        className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-red/50"
+        thumbClassName="bg-mineshaft-800"
+        isChecked={removeSecrets}
+        onCheckedChange={setRemoveSecrets}
+        id="remove-secrets"
+      >
+        Remove Synced Secrets
+      </Switch>
+    </DeleteActionModal>
   );
 };

frontend/src/components/secret-syncs/SecretSyncStatusBadge.tsx

@@ -21,7 +21,7 @@ export const SecretSyncStatusBadge = ({ status }: Props) => {
   switch (status) {
     case SecretSyncStatus.Failed:
       variant = "danger";
-      text = "Failed";
+      text = "Failed to Sync";
       icon = faExclamationTriangle;
       break;
     case SecretSyncStatus.Succeeded:
@@ -39,7 +39,7 @@ export const SecretSyncStatusBadge = ({ status }: Props) => {
   }
 
   return (
-    <Badge className="flex h-5 w-min items-center gap-1.5" variant={variant}>
+    <Badge className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap" variant={variant}>
       <FontAwesomeIcon icon={icon} />
       <span>{text}</span>
     </Badge>

frontend/src/components/secret-syncs/forms/EditSecretSyncForm.tsx

@@ -8,7 +8,7 @@ import { Button, ModalClose } from "@app/components/v2";
 import { SECRET_SYNC_MAP } from "@app/helpers/secretSyncs";
 import { TSecretSync, useUpdateSecretSync } from "@app/hooks/api/secretSyncs";
 
-import { SecretSyncFormSchema, TSecretSyncForm } from "./schemas";
+import { TSecretSyncForm, UpdateSecretSyncFormSchema } from "./schemas";
 import { SecretSyncDestinationFields } from "./SecretSyncDestinationFields";
 import { SecretSyncDetailsFields } from "./SecretSyncDetailsFields";
 import { SecretSyncOptionsFields } from "./SecretSyncOptionsFields";
@@ -25,10 +25,11 @@ export const EditSecretSyncForm = ({ secretSync, fields, onComplete }: Props) =>
   const { name: destinationName } = SECRET_SYNC_MAP[secretSync.destination];
 
   const formMethods = useForm<TSecretSyncForm>({
-    resolver: zodResolver(SecretSyncFormSchema),
+    resolver: zodResolver(UpdateSecretSyncFormSchema),
     defaultValues: {
       ...secretSync,
-      secretPath: secretSync.folder.path,
+      environment: secretSync.environment ?? undefined,
+      secretPath: secretSync.folder?.path,
       description: secretSync.description ?? ""
     },
     reValidateMode: "onChange"
@@ -39,7 +40,7 @@ export const EditSecretSyncForm = ({ secretSync, fields, onComplete }: Props) =>
       const updatedSecretSync = await updateSecretSync.mutateAsync({
         syncId: secretSync.id,
         ...formData,
-        environment: environment.slug
+        environment: environment?.slug
       });
 
       createNotification({

frontend/src/components/secret-syncs/forms/SecretSyncConnectionField.tsx

@@ -4,7 +4,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Link } from "@tanstack/react-router";
 
 import { FilterableSelect, FormControl } from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects, useOrgPermission } from "@app/context";
+import { OrgPermissionSubjects, useOrgPermission } from "@app/context";
+import { OrgPermissionAppConnectionActions } from "@app/context/OrgPermissionContext/types";
 import { APP_CONNECTION_MAP } from "@app/helpers/appConnections";
 import { SECRET_SYNC_CONNECTION_MAP } from "@app/helpers/secretSyncs";
 import { useListAvailableAppConnections } from "@app/hooks/api/appConnections";
@@ -27,7 +28,7 @@ export const SecretSyncConnectionField = ({ onChange: callback }: Props) => {
   const connectionName = APP_CONNECTION_MAP[app].name;
 
   const canCreateConnection = permission.can(
-    OrgPermissionActions.Create,
+    OrgPermissionAppConnectionActions.Create,
     OrgPermissionSubjects.AppConnections
   );
 

frontend/src/components/secret-syncs/forms/schemas/aws-parameter-store-sync-destination-schema.ts

@@ -7,22 +7,10 @@ export const AwsParameterStoreSyncDestinationSchema = z.object({
   destinationConfig: z.object({
     path: z
       .string()
+      .trim()
       .min(1, "Parameter Store Path required")
-      .superRefine((val, ctx) => {
-        if (!/^\/([/]|(([\w-]+\/)+))?$/.test(val)) {
-          ctx.addIssue({
-            code: z.ZodIssueCode.custom,
-            message: 'Invalid path - must follow "/example/path/" format'
-          });
-        }
-
-        if (val.length > 2048) {
-          ctx.addIssue({
-            code: z.ZodIssueCode.custom,
-            message: "Cannot exceed 2048 characters"
-          });
-        }
-      }),
+      .max(2048, "Cannot exceed 2048 characters")
+      .regex(/^\/([/]|(([\w-]+\/)+))?$/),
     region: z.string().min(1, "Region required")
   })
 });

frontend/src/components/secret-syncs/forms/schemas/github-sync-destination-schema.ts

@@ -29,17 +29,17 @@ export const GitHubSyncDestinationSchema = z.object({
       })
     ])
     .superRefine((options, ctx) => {
-      if (options.scope !== GitHubSyncScope.Organization) return;
-
-      if (
-        options.visibility === GitHubSyncVisibility.Selected &&
-        !options.selectedRepositoryIds?.length
-      ) {
-        ctx.addIssue({
-          code: z.ZodIssueCode.custom,
-          message: "Select at least 1 repository",
-          path: ["selectedRepositoryIds"]
-        });
+      if (options.scope === GitHubSyncScope.Organization) {
+        if (
+          options.visibility === GitHubSyncVisibility.Selected &&
+          !options.selectedRepositoryIds?.length
+        ) {
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: "Select at least 1 repository",
+            path: ["selectedRepositoryIds"]
+          });
+        }
       }
     })
 });

frontend/src/components/secret-syncs/forms/schemas/secret-sync-schema.ts

@@ -28,11 +28,13 @@ const BaseSecretSyncSchema = z.object({
   isEnabled: z.boolean()
 });
 
-export const SecretSyncFormSchema = z
-  .discriminatedUnion("destination", [
-    AwsParameterStoreSyncDestinationSchema,
-    GitHubSyncDestinationSchema
-  ])
-  .and(BaseSecretSyncSchema);
+const SecretSyncUnionSchema = z.discriminatedUnion("destination", [
+  AwsParameterStoreSyncDestinationSchema,
+  GitHubSyncDestinationSchema
+]);
+
+export const SecretSyncFormSchema = SecretSyncUnionSchema.and(BaseSecretSyncSchema);
+
+export const UpdateSecretSyncFormSchema = SecretSyncUnionSchema.and(BaseSecretSyncSchema.partial());
 
 export type TSecretSyncForm = z.infer<typeof SecretSyncFormSchema>;