fix(ui): Adapt the UI to a changed query client

The changed query client lead to some fixes needed in the UI code to adapt to changes, which are listed here for further reference: - to access the "message" and "cause" fields of the ApiError body in the error toast component, intermediate type casting of error.body to "any" was needed. NOTE: it should be investigated, why this has changed, as before we had direct access to error.body.message and error.body.cause in the UI - earlier on, the service functions like ProductsService.getProductById() were called with passing parameters directly, but now the parameters need to be passed as objects - The openapi-react-query-codegen uses openapi-ts as an underlying engine for code generation, and inline enums were broken in the latter [2]. While this has already been fixed in openapi-ts, the fix has not yet been taken into use in openapi-react-query-codegen [1]. Until the openapi-react-query-codegen is updated, the inline enums need to be accessed differently, as in z.nativeEnum(CreateRepository.type) needs to be changed into z.enum($CreateRepository.properties.type.enum) Note that when the library is updated, this change probably needs to be reverted back to its original form. [1]: 7nohe/openapi-react-query-codegen#110 [2]: hey-api/openapi-ts#547 Signed-off-by: Jyrki Keisala <[email protected]>
doubleopen-project · May 16, 2024 · 421ce45 · 421ce45
1 parent c711c49
commit 421ce45
Show file tree

Hide file tree

Showing 15 changed files with 97 additions and 85 deletions.
diff --git a/ui/src/routes/_layout/create-organization.tsx b/ui/src/routes/_layout/create-organization.tsx
@@ -65,7 +65,7 @@ const CreateOrganizationPage = () => {
     onError(error: ApiError) {
       toast({
         title: error.message,
-        description: <ToastError message={error.body.message} cause={error.body.cause} />,
+        description: <ToastError message={(error.body as any).message} cause={(error.body as any).cause} />,
         variant: 'destructive',
       });
     },
@@ -79,9 +79,7 @@ const CreateOrganizationPage = () => {
     await mutateAsync({
       requestBody: {
         name: values.name,
-        // There's a bug somewhere in the OpenAPI generation. Swagger UI hints that the bug may be
-        // in the API, as description in CreateOrganization is an empty object.
-        description: values.description as Record<string, unknown> | undefined,
+        description: values.description,
       },
     });
   }

diff --git a/ui/src/routes/_layout/organizations/$orgId.create-product.tsx b/ui/src/routes/_layout/organizations/$orgId.create-product.tsx
@@ -68,7 +68,7 @@ const CreateProductPage = () => {
     onError(error: ApiError) {
       toast({
         title: error.message,
-        description: <ToastError message={error.body.message} cause={error.body.cause} />,
+        description: <ToastError message={(error.body as any).message} cause={(error.body as any).cause} />,
         variant: 'destructive',
       });
     }
@@ -83,9 +83,7 @@ const CreateProductPage = () => {
       organizationId: Number.parseInt(params.orgId),
       requestBody: {
         name: values.name,
-        // There's a bug somewhere in the OpenAPI generation. Swagger UI hints that the bug may be
-        // in the API, as description in CreateOrganization is an empty object.
-        description: values.description as Record<string, unknown> | undefined,
+        description: values.description,
       },
     });
   }

diff --git a/ui/src/routes/_layout/organizations/$orgId.edit.tsx b/ui/src/routes/_layout/organizations/$orgId.edit.tsx
@@ -57,9 +57,9 @@ const EditOrganizationPage = () => {
   const { data: organization } = useSuspenseQuery({
         queryKey: [useOrganizationsServiceGetOrganizationByIdKey, params.orgId],
         queryFn: async () =>
-          await OrganizationsService.getOrganizationById(
-            Number.parseInt(params.orgId)
-          ),
+          await OrganizationsService.getOrganizationById({
+            organizationId: Number.parseInt(params.orgId)
+          }),
       },  
   );
 
@@ -77,7 +77,7 @@ const EditOrganizationPage = () => {
     onError(error: ApiError) {
       toast({
         title: error.message,
-        description: <ToastError message={error.body.message} cause={error.body.cause} />,
+        description: <ToastError message={(error.body as any).message} cause={(error.body as any).cause} />,
         variant: 'destructive',
       });
     }
@@ -96,9 +96,7 @@ const EditOrganizationPage = () => {
       organizationId: organization.id,
       requestBody: {
         name: values.name,
-        // There's a bug somewhere in the OpenAPI generation. Swagger UI hints that the bug may be
-        // in the API, as description in CreateOrganization is an empty object.
-        description: values.description as Record<string, unknown> | undefined,
+        description: values.description,
       },
     });
   }
