feature: add suport for project scoped app connections

frontend/src/components/app-connections/AppConnectionOption.tsx

@@ -0,0 +1,45 @@
+import { components, OptionProps } from "react-select";
+import { faCheckCircle } from "@fortawesome/free-regular-svg-icons";
+import { faBuilding, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { Badge, Tooltip } from "@app/components/v2";
+import { TAvailableAppConnection } from "@app/hooks/api/appConnections";
+
+export const AppConnectionOption = ({
+  isSelected,
+  children,
+  ...props
+}: OptionProps<TAvailableAppConnection>) => {
+  const isCreateOption = props.data.id === "_create";
+
+  return (
+    <components.Option isSelected={isSelected} {...props}>
+      <div className="flex flex-row items-center justify-between">
+        {isCreateOption ? (
+          <div className="flex items-center gap-x-1 text-mineshaft-400">
+            <FontAwesomeIcon icon={faPlus} size="sm" />
+            <span className="mr-auto">Create New Connection</span>
+          </div>
+        ) : (
+          <>
+            <p className="truncate">{children}</p>
+            {!props.data.projectId && (
+              <Tooltip content="This connection belongs to your organization.">
+                <div className="ml-2 mr-auto">
+                  <Badge className="flex h-5 w-min items-center gap-1 whitespace-nowrap bg-mineshaft-400/50 text-bunker-300 hover:text-bunker-300">
+                    <FontAwesomeIcon icon={faBuilding} size="sm" />
+                    Organization
+                  </Badge>
+                </div>
+              </Tooltip>
+            )}
+            {isSelected && (
+              <FontAwesomeIcon className="ml-2 text-primary" icon={faCheckCircle} size="sm" />
+            )}
+          </>
+        )}
+      </div>
+    </components.Option>
+  );
+};

frontend/src/components/app-connections/index.ts

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

frontend/src/components/permissions/OrgPermissionCan.tsx

@@ -1,8 +1,10 @@
 import { FunctionComponent, ReactNode } from "react";
-import { BoundCanProps, Can } from "@casl/react";
+import { AbilityTuple, MongoAbility } from "@casl/ability";
+import { Can } from "@casl/react";
 
 import { TooltipProps } from "@app/components/v2/Tooltip/Tooltip";
-import { TOrgPermission, useOrgPermission } from "@app/context/OrgPermissionContext";
+import { useOrgPermission } from "@app/context/OrgPermissionContext";
+import { OrgPermissionSet } from "@app/context/OrgPermissionContext/types";
 
 import { AccessRestrictedBanner, Tooltip } from "../v2";
 
@@ -14,7 +16,7 @@ export const OrgPermissionGuardBanner = () => {
   );
 };
 
