feat(ui): Use endpoint for fetching InfrastructureService on edit

Previously, the edit pages fetched all infrastructure services of the
entity and filtered the desired service by name on the client side. With
the new endpoint to get an `InfrastructureService` by its name, the pages
now fetch the service directly from the backend.

Resolves #758.

Signed-off-by: Onur Demirci <[email protected]>

Author: bs-ondem

ui/src/routes/organizations/$orgId/infrastructure-services/$serviceName/edit/index.tsx

@@ -25,7 +25,7 @@ import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
 import {
-  useOrganizationsServiceGetApiV1OrganizationsByOrganizationIdInfrastructureServicesKey,
+  useOrganizationsServiceGetApiV1OrganizationsByOrganizationIdInfrastructureServicesByServiceName,
   useOrganizationsServicePatchApiV1OrganizationsByOrganizationIdInfrastructureServicesByServiceName,
 } from '@/api/queries';
 import { useOrganizationsServiceGetApiV1OrganizationsByOrganizationIdSecretsSuspense } from '@/api/queries/suspense';
@@ -85,29 +85,21 @@ const EditInfrastructureServicePage = () => {
       }
     );
 
-  /* Search service details from all infrastructure services of the organization
-   * TODO: Edit this to fetch the details from:
-   * GET /api/v1/organizations/{organizationId}/infrastructure-services/{serviceName}
-   * when the endpoint is implemented
-   */
-  const { data: infrastructureServices } = useSuspenseQuery({
+  const { data: service } = useSuspenseQuery({
     queryKey: [
-      useOrganizationsServiceGetApiV1OrganizationsByOrganizationIdInfrastructureServicesKey,
+      useOrganizationsServiceGetApiV1OrganizationsByOrganizationIdInfrastructureServicesByServiceName,
       params.orgId,
+      params.serviceName,
     ],
     queryFn: () =>
-      OrganizationsService.getApiV1OrganizationsByOrganizationIdInfrastructureServices(
+      OrganizationsService.getApiV1OrganizationsByOrganizationIdInfrastructureServicesByServiceName(
         {
           organizationId: Number.parseInt(params.orgId),
-          limit: ALL_ITEMS,
+          serviceName: params.serviceName,
         }
       ),
   });
 
-  const service = infrastructureServices?.data.find(
-    (service) => service.name === params.serviceName
-  );
-
   const { mutateAsync, isPending } =
     useOrganizationsServicePatchApiV1OrganizationsByOrganizationIdInfrastructureServicesByServiceName(
       {
@@ -359,14 +351,15 @@ export const Route = createFileRoute(
   loader: async ({ context, params }) => {
     await context.queryClient.ensureQueryData({
       queryKey: [
-        useOrganizationsServiceGetApiV1OrganizationsByOrganizationIdInfrastructureServicesKey,
+        useOrganizationsServiceGetApiV1OrganizationsByOrganizationIdInfrastructureServicesByServiceName,
         params.orgId,
+        params.serviceName,
       ],
       queryFn: () =>
-        OrganizationsService.getApiV1OrganizationsByOrganizationIdInfrastructureServices(
+        OrganizationsService.getApiV1OrganizationsByOrganizationIdInfrastructureServicesByServiceName(
           {
             organizationId: Number.parseInt(params.orgId),
-            limit: ALL_ITEMS,
+            serviceName: params.serviceName,
           }
         ),
     });

ui/src/routes/organizations/$orgId/products/$productId/repositories/$repoId/_repo-layout/infrastructure-services/$serviceName/edit/index.tsx

@@ -24,10 +24,7 @@ import { Loader2 } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
-import {
-  useRepositoriesServiceGetApiV1RepositoriesByRepositoryIdInfrastructureServicesKey,
-  useRepositoriesServicePatchApiV1RepositoriesByRepositoryIdInfrastructureServicesByServiceName,
-} from '@/api/queries';
+import { useRepositoriesServicePatchApiV1RepositoriesByRepositoryIdInfrastructureServicesByServiceName } from '@/api/queries';
 import { useRepositoriesServiceGetApiV1RepositoriesByRepositoryIdSecretsSuspense } from '@/api/queries/suspense.ts';
 import { ApiError, RepositoriesService } from '@/api/requests';
 import { MultiSelectField } from '@/components/form/multi-select-field.tsx';
@@ -83,24 +80,21 @@ const EditInfrastructureServicePage = () => {
       limit: ALL_ITEMS,
     });
 
-  const { data: infrastructureServices } = useSuspenseQuery({
+  const { data: service } = useSuspenseQuery({
     queryKey: [
-      useRepositoriesServiceGetApiV1RepositoriesByRepositoryIdInfrastructureServicesKey,
+      useRepositoriesServicePatchApiV1RepositoriesByRepositoryIdInfrastructureServicesByServiceName,
       params.repoId,
+      params.serviceName,
     ],
     queryFn: () =>
-      RepositoriesService.getApiV1RepositoriesByRepositoryIdInfrastructureServices(
+      RepositoriesService.getApiV1RepositoriesByRepositoryIdInfrastructureServicesByServiceName(
         {
           repositoryId: Number.parseInt(params.repoId),
-          limit: ALL_ITEMS,
+          serviceName: params.serviceName,
         }
       ),
   });
 
-  const service = infrastructureServices?.data.find(
-    (service) => service.name === params.serviceName
-  );
-
   const { mutateAsync, isPending } =
     useRepositoriesServicePatchApiV1RepositoriesByRepositoryIdInfrastructureServicesByServiceName(
       {
@@ -360,14 +354,15 @@ export const Route = createFileRoute(
   loader: async ({ context, params }) => {
     await context.queryClient.ensureQueryData({
       queryKey: [
-        useRepositoriesServiceGetApiV1RepositoriesByRepositoryIdInfrastructureServicesKey,
+        useRepositoriesServicePatchApiV1RepositoriesByRepositoryIdInfrastructureServicesByServiceName,
         params.repoId,
+        params.serviceName,
       ],
       queryFn: () =>
-        RepositoriesService.getApiV1RepositoriesByRepositoryIdInfrastructureServices(
+        RepositoriesService.getApiV1RepositoriesByRepositoryIdInfrastructureServicesByServiceName(
           {
             repositoryId: Number.parseInt(params.repoId),
-            limit: ALL_ITEMS,
+            serviceName: params.serviceName,
           }
         ),
     });