improvements: ui improvements & add users to org from project member invite modal

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

@@ -18,7 +18,7 @@ export const DeleteSecretSyncModal = ({ isOpen, onOpenChange, secretSync, onComp
 
   if (!secretSync) return null;
 
-  const { id: syncId, name, destination } = secretSync;
+  const { id: syncId, name, destination, projectId } = secretSync;
 
   const handleDeleteSecretSync = async () => {
     const destinationName = SECRET_SYNC_MAP[destination].name;
@@ -27,7 +27,8 @@ export const DeleteSecretSyncModal = ({ isOpen, onOpenChange, secretSync, onComp
       await deleteSync.mutateAsync({
         syncId,
         destination,
-        removeSecrets
+        removeSecrets,
+        projectId
       });
 
       createNotification({

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

@@ -37,7 +37,7 @@ const FormSchema = z.object({
 type TFormData = z.infer<typeof FormSchema>;
 
 const Content = ({ secretSync, onComplete }: ContentProps) => {
-  const { id: syncId, destination } = secretSync;
+  const { id: syncId, destination, projectId } = secretSync;
   const destinationName = SECRET_SYNC_MAP[destination].name;
 
   const {
@@ -53,7 +53,8 @@ const Content = ({ secretSync, onComplete }: ContentProps) => {
       await triggerImportSecrets.mutateAsync({
         syncId,
         destination,
-        importBehavior
+        importBehavior,
+        projectId
       });
 
       createNotification({

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

@@ -15,7 +15,7 @@ type ContentProps = {
 };
 
 const Content = ({ secretSync, onComplete }: ContentProps) => {
-  const { id: syncId, destination } = secretSync;
+  const { id: syncId, destination, projectId } = secretSync;
   const destinationName = SECRET_SYNC_MAP[destination].name;
 
   const triggerSyncImport = useTriggerSecretSyncRemoveSecrets();
@@ -24,7 +24,8 @@ const Content = ({ secretSync, onComplete }: ContentProps) => {
     try {
       await triggerSyncImport.mutateAsync({
         syncId,
-        destination
+        destination,
+        projectId
       });
 
       createNotification({

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

@@ -41,7 +41,8 @@ export const EditSecretSyncForm = ({ secretSync, fields, onComplete }: Props) =>
         syncId: secretSync.id,
         ...formData,
         environment: environment?.slug,
-        connectionId: connection.id
+        connectionId: connection.id,
+        projectId: secretSync.projectId
       });
 
       createNotification({

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

@@ -71,12 +71,8 @@ export const SecretSyncConnectionField = ({ onChange: callback }: Props) => {
           {canCreateConnection ? (
             <>
               You do not have access to any {appName} Connections. Create one from the{" "}
-              <Link
-                to="/organization/settings"
-                className="underline"
-                search={{ selectedTab: "app-connections" }}
-              >
-                Organization Settings
+              <Link to="/organization/app-connections" className="underline">
+                App Connections
               </Link>{" "}
               page.
             </>

frontend/src/components/v2/PageHeader/PageHeader.tsx

@@ -1,15 +1,17 @@
 import { ReactNode } from "@tanstack/react-router";
+import { twMerge } from "tailwind-merge";
 
 type Props = {
   title: ReactNode;
   description?: ReactNode;
   children?: ReactNode;
+  className?: string;
 };
 
-export const PageHeader = ({ title, description, children }: Props) => (
-  <div className="mb-4">
+export const PageHeader = ({ title, description, children, className }: Props) => (
+  <div className={twMerge("mb-4", className)}>
     <div className="flex w-full justify-between">
-      <div>
+      <div className="w-full">
         <h1 className="mr-4 text-3xl font-semibold capitalize text-white">{title}</h1>
       </div>
       <div>{children}</div>