-type Props = {
+type Props<T extends AbilityTuple> = {
   label?: ReactNode;
   // this prop is used when there exist already a tooltip as helper text for users
   // so when permission is allowed same tooltip will be reused  to show helpertext
@@ -22,9 +24,18 @@ type Props = {
   allowedLabel?: string;
   renderGuardBanner?: boolean;
   tooltipProps?: Omit<TooltipProps, "children">;
-} & BoundCanProps<TOrgPermission>;
+  I: T[0];
+  ability?: MongoAbility<T>;
+  children: ReactNode | ((isAllowed: boolean, ability: T) => ReactNode);
+  passThrough?: boolean;
+} & (
+  | { an: T[1] }
+  | {
+      a: T[1];
+    }
+);
 
-export const OrgPermissionCan: FunctionComponent<Props> = ({
+export const OrgPermissionCan: FunctionComponent<Props<OrgPermissionSet>> = ({
   label = "Access restricted",
   children,
   passThrough = true,
@@ -41,9 +52,7 @@ export const OrgPermissionCan: FunctionComponent<Props> = ({
       {(isAllowed, ability) => {
         // akhilmhdh: This is set as type due to error in casl react type.
         const finalChild =
-          typeof children === "function"
-            ? children(isAllowed, ability as TOrgPermission)
-            : children;
+          typeof children === "function" ? children(isAllowed, ability as any) : children;
 
         if (!isAllowed && passThrough) {
           return (

frontend/src/components/permissions/VariablePermissionCan.tsx

@@ -0,0 +1,17 @@
+import { OrgPermissionCan } from "./OrgPermissionCan";
+import { ProjectPermissionCan } from "./ProjectPermissionCan";
+
+interface PermissionCanProps {
+  type: "project" | "org";
+  I: any;
+  a: any;
+  children: (isAllowed: boolean, ability?: any) => React.ReactNode;
+}
+
+export const VariablePermissionCan = ({ type, children, ...props }: PermissionCanProps) => {
+  if (type === "project") {
+    return <ProjectPermissionCan {...props}>{children}</ProjectPermissionCan>;
+  }
+
+  return <OrgPermissionCan {...props}>{children}</OrgPermissionCan>;
+};

frontend/src/components/permissions/index.tsx

@@ -3,3 +3,4 @@ export { GlobPermissionInfo } from "./GlobPermissionInfo";
 export { OrgPermissionCan } from "./OrgPermissionCan";
 export { PermissionDeniedBanner } from "./PermissionDeniedBanner";
 export { ProjectPermissionCan } from "./ProjectPermissionCan";
+export * from "./VariablePermissionCan";

frontend/src/components/secret-rotations-v2/CreateSecretRotationV2Modal.tsx

@@ -1,8 +1,10 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useNavigate, useRouterState } from "@tanstack/react-router";
 
 import { SecretRotationV2Form } from "@app/components/secret-rotations-v2/forms";
+import { TSecretRotationV2Form } from "@app/components/secret-rotations-v2/forms/schemas";
 import { SecretRotationV2ModalHeader } from "@app/components/secret-rotations-v2/SecretRotationV2ModalHeader";
 import { SecretRotationV2Select } from "@app/components/secret-rotations-v2/SecretRotationV2Select";
 import { Modal, ModalContent } from "@app/components/v2";
@@ -24,14 +26,21 @@ type ContentProps = {
   onComplete: (secretRotation: TSecretRotationV2) => void;
   selectedRotation: SecretRotation | null;
   setSelectedRotation: (selectedRotation: SecretRotation | null) => void;
+  initialFormData?: Partial<TSecretRotationV2Form>;
 } & SharedProps;
 
-const Content = ({ setSelectedRotation, selectedRotation, ...props }: ContentProps) => {
+const Content = ({
+  setSelectedRotation,
+  selectedRotation,
+  initialFormData,
+  ...props
+}: ContentProps) => {
   if (selectedRotation) {
     return (
       <SecretRotationV2Form
         onCancel={() => setSelectedRotation(null)}
         type={selectedRotation}
+        initialFormData={initialFormData}
         {...props}
       />
     );
@@ -42,12 +51,56 @@ const Content = ({ setSelectedRotation, selectedRotation, ...props }: ContentPro
 
 export const CreateSecretRotationV2Modal = ({ onOpenChange, isOpen, ...props }: Props) => {
   const [selectedRotation, setSelectedRotation] = useState<SecretRotation | null>(null);
+  const [initialFormData, setInitialFormData] = useState<Partial<TSecretRotationV2Form>>();
+
+  const {
+    location: {
+      search: { connectionId, connectionName, ...search },
+      pathname
+    }
+  } = useRouterState();
+
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (connectionId && connectionName) {
+      const storedFormData = localStorage.getItem("secretRotationFormData");
+
+      if (!storedFormData) return;
+
+      let form: Partial<TSecretRotationV2Form> = {};
+      try {
+        form = JSON.parse(storedFormData) as TSecretRotationV2Form;
+      } catch {
+        return;
+      } finally {
+        localStorage.removeItem("secretRotationFormData");
+      }
+
+      onOpenChange(true);
+
+      setSelectedRotation(form.type ?? null);
+
+      setInitialFormData({
+        ...form,
+        connection: { id: connectionId, name: connectionName }
+      });
+
+      navigate({
+        to: pathname,
+        search
+      });
+    }
+  }, [connectionId, connectionName]);
 
   return (
     <Modal
       isOpen={isOpen}
       onOpenChange={(open) => {
-        if (!open) setSelectedRotation(null);
+        if (!open) {
+          setSelectedRotation(null);
+          setInitialFormData(undefined);
+        }
         onOpenChange(open);
       }}
     >
@@ -87,6 +140,7 @@ export const CreateSecretRotationV2Modal = ({ onOpenChange, isOpen, ...props }:
             setSelectedRotation(null);
             onOpenChange(false);
           }}
+          initialFormData={initialFormData}
           selectedRotation={selectedRotation}
           setSelectedRotation={setSelectedRotation}
           {...props}

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ConnectionField.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_ROTATION_CONNECTION_MAP } from "@app/helpers/secretRotationsV2";
+import { usePopUp } from "@app/hooks";
 import { useListAvailableAppConnections } from "@app/hooks/api/appConnections";
+import { AddAppConnectionModal } from "@app/pages/organization/AppConnections/AppConnectionsPage/components";
 
 import { TSecretRotationV2Form } from "./schemas";
 
@@ -18,19 +21,26 @@ type Props = {
 };
 
 export const SecretRotationV2ConnectionField = ({ onChange: callback, isUpdate }: Props) => {
-  const { permission } = useOrgPermission();
-  const { control, watch } = useFormContext<TSecretRotationV2Form>();
+  const { permission } = useProjectPermission();
+  const { control, watch, setValue } = useFormContext<TSecretRotationV2Form>();
+
+  const { popUp, handlePopUpToggle, handlePopUpOpen } = usePopUp(["addConnection"] as const);
 
   const rotationType = watch("type");
   const app = SECRET_ROTATION_CONNECTION_MAP[rotationType];
 
-  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[app].name;
@@ -66,37 +76,56 @@ export const SecretRotationV2ConnectionField = ({ onChange: callback, isUpdate }
             <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("secretRotationFormData", JSON.stringify(watch()));
+                  if (callback) callback();
+                  return;
+                }
+
                 onChange(newValue);
                 if (callback) callback();
               }}
               isLoading={isPending}
-              options={availableConnections}
+              options={[
+                ...(canCreateConnection ? [{ id: "_create", name: "Create Connection" }] : []),
+                ...(availableConnections ?? [])
+              ]}
               isDisabled={isUpdate}
               placeholder="Select connection..."
               getOptionLabel={(option) => option.name}
               getOptionValue={(option) => option.id}
+              components={{ Option: AppConnectionOption }}
             />
           </FormControl>
         )}
         control={control}
         name="connection"
       />
-      {!isUpdate && availableConnections?.length === 0 && (
+      {!isUpdate && !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("secretRotationFormData");
+          handlePopUpToggle("addConnection", isOpen);
+        }}
+        projectType={currentWorkspace.type}
+        projectId={currentWorkspace.id}
+        app={app}
+        onComplete={(connection) => {
+          if (connection) {
+            setValue("connection", connection);
+          }
+        }}
+      />
     </>
   );
 };

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2Form.tsx

@@ -34,6 +34,7 @@ type Props = {
   environment?: string;
   environments?: WorkspaceEnv[];
   secretRotation?: TSecretRotationV2;
+  initialFormData?: Partial<TSecretRotationV2Form>;
 };
 
 const FORM_TABS: { name: string; key: string; fields: (keyof TSecretRotationV2Form)[] }[] = [
@@ -64,7 +65,8 @@ export const SecretRotationV2Form = ({
   environment: envSlug,
   secretPath,
   secretRotation,
-  environments
+  environments,
+  initialFormData
 }: Props) => {
   const createSecretRotation = useCreateSecretRotationV2();
   const updateSecretRotation = useUpdateSecretRotationV2();
@@ -93,7 +95,8 @@ export const SecretRotationV2Form = ({
           },
           environment: currentWorkspace?.environments.find((env) => env.slug === envSlug),
           secretPath,
-          ...(rotationOption!.template as object) // can't infer type since we don't know which specific type it is
+          ...((rotationOption?.template as object) ?? {}), // can't infer type since we don't know which specific type it is
+          ...(initialFormData as object)
         },
     reValidateMode: "onChange"
   });

frontend/src/components/secret-scanning/CreateSecretScanningDataSourceModal.tsx

@@ -1,7 +1,9 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useNavigate, useRouterState } from "@tanstack/react-router";
 
+import { TSecretScanningDataSourceForm } from "@app/components/secret-scanning/forms/schemas";
 import { Modal, ModalContent } from "@app/components/v2";
 import {
   SecretScanningDataSource,
@@ -21,6 +23,7 @@ type ContentProps = {
   onComplete: (dataSource: TSecretScanningDataSource) => void;
   selectedDataSource: SecretScanningDataSource | null;
   setSelectedDataSource: (selectedDataSource: SecretScanningDataSource | null) => void;
+  initialFormData?: Partial<TSecretScanningDataSourceForm>;
 };
 
 const Content = ({ setSelectedDataSource, selectedDataSource, ...props }: ContentProps) => {
@@ -41,6 +44,47 @@ export const CreateSecretScanningDataSourceModal = ({ onOpenChange, isOpen, ...p
   const [selectedDataSource, setSelectedDataSource] = useState<SecretScanningDataSource | null>(
     null
   );
+  const [initialFormData, setInitialFormData] = useState<Partial<TSecretScanningDataSourceForm>>();
+
+  const {
+    location: {
+      search: { connectionId, connectionName, ...search },
+      pathname
+    }
+  } = useRouterState();
+
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (connectionId && connectionName) {
+      const storedFormData = localStorage.getItem("secretScanningDataSourceFormData");
+
+      if (!storedFormData) return;
+
+      let form: Partial<TSecretScanningDataSourceForm> = {};
+      try {
+        form = JSON.parse(storedFormData) as TSecretScanningDataSourceForm;
+      } catch {
+        return;
+      } finally {
+        localStorage.removeItem("secretScanningDataSourceFormData");
+      }
+
+      onOpenChange(true);
+
+      setSelectedDataSource(form.type ?? null);
+
+      setInitialFormData({
+        ...form,
+        connection: { id: connectionId, name: connectionName }
+      });
+
+      navigate({
+        to: pathname,
+        search
+      });
+    }
+  }, [connectionId, connectionName]);
 
   return (
     <Modal
@@ -88,6 +132,7 @@ export const CreateSecretScanningDataSourceModal = ({ onOpenChange, isOpen, ...p
           }}
           selectedDataSource={selectedDataSource}
           setSelectedDataSource={setSelectedDataSource}
+          initialFormData={initialFormData}
           {...props}
         />
       </ModalContent>

frontend/src/components/secret-scanning/forms/SecretScanningDataSourceConnectionField.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_SCANNING_DATA_SOURCE_CONNECTION_MAP } from "@app/helpers/secretScanningV2";
+import { usePopUp } from "@app/hooks";
 import { useListAvailableAppConnections } from "@app/hooks/api/appConnections";
+import { AddAppConnectionModal } from "@app/pages/organization/AppConnections/AppConnectionsPage/components";
 
 import { TSecretScanningDataSourceForm } from "./schemas";
 
@@ -21,19 +24,26 @@ export const SecretScanningDataSourceConnectionField = ({
   onChange: callback,
   isUpdate
 }: Props) => {
-  const { permission } = useOrgPermission();
-  const { control, watch } = useFormContext<TSecretScanningDataSourceForm>();
+  const { permission } = useProjectPermission();
+  const { control, watch, setValue } = useFormContext<TSecretScanningDataSourceForm>();
+
+  const { popUp, handlePopUpToggle, handlePopUpOpen } = usePopUp(["addConnection"] as const);
 
   const dataSourceType = watch("type");
   const app = SECRET_SCANNING_DATA_SOURCE_CONNECTION_MAP[dataSourceType];
 
-  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
   );
 
   return (
@@ -67,37 +77,57 @@ export const SecretScanningDataSourceConnectionField = ({
             <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("secretScanningDataSourceFormData", JSON.stringify(watch()));
+                  if (callback) callback();
+                  return;
+                }
+
                 onChange(newValue);
                 if (callback) callback();
               }}
               isLoading={isPending}
-              options={availableConnections}
+              options={[
+                ...(canCreateConnection ? [{ id: "_create", name: "Create Connection" }] : []),
+                ...(availableConnections ?? [])
+              ]}
               isDisabled={isUpdate}
               placeholder="Select connection..."
               getOptionLabel={(option) => option.name}
               getOptionValue={(option) => option.id}
+              components={{ Option: AppConnectionOption }}
             />
           </FormControl>
         )}
         control={control}
         name="connection"
       />
-      {!isUpdate && availableConnections?.length === 0 && (
+      {!isUpdate && !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 {connectionName} Connections. Create one from the{" "}
-              <Link to="/organization/app-connections" className="underline">
-                App Connections
-              </Link>{" "}
-              page.
-            </>
-          ) : (
-            `You do not have access to any ${connectionName} Connections. Contact an admin to create one.`
-          )}
+          You do not have access to any ${connectionName} Connections. Contact an admin to create
+          one.
         </p>
       )}
+      <AddAppConnectionModal
+        isOpen={popUp.addConnection.isOpen}
+        onOpenChange={(isOpen) => {
+          // remove form storage, not oauth connection
+          localStorage.removeItem("secretScanningDataSourceFormData");
+          handlePopUpToggle("addConnection", isOpen);
+        }}
+        projectType={currentWorkspace.type}
+        projectId={currentWorkspace.id}
+        app={app}
+        onComplete={(connection) => {
+          if (connection) {
+            setValue("connection", connection);
+          }
+        }}
+      />
     </>
   );
 };

frontend/src/components/secret-scanning/forms/SecretScanningDataSourceForm.tsx

@@ -27,6 +27,7 @@ type Props = {
   type: SecretScanningDataSource;
   onCancel: () => void;
   dataSource?: TSecretScanningDataSource;
+  initialFormData?: Partial<TSecretScanningDataSourceForm>;
 };
 
 const FORM_TABS: { name: string; key: string; fields: (keyof TSecretScanningDataSourceForm)[] }[] =
@@ -36,7 +37,13 @@ const FORM_TABS: { name: string; key: string; fields: (keyof TSecretScanningData
     { name: "Review", key: "review", fields: [] }
   ];
 
-export const SecretScanningDataSourceForm = ({ type, onComplete, onCancel, dataSource }: Props) => {
+export const SecretScanningDataSourceForm = ({
+  type,
+  onComplete,
+  onCancel,
+  dataSource,
+  initialFormData
+}: Props) => {
   const createDataSource = useCreateSecretScanningDataSource();
   const updateDataSource = useUpdateSecretScanningDataSource();
   const { currentWorkspace } = useWorkspace();
@@ -48,7 +55,8 @@ export const SecretScanningDataSourceForm = ({ type, onComplete, onCancel, dataS
     resolver: zodResolver(SecretScanningDataSourceSchema),
     defaultValues: dataSource ?? {
       type,
-      isAutoScanEnabled: true // scott: this may need to be derived from type in the future
+      isAutoScanEnabled: true, // scott: this may need to be derived from type in the future
+      ...(initialFormData as object)
     },
     reValidateMode: "onChange"
   });

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);
+          }
+        }}
+      />
     </>
   );
 };