feature: add suport for project scoped app connections

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

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 
+import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas";
 import { Modal, ModalContent } from "@app/components/v2";
 import { SecretSync, TSecretSync } from "@app/hooks/api/secretSyncs";
 
@@ -11,18 +12,21 @@ type Props = {
   isOpen: boolean;
   onOpenChange: (isOpen: boolean) => void;
   selectSync?: SecretSync | null;
+  initialFormData?: Partial<TSecretSyncForm>;
 };
 
 type ContentProps = {
   onComplete: (secretSync: TSecretSync) => void;
   selectedSync: SecretSync | null;
   setSelectedSync: (selectedSync: SecretSync | null) => void;
+  initialFormData?: Partial<TSecretSyncForm>;
 };
 
-const Content = ({ onComplete, setSelectedSync, selectedSync }: ContentProps) => {
+const Content = ({ onComplete, setSelectedSync, selectedSync, initialFormData }: ContentProps) => {
   if (selectedSync) {
     return (
       <CreateSecretSyncForm
+        initialFormData={initialFormData}
         onComplete={onComplete}
         onCancel={() => setSelectedSync(null)}
         destination={selectedSync}
@@ -33,7 +37,12 @@ const Content = ({ onComplete, setSelectedSync, selectedSync }: ContentProps) =>
   return <SecretSyncSelect onSelect={setSelectedSync} />;
 };
 
-export const CreateSecretSyncModal = ({ onOpenChange, selectSync = null, ...props }: Props) => {
+export const CreateSecretSyncModal = ({
+  onOpenChange,
+  selectSync = null,
+  initialFormData,
+  ...props
+}: Props) => {
   const [selectedSync, setSelectedSync] = useState<SecretSync | null>(selectSync);
 
   useEffect(() => {
@@ -67,6 +76,7 @@ export const CreateSecretSyncModal = ({ onOpenChange, selectSync = null, ...prop
           }}
           selectedSync={selectedSync}
           setSelectedSync={setSelectedSync}
+          initialFormData={initialFormData}
         />
       </ModalContent>
     </Modal>

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

@@ -29,6 +29,7 @@ type Props = {
   onComplete: (secretSync: TSecretSync) => void;
   destination: SecretSync;
   onCancel: () => void;
+  initialFormData?: Partial<TSecretSyncForm>;
 };
 
 const FORM_TABS: { name: string; key: string; fields: (keyof TSecretSyncForm)[] }[] = [
@@ -39,14 +40,20 @@ const FORM_TABS: { name: string; key: string; fields: (keyof TSecretSyncForm)[]
   { name: "Review", key: "review", fields: [] }
 ];
 
-export const CreateSecretSyncForm = ({ destination, onComplete, onCancel }: Props) => {
+export const CreateSecretSyncForm = ({
+  destination,
+  onComplete,
+  onCancel,
+  initialFormData
+}: Props) => {
   const createSecretSync = useCreateSecretSync();
   const { currentWorkspace } = useWorkspace();
   const { name: destinationName } = SECRET_SYNC_MAP[destination];
 
   const [showConfirmation, setShowConfirmation] = useState(false);
 
-  const [selectedTabIndex, setSelectedTabIndex] = useState(0);
+  // scoot: right now we only do this when creating a connection so we know index 1
+  const [selectedTabIndex, setSelectedTabIndex] = useState(initialFormData ? 1 : 0);
 
   const { syncOption } = useSecretSyncOption(destination);
 
@@ -59,7 +66,8 @@ export const CreateSecretSyncForm = ({ destination, onComplete, onCancel }: Prop
         initialSyncBehavior: syncOption?.canImportSecrets
           ? undefined
           : SecretSyncInitialSyncBehavior.OverwriteDestination
-      }
+      },
+      ...initialFormData
     } as Partial<TSecretSyncForm>,
     reValidateMode: "onChange"
   });

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

@@ -1,14 +1,17 @@
 import { Controller, useFormContext } from "react-hook-form";
+import { SingleValue } from "react-select";
 import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Link } from "@tanstack/react-router";
 
+import { AppConnectionOption } from "@app/components/app-connections";
 import { FilterableSelect, FormControl } from "@app/components/v2";
-import { OrgPermissionSubjects, useOrgPermission } from "@app/context";
-import { OrgPermissionAppConnectionActions } from "@app/context/OrgPermissionContext/types";
+import { ProjectPermissionSub, useProjectPermission, useWorkspace } from "@app/context";
+import { ProjectPermissionAppConnectionActions } from "@app/context/ProjectPermissionContext/types";
 import { APP_CONNECTION_MAP } from "@app/helpers/appConnections";
 import { SECRET_SYNC_CONNECTION_MAP } from "@app/helpers/secretSyncs";
+import { usePopUp } from "@app/hooks";
 import { useListAvailableAppConnections } from "@app/hooks/api/appConnections";
+import { AddAppConnectionModal } from "@app/pages/organization/AppConnections/AppConnectionsPage/components";
 
 import { TSecretSyncForm } from "./schemas";
 
@@ -17,19 +20,26 @@ type Props = {
 };
 
 export const SecretSyncConnectionField = ({ onChange: callback }: Props) => {
-  const { permission } = useOrgPermission();
-  const { control, watch } = useFormContext<TSecretSyncForm>();
+  const { permission } = useProjectPermission();
+  const { control, watch, setValue } = useFormContext<TSecretSyncForm>();
+
+  const { popUp, handlePopUpToggle, handlePopUpOpen } = usePopUp(["addConnection"] as const);
 
   const destination = watch("destination");
   const app = SECRET_SYNC_CONNECTION_MAP[destination];
 
-  const { data: availableConnections, isPending } = useListAvailableAppConnections(app);
+  const { currentWorkspace } = useWorkspace();
+
+  const { data: availableConnections, isPending } = useListAvailableAppConnections(
+    app,
+    currentWorkspace.id
+  );
 
   const connectionName = APP_CONNECTION_MAP[app].name;
 
   const canCreateConnection = permission.can(
-    OrgPermissionAppConnectionActions.Create,
-    OrgPermissionSubjects.AppConnections
+    ProjectPermissionAppConnectionActions.Create,
+    ProjectPermissionSub.AppConnections
   );
 
   const appName = APP_CONNECTION_MAP[SECRET_SYNC_CONNECTION_MAP[destination]].name;
@@ -51,36 +61,55 @@ export const SecretSyncConnectionField = ({ onChange: callback }: Props) => {
             <FilterableSelect
               value={value}
               onChange={(newValue) => {
+                if ((newValue as SingleValue<{ id: string; name: string }>)?.id === "_create") {
+                  handlePopUpOpen("addConnection");
+                  onChange(null);
+                  // store for oauth callback connections
+                  localStorage.setItem("secretSyncFormData", JSON.stringify(watch()));
+                  if (callback) callback();
+                  return;
+                }
+
                 onChange(newValue);
                 if (callback) callback();
               }}
               isLoading={isPending}
-              options={availableConnections}
+              options={[
+                ...(canCreateConnection ? [{ id: "_create", name: "Create Connection" }] : []),
+                ...(availableConnections ?? [])
+              ]}
               placeholder="Select connection..."
               getOptionLabel={(option) => option.name}
               getOptionValue={(option) => option.id}
+              components={{ Option: AppConnectionOption }}
             />
           </FormControl>
         )}
         control={control}
         name="connection"
       />
-      {availableConnections?.length === 0 && (
+      {!isPending && !availableConnections?.length && !canCreateConnection && (
         <p className="-mt-2.5 mb-2.5 text-xs text-yellow">
           <FontAwesomeIcon className="mr-1" size="xs" icon={faInfoCircle} />
-          {canCreateConnection ? (
-            <>
-              You do not have access to any {appName} Connections. Create one from the{" "}
-              <Link to="/organization/app-connections" className="underline">
-                App Connections
-              </Link>{" "}
-              page.
-            </>
-          ) : (
-            `You do not have access to any ${appName} Connections. Contact an admin to create one.`
-          )}
+          You do not have access to any ${appName} Connections. Contact an admin to create one.
         </p>
       )}
+      <AddAppConnectionModal
+        isOpen={popUp.addConnection.isOpen}
+        onOpenChange={(isOpen) => {
+          // remove form storage, not oauth connection
+          localStorage.removeItem("secretSyncFormData");
+          handlePopUpToggle("addConnection", isOpen);
+        }}
+        projectType={currentWorkspace.type}
+        projectId={currentWorkspace.id}
+        app={app}
+        onComplete={(connection) => {
+          if (connection) {
+            setValue("connection", connection);
+          }
+        }}
+      />
     </>
   );
 };