Add connection list filtering to the frontend based on a set of sourc…

…es or destinations (#21119)

* Update listWorkspaceStandardSyncs to support lists of sources/destinations

* Update API spec

* Implement the connections list filtering for a set of sources or destinations

* Minor pluralization fix

Co-authored-by: Jimmy Ma <jimmy@airbyte.io>

airbyte-webapp/src/components/destination/DestinationsTable/DestinationsTable.tsx

@@ -14,7 +14,7 @@ interface DestinationsTableProps {
 
 export const DestinationsTable: React.FC<DestinationsTableProps> = ({ destinations }) => {
   const navigate = useNavigate();
-  const { connections } = useConnectionList();
+  const { connections } = useConnectionList({ destinationId: destinations.map(({ destinationId }) => destinationId) });
 
   const data = getEntityTableData(destinations, connections, "destination");
 

airbyte-webapp/src/pages/SourcesPage/pages/AllSourcesPage/components/SourcesTable.tsx

@@ -15,7 +15,7 @@ interface SourcesTableProps {
 const SourcesTable: React.FC<SourcesTableProps> = ({ sources }) => {
   const navigate = useNavigate();
 
-  const { connections } = useConnectionList();
+  const { connections } = useConnectionList({ sourceId: sources.map(({ sourceId }) => sourceId) });
 
   const data = getEntityTableData(sources, connections, "source");
 

airbyte-webapp/src/pages/destination/DestinationSettingsPage/DestinationSettingsPage.tsx

@@ -19,10 +19,7 @@ import styles from "./DestinationSettings.module.scss";
 export const DestinationSettingsPage: React.FC = () => {
   const params = useParams() as { "*": StepsTypes | ""; id: string };
   const destination = useGetDestination(params.id);
-  const { connections } = useConnectionList();
-  const connectionsWithDestination = connections.filter(
-    ({ destination: { destinationId } }) => destinationId === destination.destinationId
-  );
+  const { connections: connectionsWithDestination } = useConnectionList({ destinationId: [destination.destinationId] });
   const destinationSpecification = useGetDestinationDefinitionSpecification(destination.destinationDefinitionId);
   const destinationDefinition = useDestinationDefinition(destination.destinationDefinitionId);
   const { mutateAsync: updateDestination } = useUpdateDestination();