Skip to content

Commit

Permalink
fix(ui): Fix DOM errors for index pages
Browse files Browse the repository at this point in the history 
`CardDescription` component [1] that is copied from `shadcn-ui` wraps
the contents inside a `<p>` tag [2], which semantically suggests that
only textual content is allowed inside `CardDescription`. W3C also
forbids block-level elements inside `<p>` [3].

Fix the DOM errors seen in the browser developer console by
moving/removing any block level element from inside `CardDescription`.

[1]: https://ui.shadcn.com/docs/components/card
[2]: https://github.com/eclipse-apoapsis/ort-server/blob/362912f49a653c24a850bfefb13cb811d3d60597/ui/src/components/ui/card.tsx#L57-L61
[3]: https://www.w3.org/TR/html401/struct/text.html#h-9.3.1

Signed-off-by: Jyrki Keisala <[email protected]>
  • Loading branch information
@Etsija @mmurto
Etsija authored and mmurto committed Jul 3, 2024
1 parent cce5df4 commit 01452b3
Show file tree
Hide file tree
Showing 4 changed files with 78 additions and 92 deletions.
30 changes: 14 additions & 16 deletions ui/src/routes/_layout/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,23 +59,21 @@ export const IndexPage = () => {
<CardHeader>
<CardTitle>Organizations</CardTitle>
<CardDescription>
<div className='flex flex-col'>
<div>Browse your organizations or create a new one</div>
</div>
<div className='py-2'>
<Tooltip>
<TooltipTrigger asChild>
<Button asChild size='sm' className='ml-auto gap-1'>
<Link to='/create-organization'>
New organization
<PlusIcon className='h-4 w-4' />
</Link>
</Button>
</TooltipTrigger>
<TooltipContent>Create a new organization</TooltipContent>
</Tooltip>
</div>
Browse your organizations or create a new one
</CardDescription>
<div className='py-2'>
<Tooltip>
<TooltipTrigger asChild>
<Button asChild size='sm' className='ml-auto gap-1'>
<Link to='/create-organization'>
New organization
<PlusIcon className='h-4 w-4' />
</Link>
</Button>
</TooltipTrigger>
<TooltipContent>Create a new organization</TooltipContent>
</Tooltip>
</div>
</CardHeader>
<CardContent>
<Table>
Expand Down
42 changes: 19 additions & 23 deletions ui/src/routes/_layout/organizations/$orgId/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,29 +174,25 @@ const OrganizationComponent = () => {
</AlertDialogContent>
</AlertDialog>
</CardTitle>
<CardDescription>
<div className='flex flex-col'>
<div>{organization.description}</div>
<div className='py-2'>
<Tooltip>
<TooltipTrigger asChild>
<Button asChild size='sm' className='ml-auto gap-1'>
<Link
to='/organizations/$orgId/create-product'
params={{ orgId: organization.id.toString() }}
>
New product
<PlusIcon className='h-4 w-4' />
</Link>
</Button>
</TooltipTrigger>
<TooltipContent>
Create a new product for this organization
</TooltipContent>
</Tooltip>
</div>
</div>
</CardDescription>
<CardDescription>{organization.description}</CardDescription>
<div className='py-2'>
<Tooltip>
<TooltipTrigger asChild>
<Button asChild size='sm' className='ml-auto gap-1'>
<Link
to='/organizations/$orgId/create-product'
params={{ orgId: organization.id.toString() }}
>
New product
<PlusIcon className='h-4 w-4' />
</Link>
</Button>
</TooltipTrigger>
<TooltipContent>
Create a new product for this organization
</TooltipContent>
</Tooltip>
</div>
</CardHeader>
<CardContent>
<Table>
Expand Down
48 changes: 22 additions & 26 deletions ui/src/routes/_layout/organizations/$orgId/products/$productId/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -176,32 +176,28 @@ const ProductComponent = () => {
</AlertDialogContent>
</AlertDialog>
</CardTitle>
<CardDescription>
<div className='flex flex-col'>
<div>{product.description}</div>
<div className='py-2'>
<Tooltip>
<TooltipTrigger asChild>
<Button asChild size='sm' className='ml-auto gap-1'>
<Link
to='/organizations/$orgId/products/$productId/create-repository'
params={{
orgId: params.orgId,
productId: params.productId,
}}
>
New repository
<PlusIcon className='h-4 w-4' />
</Link>
</Button>
</TooltipTrigger>
<TooltipContent>
Add a new repository for this product
</TooltipContent>
</Tooltip>
</div>
</div>
</CardDescription>
<CardDescription>{product.description}</CardDescription>
<div className='py-2'>
<Tooltip>
<TooltipTrigger asChild>
<Button asChild size='sm' className='ml-auto gap-1'>
<Link
to='/organizations/$orgId/products/$productId/create-repository'
params={{
orgId: params.orgId,
productId: params.productId,
}}
>
New repository
<PlusIcon className='h-4 w-4' />
</Link>
</Button>
</TooltipTrigger>
<TooltipContent>
Add a new repository for this product
</TooltipContent>
</Tooltip>
</div>
</CardHeader>
<CardContent>
<Table>
Expand Down
50 changes: 23 additions & 27 deletions ...rc/routes/_layout/organizations/$orgId/products/$productId/repositories/$repoId/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -190,33 +190,29 @@ const RepoComponent = () => {
</AlertDialogContent>
</AlertDialog>
</CardTitle>
<CardDescription>
<div className='flex flex-col'>
<div>{repo.type}</div>
<div className='py-2'>
<Tooltip>
<TooltipTrigger asChild>
<Button asChild size='sm' className='ml-auto gap-1'>
<Link
to='/organizations/$orgId/products/$productId/repositories/$repoId/create-run'
params={{
orgId: params.orgId,
productId: params.productId,
repoId: params.repoId,
}}
>
New run
<PlusIcon className='h-4 w-4' />
</Link>
</Button>
</TooltipTrigger>
<TooltipContent>
Create a new ORT run for this repository
</TooltipContent>
</Tooltip>
</div>
</div>
</CardDescription>
<CardDescription>{repo.type}</CardDescription>
<div className='py-2'>
<Tooltip>
<TooltipTrigger asChild>
<Button asChild size='sm' className='ml-auto gap-1'>
<Link
to='/organizations/$orgId/products/$productId/repositories/$repoId/create-run'
params={{
orgId: params.orgId,
productId: params.productId,
repoId: params.repoId,
}}
>
New run
<PlusIcon className='h-4 w-4' />
</Link>
</Button>
</TooltipTrigger>
<TooltipContent>
Create a new ORT run for this repository
</TooltipContent>
</Tooltip>
</div>
</CardHeader>
<CardContent>
<Table>
Expand Down

0 comments on commit 01452b3

Please sign in to comment.