feature: add suport for project scoped app connections

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