improvements: address feedback

backend/src/server/routes/v1/app-connection-routers/app-connection-endpoints.ts

@@ -94,7 +94,7 @@ export const registerAppConnectionEndpoints = <T extends TAppConnection, I exten
       tags: [ApiDocsTags.AppConnections],
       description: `List the ${appName} Connections the current user has permission to establish connections within this project.`,
       querystring: z.object({
-        projectId: z.string().describe(AppConnections.LIST(app).projectId)
+        projectId: z.string().optional().describe(AppConnections.LIST(app).projectId)
       }),
       response: {
         200: z.object({

backend/src/services/app-connection/app-connection-service.ts

@@ -741,25 +741,7 @@ export const appConnectionServiceFactory = ({
     return appConnection;
   };
 
-  const listAvailableAppConnectionsForUser = async (app: AppConnection, actor: OrgServiceActor, projectId: string) => {
+  const listAvailableAppConnectionsForUser = async (app: AppConnection, actor: OrgServiceActor, projectId?: string) => {
-    const project = await projectDAL.findProjectById(projectId);
-
-    if (!project) throw new BadRequestError({ message: `Could not find project with ID ${projectId}` });
-
-    const { permission: projectPermission } = await permissionService.getProjectPermission({
-      actor: actor.type,
-      actorId: actor.id,
-      projectId,
-      actorAuthMethod: actor.authMethod,
-      actorOrgId: actor.orgId,
-      actionProjectType: ActionProjectType.Any
-    });
-
-    ForbiddenError.from(projectPermission).throwUnlessCan(
-      ProjectPermissionAppConnectionActions.Connect,
-      ProjectPermissionSub.AppConnections
-    );
-
     const { permission: orgPermission } = await permissionService.getOrgPermission(
       actor.type,
       actor.id,
@@ -768,6 +750,37 @@ export const appConnectionServiceFactory = ({
       actor.orgId
     );
 
+    let availableProjectConnections: TAppConnections[] = [];
+
+    if (projectId) {
+      const project = await projectDAL.findProjectById(projectId);
+
+      if (!project) throw new BadRequestError({ message: `Could not find project with ID ${projectId}` });
+
+      const { permission: projectPermission } = await permissionService.getProjectPermission({
+        actor: actor.type,
+        actorId: actor.id,
+        projectId,
+        actorAuthMethod: actor.authMethod,
+        actorOrgId: actor.orgId,
+        actionProjectType: ActionProjectType.Any
+      });
+
+      ForbiddenError.from(projectPermission).throwUnlessCan(
+        ProjectPermissionAppConnectionActions.Connect,
+        ProjectPermissionSub.AppConnections
+      );
+
+      const projectAppConnections = await appConnectionDAL.find({ app, projectId });
+
+      availableProjectConnections = projectAppConnections.filter((connection) =>
+        projectPermission.can(
+          ProjectPermissionAppConnectionActions.Connect,
+          subject(ProjectPermissionSub.AppConnections, { connectionId: connection.id })
+        )
+      );
+    }
+
     const orgAppConnections = await appConnectionDAL.find({ app, orgId: actor.orgId, projectId: null });
 
     const availableOrgConnections = orgAppConnections.filter((connection) =>
@@ -777,15 +790,6 @@ export const appConnectionServiceFactory = ({
       )
     );
 
-    const projectAppConnections = await appConnectionDAL.find({ app, projectId });
-
-    const availableProjectConnections = projectAppConnections.filter((connection) =>
-      projectPermission.can(
-        ProjectPermissionAppConnectionActions.Connect,
-        subject(ProjectPermissionSub.AppConnections, { connectionId: connection.id })
-      )
-    );
-
     return [...availableOrgConnections, ...availableProjectConnections].sort((a, b) =>
       a.name.toLowerCase().localeCompare(b.name.toLowerCase())
     ) as Omit<TAppConnection, "credentials">[];

frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/ExternalCaModal.tsx

@@ -601,6 +601,7 @@ export const ExternalCaModal = ({ popUp, handlePopUpToggle }: Props) => {
                     placeholder="Select connection..."
                     getOptionLabel={(option) => option.name}
                     getOptionValue={(option) => option.id}
+                    components={{ Option: AppConnectionOption }}
                   />
                 </FormControl>
               )}