Skip to content

Commit

Permalink
fix(ui): Adapt the UI to a changed query client
Browse files Browse the repository at this point in the history
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]>
  • Loading branch information
Etsija committed May 16, 2024
1 parent c711c49 commit 421ce45
Show file tree
Hide file tree
Showing 15 changed files with 97 additions and 85 deletions.
6 changes: 2 additions & 4 deletions ui/src/routes/_layout/create-organization.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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',
});
},
Expand All @@ -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,
},
});
}
Expand Down
6 changes: 2 additions & 4 deletions ui/src/routes/_layout/organizations/$orgId.create-product.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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',
});
}
Expand All @@ -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,
},
});
}
Expand Down
18 changes: 8 additions & 10 deletions ui/src/routes/_layout/organizations/$orgId.edit.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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)
}),
},
);

Expand All @@ -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',
});
}
Expand All @@ -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,
},
});
}
Expand Down Expand Up @@ -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,
Expand Down
26 changes: 13 additions & 13 deletions ui/src/routes/_layout/organizations/$orgId.index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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)
}),
},
],
});
Expand All @@ -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',
});
}
Expand Down Expand Up @@ -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)
}),
}),
]);
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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 = () => {
Expand All @@ -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',
});
}
Expand Down Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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)
}),
},
);

Expand All @@ -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',
});
}
Expand All @@ -87,7 +87,7 @@ const EditProductPage = () => {
resolver: zodResolver(formSchema),
defaultValues: {
name: product.name,
description: product.description as unknown as string,
description: product.description || '',
},
});

Expand All @@ -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,
},
});
}
Expand Down Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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)
}),
},
],
});
Expand All @@ -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',
});
}
Expand Down Expand Up @@ -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)
}),
}),
]);
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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',
});
}
Expand Down Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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 = () => {
Expand All @@ -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)
}),
},
);

Expand All @@ -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',
});
}
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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,
Expand Down
Loading

0 comments on commit 421ce45

Please sign in to comment.