@@ -159,9 +157,9 @@ export const Route = createFileRoute('/_layout/organizations/$orgId/edit')({
     await context.queryClient.ensureQueryData({
         queryKey: [useOrganizationsServiceGetOrganizationByIdKey, params.orgId],
         queryFn: () =>
-          OrganizationsService.getOrganizationById(
-            Number.parseInt(params.orgId)
-          ),
+          OrganizationsService.getOrganizationById({
+            organizationId: Number.parseInt(params.orgId)
+          }),
     });
   },
   component: EditOrganizationPage,

diff --git a/ui/src/routes/_layout/organizations/$orgId.index.tsx b/ui/src/routes/_layout/organizations/$orgId.index.tsx
@@ -72,16 +72,16 @@ const OrganizationComponent = () => {
       {
         queryKey: [useOrganizationsServiceGetOrganizationByIdKey, params.orgId],
         queryFn: async () =>
-          await OrganizationsService.getOrganizationById(
-            Number.parseInt(params.orgId)
-          ),
+          await OrganizationsService.getOrganizationById({
+            organizationId: Number.parseInt(params.orgId)
+          }),
       },
       {
         queryKey: [useProductsServiceGetOrganizationProductsKey, params.orgId],
         queryFn: async () =>
-          await ProductsService.getOrganizationProducts(
-            Number.parseInt(params.orgId)
-          ),
+          await ProductsService.getOrganizationProducts({
+            organizationId: Number.parseInt(params.orgId)
+          }),
       },
     ],
   });
@@ -99,7 +99,7 @@ const OrganizationComponent = () => {
     onError(error: ApiError) {
       toast({
         title: error.message,
-        description: <ToastError message={error.body.message} cause={error.body.cause} />,
+        description: <ToastError message={(error.body as any).message} cause={(error.body as any).cause} />,
         variant: 'destructive',
       });
     }
@@ -217,16 +217,16 @@ export const Route = createFileRoute('/_layout/organizations/$orgId/')({
       context.queryClient.ensureQueryData({
         queryKey: [useOrganizationsServiceGetOrganizationByIdKey, params.orgId],
         queryFn: () =>
-          OrganizationsService.getOrganizationById(
-            Number.parseInt(params.orgId)
-          ),
+          OrganizationsService.getOrganizationById({
+            organizationId: Number.parseInt(params.orgId)
+          }),
       }),
       context.queryClient.ensureQueryData({
         queryKey: [useProductsServiceGetOrganizationProductsKey, params.orgId],
         queryFn: () =>
-          ProductsService.getOrganizationProducts(
-            Number.parseInt(params.orgId)
-          ),
+          ProductsService.getOrganizationProducts({
+            organizationId: Number.parseInt(params.orgId)
+          }),
       }),
     ]);
   },

diff --git a/ui/src/routes/_layout/organizations/$orgId.products.$productId.create-repository.tsx b/ui/src/routes/_layout/organizations/$orgId.products.$productId.create-repository.tsx
@@ -40,7 +40,7 @@ import {
   CardHeader,
   CardTitle,
 } from '@/components/ui/card';
-import { ApiError, CreateRepository } from '@/api/requests';
+import { ApiError, $CreateRepository } from '@/api/requests';
 import {
   Select,
   SelectContent,
@@ -53,7 +53,7 @@ import { ToastError } from '@/components/toast-error';
 
 const formSchema = z.object({
   url: z.string(),
-  type: z.nativeEnum(CreateRepository.type),
+  type: z.enum($CreateRepository.properties.type.enum),
 });
 
 const CreateRepositoryPage = () => {
@@ -75,7 +75,7 @@ const CreateRepositoryPage = () => {
     onError(error: ApiError) {
       toast({
         title: error.message,
-        description: <ToastError message={error.body.message} cause={error.body.cause} />,
+        description: <ToastError message={(error.body as any).message} cause={(error.body as any).cause} />,
         variant: 'destructive',
       });
     }
@@ -133,7 +133,7 @@ const CreateRepositoryPage = () => {
                       </SelectTrigger>
                     </FormControl>
                     <SelectContent>
-                      {Object.keys(CreateRepository.type).map((type) => (
+                      {Object.values($CreateRepository.properties.type.enum).map((type) => (
                         <SelectItem key={type} value={type}>
                           {type}
                         </SelectItem>

diff --git a/ui/src/routes/_layout/organizations/$orgId.products.$productId.edit.tsx b/ui/src/routes/_layout/organizations/$orgId.products.$productId.edit.tsx
@@ -57,9 +57,9 @@ const EditProductPage = () => {
   const { data: product } = useSuspenseQuery({
     queryKey: [useProductsServiceGetProductByIdKey, params.orgId, params.productId],
     queryFn: async () =>
-      await ProductsService.getProductById(
-        Number.parseInt(params.productId)
-      ),
+      await ProductsService.getProductById({
+        productId: Number.parseInt(params.productId)
+      }),
     },  
   );
 
@@ -77,7 +77,7 @@ const EditProductPage = () => {
     onError(error: ApiError) {
       toast({
         title: error.message,
-        description: <ToastError message={error.body.message} cause={error.body.cause} />,
+        description: <ToastError message={(error.body as any).message} cause={(error.body as any).cause} />,
         variant: 'destructive',
       });
     }
@@ -87,7 +87,7 @@ const EditProductPage = () => {
     resolver: zodResolver(formSchema),
     defaultValues: {
       name: product.name,
-      description: product.description as unknown as string,
+      description: product.description || '',
     },
   });
 
@@ -96,8 +96,7 @@ const EditProductPage = () => {
       productId: product.id,
       requestBody: {
         name: values.name,
-        // There's a bug somewhere in the OpenAPI generation, similar to organizations.
-        description: values.description as Record<string, unknown> | undefined,
+        description: values.description,
       },
     });
   }
@@ -158,7 +157,9 @@ export const Route = createFileRoute('/_layout/organizations/$orgId/products/$pr
     await context.queryClient.ensureQueryData({
         queryKey: [useProductsServiceGetProductByIdKey, params.productId],
         queryFn: () =>
-          ProductsService.getProductById(Number.parseInt(params.productId)),
+          ProductsService.getProductById({
+            productId: Number.parseInt(params.productId)
+          }),
     });
   },
   component: EditProductPage,

diff --git a/ui/src/routes/_layout/organizations/$orgId.products.$productId.index.tsx b/ui/src/routes/_layout/organizations/$orgId.products.$productId.index.tsx
@@ -72,19 +72,19 @@ const ProductComponent = () => {
       {
         queryKey: [useProductsServiceGetProductByIdKey, params.productId],
         queryFn: async () =>
-          await ProductsService.getProductById(
-            Number.parseInt(params.productId)
-          ),
+          await ProductsService.getProductById({
+            productId: Number.parseInt(params.productId)
+          }),
       },
       {
         queryKey: [
           useRepositoriesServiceGetRepositoriesByProductIdKey,
           params.productId,
         ],
         queryFn: async () =>
-          await RepositoriesService.getRepositoriesByProductId(
-            Number.parseInt(params.productId)
-          ),
+          await RepositoriesService.getRepositoriesByProductId({
+            productId: Number.parseInt(params.productId)
+          }),
       },
     ],
   });
@@ -103,7 +103,7 @@ const ProductComponent = () => {
     onError(error: ApiError) {
       toast({
         title: error.message,
-        description: <ToastError message={error.body.message} cause={error.body.cause} />,
+        description: <ToastError message={(error.body as any).message} cause={(error.body as any).cause} />,
         variant: 'destructive',
       });
     }
@@ -229,17 +229,19 @@ export const Route = createFileRoute(
       context.queryClient.ensureQueryData({
         queryKey: [useProductsServiceGetProductByIdKey, params.productId],
         queryFn: () =>
-          ProductsService.getProductById(Number.parseInt(params.productId)),
+          ProductsService.getProductById({
+            productId: Number.parseInt(params.productId)
+          }),
       }),
       context.queryClient.ensureQueryData({
         queryKey: [
           useRepositoriesServiceGetRepositoriesByProductIdKey,
           params.productId,
         ],
         queryFn: () =>
-          RepositoriesService.getRepositoriesByProductId(
-            Number.parseInt(params.productId)
-          ),
+          RepositoriesService.getRepositoriesByProductId({
+            productId: Number.parseInt(params.productId)
+          }),
       }),
     ]);
   },

diff --git a/...utes/_layout/organizations/$orgId.products.$productId.repositories.$repoId.create-run.tsx b/...utes/_layout/organizations/$orgId.products.$productId.repositories.$repoId.create-run.tsx
@@ -105,7 +105,7 @@ const CreateRunPage = () => {
     onError(error: ApiError) {
       toast({
         title: error.message,
-        description: <ToastError message={error.body.message} cause={error.body.cause} />,
+        description: <ToastError message={(error.body as any).message} cause={(error.body as any).cause} />,
         variant: 'destructive',
       });
     }
@@ -135,7 +135,7 @@ const CreateRunPage = () => {
         jobConfigs: {
           analyzer: {
             allowDynamicVersions: values.jobConfigs.analyzer.allowDynamicVersions,
-            skipExcluded: values.jobConfigs.analyzer.skipExcluded as unknown as Record<string, any>,
+            skipExcluded: values.jobConfigs.analyzer.skipExcluded,
           },
           reporter: {
             formats: values.jobConfigs.reporter.formats,

diff --git a/ui/src/routes/_layout/organizations/$orgId.products.$productId.repositories.$repoId.edit.tsx b/ui/src/routes/_layout/organizations/$orgId.products.$productId.repositories.$repoId.edit.tsx
@@ -37,7 +37,7 @@ import {
 } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
-import { CreateRepository } from '@/api/requests';
+import { $CreateRepository } from '@/api/requests';
 import {
   Card,
   CardContent,
@@ -58,7 +58,7 @@ import { ToastError } from "@/components/toast-error";
 
 const formSchema = z.object({
   url: z.string(),
-  type: z.nativeEnum(CreateRepository.type),
+  type: z.enum($CreateRepository.properties.type.enum),
 });
 
 const EditRepositoryPage = () => {
@@ -69,9 +69,9 @@ const EditRepositoryPage = () => {
   const { data: repository } = useSuspenseQuery({
     queryKey: [useRepositoriesServiceGetRepositoryById, params.orgId, params.productId, params.repoId],
     queryFn: async () =>
-      await RepositoriesService.getRepositoryById(
-        Number.parseInt(params.repoId)
-      ),
+      await RepositoriesService.getRepositoryById({
+        repositoryId: Number.parseInt(params.repoId)
+      }),
     },  
   );
 
@@ -89,7 +89,7 @@ const EditRepositoryPage = () => {
     onError(error: ApiError) {
       toast({
         title: error.message,
-        description: <ToastError message={error.body.message} cause={error.body.cause} />,
+        description: <ToastError message={(error.body as any).message} cause={(error.body as any).cause} />,
         variant: 'destructive',
       });
     }
@@ -151,7 +151,7 @@ const EditRepositoryPage = () => {
                       </SelectTrigger>
                     </FormControl>
                     <SelectContent>
-                      {Object.keys(CreateRepository.type).map((type) => (
+                      {Object.values($CreateRepository.properties.type.enum).map((type) => (
                         <SelectItem key={type} value={type}>
                           {type}
                         </SelectItem>
@@ -181,7 +181,9 @@ export const Route = createFileRoute('/_layout/organizations/$orgId/products/$pr
     await context.queryClient.ensureQueryData({
         queryKey: [useRepositoriesServiceGetRepositoryByIdKey, params.repoId],
         queryFn: () =>
-          RepositoriesService.getRepositoryById(Number.parseInt(params.repoId)),
+          RepositoriesService.getRepositoryById({
+            repositoryId: Number.parseInt(params.repoId)
+          }),
     });
   },
   component: EditRepositoryPage,